@charset "utf-8";
#container_main{overflow:hidden; width:100%; background:url(/images/ch/main/bg.jpg) no-repeat 50% 100%; background-size:100%;}

/* 비주얼 */
#visual{overflow:hidden; position:relative; height:566px; background:url(/images/ch/main/bg_visual.jpg) no-repeat 50% 0;}
#visual .slogan{padding:84px 0 0 0; font-size:17px;}
#visual .tit{z-index:1; position:relative; display:inline-block; line-height:150%; font-size:36px; font-weight:800; font-family:"gmarket"; letter-spacing:-2px;}
#visual .tit:before,
#visual .tit:after{content:''; display:block; position: absolute; top:-36px; left:-75px; width:57px; height:75px; background:url(/images/ch/main/bg_slogan1.png) no-repeat; animation:ani_move2 5s infinite;}
#visual .tit:after{z-index:-1; left:220px; top:-10px; width:41px; height:23px; background-image:url(/images/ch/main/bg_slogan2.png); animation:ani_move 6s infinite;}
#visual .tit p{font-size:43px;}
#visual .tit strong{line-height:125%; font-size:65px; font-weight:900; color:#26a99c;}
#visual .tit .blue{color:#1e99b8;}
#visual .info{padding:15px 0 56px; line-height:160%; color:#666;}

#visual .btn_intro{overflow:hidden; position:relative; display:block; width:208px; height:42px; line-height:42px; border-radius:21px; padding:0 0 0 27px; box-sizing:border-box; 
background:#359c91; box-sizing:border-box; color:#fff; text-decoration:none;}
#visual .btn_intro:after{content:''; display:block; position:absolute; top:50%; right:26px; width:12px; height:10px; margin:-5px 0 0 0; transition:0.3s ease; background:url(/images/ch/main/ico_arrow.png) no-repeat 100% 0;}
#visual .btn_intro:hover:after{width:22px; right:16px;}

@keyframes ani_move2{
	25%{top:-25px;}
	50%{top:-36px;}
	75%{top:-25px;}
	100%{top:-36px;}
}
@keyframes ani_move {
	50%{left:250px;}
}

@media all and (max-width:1430px) {
	#visual .slogan{padding-left:15px; padding-right:15px;}
}
@media all and (max-width:1024px) {
	#visual{height:445px; background-size:auto 100%; background-position:40% 100%;}
	#visual .slogan{padding-top:60px; font-size:16px;}
	#visual .tit{font-size:31px;}
	#visual .tit:after{left:180px;}
	#visual .tit p{font-size:37px;}
	#visual .tit strong{font-size:50px;}
	#visual .btn_intro{width:200px;}
	@keyframes ani_move {
		50%{left:210px;}
	}
}
@media all and (max-width:768px) {
	#visual .tit{font-size:27px;}
	#visual .tit p{font-size:33px;}
	#visual .tit strong{font-size:41px;}
}
@media all and (max-width:568px) {
	#visual{height:380px;}
	#visual .slogan{padding-top:50px; font-size:15px;}
	#visual .tit{font-size:21px;}
	#visual .tit:after{left:100px;}
	#visual .tit p{font-size:25px;}
	#visual .tit strong{font-size:33px;}
	#visual .btn_intro{width:190px;}
	@keyframes ani_move {
		50%{left:130px;}
	}
}
@media all and (max-width:380px) {
	#visual .slogan{font-size:14px;}
	#visual .tit{font-size:20px;}
	#visual .tit p{font-size:24px;}
	#visual .tit strong{font-size:32px;}
}

