@charset "utf-8";

/* 메인비주얼 */
#visual {overflow:hidden; position:relative; height:888px; background:#4864ab url(/images/ch/main/bg_mainvisual.jpg) no-repeat center; background-size:cover;}

.slogan {position:absolute; top:100px; left:50%; margin-left:-600px; width:1560px; height:500px; box-sizing:border-box; padding:96px 0 0 52px; border-radius:80px 0 0 80px; background:#fff url(/images/ch/main/mainvisual.png) no-repeat bottom right; background-size:cover;}
.slogan p {font-size:23px;}
.slogan p:not(.txt3) {font-family:'gmarket'; font-size:50px;}
.slogan .hp1 {color:#e83f3f;}
.slogan .hp2 {color:#3d9483;}
.slogan .txt1 > span span {position:relative;}
.slogan .txt1 > span span:before {content:''; position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:50%; background:#e83f3f;}
.slogan .txt1 > span.hp2 span:before {background:#3d9483;}

.slogan .txt2 {padding:12px 0 52px;}
.slogan .txt2 strong {z-index:0; position:relative;}
.slogan .txt2 strong:before {z-index:-1; content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:100%; height:25px; border-radius:20px; background:#e9edf2;}

.sec {position:relative; background:#f4f4f4 url(/images/ch/main/bg_gallery.jpg) no-repeat bottom center;}

/* 바로가기 메뉴 */
#quick {position:absolute; top:-188px; left:50%; transform:translateX(-50%); width:100%; height:288px; box-sizing:border-box; padding:70px 0 0; border-radius:80px 80px 0 0; background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.35);}
#quick ul:after {content:''; display:block; clear:both;}
#quick ul li {float:left; width:20%;}

#quick ul li a {position:relative; display:block; padding-top:126px; font-size:18px; text-align:center; font-weight:800;}
#quick ul li a:before,
#quick ul li a:after {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:101px;}
#quick ul li a:after {background:url(/images/ch/main/ico_quick1.png) no-repeat center;}
#quick ul li:nth-child(2) a:after {background-image:url(/images/ch/main/ico_quick2.png);}
#quick ul li:nth-child(3) a:after {background-image:url(/images/ch/main/ico_quick3.png);}
#quick ul li:nth-child(4) a:after {background-image:url(/images/ch/main/ico_quick4.png);}
#quick ul li:nth-child(5) a:after {background-image:url(/images/ch/main/ico_quick5.png);}

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

/* 모의의회 */
#gallery {position:relative; left:50%; transform:translateX(-50%); width:1275px; height:645px; box-sizing:border-box; padding:172px 0 0;}
#gallery:after {content:''; display:block; clear:both;}
#gallery h4 {position:absolute; top:164px; left:50%; margin:0 0 0 -600px;}

#gallery ul {overflow:hidden; float:right; border-radius:15px 15px 0 0; margin:0 223px 0 0;}
#gallery li {float:left;}
#gallery li > a {z-index:1; position:relative; float:left; line-height:50px; padding:0 20px; font-size:20px; letter-spacing:-2px; text-decoration:none; background:#acacac;}
#gallery li.on > a:not(.more) {background:#294b7c; font-weight:800; color:#fff;}

#gallery .list_wrap {display:none; position:absolute; top:171px; left:0; width:100%; box-sizing:border-box;}
#gallery li.on .list_wrap {display:block;}
#gallery .list_wrap .list:not(:first-of-type) {display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type) {display:inline-block;}
#gallery .list {float:left;}
#gallery .list * {display:block;}
#gallery .list a {position:relative; width:350px; margin:91px 37px 0 38px; text-decoration:none;}
#gallery .img {position:relative; overflow:hidden; width:100%;}
#gallery a:hover .img {box-shadow:0 0 10px rgba(0,0,0,0.3);}

#gallery .img img {width:100%; height:220px; transition:0.3s ease;}
#gallery a:hover img {transform:scale(1.1);}

#gallery .sbj {position:relative; font-size:18px; box-sizing:border-box;}
#gallery .sbj:before {content:''; display:block; height:3px; width:30px; margin:20px 0 14px; border-radius:3px; background:#f39800;}
#gallery .tit{display:inline-block; line-height:110%; max-width:98%; padding:0 20px 0 0; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
#gallery .date{line-height:110%; padding:13px 0 0 0; color:#666;}

#gallery a:hover .tit,
#gallery a:focus .tit {text-decoration:underline;}
#gallery .btn_stop,
#gallery .more {width:35px; height:35px; padding:0 !important; font-size:0; text-indent:-999px; border-radius:10px; background:rgba(0,0,0,0.3) url(/images/ch/main/ico_ctrl.png) no-repeat -119px 0;}
#gallery .btn_stop {display:block; background-position:-40px 0;}
#gallery .btn_stop.on {background-position:-38px -35px;}
#gallery .more:before {display:none;}
#gallery .ctrl,
#gallery .more,
#gallery .slick-arrow {z-index:2; position:absolute; right:50%; top:187px; margin:0 -600px 0 0;}
#gallery .ctrl {margin:0 -520px 0 0;}
#gallery .slick-arrow {top:16px; width:35px; height:35px; font-size:0; text-indent:-999px; border-radius:10px; box-sizing:border-box; background:rgba(0,0,0,0.3) url(/images/ch/main/ico_ctrl.png) no-repeat;}
#gallery .slick-next {margin:0 -560px 0 0; background-position:-79px 0;}
#gallery .slick-prev {margin:0 -480px 0 0;}
#gallery .more:hover,
#gallery .btn_stop:hover,
#gallery .slick-arrow:hover {background-color:rgba(0,0,0,0.5); transition:background-color 0.25s ease-in-out;}
#gallery .more {display:none;}
#gallery .on .more {z-index:95; display:block;}

#gallery .no_list {position:absolute; bottom:35%; left:50%; transform:translateX(-50%);}

@media all and (max-width:1275px){
	#gallery {width:100%;}
	#gallery .list a {margin:91px 30px 0;}
}

@media all and (max-width:1230px){
    .slogan {left:15px; margin-left:0; width:calc(100% - 15px); background-position:bottom right -360px;}
    #quick {width:calc(100% - 30px);}
    
	#gallery h4 {left:15px; margin:0;}
	#gallery .list a {width:calc(100% - 40px); margin:91px 20px 0;}
	#gallery .ctrl,
	#gallery .more,
    #gallery .slick-arrow {margin:0;}
	#gallery .more {right:15px;}
	#gallery .slick-next {right:55px;}
	#gallery .ctrl {right:95px;}
	#gallery .slick-prev {right:135px;}
}

@media all and (max-width:1024px){
    #visual {height:500px;}
    
    .slogan {top:30px; height:auto; padding:60px 0 60px 52px; background-position:bottom right -190px;}
    .slogan p {font-size:18px;}
    .slogan p:not(.txt3) {font-size:28px;}
    .slogan .txt1 > span span:before {top:-10px; width:5px; height:5px;}
    .slogan .txt2 {padding:5px 0 25px;}
    
    #quick {top:-154px; height:auto; padding:35px 0;}
    #quick ul li a {padding-top:81px;}
    #quick ul li a:before,
    #quick ul li a:after {width:70px; height:71px;}
    #quick ul li a:after {background-size:60px;}
    
	#gallery {height:500px; padding:94px 0 0 0;}
	#gallery h4 {top:94px;}
    #gallery li > a{font-size:18px;}
    
    #gallery .list_wrap {top:93px;}
	#gallery .list a {width:calc(100% - 30px); margin:81px 15px 0;}
	#gallery .img {height:183px;}
	#gallery .img img {height:100%;}
	#gallery .img div {right:13px; bottom:12px; width:65px; height:22px; line-height:24px; font-size:13px;}
	#gallery .sbj {font-size:17px;}
	#gallery .sbj:before {margin:18px 0 9px;}
	#gallery .date {padding:8px 0 0 0;}
    
    #gallery .ctrl, #gallery .more {top:109px;}
}

@media all and (max-width:768px){
    #visual {height:448px;}
    
    .slogan {padding:40px 0 40px 40px; border-radius:35px 0 0 35px;}
    .slogan p {font-size:1em;}
    .slogan p:not(.txt3) {font-size:25px;}
    .slogan .txt2 strong:before {height:15px;}
    
    #quick {border-radius:35px 35px 0 0;}
    #quick ul li a {padding-top:75px; font-size:1em;}
    #quick ul li a:after {background-size:50px;}
    
	#gallery {height:412px; padding:54px 0 0 0;}
	#gallery h4 {position:static; padding:0 0 20px; text-align:center;}
    #gallery h4 img {width:110px;}
	#gallery ul {float:left; margin:0 0 0 10px;}
	#gallery li > a {line-height:45px; font-size:1em;}
    #gallery .list_wrap {top:72px;}
	#gallery .list a {width:calc(100% - 20px); margin:102px 10px 0;}
	#gallery .img {height:131px;}
	#gallery .sbj {font-size:1em;}
	#gallery .sbj:before {width:25px; margin:16px 0 8px;}
	#gallery .date {padding:5px 0 0 0;}

	#gallery .ctrl,
	#gallery .more {top:124px;}
	#gallery .slick-arrow{top:52px;}
	#gallery .more {right:10px;}
	#gallery .slick-next {right:50px;}
	#gallery .ctrl {right:90px;}
	#gallery .slick-prev {right:130px;}
}

@media all and (max-width:568px){
    #visual {height:435px;}
    
    .slogan {background-size:550px; background-position:bottom right -187px;}
    .slogan p:not(.txt3) {font-size:21px;}
    .slogan .txt1 > span span:before {top:-8px; width:3px; height:3px;}
    .slogan .txt2 strong:before {height:10px;}
    
    #quick {padding:20px 0 15px; box-shadow:0 0 5px rgba(0,0,0,0.35);}
    #quick ul li {width:33.33%; margin:0 0 14px;}
    #quick ul li a {padding-top:62px;}
    #quick ul li a:before,
    #quick ul li a:after {width:65px; height:65px;}
    #quick ul li a:after {background-size:40px;}
    
	#gallery {height:442px; padding:107px 0 0;}
    #gallery h4 img {width:100px;}
    #gallery li > a{line-height:38px;}
    
	#gallery .list_wrap {top:116px; padding:0 3px;}
	#gallery .list a {width:calc(100% - 14px); margin:100px 7px 0;}
	#gallery .sbj:before {width:15px; height:1px; margin:14px 0 8px;}
    
    #gallery .slick-arrow {top:50px;}
    #gallery .ctrl, #gallery .more {top:166px;}
    #gallery .slick-next {right:48px;}
	#gallery .ctrl {right:86px;}
	#gallery .slick-prev {right:124px;}
}

@media all and (max-width:380px){
    #visual {height:381px;}
    
    .slogan {top:20px; padding:30px; background-size:420px; background-position:bottom right -147px;}
    .slogan p:not(.txt3) {font-size:18px;}
    
	#gallery {height:401px; padding:100px 0 0 0;}
    #gallery h4 img {width:90px;}
    #gallery ul {border-radius:0;}
	#gallery li > a {line-height:36px; padding:0 8px;}
	#gallery .list_wrap {top:110px; padding:0 4px;}
	#gallery .list a {width:calc(100% - 12px); margin:93px 6px 0;}
	#gallery .sbj:before {width:23px; margin:13px 0 7px;}
	#gallery .img {height:108px;}
    
    #gallery .slick-arrow {top:48px;}
    #gallery .ctrl, #gallery .more {top:158px;}
}