@charset "UTF-8";

/*===================== header =====================*/
.header {width:100%;background-color:#fff;position:relative;z-index:9999}

.utility_bar {height:32px;background-color:#EAE1D5;position:relative;;z-index:9999;transition:all 0.3s}
.utility_bar .container {height:100%;transition:all 0.3s}
.utility_bar .btn_obj {height:100%;text-align:right}
.utility_bar .btn_obj .obj_list {display:flex;justify-content:right;height:100%}
.utility_bar .btn_obj .bundle {display:inline-block;height:100%;text-align:left;font-size:0.9375em;position:relative}
.utility_bar .btn_obj .bundle::after {display:block;width:1px;height:16px;content:'';background-color:var(--colorBorderGray);position:absolute;right:0;top:50%;transform:translateY(-50%)}
.utility_bar .btn_obj .bundle > .btn {display:block;height:100%;padding:5px 12px}
.utility_bar .btn_obj .bundle > .btn .icon {transform:translateY(-1px);transition:0.2s}
.utility_bar .btn_obj .bundle:last-child::after {display:none}
.utility_bar .btn_obj .bundle:last-child > .btn {padding-right:0}
.utility_bar .btn_obj .list_layer {display:none;width:194px;padding:10px;background-color:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:8px;position:absolute;left:50%;top:37px;transform:translateX(-50%);z-index:100}
.utility_bar .btn_obj .list_layer.sm {width:140px;padding-bottom:0}
.utility_bar .btn_obj .list_layer::before {display:block;width:0;content:'';border-top:10px solid transparent;border-bottom:10px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent;position:absolute;left:50%;top:-20px;transform:translateX(-50%)}
.utility_bar .btn_obj .list_layer .btn {display:block;width:100%;padding:12px 10px}
.utility_bar .btn_obj .list_layer .btn:hover {background-color:var(--colorBgGray);border-radius:8px}
.utility_bar .btn_obj .list_layer .btn_reset {margin-top:10px;text-align:center;border-top:1px solid var(--colorBorderGray)}
.utility_bar .btn_obj .list_layer .list_inner {max-height:600px;overflow-y:auto}
.utility_bar .btn_obj .list_layer .btn_box {}
.utility_bar .btn_obj .list_layer .btn_box .btn {text-align:left}
.utility_bar .btn_obj .list_layer .btn_box .btn .icon {vertical-align:baseline}
.utility_bar .btn_obj .list_layer .btn_box .btn.link {display:grid;grid-template-columns:auto max-content;justify-content:space-between;align-items:baseline}
.utility_bar .btn_obj .list_layer .btn_box .btn.link .icon {flex-shrink:0}

.utility_bar .btn_obj .bundle.on {}
.utility_bar .btn_obj .bundle.on > .btn {background-color:rgba(255,255,255,0.5)}
.utility_bar .btn_obj .bundle.on > .btn .icon {transform:rotate(180deg)}
.utility_bar .btn_obj .bundle.on .list_layer {}


.header .header_inner {position: relative}
.header .header_top {border-bottom: 1px solid var(--colorBorderGray);position:relative;z-index:9998;transition:all 0.3s}
.header .header_top .container {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between; padding: 19px 0;transition:all 0.3s}
.header .header_top .logo_area {}
.header .header_top .logo_area .logo {display:inline-block;width:258px;height:45px;color:transparent;background-image:url(/ebook/images/common/logo.png);background-repeat:no-repeat;background-position:left top;background-size:cover;vertical-align:bottom}
.header .header_top .head_sch_cont_area {position:relative; width: 100%; max-width:400px; padding: 0 50px 0 0;border:1px solid var(--colorGray90);border-radius: 41px;transition:width 0.3s}
.header .header_top .head_sch_cont_area .head_inp {width:calc(100% - 28px); height:15px;font-size:1em;border: none; background-color: inherit;}
.header .header_top .head_sch_cont_area .sch_btn {display:flex;align-items:center;justify-content:center;width:50px;height:100%;font-size:26px;text-align:left;position:absolute;right:0;top:0}
.header .header_top .right_btn_group {display:inline-flex;column-gap:24px;align-items:flex-end}
.header .header_top .right_btn_group .btn_li {font-size:1.05em}
.header .header_top .right_btn_group .btn_li .btn {display:flex;align-items:center;column-gap:6px;font-weight:700}
.header .header_top .right_btn_group .btn_li .btn .icon {font-size:21px}
.header .header_top .right_btn_group .btn_li .btn .text {}

.header .gnb_cont_area {position:relative;z-index:9998;border-bottom: 1px solid var(--colorBorderGray)}
/*.header .gnb_cont_area .container {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: space-between; position:relative;}*/
.header .gnb_cont_area .gnb_area {}
.header .gnb_cont_area #gnb {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center;}
.header .gnb_cont_area #gnb > li {flex:1;height:60px;font-size:1.1em;position:relative}
.header .gnb_cont_area #gnb > li.none {display: none;}

.header .gnb_cont_area #gnb > li .sitemap_tit {display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:1.1em;border-right:1px solid var(--colorBorderGray);position:relative}
.header .gnb_cont_area #gnb > li .sitemap_tit .text {display:block;font-weight:700}
.header .gnb_cont_area #gnb > li:first-child .sitemap_tit {border-left:1px solid var(--colorBorderGray)}
.header .gnb_cont_area #gnb > li .sub_gnb_area {display:none;border-right:1px solid var(--colorGray10);position:absolute;right:0;left:0;z-index:3}
.header .gnb_cont_area #gnb > li:first-child .sub_gnb_area {border-left:1px solid var(--colorGray10)}
.header .gnb_cont_area #gnb > li .sub_gnb {}
.header .gnb_cont_area #gnb > li .sub_gnb > li {text-align:center;}
.header .gnb_cont_area #gnb > li .sub_gnb > li > a {display:block;padding:12px 0;font-size:1.1em;border-bottom:1px solid var(--colorGray10);transition:0.3s}
.header .gnb_cont_area #gnb > li .sub_gnb > li > a:hover, 
.header .gnb_cont_area #gnb > li .sub_gnb > li > a:focus {color:#fff;font-weight:700;background-color:var(--colorMain);border-bottom-color:var(--colorMain)}
.header .gnb_cont_area #gnb > li .sub_gnb > li > a:focus {outline-offset:-2px}
.header .gnb_cont_area #gnb > li.on .sitemap_tit {background-color:#fff;outline:2px solid var(--colorMain);outline-offset:-2px}
.header .gnb_cont_area #gnb > li.on .sitemap_tit .text {color:var(--colorMain)}
.header .gnb_cont_area #gnb > li.on .sub_gnb_area {background-color:#fff}

.header .head_etc_btn_area {}
.header .head_etc_btn_area > .list { display: flex; justify-content: space-between; align-items: center;text-align:center}
.header .head_etc_btn_area > .list > li { display: inline-block; margin: 0 5px 0 0; vertical-align: middle;}
.header .head_etc_btn_area > .list > li:last-child { margin: 0;}
.header .head_etc_btn_area > .list > li .btn { display: block; padding:10px 17px 9px 17px;line-height:1; border-radius: 20px; background:rgba(0,0,0,0.1); color:var(--colorBlack); font-size: 15px; font-weight: 500;}
.header .head_etc_btn_area > .list > li .btn.link_btn {  background: var(--colorGray80); color:var(--colorWhite)}
.header .head_etc_btn_area > .list > li .btn .icon {line-height:15px;vertical-align:baseline;transform:translateY(1px)}
.header .head_etc_btn_area > .list > li .btn:hover, 
.header .head_etc_btn_area > .list > li .btn:focus {color:var(--colorWhite);background-color:var(--colorSub)}}
.header .head_btn_box { display: flex; justify-content: space-between; align-items: center; gap: 0 13px;}

.header .gnb_bg {position: absolute; left:0; display: none; width: 100%; background-color:var(--colorBgGray); box-shadow: 0 5px 10px rgba(211,211,211,0.5); z-index: 2;}


/* header scrolled */
.header.scrolled {}
.header.scrolled > .utility_bar {width:100%;position:fixed;left:0;top:0;animation:scrolledHeader 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards}
.header.scrolled > .utility_bar .container {max-width:inherit;margin:0 60px}
.header.scrolled .header_top {width:100%;background-color:#fff;box-shadow:0 6px 9px rgba(0,0,0,0.05);position:fixed;left:0;top:32px;animation:scrolledHeader 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards}
.header.scrolled .header_top .container {max-width:inherit;margin:0 60px;padding:12px 0}
.header.scrolled .header_top .logo_area .logo {width:220px;height:38px}
.header.scrolled .header_top .head_sch_cont_area {min-width:220px;animation:schWidth 0.5s 1 forwards}

@keyframes scrolledHeader{
    from {transform:translateY(-100%);opacity:0}
    to {transform:translateY(0);opacity:1}
}
@keyframes schWidth{
	from {max-width:400px}
	to {max-width:42%}
}