#link{margin:-11px auto 56px; text-align:center;}
#link h4{line-height:110%; font-size:40px; font-weight:900; font-family:"gmarket";}
#link .info{padding:7px 0 21px 0; line-height:110%; font-size:18px;}
#link ul:after{content:''; display:block; clear:both; width:100%;}
#link li{display:table; float:left; width:25%;}
#link li a{display:table-cell; vertical-align:middle; height:262px; font-size:21px; font-weight:600; color:#fff; text-shadow:0 0 7px rgba(0,0,0,0.3); text-align:center; background:url(/images/ch/main/bg_lnk1.jpg) no-repeat 50% 50%; text-decoration: none;}
#link li a:after{content:''; display:block; width:36px; height:36px; margin:18px auto 0; background:url(/images/ch/main/ico_lnk.png) no-repeat; transition:1s ease-in-out;}
#link .list2 a{background-image:url(/images/ch/main/bg_lnk2.jpg);}
#link .list3 a{background-image:url(/images/ch/main/bg_lnk3.jpg);}
#link .list4 a{background-image:url(/images/ch/main/bg_lnk4.jpg);}
#link li a:hover:after{transform:rotate(360deg);}

@media all and (max-width:1430px) {
	#link .info{padding-bottom:0;}
	#link li a{background-size:contain;}
}
@media all and (max-width:1024px) {
	#link{margin:-11px auto 70px;}
	#link h4{font-size:30px;}
	#link .info{padding:10px 0 0 0;font-size:14px;}
	#link li {padding:30px 20px 0; box-sizing:border-box}
	#link li a{height:150px; background-color:#ffce5d; border-radius:50%; box-shadow:0 10px 30px rgba(255,206,93,0.7); background-image:none !important;}
	#link .list2 a{background-color:#20a5c6; box-shadow:10px 10px 30px rgba(32,165,198,0.7);}
	#link .list3 a{background-color:#ff8c82; box-shadow:10px 10px 30px rgba(255,140,130,0.7);}
	#link .list4 a{background-color:#51bdb2; box-shadow:10px 10px 30px rgba(81,189,178,0.7);}
}
@media all and (max-width:768px) {
	#link h4{font-size:26px;}
	#link li {padding:30px 10px 0;}
	#link li a{font-size:18px;}
}
@media all and (max-width:568px) {
	#link h4{font-size:25px;}
	#link .info{font-size:13px;}
	#link ul{padding:10px 0 0 0;}
	#link li {display:block; width:50%; padding:15px 7px 0;}
	#link li a{display:block; height:55px; line-height:55px; border-radius:25px; font-size:16px;}
	#link li a:after{display:inline-block; vertical-align:middle; width:25px; height:25px; margin:-3px 0 0 10px; background-size:contain;}
}
@media all and (max-width:380px) {
	#link{margin:-11px auto 66px;}
	#link .info{font-size:12px;}
	#link li {padding:14px 7px 0;}
	#link li a{height:51px; line-height:51px; font-size:15px;}
	#link li a:after{width:22px; height:22px;}
}

