@charset "utf-8";

/* 비주얼 */
#visual {height: 550px;background: url(/images/ch/main/bg_main.jpg)no-repeat center;background-size: cover;}
#visual .inner {z-index: 1;height: inherit;}
#visual .inner::after {z-index: -1;content: '';display: block;position: absolute;bottom: 0;right: 0;width: 878px;height: 457px;background: url(/images/ch/main/bg_visual.png)no-repeat bottom;background-size: contain;}
#visual .txt {position: relative;padding: 95px 0 0;width: 100%;}
#visual .txt > span {font-size: 20px;font-weight: 600;color: #bbdba7;letter-spacing: 6px;}
#visual .txt strong {display: block;margin: 20px 0;font-family: 'Jalnan';font-size: 50px;line-height: 1.2;}
#visual .txt strong br {font-family: 'Dotum';}
#visual .txt strong span {color: #1c9e65;}
#visual .txt p {color: #555;}

/* 바로가기 */
#link {z-index: 2;position: absolute;left: 0;bottom: -125px;display: flex;justify-content: space-between;align-items: center;padding: 0 100px;width: 100%;height: 250px;background: #1c9e65;border-radius: 10px;box-shadow: 0 0 20px 0 rgba(0,0,0,.15);box-sizing: border-box;}
#link li a {position: relative; display: block; width: 100%; font-size: 20px; font-weight: 600; color: #fff; text-align: center; text-decoration: none;}
#link li a::before {content: ''; display: block; margin: 0 0 15px; width: 135px; height: 135px; background: #fff url(/images/ch/main/ico_link1.png)no-repeat center left 39px; box-shadow: 0 0 20px 0 rgba(0,0,0,.15); border-radius: 50%;}
#link li:nth-child(2) a::before {background-image: url(/images/ch/main/ico_link2.png); background-position: center;}
#link li:nth-child(3) a::before {background-image: url(/images/ch/main/ico_link3.png); background-position: center;}
#link li:nth-child(4) a::before {background-image: url(/images/ch/main/ico_link4.png); background-position: center left 27px;}
#link li:nth-child(5) a::before {background-image: url(/images/ch/main/ico_link5.png); background-position: center;}

/* 포토갤러리 */
#gallery {position: relative; padding: 215px 0 100px;}
#gallery .tit_wrap {height: 330px;}
#gallery .tit_wrap p {font-size: 20px; font-weight: 600; color: #ccc; letter-spacing: 6px;}
#gallery .tit_wrap h4 {padding: 25px 0 40px; font-family: 'Jalnan'; font-size: 50px; line-height: 1.2;}
#gallery .tit_wrap h4 span {display: block; color: #1c9e90;}
#gallery .btn_wrap {display: flex; flex-wrap: wrap;}
#gallery .btn_wrap button,
#gallery .btn_wrap a {display: block;margin: 0 0 0 10px;width: 50px;height: 50px;font-size: 0;text-indent: -9999px;background: #fff url(/images/ch/main/ico_ctrl.png)no-repeat 14px 16px;border-radius: 5px;box-shadow: 0 0 8px 0 rgba(221,221,221,.7);}
#gallery .btn_wrap .btn_prev {margin: 0;}
#gallery .btn_wrap .btn_stop {background-position: -76px 16px;}
#gallery .btn_wrap .btn_stop.on {background-position: -161px 16px;}
#gallery .btn_wrap .btn_next {background-position: -252px 16px;}
#gallery .btn_wrap a {background-position: -335px 16px;}
#gallery .list_wrap {position: absolute;top: 185px;left: 50%;margin: 0 0 0 -275px;width: 1400px;box-sizing: border-box;}
#gallery .list a {position: relative;display: block;margin: 30px 25px;text-decoration: none;}
#gallery .list .img {overflow: hidden; display: block; width: 480px; height: 330px; border-radius: 10px;}
#gallery .list .img::after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 142px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%); border-radius: 10px; transition:0.25s ease-in-out;}
#gallery .list .img img {width: 100%; height: 100%;}
#gallery .sbj{z-index:1;position:absolute;bottom:0;left:0;height:100px;width: 420px;padding:29px 0 0 6.5%;box-sizing:border-box;color:#fff;transition:0.25s ease-in-out;}
#gallery .sbj:before{z-index:-1; opacity:0; content:''; display:block; position:absolute; top:0; left:0; width: 100%; height:100%; border-radius:0 15px; background: #15a081; background:linear-gradient(to right, #15a081 0%,#31a86c 100%); transition:0.25s ease-in-out;}
#gallery .tit{display:inline-block; max-width:90%; height:31px; line-height:120%; padding:0 20px 0 0; font-size:18px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{position: relative;display: block;padding: 0 0 0 18px;line-height:110%;font-weight:200;}
#gallery .date::before {content:'';display: block;position: absolute;top: 2px;left: 0;width: 14px;height: 14px;background: url(/images/ch/main/ico_date.png) no-repeat 0 0;}
#gallery .ico_new{display:inline-block;width:15px;height:16px;line-height:17px;margin: 3px 0 0 -20px;font-size:10px;border-radius:3px;text-transform:uppercase;text-align:center;font-weight:200;color:#fff;background:#c32a4a;vertical-align:top;}
#gallery a:hover .img:after{opacity: 0;}
#gallery a:hover .sbj{left:30px; bottom:-20px;}
#gallery a:hover .sbj:before{opacity:0.9;}

