/* 다이소 여름신상 css */
body * {transition:all 0.5s;}
.wrap {}
/* ============================1. intro */
.wrap .intro {
    background:url(../images/use_img/bg_pool.png);
    background-size:cover; background-position:center 0;
    padding:100px 0; position:relative; overflow:hidden;
    height:100vh;
}
.wrap .intro .container {
    max-width:1250px; min-width:320px;
    margin:0 auto; text-align:center;
}
.wrap .intro .container * {color:#fff; position:relative; z-index:20;}
.wrap .intro .container h1 {
    text-align:left; margin-bottom:50px;}
.wrap .intro .container h1 a {}
.wrap .intro .container h1 a img {}
.wrap .intro .container p {
    font-size:1.875rem; font-weight:600;
    text-shadow:0 3px 5px rgba(0,0,0,0.4);
}
.wrap .intro .container p:nth-of-type(2) {
    line-height:120%; font-weight:400; margin-bottom:50px; 
}
.wrap .intro .container h2 {position:relative;}
.wrap .intro .container h2 img {}
.wrap .intro .intro_btn {
    display:flex; flex-flow:row nowrap; gap:40px; width:max-content; margin:0 auto;}
.wrap .intro .intro_btn > * {
    width:210px; padding:15px 0; display:flex; flex-flow:row nowrap; align-items:center;
    justify-content:center; border-radius:50px; color:#fff; gap:10px; position:relative; z-index:20;
}
.wrap .intro .intro_btn .product_view_btn {
    background-color:#ED1C24;
}
.wrap .intro .intro_btn .product_view_btn:hover {background-color:#F94C53;}
.wrap .intro .intro_btn .app_down {
    background-color:#161D24; 
}
.wrap .intro .intro_btn .app_down:hover {background-color:#333;}
.wrap .intro .bg_imgs {}
.wrap .intro .bg_imgs * {position:absolute; z-index:10;}
.wrap .intro .bg_imgs img:nth-child(1) {left:60px; top:-90px; animation:left_ani 5s linear infinite alternate;}
.wrap .intro .bg_imgs img:nth-child(2) {left:30px; top:160px; animation:left_ani_star 7s linear infinite alternate;}
.wrap .intro .bg_imgs img:nth-child(3) {right:-350px; top:-370px; animation:tube 8s linear infinite alternate;}
.wrap .intro .bg_imgs img:nth-child(4) {left:-450px; top:400px; animation:tube 8s linear infinite alternate-reverse;}
.wrap .intro .bg_imgs img:nth-child(5) {right:-100px; top:550px; width:500px; animation:tube 6s linear infinite alternate-reverse;}
.wrap .intro .bg_imgs img:nth-child(6) {right:370px; top:-50px; width:300px; animation:sunglass 5s linear infinite alternate;}
/* images keyframes */
@keyframes left_ani {
    from {transform:translate(0, 0) rotate(0);}
    to {transform:translate(50px, 50px) rotate(20deg);}
}
@keyframes left_ani_star {
    from {transform:translate(0, 0) rotate(0);}
    to {transform:translate(30px, 30px) rotate(-20deg);}
}
@keyframes tube {
    from {transform:translate(0, 0) rotate(0);}
    to {transform:translate(-50px, 40px) rotate(-30deg);}
}
@keyframes sunglass {
    from {transform:translate(0, 0) rotate(0);}
    to{transform:translate(-40px, 50px) rotate(-10deg);}
}
/* ============================2. quiz */
.wrap .quiz {height:100vh; padding:100px 0; position:relative; overflow:hidden;}
.wrap .quiz .container {
    margin:0 auto; max-width:1250px; text-align:center;
}
.wrap .quiz .container h2 {
    font-size:3.125rem; font-weight:600; line-height:1.2; margin-bottom:80px; position:relative; z-index:20;
}
.wrap .quiz .container .select {
    width:100%; display:flex; flex-flow:row nowrap; justify-content:space-between; position:relative; z-index:20;
}
.wrap .quiz .container .select li {
    width:230px; border:1px solid #ccc; padding:15px 0; background-color: #fff; height:382px; transition:all 0.1s; 
}
.wrap .quiz .container .select li:hover {border:3px solid #ED1C24;}
.wrap .quiz .container .select li:hover > a p {color:#ED1C24; font-weight:600;}
.wrap .quiz .container .select li > a {}
.wrap .quiz .container .select li > a p:nth-of-type(1) {font-size:1.875rem; line-height:1.5;}
.wrap .quiz .container .select li > a p:nth-of-type(2) {margin:20px 0;}
.wrap .quiz .container .select li > a p:nth-of-type(2) img {}
.wrap .quiz .container .select li > a p:nth-of-type(3) {font-size:1.25rem; line-height:1.5;}
.wrap .quiz .container .quiz_btn {
    display:flex; flex-flow:row nowrap; gap:40px; width:max-content; margin:80px auto 0;
}
.wrap .quiz .container .quiz_btn .quiz_select_btn {
    width:210px; padding:15px 0; display:flex; flex-flow:row nowrap; align-items:center;
    justify-content:center; border-radius:50px; color:#fff; gap:10px; 
    background-color:#ED1C24;
}
.wrap .quiz .container .quiz_btn .quiz_select_btn:hover {background-color:#F94C53;}
.wrap .quiz .container .quiz_btn .quiz_select_btn img {}
.wrap .quiz .container .quiz_imgs {}
.wrap .quiz .container .quiz_imgs .left_items {}
.wrap .quiz .container .quiz_imgs .left_items * {position:absolute; z-index:10;}
.wrap .quiz .container .quiz_imgs .left_items img {opacity:0.5;}
.wrap .quiz .container .quiz_imgs .left_items img:nth-of-type(1) {
    left:0; top:-100px; width:484px;
}
.wrap .quiz .container .quiz_imgs .left_items img:nth-of-type(2) {
    left:20px; top:180px; width:150px; transform:rotate(-25deg) scaleX(-1); 
}
.wrap .quiz .container .quiz_imgs .left_items img:nth-of-type(3) {
    left:15px; bottom:10px; width:320px; transform:rotate(18deg); 
}
.wrap .quiz .container .quiz_imgs .rigth_items {}
.wrap .quiz .container .quiz_imgs .rigth_items * {position:absolute; z-index:10;}
.wrap .quiz .container .quiz_imgs .rigth_items img {opacity:0.5;}
.wrap .quiz .container .quiz_imgs .rigth_items img:nth-child(1) {
    right:-40px; top:-80px; width:300px;
}
.wrap .quiz .container .quiz_imgs .rigth_items img:nth-child(2) {
    right:-60px; top:274px; width:270px;
}
.wrap .quiz .container .quiz_imgs .rigth_items img:nth-child(3) {
    right:-10px; top:486px; width:435px;
}
/* ============================3. new */
.wrap .new {
    padding:100px 0; background-size:cover; position:relative;
}
.wrap .new::before {
    display:block; content:""; position:absolute; z-index:20; left:0; top:0; width:100%; height:100%;
    background:url(../images/use_img/contents_bg.png) 100% center; background-size:cover; opacity:0.5;
}
.wrap .new .container {margin:0 auto; max-width:1250px; text-align:center; position:relative; z-index:30;}
.wrap .new .container > p {font-size:1.25rem;}
.wrap .new .container h2 {font-size:3.125rem; font-weight:700; margin:20px 0 50px;}
.wrap .new .container .new_product {display:flex; flex-flow:column nowrap; gap:30px;}
.wrap .new .container .new_product li {
    border-radius:30px; height:466px; display:flex; flex-flow:row nowrap;
    justify-content:left; align-items:center; gap:80px; width:100%; background-color:#fff; overflow:hidden;
    text-align:left;
}
.wrap .new .container .new_product li:nth-child(2) {text-align:right; justify-content:right;}
.wrap .new .container .new_product li > p {width:500px;}
.wrap .new .container .new_product li > p img {}
.wrap .new .container .new_product li .right_info {}
.wrap .new .container .new_product li .right_info h3 {font-weight:700; font-size:1.875rem; line-height:1.2;}
.wrap .new .container .new_product li .right_info p {font-size:1.875rem; margin:30px 0 120px;}
.wrap .new .container .new_product li .right_info .item_btn {}
.wrap .new .container .new_product li:nth-child(2) .right_info .item_btn {float:right}
.wrap .new .container .new_product li .right_info .item_btn .item_select_btn {
    width:210px; padding:15px 0; display:flex; flex-flow:row nowrap; align-items:center;
    justify-content:center; border-radius:50px; color:#fff; gap:10px; 
    background-color:#ED1C24;
}
.wrap .new .container .new_product li .right_info .item_btn .item_select_btn:hover {background-color:#F94C53;}
.wrap .new .container .new_product li .right_info .item_btn .item_select_btn img {}
/* ============================4. pet */
.wrap .pet {}
.wrap .pet .container {padding:100px 0; text-align:center; position:relative;}
.wrap .pet .container > p {font-size:1.25rem;}
.wrap .pet .container > h2 {font-size:3.125rem; font-weight:700; margin:20px 0 100px;}
.wrap .pet .container iframe {border:2px solid #000;}
.wrap .pet .container .text_box {
    position:absolute; left:50%; transform:translate(-50%);
    top:556px; width:892px; background-color:rgba(0,0,0,0.4);
}
.wrap .pet .container .text_box .left {}
.wrap .pet .container .text_box .left li {
    position:absolute; display:flex; flex-flow:row nowrap; align-items:center;
}
.wrap .pet .container .text_box .left li:nth-child(1) {left:0; top:0;}
.wrap .pet .container .text_box .left li:nth-child(2) {left:60px; top:126px;}
.wrap .pet .container .text_box .left li {}
.wrap .pet .container .text_box .left li img {width:30px; transform:scaleX(-1); position:relative; top:4px;}
.wrap .pet .container .text_box .left li span {color:#fff; width:175px; padding:18px 0; background-color:#66B6FF;}
.wrap .pet .container .text_box .right {}
.wrap .pet .container .text_box .right li  {
    position:absolute; display:flex; flex-flow:row nowrap; align-items:center;
}
.wrap .pet .container .text_box .right li:nth-child(1) {right:0; top:0;}
.wrap .pet .container .text_box .right li:nth-child(2) {right:60px; top:126px;}
.wrap .pet .container .text_box .right li img {width:30px; position:relative; top:4px;}
.wrap .pet .container .text_box .right li span {color:#fff; width:175px; padding:18px 0; background-color:#66B6FF;}
.wrap .pet .container .pet_btn {
    display:flex; flex-flow:row nowrap; gap:40px; width:max-content; margin:30px auto 0;
}
.wrap .pet .container .pet_btn .pet_btn {
    width:210px; padding:15px 0; display:flex; flex-flow:row nowrap; align-items:center;
    justify-content:center; border-radius:50px; color:#fff; gap:10px; 
    background-color:#ED1C24;
}
.wrap .pet .container .pet_btn .pet_btn:hover {background-color:#F94C53;}
.wrap .pet .container .pet_btn .pet_btn img {}
/* ============================5. footer */
.wrap .footer {padding:50px 0; background-color:#161D24;}
.wrap .footer * {color:#fff;}
.wrap .footer .container {max-width:1250px; margin:0 auto;}
.wrap .footer .container .top {
    display:flex; flex-flow:row nowrap; justify-content:space-between; padding:10px 0;
    border-bottom:1px solid #fff; margin-bottom:10px;
}
.wrap .footer .container .top > p {font-size:0.75rem;}
.wrap .footer .container .top .provision {}
.wrap .footer .container .top .provision a {margin-left:20px; font-size:0.875rem;}
.wrap .footer .container .top .provision a:first-child {margin-left:0;}
.wrap .footer .container .bottom {
    display:flex; flex-flow:row nowrap; justify-content:space-between;
}
.wrap .footer .container .bottom .left {font-size:0.875rem; font-weight:700;}
.wrap .footer .container .bottom .middle {}
.wrap .footer .container .bottom .middle .certify {
    display:flex; flex-flow:row nowrap; gap:20px; margin-bottom:20px;}
.wrap .footer .container .bottom .middle .certify span {
    display:flex; flex-flow:row nowrap; gap:10px; align-items:center; font-size:0.875rem;
}
.wrap .footer .container .bottom .middle .certify span img {}
/* 회사정보 start */
.wrap .footer .container .bottom .middle .company {}
.wrap .footer .container .bottom .middle .company * {font-size:0.875rem;}
.wrap .footer .container .bottom .middle .company .com_info {}
.wrap .footer .container .bottom .middle .company .info1 {}
.wrap .footer .container .bottom .middle .company .info2 {margin:10px 0;}
.wrap .footer .container .bottom .middle .company .info3 {}
.wrap .footer .container .bottom .middle .company .com_info span {line-height:1.2;}
.wrap .footer .container .bottom .middle .company .com_info span::after {
    display:inline-block; content:"|"; margin:0 12px;
}
.wrap .footer .container .bottom .middle .company .info2 span:last-child::after {display:none;}
.wrap .footer .container .bottom .middle .company .com_info a {}
/* 회사정보 end */
.wrap .footer .container .bottom .right {}
.wrap .footer .container .bottom .right .family {
    padding:7px 15px; background-color:#161D24; 
    border:1px solid #fff; border-radius:5px;
}
.wrap .footer .container .bottom .right .family img {}
.wrap .footer .container .bottom .right .family option {}