@charset="UTF-8"
        
html {margin:0;padding:0}
body{background-color:#f3f3f3;width:100%;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {margin:0;font-weight:400;}
ul, ol {list-style:none;margin:0;padding:0;}
a {text-decoration:none;color:inherit;outline:none;}
img{vertical-align:top;width:100%;}
     
/*
.container ul li {position:absolute;width:100%;}
.main-box {left:0;transition: all .5s ease;}
.sub-box {left:100%;transition: all .5s ease;}
.main-box.on {left:0;transition: all .5s ease;}
.sub-box.on {left:0;transition: all .5s ease;}
*/
/*
.container ul li {position:absolute;width:100%;}
.main-box {left:0;transition:all .5s ease;}
.sub-box {left:100%;transition:all .5s ease;}
.main-box.on {left:0;transition:all .5s ease;}
.sub-box.on {left:0;transition:all .5s ease;}
.container ul li > div{position:relative;background-color:#fff;width:100%;height:100%;}
*/
#wrap, .container {position:relative;width:100%;height:100%;overflow:hidden;}
.main.off {height:100vh;overflow:hidden;}
.sub {position:absolute;top:0;left:100%;width:100%;z-index:10;transition:all .5s ease;background:#fff;height:100%;overflow-y:scroll;}
.sub.on {left:0;}
.con {position:relative;}
.gnb-area {display:block;position:fixed;width:12.5%;height:auto;z-index:20;left:5.555%;top:2.75%;}    
.gnb-area.on {opacity:0;}
.gnb-area .gnb {position:fixed; width:12.5%;}
.gnb-btn {display:block;position:fixed;left:0;top:0;width:30%;height:10%;z-index:30;}
.gnb1 {z-index:20; transition:all .5s ease;}
.gnb2 {z-index:19; transition:all .5s ease;}
.gnb3 {z-index:18; transition:all .5s ease;}
.gnb4 {z-index:17; transition:all .5s ease;}
.gnb5 {z-index:16; transition:all .5s ease;}
.gnb6 {z-index:15; transition:all .5s ease;}
.gnb7 {z-index:14; transition:all .5s ease;}
.gnb8 {z-index:13; transition:all .5s ease;}
.gnb9 {z-index:12; transition:all .5s ease;}
.gnb1.on {}
.gnb2.on {padding-top:15.5%;}
.gnb3.on {padding-top:31.5%;}
.gnb4.on {padding-top:47%;}
.gnb5.on {padding-top:62.5%;}
.gnb6.on {padding-top:78%;}
.gnb7.on {padding-top:93.5%;}
.gnb8.on {padding-top:109%;}
.gnb9.on {padding-top:124.5%;}
.icon {position:absolute;right:0;top:0;width:100%;z-index:9;}
.sub .icon {right:0;top:0;z-index:42}
.sub .banner-txt {position:absolute;z-index:5;bottom:13.37%;}
.swiper-pagination-bullet {background-color:#fff;margin:40px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 10px;}
.swiper-pagination-bullet {opacity:.55;}
.swiper-pagination-bullet-active {opacity:1;}
.title {width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;}
.sub-btn {display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:30%;height:25%;}
.bar {width:100%;position:fixed;bottom:0;left:0; z-index:10;}
.footer {padding-bottom:14%;}
    
.sub .sub-cate, .sub .sub-cate-open {display:none;min-height:100vh;position:fixed;top:0;left:0;background-color:#fff;}
.sub .sub-cate {z-index:97;}
.sub .sub-cate-open {z-index:98;}
.sub .sub-cate.active{display:block;}
.sub .sub-cate-open.active{display:block;}
.sub .icon-btn {position:absolute;top:0;right:12vw;width:10vw;height:20vw;z-index:100;cursor:pointer;}
.sub .back-btn {position:absolute;top:0;right:0;width:12vw;height:20vw;z-index:99;cursor:pointer;}
.sub .back-btn.off {display:none;}
.sub .icon-btn.on {right:0;width:14vw;}
.sub .sub-cate.active ~ .icon-btn {position:fixed;}
.sub .cate-btn {display:none;position:fixed;top:61vw;right:0;width:30%;height:12vw;z-index:101;cursor:pointer;}
.sub .close-btn {display:none;position:fixed;top:0;right:0;width:30%;height:20vw;z-index:101;cursor:pointer;}
.sub .cate-btn.on {display:block;}
/*    .sub .con02, .sub .con04 {margin:10px 0; overflow:hidden;}*/
.sub .con03, .sub .con05 {margin-top:5px;padding:0 18.3% 0 0;box-sizing:border-box;overflow:hidden;}
.sub .con06 {margin:5px 0;overflow:hidden;}
.sub .con07 {margin-bottom:5px;}

.sub .con .sub-txt {position:absolute;left:50%;bottom:50%;transform:translate(-50%,-50%);z-index:5;}
.sub .con02 .sub-txt,
.sub .con03 .sub-txt,
.sub .con04 .sub-txt,
.sub .con05 .sub-txt {transform:translate(-50%,0);bottom:10%;}
.sub .con02 .swiper-slide,
.sub .con04 .swiper-slide {margin-right:-13.05%;}
.sub .con07 .open {position:absolute;bottom:0;left:0;cursor:pointer;transition:all .5s ease;}
.sub .con07 .open.on {z-index:20;transition:all .5s ease;}
.sub .con07 .close {position:absolute;top:100%;left:0;z-index:20;cursor:pointer; transition:all .5s ease;}
.sub .con07 .close.on {top:0; transition:all .5s ease;}
.brand-cate {display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;overflow-y:scroll;}
.brand-cate img {width:100%;z-index:100;}
.brand-cate.on {display:block;}
.bot-cate {display:none;position:fixed;left:0;top:0;width:100%;z-index:100;}
.bot-cate2 {display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:100;overflow-y:scroll;}
.bot-cate2 img {width:100%;z-index:100;}
.bot-cate.on {display:block;}
.bot-cate2.on {display:block;}
.close2-btn {display:none;}
.brand-btn {display:none;}
.brand-btn.on {display:block;}
.close2-btn.on {display:block;}
.cate2-btn2 {display:none;}
.cate2-btn2.on {display:block;}
.cate2-btn-open {display:none;}
.cate2-btn-open.on {display:block;}
.sub-bar-btn {display:none;width:40%;height:30%;position:absolute;bottom:0;left:50%;transform:translate(-50%,0);z-index:80;}
.sub-bar-close {display:none;width:40%;height:30%;position:absolute;top:0;left:50%;transform:translate(-50%,0);z-index:80;}
.sub-bar-btn.on {display:block;}
.sub-bar-close.on {display:block;}

.sub .frame {position:absolute;left:0;top:0;width:100%;z-index:20;}

.sub .con08 .video{overflow:hidden;}
.sub .con08 .video #video01 {width:100%;position:relative;margin-left:-50%;}
.sub .con08 .video #video02 {width:100%;position:relative;margin-left:-50%;}
.sub .con08 .video #video03 {width:100%;position:relative;margin-left:-50%;}