@charset "utf-8";

/* 비주얼 */
#visual{position:relative; height:592px; color:#19305a; font-size:18px; font-weight:600; font-family:"Pretendard";}
#visual:before,
#visual:after{content:''; display:block;  overflow:hidden; position:absolute; top:0; left:calc(50% - 196px); width:calc(50% + 196px); height:591px; border-radius:0 0 0 120px; background:url(../../images/ch/main/visual.jpg) no-repeat;}
#visual:after{z-index:-1; top:auto; bottom:0; left:0; width:100%; height:94px; background: #f1f4f9; border-radius: 0;}
#visual .slogan{padding:78px 0 0 0; font-weight:200;}
#visual .tit{display:block; line-height:120%; font-size:52px; font-family:"SEBANG"; font-weight:700;}
#visual .info{padding:20px 0 56px; line-height:140%; font-weight: 500; letter-spacing:-0.5px;}
#visual .btn_greeting{overflow:hidden; position:relative; display:block; width:203px; height:52px; line-height:52px; padding:0 0 0 21px; border-radius:25px; box-sizing:border-box; background:#1e345d; box-sizing:border-box; font-weight:700; font-size:16px; color:#fff; text-decoration: none;}
#visual .btn_greeting:after{content:''; display:block; position:absolute; top:50%; left:160px; width:18px; height:13px; margin:-7px 0 0 0; background:url(../../images/ch/main/ico_go.png) no-repeat 100% 0; transition:0.2s linear;}
#visual .btn_greeting:hover:after{width:25px;}

@media all and (max-width:1480px) {
	#visual .slogan{padding-left:20px;}
}
@media all and (max-width:1024px) {
	#visual{height:380px; font-size:17px;}
    #visual:before{height:100%; left:320px; background-size:cover; border-radius:0 0 0 80px;}
    #visual:after{height:65px;}
	#visual .slogan{padding:45px 0 0 20px;}
	#visual .tit{font-size:34px;}
	#visual .tit span{font-size:35px;}
	#visual .info{padding:10px 0 35px 0; word-break:keep-all; text-shadow:0 0 3px rgba(255,255,255,0.3);}
}
@media all and (max-width:768px) {
    #visual{height:auto; font-size:16px;}
    #visual:before{left:250px;}
	#visual .tit{font-size:30px;}
	#visual .slogan{padding:30px 0 50px 20px;}
	#visual .btn_greeting{height:43px; line-height:43px;}
}
@media all and (max-width:568px) {
    #visual{font-size:15px;}
    #visual:before{position: static; height:200px; width:100%;}
    #visual:after{display: none;}
    #visual .slogan{padding:27px 0 45px 0; text-align: center;}
    #visual .tit{font-size:24px;}
	#visual .info{padding:10px 0 27px 0;}
    #visual .btn_greeting{margin:0 auto; text-align: left;}
}
@media all and (max-width:380px) {
	#visual .info{padding:10px 0 25px 0;}
}

