body{width:100vw;overflow-x: hidden;}
.mainWrap				{width:100vw;overflow-x: hidden;}
.section.visual					{ position:relative; width:100%; display:inline-block; }
.visualSlide					{ width:100%; position:relative; }
.visualSlide .slick-list		{ width:100%; overflow:hidden; }
.visualSlide .slick-slide		{ float:left; }
.visualSlide img				{ width:100%; }
.visualSlide .slick-dots		{ position:absolute; top:10px; right:12px; z-index:10; }
.visualSlide .slick-dots li		{ display:inline-block; height:8px; padding:0 2px; }
.visualSlide .slick-dots li button					{ width:8px; height:8px; border:0; border-radius:8px; background:#DDD; font-size:0; overflow:hidden; text-indent:-9999px; }
.visualSlide .slick-dots li.slick-active button		{ width:15px; background:#ee2d36; }
.section.visual .slick-arrow	{ position:absolute; top:50%; width:21px; height:48px; margin-top:-24px; overflow:hidden; text-indent:-9999px; z-index:10; }
.section.visual .slick-prev		{ left:12px; background:url(../img/common/arrow_left.png) 0 0 no-repeat; background-size:18px 30px; }
.section.visual .slick-next		{ right:12px; background:url(../img/common/arrow_right.png) 0 0 no-repeat; background-size:18px 30px; }
.section.visual .visualBt		{ position:absolute; bottom:0; left:0; width:100%; height:0; text-align:center; }
.section.visual .visualBt a		{ margin:-55px 1px 0; display:inline-block; }
.section.visual .visualBt a img	{ width:112px; }
.visualSlide .mall-bn {position: relative;}
.visualSlide .mall-bn a {position: absolute;top: 51%;left: 6%;}
.visualSlide .mall-bn a img {max-width:17vw;}
/* main 시작 */
section{width: 100%;margin: 0 auto;}
/*section1 - 브로슈어 내용*/
.section1{margin:100px auto;width:90%}
.section1 .title{text-align: center;}
.section1 .title .sub_title{font-size:14px;display: inline-block;font-weight: 400;margin-bottom:10px}
.section1 .title p{font-size:20px;font-weight: 600;}
.section1 .threed{display: flex;align-items: center;justify-content: center;margin-top: 50px;flex-wrap:wrap}
.section1 .threed_l{width: 100%;order:2}
.section1 .threed_l span{font-size: 16px;font-weight: 500;opacity: 0.4;}
.section1 .threed_l h2{font-size: 30px;margin: 10px 0 20px;font-weight: 600;line-height: 40px}
.section1 .threed_l h2 .color_blue{color:#56c5e8;display: inline-block;font-size: 30px;font-weight: 600;}
.section1 .threed_l p{font-size: 14px;word-break: keep-all;line-height: 24px;font-weight: 400;}
.section1 .threed_r{width: 100%;order:0;margin-bottom:30px}
.section1 .threed_r img{width: 100%;}
/*section2 - 바로가기*/
.section2{margin:100px auto;width:90%;overflow-x: hidden;}
.section2 .contents{display: flex;justify-content: space-around;align-items: center;flex-direction: column;width:100%;margin:50px 0}
.section2 .contents .desc{width: 100%}
.section2 .contents .desc p{font-size:50px;font-weight: 500;position: relative;border-bottom: 2px solid #000;padding-bottom: 10px;}
.section2 .contents .desc h2{font-size: 28px;font-weight: 700;margin: 10px 0;line-height: 45px;}
.section2 .contents .desc h2>div{font-size: 30px; display: inline-block;font-weight: 700;vertical-align: bottom;}
.section2 .contents .desc h2 .color_pink{color:#e6787a;}
.section2 .contents .desc h2 .color_green{color:#b0e35a;}
.section2 .contents .desc h2 .color_blue{color:#56c5e8;}
.section2 .contents .desc h2 .color_purple{color:#be9ed7;}
.section2 .contents .desc span{font-size:16px;display: block;line-height: 22px;font-weight: 500;}
.section2 .contents .desc .img_box{display: flex;flex-wrap: wrap;margin-top: 20px;width: 70%;}
.section2 .contents .desc .img_box .box{background:#f3f3f3;width:100px;height:100px;margin:0 7px 7px 0;border-radius: 10px;overflow: hidden;position: relative;}
.section2 .contents .desc .img_box .box img{width: 100%;object-fit: contain;}
.section2 .contents .desc a{position: relative; display:inline-block; border:1px solid #000;width: 70%;padding: 15px 0 15px 20px;font-size: 16px;
margin-top: 20px;border-radius: 5px;transition: 0.3s;color:#000;background-color: #fff;font-weight: 500;}
.section2 .contents .desc a::after{content: "";border-top:1px solid #000;border-right: 1px solid #000;width: 8px;height: 8px;
position: absolute;top:50%;right: 30px;transform: translateY(-50%) rotate(45deg);transition: 0.3s;}
.section2 .contents .desc a.color_pink:hover{background-color: #ffebee;border: 1px solid #ffebee;color: #e6787a;}
.section2 .contents .desc a.color_pink:hover::after{right: 23px;border-right: 1px solid #e6787a;border-top:1px solid #e6787a;}
.section2 .contents .desc a.color_green:hover{background-color: #f0ffd6;border: 1px solid #f0ffd6;color: #b0e35a;}
.section2 .contents .desc a.color_green:hover::after{right: 23px;border-right: 1px solid #b0e35a;border-top:1px solid #b0e35a;}
.section2 .contents .desc a.color_blue:hover{background-color: #eaf6ff;border: 1px solid #eaf6ff;color: #56c5e8;}
.section2 .contents .desc a.color_blue:hover::after{right: 23px;border-right: 1px solid #56c5e8;border-top:1px solid #56c5e8;}
.section2 .contents .desc a.color_purple:hover{background-color: #f5e9ff;border: 1px solid #f5e9ff;color: #be9ed7;}
.section2 .contents .desc a.color_purple:hover::after{right: 23px;border-right: 1px solid #be9ed7;border-top:1px solid #be9ed7;}
.section2 .contents .model{position: relative;display: none}
.section2 .contents .model .background{width: 500px;height: 500px;border-radius:50% 50% 10px 10px; text-align: center;position: relative;}
.section2 .contents .model .background.color_pink{background:#ffebee;}
.section2 .contents .model .background.color_green{background:#f0ffd6;}
.section2 .contents .model .background.color_blue{background:#eaf6ff;}
.section2 .contents .model .background.color_purple{background:#f5e9ff;}
.section2 .contents .model img{height: 560px;object-position: top;position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%);}
.section2 .contents.right .model{order: 1;}
.section2 .contents.right .desc{order: 2;text-align: right;}
.section2 .contents.right .desc p::after{left: 0;}
.section2 .contents.right .desc .img_box{justify-content: flex-end;margin-left: auto;}
.section2 .contents.right .desc a{text-align: left;}
/* section03 - 체육복 무한 롤링배너*/
.section3 .fit_banner {overflow-x: hidden;display: flex;margin: 30px auto;width: 100%;}
.section3 .fit_banner .fit_list {display: flex;animation: fitRolling 50s linear infinite;cursor: pointer;}
.section3 .fit_banner .fit_list > li {white-space: nowrap;width: 200px;color: #fff;padding: 20px;}
.section3 .fit_banner .fit_list > li  img{width: 200px;object-fit: contain;}
@keyframes fitRolling {
    0% {transform: translateX(0);}
    100% {transform: translateX(calc(-200px * 17 - 10px * 17));}
}
.section3 .fit_banner .fit_list:hover{animation-play-state: paused;}
/* section04 - 엘리트 룩북*/
.section4{background-color: #f9f9f9;height: 600px;margin: 200px auto;padding: 50px 0;text-align: center;}
.section4 h3{font-size: 22px;font-weight: 400;margin-bottom: 10px}
.section4 h4{font-size: 34px;font-weight: 500;}
.section4 .lookbook{margin-top: 50px;display: flex;}
.section4 .lookbook a{display: inline-block;margin:0 10px}
.section4 .lookbook a div{width: 300px;height: 450px;background-color: #e3e3e3;line-height: 450px;border-radius: 150px 150px 10px 10px;}
.section4 .lookbook a img{width: 300px;height: 450px;background-color: #e3e3e3;border-radius: 150px 150px 10px 10px;}
.section4 .lookbook p{font-weight: 500;font-size: 20px;margin-top: 20px;}
.section4 .mySwiper{position:relative;}
.section4 .swiper-button-next,.section4 .swiper-button-prev{color:#fff;background-color: #000; opacity: 0.3; padding: 7px 15px;top:45%}
.section4 .swiper-button-next{right: 0;}
.section4 .swiper-button-prev{left: 0;}
.section4 .swiper-button-next:after,.section4 .swiper-button-prev:after{font-size: 20px}
/* section05 - sns*/
.section5 {margin:0 auto; width:90%}
.section5 .sns{display: flex;width:100%;justify-content: space-between;align-items: flex-start;margin: auto;flex-direction: column;}
.section5 .sns h5{font-size: 20px;font-weight: 400;position: relative;display: inline-block;margin-bottom: 20px;}
.section5 .sns .insta{width: 100%; text-align: left;margin-bottom:50px}
.section5 .sns .insta .box{background: url(../img/insta.png)no-repeat}
.section5 .sns .insta h5{margin-left: 40px;}
.section5 .sns .insta h5::before{left: -40px;content: "";background: url(../img/main/240530/instaIco.png)center center no-repeat;background-size: contain;
width: 30px;height: 30px; position: absolute;top:50%;transform: translateY(-50%);}
.section5 .sns .youtube{width: 100%;text-align: right;}
.section5 .sns .youtube h5::before{left: -40px;content: "";background: url(../img/main/240530/youtbeIco.png)center center no-repeat;background-size: contain;width: 30px;height: 30px; position: absolute;top:50%;transform: translateY(-50%);}
.section5 .sns .youtube iframe{width: 100%;height: 100%;}
.section5 .sns>div .box{background-color: #f3f3f3;width: 100%;height: 450px;text-align: center;line-height: 450px;}
.section5 .instaArea a{ float:left; width: 31%; height: 31%; margin: 0 10px 10px 0; position:relative; }
.section5 .instaArea a:nth-child(3),.section5 .instaArea a:nth-child(6),.section5 .instaArea a:nth-child(9){margin:0 0 10px 0}
.section5 .instaArea a img{ width:100%; height:100%; position:absolute; top:0; left:0; text-align:center;object-fit: cover;}
.section5 .instaArea a img.bg{ width:100%; height:100%; position:static; }
.section5 .instaArea a:hover::after	{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/main/instaOver.png) 50% 50% no-repeat; background-color:rgba(0,0,0,0.8);}
/* section06 - 교복관리 팁 매장 찾기*/
.section6{text-align: center;padding: 100px 0;display: flex;align-items: flex-start;justify-content: center;flex-wrap:wrap;width:90%;}
.section6>div{width:100%;margin}
.section6 .manage{margin-bottom: 20px}
.section6 a{ position: relative; display: inline-block;overflow: hidden; width: 100%;height: 250px;
background-color: #f9f9f9;position: relative;border:1px solid #000;border-radius: 30px 30px 0 0;}
.section6 a::after{content:"바로가기";position: absolute;bottom:0;left: 0;background-color: #000;width: 100%;font-size:16px;font-weight: 500;
padding: 13px 0;color: #fff;border-radius: 30px 30px 0 0;transition: 0.3s;}
.section6 a img{width: 50%;object-fit: cover;top: 30px;position: absolute;right: 5%;transition: 0.3s;}
.section6 a:hover::after{padding: 17px 0;}
.section6 .banner_txt{position: absolute;top:45%;left: 10%;transform: translateY(-50%);text-align: left;z-index: 9}
.section6 .banner_txt .sub_txt{font-size:16px;line-height:22px;font-weight: 400}
.section6 .banner_txt h6{font-size:24px;margin-top: 20px;text-decoration-line: underline; text-underline-offset : 10px;font-weight: 600;
text-decoration-style: dashed;text-decoration-thickness:2px}
/*스크롤 페이드 애니메이션*/
.fade-left {position:relative; transition: 1s 0.3s; opacity:0;transform: translateX(-100px);}
.fade-right{position:relative; transition: 1s 0.3s; opacity:0;transform: translateX(100px);}
.fade-in { transition: 1s 0.3s; transform: translateX(0px); opacity: 1;}