/*********************
01) Visual
02) Main Content(공통)
03) mainBusiness
04) mainCharacter
04) mainToons
05) mainFont
06) mainNotice
07) mainStore
*********************/

/*********************
01) Visual
*********************/
.visual{height: 860px;}
.visualSlider{height: 100%;}
.visualSlider ul li{position: relative; padding-top: 100px; background: url('../img/main/visual_bg.jpg'); height: calc(100% - 100px);}
.visualSlider ul li .linkArea{position: absolute; bottom: 0; width: 100%; left: 0; right: 0; background-image: url('../img/main/visual_btm_bg.jpg'); background-color: rgba(216,35,30,.8); padding: 75px 0; padding-left: 73%;}
.visualSlider ul li .linkArea a{display:block; max-width:300px; font-size: 24px; line-height: 1.4; color: #fff; transition:.2s;}
.visualSlider ul li .linkArea a span.navi em{font-style:normal; display:none;}
.visualSlider ul li .linkArea a b{display:block;}
.visualSlider ul li .linkArea a span.link{display:block; width: 70px; height: 15px; background: url('../img/main/linkaro_w.png') no-repeat left center; margin-top: 30px; transition:.2s;}
.visualSlider ul li .linkArea a:hover span.link{transform:TranslateX(10px);}
.visualSlider ul li .txtArea{font-size: 38px; width: 100%; max-width:1300px; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform:Translate(-50%, -50%); pointer-events:none;}
.visualSlider ul li .txtArea.top{top: 30%;}
.visualSlider ul li .txtArea.btm{top: 82%;}
.visualSlider ul li .txtArea b{display:block; font-size: 80px; padding-top: 20px;}
.visualSlider ul li .imgArea{width: 100%; max-width:1200px; height: 90%; background-repeat:no-repeat; background-position:center bottom;  background-size:auto 100%; position: absolute; left: 50%; bottom: 0; transform:TranslateX(-50%); z-index:1; pointer-events:none;}
.visualSlider ul li.visual_3 .imgArea{mix-blend-mode: multiply; background-position:left bottom;}
/* .visualSlider ul li img{position: absolute; z-index:1; left: 50%; bottom: 0; transform:translateX(-50%); -webkit-transform:translateX(-50%); transition:.2s;} */
.visualSlider ul.pager{position: absolute; left: 73%; top: 23%; z-index:1; bottom: auto; width: calc(28% - 40px); max-width:280px; padding: 0; text-align: left;}
.visualSlider ul.pager:before{content:''; width: 1px; top: 30px; bottom: 30px;left: 7px; background-color: rgba(216,35,30,.2); position: absolute;}
.visualSlider ul.pager li{position: relative; padding: 0; background: 0; height: auto; line-height: 60px; font-size: 17px; font-weight: 400; padding-left: 35px; transition:.2s; cursor:pointer; outline:none; opacity:1; width: calc(100% - 35px) !important; border: 0; vertical-align: middle; color: #000; display:block; text-align: left;}
.visualSlider ul.pager li.swiper-pagination-bullet{margin: 0; width: 100%;}
.visualSlider 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;}
.visualSlider ul.pager li:hover,
.visualSlider ul.pager li.swiper-pagination-bullet-active{font-weight: bold;}
.visualSlider ul.pager li:hover:before,
.visualSlider ul.pager li.swiper-pagination-bullet-active:before{width: 15px; height: 15px; margin-left: 0;}

@media all and (max-width:1120px){
.visual{height: 600px;}
.visualSlider ul li{padding-top: 70px; height: calc(100% - 70px);}
.visualSlider ul li .imgArea{background-position:right 30px bottom;}
.visualSlider ul li.visual_3 .imgArea{background-position:right -50px bottom;}
.visualSlider ul li.visual_4 .imgArea{background-position:right -50px bottom;}
.visualSlider ul li .txtArea.btm{top: 45%;}
.visualSlider ul li .txtArea.top{top: 45%;}
.visualSlider ul li .linkArea{z-index:2; padding: 0; background-image:none; background-color: rgba(216,35,30,.9);}
.visualSlider ul li .linkArea a{max-width:none; width: 92.72%; margin: 0 auto; padding: 30px 0; position: relative;}
.visualSlider ul li .linkArea a span.navi{font-weight: bold;}
.visualSlider ul li .linkArea a span.navi em{display:inline; font-size: 16px; font-weight: 400;}
.visualSlider ul li .linkArea a span.link{position: absolute; right: 0; bottom: 30px;}
.visualSlider ul li .txtArea{transform:Translate(-50%, -50%) scale(.8); left: 45%; top: 45%;}
.visualSlider ul.pager{left: 76%; top: 31%; width: calc(24% - 20px) !important; max-width:none; display:none;}
.visualSlider ul.pager li{font-size: 16px; height: 40px; line-height: 40px;}
.visualSlider ul.pager:before{top: 20px; bottom: 20px;}
}

@media all and (max-width:815px){
.visual{height: 500px;}
.visualSlider ul.pager{display:none;}
.visualSlider ul li .imgArea,
.visualSlider ul li.visual_4 .imgArea{background-position:center bottom;}
.visualSlider ul li .txtArea{transform:none; left: 20px; top: 100px; display:none;}
.visualSlider ul li.visual_3 .imgArea{background-position:bottom center;}
.visualSlider ul li .linkArea a{font-size: 22px;}
/* .visualSlider ul li .txtArea b{padding-top: 20px;} */
}

/*********************
02) Main Content(공통)
*********************/
.mainCon .ttlArea p{font-size: 24px; margin-bottom: 30px; font-weight: 500;}
.mainCon h2{font-size: 70px;}
.mainCon .eng h2{font-size: 50px;}
.mainCon .conArea{margin-top: 40px; font-size: 20px; line-height: 1.6;}
.mainCon a.mainBtn{display:block; text-align: center; max-width:400px; background-color: #d8231e; font-size: 18px; color: #fff; line-height: 65px; height: 65px; margin: 0 auto; margin-top: 60px; transition:.2s;}
.mainCon a.mainBtn:hover{background-color: #c70b06;}
.mainCon a.mainBtn.bodBtn{background-color: #fff; color: #000; border: solid 1px #000; box-sizing:border-box;}
.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;}
}

@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;}
.mainBusiness .imgArea{margin-top: 30px;}
@media all and (max-width:815px){
	.mainBusiness{padding: 70px 0;}
	.mainBusiness h2{line-height: 1.2;}
	.mainBusiness .conArea{text-align: left;}
}

/*********************
04) mainCharacter
*********************/
.mainCharacter{padding-top: 125px; text-align: center !important;}
.mainCharacter .imgArea{position: relative;}
.mainCharacter .imgArea .chaSlider{background-color: #fff; padding: 100px 0; padding-top: 180px; max-width:1600px; width: 90%;}
.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: 40px; transform:translateX(-50%); -webkit-transform:translateX(-50%); z-index:2; width: 65%; max-width:700px;}
.mainCharacter .imgArea a img{width: 100%; transition:.2s;}
.mainCharacter .imgArea a:hover img{transform:translateY(-10px);}
@media all and (max-width:815px){
	.mainCharacter{padding-top: 70px; padding-bottom: 50px;}
	/* .mainCharacter .imgArea .chaSlider{padding: 20vw 0;}
	.mainCharacter .imgArea a{top: 50%; transform:Translate(-50%, -50%); -webkit-transform:Translate(-50%, -50%); width: 90%; height: auto; max-width:450px; max-height:100%;} */
	.mainCharacter .imgArea .chaSlider{display:none;}
	.mainCharacter .imgArea a{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: 125px !important; position: relative;}
.mainToons ul li{background: #e8e8e8; height: 690px;}
.mainToons ul li .imgArea{position: absolute; width: 100%; height: 100%; max-width:1300px; left: 50%; bottom: 0; transform:TranslateX(-50%); background-position:left bottom; background-size:auto 100%; background-repeat:no-repeat;}
.mainToons ul li .txtArea{max-width:560px; margin: 0 auto; padding: 140px 0 220px; margin-left: 55%; margin-right: 50px; position: relative; width: calc(45% - 50px);}
.mainToons ul li .txtArea h2{padding-top: 50px;}
.mainToons ul li .txtArea .naviArea{position: absolute; left: -30px; font-size: 16px;}
.mainToons ul li .txtArea .naviArea b{font-size: 24px; font-weight: bold;}
.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);}
.mainToons .pager{position: absolute; bottom: 0 !important; max-width:560px; margin-left: 55%; margin-right: 50px; overflow:hidden; width: 100%; z-index:1; width: calc(45% - 50px) !important; padding: 0;}
.mainToons .pager li{font-size: 18px; color: #fff; text-align: center; width: 50%; float:left; display:block; background: none; background-color: #161616; line-height: 80px; height: 80px; border-radius:0; cursor:pointer;  margin: 0 !important; opacity:1; transition:.2s; padding: 0; vertical-align: middle; border: 0;}
.mainToons .pager li.swiper-pagination-bullet-active,
.mainToons .pager li:hover{font-weight: bold; background-color: #d8231e;}

@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) mainFont
*********************/
.mainFont{padding: 180px 0; background: url('../img/main/font_bg.jpg') center; text-align: center !important;}
.mainFont .ttlArea h2{font-size: 50px;}
.mainFont .ttlArea textarea{border: 0; font-size: 120px; padding: 0; background: 0; margin: 0; outline:none; color: #000; margin-top: 30px; text-align: center; width: 100%; overflow:hidden; line-height: 1.2; height: 2.4em; font-weight: bold;}
.mainFont a{margin: 0 auto;}

@media all and (max-width:1120px){
.mainFont .ttlArea h2{font-size: 40px;}
.mainFont .ttlArea textarea{font-size: 90px;}
.mainFont .conArea{margin-top: 30px;}
}

@media all and (max-width:815px){
.mainFont{padding: 70px 0;}
.mainFont .ttlArea h2{font-size: 24px;}
.mainFont .ttlArea textarea{font-size: 50px; margin-top: 20px;}
.mainFont .conArea{margin-top: 20px;}
}

@media all and (max-width:415px){
.mainFont .ttlArea h2{font-size: 20px;}
.mainFont .ttlArea textarea{font-size: 38px; margin-top: 15px;}
}

/*********************
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; text-align: left; 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') top 40px center; color: #fff !important; background-repeat:repeat-x; background-size:cover;}
.mainStore .wrapper{position: relative;}
.mainStore .imgArea{width: 50%; position: absolute; left: 0; top: 0; text-align: center;} 
.mainStore .imgArea img{width: 100%; max-width:465px;}
.mainStore .txtArea{width: calc(50% - 30px); padding: 160px 0; padding-left: calc(50% + 30px); background: url('../img/main/store_cha.png') no-repeat left 10% top; transition:.2s;}
.mainStore .txtArea .conArea{font-size: 18px; opacity:.5;}
.mainStore .txtArea a.mainBtn{line-height: 60px; height: 60px; font-size: 16px; margin: 60px 0 0 0; max-width:190px;}
@media all and (max-width:1000px){
.mainStore .txtArea{padding: 15vw 0; padding-left: 50%; background-position:left center; background-size: auto 80%;}
.mainStore .txtArea h2{font-size: 60px;}
}
@media all and (max-width:815px){
.mainStore{border-bottom: solid 50px #0d0d0d; background-position:center;}
.mainStore .txtArea{position: relative; width: 60%; padding: 70px 0; padding-left: 40%; background-size:170px;}
.mainStore .txtArea h2{font-size: 40px;}
.mainStore .txtArea .conArea{font-size: 15px; opacity: 1;}
.mainStore .txtArea a.mainBtn{position: absolute; max-width:none; width: 100%; left: 0; bottom: -30px; margin: 0;}
}

@media all and (max-width:500px){
.mainStore .wrapper{width: 100%;}
.mainStore .txtArea{width: calc(60% - 20px); padding-right: 20px; padding-bottom: 80px;}
.mainStore .txtArea a.mainBtn{width: calc(100% - 40px); left: 20px;}
}

@media all and (max-width:410px){
.mainStore .txtArea{background-size:100px; width: 92.72%; padding: 150px 0 60px; margin: 0 auto; background-position:center top 30px; text-align: center; background-size:80px;}
.mainStore .txtArea h2{font-size: 9vw;}
.mainStore .txtArea .conArea{margin-top: 10px;}
.mainStore .txtArea a.mainBtn{width: 100%; left: 0;}
}