/* 갤러리 */
#gallery {z-index:1; position:relative; clear:both; width:100%;}
#gallery .title{float:left; width:20.5%; line-height:165%; font-weight:200; font-size:15px; color:#000; word-break:keep-all;}
#gallery h4{padding:10px 0 25px; line-height:100%; font-size:34px; font-weight:900; color:#333; font-family:"gmarket";}
#gallery h4:before{content:''; display:block; height:4px; width:39px; margin:11px 0 22px; background:#ffbe2d;}
#gallery .info{width:70%;}
#gallery .list_wrap{position:relative; float:left; width:79.5%;}
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}
#gallery .list{float:left;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden; position:relative; width:389px; margin:0 12px 69px 0; box-shadow:10px 10px 10px rgba(0,0,0,0.1); transition:margin-top 0.25s ease-in-out;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:370px;}
#gallery .sbj{position:absolute; bottom:0; left:0; width:100%; height:71px; line-height:71px; padding:0 0 0 26px; transition:background 0.25s ease-in-out; box-sizing:border-box; background:rgba(0,0,0,0.5);}
#gallery .tit{position:relative; z-index:1; display:inline-block; max-width:98%; color:#fff; font-size:17px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .new{position:relative; z-index:1; display:inline-block; vertical-align:middle; width:17px; height:17px; line-height:18px; margin:-10px 0 0 -20px; font-size:10px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff9c00;}
#gallery .control {z-index:1; position:absolute; top:37%; left:18.25%; width:81.75%;}
#gallery .control button{display:block; position:absolute; top:0; left:0; width:57px; height:57px; font-size:0; text-indent:-999px; border-radius:50%; background:#fff5dd url(/images/ch/main/ico_ctrl.png) no-repeat 25px 19px; box-shadow:10px 10px 20px rgba(0,0,0,0.2);}
#gallery .control .btn_next{left:auto; right:-30px; background-position:-37px 19px;}
#gallery .control button:hover{box-shadow:3px 3px 3px rgba(0,0,0,0.2); background-color:#ffce5d; transition:0.25s ease-in-out;}
#gallery .view{display:block; width:137px; height:48px; line-height:44px; margin:33px 0 0 0; border:2px solid #ffd781; border-radius:24px; box-sizing:border-box; text-align:center;}
#gallery .view:after{content:''; display:inline-block; vertical-align:middle; width:15px; height:15px; margin:-3px 0 0 10px; transition:0.25s ease-in-out; background:url(/images/kr/main/ico_ctrl.png) no-repeat -54px -138px;}
#gallery .view:hover{border-color:#ffaf03;}
#gallery .view:hover:after{transform:rotate(90deg);}
#gallery a:hover .sbj{background:rgba(0,0,0,0.9);}

@media all and (max-width:1480px) {
	#gallery .inner{padding-right:40px;}
	#gallery .control .btn_next{right:15px;}
}
@media all and (max-width:1024px) {
	#gallery .inner{padding:0 5px 25px;}
	#gallery .title{position:relative; top:0; left:0; width:100%; padding:0 0 35px 10px; font-size:14px; box-sizing:border-box;}
	#gallery h4{padding:0 0 9px; font-size:29px;}
	#gallery h4:before{height:3px; width:35px; margin:0 0 13px;}
	#gallery .info{width:100%;}
	#gallery .list_wrap{width:100%;}
	#gallery .list a{width:calc(100% - 20px); margin:0 10px 45px; box-sizing:border-box;}
	#gallery .img img{height:170px;}
	#gallery .sbj{position: relative;}
	#gallery .tit{font-size:16px;}
	#gallery .control{top:77px; left:auto; right:0; width:140px;}
	#gallery .view{margin:15px 0 0 0;}
}
@media all and (max-width:768px) {
	#gallery .inner{padding:0 2px 20px;}
	#gallery .title{padding:0 0 28px 10px;}
	#gallery h4:before{width:30px; margin:0 0 10px;}
	#gallery h4{font-size:26px;}
	#gallery .list a{width:calc(100% - 16px); margin:0 8px 45px;}
	#gallery .list img{max-height:148px;}
	#gallery .sbj{height:60px; line-height:60px; padding:0 0 0 20px;}
	#gallery .tit{font-size:15px;}
	#gallery .control {width:105px;}
	#gallery .control button{width:42px; height:40px; background-position:16px 10px;}
	#gallery .control .btn_next{background-position:-43px 10px;}
	#gallery .view{top:25px; left:190px; width:120px; height:35px; line-height:32px;}
}
@media all and (max-width:568px) {
	#gallery .title{font-size:13px;}
	#gallery h4{font-size:25px;}
	#gallery .view{left:10px; width:110px;}
}
@media all and (max-width:380px) {
	#gallery .inner{padding:0 4px 20px;}
	#gallery .title{font-size:12px;}
	#gallery h4{font-size:24px;}
	#gallery .list a{width:calc(100% - 12px); margin:0 6px 40px;}
	#gallery .list img{max-height:130px;}
	#gallery .tit{font-size:14px;}
	#gallery .sbj{height:56px; line-height:56px;}
}