/*********************
01) Visual
*********************/
.visual{height: 860px;}
.visualSlider{height: 100%;position: relative;}
.visualSlider ul li{position: relative; padding-top: 100px; background: url('../img/main/visual_bg.jpg'); height: calc(100% - 100px);background-repeat: no-repeat;background-position: center bottom;background-size:  cover;}
.visualSlider ul li .linkArea{position: absolute; bottom: 0; width: 100%; left: 0; right: 0; background: linear-gradient(115deg, rgba(233,89,89,0.98) 45%, rgba(1,26,116,0.94) 60%);height: 27.91%;}
.visualSlider ul li .txtArea{ width: 95%; max-width:1400px; margin: 0 auto; position: absolute; left: 50%; transform:TranslateX(-50%); line-height: 1.1;}
.visualSlider ul li .txtArea.top{top: 28%;letter-spacing: -2px;color: #000;font-family:'GmarketSansLight';font-size: 80px;}
.visualSlider ul li .txtArea.top span{display: block;}
.visualSlider ul li .txtArea.top b{font-family: 'GmarketSansBold';font-weight: normal;}
.visualSlider ul li .txtArea b.gradi{background: linear-gradient(115deg, #e95858 10%, #0d57b3 80%);background-clip: text;-webkit-background-clip: text;-ms-background-clip: text;color: transparent;}
.visualSlider ul li .txtArea.btm{top: 80%;}
.visualSlider ul li .txtArea.btm a{display:block; max-width:300px; font-size: 22px; line-height: 1.3; color: #fff; transition:.2s;letter-spacing: -1px;position: relative;}
.visualSlider ul li .txtArea.btm a b{display:block;font-weight: 600;font-size: 28px;}
.visualSlider ul li .txtArea.btm a span.link{display:block; width: 70px; height: 15px; background: url('../img/main/linkaro_w.png') no-repeat left center; margin-top: 7%; transition:.2s;}
.visualSlider ul li .txtArea.btm a:hover span.link{transform:TranslateX(10px);}
.visualSlider ul li .imgArea{width: 100%; background-repeat:no-repeat; background-position:center bottom;  position: absolute; left: 0; bottom: 0;  pointer-events:none;top: 0;}


.visualSlider li.visual_1{background-image: url(../img/main/visual_bg_1.jpg);}
.visualSlider li.visual_1 .imgArea{background-image: url(../img/main/visual_img_1.png);}
.visualSlider li.visual_2{background-image: url(../img/main/visual_bg_2.jpg);}
.visualSlider li.visual_2 .imgArea{background-image: url(../img/main/visual_img_2.png);}
.visualSlider li.visual_3{background-image: url(../img/main/visual_bg_3.jpg);}
.visualSlider li.visual_3 .imgArea{background-image: url(../img/main/visual_img_3.png);}


.visualSlider .wrapper{position: absolute;bottom: 15.4%;left: 50%;max-width:1400px;transform:translateX(-50%);z-index: 5;height: 0;}
.control{height: 30px;position: relative;width: 130px;float: right;margin-right: 40px;}
.control .swiper-button-next{right: 0;}
.control .swiper-button-prev {left: 0;}
.control .swiper-button-next, .control .swiper-button-prev {background:none;width: 35px;height: 30px;text-indent: -999em;font-size: 0;transition:background-color .25s ease-out !important;top: 0;margin-top: 0;bottom: auto;}
.control .swiper-button-next::after, .control .swiper-button-prev::after {display: none;}
.control .swiper-button-next::before, .control .swiper-button-prev::before {content:'';display:block;position:absolute;border-style:solid;border-color:#fff;border-width:1px 0 0 1px;padding:5px;transform:rotate(-45deg);top:50%;left:50%;margin-top: -4px;margin-left: -5px;transition:all .25s ease-out;opacity:.95;right: auto;}
.control .swiper-button-next::before{border-width:0 1px 1px 0;}
.control .swiper-button-next:hover::before, .control .swiper-button-prev:hover::before,
.control .swiper-button-next:focus::before, .control .swiper-button-prev:focus::before{opacity: 1;border-color: #ff0;}
.control .swiper-pagination-fraction{bottom: auto;top: 0;font-size: 13px;color: rgba(255,255,255,0.5);letter-spacing: 0;line-height: 21px;width: auto;overflow: hidden;text-align: center;left: 30px;right:30px;padding: 0;}
.control .swiper-pagination-fraction span{display: inline-block;line-height: 30px;vertical-align: middle;font-size: 20px;padding: 0 8px;}
.control .swiper-pagination-fraction .swiper-pagination-current{font-weight: 500;position: relative;display: inline-block;color: #fff;}

 @media all and (max-width:1280px){
.visual{height: 700px;}
.visualSlider ul li .imgArea{top: 70px;background-size: auto 100% ;}
.visualSlider ul li{padding-top: 70px; height: calc(100% - 70px);}
.visualSlider ul li .txtArea.top img{width: 350px;}
}
@media all and (max-width:1100px){
.visual{height: 600px}
.visualSlider ul li .txtArea.top img{width: 33%;}
.visualSlider ul li .txtArea.top{top: 22%;}
.visualSlider ul li .txtArea.btm a{font-size: 18px;}
.visualSlider ul li .txtArea.btm a b{font-size: 24px;}
}
@media all and (max-width:815px){
.visual{height: 500px;}
.visualSlider ul li .linkArea{z-index: 3;background: linear-gradient(115deg, rgba(210,47,47,0.87) 45%, rgba(1,26,116,0.94) 60%);}
.visualSlider ul li .imgArea{z-index: 2;}
.visualSlider ul li .txtArea.btm{z-index: 4;}
.visualSlider ul li .txtArea.btm a{font-size: 16px;}
.visualSlider ul li .txtArea.btm a b{font-size: 21px;}
.visualSlider ul li .txtArea.btm a span.link{margin-top: 10px;}
}
@media all and (min-width:815px){
.visualSlider ul li .linkArea{mix-blend-mode: multiply;}
}
@media all and (max-width:510px){

.visual{height: 550px;padding-top: 70px;background-color: #fff;}
.visualSlider ul li{padding-top: 0; height: 100% ;background-position: center 0;}
.visualSlider ul li .linkArea{height: 45px;}
.visualSlider ul li .txtArea.top,
.visualSlider ul li .txtArea.top img{display: none;}
.visualSlider ul li .imgArea{top: 0;background-size: auto 100%;display: none; }
.visualSlider ul li .txtArea.btm{top: auto;bottom: 0;height: 45px;line-height: 45px;}
.visualSlider ul li .txtArea.btm a{font-size: 15px;line-height: 45px;}
.visualSlider ul li .txtArea.btm a b{font-size: 16px;display: inline;}
.visualSlider ul li .txtArea.btm a span.link{display: none;}
.visualSlider li.visual_1{background-image: url(../img/main/m_visual_1.jpg);}
.visualSlider li.visual_2{background-image: url(../img/main/m_visual_2.jpg);}
.visualSlider li.visual_3{background-image: url(../img/main/m_visual_3.jpg);}

.visualSlider .wrapper{position: absolute;bottom:45px;width: 100%;}
.control{width: 110px;margin-right: 0;margin-top: 7px;}
.control .swiper-pagination-fraction span{font-size: 15px;padding: 0 5px;}
}
@media all and (max-width:414px){
.visual{height: 506px;}
}
@media all and (max-width:380px){
.visual{height: 458px;}
}
@media all and (max-width:360px){
.visual{height: 440px;}
}
@media all and (max-width:320px){
.visual{height: 394px;}
.visualSlider ul li .txtArea.btm a{font-size: 13px;}
.visualSlider ul li .txtArea.btm a b{font-size: 14px;}
}

/*********************
02) Main Content(공통)
*********************/
.mainCon .ttlArea p{font-size: 30px; margin-bottom: 30px; font-weight: 400;}
.mainCon h2{font-size: 85px;}
.mainCon .eng h2{font-size: 50px;}
.mainCon .conArea{margin-top: 40px; font-size: 24px; line-height: 1.6;}
.mainCon .conArea em{display: block;font-style: normal;padding-top: 15px;font-size: .785em;opacity: .6;}
.mainCon a.mainBtn{display:block; text-align: center; max-width:425px; background: linear-gradient(135deg, #ed4644, #1a468c); font-size: 24px; color: #fff; line-height: 80px; height: 80px; margin: 0 auto; margin-top: 60px; transition:.2s;border-radius:2.5em ;letter-spacing: -1px;}
.mainCon a.mainBtn.bodBtn{background: #fff; color: #000; border: solid 1px #000; box-sizing:border-box;border-radius:0}
/* .mainCon a.mainBtn:hover{background-color: #c70b06;}

.mainCon a.mainBtn.bodBtn:hover{background-color: #d8231e; border-color:#d8231e; color: #fff;} */
@media all and (max-width:815px){
	.mainCon .ttlArea p{font-size: 20px; margin-bottom: 20px;}
	.mainCon h2{font-size: 40px;}
	.mainCon .eng h2{font-size: 40px;}
	.mainCon .conArea{margin-top: 20px; font-size: 16px; line-height: 1.4;}
	.mainCon a.mainBtn{max-width:none; margin-top: 30px;height: 60px;line-height: 60px;font-size: 18px;}
}

@media all and (max-width:400px){
	.mainCon .ttlArea p{font-size: 16px; margin-bottom: 15px;}
	.mainCon h2{font-size: 40px;}
	.mainCon .eng h2{font-size: 36px;}
	.mainCon .conArea{font-size: 15px;}
	.mainCon a.mainBtn{margin-top: 25px; line-height: 55px; height: 55px; font-size: 15px;}
}

/*********************
03) mainBusiness
*********************/
.mainBusiness{text-align: center !important; color: #fff !important; padding: 125px 0; background: url('../img/main/business_bg.jpg') center top no-repeat;background-size:cover ;}
.mainBusiness .imgArea{margin-top: 30px;}
@media all and (max-width:1100px){
	.mainBusiness h2{font-size: 70px;}
	.mainBusiness .conArea{font-size: 22px;}
}
@media all and (max-width:815px){
	.mainBusiness{padding: 50px 0;background-size:auto 100% ;}
	.mainBusiness h2{line-height: 1.2;font-size: 60px;}
	.mainBusiness .conArea{/* text-align: left; */font-size: 18px;}
}
@media all and (max-width:510px){
	.mainBusiness h2{font-size: 40px;}
	.mainBusiness .conArea{font-size: 16px;}
	.mainCon.mainBusiness .ttlArea p{font-size: 16px; }
	.mainBusiness .imgArea{margin-top: 20px;}
	.mainBusiness .imgArea img{max-width: 35vw;}
}
/*********************
04) mainCharacter
*********************/
.mainCharacter{padding-top: 120px; text-align: center !important;background-color: #f5f5f5;}
.mainCharacter .conArea{margin-top: 20px;}
.mainCharacter .imgArea{position: relative;}
.mainCharacter .imgArea .chaSlider{padding: 60px 0 0; max-width:1500px; margin:  0 auto;text-align: center;}
.mainCharacter .imgArea .chaSlider>img{margin: 0 auto;max-width: 100%;}
.mainCharacter .imgArea .chaSlider ul li{text-align: center;}
.mainCharacter .imgArea .chaSlider ul li img{width: 100%; max-width:300px;}
.mainCharacter .imgArea a{position: absolute; left: 50%; top: 60px; transform:translateX(-50%); -webkit-transform:translateX(-50%); z-index:2; width: 100%; max-width:818px;}
.mainCharacter .imgArea a img{width: 100%; transition:.2s;margin: 0 auto;}
.mainCharacter .imgArea a:hover img{transform:translateY(-10px);}
@media all and (max-width:1560px){
.mainCharacter .imgArea a{width: 54%;}
}
@media all and (max-width:1100px){
.mainCharacter{padding-top: 70px;}
.mainCharacter .imgArea .chaSlider{padding-top: 4%;}
.mainCharacter .imgArea a{top: 10%;}
.mainCharacter h2{font-size: 60px;}
.mainCharacter .conArea{font-size: 18px; }
}
@media all and (max-width:815px){
.mainCharacter h2{font-size: 40px;}
.mainCharacter .conArea{font-size: 15px; }
	.mainCharacter{padding-top: 10vw; padding-bottom: 6vw;}
	.mainCharacter .imgArea .chaSlider{display:none;}
	.mainCharacter .imgArea a{top: 50%; transform:none; -webkit-transform:none; position: static; max-width:450px; display:inline-block; margin-top: 30px; width: 100%;}
}


/*********************
04) mainToons
*********************/
.mainToons{background-color: #e8e8e8; padding-top: 120px ; position: relative;}
.mainToons ul {margin: 0;padding: 0;list-style-type: none;}
.mainToons ul li{background: #e8e8e8; height: 740px;margin: 0 auto;padding: 0;list-style-type: none;position: relative; max-width:1380px;overflow: hidden;}
.mainToons ul li .imgArea{position: absolute; width: 100%; height: 100%; left: 50%; bottom: 0; transform:TranslateX(-50%); background-position:left bottom; background-size:auto ; background-repeat:no-repeat;}
.mainToons ul li .txtArea{width:540px; margin: 0 ; padding: 140px 0 ; float: right; margin-right: 0; position: relative; /* width: calc(45% - 50px); */}
.mainToons ul li .txtArea h2{padding-top: 50px;}
.mainToons ul li .txtArea .conArea{padding-left:20px;}
.mainToons ul li a.mainBtn{position: absolute;bottom: 0;left: auto;margin: 0;max-width: 100%;width: 540px;right: 0;border-radius:0 ;}

@media all and (max-width:1330px){
.mainToons{padding-top: 55px ; }
.mainToons ul li{height: 550px;}
.mainToons ul li .imgArea{height: calc(100% - 100px);background-position:left 6vw top;background-size:60vw auto ;}
.mainToons ul li .txtArea h2{font-size: 75px;}
.mainToons ul li .txtArea .conArea{font-size: 20px; margin-top: 25px;}
.mainToons ul li .txtArea{padding: 100px 0 }
.mainToons ul li a.mainBtn{right: 80px;left: calc(100% - 520px);width: auto;}

}
@media all and (max-width:1100px){

.mainToons ul li{height: 480px;}
.mainToons ul li .imgArea{height: 99%;background-position:left 5vw bottom;}
.mainToons ul li .txtArea h2{font-size: 60px;}
.mainToons ul li .txtArea .conArea{font-size: 18px; }
.mainToons ul li .txtArea{padding:50px 0 }
}
@media all and (max-width:820px){

.mainToons ul li{height:59vw;}
.mainToons ul li .imgArea{background-position:left 4vw top;background-size:80vw auto ;}
.mainToons ul li .txtArea{width: 58%;padding: 0 4% 0 0;}
.mainToons ul li .txtArea h2{font-size: 50px;padding-top: 20px;}
.mainToons ul li a.mainBtn{left: 0;width: auto;right: 0}
}
@media all and (max-width:580px){
.mainToons{padding-top: 40px ; }
.mainToons ul li .txtArea{width: 55%;}
.mainToons ul li .txtArea h2{font-size: 43px;}
.mainToons ul li .txtArea .conArea{font-size: 16px;padding-left: 30px;}
.mainToons ul li a.mainBtn{line-height: 60px;height: 60px;font-size: 18px;}
}
@media all and (max-width:500px){
.mainToons{padding-top: 40px ; }
.mainToons ul li{height:67vw;}
.mainToons ul li .txtArea{width: 60%;}
.mainToons ul li .txtArea h2{font-size: 38px;}
.mainToons ul li .imgArea{background-position:left 4vw bottom;background-size:75vw auto ;bottom: 60px;height: calc(100% - 40px);}
}
@media all and (max-width:380px){
.mainToons ul li .txtArea h2{font-size: 34px;}
.mainToons ul li .txtArea .conArea{font-size: 14px;}
}
@media all and (max-width:350px){
.mainToons ul li{height:72vw;}
.mainToons ul li .imgArea{background-size:65vw auto }
.mainToons ul li .txtArea{width:70%;padding-right: 1%;}
.mainToons ul li .txtArea .conArea{padding-left: 10px;}
}


/* .mainToons ul li .txtArea a{display:block; margin-top: 55px; width: 70px; height: 20px; background: url('../img/main/webtoon_aro.png') no-repeat left center; font-size: 0; transition:.2s;}
.mainToons ul li .txtArea a:hover{transform:TranslateX(10px);}

@media all and (max-width:1140px){
.mainToons ul li{height: 550px;}
.mainToons ul li .txtArea{padding: 80px 0 120px;}
.mainToons ul li .txtArea h2{font-size: 55px;}
.mainToons ul li .txtArea .conArea{font-size: 16px; margin-top: 20px;}
.mainToons ul li .txtArea a{margin-top: 30px;}
}





@media all and (max-width:815px){
	.mainToons{padding: 70px 0 0 !important;}
	.mainToons ul li{height: 540px; background-position:left 30vw top 150px; background-size:auto calc(100% - 150px);}
	.mainToons ul li .imgArea{height: calc(100% - 120px); background-position:left 30vw top;}
	.mainToons ul li .txtArea{margin: 0 auto; width: 92.72% !important; max-width:none; padding: 0;}
	.mainToons ul li .txtArea .naviArea{display:none;}
	.mainToons ul li .txtArea h2{padding-top: 0; font-size: 40px;}
	.mainToons ul li .txtArea .conArea{font-size: 15px;}
	.mainToons ul li .txtArea a{margin-top: 20px; width: 70px; height: 70px; background: rgba(216, 35, 30, .9) url('../img/common/icon_arrow.png') no-repeat center; border-radius:100%;}
	.mainToons ul li .txtArea a:hover{background: #d8231e;}
	.mainToons .pager{bottom: 70px !important; left: 3.64% !important; margin: 0; max-width:none; width: calc(100% - 80px) !important;}
	.mainToons .pager li{background: none; line-height: 1; height: auto; float:none; width: 100%; color: #000; text-align: left;}
	.mainToons ul.pager:before{content:''; width: 1px; top: 20px; bottom: 20px;left: 7px; background-color: rgba(216,35,30,.2); position: absolute;}
	.mainToons ul.pager li{position: relative; padding: 0; background: 0; height: auto; line-height: 40px; font-size: 16px; font-weight: 400; padding-left: 25px; transition:.2s; cursor:pointer; outline:none; opacity:1;}
	.mainToons ul.pager li.swiper-pagination-bullet{margin: 0; width: 100%;}
	.mainToons ul.pager li:before{content:''; position: absolute; width: 7px; height: 7px; background-color: #d8231e; border-radius:100%; left: 0; top: 50%; transform:translateY(-50%); transition:.2s; margin-left: 4px;}
	.mainToons ul.pager li:hover,
	.mainToons ul.pager li.swiper-pagination-bullet-active{font-weight: bold; background: none;}
	.mainToons ul.pager li:hover:before,
	.mainToons ul.pager li.swiper-pagination-bullet-active:before{width: 15px; height: 15px; margin-left: 0;}
}

@media all and (max-width:400px){
	.mainToons ul li .imgArea{background-position:left 13vw top;}
	.mainToons ul li .txtArea a{width: 50px; height: 50px; background-size:9px;}
	.mainToons .pager{left: 20px !important;}
}

/*********************
05) mainVideo
*********************/
.mainVideo{padding: 120px 0 95px; background: #fff; text-align: center !important;}
.mainVideo .ttlArea h2{font-size: 80px;}
.mainCon.mainVideo a.mainBtn{margin: 50px auto 0;}
.mainCon.mainVideo .ttlArea p{font-size: 24px;font-weight: 300;}
.mainVideo .wrapper{max-width: 818px;width: auto;}
.mainVideo .conArea{margin-top: 10px;}
.mainVideo .video{height: 0; padding-bottom: 56.25%; position: relative;margin: 0 auto;}/*818 460*/
.mainVideo .video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media all and (max-width:1100px){
.mainVideo{padding: 70px 0 50px;}
.mainVideo .ttlArea h2{font-size: 50px;}
.mainVideo .wrapper{width: 93%;}

}

@media all and (max-width:510px){
.mainVideo .ttlArea h2{font-size: 36px;}
.mainCon.mainVideo a.mainBtn{margin-top: 20px;font-size: 18px;}
.mainCon.mainVideo .ttlArea p{font-size: 18px;}
}

/*********************
06) mainNotice
*********************/
.mainNotice{padding: 130px 0;}
.mainNotice h2{text-align: center; font-size: 60px; margin-bottom: 45px;}
.mainNotice ul.noticeList li a{display:block; overflow:hidden; padding:  0 10px; border-top: solid 1px #d2d2d2; line-height: 110px; font-size: 20px; transition:.3s;}
.mainNotice ul.noticeList li a:hover{background-color: #f8f8f8;}
.mainNotice ul.noticeList li:last-child a{border-bottom: solid 1px #d2d2d2;}
.mainNotice ul.noticeList li a em.numb{display:block; width: 10%; float:left; font-style:normal; text-align: center; font-weight: 300;}
.mainNotice ul.noticeList li a b{display:block; width: 75%; float:left; font-weight: 300; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* .mainNotice ul.noticeList li.new a b{padding-left: 26px; background: url('../img/common/icon_new.png') no-repeat left center; width: calc(75% - 26px);} */
.mainNotice ul.noticeList li a b i.new{display:inline-block; width: 20px; height: 20px; margin-right: 6px; margin-bottom: 3px; background: url('../img/common/icon_new.png'); font-size: 0; vertical-align: middle;}
.mainNotice ul.noticeList li a span{display:block; width: 15%; float:left; text-align: center; font-size: 14px; color: #8d8d8d;}
.mainNotice ul.noticeList li a span em{display:none;}

@media all and (max-width:815px){
	.mainNotice{padding: 70px 0;}
	.mainNotice h2{font-size: 40px;  margin-bottom: 30px;}
	.mainNotice ul.noticeList li a{line-height: 1; padding: 30px 0; position: relative;}
	.mainNotice ul.noticeList li a b{width: 100%; font-size: 18px; font-weight: 400; line-height: 1.3; max-height: 2.8em; white-space:normal; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
	.mainNotice ul.noticeList li.new a b{width: calc(100% - 20px); background-size:15px; background-position:left top 5px;}
	.mainNotice ul.noticeList li a em.numb{display:none;}
	.mainNotice ul.noticeList li a span{margin-top: 10px; font-size: 14px; color: #555; text-align: left; display:block; width: 100%;}
	.mainNotice ul.noticeList li a span em{display:inline; font-style:normal;}
	.mainNotice a.mainBtn{margin-top: 30px;}


}

@media all and (max-width:400px){
	.mainNotice ul.noticeList li a{padding: 20px 0;}
	.mainNotice ul.noticeList li a b{font-size: 16px;}
	.mainNotice ul.noticeList li a b i.new{width: 16px; height: 16px; background-size:100%; margin-bottom: 0; margin-right: 5px;}

}

/*********************
07) mainStore
*********************/
.mainStore{background: url('../img/main/store_bg.jpg') right  top; color: #fff !important; background-repeat:repeat-x; background-size:cover;/* max-height: 450px; */}
.mainStore .wrapper{position: relative;padding-top: 64px;}
.mainStore .txtArea{width: calc(50% - 160px); padding-top: 85px; padding-left: calc(50% + 160px); background: url('../img/main/store_cha.png') no-repeat 20%  bottom; transition:.2s;}
.mainCon.mainStore .txtArea .conArea{font-size: 18px; opacity:.6;margin-top: 25px;}
.mainStore .txtArea a.mainBtn{line-height: 60px; height: 60px; font-size: 16px;margin: 104px 0 0 0; max-width:190px;border-radius:0 ;background: #e94645;}
.mainCon.mainStore  h2{font-size: 56px;}

@media all and (max-width:1180px){

.mainStore .wrapper{padding-top: 45px;}
.mainStore .txtArea{width:50%; padding-left: 50%; background: url('../img/main/store_cha.png') no-repeat 0  center;}
}
@media all and (max-width:970px){
.mainStore .wrapper{padding-top:0;}
.mainStore .txtArea{position: relative; width: 65%; padding: 70px 0; padding-left: 35%; background-size: 30% auto;}
.mainCon.mainStore .txtArea h2{font-size: 45px;}
.mainCon.mainStore .txtArea .conArea{font-size: 15px; opacity: 1;}
.mainStore .txtArea a.mainBtn{width: 100%;max-width: 100%; }
}

@media all and (max-width:510px){
.mainStore .wrapper{width: 100%;max-width: 100%;padding-top: 40px;}
.mainStore .txtArea{background-position: center top;background-size: auto 120px;padding-top: 140px;width: auto;padding-left: 20px;text-align: center; padding-right: 20px;padding-bottom: 20px;}
.mainCon.mainStore .txtArea .conArea{margin-top: 15px;}
.mainStore .txtArea a.mainBtn{margin-top: 30px;}

}
@media all and (max-width:360px){
.mainCon.mainStore .txtArea h2{font-size: 40px;}
.mainCon.mainStore .txtArea .conArea{font-size: 14px; }

}
/*********************
08) mainGoods
*********************/
.mainGoods{padding: 120px 0 140px; background: #2f2f2f url('../img/main/goods_bg.jpg') center  top repeat-x; text-align: center !important;color: #fff;background-size:cover;}
.mainGoods .ttlArea h2{font-size: 80px;}
.mainCon.mainGoods .conArea{margin-top: 10px;}
.mainCon.mainGoods a.mainBtn{margin: 50px auto 0;}
.mainCon.mainGoods .ttlArea p{font-size: 24px;font-weight: 300;opacity: .5;}
.mainGoods .wrapper{position: relative;}
.mainGoods .swiper-button-next{right: 0;}
.mainGoods .swiper-button-prev {left: 0;}
.mainGoods .swiper-button-next, .mainGoods .swiper-button-prev {background:none;width: 80px;height: 80px;text-indent: -999em;font-size: 0;transition:background-color .25s ease-out !important;top: 50%;margin-top: -40px;bottom: auto;}
.mainGoods .swiper-button-next::after, .mainGoods .swiper-button-prev::after {display: none;}
.mainGoods .swiper-button-next::before, .mainGoods .swiper-button-prev::before {content:'';display:block;position:absolute;border-style:solid;border-color:#fff;border-width:2px 0 0 2px;padding:25px;transform:rotate(-45deg);top:50%;left:auto;margin-top: -25px;margin-left: 0;transition:all .25s ease-out;opacity:.95;right: 0;}
.mainGoods .swiper-button-next::before{border-width:0 2px 2px 0;right: auto;left: 0;}
.mainGoods .swiper-button-next:hover::before, .mainGoods .swiper-button-prev:hover::before,
.mainGoods .swiper-button-next:focus::before, .mainGoods .swiper-button-prev:focus::before{opacity: 1;border-color: #fd4e4c;}

.mainGoods .swiper-pagination-fraction{bottom: 0;top: auto;text-align: left;color: rgba(255,255,255,0.5);font-weight: 100;letter-spacing: 1px;line-height: 80px;width: auto;overflow: hidden;left: 100px;right:100px;padding:0 0 0 30px;height: 80px;background:none}

.mainGoods .swiper-pagination-fraction span{display: inline-block;font-size: 22px;vertical-align: middle;font-family:'GmarketSansLight';font-weight: normal;color: #fff;}
.mainGoods .swiper-pagination-fraction .swiper-pagination-total{opacity: .5;}
.mainGoods .swiper-pagination-fraction .swiper-pagination-current{font-family: 'GmarketSansMedium';font-weight: normal;position: relative;}
.mainGoods .swiper{padding:  0 100px;height: 461px;margin: 0 auto;width: 1000px;position: relative;}
.mainGoods .swiper-container {height: 461px;overflow: hidden; width: 1000px;margin: 0 auto; }
.mainGoods .swiper-slide {width: 100%;height: 100%;}
.mainGoods .swiper-slide img {display: block;width: 100%;}

.mainGoods .swiper-slide .txtBack{position: absolute;bottom: 0;top: auto;text-align: right;letter-spacing: -1px;line-height: 80px;width: auto;overflow: hidden;left: 0;right:0;padding:0 30px 0 0;height: 80px;background: linear-gradient(135deg, rgba(237,70,59,0.85) 35%, rgba(20,70,142,0.85) 65%);font-size: 22px;font-family:'GmarketSansLight';font-weight: normal;color: #fff;}
.mainGoods .swiper-slide .txtBack span{position: relative;}
.mainGoods .swiper-slide .txtBack span b{font-family: 'GmarketSansBold';font-weight: normal;}
.mainGoods .swiper-slide .txtBack::before{content: '';position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: linear-gradient(to bottom, rgba(0,0,0,0.1) 5%, rgba(0,0,0,0.8) 85%, rgba(0,0,0,0.78) 120%);display: block;}


@media all and (max-width:1226px){
.mainGoods{padding: 8.5% 0}
.mainGoods .swiper{padding:  0 ;height: 0;margin: 0 auto;width: 100%;position: relative;padding-bottom: 46.1%;}
.mainGoods .swiper-container {height: auto;overflow: hidden; width: auto;margin: 0 auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0; }
.mainGoods .swiper-pagination-fraction{left: 0;right: 0;}
}
@media all and (max-width:1100px){
.mainGoods{padding: 4% 0}
.mainGoods .ttlArea h2{font-size: 50px;}
.mainCon.mainGoods .ttlArea p{font-size: 19px;}
}
@media all and (max-width:640px){
.mainGoods{padding: 8% 0 6%}
.mainGoods .ttlArea h2{font-size: 35px;}
.mainCon.mainGoods .ttlArea p{font-size: 16px;}
.mainGoods .swiper-button-next, .mainGoods .swiper-button-prev {width: 40px;height: 40px;}
.mainGoods .swiper-button-next::before, .mainGoods .swiper-button-prev::before {padding:12px;;margin-top: -12px;}
.mainGoods .swiper-slide .txtBack{line-height: 40px;padding:0 20px 0 0;height: 40px;font-size: 18px}
.mainGoods .swiper-pagination-fraction{line-height: 40px;left: 0;right:0;padding:0 0 0 20px;height: 40px;font-size: 10px;}
.mainGoods .swiper-pagination-fraction span{font-size: 16px;}



}