@charset "utf-8";

.btn_menu {display:none;}

#header .logo span > span,
.m_menu .logo span > span {padding:0; font-size:16px; color:#171717;}
#header .logo strong,
.m_menu .logo strong {font-size:27px; font-family:'Noto Sans KR'; letter-spacing:-2px;}

#topmenu {padding:0 0 0 230px;}
#topmenu > li {width:14.285%;}
#topmenu > li:last-child {display:block;} 
#topmenu li .tit:after{background-image:url(/images/promote/common/bg_menu1.png);}
#topmenu li.menu2 .tit:after{background-image:url(/images/promote/common/bg_menu2.png);}
#topmenu li.menu3 .tit:after{background-image:url(/images/promote/common/bg_menu3.png);}
#topmenu li.menu4 .tit:after{background-image:url(/images/promote/common/bg_menu4.png);}
#topmenu li.menu5 .tit:after{background-image:url(/images/promote/common/bg_menu5.png);}
#topmenu li.menu6 .tit:after{background-image:url(/images/promote/common/bg_menu6.png);}
#topmenu li.menu7 .tit:after{background-image:url(/images/promote/common/bg_menu7.png);}

#footer {padding:43px 0 79px;}
#footer .inner {padding:0 0 0 256px;}
#footer .logo {position:absolute; top:-5px;}
#footer address, #footer .copyright {text-align:left;}
#footer address {padding:0 0 3px;}

#subVisual {overflow:hidden; height:auto; background:#ebf0f5 url(/images/promote/sub/subvisual.jpg) no-repeat center; background-size:cover; text-align:left;}
#subVisual .inner {height:320px;}
#subVisual .txt {padding:73px 0 0;}
#subVisual .txt .txt1 {font-size:32px; font-weight:800;}
#subVisual .txt .txt1 span {display:block; padding:3px 0 0; font-size:1.344em; color:#375999;}
#subVisual .txt .txt2 {font-family:'Noto Sans KR'; font-size:16px; color:#666;}
#subVisual .txt .txt2:before {content:''; display:block; width:48px; height:1px; margin:14px 0 19px; background:#ffad00;}

.location {z-index:2; position:relative; top:0; left:0; max-width:1200px; height:62px; margin:-31px auto 0; background:#375999;}
.location:after {content:''; display:block; clear:both;}
.location * {display:block;}
.location .home {position:relative; width:62px; height:100%; margin:0; background:url(/images/promote/sub/ico_home.png) no-repeat center;}
.location .snb {float:left;}
.location .snb > li {float:left; position:relative;}
.location .snb > li > a {overflow:hidden; position:relative; width:232px; height:100%; line-height:62px; box-sizing:border-box; padding:0 40px 0 20px; color:#fff; white-space:nowrap; text-overflow:ellipsis;}
.location .snb > li > a:after {content:''; position:absolute; top:50%; transform:translateY(-50%); right:20px; border-top:8px solid rgba(255,255,255,0.5); border-left:5px solid transparent; border-right:5px solid transparent; transition:transform 0.25s ease-in-out;}
.location .snb > li > a.on:after {transform:translateY(-50%) rotate(-180deg);}

.location .home:before,
.location .snb > li > a:before,
.sns_share .btn_share:before,
.util_wrap .btns:before {content:''; position:absolute; top:50%; transform:translateY(-50%); right:0; width:1px; height:30px; background:rgba(255,255,255,0.3);}

.snb ul {display:none; z-index:3; position:absolute; top:62px; left:-1px; width:calc(100% + 1px); border:1px solid #e6e6e6; border-top:none; background:#fff; box-sizing:border-box; box-shadow:2px 3px 5px rgba(0,0,0,0.1);}
.snb ul li {width:100%;}
.snb ul a {display:block; line-height:150%; padding:14px 10px 13px 20px;}
.snb ul li + li a {border-top:1px solid #e6e6e6;}
.snb ul a.on,
.snb ul a:hover,
.snb ul a:focus,
.snb ul a:active {background:#f7f7f7;}

.util_wrap {top:-1px;}
.sns_share .btn_share, .util_wrap .btns {position:relative; width:62px; height:62px; background:url(/images/promote/sub/ico_share.png) no-repeat top 21px center;}
.util_wrap .btns {background-position:bottom 22px center;}
.sns_share .btn_share:before,
.util_wrap .btns:before {right:auto; left:0;}
.sns_share .btn_share:hover, .util_wrap .btns:hover {background-color:transparent;}
.sns_share.on .btn_share{background-position:top -26px center;}
.sns_share.on .list {top:63px;}

#subContent #content {width:100%;}
#pageInfo {border-color:#eee; margin:0 0 40px; text-align:center;}
#pageTitle {position:relative; padding:12px 0 0;}
#pageTitle h3 {width:100%;}
#pageTitle h3 span {position:relative;}
#pageTitle h3 span:before {content:''; position:absolute; bottom:-13px; left:-8px; width:calc(100% + 16px); height:1px; background:#f2a531;}

#pageTitle .btn_move {position:absolute; bottom:-3px; left:0; width:45px; height:45px; border:1px solid #ddd; border-radius:50%; font-size:0; text-indent:-9999px;}
#pageTitle .btn_move.right {left:auto; right:0;}
#pageTitle .btn_move:before,
#pageTitle .btn_move:after {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:56%; height:1px; background:#888;}
#pageTitle .btn_move:after {top:19px; left:8px; width:10px; transform:rotate(-45deg);}
#pageTitle .btn_move.right:after {left:auto; right:8px; transform:rotate(45deg);}

@media all and (max-width:1230px) {
    #footer .logo {left:15px;}
}

@media all and (max-width:1024px) {
    .btn_menu {display:block; right:15px;}

    #header .logo span > span,
    .m_menu .logo span > span {font-size:14px;}
    #header .logo strong,
    .m_menu .logo strong {padding:2px 0 0; font-size:24px;}

    #footer .inner {padding:0 15px 0 220px;}
    
    #subVisual .inner {height:200px;}
    #subVisual .txt {padding:30px 0 0;}
    #subVisual .txt .txt1 {font-size:25px;}
    #subVisual .txt .txt2 {font-size:1em;}
    
    .location {width:100%; padding:0; margin:0 auto; height:54px;}
    .location .home {width:54px;}
    .location .snb > li > a {width:auto; max-width:230px; line-height:54px;}
    
    .snb ul {top:54px;}
	.snb ul a {padding:11px 10px 11px 20px; font-size:0.938em;}
    
    .util_wrap {top:0; bottom:auto;}
    .sns_share .btn_share, .util_wrap .btns {width:54px; height:54px; background-position:top 18px center;}
    .util_wrap .btns {background-position:bottom 17px center;}
    .sns_share.on .btn_share {background-position:top -29px center;}
    .sns_share.on .list {top:54px;}
    
    #pageTitle {padding:12px 0 8px;}
    #pageTitle h3 span:before {bottom:-19px;}
}

@media all and (max-width:768px) {
	.btn_menu {right:10px;}

    #header .logo strong,
    .m_menu .logo strong {font-size:21px;}

    #footer {padding:35px 0;}
    #footer .inner {padding:0 10px;}
    #footer .logo {position:static;}
    #footer address, #footer .copyright {text-align:center;}
    #footer address {padding:15px 0 0;}
    
    #subVisual .inner {height:180px;}
    #subVisual .txt .txt1 {font-size:18px;}
    
    .location {font-size:0.938em; height:47px;}
    .location .home {width:47px;}
    .location .snb > li:first-child{display:none;}
    .location .snb > li:last-child{display:block;}
    .location .snb > li > a {line-height:47px;}
    .location .home:before, .location .snb > li > a:before, .sns_share .btn_share:before, .util_wrap .btns:before {height:20px;}

    .snb ul {top:47px;}
	.snb ul a {padding:8px 10px 8px 20px;}
    
    .sns_share .btn_share, .util_wrap .btns {width:47px; height:47px; background-position:top 15px center;}
    .util_wrap .btns {background-position:bottom 13px center;}
    .sns_share.on .btn_share {background-position:top -33px center;}
    .sns_share.on .list {top:47px;}
    
    #pageTitle {padding:0 0 5px;}
    #pageTitle h3 span:before {bottom:-14px;}
    #pageTitle .btn_move {top:-7px; width:35px; height:35px;}
    #pageTitle .btn_move:after {top:15px; width:6px;}
}

@media all and (max-width:568px) {
    #header .logo span > span,
    .m_menu .logo span > span {padding:2px 0 0; font-size:12px;}
    
    #subVisual .inner {height:130px;}
    #subVisual .txt {padding:20px 0 0;}
    #subVisual .txt .txt1 {font-size:16px;}
    #subVisual .txt .txt2:before {width:30px; margin:4px 0 9px;}
    
    .location {height:41px; padding:0; text-align:left;}
    .location .home {width:41px; background-size:13px;}
    .location .snb > li > a {max-width:160px; line-height:41px; padding:0 30px 0 15px;}
    .location .snb > li > a:after {right:12px; border-width:4px; border-top-width:5px;}
    .location .home:before, .location .snb > li > a:before, .sns_share .btn_share:before, .util_wrap .btns:before {height:15px;}
    
    .snb ul {top:41px;}
	.snb ul a {padding-left:15px;}
    
    .sns_share .btn_share, .util_wrap .btns {width:41px; height:41px; background-size:14px; background-position:top 14px center;}
    .util_wrap .btns {background-position:bottom 13px center;}
    .sns_share.on .btn_share {background-position:top -23px center;}
    .sns_share.on .list {top:41px;}
    
    #pageTitle h3 span:before {bottom:-12px; left:-10px; width:calc(100% + 20px);}
    
    #pageTitle .btn_move {top:-7px; width:30px; height:30px;}
    #pageTitle .btn_move:after {top:12px; left:6px;}
    #pageTitle .btn_move.right:after {right:6px;}
}

@media all and (max-width:430px) {
    .util_wrap {display:none;}    
}

@media all and (max-width:380px) {
    #header .logo strong,
    .m_menu .logo strong {font-size:20px;}

    #subVisual {background-size:400px; background-position:bottom right -50px;}
    #subVisual .inner {height:120px;}
    
    .location {height:37px;}
    .location .home {width:37px;}
    .location .snb > li > a {max-width:150px; line-height:37px;}
    .snb ul {top:37px;}
	.snb ul a {line-height:32px; padding:0 0 0 12px;}
}