@media all and (max-width:1440px){
    #visual .inner::after {width: 800px;}
    
    #link {margin: 0 15px;width: calc(100% - 30px);}

    #gallery .tit_wrap h4 {font-size: 40px;}
}
@media all and (max-width:1240px){
    #visual .inner::after {width: 660px;}

    #link {padding: 0 30px;}
}
@media all and (max-width:1024px){
    #visual {height: auto;}
    #visual .inner::after {width: 400px;right: 15px;}
    #visual .txt {padding: 60px 0 100px;}
    #visual .txt > span {font-size: 18px;}
    #visual .txt strong {font-size: 44px;}

    .inner2 {padding: 0;}
    #link {position: static;margin: 0;padding: 30px;width: 100%;height: auto;border-radius: 0 0 10px 10px;}
    #link li a {font-size: 18px;}
    #link li a::after {width: 110px; height: 110px;}

	#gallery {padding: 80px 0 0;}
	#gallery .tit_wrap {height: auto;}
    #gallery .list_wrap{overflow: hidden;position:relative;top: 0;left: 0;margin: 0;width:100%;}
	#gallery .list{float:left;}
	#gallery .list a{width:calc(100% - 18px); margin:15px 9px 65px 9px; border-radius:15px; background:#fff; box-shadow:5px 5px 15px rgba(119,119,119,0.1);}
	#gallery .list .img{width:100%;height: auto;box-shadow:none;}
	#gallery .list .img img{height:200px;}
	#gallery .sbj{position:relative;display: block;height:auto;width:100%;padding:20px 0 17px 15px;color:#333;}
	#gallery a:hover .sbj{left:0; bottom:0;}
	#gallery .list .img:after,
	#gallery .sbj:before{display:none;}
	#gallery .tit{height:auto;padding: 0 20px 8px 0;font-size:16px;}
	#gallery .ico_new {margin-top: 1px;}
	#gallery .date{font-size:14px;}
	#gallery .date::before {top: 0; background-position: 100% 100%;}
}
@media all and (max-width:768px){
    #visual .txt {padding: 50px 0 160px;}
    #visual .txt strong {font-size: 38px;}
    #visual .inner::after {width: 300px; right: 10px;}

    #link {flex-wrap: wrap;justify-content: center;box-sizing: border-box;}
    #link li {width: 33.33%;}
    #link li:nth-child(n + 4) {margin: 15px 0 0;}
    #link li a {font-size: 16px;}
    #link li a::before {margin: 0 auto 10px;width: 110px;height: 110px;background-size: 60%;background-position: center;}
    #link li:nth-child(4) a::before {background-position: center left 20px;}

	#gallery {padding: 50px 0 0;}
	#gallery .tit_wrap p {font-size: 16px;text-align: center;}
	#gallery .tit_wrap h4 {padding: 10px 0 20px;font-size: 30px;text-align: center;}
	#gallery .btn_wrap {justify-content: center; margin: 0 0 20px;}
	#gallery .list .img img {height: 160px;}
}
@media all and (max-width:568px){
    #visual .txt > span {font-size: 16px;}
    #visual .txt strong {margin: 10px 0;font-size: 34px;}

	#link {padding: 30px 0;}
	#link li a {font-size: 15px;}
	#link li a::before {width: 90px; height: 90px;}

	#gallery .tit_wrap p {font-size: 14px;}
	#gallery .btn_wrap button,
	#gallery .btn_wrap a {width: 40px;height: 40px;background-size: auto 16px;background-position: 11px 12px;}
	#gallery .btn_wrap .btn_stop {background-position: -71px 12px;}
	#gallery .btn_wrap .btn_stop.on {background-position: -146px 12px;}
	#gallery .btn_wrap .btn_next {background-position: -227px 12px;}
	#gallery .btn_wrap a {background-position: -300px 12px;}
	#gallery .list a{width:calc(100% - 14px); margin:10px 7px 55px;}
	#gallery .tit {font-size: 15px;}
	#gallery .sbj{padding:17px 0 15px 15px;}
}
@media all and (max-width:380px){
	#visual .txt strong {font-size: 30px;}
	#visual .txt p {font-size: 14px;}

	#link li a {font-size: 14px;}
	#link li a::before {width: 80px; height: 80px;}

	#gallery .tit_wrap h4 {font-size: 28px;}
}