@charset "utf-8";

#visual{background:url(../../images/ch/main/bg_mainvisual.jpg) no-repeat bottom center; background-size:cover;}
#visual .slogan{height:460px; line-height:150%; box-sizing:border-box; padding:92px 0 0 48.8%; background:url(../../images/ch/main/img_mainvisual.png) no-repeat bottom left 12px; text-align:center; color:#fff; text-shadow:0 0 3px rgba(4,30,22,0.7); font-size:23px; font-weight:400; word-break:keep-all;}
#visual .slogan img{display:block; margin:0 auto;}
#visual .slogan img:nth-child(2){padding:6px 0 0;}
#visual .slogan p:before{content:''; display:block; width:57px; height:18px; margin:51px auto 41px; background:url(../../images/ch/main/img_slogan.png) no-repeat center;}

#container_main h4{position:relative; padding:82px 0 48px; color:#fff; font-size:50px; font-family:'gmarket'; text-align:center;}
#container_main h4:before{content:''; position:absolute; top:105px; left:0; width:100%; height:1px; background:rgba(255,255,255,0.5);}
#container_main h4 span{position:relative; padding:0 20px; background:#307ed3;}

#quick{position:relative; background:#307ed3; text-align:center;}
#quick ul{padding:0 0 100px;}
#quick ul:after{content:''; display:block; clear:both;}
#quick ul li{position:relative; float:left; width:calc((100% - 200px) / 5); height:223px; box-sizing:border-box; padding:0 0 10px; border-radius:10px; background:#fff;}
#quick ul li + li{margin:0 0 0 50px;}
#quick ul li a{display:block; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; padding:164px 0 0; border-radius:10px; background:#fff url(../../images/ch/main/ico_quick1.png) no-repeat top 30px center; color:#fff; font-family:'gmarket'; font-size:22px; font-weight:800; text-align:center; text-shadow:0 0 3px rgba(4,30,22,0.5); transition:.5s;}
#quick ul li a:before{content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:#3bbab9;}
#quick ul li a span{display:block; width:100%; height:50px; line-height:52px; color:#fff; background:#3bbab9;}

#quick ul li:nth-child(2) a{background-image:url(../../images/ch/main/ico_quick2.png);}
#quick ul li:nth-child(3) a{background-image:url(../../images/ch/main/ico_quick3.png);}
#quick ul li:nth-child(4) a{background-image:url(../../images/ch/main/ico_quick4.png);}
#quick ul li:nth-child(5) a{background-image:url(../../images/ch/main/ico_quick5.png);}

#quick ul li:nth-child(2) a:before,
#quick ul li:nth-child(2) a span,
#quick ul li:nth-child(2) a:hover,
#quick ul li:nth-child(2) a:active,
#quick ul li:nth-child(2) a:focus{background-color:#333a8b;}

#quick ul li:nth-child(3) a:before,
#quick ul li:nth-child(3) a span,
#quick ul li:nth-child(3) a:hover,
#quick ul li:nth-child(3) a:active,
#quick ul li:nth-child(3) a:focus{background-color:#9c2d94;}

#quick ul li:nth-child(4) a:before,
#quick ul li:nth-child(4) a span,
#quick ul li:nth-child(4) a:hover,
#quick ul li:nth-child(4) a:active,
#quick ul li:nth-child(4) a:focus{background-color:#1fb673;}

#quick ul li:nth-child(5) a:before,
#quick ul li:nth-child(5) a span,
#quick ul li:nth-child(5) a:hover,
#quick ul li:nth-child(5) a:active,
#quick ul li:nth-child(5) a:focus{background-color:#f3941c;}

#quick ul li a:hover,
#quick ul li a:active,
#quick ul li a:focus{top:-24px; height:calc(100% + 10px); border-radius:10px 10px 0 0; background-color:#3bbab9;}

#quick ul li a:hover:before,
#quick ul li a:active:before,
#quick ul li a:focus:before{background:#fff;}

#quick ul li a:hover span,
#quick ul li a:active span,
#quick ul li a:focus span{background:#fff; color:#3bbab9; text-shadow:none;}

#quick ul li:nth-child(2) a:hover span,
#quick ul li:nth-child(2) a:active span,
#quick ul li:nth-child(2) a:focus span{color:#333a8b;}

#quick ul li:nth-child(3) a:hover span,
#quick ul li:nth-child(3) a:active span,
#quick ul li:nth-child(3) a:focus span{color:#9c2d94;}

#quick ul li:nth-child(4) a:hover span,
#quick ul li:nth-child(4) a:active span,
#quick ul li:nth-child(4) a:focus span{color:#1fb673;}

#quick ul li:nth-child(5) a:hover span,
#quick ul li:nth-child(5) a:active span,
#quick ul li:nth-child(5) a:focus span{color:#f3941c;}

/* 견학사진첩 */
#gallery{height:712px; background:#65d291;}
#container_main #gallery h4 span{background:#65d291;}
#gallery .control{position:absolute; top:193px; right:49px;}
#gallery .control button, .more{display:inline-block; width:44px; height:44px; border-radius:50%; background:#fff url(../../images/ch/main/ico_button.png) no-repeat top 15px left 14px; font-size:0; text-indent:-999px; vertical-align:top;}
#gallery .control button.btn_next{margin:0 0 0 2px; background-position:top -28px left 17px;}
#gallery .more{background-position:bottom 15px left 16px;}

