@charset "utf-8";

.mainVisWrap{position:relative; height:950px;background:#ccc;z-index:1;overflow:hidden;}
.mainVis{height:100%;position:relative;}
.mainVis .bg01{background:url(../../../images/os/main/vis01.jpg)no-repeat center top;}
.mainVis .bg02{background:url(../../../images/os/main/vis02.jpg)no-repeat center top;}
.mainVis .bg03{background:url(../../../images/os/main/vis03.jpg)no-repeat center top;}
/* 메인배너 텍스트
.mainVis .textWrap{width:1200px;margin:330px auto 0;}
.mainVis .text01{font-family:'Roboto';font-size:48px;font-weight:700;color:rgba(255,255,255,0.3);line-height:1;}
.mainVis .text02{font-family:'Roboto';font-size:48px;font-weight:700;color:#fff;position:relative;display:inline-block;z-index:1;line-height:1;margin-top:10px;}
.mainVis .text02:before{content:"";display:block;width:100%;height:20px;background:#7e8ce2;position:absolute;bottom:0;left:0;z-index:-1;}
.mainVis .smTxt{font-size:18px;color:#fff;line-height:1;margin-top:40px;}
메인배너 텍스트 */
.mainVis .swiper-button-prev{width:34px;height:60px;background:url(../../../images/os/main/arrowL.png); transition-duration:0.3s;}
.mainVis .swiper-button-next{width:34px;height:60px;background:url(../../../images/os/main/arrowR.png); transition-duration:0.3s;}
.mainVis .swiper-button-prev:hover, .mainVis .swiper-button-next:hover {opacity:1;} 
.mainVis .swiper-button-prev, .mainVis .swiper-container-rtl .swiper-button-next{left:100px;}
.mainVis .swiper-button-next, .mainVis .swiper-container-rtl .swiper-button-prev{right:100px;}
/* .mainVis .swiper-pagination-progressbar{width:180px;height:3px;background:rgba(255,255,255,0.3);position:absolute;top:590px;left:50%;margin-left:-600px;}
.mainVis .swiper-pagination-progressbar-fill{background:#fff;} */

/* 마이오피스 배너 */
#slides img{top:0;left:0;}
#slides {display: none;}
#slides .slidesjs-navigation {margin-top:0px;display:none}
#slides .slidesjs-stop {display:none !important}
#slides .slidesjs-play{height:0;font-size:0;text-indent:-9999;position:absolute;}
#slides .slidesjs-pagination {position:absolute;right:50%;bottom:15px;margin-right: -21px;width: 42px;height:6px;line-height:6px;clear:both;z-index:99;}
#slides .slidesjs-pagination li {float:left;margin:0 3px;height:6px;line-height:6px;}
#slides .slidesjs-pagination li a {display: block;width: 8px;height: 8px;background: #8d79b8;color:#fff;border-radius:6px;float: left;overflow: hidden;list-style:none;text-indent:-9999;}
#slides .slidesjs-pagination li a.active,  #slides .slidesjs-pagination li a:hover, #slides .slidesjs-pagination li a:hover.active {width: 8px;height:8px;box-sizing:border-box;background:transparent;color:transparent;background: #fff;border-radius:6px;text-indent:-9999;}
/* 마이오피스 배너 */

/* 메인 배너 메뉴 */
.bnrMenu {width:100%; height:70px; line-height:70px; position:absolute; bottom:0; z-index:1; background:rgba(0,0,0,0.5);}
.bnrMenu ul {display:table; margin:0 auto; }
.bnrMenu ul li {float:left; margin:0 30px;}
.bnrMenu ul li a {position:relative; font-size:23px; color:rgba(255,255,255,0.3); font-weight:700; padding:20px 50px; }
.bnrMenu ul li a:hover {color:rgba(255,255,255,1);}
.bnrMenu ul li a:before {content:''; position:absolute; top:50%; transform:translateY(-50%); right:-30px; width:1px; height:17px; background:rgba(255,255,255,0.3);}
.bnrMenu ul li:last-child a::before {display:none;}

/* 메인 박스 */
.mainContWrap {width:1200px; margin:100px auto;}
.mainContWrap h4 {display:table; margin:0 auto; font-size:55px; font-weight:800; color:rgba(0, 0, 0, 0.15); margin-bottom:30px; text-align:center;}
.mainContWrap h4 span {display:block; font-size:25px; font-weight:700; line-height:25px; color:rgba(0, 0, 0, 0.1); padding:0 0 0 2px; letter-spacing:0;}

/* OUR BRANDS */
.mainProd{width:1200px; margin:100px auto;}
.prodSlide{width:100%;overflow:hidden;position:relative;height:500px;}
.prodSlide .swiper-wrapper{width:1200px;margin:0 auto;}

.prodSlide .swiper-button-prev, .prodSlide .swiper-button-next{color:#707070;transition:all 0.3s;}
.prodSlide .swiper-button-prev:hover, .prodSlide .swiper-button-next:hover{opacity:1; color:#333;}
.prodSlide .swiper-pagination{background:rgba(255,255,255,0.3);width:1000px !important;height:60px;border-radius:30px;text-align:center;margin:0 auto;position:absolute;left:50% !important;transform:translateX(-50%);}
.prodSlide .swiper-pagination span:after{content:"";display:block;width:1px;height:20px;background:#ddd;position:absolute;top:20px;right:0;}
.prodSlide .swiper-pagination span:last-child:after{content:'';display:none;}
.prodSlide .swiper-pagination-bullet{width:20%;float:left;line-height:60px;height:60px;background:transparent;opacity:1;margin:0 !important;color:#fff;position:relative;font-size:18px;font-weight:100;}
.prodSlide .swiper-pagination-bullet-active{color:#fff;font-weight:500;}

/* ABOUT COMPANY */
.mainContWrap .mIntroBox dl {float:left;}
.mainContWrap .mIntroBox dl dt {width:380px; height:250px; overflow:hidden;}
.mainContWrap .mIntroBox dl dt img {transition:all 0.3s;}
.mainContWrap .mIntroBox dl dt img:hover {transform: scale( 1.1 );}
.mainContWrap .mIntroBox a:nth-child(3) dl {margin:0 30px;}
.mainContWrap .mIntroBox dl dd {display:block; width:100%; font-size:19px; font-weight:500; text-align:center; margin-top:15px;}

.mainComp{margin-top:150px;}
.compBanner{width:calc(100% - 200px);margin:0 auto;background:url(../../../images/os/main/mainComp.jpg);background-size:cover;height:400px;}
.compBanner .mainTit{width:1200px;margin:0 auto;padding-top:130px;}
.mainComp ul{width:1200px;margin:130px auto 0;}
.mainComp li{width:33.33%;float:left;box-sizing:border-box;}
.mainComp li:nth-child(2){padding-left:70px;}
.mainComp li:nth-child(3){padding-left:170px;}
.mainComp li h3{jcolor:#222;font-size:42px;font-weight:700;position:relative;z-index:1;padding-top:55px;margin-bottom:50px;}
.mainComp li:nth-child(1) h3:before{content:"01";z-index:-1;color:#f1f1f1;font-size:80px;font-weight:700;position:absolute;left:0l;top:15px;}
.mainComp li:nth-child(2) h3:before{content:"02";z-index:-1;color:#f1f1f1;font-size:80px;font-weight:700;position:absolute;left:0l;top:15px;}
.mainComp li:nth-child(3) h3:before{content:"03";z-index:-1;color:#f1f1f1;font-size:80px;font-weight:700;position:absolute;left:0l;top:15px;}
.mainComp li p{color:#555;font-size:16px;line-height:26px;}
.mainComp > a{display:block;color:#fff;background:#4f63d1;width:180px;text-align:center;line-height:50px;margin:90px auto 0;font-size:16px;border-radius:25px;}

.mainNews{background:#f8f8f8;width:100%;margin-top:140px;padding:100px 0 80px;}
.mainNews .mainTit{width:1200px;margin:0 auto;position:relative;}
.mainNews .mainTit a{display:inline-block;position:absolute;right:0;top:50%;margin-top:-20px;}
.newsSlide{width:1200px;height:380px;margin:60px auto 0;overflow:hidden;position:relative;}
.newsSlide li{background:#fff;padding:40px;box-sizing:border-box;height:250px;}
.newsSlide li h5{color:#222;font-size:16px;margin-bottom:25px;}
.newsSlide li p{color:#555;font-size:14px;line-height:20px;margin-bottom:30px;}
.newsSlide li span{color:#4f63d1;font-size:14px;}
.newsSlide .swiper-button-prev{position:absolute;left:50%;margin-left:-85px;top:330px;width:70px;height:70px;background:#fff url(../../../images/os/main/newsArrowL.png)no-repeat 50%;border-radius:50%;}
.newsSlide .swiper-button-next{position:absolute;right:50%;margin-right:-85px;top:330px;width:70px;height:70px;background:#fff url(../../../images/os/main/newsArrowR.png)no-repeat 50%;border-radius:50%;}

/* shop main */
.shopVisWrap{height:600px;width:100%;margin:0 auto;background:#ccc;z-index:1;overflow:hidden;}
.shopVis{height:100%;position:relative;}
.shopVis .bg01{background:url(../../../images/os/main/main_vis01.jpg)no-repeat center center;}
.shopVis .bg02{background:url(../../../images/os/main/main_vis01.jpg)no-repeat center center;}
.shopVis .textWrap{width:1200px;margin:330px auto 0;}
.shopVis .text01{font-family:'Roboto';font-size:48px;font-weight:700;color:rgba(255,255,255,0.3);line-height:1;}
.shopVis .text02{font-family:'Roboto';font-size:48px;font-weight:700;color:#fff;position:relative;display:inline-block;z-index:1;line-height:1;margin-top:10px;}
.shopVis .text02:before{content:"";display:block;width:100%;height:20px;background:#7e8ce2;position:absolute;bottom:0;left:0;z-index:-1;}
.shopVis .smTxt{font-size:18px;color:#fff;line-height:1;margin-top:40px;}
.shopVis .shopVisBtn {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:1200px; height:46px; z-index:1;}
.shopVis .swiper-button-prev{width:34px;height:60px;background:url(../../../images/os/main/arrowL.png);}
.shopVis .swiper-button-next{width:34px;height:60px;background:url(../../../images/os/main/arrowR.png);}
.shopVis .swiper-button-prev, .shopVis .swiper-container-rtl .swiper-button-next{left:30px;}
.shopVis .swiper-button-next, .shopVis .swiper-container-rtl .swiper-button-prev{right:30px;}
.shopVis .swiper-pagination-progressbar{width:180px;height:3px;background:rgba(255,255,255,0.3);position:absolute;top:600px;left:50%;margin-left:-600px;}
.shopVis .swiper-pagination-progressbar-fill{background:#fff;}

/* shop banner */
.shopBanner{width:100%;height:390px;margin-bottom:30px;}
.newProd{background:#effafc;}
.reComProd{background:#f8f4f3;}
.promoProd{background:#f1f0f9;}
.shopBanner dl{width:1200px;height:100%;margin:0 auto;display:table;}
.shopBanner dt{width:260px;display:table-cell;vertical-align:middle;box-sizing:border-box;border-right:1px solid #e1edef;}
.shopBanner dt p{color:#000;font-weight:700;font-size:18px;line-height:1;margin-bottom:15px;}
.shopBanner dt h2{color:#000;font-size:36px;font-weight:500;line-height:1;}
.shopBanner dd{width:940px;display:table-cell;overflow:hidden;position:relative;padding-top:60px;}
.newProdSlide{width:720px;margin-left:130px;box-sizing:border-box;overflow:hidden;}
.newProdSlide .swiper-wrapper li{width:200px !important;text-align:center;}
.shopBanner .slideThum{width:200px;height:200px;overflow:hidden;margin-bottom:30px;/* -webkit-box-shadow:8px 8px 15px 0px rgba(0, 0, 0, 0.15);-moz-box-shadow:8px 8px 15px 0px rgba(0, 0, 0, 0.15);box-shadow:8px 8px 15px 0px rgba(0, 0, 0, 0.15); */}
.shopBanner .slideThum img{width:100%;transition:all 0.3s;}
.shopBanner .slideThum img:hover{transform: scale( 1.2 );}
.newProdSlide .swiper-button-prev{width:50px;height:50px;background:url(../../../images/os/main/shopArrowL.png);}
.newProdSlide .swiper-button-next{width:50px;height:50px;background:url(../../../images/os/main/shopArrowR.png);}
.newProdSlide .swiper-button-prev, .shopVis .swiper-container-rtl .swiper-button-next{left:40px;}
.newProdSlide .swiper-button-next, .shopVis .swiper-container-rtl .swiper-button-prev{right:0px;}
.newProdSlide .prodTit{color:#000;font-size:16px;}
.newProdSlide .prodPrice{color:#a92e2e;font-size:14px;font-style:italic;line-height:1;margin-top:5px;}

/* all products */
.allProd{width:1200px;margin:80px auto 100px;}
.allProd .mainTit h2{font-size:45px;font-weight:700;text-align:center;margin-bottom:60px;line-height:1;}

/* 홈페이지 팝업 */
.mainpopup{width:100%; margin:50px auto;}
.popupSlide{width:600px;height:600px;margin:60px auto 0;overflow:hidden;position:relative;}
.popupSlide li{height:500px;background:#f8f8f8;padding:40px;box-sizing:border-box;}
.popupSlide li img {width:100%;}
.popupSlide .swiper-button-prev{position:absolute;left:50%;margin-left:-85px;top:550px;width:70px;height:70px;background:#f8f8f8 url(../../../images/os/main/newsArrowL.png)no-repeat 50%;border-radius:50%;}
.popupSlide .swiper-button-next{position:absolute;right:50%;margin-right:-85px;top:550px;width:70px;height:70px;background:#f8f8f8 url(../../../images/os/main/newsArrowR.png)no-repeat 50%;border-radius:50%;}