@charset "utf-8";

/* 비주얼 */
#visual {position: relative; background: url(/images/ch/main/bg_visual.jpg)no-repeat center; background-size: cover; height: 576px;}

.slogan{position: relative;padding: 30px 0 0 50px;word-break:keep-all;box-sizing:border-box; z-index: 1;}
.slogan:after {content: '';display: inline-block;width: 50%;height: 461px;background: url(/images/ch/main/pic_visual.png)no-repeat bottom;background-size: contain;}
.slogan .left {display: inline-block;width: 49%;vertical-align: top;padding: 60px 0 0;}
.slogan p {font-family: 'Jalnan'; font-size: 47px;}
.slogan .txt1 {position: relative; display: inline-block; animation:slideup 0.55s both; animation-delay: 0.3s;}
.slogan .txt1:after {content: ''; display: block; position: absolute; top: -4px; right: -42px; width: 28px; height: 28px; background: url(/images/ch/main/pic_flower.png)no-repeat; background-size: contain;}
.slogan .txt2 {margin: 8px 0 0; font-size: 58px; color: #00a18f; animation:slideup 0.55s both; animation-delay: 0.6s;}

.slogan span {display: block; margin: 35px 0 45px; font-size: 18px; line-height: 150%; animation: slideup 0.55s both; animation-delay: 1s;}
.slogan .btn {width: 208px; height: 56px; line-height: 56px; background: #293541; font-size: 16px; font-weight: 300; border-radius: 28px; animation: slideup 0.55s both; animation-delay: 1.3s;}
.slogan .btn:hover {color: #fff; background: #152230;}

@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:1; visibility:visible;}
}
@media all and (max-width:1400px){
    #visual {height: 500px;}
    .slogan:after {height: 370px;}
    
    .slogan p {font-size: 44px;}
    .slogan .txt2 {font-size: 50px;}
}
@media all and (max-width:1024px) {
    #visual {height: 450px;}
    .slogan {padding: 30px 0 0 15px;}
    .slogan:after {height: 316px;}
    
    .slogan .left {padding: 40px 0 0;}
    .slogan p {font-size: 32px;}
    .slogan .txt2 {font-size: 40px;}
    
    .slogan span {font-size: 16px;}
}
@media all and (max-width:768px) {
    #visual {height: 370px;}
    .slogan {padding: 0 10px;}
    .slogan .left {width: 100%;}
    .slogan:after {position: absolute; top: 0; right: 0; z-index: -1; opacity: 0.7;}
    .slogan p {font-size: 28px;}
    .slogan .txt1:after {top: -2px; right: -28px; width: 20px;}
    .slogan .txt2 {font-size: 36px;}
    .slogan span {margin: 20px 0 30px; font-size: 15px;}
    
    .slogan .btn {width: 160px; height: 44px; line-height: 44px; font-size: 15px;}
}
@media all and (max-width:568px) {
    #visual {height: 350px;}
    .slogan:after {height: 300px;}
    .slogan p {font-size: 22px;}
    .slogan .txt1:after {display: none;}
    .slogan .txt2 {font-size: 28px;}
    
    .slogan span {margin-right: 15px 0 20px;}
    .slogan .btn {width: 140px; height: 40px; line-height: 40px; font-size: 14px;}
}

/* 바로가기 */
#quick {overflow:hidden; width:100%; margin:57px 0 151px;}
#quick .tit_wrap {text-align: center;}
#quick .tit_wrap br {display: none;}
#quick .tit_wrap h4{margin: 0 0 6px; font-size: 32px; font-weight: 600;}

#quick ul {margin: 55px 0 0;}
#quick li {float:left; width:15.57%;}
#quick li + li{margin:0 0 0 5.5%;}
#quick li a{z-index:1; position:relative; overflow:hidden; display:block; padding:237px 0 0 0; line-height:100%; font-weight:400; font-size:18px; text-decoration:none; text-align:center;}
#quick li a:after{z-index:-1; content: ' '; position: absolute; top:0; left:0; width:100%; height:218px;} 
#quick li a:after {background:url(/images/ch/main/ico_link1.png) no-repeat 50% 0; background-size: cover;}
#quick li:nth-child(2) a:after{background-image:url(/images/ch/main/ico_link2.png);}
#quick li:nth-child(3) a:after{background-image:url(/images/ch/main/ico_link3.png);}
#quick li:nth-child(4) a:after{background-image:url(/images/ch/main/ico_link4.png);}
#quick li:nth-child(5) a:after{background-image:url(/images/ch/main/ico_link5.png);}

#quick ul li a:hover:after,
#quick ul li a:focus:after,
#quick ul li a:active:after{animation:ani_link 0.9s ease-in-out;}
@keyframes ani_link {
	0%{transform:translateY(0);}
	25%{transform:translateY(6px);}
	50%{transform:translateY(0);}
	75%{transform:translateY(8px);}
	100%{transform:translateY(0);}
}

@media all and (max-width:1230px) {
	#quick li {width:17.55%;}
	#quick li + li{margin:0 0 0 3%;}
	#quick li a{padding:175px 0 0;}
	#quick li a:after{background-size:75%;}
}
@media all and (max-width:1024px) {
	#quick{margin:40px 0 70px;}
    #quick .tit_wrap h4 {font-size: 28px;}
    #quick ul {margin: 45px 0 0;}
	#quick li a{padding: 135px 0 0;font-size:17px;}
	#quick li a:after{background-size: auto 120px;}
}
@media all and (max-width:768px) {
	#quick{margin:30px 0 60px;}
    #quick .tit_wrap h4 {font-size: 24px;}
    #quick .tit_wrap p {font-size: 15px;}
    #quick ul {margin: 25px 0 0;}
	#quick li {width:18.4%;}
	#quick li + li{margin:0 0 0 2%;}
	#quick li a{padding:125px 0 0; font-size:15px;}
	#quick li a:after{top:10px; background-size:auto 100px;}
	#quick li a:before{height:12px;}
}
@media all and (max-width:568px) {
	#quick {margin:30px 0 25px;}
    #quick .tit_wrap h4 {font-size: 22px;}
    #quick .tit_wrap br {display: block;}
	#quick ul{display:flex; flex-wrap:wrap; justify-content:center;}
	#quick li {width:33.33%; padding:0 1.5% 20px; box-sizing:border-box;}
	#quick li + li{margin:0;}
    #quick li a {padding: 110px 0 0;}
    #quick li a:after{top:10px; background-size:auto 90px;}
}
@media all and (max-width:380px) {
    #quick .tit_wrap p {font-size: 14px;}
	#quick li a{padding:100px 0 0; font-size:14px;}
	#quick li a:after{background-size:auto 80px;}
}

/* 갤러리 */
#gallery {z-index:1; position:relative; clear:both; margin: 0 auto; width:100%; max-width: 1920px; height: 470px; background:#e7f0f6;}
#gallery:before, #gallery:after{z-index:-1;content:'';display:block;position:absolute;top:-41px;right: 50%;width: 34.15%;height:511px;margin: 0 302px 0 0;border-radius:0 50px 0 0;background:#496aa6 url(/images/ch/main/bg_gallery.jpg) no-repeat;background-size: cover;}
#gallery:after {top: auto; right: auto; bottom: 39px; left: 16px; width: 218px; height: 188px; background: url(/images/ch/main/bg_gallery2.png)no-repeat; border-radius: 0; margin: 0;}


#gallery .inner{padding:0 0 0 285px;}
#gallery .title{position:absolute; top:19px; left:0; width:220px; line-height:165%; color:#fff; font-size:15px; word-break:keep-all; z-index: 2;}
#gallery .en{line-height:100%; font-size: 15px; font-weight:200; color:rgba(255,255,255,0.3); letter-spacing:0;}
#gallery h4{padding:7px 0 25px; line-height:100%; font-size:32px; font-weight:600; color:#fff;}
#gallery .info {font-weight: 200;}
#gallery .list_wrap{float:left; width:100%; padding: 0 0 0 27.5%;}
#gallery .slick-center{position:relative; z-index:1;}
#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; height: 470px;}
#gallery .list *{display:block;}
#gallery .list a{overflow:hidden; position:relative; width:326px; margin:70px 30px 0 0; border-radius:0 0 50px 0; box-shadow:10px 10px 10px rgba(0,0,0,0.2); text-decoration:none; background:#fff; transition:margin-top 0.25s ease-in-out;}
#gallery .list a:hover{margin-top:90px;}
#gallery .img{position:relative; overflow:hidden;}
#gallery .img img{width:100%; height:227px;}
#gallery .sbj{height:93px; padding:15px 0 0 25px; transition:background 0.25s ease-in-out; box-sizing:border-box;}
#gallery .tit{position:relative; z-index:1; display:inline-block; max-width:90%; padding:0 20px 0 0; color:#333; font-size:17px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{padding:10px 0 0 22px; min-height: 24px; font-size:15px; color:rgba(51,51,51,0.5); line-height:100%; background:url(/images/ch/main/ico_date.png) no-repeat 0 11px;}
#gallery .new{position:relative; z-index:1; display:inline-block; width:17px; height:17px; line-height:18px; margin:5px 0 0 -20px; font-size:10px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff9c00; vertical-align:top;}
#gallery a:hover .tit,
#gallery a:hover .date{color:#435f98;}
#gallery .control button{display:block; float:left; width:61px; height:57px; margin:0 20px 0 0; font-size:0; text-indent:-999px; border-radius:28px 0 0 28px; box-shadow:5px 8px 20px rgba(0,0,0,0.4); background:#263e5a url(/images/ch/main/ico_ctrl.png) no-repeat 28px -59px;}
#gallery .control .btn_next{border-radius:0 28px 28px 0; background-position:-47px -59px;}
#gallery .control button:hover{box-shadow:3px 3px 5px rgba(0,0,0,0.4); transition:0.25s ease-in-out;}
#gallery .more{position:static; display: inline-block; margin:63px 0 43px; line-height:100%; color:#fff; text-decoration: none;}
#gallery .more:after{content: ''; display: inline-block; margin: 0 0 -1px 11px; width: 15px; height: 15px; background: url(/images/ch/main/ico_ctrl.png)no-repeat 0 0;}

@media all and (max-width:1430px) {
	#gallery:before{right:auto; left:0; width:405px; margin:0;}
	#gallery .title{left:15px;}
    #gallery:after {left: 170px;}
}
@media all and (max-width:1024px) {
	#gallery{background:#496aa6 url(/images/ch/main/bg_gallery.jpg) no-repeat; background-size: cover;}
	#gallery:before, #gallery:after{display:none;}
    
	#gallery .inner{height:auto; padding:30px 5px 10px 5px;}
	#gallery .title{position:relative; top:0; left:0; width:100%; padding:0 0 30px 10px; box-sizing:border-box;}
	#gallery h4{padding:5px 0 10px; font-size:27px;}
	#gallery .info{font-size:14px;}
    #gallery .info br {display: none;}
	#gallery .list a{width:calc(100% - 20px); margin:0 10px 20px; box-sizing:border-box;}
    
    #gallery .list_wrap {padding: 0;}
    #gallery .list {height: auto;}
	#gallery .list a:hover,
	#gallery .slick-current + .slick-slide .list a:hover,
	#gallery .slick-current + .slick-slide .list a{margin:0 10px 20px;}
	#gallery .img img{max-height:170px;}
	#gallery .sbj{height:auto; padding:16px 5px 23px 20px;}
	#gallery .tit{font-size:16px;}
	#gallery .control{position:absolute; right:80px; top:15px;}
	#gallery .control button{width:47px;height:45px;margin:0 15px 0 0;background-position: 22px -65px;}
	#gallery .control .btn_next{background-position: -52px -65px;}
	#gallery .more{position:absolute; right:10px; top:30px; margin:0;}
}
@media all and (max-width:768px) {
    #gallery {height: auto;}
	#gallery .inner{padding:30px 2px 0;}
	#gallery .title{padding:0 0 28px 10px;}
	#gallery h4{padding:6px 0 0 0; font-size:24px;}
	#gallery .info{display:none;}
    #gallery .list_wrap {float: none;}
	#gallery .list a{width:calc(100% - 16px); margin:0 8px 35px;}
	#gallery .list img{max-height:127px;}
	#gallery .sbj{padding:15px 3px 18px 12px;}
	#gallery .tit{font-size:15px;}
	#gallery .date{font-size:14px;background-position:0 8px;}
	#gallery .control{top:5px; right: 90px;}
	#gallery .control button{width:42px; height:40px; margin:0 10px 0 0; background-position:18px -68px;}
	#gallery .control .btn_next{background-position:-56px -68px;}
	#gallery .more{top:18px;}
}
@media all and (max-width:568px) {
	#gallery h4{font-size:23px;}
    #gallery .more{font-size:14px;}
	#gallery .date{font-size:13px;}
    
    #gallery .control {top: 10px;}
    #gallery .control button {margin: 0 5px 0 0; width: 35px; height: 32px; background-size: auto 80px; background-position: 17px -56px; box-shadow: 2px 1px 5px rgb(0 0 0 / 40%);}
    #gallery .control .btn_next{background-position:-46px -57px;}
}
@media all and (max-width:380px) {
	#gallery .inner{padding:28px 4px 0;}
	
	#gallery h4{font-size:22px;}
	#gallery .list a{width:calc(100% - 12px); margin:0 6px 37px;}
	#gallery .list img{max-height:98px;}
	#gallery .sbj{padding:14px 3px 16px 12px;}
	#gallery .tit{font-size:14px;}
	#gallery .date{padding:7px 0 0 22px; font-size:12px; background-position:0 5px;}
	#gallery .control{right:85px;}

}