#gallery .tab_wrap:after{content:''; display:block; clear:both;}
#gallery .tab_wrap li{float:left;}
#gallery .tab_wrap li > a:not(.more){display:block; width:90px; height:44px; line-height:44px; border-radius:5px; margin:0 5px 0 0; font-family:'score'; font-size:18px; font-weight:400; color:#333; text-align:center; background:#fff;}
#gallery .tab_wrap li.on > a:not(.more){background:#3d7e57; color:#fff;}

#gallery .list_wrap{display:none; position:absolute; top:277px; left:0; width:100%;}
#gallery .more{display:none; position:absolute; top:193px; right:0;}
#gallery li.on .list_wrap, #gallery li.on .more{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; margin:0 75px 0 0;}
#gallery .list *{display:block;}
#gallery .list a{position:relative; width:350px; border-radius:10px; margin:5px 0 0; background:#fff;}
#gallery .list a:before{content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%); width:29%; height:10px; border-radius:25px; background:#3d7d58;}

#gallery .date{font-weight:400; color:#666;}
#gallery .txt{box-sizing:border-box; padding:25px 20px 27px;}
#gallery .txt em{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; padding:6px 0 0; font-size:18px; font-weight:400; color:#333;}
#gallery .img{overflow:hidden; height:231px; border-radius:0 0 10px 10px;}
#gallery .img img{width:100%; height:100%; transition:.3s ease;}
#gallery a:hover img{transform:scale(1.1);}

@media all and (max-width:1230px){
    #gallery .control{right:64px;}
    #gallery .more{right:15px;}
    #gallery .list_wrap{box-sizing:border-box; padding:0 15px;}
    #gallery .list{margin:0 30px 0 0;}
}
@media all and (max-width:1024px){
    #visual .slogan{height:auto; padding:50px 0 50px 350px; background-size:400px; font-size:18px;}
    #visual .slogan p:before{margin:20px auto; background-size:30px;}
    #visual .slogan img{height:35px;}
    #visual .slogan img:nth-child(2){height:45px;}
    
    #container_main h4{padding:50px 0 35px; font-size:30px;}
    #container_main h4:before{top:64px;}
 
    #quick ul{padding:0 0 45px;}
    #quick ul li{width:calc((100% - 120px) / 5); height:195px;}
    #quick ul li + li{margin:0 0 0 30px;}
    #quick ul li a{padding:135px 0 0; background-size:60px; font-size:18px;}
    #quick ul li a:before{width:10px; height:10px; top:-5px;}
    
    #gallery{height:585px;}
    #gallery .control, #gallery .more{top:120px;}
    #gallery .list_wrap{top:195px;}
}
@media all and (max-width:768px){
    #visual .slogan{padding:30px 0 30px 250px; background-size:300px; font-size:1em;}
    #visual .slogan p:before{margin:10px auto; background-size:25px;}
    #visual .slogan img{height:25px;}
    #visual .slogan img:nth-child(2){height:30px;}
    
    #container_main h4{padding:30px 0; font-size:23px;}
    #container_main h4:before{top:40px;}
    
    #quick ul li{width:calc((100% - 56px) / 5); height:165px;}
    #quick ul li + li{margin:0 0 0 14px;}
    #quick ul li a{padding:115px 0 0; background-size:45px; font-size:1em;}
    #quick ul li a span{height:40px; line-height:42px;}
    
    #gallery{height:456px;}
    #gallery .tab_wrap li > a:not(.more){height:40px; line-height:40px; font-size:1em;}
    #gallery .control{top:86px; right:59px;}
    #gallery .more{top:86px; right:10px;}
    #gallery .list_wrap{top:156px; padding:0 10px;}
    #gallery .list a{width:250px;}
    #gallery .txt{padding:20px 15px 20px;}
    #gallery .txt em{font-size:1em;}
    #gallery .img{height:175px;}
}
@media all and (max-width:568px){
    #visual .slogan{padding:20px 0; background-size:190px; background-position:bottom right; text-align:left;}
    #visual .slogan img{margin:0;}
    #visual .slogan p:before{display:none;}
    #visual .slogan img{height:15px;}
    #visual .slogan img:nth-child(2){height:20px; padding:6px 0 10px;}
    
    #container_main h4{padding:30px 0 20px; font-size:19px;}
    #container_main h4:before{top:38px;}
    #container_main h4 span{padding:0 15px;}
    
    #quick ul{padding:0 0 20px;}
    #quick ul li{width:48%; height:auto; padding:0; margin:0 0 10px !important;}
    #quick ul li:nth-child(even){float:right;}
    #quick ul li + li{margin:0;}
    #quick ul li a{position:static; padding:0 0 0 60px; background-size:35px; background-position:top 5px left 14px;}
    #quick ul li a:before{display:none;}
    #quick ul li a span{height:60px; line-height:62px; box-sizing:border-box; padding:0 0 0 20px; text-align:left;}
    
    #gallery{height:394px;}
    #gallery .control, #gallery .more{top:68px;}
    #gallery .tab_wrap li > a:not(.more){width:75px; height:35px; line-height:35px;}
    #gallery .list_wrap{top:128px;}
    #gallery .list{margin:0 15px 0 0;}
    #gallery .list a{width:200px; margin:3px 0 0;}
    #gallery .list a:before{top:-3px; height:6px;}
    #gallery .img{height:145px;}
}
    
@media all and (max-width:380px){
    #quick ul li a{padding:0 0 0 50px; background-size:25px;}
    #quick ul li a span{height:50px; line-height:52px; padding:0 0 0 10px; text-align:left;}
}