*{
    -webkit-tap-highlight-color: transparent;
}


header{position: fixed; width: 100%; top: 0; font-family: 'Poppins'; color: #fff; z-index: 999; transition: 0.3s; /*padding: 13px 0 0 50px;*/}
header.on{ background-color: rgba(0, 0, 0,0.7); padding: 0; border-bottom: solid 1px white;}
/* header .h-in{display: flex; justify-content: center; align-items: center; padding: 20px;} */
header h1{float: left;padding-top: 27px;margin-left: 17px;}
header .h-in {display: flex;justify-content: space-between;height: 88px;}
/* header.on .h-in{display: flex;justify-content: space-between;height: 68px;} */
/* header.on .h-in h1 {opacity: 1; visibility: visible;} */
/* header.on .h-in h1 img{width: 70%;} */
header .h-in nav{padding-top: 15px;}
header .h-in nav .navi{display: flex;position: relative;}
header .h-in nav .navi > li{text-align: center; transition: 0.3s; padding: 20px 50px;}
header .h-in nav .navi > li > a{color: #fff; font-size: 18px; text-transform: uppercase; padding: 5px 20px; z-index: 1; width: 170px; border-radius: 30px;}
/* header .h-in nav .navi > li.active > a,header .h-in nav .navi > li > a:hover{background-color: red;} */
/*header .h-in nav .navi .depth{width:100%;height: 240px;position: absolute;top: 127%;right: 0px;background-color: rgba(0, 0, 0,0.7); border-radius: 0px 0px 10px 10px;padding: 0;}
*/
    header .h-in nav .navi .depth {
        width: 100%;
        /*        height: 330px;
*/
        height: 250px;
        position: absolute;
        top: 127%;
        right: 0px;
        background-color: rgba(0, 0, 0,0.7);
        border-radius: 0px 0px 10px 10px;
        padding: 0;
    }

header .h-in nav .navi .depth ul{    width: 213px;float: right;transform: translateX(-217px);text-align: center;margin-top: 15px;}
header .h-in nav .navi .depth li a {display: block; padding: 13px 10px; color: #fff; font-family: 'pretendard-L'; font-weight: 400; text-transform: uppercase; transition: 0.3s;}
header .h-in nav .navi .depth li a:hover{color: #e32d31; font-family: "pretendard-B";}
 
    header .h-in nav .navi .depth .ppf-snb {
        transform: translateX(0);
        margin-top: 0px;
    }




/* header .h-in nav .navi > li:hover .depth{opacity: 1; padding: 70px 0 20px;}
header .h-in nav .navi > li:hover > a{color: #000;; font-weight: 500;}
header .h-in nav .navi > li:hover > a::after{content: ""; display: block; width: 55%; height: 1px; background-color: #c5c3c3; position:absolute; left: 50%; transform: translateX(-50%); bottom: 15px; } */
header .h-in nav .navi > li:nth-of-type(1) > a, header .h-in nav .navi > li:nth-of-type(4) > a{color: #fff;  }
header .h-in nav .navi > li:nth-of-type(1) > a::after, header .h-in nav .navi > li:nth-of-type(4) > a::after{display: none;}

/* 사이트 상단미니팝업 */
header .site-pop{width: 100%; height: 40px; background-color: #1a1a1a; display:none;}
header .site-pop.on{display: none;}
header .site-pop.onn{display: block;}
header .site-pop p{font-size: 16px; line-height: 40px;color: #fff;font-weight: 600; margin-left: 20px;}
header .site-pop p span a{text-decoration: underline;padding-bottom: 5px; color: #fff; font-weight: 600;}

/* 리뉴얼 팝업 */

.re-pop-wrapper{position: fixed;z-index: 999;width: 100%;height: 100vh; top: 0;background-color: rgba(0, 0, 0, 0.562);}
.re-pop-close{cursor: pointer;;position: absolute; right: 0; top: 0;width: 50px; height: 50px; background-color: #240081;}
.line-before{position:absolute; top: 50%; left: 25%;width: 25px; height: 1px; background-color: #fff; transform: rotate(45deg);}
.line-after{position:absolute; top: 50%; left: 25%;width: 25px; height: 1px; background-color: #fff; transform: rotate(-45deg);}
.re-pop-in{position: relative;width: 450px;height: 410px;padding: 30px;margin: 0 auto;transform: translateY(55%);background-color: #4800ff;}
.re-pop-in h2{font-family: 'SB-AGRO-M'; font-size: 28px; margin-top: 8%; margin-bottom: 5%;line-height: 34px;color: white; font-weight: 100;}
.re-pop-in h2 span{color: #96ff00;} 
.re-pop-in p{font-family: 'pretendard-L'; font-weight: 100; color: white; line-height: 24px; letter-spacing: -1px; font-size: 16px;}
.re-pop-img{width: 79%;margin-left: 100px;margin-top: 14px;}
.re-pop-btn{width: 450px;height: 55px; margin: 0 auto; transform: translateY(226px);}
.re-pop-btn button{width: 100%; height: 100%;background-color: #240081; border: none; font-family: 'pretendard-L';}
.re-pop-btn a{color: white;}

@media screen and (max-width: 450px){
    .re-pop-in{width: 340px;height: 350px;transform: translateY(45%);}
    .re-pop-img{width: 60%;margin-left: 130px;margin-top: -16px;}
    .re-pop-btn{width: 340px; transform: translateY(157px);}
}
@media screen and (max-width: 280px){
    .re-pop-in {width: 250px; height: 390px; transform: translateY(27%);}
    .re-pop-img{width: 80%; margin-left: 60px; margin-top: 4px;}
    .re-pop-btn{width: 250px;transform: translateY(105px);}
}

@media screen and (max-width: 1000px){
    header{padding: 0;}
    header .h-in nav .navi{display: none;}
    header .h-in h1{display: none;}
    header .h-in{padding-top: 22px;margin-right: 22px;}
}

/* 모바일 헤더 */
.mo_nav{display: none;}
.hambtn{display: none;}

@media screen and (max-width: 1000px){
    .mo_nav{display: block;}
    .hambtn{display: block;width: 30px;height: 20px;position: relative; cursor: pointer;}
    .hambtn span{background-color: #fff;width: 100%;height: 2px;position: absolute;transition: 0.3s;}
    .hambtn span:nth-of-type(1){top: 0;}
    .hambtn span:nth-of-type(2){top: 50%;}
    .hambtn span:nth-of-type(3){top: 100%;}

    .mo_nav{position: fixed; top: 0; background-color: #000; width: 100%; height: 100vh; transform: translateX(-100%); transition: 0.3s;}
    .mo_nav > a{display: block;  padding: 20px;}
    .mo_nav .mo_navi {margin-top: 50px;}
    .mo_nav .mo_navi li a{color: #fff; text-transform: uppercase;}
    .mo_nav .mo_navi > li{ position: relative; cursor: pointer;}
    .mo_nav .mo_navi > li > a{border-bottom: 1px solid rgba(255, 255, 255, 0.3); font-size: 18px; padding: 20px; display: block;}
    .mo_nav .mo_navi > li > a i{width: 12px; height: 8px; background: url('/img/arrow-down-s-line.png') no-repeat; background-position: center; background-size: cover; display: inline-block; position: absolute; right: 20px; transition: 0.3s;}
    .mo_nav .mo_navi > li .depth_mo{display: none; margin: 15px 0 15px 15px;}
    .mo_nav .mo_navi > li .depth_mo > li a{padding: 15px 20px; display: block;}
    .mo_nav .mo_navi > li > a.on{color: #c62125;}
    .mo_nav .mo_navi > li > a.on i{background-image: url('/img/arrow-up-s-line.png');}
    .mo_nav.on{transform: translateX(0);}
    .hambtn.on {z-index: 999;}
    .hambtn.on span:first-child{top: 50%; transform: translateY(-50%) rotate(45deg);}
    .hambtn.on span:nth-of-type(2){display: none;}
    .hambtn.on span:nth-of-type(3){top: 50%; transform: translateY(-50%) rotate(-45deg);}
}

.contents .main{background: url('/img/main_bg.jpg') no-repeat; color: #fff; height: 100vh; background-position: top center; overflow: hidden;}
.contents .main .titbox {position: relative; top: 45%;}
.contents .main .titbox img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(5);}
.contents .main .titbox .title {text-transform: uppercase; font-family: 'Poppins'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.contents .main .titbox .title dt{font-size: 170px; font-weight: 700; margin-left: -12%; opacity: 0;}
.contents .main .titbox .title dd{font-size: 140px; margin-left: 15%; opacity: 0;}
.contents .main ul{position: absolute; bottom: 0; display: flex; justify-content: space-around; width: 100%; border-top: 1px solid rgba(225, 225, 225, 0.5); z-index: 55;}
.contents .main ul li {font-size: 18px; padding: 45px 90px;  display: flex; flex-direction: column; flex: 1;}
.contents .main ul li:first-child{border-right: 1px solid rgba(225, 225, 225, 0.5);}
.contents .main ul li:last-child{border-left: 1px solid rgba(225, 225, 225, 0.5);}
.contents .main ul li a{color: #fff; font-size: 35px; font-weight: 600; display: block; margin: 10px 0;}
.contents .main ul li span{font-weight: 500;}
.contents .main ul li p{font-weight: 200; line-height: 1.5; margin-top: 10px;}
.contents .main ul li dl{font-weight: 200; display: flex; align-items: center;}
.contents .main ul li dl dt::after{content: ""; display: inline-block; width: 1px; height: 15px; background-color: rgba(225, 225, 225, 0.5); margin: 0 10px;}

@media screen and (max-width: 1240px){
    .contents .main .titbox .title dt{font-size: 11vw;}
    .contents .main .titbox .title dd{font-size: 10vw;}
}

@media screen and (max-width: 1000px){
    .contents .main .titbox{top: 40%;}
    .contents .main .titbox .title{text-align: center;}
    .contents .main .titbox .title dt{font-size: 75px; margin-left: 0;}
    .contents .main .titbox .title dd{font-size: 65px; margin-left: 0;}

    .contents .main ul{display: block;}
    .contents .main ul li{padding: 20px; font-size: 14px;}
    .contents .main ul li:first-child {border-right: none;border-bottom: 1px solid rgba(225, 225, 225, 0.5);
    }
    .contents .main ul li:last-child{border-left: none; }
    .contents .main ul li p{font-size: 13px;}
    .contents .main ul li a{font-size: 20px;}
    .contents .main ul li dl{font-size: 13px;}
}

@media screen and (max-width: 500px){
    .contents .main .titbox .title dt{font-size: 50px;}
    .contents .main .titbox .title dd{font-size: 43px;}
}

section{padding: 149px 0 190px;}
.tit{color: #fff; text-align: center; margin-bottom: 80px;}
.tit.left{text-align: left;}
.tit h2{font-size: 50px; margin-bottom: 15px; text-transform: uppercase; font-family: 'Poppins';}
.tit h2.color01{color: #121212;}
.tit p{font-size: 18px; font-weight: 300;}
.tit p.color02{color: #121212;}

@media screen and (max-width: 1000px){
    section{padding: 15% 0;}
}

/* studio */
.studio{background-color: #f2f2f2; padding-top: 0px;}
.studio .tit{color: #1c1c1c;padding-top: 140px;}
.studio ul{display: flex; color: #1c1c1c; margin-bottom: 50px;}
.studio ul li{flex: 1; text-align: center;margin-right: 50px; font-size: 25px; display: flex; justify-content: center; height: 414px; position: relative;} 
.studio ul li:last-child{margin-right: 0;}
.studio ul li p{z-index: 1; transition: 0.5s; font-size: 18px; margin-top: 20px;line-height: 36px;}
.studio ul li span{font-weight: 500; color: #c62125;}

@keyframes blink {
    0%{
        transform: translate(-50%,-50%) scale(0.95);
    }
    50% {
        transform: translate(-50%,-50%) scale(1);
    }
    100% {
        transform: translate(-50%,-50%) scale(0.95);
    }
}

@media screen and (max-width: 1000px){
    .tit h2{font-size: 28px;}
    .tit p{font-size: 16px; line-height: 1.3; word-break: keep-all;}

    .studio ul{flex-wrap: wrap;}
    .studio ul li{flex: auto; width: calc(99.9%/2 - 30px/2); margin-right: 30px; padding: 32px 0;}
    .studio ul li:nth-child(2n){margin-right: 0;}
    .studio ul li:nth-child(-n+2){margin-bottom: 100px;}
}

@media screen and (max-width: 500px){
    .studio ul li{ width: 100%; margin-right: 0px; margin-bottom: 100px;}
    /* .studio ul li p{width: 360px;} */
}

/* system */
.system {position: relative; overflow: hidden; height: 100vh; padding: 0;background-color: #f7f7f7}
.system .tit{position: static; padding-top: 120px; margin-left: 16%;}
.system .scrollbox{position: relative;padding-top: 35px;}
.system .scrollbox .cate_list{position: absolute;  left: 95px;  display: flex; flex-direction: column; align-items: flex-start; font-family: 'Poppins';}
.system .scrollbox .cate_list li{font-size: 20px; color: #9e9e9e; margin-bottom: 80px; display: inline-block; cursor: pointer;}
.system .scrollbox .cate_list li:last-of-type{margin-bottom: 0;}
.system .scrollbox .cate_list li.on{color: #c62125; font-weight: 600; position: relative;}
.system .scrollbox .cate_list li.on::after{content:''; width:100%; height:3px; position:absolute; background:#c62125; bottom:-8px; left:0;}
.system .scrollbox .txt_list{position: absolute; left: 16%; }
.system .scrollbox .txt_list ul {overflow: hidden; padding-top: 20px;}
.system .scrollbox .txt_list ul li{margin-bottom: 150px;}
.system .scrollbox .txt_list ul li:last-of-type{margin-bottom: 0;}
.system .scrollbox .txt_list ul li .text_box {opacity: 0.3; transition: 0.1s;}
.system .scrollbox .txt_list ul li .text_box span{font-size: 20px; color: #fff; background-color: #000; border-radius: 10px; width: 182px; height: 49px; line-height: 49px; text-align: center; display: block; transition: 0.6s;}
.system .scrollbox .txt_list ul li .text_box span.catetit{width: auto; height: auto; background-color: transparent; color: #a7a7a7; font-size: 28px; text-align: left;}
.system .scrollbox .txt_list ul li .text_box strong{display: block; font-size: 56px; font-weight: 700; margin: 25px 0; font-family: 'Poppins';}
.system .scrollbox .txt_list ul li .text_box p{font-size: 18px; color: #444; line-height: 1.5; margin-bottom: 20px;}
.system .scrollbox .txt_list ul li .text_box a{font-size: 16px; color: #a7a7a7; letter-spacing: 0.05em; font-family: 'Poppins'; transition: 0.3s;}
.system .scrollbox .txt_list ul li .text_box a:hover{color: #c62125;}
.system .scrollbox .txt_list ul li .text_box a i{margin-left: 5px; font-weight: 600; vertical-align: bottom;}
.system .scrollbox .txt_list ul li .text_box.on {opacity: 1;}
.system .scrollbox .txt_list ul li .text_box.on span{ color: #fff; background-color: #c62125;}
.system .scrollbox .txt_list ul li .text_box.on span.catetit{background-color: transparent; color: #c62125;}
.system .img_list{position: absolute; right: 0; top: 0; z-index: -1;}
.system .img_list ul li{position:absolute; top:0; right:0; width:850px; height:850px;}
.system .img_list ul li .imgbox{background-repeat: no-repeat; background-size: cover; height: 100vh; opacity: 0; transition: 0.6s ease-in-out; overflow: hidden;}
.system .img_list ul li .imgbox.on{opacity: 1;}

.system_mo{display: none;}

@media screen and (max-width: 1550px){
    .system .scrollbox .cate_list{left: 55px;}
    .system .scrollbox .cate_list li{font-size: 16px;}
    .system .scrollbox .txt_list ul li .text_box span{font-size: 15px;}
    .system .scrollbox .txt_list ul li .text_box strong{font-size: 35px;}
    .system .scrollbox .txt_list ul li .text_box p{font-size: 15px;}
    .system .scrollbox .txt_list ul li .text_box a{font-size: 13px;}
    .system .img_list ul li{width: 500px;}
}

@media screen and (max-width: 1160px){
    .system .tit{margin-left: 14%;}
    .system .scrollbox .cate_list{left: 35px;}
    .system .scrollbox .cate_list li{font-size: 14px;}
    .system .scrollbox .txt_list ul li .text_box span{font-size: 13px;}
    .system .scrollbox .txt_list ul li .text_box strong{font-size: 28px;}
    .system .scrollbox .txt_list ul li .text_box p{font-size: 13px;}
    .system .img_list ul li{width: 470px;}

}

@media screen and (max-width: 1000px){
    .system{display: none;}
    .system_mo{display: block;}
    .system_mo .wrap .sys_slide .swiper-slide{text-align: center;}
    .system_mo .wrap .sys_slide .swiper-slide img{width: 100%; margin-bottom: 20px;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox{text-align: left;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox span{font-size: 12px; color: #fff; background-color: #c62125; padding: 7px 20px; border-radius: 10px; letter-spacing: 2px;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox span.catetit{display: block; background-color: transparent; color: #c62125; margin-bottom: 15px; font-size: 13px; text-align: left; padding: 0; font-weight: 600;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox strong{display: block; margin: 20px 0 15px; text-transform: uppercase; font-size: 25px; font-weight: 800;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox p{font-size: 16px; color: #444; line-height: 1.5; margin-bottom: 20px;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox p br{display: none;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox a{font-size: 14px;color: #a7a7a7;letter-spacing: 0.05em; transition: 0.3s;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox a:hover{color: #c62125;}
    .system_mo .wrap .sys_slide .swiper-slide .txtbox a i{margin-left: 5px;font-weight: 600;vertical-align: bottom;}
    .system_mo .wrap .swiper-pagination02{margin-top: 30px; width: 100%; text-align: center;}
    .system_mo .wrap .swiper-pagination02 span{width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; transition: 0.3s;}
    .system_mo .swiper-pagination02 span.swiper-pagination-bullet-active {background: #c62125; width: 20%;border-radius: 10px;}
}


/* sale */
.sale{width:100%; padding: 0px; margin: 0 auto;}
.sale ul{width: 100%;}
.sale ul li {width: 33.3333%; float: left; position: relative;}
.sale ul li img{width: 100%;}
.sale ul li .promo{width: 90%;position: absolute;top: 45%;color: white;transform: translateX(5%);text-align: center;}
.sale ul li .promo h2{font-size: 38px;margin-bottom: 20px;line-height: 48px;}
.sale ul li .promo p{margin-bottom: 20px; line-height: 28px;}
.sale ul li .promo button{width: 240px;height: 35px;border: solid 1px white;background: none; color: white;}
.sale ul li .promo button:hover{background: white; color: black; transition: all .3s;}

@media screen and (max-width: 1000px){
    .sale ul li {
        width: 100%;
    }
    .sale ul li .promo{
        top: 35%;
    }
}


/* skill */
.skill{padding-bottom: 100px; background-image: url(/img/sunpro_skill_background2.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.skill .wrap .tit{text-align: center;}
.skill .wrap>ul{display: flex; align-items: center;}
.skill .wrap>ul>li{width: 50%;}
.skill .wrap ul li{position: relative;}
/* .skill .wrap ul li:first-child{margin-right: 140px;} */
.skill .wrap ul li .rig strong{font-size: 49px; font-family: 'Poppins';}
.skill .wrap ul li .rig span{font-size: 20px; display: block; margin: 20px 0 15px;}
.skill .wrap ul li .rig p{font-size: 16px; color: #8e8e8e; line-height: 1.3;}
.tit-skill{width: 300px; height: 45px; color: #c62125; border-radius: 10px; border: solid 1px #c62125;margin-bottom: 30px; background-color: white;}
.tit-skill p{height: 45px; line-height: 45px; text-align: center; font-size: 20px; font-weight: 500;}
/* .skill .wrap ul li.skill01{transform: translateY(165px); } */
.skill .wrap ul li.skill01 ul>li{width: 90%;}
.skill .wrap ul li.skill01 ul>li span{width: 35px; height: 52px; display: inline-block;  vertical-align: middle; margin-left: 20px; margin-right: 10px;}
.skill .wrap ul li.skill01 ul>li span img{width: 100%;} 
/* .skill .wrap ul li.skill01 ul>li p{height: 62px;line-height: 62px;} */
.skill .wrap ul li.skill01 .rig{position: absolute; bottom: 14%; margin-left: -12%;}
.skill .wrap ul li.skill02 .rig{position: absolute; bottom: 15%; margin-left: -12%;}
.skill .wrap ul li.skill02 .lef img{width: 90%; float: right;}
.skill .wrap ul li.skill01 .lef ul li{width: 720px;height: 65px;background: #c62125;color: white;margin-bottom: 25px;}
.skill .wrap ul li.skill01 .lef ul li p{height: 65px; line-height: 65px;}
section.skill .wrap ul li{transition: all 0.5s ease-out;}


/* skill_mo */
.skill_mo{display: none;}
.skill_mo .wrap .tit{margin-bottom: 30px;}
/* .skill_mo .wrap ul li:first-child {margin-right: 0; transform: none;} */
.skill_mo .wrap ul li.skill01{transform: none;}
.skill_mo .wrap ul li .lef{text-align: center; margin-bottom: 20px;}
.skill_mo .wrap ul li .lef img{width: 100%;}

@media screen and (max-width: 1000px){
    .skill{display: none;}
    section.skill_mo{display: block;}
    .skill .wrap>ul>li{width: 100%;}
    .skill .wrap ul li.skill01 .lef ul li{width: 100%;margin: 0 auto;margin-top: 20px;}
    .skill .wrap ul li.skill01 ul>li span img{margin-top: 7px;}
    .skill .wrap ul li.skill01 .lef ul li p{ line-height: 65px;}
}
@media screen and (max-width: 647px){
    .skill .wrap ul li.skill01 .lef ul li{height: 85px;}
    .skill .wrap ul li.skill01 .lef ul li p{width: 99%;line-height: 10px;height: 85px;}
}

/* tech */
.tech{background: url('/img/sec06_bg.jpg') no-repeat; background-size: cover; padding: 0;}
.tech  ul{display: flex;}
.tech ul li{color: #fff; text-align: center; border-right: 2px solid rgba(225, 225, 225, 0.5); display: flex; justify-content: center; align-items: center; padding: 80px 0;}
.tech ul li:nth-of-type(1){flex: 1.5;}
.tech ul li:nth-of-type(2){flex: 1;}
.tech ul li:nth-of-type(3){flex: 1;}

.tech ul li:last-child{border-right: none;}
.tech ul li a{color: #fff;}
.tech ul li strong{font-size: 49px; font-family: 'Poppins'; text-align: left; display: block; position: relative; margin-left: -25%;}
.tech ul li strong::after{content: ""; display: inline-block; width: 50%; height: 1px; background-color: rgba(225, 225, 225, 0.5); margin-left: 20px; position: absolute; bottom: 20%;}
.tech ul li  dl dt{font-size: 20px; margin-bottom: 10px; font-weight: 200;}
.tech ul li  dl dd{font-size: 40px; font-weight: 600; font-family: 'Poppins';}

@media screen and (max-width: 1000px){
    .tech{background-position: top right;}
    .tech ul {display: block;}
    .tech ul li{display: block; text-align: left; padding-left: 40px; border-bottom: 1px solid rgba(225, 225, 225, 0.5); padding: 40px;}
    .tech ul li:last-child{border-bottom: none;}
    .tech ul li strong{font-size: 30px; margin-left: 0;}
    .tech ul li strong::after{width: 25%; margin-left: 10px;}
    .tech ul li dl dd{font-size: 30px;}
    .tech ul li dl dt{font-size: 16px;}
}

/* sns */
/* .sns{padding: 0; background-color: #eee;}
.sns ul{display: flex;}
.sns ul li{flex: 1; text-align: center; border-right: 2px solid #d5d5d5; padding: 80px 0;}
.sns ul li.mo{display: none;}
.sns ul li a {display: block;}
.sns ul li a span{display: block; font-size: 20px; margin-top: 15px;}

@media screen and (max-width: 1000px){
    .sns ul{flex-wrap: wrap;}
    .sns ul li{width: calc(99.9%/3); flex: auto; border-right: none; padding: 35px 0; padding: 25px 0;}
    .sns ul li.mo{display: block;}
    .sns ul li a img{width: 25%}
    .sns ul li a span{font-size: 13px;}
} */

/* footer */
footer{position: relative;background-color: #2a2a2a; color: white; padding: 70px 0; font-size: 15px; font-weight: 300; overflow: hidden;}
footer .wrap{display: flex; justify-content: space-between;margin-bottom: 5px;}
footer .wrap .center{margin-top: 30px;}
footer .wrap .center li{margin-bottom: 20px; line-height: 26px;}
footer .wrap .center .b{font-weight: 500;}
/* footer .wrap .center li:first-child{font-size: 16px;} */
footer .wrap .center > span, footer .wrap .rig > span{font-weight: 600; letter-spacing: 3px;}
footer .wrap .center p{margin: 15px 0 10px;}
footer .wrap .rig{margin-top: 78px;}
/* footer .wrap .rig ul{float: left;} */
footer .wrap .rig p{margin-bottom: 28px;font-weight: 500;letter-spacing: 3px;}
footer .wrap .rig ul li a{color: white;}
footer .wrap .sns ul li{float: left;}
footer .wrap .rig ul:nth-of-type(1){margin: 10px 0;} 
footer .wrap .rig ul:last-child li{margin-right: 15px;line-height: 26px;}
footer .wrap .rig ul:last-child li:last-child{margin-right: 0;}
footer .wrap .rig ul:last-child li::after{display: none;}
footer .copy{width: 1440px; height: 40px; margin: 0 auto; border-top: solid 1px #555;}
footer .copy p{margin-top: 20px; float: right; color: #555;}
@media screen and (max-width: 1000px){
    /* footer{font-size: 12px;} */
    footer .wrap{display: block;}
    footer .wrap .lefbox{display: block;}
    footer .wrap .center{margin-left: 0;}
    footer .wrap .center > span, footer .wrap .rig > span{display: none;}
    footer .wrap .rig ul{margin-top: 10px;}
    footer .wrap .rig ul:nth-of-type(2){display: none;}
    footer .wrap ul li::after{margin: 0 5px;}
}
@media screen and (max-width: 1613px){
    footer .copy {width: 90%;}
}
/* 탑버튼 */
.topbtn{position: absolute;right: 25px;; top: 20px; cursor: pointer; width: 50px; border-radius: 30px;height: 70px; line-height: 50px; text-align: center; z-index: 99; background-color: #c62125;}
.topbtn:hover{background-color: #dd3033;}
.topbtn span{color: #fff; font-size: 17px; font-family: 'Poppins';}
.topbtn p{font-weight: 600;color: #fff}

/* 카카오채팅 */
.kakao-chat{position: fixed;right: 20px;bottom: 20px;cursor: pointer;z-index: 99;}
.chat-info{position: fixed;width: 125px;background-color: white;border-radius: 4px;padding: 10px 0px;right: 20px;bottom: 88px;line-height: 18px;box-shadow: 0px 0px 5px rgba(153, 153, 153, 0.445);display: none;}
.chat-info p{margin-left: 15px;font-size: 14px; font-weight: 500;vertical-align: middle; font-family: 'pretendard-B';line-height: 18px;letter-spacing: -1px;}
.chat-info img{width: 15px; height: 15px; vertical-align: middle;}
.chat-img{display: none;}
.chat-close{position: absolute;right: 6px;top: 6px;width: 10px;height: 10px;opacity: 0.5;cursor: pointer;}
.chat-close::before{position: absolute; left: 4px; content: " "; height: 10px; width: 2px; transform: rotate(45deg); background-color: #999;}
.chat-close::after{position: absolute; left: 4px; content: " "; height: 10px; width: 2px; transform: rotate(-45deg); background-color: #999;}
 
/* 구홈페이지 패턴다운로드 */
.download {
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    z-index: 99;
}

.down-info {
    position: fixed;
    width: 245px;
    background-color: #c62125;
    border-radius: 40px;
    right: 20px;
    bottom: 160px;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.335);
    display: none;
}

    .down-info p {
        margin-left: 20px;
        font-size: 14px;
        font-weight: 500;
        color: white;
        vertical-align: middle;
        font-family: 'pretendard-B';
        line-height: 18px;
    }

.down-close {
    position: absolute;
    right: 16px;
    top: 13px;
    width: 10px;
    height: 10px;
    opacity: 0.5;
    cursor: pointer;
}
/* .down-close::before{position: absolute; left: 4px; content: " "; height: 10px; width: 2px; transform: rotate(45deg); background-color: #fff;}
.down-close::after{position: absolute; left: 4px; content: " "; height: 10px; width: 2px; transform: rotate(-45deg); background-color: #fff;} */


/* 스크롤 다운 */
.scroll-down {
    display: none;
    position: absolute;
    top: 45%;
    right: 0;
    bottom: 10%;
    left: 0;
    margin: auto;
    width: 34px;
    height: 55px;
    z-index: 999;
}
.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 2px solid #fff;
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
  }
.scroller {
    width: 3px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
}
@keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
}

@media screen and (min-width:1160px){
    .scroll-down{
         display: block;
    }
 }
@media screen and (min-width:1291px){
    .scroll-down{
        display: block;
        bottom: 5%;
    }
}
@media screen and (min-width:1741px){
    .scroll-down{
        display: block;
        bottom: 0;
    }
}


/* 익스 */
@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    .sale .wrap ul li .txt{display: flex;}
    .sale .wrap ul li .imgbox .txt span{text-align: initial;}
}

/* 메인 두번째 svg */
/* .sec-svgslide{
    width: 55%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: transformX 1s ease-out forwards;
} */
.sec-svgslide{    
    position: absolute;
    top: 30%;
    left: 31%;
    /* transform: translate(-50%,-50%); */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 206px;
}
.sec-svgslide svg{width: 40%;}
.path{
    stroke: #fff;
    stroke-width: 1px;
}
#logo{
    height: 215px;
    position: relative;
    animation: fill 1.5s ease forwards;
    animation-delay: 3.4s;
    animation-duration: 1s;
}
#logo .path1{
    stroke-dasharray: 463;
    stroke-dashoffset:463;
    fill: #cd2527;
    /* animation: opacity 1s ease forwards; */
    /* animation-duration: 2.5s; */
}
#logo .path2{
    stroke-dasharray: 632;
    stroke-dashoffset: 632;
    fill: #cd2527;   
    /* animation: opacity 1s ease forwards; */
    /* animation-duration: 2.5s; */
}
#logo .path3{
    stroke-dasharray: 536;
    stroke-dashoffset: 536;
    animation: line-anim 2.6s ease forwards;
    animation-delay: 0.5s;
}
#logo .path4{
    stroke-dasharray: 277;
    stroke-dashoffset: 277;
    animation: line-anim 2.6s ease forwards;
    animation-delay: 0.5s;
}
#logo .path5{
    stroke-dasharray: 1541;
    stroke-dashoffset: 1541;
    animation: line-anim 5s ease forwards;
    animation-delay: 1s;
}
#logo .path6{
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: line-anim 2s ease forwards;
    animation-delay: 1s;
}

@keyframes line-anim{
    100%{
        stroke-dashoffset: 0;
    }
}

@keyframes fill{  

    0%{
        opacity: 0;
    }
    50%{
        fill: white
    } 
    100%{
        opacity: 1;
        fill: white;
    }
}

@keyframes trans-formX{
    0%{
        left: 40%;
    }
    100%{
        left: 50%
    }
}

/* @keyframes opacity{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
} */

@media screen and (max-width:1000px) {
    .contents .main .sec-svgslide{ width: 100%;top: 26%;left: 23%;}
    .sec-svgslide svg {width: 55%;}
}
@media screen and (max-width:450px){
    .contents .main{height: 80vh;}
    .contents .main .sec-svgslide{top: 20%;}
}
@media screen and (max-width:375px){
    #logo{height: 105px;}
}
@media screen and (max-width:280px){
    .contents .main .sec-svgslide{top: 15%;}
}


/* 메인 비디오 추가 */
.contents .main .swiper-slide {overflow: hidden;}
.contents .main .swiper-slide video{position: absolute;left: 50%; transform: translate(-50%, -50%); top: 50%; transform: translate(-50%, -50%); width: auto;height: auto;min-width: 100%;  min-height: 100%;}

.main .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image: none; width: auto; height: auto; right: 30px;}
.main .swiper-button-next span, .swiper-container-rtl .swiper-button-prev span{display: block; margin-top: 10px; text-align: center;}
.main .swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image: none; width: auto; height: auto;}
.main .swiper-button-prev, .swiper-container-rtl .swiper-button-next {display: block; text-align: center;  left: 30px;}
.main .swiper-button-prev span, .swiper-container-rtl .swiper-button-next span{display: block; left: 30px; margin-top: 10px;}

/* 메인 모바일 수정 */
.main .mob{display: none !important;}

@media screen and (max-width: 768px){
    .main .titbox.pc{display: none;}
    .main .mob{display: block !important;}
    .main .mob img{position: absolute;top: 40%;left: 50%;transform: translate(-50%, -50%); width: 90%;}
    .main .mob .title{position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); text-align: center; text-transform: uppercase; font-family: 'Poppins';}
    .main .mob .title dt{font-size: 50px; margin-bottom: 10px; font-weight: 600;}
    .main .mob .title dd{font-size: 30px; font-weight: 600;}
}

/* footer 모달 */
.f_pop{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 9999; display: none;}
.f_pop .popbg{width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
.f_pop .popin{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 3px 3px 10px #eee; width: 90%; max-width: 740px; max-height: 500px; overflow-y: auto; padding: 30px; padding-right: 20px; }
.f_pop .popin i {position: absolute; right: 13px; top: 10px; font-size: 32px; cursor: pointer;}
.f_pop .popin p{font-size: 13px; color: #000; line-height: 1.5;}
.f_pop .popin p span{font-size: 18px; font-weight: 600;}
.popbtn02{color: #c62125; cursor: pointer;font-weight: 500;}
.popbtn01{cursor: pointer;}






/* 메인 svg */
.contents .main {background-image: url(/img/min_visual.jpg);}
.contents .main .sbx {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 50%;}
.contents .main .sbx svg {width: 692px; height: 185px;}

@media screen and (max-width:1000px) {
    .contents .main .sbx{width: 60%;top: 35%;}
}


/* 프로모션 이벤트 배너 */
.event1-pop-wrapper {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, 0.562);
}
 
.ev1-pop-close {
    cursor: pointer;
     position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background-color: #240081;
}


.ev1-pop-close2 {
   /* cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 9px;
    width: 100px;
    height: 100px;
    background-color: #ffffff;*/
 
    position: absolute;
    bottom: 8px;
    right: 16px;
   /* background: tra; */
  
}


.ev1-pop-in {
    position: relative;
    width: 900px;
    height: 450px;
    margin: 0 auto;
    top: 55%;
    transform: translateY(-50%);
}

    .ev1-pop-in img {
        width: 100%;
        height: 100%;
    }

.event2-pop-wrapper {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, 0.562);
    overflow: scroll;
 }

.ev2-pop-close {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #240081;
}

.ev2-pop-close2 {
    /* cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 9px;
    width: 100px;
    height: 100px;
    background-color: #ffffff;*/

    position: absolute;
     bottom: 2px;
    right: 15px;
    font-size:12px;
    /* background: tra; */
}


.ev2-pop-in {
    position: relative;
    width: 450px;
    height: 900px;
    margin: 0 auto;
    top: 60%;
    transform: translateY(-50%);
    overflow: scroll;
}



    .ev2-pop-in img {
        width: 100%;
        height: 100%;
    }

.event3-pop-wrapper {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, 0.562);
}

.ev3-pop-close {
    cursor: pointer;
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #240081;
}
 

.ev3-pop-in {
    position: relative;
    width: 860px;
    height: 90%;
    overflow: scroll;
    overflow-x: hidden;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.ev3-pop-in img {
        width: 100%;
    }


.event4-pop-wrapper {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    background-color: rgba(0, 0, 0, 0.562);
}

.ev4-pop-close {
    cursor: pointer;
    position: fixed;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #240081;
}


.ev4-pop-in {
    position: relative;
    width: 860px;
    height: 90%;
    overflow: scroll;
    overflow-x: hidden;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

    .ev4-pop-in img {
        width: 100%;
    } 
     
 /*
    .ev3-pop-in img {
        width: 860px;
        height: 4082px;
 } 
  */


@media screen and (max-width:1000px) {
    .ev3-pop-in {
        width: 10px;
        height: 450px;
    }

    .ev2-pop-in {
        width: 450px;
         height: 900px
    }

    /* 
        .ev3-pop-in img {
            width: 100%;
            height: 2136px;
    }*/
}

@media screen and (max-width: 500px) {
    .ev1-pop-in {
        width: 450px;
        height: 450px;
    }

    .ev2-pop-in {
        width: 450px;
        /*height: 450px;*/

        height: 900px
    }
}

@media screen and (max-width: 420px) {
    .ev1-pop-in {
        width: 340px;
        height: 340px;
    }

    .ev2-pop-in {
        width: 340px;
/*        height: 340px;
*/        height: 680px;
    }

    .ev3-pop-in {
        width: 340px;
/*        height: 500px;
*/    }

     /*   .ev3-pop-in img {
            width: 100%;
            height: 1614px;
        }*/
}

@media screen and (max-width:280px) {
    .ev1-pop-in {
        width: 270px;
        height: 270px;
    }

    .ev2-pop-in {
        width: 270px;
/*        height: 270px;
*/        height: 540px;
    }

    .ev3-pop-in {
        width: 270px;
    }

      /*  .ev3-pop-in img {
            width: 100%;
            height: 1282px;
        }*/
}



 
/*SNS 링크 */

.sns_instar_sp {
    display: none;
}

.sns_instar_sun {
    display: none;
}

.sns_blog {
    display: none;
}

.sns_youtube {
    display: none;
}