@charset "utf-8";

/* ================================
	font
=============================== */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(../font/NotoSansKR-Light.woff2) format('woff2'), url(../font/NotoSansKR-Light.woff) format('woff'), url(../font/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(../font/NotoSansKR-DemiLight.woff2) format('woff2'),url(../font/NotoSansKR-DemiLight.woff) format('woff'), url(../font/NotoSansKR-DemiLight.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(../font/NotoSansKR-Regular.woff2) format('woff2'), url(../font/NotoSansKR-Regular.woff) format('woff'), url(../font/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(../font/NotoSansKR-Medium.woff2) format('woff2'), url(../font/NotoSansKR-Medium.woff) format('woff'), url(../font/NotoSansKR-Medium.otf) format('opentype');
}

/* ================================
	default style
=============================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, header, footer, figure, figcaption, nav, section {margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit;*/ vertical-align: baseline}
body {font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', 'Dotum', '돋움', 'Gulim', '굴림', 'Tahoma', sans-serif; color:#555; font-size:15px; letter-spacing: -0.04em;}
h1, h2, h3, h4, h5, h6 {font-weight: normal}
ol, ul {list-style: none;}
em,address {font-style: normal}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed; width: 100%;}
th {font-weight: normal}
legend, caption  {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
textarea  {resize: vertical; font: inherit; overflow-y: auto; box-sizing: border-box; padding: 5px 9px; border: 1px solid #ccc; font-size: 14px; font-weight: 300; color: #555;}
input, select  {color: inherit; font: inherit; box-sizing: border-box; border: 1px solid #ccc;}
input[type="checkbox"], input[type="radio"] {margin: 0; vertical-align: middle; position: relative; border:none;}
input[type="checkbox"], input[type="radio"], label {cursor: pointer;}
input[type="text"], input[type="password"] {padding: 5px 9px;}
button  {margin:0; padding:0; border:0; font: inherit; color: inherit; background: transparent; overflow: visible; cursor: pointer; line-height: 1}
a:link, a:visited, a:hover, a:active, a:focus  {text-decoration: none; color: inherit; cursor: pointer}
textarea:focus::placeholder {color: transparent;} /* 2021-07-08 추가: 클릭 시 placeholder 텍스트 숨김 효과 */
input[type="text"]:focus::placeholder, input[type="email"]:focus::placeholder, input[type="password"]:focus::placeholder {color: transparent !important;} /* 2021-07-08 추가: 클릭 시 placeholder 텍스트 숨김 효과 */

*:focus-visible {outline:2px dotted #000;}
#header_wrap.sticky #gnb_wrap a:focus-visible, #gnb > ul > li > div > ul > li > a:focus-visible {outline:3px dotted #fff;}

.inner {max-width: 1400px; margin: 0 auto;}

/* ================================
	skipNavi
=============================== */
#skipNavi a {position:absolute; top:-10000px; left:0; display: block;}
#skipNavi a:hover, #skipNavi a:focus, #skipNavi a:active {padding: 13px 0; width: 100%; background-color: #121212; color: #fff; font-size: 15px; text-align: center; text-decoration: underline; z-index:9999; top: 0;}

/* ================================
	common
================================ */
.hidden {text-indent: -9999px; overflow: hidden; line-height: 0; width: 0; height: 0; display: inline-block; position: absolute;}
.bttxt {margin-left: 3px; margin-right: 3px; display: inline-block; padding: 2px; line-height: 150%; color: #333;}
a.new_link {position: relative; padding-right: 28px; display: inline-block;}
a.new_link:after {content: ''; position: absolute; right: 0; top: 6px; background: url('../images/sub/ic_new_link.png') no-repeat; width: 18px; height: 18px;}
.t_pre{ white-space:pre-line; font-family: inherit; font-size: inherit; color: inherit}
a.ic_tit_new {position: relative; display: inline-block;}
.ic_tit_new:after {content: 'N'; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-top: -4px; margin-left: 6px; background-color: #f11336; color: #fff; font-weight: 500; font-size: 11px; line-height: 1.7; text-align: center; border-radius: 50%;}
.ic_tit_new2:before {content: 'N'; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-top: -4px; margin-right: 6px; background-color: #f11336; color: #fff; font-weight: 500; font-size: 11px; line-height: 1.7; text-align: center; border-radius: 50%;}
.ic_tit_new3 {position: relative;}
.ic_tit_new3:before {content: 'N'; position: absolute; left: 10px; top: 12px; width: 18px; height: 18px; margin-top: -4px; margin-right: 6px; background-color: #f11336; color: #fff; font-weight: 500; font-size: 11px; line-height: 1.7; text-align: center; border-radius: 50%; z-index: 1;}
.owl-carousel {visibility: hidden; opacity: 0; width: 100%; position: relative; z-index: 1;}
.owl-carousel.owl-loaded {visibility: visible; opacity: 1;}
.owl-carousel .owl-stage-outer {position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-stage {position: relative;}
.owl-carousel .owl-item {position: relative; float: left;}
.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {display: none;}
.owl-carousel img {display: block; max-width: 100%;}

	/* margin */
	.ml0 {margin-left: 0 !important;}

	.mt10 {margin-top: 10px !important;}
	.mt20 {margin-top: 20px !important;}
	.mt50 {margin-top: 50px !important;}

	.mb0 {margin-bottom: 0 !important;}
	.mb10 {margin-bottom: 10px !important;}
	.mb45 { margin-bottom:45px !important; }
	.mb50 { margin-bottom:50px !important; }

	.mr0 {margin-right: 0px !important;}
	.mr3 {margin-right: 3px !important;}
	.mr5 {margin-right: 5px !important;}
	.mr10 {margin-right: 10px !important;}

	/* padding */
	.pt0 {padding-top: 0 !important;}

	/* display */
	.dnone{ display: none !important;}
	.dis_b { display:block;}
	.dis_ib { display:inline-block;}

	/* align */
	.fl {float: left !important;}
	.fr {float: right !important;}
	.Lalign {text-align: left !important;}
	.Calign {text-align: center !important;}
	.vaTop {vertical-align: top !important;}
	.vaMid {vertical-align: middle !important;}

	/* text */
	.txtblue {color: #0078d7 !important;}
	.txtblack {color:#121212 !important;}
	.txtred {color: #f93061 !important;}
	.txtgray {color: #666666 !important;}
	.t_point {color: #2d96c7 !important;}
	.underline {text-decoration: underline}
	.t14 {font-size: 14px !important;}
	.t16 {font-size: 16px !important;}
	.tw300 {font-weight: 300 !important}
	.tw500 {font-weight: 500 !important}

	/* bull list */
	.bl_list > li {background: url('../images/sub/bullet01.png') no-repeat 0 12px; padding-left: 10px;}
	.bl_list02 > li {background: url('../images/sub/bullet02.png') no-repeat 0 12px; padding-left: 10px;}
	.bl_list03 > li {background: url('../images/sub/bullet03.png') no-repeat 0 12px; padding-left: 7px;}
	.bl_list04 > li {background: url('../images/sub/bullet04.png') no-repeat 0 13px; padding-left: 12px;}
	.bl_list05 > li {background: url('../images/sub/bullet05.png') no-repeat 0 11px; padding-left: 10px;}

	/* form */
	.css_select {display: inline-block; height: 35px; padding-left: 10px; vertical-align: middle; font-size: 14px; min-width:180px; background: #fff; color: #333; letter-spacing: -0.06em;}
	.css_select_sm {display: inline-block; height: 35px; padding-left: 10px; vertical-align: middle; font-size: 14px; min-width:80px; background: #fff; color: #555; letter-spacing: -0.06em;}
	.css_input {height:35px; width: 180px; vertical-align: middle; background:#fff; font-size: 14px; padding: 5px 9px;}
	.css_input_sm {height:35px; width: 80px; vertical-align: middle; background:#fff; font-size: 14px; padding: 5px 9px;}
	.css_input_md {height:35px; width: 300px; vertical-align: middle; background:#fff; font-size: 14px; padding: 5px 9px;}
	.css_label {display: inline-block; vertical-align: middle; margin-right: 10px;}
	.css_radio {display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 5px !important;}
	.css_check {display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 5px !important;}

	/* border */
	.nobor_b {border-bottom: 0 !important;}

	/* width */
	.WP100 {width: 100% !important;}

/* ================================
	팝업기본레이아웃
================================ */
body.popup01{ margin:0; padding:0; }
#autologOut{ z-index:9999 !important;}
.popup_Bg{ position:fixed; top:0; left:0;  padding:0; margin:0; z-index:998; width:100%; height:100%; box-sizing:border-box; }
.popup_Bg{  background:#000;   opacity: 0.7; }
.popup_Bg.off{ display:none; }

.popup_Area{ position:fixed; top:0; left:0;  margin:0; z-index:999; width:100%; box-sizing:border-box; display:block; }
.popup_Area.off{ display:none; }
.popup_Area.on{ display:block; }
.popup_wrap{ position:relative; padding:0; background:#fff; box-sizing:border-box;}
.popup_Area .popup_wrap{margin:0 auto 0 auto; } /*레이어팝업에 적용됨*/

.pop_content{ margin:0 auto; padding:20px; box-sizing:border-box; max-height:650px; overflow-y:auto; }
.pop_content.st01{ display:inline-block; min-height:800px !important;}
.pop_header{ position:relative; border-bottom:1px solid #e9eaec; background-color:#0078d7; height:55px; overflow:hidden; z-index:30; line-height:130%; cursor:move; box-sizing: border-box;}
.pop_header button:focus {outline-color: #fff;}
.pop_header h1{color:#fff; padding:0px 50px 0px 18px; display:block; font-weight:600; letter-spacing:-1px; font-size: 18px;}
.pop_header h1 span.mail_tit{ position:relative; top:-10px; font-size:14px;   font-weight:500; }
.pop_header strong{color:#fff; font-size:19px; padding:18px 50px 0px 20px; display:block; font-weight:500; letter-spacing:-0.02em; }
.pop_header strong span.mail_tit{ position:relative; top:-10px; font-size:14px;   font-weight:500; }
.pop_header .tit {  font-size:15px; color:#fff; line-height:46px; padding-left:20px; letter-spacing:-1px;}
.pop_header .btn_close{  position:absolute; top:13px; right:15px; display:block; width:30px; height:30px; background:url(../images/common/layer_close.png) no-repeat center center; cursor:pointer; text-indent:-9999px;}

.pop_footer{ position:relative; top:100%; ; z-index:999; text-align:center; min-height:50px; background:#000; }
.pop_footer.st01{ position:fixed !important; width:100%; }
.pop_footer .ft_inct{border-top:1px solid #e9eaec; bottom:0px; left:0; right:0;   font-size:12px; background:#f2f4f6; padding: 13px 15px;}
.pop_footer .ft_inct .btnset{ display:block; }
.pop_footer .ft_inct input {vertical-align:middle; margin-right:5px; margin-left:5px; }

/*버튼:흰색*/
.pop_footer .btnc .btn {margin: 0 3px;}
.pop_footer .btn_type01 {background: #202020; border: 1px solid #222; color: #fff; padding: 2px 10px; display: inline-block; height: 25px; line-height: 25px; font-size: 13px;}
.pop_footer .btn_type02 {background: #fff; color: #000; border: 1px solid #898989; padding: 2px 10px; display: inline-block; height: 25px; line-height: 25px; font-size: 13px;}
.pop_footer .btn_type01:focus-visible {outline-color: #0078d7;}

.pop_content .btn_box {margin-top: 20px; text-align: center;}
.pop_content .btn_box [class^="btn_type"] {margin-left: 2px;}
.pop_content .btn_box [class^="btn_type"]:first-child {margin-left: 0;}
.pop_content .btn_box .btn_type01 {display: inline-block; vertical-align: middle; font-weight: 500; color: #fff; background: #000; font-size: 14px; padding: 8px 15px 10px; vertical-align: middle;}
.pop_content .btn_box .btn_type02 {display: inline-block; vertical-align: middle; font-weight: 500; color: #fff; background: #707070; font-size: 14px; padding: 8px 15px 10px; vertical-align: middle;}

/* 마이페이지 - 나의 스크랩(카테고리 관리) */
.scrap_cate_box {letter-spacing: -0.02em; font-size: 14px;}
.scrap_cate_box .cate_info {margin-bottom: 10px;}
.scrap_cate_box .cate_list {border-top: 1px solid #d7d7d7;}
.scrap_cate_box .cate_list li {border-bottom: 1px solid #d7d7d7; position: relative; padding: 5px 10px 5px 0;}
.scrap_cate_box .cate_list li .tit {width: 100%; padding-right: 100px; box-sizing: border-box; color: #333; word-break: keep-all; word-wrap: break-word;}
.scrap_cate_box .cate_list li .tit .num {font-weight: 500; color: #0078d7;}
.scrap_cate_box .cate_list li .tit > span {display: block; padding: 5px 0;}
.scrap_cate_box .cate_list li .tit input[type="text"] {width: 100%;}
.scrap_cate_box .btn {position: absolute; right: 10px; top: 8px;}
.scrap_cate_box .btn_type01 {display: inline-block; vertical-align: middle; border: 1px solid #898989; background: #fff; width: 40px; height: 25px; line-height: 23px; color: #000; font-size: 12px; box-sizing: border-box; text-align: center; margin-right: 3px;}
.scrap_cate_box .btn_type02 {display: inline-block; vertical-align: middle; background: #000000; width: 40px; height: 25px; line-height: 23px; color: #fff; font-size: 12px; box-sizing: border-box; text-align: center;}

.scrap_cate_box .add_newcate {border-bottom: 1px solid #d7d7d7; padding: 5px 10px 5px 0; position: relative;}
.scrap_cate_box .add_newcate .cate_input {width: 100%; padding-right: 100px; box-sizing: border-box;}
.scrap_cate_box .add_newcate .cate_input input[type="text"] {width: 100%;}

/* 공통기능 */
.pop_content .board_write > ul > li > dl > dt {width: 120px; padding: 10px 0 10px 10px; letter-spacing: -0.06em;}
.pop_content .board_write > ul > li > dl > dd {font-weight: 400;}

/* ================================
	layout
================================ */
body.layer_open, body.layer_open_title {overflow: hidden;}
body.layer_open:before {content: ''; position:fixed; top:0; left:0; z-index:200; width:100%; height:100%; background:#000; opacity: 0.7;}
body.layer_open_title:before {content: ''; position:fixed; top:0; left:0; z-index:5; width:100%; height:100%; background:#000; opacity: 0.7;}
body.gnb_open {overflow: hidden; position: fixed; height: 100%; width: 100%}
#container {position:relative; width:100%; margin:0 auto;}
.header_srch .btn_open, .header_srch .btn_close, .header_srch .search_btn::before, .header_srch .srch_area::before, .arte_family .btn_all:after, .footer_notice .control_area .control button, .footer_notice .control_area .control .btn_more span:after, .main_contents .box_tit .btn_more span::after, .main_contents .conts .btn_more2 span::after, .footer_notice .slide_area .date::before, .main_service_area ul li a::before, .main_service_area ul li a > span::after {background-image: url(../images/common/sp_ic_comm.png); background-size: 211px 209px; background-repeat: no-repeat}

/* ================================
	header
================================ */
#wrap {margin-top: 80px;}
	#header_wrap {position: fixed; top: 0; width: 100%; background: #fff; z-index: 10;}

	#header_wrap .inner {position: relative;}

	#header_wrap .logo a {display: block; background: url(../images/common/logo.png) no-repeat; background-size: contain; width: 188px; height: 26px; margin-top: 5px;}
	.top_menu {position: absolute; top: 20px; right: 0;}
	.top_menu li {float: left;}
	.top_menu li.btn_sitemap {margin-left: 20px;}
	.top_menu .btn_login a {display: block; width: 40px; height: 40px; background: url(../images/common/ico_login.png) no-repeat center;}
	.top_menu .btn_logout a {display: block; width: 40px; height: 40px; background: url(../images/common/ico_logout.png) no-repeat center;}
	.top_menu .btn_sitemap a {position: relative; display: block; width: 40px; height: 40px; background: #0078d7 url(../images/common/ico_sitemap.png) no-repeat center; border-radius: 50%;}
	.top_menu .btn_sitemap a:before {content: ''; position: absolute; top: 19px; right: 10px; width: 15px; height: 2px; background: #fff; transition: all .3s;}
	.top_menu .btn_sitemap a:hover:before, .top_menu .btn_sitemap a:focus:before {width: 21px;}

	#gnb_wrap {padding: 20px 100px 0 200px; box-sizing: border-box; color: #000; text-align: center;}
		.ic_menu, .gnb_close, .gnb_top {display: none;}
	#gnb {height: 60px;}
	#gnb > ul {display: inline-block;}
	#gnb > ul > li {float: left; padding-right: 45px;}
	#gnb > ul > li:last-child {padding-right: 0;}
	#gnb > ul > li > a {position: relative; display: block; padding: 5px 5px 28px; font-size: 18px; font-weight: 500; letter-spacing: -0.05em;}
	#gnb > ul > li > ul {padding: 10px 0 18px;}
	#gnb > ul > li > ul > li {font-size: 17px; letter-spacing: -0.05em; line-height: 40px; color: #363737;}
	#gnb > ul > li > ul > li > a {position: relative;}

	/* search */
	.header_srch {position: relative; display: inline-block; vertical-align: middle;}
	.header_srch .btn_open {display: block; width: 35px; height: 35px; background-position: -93px -39px;}
	.header_srch .btn_close {display: inline-block; width: 35px; height: 35px; vertical-align: 2px; background-position: -53px -46px;}
	.header_srch .srch_area {position: absolute; top: 54px; right: 0; border: 1px solid #d7d7d7; background: #fff; width: 234px; height: 48px; padding: 8px 7px 10px 13px;; box-sizing: border-box; z-index: 20;}
	.header_srch .srch_area::before {content: ''; position: absolute; top: -11px; right: 8px; width: 15px; height: 11px; background-position: -63px -93px;}
	.header_srch .srch_area.off {display: none;}
	.header_srch input[type="text"] {float: left; border: 0; height: 30px; width: 175px; box-sizing: border-box; background: transparent; font-size: 15px; font-weight: 300; color: #444; letter-spacing: -0.06em;}
	.header_srch input[type="text"]::-webkit-input-placeholder {color: #444; /* Chrome/Opera/Safari */}
	.header_srch input[type="text"]::-moz-placeholder {color: #444; /* Firefox 19+ */}
	.header_srch input[type="text"]:-ms-input-placeholder {color: #444; /* IE 10+ */}
	.header_srch input[type="text"]:-moz-placeholder {color: #444; /* Firefox 18- */}
	.header_srch .search_btn {float: right; position: relative; width: 30px; height: 30px;}
	.search_close {display: none;}

/* ================================
	footer
================================ */
#footer {background: #282828;}
	#footer *:focus-visible {outline: 2px dotted #fff;}
	#footer .inner {position: relative; overflow: hidden;}
	.footer_menu li {display: inline-block; position: relative; color: #fff; font-weight: 500;}
	.footer_menu li:after {content: ''; position: absolute; top: 50%; margin-top: -6px; right: 0;  width: 1px; height: 12px; background: #3e3e3e;}
	.footer_menu li:last-child:after {content: none;}
	.footer_menu li a {display: block; padding: 25px 20px 32px;}
	.footer_menu li a:hover, #footer .footer_menu li a:focus {color: #2d96c7;}
	.footer_address {background: #000; color: #919191; font-size: 13px; line-height: 20px; letter-spacing: -0.02em; padding: 30px 0; font-weight: 500;}
	.footer_address li {display: inline-block; padding-right: 15px;}
	.footer_address li:last-child {padding-right: 0;}

/* ================================
	팝업존 (닫힘)
================================ */
.popupzone_area {z-index: 50; background-color: #2f2f2f;}
.popupzone_area a:focus-visible, .popupzone_area button:focus-visible {outline-color: #fff;}

/* 팝업 슬라이드 */
.popup_count {font-size: 13px; color: #fff; letter-spacing: -0.05em; text-align: center;}
.popup_count .count {display: block; width: 27px; height: 27px; margin: 11px auto 0; background-color: #0078d7; font-size: 15px; color: #fff; line-height: 27px; border-radius: 100%;}

.popupzone_area .popup_slide {visibility: hidden; opacity: 0;}
.popupzone_area .popup_slide .owl-carousel {width: 290px; overflow: hidden;}
.popupzone_area .popup_slide .owl-carousel .owl-dots {text-align: center; margin-top: 16px;}
.popupzone_area .popup_slide .owl-carousel .owl-dots button {display: inline-block; position: relative; vertical-align: middle; width: 8px; height: 8px; background-color: #fff; margin: 0 6px; border-radius: 20px;}
/* .popupzone_area .popup_slide .owl-carousel .owl-dots button.active {background-color: rgba(0, 120, 215, 0.8);} */
.popupzone_area .popup_slide .owl-carousel .owl-dots button.active:before {content:''; position: absolute; left: -4px; top: -4px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 20px;}

.popupzone_area .owl-carousel .slide > a {display: block;}

/* 주요 서비스 */
.main_service_area ul li a::before {content: ''; width: 27px;}
.main_service_area ul li.menu01 a::before {height: 25px; background-position: -105px -174px;}
.main_service_area ul li.menu02 a::before {height: 30px; background-position: -37px -174px;}
.main_service_area ul li.menu03 a::before {height: 25px; background-position: -69px -174px;}
.main_service_area ul li.menu04 a::before {height: 24px; background-position: -5px -174px;}
.main_service_area ul li a:hover::before {transition: transform 0.4s ease-in-out; transform: rotateY(360deg);}

/* ================================
	팝업존 (열림)
================================ */

/* 팝업 슬라이드 */
.popupzone_area.open .popup_count {display: none;}
.popupzone_area.open .popup_slide {visibility: visible; opacity:1; height: 258px; margin-bottom: 35px;}
.popupzone_area .owl-carousel .owl-stage-outer {width: 100%; max-height: 220px; padding: 3px;}
.popup_slide .owl-dots {text-align: center; margin-top: 16px;}
.popup_slide .owl-dots button {display: inline-block; vertical-align: middle; width: 8px; height: 8px; background-color: #fff !important; margin: 0 4px; border-radius: 20px;}
/* .popup_slide .owl-dots button.active {background-color: rgba(0, 120, 215, 0.8) !important;} */

/* 주요 서비스 */
.popupzone_area.open .main_service_area ul li a::before {position: absolute; top: 50%; left: 11px;}
.popupzone_area.open .main_service_area ul li.menu01 a::before {margin-top: -12px;}
.popupzone_area.open .main_service_area ul li.menu02 a::before {margin-top: -15px;}
.popupzone_area.open .main_service_area ul li.menu03 a::before {margin-top: -13px;}
.popupzone_area.open .main_service_area ul li.menu04 a::before {margin-top: -13px;}

/* ================================
	PC
=============================== */
@media screen and (min-width: 1025px) {
	/* ================================
		header
	================================ */
	#header_wrap {overflow: hidden;}
	#header_wrap .logo {position: absolute; left: 0; top: 20px;}
	#header_wrap:not(.sticky).on {box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);}
	#header_wrap:not(.sticky):before {content: ''; position: absolute; left: 0; top: 79px; width: 100%; height: 1px; background: #e0e0e0;}
	#header_wrap:not(.sticky):after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #e0e0e0;}
	#header_wrap.sticky {height: 48px; background: #000;}
	#header_wrap.sticky .logo, #header_wrap.sticky .top_menu {display: none;}
	#header_wrap.sticky #gnb > ul > li > a {color: #fff;}
	#header_wrap.sticky #gnb_wrap {padding: 5px 0 0 0;}
	#header_wrap.sticky #gnb > ul > li > a {padding-bottom: 5px;}
	#header_wrap.sticky #gnb > ul > li > a:after {content: none;}
	#gnb > ul > li > a:after {content: ""; position: absolute; right: 50%; left: 50%; bottom: 1px; height: 3px; background: #3076bc; width: 0; opacity: 0; transition: all 0.3s;}
	#gnb > ul > li > a:hover, #gnb > ul > li > a:focus, #gnb > ul > li > a.on {color: #3076bc;}
	#gnb > ul > li > a:hover:after, #gnb > ul > li > a:focus:after, #gnb > ul > li > a.on:after {width: 100%; left: 0; right:0; opacity: 1;}

	#gnb > ul > li > ul > li > a:before {content: none; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: #3076bc;}
	#gnb > ul > li > ul > li > a:hover, #gnb > ul > li > ul > li > a:focus {color: #3076bc;}
	#gnb > ul > li > ul > li > a:hover:before, #gnb > ul > li > ul > li > a:focus:before {content: '';}

	.header_srch {display: none;}
	.header_srch .search_btn::before {content: ''; position: absolute; top: 5px; left: 4px; width: 21px; height: 21px; background-position: -100px -46px;}

	/* ================================
		footer
	================================ */
	.footer_notice .control_area .control .btn_more span:after {content: ''; position: absolute; right: 0; top: 7px; width: 6px; height: 9px; background-position: -32px -153px;}
	.arte_family {position: absolute; right: 0; top: 18px; width: 200px; height: 37px; background: url(../images/common/btn_family.png) no-repeat 176px #000; border: 1px solid #666; color: #d2d2d2; letter-spacing: -0.05em; padding-left: 20px; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
	.arte_family:focus {background-image: url(../images/common/btn_family_on.png);}
	.arte_family a:focus-visible, .footer_menu a:focus-visible, .footer_address a:focus-visible, .arte_family button:focus-visible, .footer_menu button:focus-visible, .footer_address button:focus-visible {outline-color: #fff;}

	/* ================================
		팝업존
	================================ */
	.popupzone_area {position: fixed; top: 50%; right: -220px; margin-top: -196px; transition: all .5s; transition-timing-function: ease-out;}
	.popupzone_area .btn_popup_open, .popupzone_area .btn_popup_close {display: none;}
	.popupzone_area.open {right: 0;}
	.popupzone_area.open {height: 100%; top: 126px; margin-top: 0; background-color: rgba(47, 47, 47, 0.94);}
	.popupzone_area.open.fixed {top: 48px;}
	.popupzone_area.open .popupzone {padding: 18px 15px; height: 100%; box-sizing: border-box;}

	/* 팝업 슬라이드 */
	.popup_count {width: 70px; padding-top: 25px; padding-bottom: 28px;}
	.popupzone_area:not(.open) .popup_slide_area {border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
	.popupzone_area .popup_slide {height: 0; transition-property: opacity, visibility; transition-duration: 0.3s;}


	/* 주요 서비스 */
	.popupzone_area:not(.open) .main_service_area ul {padding-top: 20px; padding-bottom: 20px;}
	.main_service_area ul li a {display: block; padding: 17px 15px; color: #fff; letter-spacing: -0.06em; overflow: hidden;}
	.main_service_area ul li a::before {float: left; margin-left: 7px;}
	.main_service_area ul li a > span {padding-left: 25px;}
	.popupzone_area.open .main_service_area ul {padding: 0 5px;}
	.popupzone_area.open .main_service_area ul li {border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
	.popupzone_area.open .main_service_area ul li:first-child {border-top: 1px solid rgba(255, 255, 255, 0.4);}
	.popupzone_area.open .main_service_area ul li a {height: 59px; line-height: 60px; position: relative; padding-top: 0; padding-bottom: 0;}
	.popupzone_area.open .main_service_area ul li a > span::after {content: ''; width: 5px; height: 9px; position: absolute; top: 50%; right: 30px; margin-top: -5px; background-position: -142px -174px;}
	.popupzone_area.open .main_service_area ul li a > span {padding-left: 39px;}

	.side_area {position: fixed; right: 70px; bottom: 20px; z-index: 10; transition: bottom 0.2s;}
	.side_area #totop {opacity: 0; width: 65px; height: 65px; background: #0078d7; border-radius: 50%; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.23); transition: opacity 0.2s ease-in;}
	.side_area #totop.on {opacity: 1;}
	#totop:before {content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 27px; margin-top: -12px; margin-left: -12px; background: url(../images/common/btn_top.png) no-repeat; background-size: contain;}
}

/* ================================
	TABLET
=============================== */
@media screen and (max-width: 1024px) {

	/* ================================
		common
	=============================== */
	body {font-size: 14px;}
	.ic_tit_new:after {width: 15px; height: 15px; line-height: 1.4; font-size: 10px; margin-top: -3px;}
	.ic_tit_new2:before {width: 15px; height: 15px; line-height: 1.4; font-size: 10px; margin-top: -3px;}

	/* form */
	.css_input_sm {width: 60px;}

	/* 사파리 브라우저 모양 변형 방지 */
	input:not([type="radio"]):not([type="checkbox"]), textarea, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
	input:not([type="radio"]):not([type="checkbox"]), textarea, button, select {-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;}

	.mbhi {display: none !important;}
	.mWP15 {width: 15% !important;}
	.mWP20 {width: 20% !important;}
	.mWP25 {width: 25% !important;}

	#container {padding-top: 0;}
	#container.mcontainer {padding-top: 55px;}

	/* ================================
		레이어팝업
	================================ */
	.popup_Area {padding: 0 10px;}
	.pop_header {height: 45px;}
	.pop_header strong {font-size: 15px; padding: 14px 40px 0px 15px;}
	.pop_header .btn_close {right: 7px; top: 7px}
	.pop_content {padding: 10px 15px 15px;}
	.pop_content .btn_box {margin-top: 15px;}
	.pop_content .btn_box .btn_type01 {font-size: 12px;}

	/* ================================
		마이페이지 - 나의 스크랩(카테고리 관리)
	================================ */
	.scrap_cate_box {font-size: 13px;}
	.scrap_cate_box .cate_list li .tit input[type="text"], .scrap_cate_box .add_newcate .cate_input input[type="text"] {font-size: 12px;}
	.scrap_cate_box .cate_list li, .scrap_cate_box .add_newcate {padding-right: 0; font-size: 12px;}
	.scrap_cate_box .cate_list li .tit, .scrap_cate_box .add_newcate .cate_input {padding-right: 95px;}
	.scrap_cate_box .btn {right: 0;}
	.scrap_cate_box .btn_type01:last-child {margin-right: 0;}

	/* ================================
		header
	================================ */

		/* header */
		#header_wrap {position: fixed; width: 100%; z-index: 10;}
		#header {height: 55px; border-bottom: 1px solid #ccc; box-sizing: border-box;}
		#header_wrap .logo a {margin: 0 auto; position: relative; top: 14px; width: 170px;}

		/* top_menu */
		.top_menu {position: static;}
		.top_menu ul {display: none;}

		/* search */
		.header_srch {position: absolute; top: 0; right: 0; width: 100%;}
		.header_srch .btn_open, .header_srch .btn_close {width: 55px; height: 55px; position: absolute; right: 0; top: 0; outline: none;}
		.header_srch .btn_open {background: url('../images/common/m_icon_search.png') no-repeat center; background-size: 24px;}
		.header_srch .btn_close {background: url('../images/common/m_btn_srch_close.png') no-repeat center; background-size: 20px;}
		.header_srch .srch_area {width: 100%; border-color: #373737; border-left: 0; border-right: 0; height: 45px; background: #fff; top: 54px; padding: 1px 15px;}
		.header_srch .srch_area .srch {position: relative; overflow: hidden; padding-right: 35px;}
		.header_srch .srch_area:before {background: url('../images/common/m_srch_box_arrow.png') no-repeat; background-size: 100%; width: 17px; height: 11px; top: -10px; right: 18px;}
		.header_srch input[type="text"] {padding: 0; width: 100%; height: 40px; outline: none;}
		.header_srch .search_btn {position: absolute; right: 7px; top: 1px; background: url(../images/common/m_icon_search.png) no-repeat center; background-size: 24px; width: 40px; height: 40px; outline: none; border: none; text-indent: -9999px;}

		/* gnb_wrap */
		#gnb_wrap {padding: 0}
		.ic_menu {display: block; background: url('../images/common/btn_lnb.png') no-repeat center; position: absolute; top: 0; left: 0; text-indent: -9999px; overflow: hidden; width: 55px; height: 55px; outline: none;}
		.gnb_close {display: block; background: url('../images/common/btn_close.png') no-repeat center; position: absolute; top: 0px; right: 0px; text-indent: -9999px; overflow: hidden; width: 55px; height: 55px; z-index: 1000;}

			/* gnb_top */
			.gnb_top {display: block; background-color: #0078d7; height: 54px; color: #fff; max-width: 255px; position: relative;}
			.gnb_top ul {position: relative; overflow: hidden; padding: 18px 15px; box-sizing: border-box;}
			.gnb_top ul li {float: left; font-size: 13px; position: relative; padding-left: 10px; margin-left: 10px;}
			.gnb_top ul li:first-child {padding-left: 0; margin-left: 0;}
			.gnb_top ul li:before {content: ''; position: absolute; left: 0; top: 4px; width: 1px; height: 12px; display: inline-block; background-color: rgba(255, 255, 255, 0.3); }
			.gnb_top ul li:first-child:before {display: none;}

			/* lnb */
			#gnb {position: fixed; left: 0; top: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); text-align: left; display: none;}
			#gnb.on {display: block;}

			/* 1depth */
			#gnb > ul {width: 100%; max-width: 255px; height: 100%; background: #181d21; overflow-y: auto; padding: 5px 20px; box-sizing: border-box;}
			#gnb > ul > li {border-bottom: 1px solid rgba(255, 255, 255, 0.15); box-sizing: border-box; float: none; padding-right: 0;}
			#gnb > ul > li > a {width: 100%; font-size: 14px; line-height: 43px; height: 43px; margin-right: 0; color: #fff; word-break: keep-all; word-wrap: break-word; padding: 0;}
			#gnb > ul > li.dep02 > a:before {content:''; position: absolute; right: 0; top: 50%; margin-top: -3px; left: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #fff; }
			#gnb > ul > li.dep02.on > a:before {border-top: 0; border-bottom: 7px solid #fff;}
			#gnb > ul > li > a > span:after {content: none;}

			/* 2depth */
			#gnb > ul > li.on > ul {display: block;}
			#gnb > ul > li > ul:before {content: none;}
			#gnb > ul > li > ul {display: none; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); position: relative; padding: 10px;}
			#gnb > ul > li > ul > li {float: none; line-height: normal; margin: 0; color: #95989a;}
			#gnb > ul > li > ul > li > a {font-size: 13px; letter-spacing: -0.02em;}
			#gnb > ul > li > ul > li > a:hover, #gnb > ul > li > ul > li > a:focus {color: #0078d7;}

	/* ================================
		footer
	================================ */
	#footer {background: #434244;}
	.side_area {display: none;}
	.footer_notice:before {content: none;}
	.footer_notice .inner {padding: 0 15px; box-sizing: border-box;}
	.footer_notice .control_area {border-bottom: 1px solid #c2c2c2; padding: 15px 0 10px;}
	.footer_notice .control_area strong {font-size: 17px;}
	.footer_notice .control_area .control {position: relative;}
	.footer_notice .control_area .control button {display: none !important;}
	.footer_notice .control_area .control .btn_more {margin-left: 0; position: absolute; right: 0; top: 6px;}
	.footer_notice .control_area .control .btn_more span {background: url(../images/common/btn_more.png) no-repeat right center; background-size: 100%; display: block;  width: 9px; height: 15px; text-indent: -9999px; padding-right: 0;}
	.footer_notice .slide_area {padding: 0;}
	.footer_notice .slide_area .grap {height: auto;}
	.footer_notice .slide_area ul li {display: none; float: none; width: 100%; padding: 15px 0 15px 12px; height: auto; overflow: hidden; border-top: 1px solid #e1e1e1;}
	.footer_notice .slide_area ul li:first-child {display: block; border-top: 0;}
	.footer_notice .slide_area ul li:first-child + li {display: block;}
	.footer_notice .slide_area .date {display: none;}
	.footer_notice .slide_area .tit {width: auto;}

	.family_area {margin: 14px auto; padding: 0 15px; text-align: center;}
	.arte_family {width: 100%; max-width: 550px; height: 40px; background: url(../images/common/btn_family.png) no-repeat right 30px center #000; border: 1px solid #666; color: #d2d2d2; letter-spacing: -0.05em; padding-left: 20px; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
	.arte_family:focus {background-image: url(../images/common/btn_family_on.png);}
	.arte_family a:focus-visible, .footer_menu a:focus-visible, .footer_address a:focus-visible, .arte_family button:focus-visible, .footer_menu button:focus-visible, .footer_address button:focus-visible {outline-color: #fff;}

	.footer_menu {padding: 12px 7px; text-align: center; border-top: 0; border-top: 1px solid #5c5c5d; border-bottom: 1px solid rgba(194, 194, 194, 0.2); position: relative;}
	.footer_menu ul li a {position: relative; padding: 0 12px 0 8px; font-size: 13px; color: #c8c8c8;}

	.footer_address {padding: 15px 15px 60px 15px; text-align: center;}
	.footer_address > div {font-size: 12px; line-height: 160%;}
	.footer_address > div > p > span {margin-right: 0; display: block;}

	/* ================================
		팝업존
	================================ */
	.popupzone_area {position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box;}
	.popupzone_area:not(.open) {height: 50px; padding-left: 15px; padding-right: 55px;}
	.popupzone_area:not(.open) .btn_popup_open {display: block; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; cursor: pointer;}
	.popupzone_area:not(.open) .btn_popup_close {display: none;}
	.popupzone_area:not(.open) .popupzone {position: relative; padding-left: 80px;}
	.popupzone_area.open .btn_popup_close {position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; text-indent: -9999px; background: url(../images/common/layer_close.png) no-repeat 50%;}

	/* 팝업 슬라이드 */
	.popupzone_area:not(.open) .popup_slide_area {position: absolute; top: 13px; left: 0; width: 80px;}
	.popupzone_area.open .popupzone {padding-top: 40px;}
	.popup_count .count {display: inline-block; margin-top: 0; margin-left: 8px; width: 24px; height: 24px; line-height: 24px; font-size: 13px;}
	.popup_slide {max-width: 290px; margin: 0 auto;}
	.popupzone_area.open .popup_slide {padding: 10px 15px 15px; margin-bottom: 0;}

	/* 주요 서비스 */
	.main_service_area {float: left;}
	.main_service_area ul li {float: left; width: 25%; display: table; table-layout: fixed;}
	.main_service_area ul li > a {display: table-cell; vertical-align: middle; height: 50px;}
	.popupzone_area:not(.open) .main_service_area ul li a::before {display: block; margin: 0 auto;}
	.popupzone_area:not(.open) .main_service_area ul li a > span {display: none;}
	.popupzone_area.open .main_service_area {background: #0078d7; border-top: 1px solid rgba(255, 255, 255, 0.2);}
	.popupzone_area.open .main_service_area ul {position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto;}
	.popupzone_area.open .main_service_area ul li {float: left; width: 25%; border-right: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; text-align: center;}
	.popupzone_area.open .main_service_area ul li a::before {content: none;}
	.popupzone_area.open .main_service_area ul li a > span {display: block; color: #fff; font-size: 13px; font-weight: 500; letter-spacing: -0.06em; line-height: 1.2;}
	.popupzone_area.open .main_service_area ul li:not(.menu04) a > span .dis_ib {display: block;}
	.popupzone_area.open .main_service_area ul li.menu04 a > span .dis_ib {display: none;}
	.popupzone_area.open .main_service_area ul li.menu04 a > span::before {content: '사이트'; display: block;}
}

/* ================================
	MOBILE
=============================== */
@media screen and (max-width: 768px) {

	/* ================================
		footer
	================================ */

	.footer_menu ul {line-height: 160%;}

	.footer_address > div > p {display: block; margin-bottom: 10px}
	.footer_address > div > a > img {display: block; margin: 0 auto; width: auto; height: 38px;}
}

/* ================================
	MOBILE
=============================== */
@media screen and (max-width: 480px) {

	/* ================================
		common
	=============================== */
	.smbhi {display: none !important;}
}