@charset "UTF-8";

/* header */
#header {position: fixed; top: 0; left: auto; max-width: 527px;  width:100%; z-index: 9999; background:#fff;}
.header_top_box {padding:10px 0 0; box-sizing:border-box; text-align: center; position: relative;}
.header_top_box a {display:inline-block;}
.header_top_box .btn_open { position:absolute; top:calc(50% - 8.5px); left:16px}
.header_top_box .btn_open em {display:block; position: relative; width: 23px;  height: 17px;}
.header_top_box .btn_open span { display: block; width:100%; height: 2px; background:#000; position: absolute; left: 0px; transition: all 0.3s ease 0s;}
.header_top_box .btn_open .line01 {top:0}
.header_top_box .btn_open .line02 {top: 7px;}
.header_top_box .btn_open .line03 {top: 14px;}
.header_top_box .btn_sub {position:absolute; top:calc(50% - 14px); right:16px; }
.header_top_box .btn_sub a {width:28px; box-sizing:border-box;  }
.header_top_box .btn_sub a.btn_alert {padding:1px; margin-left:4px;   }
.header_menu_box { display: flex; justify-content: space-between; padding:10px 16px; box-sizing:border-box; }
.header_menu_box a {display:inline-block; font-size:16px; color:#383838; font-weight:400; position:relative; padding:0; } 
.header_menu_box a.active {color:#163c7a; font-weight:600 }
.header_menu_box a.active:after {content:""; display:inline-block; width:100%; height:2px; position:absolute; left:0; bottom:-2px; background:#143f77}

/* Beta 표시 */
/*#header .logo_box a::before { content:"Beta"; }*/

#header.headroom--not-top {position:fixed; top:0; width:527px;}

/* aside */
#header .lnb_box {position: fixed; left: auto; top: 0; width: 250px; height: 100%; background: #fff; overflow: auto; z-index: 9999; transition: transform 0.5s cubic-bezier(0.65,0.05,0.36,1); transform: translateX(-100%); padding: 0 15px; opacity: 0;}
#header .lnb_box.open{transform: translateX(0); z-index: 9999; visibility: visible; height: 100vh; opacity: 1;}
#header .lnb_box .lnb_head {padding: 16px 0;}
#header .lnb_box .lnb_head img {width:90px;}
#header .lnb_box .util {display: flex; align-items: center; justify-content: center; margin-top: 5px;}
#header .lnb_box .util a {display: block; width: 50%; line-height: 34px; border-radius: 5px; font-size: 14px; text-align: center; border:1px solid #cca07b; color:#cca07b;}
#header .lnb_box .util a:last-child {margin-left: 5px; background:#cca07b; color:#fff;}
#header .m_lnb {background: #fff; padding: 5px 0; margin: 20px 0; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed;}
#header .m_lnb .depth1>li.active>a {color: #751485; font-weight: 700;}
#header .m_lnb .depth1>li>a {display: block; line-height: 40px; color: #000; font-size: 14px; padding-left: 15px; font-weight: 500;}
#header .provider_link_wrap {display: flex; justify-content: space-between;}
#header .provider_link_wrap a {width: 105px; height: 30px; border: 1px solid #ededed; color: #4d4d4d; font-size: 12px; line-height: 28px; text-align: center;}
#header .provider_link_wrap a:last-child {}
#header .dimm {position: fixed; height: 100vh; left: auto; top: 0; width: 527px; background: rgba(0,0,0,0.3); z-index: 9998; display:none;}
.sd_gnb { color: #999; background-color: #f7f7f7; padding: 8px 0; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }
.sd_gnb .cnt { width: 16px; height: 16px; -webkit-border-radius: 40px;-moz-border-radius: 40px;border-radius: 40px; background-color: #FF3379; color: #fff; font-size: 10px; display: inline-block; vertical-align: middle; text-align: center; line-height: 16px; }
.sd_gnb li { padding: 8px 0; }
.sd_gnb li a { line-height: 18px; padding: 0 8px; border-left: 2px solid transparent;  }
.sd_gnb li img { vertical-align: middle; margin-right: 8px; opacity: 0.7; filter: grayscale(100);}
.sd_gnb li.on a, header .gnb li:hover a { border-color: #163F77; color: #163F77;  }
.sd_gnb li.on img, header .gnb li:hover img { opacity: 1; filter: grayscale(0); }

/* title */
#header.active .title_box {box-shadow: 0 6px 6px -3px rgb(0 0 0 / 16%);}
.title_box .wrap {position:relative; text-align:center; }
.title_box .wrap .is_back {display: block; position: absolute; left:11px; top: 50%; transform: translateY(-50%); }
.title_box .wrap .tt {font-size: 16px; color: #000; font-weight: 700; text-align: center; line-height: 53px;
text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;  padding:0 32px; }

#contain {padding-top:180px; }




@media (max-width:998px) { 
	#contain {padding-top:162px; }
	.header_menu_box a {font-size:14px; }
}

@media(max-width:374px){
.header_top_box .btn_sub a{width:23px;}
}