@charset "utf-8";

body{color:#333;}
.inner{max-width:1200px; padding:0 !important;}

#topmenu .menu:before{width:640px; margin:0 320px 0 0 !important;}
#topmenu > li{width:20%;}

.logo{left:0;}
.logo span > span{padding:0 0 4px !important; color:#171717 !important; text-align:left; font-size:16px !important;}
.logo strong{padding:0 !important; color:#171717 !important; text-align:left; font-size:27px !important;}

#footer{padding:30px 0 118px; background:#ccc url(../../images/ch/common/bg_footer.png) no-repeat bottom center; font-size:17px; color:#666; text-align:center;}
#footer .info{padding:0;}
#footer .logo{position:static; padding:0 0 7px;}

#container_sub{overflow:hidden;}
#subVisual{background-image:url(../../images/ch/common/subvisual.jpg);}
#subVisual .slogan{height:285px; line-height:150%; box-sizing:border-box; padding:62px 0 0 548px; background:url(../../images/ch/common/img_subvisual.png) no-repeat bottom left 36px; font-family:'gmarket'; font-weight:800; font-size:20px; color:#fff; text-align:center;}
#subVisual .slogan p{padding:20px 0 0;}
.location{position:relative; top:-35px; left:50%; margin:0 0 0 -600px; border:1px solid #bababa; border-right:none; border-radius:5px; background:#fff;}
.location a{position:relative; display:block; box-sizing:border-box; padding:0 0 0 30px; font-weight:200; color:#666;}
.location .home{width:68px; height:68px; padding:0; border-radius:5px 0 0 5px; background:#bababa url(../../images/ch/common/ico_home.png) no-repeat center; font-size:0; text-indent:-999px; transition:.3s;}
.location .home:hover,
.location .home:active,
.location .home:focus{background-color:#307ed3;}
.snb > li{position:relative; float:left; width:270px; min-width:120px; line-height:68px; border-right:1px solid #bababa;}
.snb > li:last-child{min-width:140px;}
.snb > li > a:after{content:''; position:absolute; top:50%; margin:-3px 0 0; right:30px; border-top:5px solid #959595; border-left:5px solid transparent; border-right:5px solid transparent; transition:0.3s;}
.snb > li > a.on:after{transform:rotate(-180deg);}
.snb ul{display:none; z-index:2; position:absolute; top:68px; left:-1px; width:100%; border:1px solid #bababa; background:#fff;}
.snb ul li{line-height:48px; border-bottom:1px dashed #ccc;}
.snb ul li a{padding-right:0;}
.snb ul li:last-child{border:none;}

#subContent{max-width:1200px; margin:64px auto 0;}
#subContent #content{float:none; width:100%;}
#pageInfo{position:relative; float:none; width:100%; height:auto; padding:0 0 50px; color:#333;}
#pageInfo h3{padding:0 0 22px; font-family:'gmarket'; font-size:40px; font-weight:800; text-align:center; border-bottom:1px solid #e0e0e0;}
#pageInfo a{position:absolute; top:9px; left:5px; width:20px; height:20px; border-top:1px solid #c0c0c0; border-right:1px solid #c0c0c0; transform:rotate(-135deg); font-size:0; text-indent:-999px;}
#pageInfo a.right{left:auto; right:5px; transform:rotate(45deg);}

@media all and (max-width:1430px) {
    #topmenu .menu{padding-left:350px;}
    #topmenu .menu:before{left:auto; right:50%; width:375px;}
}

@media all and (max-width:1230px) {
    .inner{width:100%; padding:0 15px !important;}
    
    #topmenu .menu{padding-left:330px;}
    #topmenu .menu:before{left:-15px; right:auto; width:280px; margin:0 !important;}
    
    .logo{left:15px;}
}

@media all and (max-width:1200px) {
    #subVisual .slogan{padding:62px 0 0 395px;}
    .location{left:0; margin:0; border-radius:0;}
    .location .home{border-radius:0;}
}

@media all and (max-width:1024px) {
    .logo span > span{padding:2px 0 4px !important; font-size:13px !important;}
    .logo strong{font-size:23px !important;}
    
    .m_menu .logo span > span, .m_menu .logo strong{color:#fff !important;}
    
    #footer{line-height:130%; padding:30px 0 50px; background-size:contain; font-size:1em;}
    #footer .logo{padding:0 0 15px;}
    
    #subVisual .slogan{height:auto; padding:30px 0 30px 300px; background-size:300px; background-position:bottom left; font-size:18px;}
    #subVisual .slogan img{width:400px;}
    .location{position:static;}
    .location a{padding:0 0 0 15px;}
    .location .home{width:38px; height:38px; background-size:15px;}
    .snb ul{top:38px;}
    .snb > li{width:180px; line-height:38px;}
    .snb ul li{line-height:38px;}
    .snb > li > a:after{right:10px;}
    
    #pageInfo{padding:0;}
    #pageInfo h3{padding:50px 0 10px; font-size:30px;}
    #pageInfo a{top:55px; width:18px; height:18px;}
}

@media all and (max-width:768px) {
    .inner{padding:0 10px !important;}
    
    .logo{left:10px;}
    .logo span > span{font-size:11px !important;}
    .logo strong{font-size:20px !important;}
    
	.util_wrap .sns{right:58px;}

    #footer .logo{margin:0;}
    
    #subVisual .slogan{padding-left:200px; background-size:250px; font-size:0.938em;}
    #subVisual .slogan img{width:300px;}
    
    #pageInfo h3{font-size:25px;}
    #pageInfo a{top:54px; width:15px; height:15px;}
}

@media all and (max-width:568px) {
    .logo strong{font-size:18px !important;}
    #footer{padding:20px 0; background-image:none;}
    
    #subVisual .slogan{padding:20px 0 15px; text-align:left; background-size:130px; background-position:bottom right;}
    #subVisual .slogan img{width:230px;}
    #subVisual .slogan p{padding:5px 0 0;}
    .location a{padding: 0 30px 0 10px;}
    .location .home{width:32px; height:32px;}
    .snb ul{top:32px;}
    .snb > li, .snb ul li{width:auto; line-height:32px;}
    
    #pageInfo h3{padding-top:30px; font-size:21px;}
    #pageInfo a{top:34px; width:12px; height:12px;}
}

@media all and (max-width:380px) {
    #subVisual .slogan{background:none;}
    #subVisual .slogan img{width:210px;}
    
    #pageInfo h3{font-size:19px;}
}