.sec{padding:72px 0 0 0; background:#f1f4f9;}

/* 바로가기 */
#quick {position:relative; width:100%; height:310px; font-size:18px; font-family:"Pretendard";}
#quick ul{display: flex; justify-content:space-around; align-items: center; flex-wrap: wrap; padding:0 30px; box-sizing: border-box;}
#quick li {float:left; width:20%; padding:0 1.6%; box-sizing: border-box;}
#quick li a{z-index:1; position:relative; overflow:hidden; display:block; width:100%; height:182px; padding:121px 0 0 0; letter-spacing: 0; font-weight:700; border-radius:14px; border: 1px solid #d8e0ed; text-align:center; background:#fff; box-sizing:border-box; text-decoration:none; word-break: keep-all;}
#quick li a:after{z-index:-1; content: ' '; position: absolute; top:39px; left:0; width:100%; height:52px; background:url(../../images/ch/main/ico_lnk1.png) no-repeat 50% 0;}
#quick li.list2 a:after{background-image:url(../../images/ch/main/ico_lnk2.png);}
#quick li.list3 a:after{background-image:url(../../images/ch/main/ico_lnk3.png);}
#quick li.list4 a:after{background-image:url(../../images/ch/main/ico_lnk4.png);}
#quick li.list5 a:after{background-image:url(../../images/ch/main/ico_lnk5.png);}
#quick a:focus:after,
#quick a:hover:after{animation:ani_link 0.9s ease-in-out;}
#quick .en{position: absolute; top:167px; right:0; line-height:100%; font-size:89px; font-family:"SEBANG"; font-weight: 700; color:#e9eff9;}
@keyframes ani_link {
	0%{transform:translateY(0);}
	25%{transform:translateY(5px);}
	50%{transform:translateY(0);}
	75%{transform:translateY(7px);}
	100%{transform:translateY(0);}
}

@media all and (max-width:1024px) {
    #quick .en{top: auto; bottom:20px; font-size:75px;}
	#quick {height:auto; padding:0 0 65px; font-size:17px;}
    #quick ul{padding:0;}
	#quick li{padding:0 8px;}
	#quick li a{width:100%; height:auto; padding:98px 0 27px 0;}
	#quick li a:after{top:28px; background-size:auto 48px;}
}
@media all and (max-width:768px) {
    .sec{padding:0;}
	#quick {padding:60px 0; font-size:16px;}
	#quick li{width:40%; max-width:200px; padding:0 7px;}
	#quick li:nth-child(-n + 3){width:33.33%; margin:0 0 14px;}
	#quick li a{padding:85px 0 22px 0;}
	#quick li a:after{top:23px; background-size:auto 45px;}
}
@media all and (max-width:568px) {
    #quick .en{font-size:50px;}
    #quick{padding:40px 0 50px;}
	#quick ul{font-size:15px;}
	#quick li{max-width:150px; padding:0 5px; margin:0 0 10px;}
	#quick li a{height:120px; padding:79px 3px 0; line-height:120%;}
	#quick li a:after{background-size:auto 41px;}
}

/* 사진첩 */
#gallery{position:relative; float:left; width:100%; height:554px; box-sizing:border-box; font-weight:600;}
#gallery .inner::after{content: ''; clear: both; width:100%;}
#gallery h4{float: left; line-height:100%; margin:0 0 24px; font-size:42px; font-weight:700; font-family:"SEBANG"; color:#19305a;}
#gallery .control{float:right; margin:-4px 0 0 0;}
#gallery .control button,
#gallery .control a{float:left; width:48px; height:48px; margin:0 7px 0 0; font-size:0; text-indent:-9999px; border-radius:6px; border:1px solid #e3e6eb; box-sizing:border-box; background:#fff url(../../images/ch/main/ico_arrow.png) no-repeat 16px 50%; color:#19305a;}
#gallery .control .btn_next{background-position:-39px 50%;}
#gallery .control .more{display: flex; justify-content: center; align-items:center; width:114px; margin:0; font-family:"Pretendard"; font-size:18px; text-indent:0; background:#fff;}
#gallery .control .more:after{content: ''; display: inline-block; vertical-align: middle; width:14px; height:14px; margin:0 0 0 5px; background: url(../../images/ch/main/ico_more.png) no-repeat;}
#gallery .control button:hover,
#gallery .control a:hover{text-decoration: none; border-color: #656d7b; transition: 0.2s ease-in;}
#gallery .list_wrap{clear:both; width:calc(100% + 24px);} 
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}
#gallery .list a{overflow:hidden; position:relative; display:block; width:calc(100% - 24px); margin:0 24px 0 0; text-decoration:none; color:#19305a;}
#gallery .list a *{display:block;}
#gallery .img{display:flex; align-items:center; vertical-align:middle; position:relative; overflow:hidden; max-height:280px; border-radius:14px; border: 1px solid #d8dde5; box-sizing: border-box;}
#gallery .img img{display:inline; width:100%; transition:0.25s ease;}
#gallery a:hover img,
#gallery a:focus img{transform:scale(1.1);}
#gallery a:hover .img{border-color: #bcc3ce;}
#gallery .sbj{padding:24px 0 0 18px; font-family:"Pretendard";}
#gallery .tit{display:block; max-width:100%; margin:0 0 16px; line-height:100%; font-size:22px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .list a:hover .tit,
#gallery .list a:focus .tit{text-decoration: underline;}
#gallery .date{line-height:100%; color:#656d7b; font-size:18px; font-weight:400;}
#gallery .date:before{content: ''; display:inline-block; vertical-align: middle; width:16px; height:16px; margin:-3px 6px 0 0; background: url(../../images/ch/main/ico_date.png) no-repeat;}

@media all and (max-width:1024px){
	#gallery{height:auto; padding:0 0 55px;}
	#gallery h4{margin:0 0 22px; font-size:31px;}
	
	#gallery .img{max-height:187px;}
    #gallery .sbj{padding:20px 0 0 10px;}
	#gallery .tit{margin:0 0 10px; font-size:18px;}
    #gallery .date{font-size:15px;}

    #gallery .control button,
    #gallery .control .more{width:35px; height:35px; background-position:10px 50%;}
    #gallery .control .btn_next{background-position:-46px 50%;}
    #gallery .control .more{width:75px; font-size:14px;}
}
@media all and (max-width:768px){
	#gallery h4{font-size:28px;}

	#gallery .img{max-height:160px;}
    #gallery .sbj{padding:15px 0 0 5px;}
	#gallery .tit{margin:0 0 7px; font-size:17px;}
	#gallery .date{font-size:14px;}
    #gallery .date::before{width:14px; background-size:14px;}
}
@media all and (max-width:568px){
	#gallery h4{font-size:24px;}
    #gallery h4 span{display: none;}
    #gallery .tit{font-size:16px;}
    #gallery .list_wrap{width:calc(100% + 14px);} 
    #gallery .list a{width:calc(100% - 14px); margin:0 14px 0 0;}

    #gallery .control{margin:-7px 0 0 0;}
    #gallery .control button{margin:0 4px 0 0;}
    #gallery .control .more{width:35px; font-size:0;}
    #gallery .control .more:after{margin:0 0 0 3px;}
}