@charset "utf-8";

@import "reset_cache.css";
@import "module_cache.css";
@import "company_cache.css";

/* Common Layout */
.body_wrap { position: relative; min-width: @body_width@px;}

.wrapper { position: relative; width: 100%; min-width: @body_width@px;}
.wrapper > div { position: relative; max-width: @wrap_width@px; margin: 0 auto; padding: 0 @wrap_margin_left_right@px;}
.wrapper > div:after { content: ""; display: block; clear: both;}

/* 상단 네비게이션 */
.top_nav { margin: 20px 0 17px; font-size: 14px; display: flex; justify-content: flex-end; align-items: center;}
.top_nav a { color: #222;}
.top_nav ul:after { content: ""; display: block; clear: both;}
.top_nav ul li { float: left;}

.top_nav .tn_right > li { padding-left: 8px; margin-left: 8px; background: url(../icon/icon_line01.png) no-repeat 0 center;}
.top_nav .tn_right > li:first-child { background: none;}
.top_nav .tn_right > li > a { display: block; border-bottom: 1px solid transparent;}
.top_nav .tn_right > li > a:hover { border-bottom: 1px solid #222;}

.member_collap { position: relative;}
.member_collap .icon_member { position: relative; display: block; z-index: 1003;}
.member_collap .icon_member span { position: relative; padding-right: 18px;}
.member_collap .icon_member span:after { content: ""; position: absolute; right: 0; top: 3px; display: block; width: 13px; height: 13px; background: url(../icon/icon_ab.svg) no-repeat right 0; transition: .3s all ease; background-size: 13px;}
.member_collap .icon_member.on span:after { transform: rotate(180deg);}
.member_collap .icon_member:hover { color: #000;}
.member_collap ul { position: absolute; right: 0; top: 30px; z-index: 1004; padding: 15px 20px; background: #fff; border-radius: 9px 0 9px 9px; border: 1px solid #d9d9d9; box-shadow: 0 0 10px rgba(74,73,74,.2);}
.member_collap ul li { float: none; margin-top: 8px;}
.member_collap ul li:first-child { margin-top: 0;}
.member_collap ul li a { white-space: nowrap; border-bottom: 1px solid transparent;}
.member_collap ul li a:hover { border-bottom: 1px solid #222;}

.top_nav .sns_link { float: left; margin: 2px 10px 0;}
.top_nav .sns_link:after { content: ""; display: block; clear: both;}
.top_nav .sns_link > li { float: left; margin-right: 3px;}
.top_nav .sns_link > li > a { display: block; width: 30px; height: 30px; background: url(../btn/btn_sns.png?2202) no-repeat 0 0; background-size: 300px 60px; text-indent: -9999em;}
.top_nav .sns_link > li > a.sl01 { background-position: 0 0;}		/* 유튜브 */
.top_nav .sns_link > li > a.sl02 { background-position: -30px 0;}	/* 페이스북 */
.top_nav .sns_link > li > a.sl03 { background-position: -60px 0;}	/* 트위터 */
.top_nav .sns_link > li > a.sl04 { background-position: -90px 0;}	/* 인스타그램 */
.top_nav .sns_link > li > a.sl05 { background-position: -120px 0;}	/* 네이버 */
.top_nav .sns_link > li > a.sl06 { background-position: -150px 0;}	/* 포스트 */
.top_nav .sns_link > li > a.sl07 { background-position: -180px 0;}	/* rss */
.top_nav .sns_link > li > a.sl08 { background-position: -210px 0;}	/* 카카오톡 */
.top_nav .sns_link > li > a.sl09 { background-position: -240px 0;}	/* 카카오채털 */
.top_nav .sns_link > li > a.sl10 { background-position: -270px 0;}	/* 카카오스토리 */
.top_nav .sns_link > li > a:hover { background-position-y: -30px;}

/* Header */
#header { position: relative; z-index: 1000; background: #fff; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: top .3s ease;}
#footer *,
#header * { letter-spacing: -0.03em;}
#header > div { padding: 0; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #dedede;}
.main_body #header > div { border-bottom: 3px solid @main_color@;}
#header > div:after { display: none;}

.head_tit { display: flex; align-items: center;}
.head_tit h2 { display: none; font-size: 23px; margin-left: 40px; white-space: nowrap; width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.top_logo { display: table; height: 125px; margin-top: 13px;}
.top_logo b { display: table-cell; height: 115px; vertical-align: middle; text-align: left;}

.head_top { display: flex; flex-wrap: wrap; justify-content: flex-end;}

.gnb_wrap { position: relative; display: flex; width: 100%; justify-content: flex-end;}

#gnb { position: relative; text-align: center; margin-right: -10px; display: flex; flex-wrap: wrap;}
#gnb > li { position: relative;}
#gnb > li > a { position: relative; display: block; height: 50px; line-height: 50px; font-size: 17px; padding: 0 14px; color: #000; font-weight: bold; margin-right: -1px; z-index: 1;}
#gnb > li > a.on, #gnb > li > a.active { color: @main_color@;}

#gnb > li > ul { position: absolute; left: 14px; top: 50px; padding: 15px 10px; background: rgba(0,0,0,.9); border-radius: 0 9px 9px 9px; box-shadow: 0 0 15px rgba(255,255,255,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex;}
#gnb > li > ul li a { position: relative; display: block; white-space: nowrap; color: #fff; font-size: 15px; padding: 0 10px;}
#gnb > li > ul li a:hover, #gnb > li > ul li a.active { color: ;}

#gnb.vertical > li > ul { display: block; text-align: left; padding: 10px 20px;}
#gnb.vertical > li > ul li a { padding: 10px 0; transition: all .3s ease;}
#gnb.vertical > li > ul li a span { display: inline-block; padding: 0 10px 0 0;}
#gnb.vertical > li > ul li a:hover, #gnb > li > ul li a.active { transform: translateX(3px);}

.all_nav { display: block; width: 23px; height: 50px; margin-left: 30px;}
.all_nav:hover { opacity: .75;}
.all_nav > span { position: relative; top: 15px; display: block; text-indent: -9999em; width: 23px; height: 20px; margin: 0 auto; background: url(../bg/bg_menu.png) no-repeat 0 0; background-size: 23px 20px;}

#header.head_fix { position: fixed; left: 0; top: 0; border-bottom: 1px solid #ddd;}
#header.head_fix > div { border-bottom: 0;}
#header.head_fix #gnb { display: none;}
#header.head_fix .top_logo { height: auto; margin-top: 0;}
#header.head_fix .top_logo b { height: auto; padding: 13px 0;}
#header.head_fix .top_logo b img { width: auto; height: 45px;}
#header.head_fix .gnb_wrap { width: inherit; padding-top: 10px;}
#header.head_fix .head_tit h2 { display: block;}
/* Search */
.hidden_p { overflow: hidden;}

.btn_all_search { display: block; width: 30px; height: 50px; text-indent: -9999px; background: url(../btn/btn_search.svg) no-repeat center center; z-index: 501; margin-left: 20px; background-size: 22px;}
.btn_all_search:hover { opacity: .75;}

.search_box { position: fixed; left: 0; top: 0; width: 100%; height: 100%; min-width: @body_width@px; background: rgba(255,255,255,.9); z-index: 3000000010; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);}

.search_con { display: table; width: 100%; height: 100%;}
.search_con > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; position: relative;}
.search_con > div:after { content: ""; display: block; clear: both;}

.btn_all_search_close { position: absolute; right: 30px; top: 20px; display: block; width: 50px; height: 50px; text-indent: -9999px; background: url(../btn/btn_x.svg) no-repeat center center; background-size: 30px; z-index: 130; transition: all .3s ease;}
.btn_all_search_close:hover { transform: rotate(-90deg);}

.search_in { position: relative; width: 700px; margin: 0 auto;}
.search_in label { display: block; text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 20px;}
.search_in input { border: 5px solid @main_color@; font-size: 18px; padding: 20px 20px 19px; width: 600px; background: transparent; letter-spacing: 0;}
.search_in .btn_search { position: absolute; right: 0; bottom: 0; width: 65px; height: 65px; background: @main_color@ url(../btn/btn_search_w.svg) no-repeat center center; background-size: 30px; text-indent: -9999px;}

/* Footer */
#footer .wrapper > div { max-width: @wrap_width@px;}
.foot_top { border-top: 1px solid #ddd;}
.foot_bot { background: #f4f4f4;}

.foot_wrap { position: relative; padding: 40px 0; display: flex;}
.foot_wrap h6 { padding-right: 40px;}

.foot_nav { padding: 17px 0 19px; height: 18px;}
.foot_nav > ul { position: relative; text-align: center; display: flex; flex-wrap: wrap; justify-content: center;}
.foot_nav > ul li { margin: 0 15px;}
.foot_nav > ul li a { font-size: 15px; color: #222;}
.foot_nav > ul li a:hover { text-decoration: underline;}

.foot_con > p { font-size: 14px; color: #444; line-height: 1.6; letter-spacing: 0;}
.foot_con > p * { font-style: normal; font-weight: normal; color: #666; margin-right: 10px; letter-spacing: 0;}
.foot_con > b { position: absolute; right: 0; bottom: 40px;}
.foot_con .update { letter-spacing: 0; color: #222;}
.foot_con .update > b { font-weight: bold;}

/* Content */
#container { position: relative;}
#container > div { padding: 30px 0 50px; margin-top: 2px;}
.main_wrap > div { border-top: 1px solid @main_color@;}

.main_lay { margin: -15px 0 50px; padding-bottom: 15px; border-bottom: 4px solid @main_color@;}
.line_box { margin: 0 0 50px 0;}

.flex_col { display: flex; margin: 0 10px;}
.flex_col .flex_top { flex: 1;}
.flex_col .flex_ban { max-width: 260px; margin-left: 10px;}

.sublay { position: relative; display: flex;}
.sublay .sl { width: 73.3%;}
.sublay .sr { width: 26.7%;}
.sublay.sticky > div > div { position: -webkit-sticky; position: sticky; top: 95px;}
.sublay.sub_article > div > div { top: 190px;}
.sublay .sl > div { margin-right: 14px;}
.sublay .sr > div { margin-left: 15px;}

.pagelay { position: relative; display: flex;}
.pagelay .sl { width: 20%;}
.pagelay .sr { width: 80%;}
.pagelay .sl > div { position: -webkit-sticky; position: sticky; top: 95px;}
.pagelay .sr > div { margin-left: 50px;}

.article_box { width: 800px; margin: 0 auto;}

.btn_mobile { position: relative; text-align: center; padding: 15px 0;}

.line03 { position: relative; display: flex;}
.line03:before { position: absolute; left: 33.333%; top: 0; content: ""; display: block; width: 1px; height: 100%; background: #ddd;}
.line03:after { position: absolute; right: 33.333%; top: 0; content: ""; display: block; width: 1px; height: 100%; background: #ddd;}

.line64 { position: relative;}
.line64:before { position: absolute; left: 55%; top: 0; content: ""; display: block; width: 1px; height: 100%; background: #ddd;}

hr.line { display: block; outline: none; padding: 0; margin: 0; height: 1px; border: none; background: #dedede; margin: 40px 0;}

.aside_box { position: relative;}

/* custom skin */
.tit_set.ts02 { border-top-width: 4px !important; padding: 12px 0 3px !important;}
.tit_set .btn_art_more { margin-top: -4px !important;}

.arv_008 .fix_art_top.fix { top: 72px !important; z-index: 1001 !important;}
.arv_008 .fix_art_top.fix .h_scroll_bar { position: absolute !important; top: -1px; bottom: inherit !important; height: 4px !important;}

.mr2_001 .tit_all,
.mr1_001 .tit_all { border-bottom: 4px solid @main_color@; margin-bottom: -2px !important; padding-bottom: 15px !important; z-index: 1;}

/*
.board_tit { display: none;}
.type_photo { border-top: 0 !important; margin-top: -20px !important;}
*/


::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #eaeaea;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
}

::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}