@charset "utf-8";

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

/* Common Layout */
.body_wrap { position: relative; min-width: 1250px;}
.is-mobile .ttb_wrap { position: relative; min-width: 1250px; overflow-x: hidden;}

.wrapper { position: relative; width: 100%; min-width: 1250px;}
.wrapper > div { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 25px;}

/* Header */
#header { position: relative; z-index: 1500; transition: top .3s ease;}
#footer *,
#header * { letter-spacing: -0.03em;}

#header { position: fixed; left: 0; top: 0; width: 100%;}
.head_con { background: #fff;}
.head_con > div { padding: 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dedede;}

.main_body .head_con > div { border-bottom: 3px solid #000;}

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

.top_logo { display: flex; align-items: center; min-height: 100px;}
.top_logo b { text-align: left;}
.top_logo b img { transition: all .3s ease;}

.head_util { display: flex; justify-content: flex-end; min-width: 0; flex-basis: 140px;}
.head_menu { padding: 0 15px; width: calc(100% - 400px);}
.gnb_wrap { position: relative; display: flex; width: 100%;}

#gnb { position: relative; text-align: center; margin-right: -10px; display: flex; flex-wrap: wrap; justify-content: center; min-width: 100%;}
#gnb > li { position: relative;}
#gnb > li > a { position: relative; display: block; height: 50px; line-height: 50px; font-size: 18px; padding: 0 12px; color: #000; font-weight: bold; margin-right: -1px; z-index: 1;}
#gnb > li > a.on, #gnb > li > a.active { color: #fa8a1b;}

#gnb > li > ul { position: absolute; left: -5px; top: 50px; padding: 15px 10px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 25px; background: rgba(0,0,0,.85); border-radius: 10px; border: 1px solid #000; box-shadow: 0 0 10px rgba(74,73,74,.2); display: flex; z-index: 2;}
#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: 40px; height: 40px;}
.all_nav:hover { opacity: .75;}
.all_nav > span { position: relative; display: block; text-indent: -9999em; width: 40px; height: 40px; margin: 0 auto; background: url(../btn/btn_menu.svg) no-repeat center center;}

#header.head_fix .head_con { border-bottom: 1px solid #ddd;}
#header.head_fix .head_con > div { border-bottom: 0;}
#header.head_fix .top_logo { min-height: 0; margin: 7px 0;}
#header.head_fix .top_logo b { height: auto; padding: 5px 0;}
#header.head_fix .top_logo b img { width: auto; height: 50px;}
#header.head_fix .head_tit h2 { display: block;}
#header.head_fix #gnb { flex-wrap: nowrap; white-space: nowrap;}
.translated-ltr #header.head_fix #gnb { display: none;}

/* 구글번역 */
.trans_btn_wrap { position: relative;}
.translated-ltr #header.head_fix #gnb { display: none;}

.btn_trans { display: block; width:40px; height:40px; background:url(../btn/btn_global.svg) no-repeat center center;}
.trans_nav_d { position: absolute; right: 0; top: 45px; background: #fff; border: 3px solid #000; padding: 5px;}
.trans_nav_d:after { content: ""; display: block; clear: both;}
.goog-te-gadget-simple { border: 0 !important;}

/* User */
.member_collap { position: relative;}
.member_collap .icon_member > i { position: absolute; left: 0; top: 0; display: block; width: 40px; height: 40px; background: url(../btn/btn_user.svg) no-repeat center center; text-indent: -9999em; transition: all .3s ease; transform: scale(1);}
.member_collap .icon_member:hover { color: #000;}
.member_collap ul { position: absolute; right: -20px; top: 45px; z-index: 1004; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 25px; background: rgba(0,0,0,.85); border-radius: 10px; border: 1px solid #000; box-shadow: 0 0 10px rgba(74,73,74,.2);}
.member_collap ul li { margin-top: 8px; white-space: nowrap;}
.member_collap ul li:first-child { margin-top: 0;}
.member_collap ul li a { white-space: nowrap; border-bottom: 1px solid transparent; color: #fff;}
.member_collap ul li a:hover { border-bottom: 1px solid #fff;}
.member_collap .t_user_name { color: #fff; font-weight: bold; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.4)}

.today { font-size: 16px; font-weight: bold; text-align: right; letter-spacing: 0; padding: 17px 0;}

/* Search */
.btn_all_search { position: relative;}
.btn_ani_x > span { position: relative; display: block; width: 40px; height: 40px; text-indent: -9999px; transition: all .3s ease; transform: scale(0);}
.btn_ani_x > span:after, 
.btn_ani_x > span:before { position: absolute; left: 7px; top: 50%; margin-top: -1px; content: ""; display: block; width: 28px; height: 0.19em; background: #000; border-radius: 2px;}
.btn_ani_x > span:after { transform: rotate(45deg);}
.btn_ani_x > span:before { transform: rotate(-45deg);}
.btn_all_search > i { position: absolute; left: 0; top: 0; display: block; width: 40px; height: 40px; background: url(../btn/btn_search.svg) no-repeat center center; text-indent: -9999em; transition: all .3s ease; transform: scale(1);}
.btn_ani_x.on > i { transform: scale(0);}
.btn_ani_x.on > span { transform: scale(1);}

.search_wrap { background: transparent;}
.search_box { background: rgba(0,0,0,.8); -webkit-backdrop-filter: saturate(180%) blur(3px); backdrop-filter: saturate(180%) blur(3px); z-index: 1500; padding: 30px 0; transform: translateY(-3px);}
.search_con > div { position: relative; margin: 0 auto; width: 600px;}
.search_con > div:after { content: ""; display: block; clear: both;}
.search_con input { float: left; border: 0; font-size: 17px; padding: 15px 60px 15px 15px; box-sizing: border-box; border: 2px solid rgba(255,255,255,.3); border-radius: 50px; height: 50px; background: rgba(255,255,255,.9); font-family: -apple-system, BlinkMacSystemFont, 'Pretendard Variable', Pretendard, Apple SD Gothic Neo, 맑은고딕, Malgun Gothic, Droid Sans, sans-serif;}
.search_con .i_label { top: 10px; left: 13px; font-size: 17px; color: #fff;}
.search_box .btn_search { position: absolute; right: 10px; top: 0; width: 40px; height: 100%; background:url(../btn/btn_search.svg) no-repeat center center; text-indent: -9999px;}

/* Footer */
#footer .wrapper > div { max-width: 1200px;}
.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;}

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

/* Content */
#container { position: relative;}
#container > div { padding: 30px 0 0; margin-top: 2px; margin-bottom: 50px;}

.lgrid.stk .items .stkw { position: sticky; top: 95px;}

.main_wrap > div { padding-top: 5px !important;}
.main_lay { margin: -15px 0 50px; padding-bottom: 15px; border-bottom: 4px solid #fa8a1b;}
.line_box { margin: 0 0 50px 0;}

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

.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: 3px !important; padding: 12px 0 3px !important;}
.tit_set.ts02 .btn_art_more { margin-top: -3px !important;}
.tit_set.ts02.bb_black { border-top-color: #000 !important;}

.arv_008 .fix_art_top.fix { top: 72px !important; z-index: 999 !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 #fa8a1b; margin-bottom: -2px !important; padding-bottom: 15px !important; z-index: 1;}

.arv_019 .util { top: 190px !important;}
.arv_019 .art_top { border-bottom: 1px solid #000 !important;}
.arv_019 .fix_art_top.fix .art_top { border: 0 !important;}
.arv_019 .fix_art_top.fix { top: 72px !important;}
.arl_084 .recent_art h3 { top: -1px;}
.arv_019 .fix_art_top.fix .h_scroll_bar { background-color: #000 !important;}

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


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

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

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

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