@charset "utf-8";

@import url('../../svg/svg.css');
@import url('../../fonts/font.css');
@import url('jquery-ui.css');
@import url('slick.css');

/**************************************************root**************************************************/
:root {
	--size_ico: 20px; --size_form: 40px; --maxW: 1360px; --maxW: 1440px; --fixRSize: 67px; --topBtSize: 54px; --gab: 4px; --pdLR: 40px; --formW: 210px;

	/*primary color*/
	/*--hk-or-rgb: 236, 102, 8; --hk-or-light-rgb: 255, 150, 77; --hk-or-lighter-rgb: 255, 180, 128; --hk-or-lightest-rgb: 255, 240, 230;*/
	--HK_or: #EC6608; --HK_or_over: #ec4908; --HK_or_light: #FF964D; --HK_or_lighter: #FFB480; --HK_or_lightest: #FFF0E6;
	--Admin_blue: #0077FF; --HK_blue: #0077FF; --HK_blue_over: #0057B7;
	--HK_red: #DA1E28; --HK_red_over: #b80009; --HK_red2: #852221; --HK_red2_over: #5e0200;
	--HK_Green: #00C19F; --HK_Green_over: #00977b; --HK_Green: #34C759; --HK_Green_over: #0d9930;

	/*secondary color*/
	--Sec_green: #00C19F; --Sec_blue: #0057B7; --Sec_yellow: #FFB600;

	/*Accent color*/
	--Acc_green: #0B6511; --Acc_blue: #1B8EE4; --Acc_red: var(--HK_red); --Acc_or: var(--HK_or);

	/*gray ~ white*/
	--Gray_000: #000; --Gray_111: #111; --Gray_333: #333; --Gray_555: #555; --Gray_666: #666; --Gray_888: #888; --Grey_A2: #a2a2a2; --Gray_C0: #C0C0C0; --Gray_CCC: #CCC; --Gray_DDD: #DDD; --Gray_EB: #EBEBEB; --Gray_F5: #F5F5F5; --Gray_F9: #F9F9F9; --Gray_FA: #FAFAFA; --Gray_E5: #E5E5EA;
	--White: #FFF;
	--Error: #B3261E; /*--error-color: #B3261E;*/

	/*form*/
	--Form_color-pl: var(--Grey_A2);
	--Form_border: var(--Gray_CCC); --Form_bg: var(--White); --Form_bg2: var(--Gray_F5); --Form_color: var(--Gray_333);
	--Form_border2: var(--Gray_DDD);
	--Form_dis_border: var(--Gray_DDD); --Form_dis_bg: var(--Gray_FA); --Form_dis_color: var(--Gray_C0);

	--Form_rc: var(--Gray_333); --Form_rc_bg: var(--White);
	--Form_rc_active_bg: var(--Gray_333);
	--Form_rc_dis: var(--Grey_A2); --Form_rc_dis_bg: var(--Grey_A2);

	--Guide: var(--Grey_A2);
	--Guide_error: var(--Error);
	
	--Hover_border: var(--Gray_333);
	--Active_border: var(--HK_or); --Active_border2: var(--HK_or);

	/*font, line-height: fs기준 + 4px, gab..*/
	/*--fs-caption: 12px; --fs-body: 14px; --fs-h5: 16px; --fs-h4: 18px; --fs-h3: 20px; --fs-h3B: 22px; --fs-h2: 24px; --fs-h2B: 26px; --fs-h1: 28px;*/
	--fs-caption: 12px; --fs-body: 0.875rem; --fs-h5: 1rem; --fs-h4: 1.125rem; --fs-h3: 1.25rem; --fs-h3B: 1.375rem; --fs-h2: 1.5rem; --fs-h2B: 1.625rem; --fs-h1: 1.75rem;
	--fw-l: 200; --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700;
	--lh-caption: 0.875rem; --lh-body: 1rem; --lh-h5: 1.25rem; --lh-h4: 1.375rem; --lh-h3: 1.5rem; --lh-h3B: 1.625rem; --lh-h2: 1.75rem; --lh-h2B: 1.875rem; --lh-h1: 2rem;

	/*ico, svg에 사용, + 추후 filter 필요시 사용가능*/
	--filterColor-fff: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2090%) hue-rotate(43deg) brightness(110%) contrast(102%);
	--filterColor-666: brightness(0) saturate(100%) invert(42%) sepia(1%) saturate(0%) hue-rotate(355deg) brightness(92%) contrast(90%);
	--filterColor-333: brightness(0) saturate(100%) invert(15%) sepia(23%) saturate(0%) hue-rotate(251deg) brightness(107%) contrast(90%);
	--filterColor-000: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(241deg) brightness(100%) contrast(106%);
	--filterColor-ddd: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5092%) hue-rotate(194deg) brightness(113%) contrast(73%);
	--filterColor-ccc: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(61%) hue-rotate(166deg) brightness(89%) contrast(78%);
	--filterColor-1C1B1F: brightness(0) saturate(100%) invert(10%) sepia(6%) saturate(824%) hue-rotate(214deg) brightness(94%) contrast(96%);
	--filterColor-0A0400: brightness(0) saturate(100%) invert(3%) sepia(25%) saturate(3146%) hue-rotate(17deg) brightness(100%) contrast(105%);

	--filterColor-0077FF: brightness(0) saturate(100%) invert(38%) sepia(84%) saturate(5175%) hue-rotate(203deg) brightness(104%) contrast(104%);
	--filter-HK_blue: var(--filterColor-0077FF);

	--filterColor-EC6608: brightness(0) saturate(100%) invert(43%) sepia(97%) saturate(1021%) hue-rotate(353deg) brightness(91%) contrast(105%);
	--filterColor-F08539: brightness(0) saturate(100%) invert(56%) sepia(21%) saturate(1588%) hue-rotate(340deg) brightness(104%) contrast(88%);
	--filterColor-71747B: brightness(0) saturate(100%) invert(46%) sepia(10%) saturate(277%) hue-rotate(184deg) brightness(94%) contrast(82%);
	--filterColor-C0C0C0: brightness(0) saturate(100%) invert(79%) sepia(0%) saturate(0%) hue-rotate(184deg) brightness(102%) contrast(83%);
	--filterColor-FF3B30: brightness(0) saturate(100%) invert(39%) sepia(45%) saturate(6381%) hue-rotate(342deg) brightness(101%) contrast(103%);
	/*filter 사용시 : filter: var(--filterColor-600, none);*/

	--filter-dis: brightness(0) saturate(100%) invert(94%) sepia(0%) saturate(68%) hue-rotate(135deg) brightness(84%) contrast(86%);
}

/* CSS Reset */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;vertical-align: baseline; box-sizing: border-box; word-break: keep-all;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}
li,menu{list-style:none;/*word-break:break-all*/}
table{width:100%;border-spacing:0;border-collapse: separate; border-collapse:collapse;}
table caption { width:0; height:0; visibility:hidden; text-indent:-9999px; font-size:0; line-height:0; }
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}
address{font-style:normal}
label, span{display:inline-block;}
a{text-decoration:none;display:inline-block;}
p{margin-block-start: 0; margin-block-end: 0;}
div{outline:0} /* Script TabIndex Click Focusing Line Remove */
img {vertical-align:middle; vertical-align:top; max-width: 100%;}
span {display: inline-block;}
em {font-style: normal;}
font {display: inline-block;}/*번역시 필요함*/

h1,h2,h3,h4,h5,h6 {font-weight: bold;}
strong, b {font-weight: bold;}

/* Common Setting */
html{height:100%; overflow-x:hidden; width: 100%; box-sizing: border-box; font-size: 16px;}
html,body{background:#fff; width: 100%; height: 100%; -webkit-text-size-adjust:100%;-webkit-text-rendering:auto;-moz-text-rendering:auto;text-rendering:auto;}
body {font-family: "Hankook", "HankookMain", 'Noto Sans KR', sans-serif; font-size: 0.875rem; line-height: 1.2; line-height: 1.125rem; color:#333;}/*'HankookTire',*/
html, body {background-color: #fff;}

button {cursor: pointer; background-color: transparent;}
button[disabled], button[readonly] {opacity: .2; cursor: text; outline: 0 none; opacity: 1;}

input[disabled], input[readonly]{color:#999; cursor: text; outline: 0 none;}

:focus, :active {outline: 0 none;}

input:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input:focus::-ms-input-placeholder {color: transparent;}

::placeholder {color: #C0C0C0; color: #A2A2A2;}
::-webkit-input-placeholder {color: #C0C0C0; color: #A2A2A2;}
::-moz-placeholder {color: #C0C0C0; color: #A2A2A2;}
:-ms-input-placeholder {color: #C0C0C0; color: #A2A2A2;}
::-ms-input-placeholder {color: #C0C0C0; color: #A2A2A2;}

.form-input.error::placeholder {color: #B3261E;}
.form-input.error::-webkit-input-placeholder {color: #B3261E;}
.form-input.error::-moz-placeholder {color: #B3261E;}
.form-input.error:-ms-input-placeholder {color: #B3261E;}
.form-input.error::-ms-input-placeholder {color: #B3261E;}

/*.rtime-search-area .search-box .input::placeholder {color:#787878; font-weight: 400;}
.rtime-search-area .search-box .input::-webkit-input-placeholder {color:#787878; font-weight: 400;}
.rtime-search-area .search-box .input::-moz-placeholder {color:#787878; font-weight: 400;}
.rtime-search-area .search-box .input:-ms-input-placeholder {color:#787878; font-weight: 400;}
.rtime-search-area .search-box .input::-ms-input-placeholder {color:#787878; font-weight: 400;}*/

.hidden {position: absolute; top: -9999px; left: -9999em;}

.type-decimal > li {list-style: decimal !important;}
.type-dot > li {padding-left: 10px; position: relative;}
.type-dot > li::before {content: '•'; display: block; width: 10px; height: auto; text-align: center; font-size: inherit; line-height: inherit; color: inherit; position: absolute; left: 0; top: 0;}

.td-ul {text-decoration: underline !important;}

.ta-l {text-align: left !important; justify-content: flex-start !important;}
.ta-c {text-align: center !important; justify-content: center !important;}
.ta-r {text-align: right !important; justify-content: flex-end !important;}

.fl {width: auto; float: left !important;}
.fr {width: auto; float: right !important;}
.clear {clear: both !important;}

.va-t {vertical-align: top !important; align-items: flex-start !important;}
.va-b {vertical-align: bottom !important; align-items: flex-end !important;}

.flex-col {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%;}
.flex-col > .scrollbox {flex: 1 1 0;}
.flex-col > .scrollbox[style*="height"] {flex: unset;}
.flex-col > ul, .flex-col > div, .flex-col > p {width: 100%;}
.flex-col > [class*="pos-type"] {width: auto;}
/*.flex-col > *:not([class*="pos-type"], .btn-ix, .ico) {width: 100%;}*/

[class*="grid-"] {display: grid !important; grid-auto-flow: column !important;}
[class*="grid-col"] {grid-auto-flow: row !important;}/*gird col == flex col*/
.grid-col-auto {grid-auto-rows: 1fr;}

.full {width: 100% !important;}
.w10p {width: 10% !important;}
.w20p {width: 20% !important;}
.w25p {width: 20% !important;}
.w30p {width: 30% !important;}
.w32p {width: 32% !important;}
.w33p {width: 33% !important;}
.w34p {width: 34% !important;}
.w40p {width: 40% !important;}
.w45p {width: 45% !important;}
.w50p {width: 50% !important;}
.w55p {width: 55% !important;}
.w60p {width: 60% !important;}
.w70p {width: 70% !important;}
.w80p {width: 80% !important;}
.w90p {width: 90% !important;}
.full,
.w100p {width: 100% !important;}

.pd0 {padding: 0px !important;}

.mgt0 {margin-top: 0px !important;}
.mgt8 {margin-top: 8px !important;}
.mgt10 {margin-top: 10px !important;}
.mgt12 {margin-top: 12px !important;}
.mgt15 {margin-top: 15px !important;}

.mgt-8 {margin-top: -8px !important;}

.mgl0 {margin-left: 0px !important;}
.mgl5 {margin-left: 5px !important;}

.pdl0 {padding-left: 0px !important;}
.pdl15 {padding-left: 15px !important;}

.pdr0 {padding-right: 0px !important;}

.pdt0 {padding-top: 0px !important;}
.pdt16 {padding-top: 16px !important;}

.pdb0 {padding-bottom: 0px !important;}
.pdb14 {padding-bottom: 14px !important;}

.pdrl0 {padding-right: 0 !important; padding-left: 0 !important;}
.pdrl5 {padding-right: 5px !important; padding-left: 5px !important;}

.position-r {position: relative !important;}
.position-a {position: absolute !important;}

.ellipsis1 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
[class*="ellipsis"]:not(.ellipsis1) {--myLine: 2; /*--myLH: var(--lh-body);*/
	display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
	white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: var(--myLine); -webkit-box-orient: vertical; /*max-height: calc(var(--myLH) * var(--myLine));*/
}
.ellipsis3 {--myLine: 3 !important;}
.ellipsis4 {--myLine: 4 !important;}
.ellipsis5 {--myLine: 5 !important;}
.ellipsis6 {--myLine: 6 !important;}
.ellipsis7 {--myLine: 7 !important;}
.ellipsis8 {--myLine: 8 !important;}

.fc-r {color: red !important; color: var(--HK_red) !important}
.fc-o {color: var(--HK_or) !important;}
.fc-b {color: var(--HK_blue) !important;}
.fc-error {color: var(--Error) !important;}
.fc-333 {color: #333 !important}

.acc-or {color: var(--Acc_or) !important}
.acc-blue {color: var(--Acc_blue) !important}
.acc-green {color: var(--Acc_green) !important}

.normal {font-weight: var(--fw-r) !important;}
.semiBold {font-weight: var(--fw-m) !important;}
.bold {font-weight: var(--fw-sb) !important;}
.bolder {font-weight: var(--fw-b) !important;}

.bar-move {font-size: var(--fs-h3); font-weight: var(--fw-sb); transform: scale(1,2);}

/*loading*/
.loadingbar {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 200;}
.loadingbar .loadingbarbox {display: table; text-align: center; width: 100%; height: 100%;}
.loadingbar .loadingbar-in {display: table-cell; vertical-align: middle;}
.loadingbar .loadingbar-in p {color: #ed6d00; font-size: var(--fs-h4); font-weight: bold; margin-top: 16px;}

.position-r > .loadingbar {position: absolute;}

.loadingbar2 {height: 100vh; position: fixed; width: 100%; display: flex; flex-direction: column; color: #fff; justify-content: center; align-items: center; top: 0; z-index: 1001; background-color: rgba(0, 0, 0, 0.4); margin: 0;}

/*대륙별 색상*/
.flag-txt {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--flagBG, #f5f5f5); color: var(--flagC, #333);}
.flag-txt em {color: inherit; font-size: 10px; line-height: 1; font-weight: var(--fw-sb);}
.flag-txt.type-KR {--flagBG: #DCF2DF; --flagC: #298646;}
.flag-txt.type-NA {--flagBG: #DAEEFF; --flagC: #2A75BA;}
.flag-txt.type-LA {--flagBG: #FFE3DF; --flagC: #B14E49;}
.flag-txt.type-WE {--flagBG: #EEE6FF; --flagC: #7E5DB1;}
.flag-txt.type-EE {--flagBG: #D2F3F0; --flagC: #008882;}
.flag-txt.type-CN {--flagBG: #FFE2E6; --flagC: #AF4C60;}
.flag-txt.type-AP {--flagBG: #DFF1DB; --flagC: #448335;}
.flag-txt.type-ME_AFR {--flagBG: #FEE6D4; --flagC: #A75C00;}

/*공통/컨텐츠 아이콘 공통 : size 기본 24*24*/
.ico {display: inline-block; vertical-align: middle; text-indent: -999rem; font-size: 0; position: relative; overflow: hidden;}

.img-box:has( > img[src*="temp-img.png"])::before,
.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt::before,
.ico[class*="ico-error"]::after,
.ico::before {content: ''; display: block; width: 100%; height: 100%;}

.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt::before,
.ico[class*="ico-error"]::after,
.ico[class*="ico ico-"]::before {background-position: center center; background-repeat: no-repeat; /*position: absolute;*/ top: 0; left: 0;}

.pdf-prev-btn::before,
.pdf-next-btn::before,
.header-openbox .gnblistbox .btn::before,
.btn-topmove::before,
.selectDiv-btn.selected::after,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link::before,
.acc-area .acc-item > .accItem-body .positMapPdfViewer button::before,
.dxi.dxi-vault::before,
.ico:not([class*="24-24"], [class*="48-48"]) {--myISize: 24px;/*width: 20px; min-width: 20px; height: 20px;*/
    width: 20px; width: var(--myISize, 24px); aspect-ratio: 1 / 1; object-fit: cover;
}
/*.btn-topmove::before,
.selectDiv-btn.selected::after,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link::before,
.acc-area .acc-item > .accItem-body .positMapPdfViewer button::before,
.dxi.dxi-vault::before {width: 20px;}

.ico {--mySize: 24px; --myPer: 5 / 6; width: calc(var(--mySize) * var(--myPer));}
.btn-ix .ico {--mySize: inherit;}
.btn-ix[class*="type"] .ico {--mySize: inherit; width: calc((var(--mySize) - (var(--myPD) * 2)) * var(--myPer));}*/

.ico.size-s:not([class*="24-24"], [class*="48-48"]) {width: 12px; min-width: 12px; height: 12px;}
.ico.size-b:not([class*="24-24"], [class*="48-48"]) {width: 48px; min-width: 48px; height: 48px;}

/* svg.css에서 url 관리 기타 설정만 여기*/
.img-box:has( > img[src*="temp-img.png"])::before,
.pdf-prev-btn::before,
.pdf-next-btn::before,
.header-openbox .gnblistbox .btn::before,
/*.img-box:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before,
.item-img:not(:has(>img)):not(:has(>[class*="ico-error-"], >.ico-empty))::before,*/
.btn-topmove::before,
.rc-box input::before,
.selectDiv-btn.selected::after,
.paging .btnbox [class*="btn-"]::before,
.fileSet-box .btn-ix:not(:has( i[class*="ico-file"])) [type="file"] ~ .txt::before,
.header-openbox .gnblistbox > .gnb-list > li > .btn::after,
.area-lnb .lnb .lnb-box .lnb-list .lnb-menu .link::before,
.acc-area .acc-item > .accItem-body .positMapPdfViewer button::before,
.dxi.dxi-vault::before,
.ico[class*="ico-error"]::after,
.ico:not([class*="24-24"],[class*="48-48"],.ico-logo)::before {
    --svg-color: var(--filterColor-666);
    background-position: center center;
    background-size: 80% auto; /*background-size: 86% auto;*/
    background-repeat: no-repeat;
    filter: var(--svg-color);
}

#header .ico-logo::before {
    background-position: left center;
    background-size: contain;
}

.ico.ico-like::before {background-size: 74% auto;}
.ico.ico-user::before {background-size: 70% auto;}
.ico.ico-bookmark2::before {background-size: 70% auto; margin-left: 6%;}

.ico-notice2,
.has-noti .ico-notice {position: relative;}
[class*="ico-notice"]::after {width: 28%; height: 0; padding-top: 28%; border-radius: 50%; display: block; position: absolute; right: 50%; margin-right: -34%; top: 14%; background-color: #333;}
.ico-notice2::after,
.has-noti .ico-notice::after {content: '';}
.ico-notice2::after {width: 22%; height: 0; padding-top: 22%; right: 50%; margin-right: -30%; top: 16%;}
.has-noti [class*="ico-notice"]::after {background-color: #FF6900;}

/* Universal Auto Scroll System 전용 CSS */
.scroll-wrapper-pc { position: relative; overflow: hidden; width: 100%; }
.scroll-shadow { --per: 60%; position: absolute; top: 0; bottom: 0; z-index: 2; width: var(--pdLR); pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.scroll-shadow.left { left: 0; background: linear-gradient(90deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%); }
.scroll-shadow.right { right: 0; background: linear-gradient(270deg, #FFF var(--per), rgba(255, 255, 255, 0) 100%); }
.show-left-shadow .scroll-shadow.left, .show-right-shadow .scroll-shadow.right { opacity: 1; }
.scrollbox-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 6px 15px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 20px; font-size: 13px; pointer-events: none; transition: opacity 0.6s ease; white-space: nowrap; }
.is-scrolled .scrollbox-info { pointer-events: none; transition: opacity 0.3s ease;}
.scroll-wrapper-pc.is-scrolled .scrollbox-info {opacity: 0 !important; visibility: hidden;}
.hasScrollBox-x { display: flex !important; overflow-x: auto !important; white-space: nowrap !important; -ms-overflow-style: none; scrollbar-width: none; cursor: grab; position: relative; z-index: 2; }
.hasScrollBox-x::-webkit-scrollbar { display: none; }
.is-dragging { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; scroll-behavior: auto !important; }
.hasScrollBox-x * { -webkit-user-drag: none; }
.hasScrollBox-x[class*="tabtype"] {margin-bottom: 1px;}


/*************************************************layout*************************************************/
#wrap {width: 100%; min-height: 100%;}

.btn-topmove {width: var(--topBtSize); height: var(--topBtSize); border-radius: 50%; text-align: center;
	background-color: #fff; border: 1px solid #ccc; aspect-ratio: 1 / 1;
	position: fixed; right: var(--pdLR); right: 50%; margin-right: calc(-1 * (var(--maxW) / 2 - var(--pdLR)));
	bottom: -100px; opacity: 0; transition: .5s;
}
.btn-topmove > span {display: none;}
.btn-topmove::before {content: ''; display: block; width: 100%; height: 100%; background-size: auto 50%; transform: rotate(-90deg);}
.btn-topmove.show {bottom: 26px; opacity: 1; z-index: 3;}
.btn-topmove:hover {background-color: var(--Gray_F5);}

html.is-scroll-bottom .btn-topmove.show {bottom: calc(var(--footerH, 96px) + 20px);}
html.is-scroll-bottom:has( .fixed-right) .btn-topmove.show {bottom: calc(var(--footerH, 96px) + 26px);}

/*html:has( .fixed-right) .btn-topmove {right: auto; left: var(--pdLR);}*/

[data-form-id][data-form-hide="true"],
.hide, [data-showHide-id]:not(.open), [data-tab-id]:not(.open),
[data-form-id][data-type="display"]:not(.open) {display: none !important;}
.show {display: block !important;}
[data-showHide-id].open, [data-tab-id].open {display: flex !important;}

[data-showHide-id][style*="position"][style*="absolute"].open,
[data-tab-id][style*="position"][style*="absolute"].open {display: inline-flex !important;}

#header .ico-menu::before {--svg-color: var(--filterColor-333);}

.header-top .ico-search-del::before,
.header-top .ico-search-close::before,
#header .ico-close::before {background-size: 56% auto; --svg-color: var(--filterColor-333);}

#header .ico-arrow-3::before {--svg-color: var(--filterColor-333);}

#header .ico.ico-like::before {--svg-color: #333; --svg-color: var(--filterColor-333); /*background-size: 74% auto;*/}
#header .ico.ico-user::before {--svg-color: #333; --svg-color: var(--filterColor-333); /*background-size: 56% auto;*/}
#header .ico.ico-blank::before {--svg-color: #333; --svg-color: var(--filterColor-333);}
#header .ico.ico-mypage::before {--svg-color: #1C1B1F; --svg-color: var(--filterColor-1C1B1F);}
#footer .ico.ico-notice::before {--svg-color: #0A0400; --svg-color: var(--filterColor-0A0400);}
#footer .ico.ico-digital-library::before {--svg-color: #0A0400; --svg-color: var(--filterColor-0A0400);}

#header .flag.flag-global::before {mask-size: 100% auto; -webkit-mask-size: 100% auto;}

#header .flag[class*="flag-"] {min-width: 28px; width: 28px; height: 28px; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid #ccc; border-radius: 14px;}
#header .flag[class*="flag-"]:not(.flag-global)::before {content: ''; display: block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}

#wrap {width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between;}

/*header*/
#header {width: 100%; min-width: 320px; min-width: 260px; position: sticky; top: 0; z-index: 3; /*min-height: var(--headerH, 100px);*/ position: fixed;}
html:has( .moPopStyle.open) #header {z-index: 1;}
#header:has( .autoComplete_wrapper[aria-expanded="true"], .history-best-box[style*="display"][style*="flex"]) {z-index: 4;}

html:not(:has( .filter-area)):not(.is-scroll-top) #header {box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); z-index: 4;}

.ico.ico-logo {object-fit: contain; --myISize: 144px; max-width: 100%; aspect-ratio: 144 / 30;}
.ico.ico-logo::before {background-size: contain; }

#header .logo {overflow: hidden;}
#header .logo .txt {font-size: 17px; font-weight: var(--fw-b); line-height: 1.2;}
#header .logo .txt span {font-weight: var(--fw-m);}

/* #header 내 h1.logo(상단·open-head 공통): .ico-logo ↔ .txt 교차 페이드 */
#header h1.logo {
	display: grid;
	grid-template-columns: max-content;
	grid-template-rows: auto;
	align-items: center;
	justify-items: start;
}
#header h1.logo > .ico.ico-logo,
#header h1.logo > .txt {
	grid-area: 1 / 1;
	align-self: center;
	will-change: opacity;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
}
#header h1.logo > .ico.ico-logo {
	animation-name: header-logo-crossfade-ico;
}
#header h1.logo > .txt {
	animation-name: header-logo-crossfade-txt;
}
@keyframes header-logo-crossfade-ico {
	0%, 36% { opacity: 1; }
	42%, 90% { opacity: 0; }
	96%, 100% { opacity: 1; }
}
@keyframes header-logo-crossfade-txt {
	0%, 36% { opacity: 0; }
	42%, 90% { opacity: 1; }
	96%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#header h1.logo > .ico.ico-logo,
	#header h1.logo > .txt {
		animation: none !important;
		will-change: auto;
	}
	#header h1.logo > .ico.ico-logo { opacity: 1; }
	#header h1.logo > .txt { opacity: 0; }
}

.header-top { margin: 0 auto; display: flex; justify-content: space-between; gap: 10px; position: relative; z-index: 1; padding: 20px var(--pdLR); background-color: #fff;}
.header-top > .left,
.header-top > .center,
.header-top > .right {display: inline-flex; justify-content: flex-start; align-items: center; padding-top: 24px;}
.header-top > .left { /*padding: 40px 0 24px 0;*/ column-gap: 10px; row-gap: 4px;}
.header-top > .center {justify-content: center; max-width: 670px; width: calc(100% - 750px); position: relative;
    max-width: calc(100% - 500px); width: 670px;
}
.header-top > .right {align-items: flex-end; flex-direction: column; padding-top: 0; margin-top: -10px;}

.header-top .ico-search-all{ width: 20px; height: 20px; background: url(../images/common/ico-search-all.png) no-repeat center center;}
.header-top .ico-search-only{ width: 20px; height: 20px; background: url(../images/common/ico-search-only.png) no-repeat center center;}
.header-top .ico-search{ width: 20px; height: 20px; background: url(../images/common/ico-search.png) no-repeat center center;}
.header-top .ico-search-best{ width: 20px; height: 20px; background: url(../images/common/ico-search-best.png) no-repeat center center;}

.header-top .top-search .search-box{--selLabelW: 92px; /*width: 670px; max-width: calc(100% - 80px);*/ width: 100%; height: 46px; background-color: #fff; padding: 4px; display: flex; border: 1px solid #ccc; border-radius: 23px;}
.header-top .top-search .search-box:hover{ border-color: #000;}
.header-top .top-search .search-box:has( .input-box .input1:focus){ border-color: var(--HK_or);}
.header-top .top-search .type-box{width: 146px; width: var(--selLabelW); height: 36px; position: relative; z-index: 1; min-width: min-content;}
.header-top .top-search .type-box::after{ width: 1px; height: 20px; background-color: #ddd; content: ''; margin: -10px 0 0 0; position: absolute; top: 50%; right: 0;}
.header-top .top-search .type-box .selectDiv-label{ width: 100%; height: 100%; padding: 0 20px 0 11px; display: flex; align-items: center;}
.header-top .top-search .type-box .selectDiv-label::after{ width: 10px; height: 10px; background: url(../images/common/ico-arrow-down.png) no-repeat center center; content: ''; margin: -5px 0 0 0; position: absolute; top: 50%; right: 8px;}
.header-top .top-search .type-box .ico{ min-width: auto;}
.header-top .top-search .type-box .selectDiv-label .ico + .txt{ margin-left: 8px;}
.header-top .top-search .type-box .selectDiv-label .txt{ font-weight: var(--fw-m); font-size: var(--fs-body); color: #333; line-height: 1;}
.header-top .top-search .type-box .type-list{ width: 142px; background-color: #fff; padding: 20px 0; border-radius: 15px; box-shadow: 1px 1px 6.2px #00000026; position: absolute; top: 100%; left: 8px;}
/*.header-top .top-search .type-box .selectDiv-list{ padding: 20px 0; flex-direction: column; border-radius: 15px; left: auto; right: -8px;}*/
.header-top .top-search .type-box .selectDiv-list .selectDiv-btn{ width: 100%; height: 40px; /*padding: 0 15px;*/ display: flex; align-items: center; cursor: pointer; position: relative;}
.header-top .top-search .type-box .selectDiv-list .selectDiv-btn:hover{ background-color: #f5f5f5;}
.header-top .top-search .type-box .selectDiv-list .ico{ width: 18px; height: 18px;}
.header-top .top-search .type-box .selectDiv-list .ico + .txt{ margin-left: 6px;}
.header-top .top-search .type-box .selectDiv-list .txt{ font-weight: var(--fw-m); font-size: var(--fs-body); color: #333; line-height: 1;}
.header-top .top-search .type-box.open .selectDiv-list{--myR: 15px; min-width: 142px; display: flex;}
.header-top .top-search .input-box{ display: flex; flex: 1; max-width: calc(100% - 146px); max-width: calc(100% - (var(--selLabelW) + 1px));}
.header-top .top-search .input-box .input1{ font-weight: var(--fw-m); font-size: var(--fs-body); color: #333; line-height: 1; padding: 0 10px; flex: 1; max-width: calc(100% - 36px);}
.header-top .top-search .input-box .btn-search{ width: 36px; min-width: 36px; height: 36px; background-color: var(--HK_or); display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.header-top .top-search .input-box .btn-search .ico{ width: 100%; height: 100%;}
.header-top .top-search .input-box .btn-search .txt{ text-indent: -9999px; display: inline-block;}

.header-top .top-search .input-box .autoComplete_wrapper:not([hidden]) {width: calc(100% - 36px); position: unset;}
.header-top .top-search .input-box .autoComplete_wrapper .input1 {width: 100%; max-width: 100%; height: 36px;}
.header-top .top-search .input-box .autoComplete_wrapper > ul {padding: 15px 20px; border-radius: 30px; box-shadow: 1px 1px 6.2px #00000026; margin-top: 5px; border-width: 0;}
.header-top .top-search .input-box .autoComplete_wrapper > ul > .no_result,
.header-top .top-search .input-box .autoComplete_wrapper > ul > li {font-weight: 400; font-size: var(--fs-body); color: #333; line-height: 1.2;  padding: 10px 10px 10px 30px; margin: 0; padding: 10px;}
.header-top .top-search .input-box .autoComplete_wrapper > ul > .no_result::before,
.header-top .top-search .input-box .autoComplete_wrapper > ul > li::before {content: ''; width: 30px; height: 20px; display: inline-block; vertical-align: middle; background: url(../images/common/ico-search-history-list.png) no-repeat left center; background-size: contain; }
.header-top .top-search .input-box .autoComplete_wrapper > ul > li > mark {color: var(--HK_or)}
.header-top .top-search .input-box .autoComplete_wrapper > ul > li:hover {background-color: #F5F5F5;}
.header-top .top-search .input-box .autoComplete_wrapper > ul > .no_result {text-align: center;}

.header-top .top-search .history-best-box{ width: 100%; background-color: #fff; padding: 47px 0 30px 0; display: none; border-radius: 30px; box-shadow: 1px 1px 6.2px #00000026; position: absolute; top: 100%; left: 0; height: 486px; max-height: calc(100vh - 120px);}
.header-top .history-best-box .btn-close{ width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; position: absolute; top: 15px; right: 30px;}
.header-top .history-best-box .btn-close:hover{ background-color: #F5F5F5;}
.header-top .history-best-box .btn-close .txt{ text-indent: -9999px; display: inline-block;}
.header-top .history-best-box .list{ display: flex; flex-direction: column;}
.header-top .history-best-box .item{ display: flex; align-items: center; justify-content: space-between;}
.header-top .history-best-box .history-box{ width: 327px; border-right: 1px solid #ccc; width: 49%;}
.header-top .history-best-box .history-box .item{ padding: 0 25px 0 30px;}
.header-top .history-best-box .history-box .item:hover{ background-color: #F5F5F5;}
.header-top .history-best-box .best-box{ display: flex; flex-direction: column; /*flex: 1;*/ width: 51%;}
.header-top .history-best-box .btn-history{min-height: 40px; background: url(../images/common/ico-search-history-list.png) no-repeat left center; padding: 5px 0 5px 30px; margin: 0 5px 0 0; display: flex; align-items: center; flex: 1;}
.header-top .history-best-box .btn-history.new{ background-image: url(../images/common/ico-search-history-list-new.png);}
.header-top .history-best-box .btn-history .txt{ font-weight: 400; font-size: var(--fs-body); color: #333; line-height: 1.2;}
.header-top .history-best-box .btn-del{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;}
.header-top .history-best-box .btn-best{min-height: 40px; padding: 5px 20px; display: flex; align-items: center;}
.header-top .history-best-box .btn-best .ico{ width: 20px; height: 20px;}
.header-top .history-best-box .btn-best .txt{ font-weight: 400; font-size: var(--fs-body); color: #333; line-height: 1.2; margin: 0 0 0 10px; flex: 1;}
.header-top .history-best-box .btn-best:hover .ico{ background-image: url(../images/common/ico-search-best-ov.png);}
.header-top .history-best-box .btn-best:hover .txt{ color: var(--HK_or);}
.header-top .history-best-box .btn-del:hover{ background-color: #ddd;}
.header-top .history-best-box .btn-del .txt{ text-indent: -9999px; display: inline-block;}

.header-top .best-box > .box-head{ padding: 0 20px; display: flex;}
.header-top .best-box > .box-head .tit{ font-weight: var(--fw-sb); font-size: var(--fs-body); color: #666; line-height: 20px;}
.header-top .best-box > .box-body{ margin: 16px 0 0 0; flex: 1;}
.header-top .best-box .item{ padding: 0;}

.header-top .history-best-box .best-box,
.header-top .history-best-box .history-box,
.header-top .history-best-box .best-box .scroll-y,
.header-top .history-best-box .history-box .scroll-y {height: 100%;}
.header-top .best-box > .box-body {flex: unset; max-height: calc(100% - 36px);}

.header-top .util-txt{ display: flex; padding: 7px 0;}
.header-top .util-txt .link{ display: inline-flex;}
.header-top .util-txt .link + .link{ margin: 0 0 0 17px; position: relative;}
.header-top .util-txt .link + .link::before{ width: 1px; height: 12px; background-color: #ccc; content: ''; margin: -6px 0 0 0; display: block; position: absolute; top: 50%; left: -9px;}
.header-top .util-txt .link + .link{ margin: 0 0 0 17px; position: relative;}
.header-top .util-txt .link[target=_blank]{ background: url(../images/common/ico-search-blank.png) no-repeat right center; padding-right: 26px;}
.header-top .util-txt .link:hover .txt{ text-decoration: underline;}
.header-top .util-txt .txt{ font-weight: var(--fw-m); font-size: var(--fs-caption); color: #333; line-height: 20px;}
.header-top .util-ico{ /*margin: 14px 0 0 0;*/ display: flex; justify-content: flex-end; align-items: flex-start; column-gap: 14px;
	display: flex; justify-content: flex-end; align-items: center; flex: 1 1 0;
}
#header .lan-box .selectDiv-label{ width: 36px; height: 36px; padding: 0;}

#header .lan-box .selectDiv-label .flag { width: 100% !important; height: 100% !important; background-color: rgba(0,0,0,.05); background-image: url(../images/common/flag-default.png);}
#header .lan-box .selectDiv-label .sel-label .txt{ text-indent: -9999px;}
#header .lan-box .selectDiv-btn{ min-height: 40px;}

#header .lan-box .selectDiv-btn.now,
#header .lan-box .selectDiv-btn:hover{ background-color: #F5F5F5;}
#header .lan-box .selectDiv-btn.now .txt,
#header .lan-box .selectDiv-btn.selected .txt { color: var(--HK_or);}
/*#header .lan-box .selectDiv-btn:hover .txt{ color: var(--HK_or);}*/

#header .open-myInfo .user-box .flag,
#header .lan-box .selectDiv-btn .flag{ width: 28px; min-width: 28px; height: 28px; padding: 0;}
#header .lan-box .selectDiv-btn .txt{ font-weight: var(--fw-m); font-size: var(--fs-caption); color: #333333; line-height: 1.2; margin: 0 0 0 10px;}
#header .open-myInfo .user-box .flag {display: inline-block; vertical-align: middle; width: 30px; min-width: 30px; height: 30px;}

#header .lan-box .selectDiv-list .list-tit {color: #32343A; font-size: var(--fs-h4); font-weight: var(--fw-sb); line-height: 28px; letter-spacing: -0.09px; padding-bottom: 15px;}
#header .lan-box .selectDiv-item.only-txt{ min-height: 40px; padding: 5px 20px; display: flex; align-items: center; padding: 11px 20px 4px 20px; min-height: 20px; height: auto;}
#header .lan-box .selectDiv-item.only-txt p{ font-weight: 400; font-size: var(--fs-caption); color: #A2A2A2; line-height: 1.2;}

#header .lan-box .selectDiv-list .list:not(.type-fix) .selectDiv-item.item {border-top: 1px solid rgba(0, 0, 0, 0.04); border-top-color: #ededed;}

#header .lan-box .sel-label{ width: 100%; height: 100%; border-radius: 50%;}
#header .open-myInfo .user-box .flag,
#header .lan-box .sel-label .flag{ background-size: auto 100%; background-position: center center; background-repeat: no-repeat; border-radius: 50%; border: 1px solid #ccc;}

#header .lan-box .selectDiv-label .sel-label:has( .flag-txt) {justify-content: center;}
#header .lan-box .selectDiv-list .flag-txt {width: 28px; height: 28px;}

/*.header-top .util-ico .lan-box .selectDiv-list{ max-height: none; width: 210px; height: auto; padding: 20px 0 15px 0; flex-direction: column; top: 42px; left: auto; right: -25px;}*/
.header-top .util-ico .lan-box .selectDiv-list > .scroll-y{ /*height: 355px;*/ overflow-y: auto;}
.header-top .util-ico .lan-box .selectDiv-item.only-txt{ min-height: 40px; padding: 5px 20px; display: flex; align-items: center;}
.header-top .util-ico .lan-box .selectDiv-item.only-txt p{ font-weight: 400; font-size: var(--fs-caption); color: #A2A2A2; line-height: 1.2;}
.header-top .util-ico .lan-box .sel-label{ width: 100%; height: 36px; border-radius: 50%;}
.header-top .util-ico .lan-box .sel-label .flag{ background-size: auto 100%; border-radius: 50%; border: 1px solid #ccc;}
.header-top .util-ico .btn-ix{ width: 36px; height: 36px; /*margin: 0 0 0 14px;*/ border: 1px solid #ccc; border-radius: 50%;}
/*.header-top .util-ico .btn-ix + .btn-ix{ margin-left: 10px;}*/
.header-top .util-ico .btn-ix .txt {display: none;}
.header-top .util-ico .form-selectDiv .selectDiv-label:hover .btn-ix,
.header-top .util-ico .btn-ix:hover {background-color: #f5f5f5;}
.header-top .util-ico .form-selectDiv.open .selectDiv-label .btn-ix,
.header-top .util-ico .btn-ix.on {background-color: var(--HK_or) !important; border-color: var(--HK_or) !important;}
.header-top .util-ico .form-selectDiv.open .selectDiv-label .btn-ix .ico::before,
.header-top .util-ico .btn-ix.on .ico::before {--svg-color: var(--filterColor-fff) !important;}
.header-top .util-ico .form-selectDiv.open .selectDiv-label .btn-ix .ico::after,
.header-top .util-ico .btn-ix.on .ico::after {background-color: #fff !important;}
.util-box, .util-box > *,
.header-top .util-ico > .user-box,
.header-top .util-ico > .user-box > * {vertical-align: top;}
.util-box .selectDiv-list,
.header-top .util-ico .user-box .selectDiv-list {padding-bottom: 20px; /*left: auto; right: 0;*/}
.util-box .selectDiv-list .list,
.header-top .util-ico .user-box .selectDiv-list .list {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 6px;}
.util-box .selectDiv-list .list {row-gap: 4px;}
.util-box .selectDiv-list .list:has( .img-temp-box) {row-gap: 10px;}
.util-box .selectDiv-list .list .sel-label,
.header-top .util-ico .user-box .selectDiv-list .list .sel-label {column-gap: 10px;}

.util-box .util-info,
.util-box .scrollbox,
.header-top .util-ico .user-box .info,
.header-top .util-ico .user-box .list {width: 100%;}
.util-box .list .txt,
.header-top .util-ico .user-box .list .txt {color: #333; font-weight: var(--fw-m);}
.header-top .util-ico .user-box .list .ico::before {--svg-color: var(--filterColor-333); background-size: 64% auto;}
.header-top .util-ico .user-box .list .ico-local + .txt {color: #0077FF;}
.header-top .util-ico .user-box .list .ico.ico-local::before {--svg-color: var(--filterColor-0077FF);}
.util-box .util-info,
.util-box .scrollbox,
.header-top .util-ico .user-box .info {padding: 0px 20px 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 5px; min-height: 65px;}
.util-box .util-info .util-tit,
.header-top .util-ico .user-box .info .name {font-size: var(--fs-h5); font-weight: bold;}

.header-top .link.blank .ico {min-width: 12px; width: 12px; height: 12px;}

[data-mini-id].util-box > .miniPop {height: 100%;}
.util-box .util-info {min-height: unset; padding-bottom: 16px;}
.util-box .util-info .util-tit {font-weight: 600;}
.util-box .util-info .util-txt {color: #666; gap: 3px;}
[data-mini-id].util-box,
.util-box.form-selectDiv.open .selectDiv-list {min-width: 400px; height: 480px; max-height: calc(100vh - 40px);}
[data-mini-id].util-box .inner-size1,
.util-box.form-selectDiv.open .selectDiv-list .inner-size1 {width: 100%; max-width: calc(100vw - (var(--pdLR) * 2)); height: calc(100% - 10px);}
.util-box .grid-col-auto {gap: 20px;}
.util-box .grid-col-auto.inner-size1 {grid-auto-rows: 0.82fr 1.18fr;}
.util-box .grid-col-auto.inner-size1:has( .inner-box:first-child:last-child) {grid-auto-rows: 1fr;}
.util-box .grid-col-auto .inner-box:not(:first-child) .util-info {padding-top: 16px;}
.util-box .scrollbox {flex: 1 1 0; padding-left: 0; padding-right: 0;}
.util-box .list {row-gap: 14px; width: 100%;}
.util-box .list .item,
.util-box .list .item-link {width: 100%; text-align: left;}
.util-box .list .item-link:has( .img-temp-box) {display: flex; justify-content: flex-start; align-items: center; gap: 10px;}
.util-box .accItem-btn,
.util-box .list .item-link span {font-size: 12px; line-height: 1; color: #333; font-weight: 500;}
.util-box .list .item-link span.tip {color: #666; font-weight: 400;}
.util-box .accItem-btn.on {font-weight: 600;}
.util-box .accItem-btn:not(.on) {font-weight: 400;}
.util-box .accItem-body .list .item-link span {font-weight: 400;}
.util-box .list .item-link span:not([class*="img"]) { width: auto; max-width: 100%; margin-right: 10px;}
.util-box .list .item-link .txt.tip {font-weight: 400;}
.util-box .list .item-link span:last-child {margin-right: 0;}
.util-box .list .item-link.type1 span {text-decoration: underline;}
.util-box .list .item-link span[class*="img"] {padding: 0;}
.util-box .acc-area .list {row-gap: 2px;}
.util-box .scrollbox > .list > .item .item-link,
.util-box .scrollbox .acc-style1 .acc-item {padding: 4px 20px;}
.util-box .scrollbox .acc-style1 .acc-item .accItem-btn[data-ref]:not(.type-r) {padding-right: 0;}
.util-box .scrollbox .acc-style1 .acc-item .accItem-btn[data-ref].type-r {padding-left: 0;}
.util-box .scrollbox .acc-style1 .acc-item .accItem-body {padding-bottom: 6px;}
.util-box .scrollbox .acc-style1 .acc-list {gap: 0;}

/*#header .util-ico .form-selectDiv.open .selectDiv-list {left: auto; right: 0;}*/

#header:has( .form-selectDiv.open, [data-mini-id].open) {z-index: 4;}

.btn-headOpen .txt,
.btn-headClose .txt {opacity: 0; text-indent: -999px; width: 0; height: 0; overflow: hidden;}

.btn-headOpen .ico,
.btn-headClose .ico {width: 100%; height: 100%;}

.btn-headOpen {width: 36px; min-width: 36px; height: 36px; border-radius: 4px; overflow: hidden;}
.btn-headOpen .ico::before {background-size: 100% auto;}

.btn-headClose {width: 42px; min-width: 42px; height: 42px; border-radius: 4px; overflow: hidden;}

.btn-headClose:hover,
.btn-headOpen:hover {background-color: rgba(0, 0, 0, 0.05);}

#header:has( .header-openbox.open) {z-index: 4;}

/* 컨테이너: 왼쪽 밖에서 슬라이드 인 */
.header-openbox {position: fixed; top: 0; left: -200vw !important; width: 100vw; height: 100vh; display: flex; flex-direction: row; background: transparent; transition: left .2s ease; z-index: 10;}
.header-openbox.open {left: 0 !important;}
.header-openbox .headerOpen-inner { width: 480px; max-width: calc(100% - 10px); height: 100%; background-color: #fff; box-shadow: 2px 0 10px rgba(0,0,0,.12); padding: 40px 30px; padding: var(--pdLR) calc(var(--pdLR) - (var(--pdLR) / 4));
    display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: stretch;
}

.header-openbox .headerOpen-backdrop {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition:
            opacity 0s,
            visibility 0s;
}

.header-openbox.open .headerOpen-backdrop {
    opacity: 1;
    visibility: visible;
    transition:
            opacity 0.3s ease 0.2s,
            visibility 0s linear 0s;
}

.header-openbox .open-head {display: flex; justify-content: space-between; align-items: center; margin-top: -13px; padding: 0 10px 26px;}
.header-openbox .open-head .btn-headClose {margin-right: -10px;}
.header-openbox .open-body {flex: 1;}
.header-openbox .gnblistbox,
.header-openbox .gnblistbox .gnb-list,
.header-openbox .gnblistbox .gnb-list li {display: flex; flex-direction: column;justify-content: flex-start; align-items: center; width: 100%; cursor: pointer;}
.header-openbox .gnblistbox .btn {width: 100%; min-height: 40px; display: flex; justify-content: flex-start; align-items: center; padding: 8px 10px; color: #666; font-size: var(--fs-h5); font-weight: var(--fw-m); line-height: 19px; overflow: hidden;}
.header-openbox .gnblistbox .btn:hover {/*background-color: rgba(0, 0, 0, 0.05);*/ position: relative; gap: 10px;}
.header-openbox .gnblistbox .btn::before {--myISize: 19px; --svg-color: var(--filterColor-EC6608);}
.header-openbox .gnblistbox .btn:hover::before {content: ''; display: block; }

.header-openbox .gnblistbox > .gnb-list {row-gap: 10px; row-gap: 2px;}
.header-openbox .gnblistbox > .gnb-list > li {row-gap: 10px;}
.header-openbox .gnblistbox > .gnb-list > li > .btn {color: #333; font-size: var(--fs-h3); font-weight: var(--fw-sb); line-height: 24px;}
.header-openbox .gnblistbox > .gnb-list > li > .gnb-list > li > .btn {padding: 3px 30px;}

.header-openbox .gnblistbox > .gnb-list > li > .btn {position: relative;}
.header-openbox .gnblistbox > .gnb-list > li > .btn::after {content: ''; display: inline-block; width: 24px; height: 24px;
	--svg-color: var(--filterColor-333);  background-size: 50% auto;
	position: absolute; right: 0; top: 9px;
	transition: transform .2s;
}
.header-openbox .gnblistbox li:has(> .gnb-list) > .btn {padding-right: 34px;}
.header-openbox .gnblistbox li:has(> .gnb-list) > .btn::after {transform: rotate(90deg);}
.header-openbox .gnblistbox li:has(> .gnb-list) > .btn.on::after {transform: rotate(-90deg);}
.header-openbox .gnblistbox li > .btn[target="_blank"] {padding-right: 34px;}
.header-openbox .gnblistbox li > .btn[target="_blank"]::after {transform: rotate(-45deg);}

.header-openbox .gnblistbox .gnb-list .gnb-list {display: none; row-gap: 3px;}
.header-openbox .gnblistbox .gnb-list .btn.on + .gnb-list {display: flex;}

html:has( .header-openbox.open) {overflow: hidden;}

/*content*/
/*#contents {width: 100%; min-width: 260px; flex: 1 1 0; width: 100%;}
#contents .content-section {min-height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}
#contents .content-section:not(:has( div[class^="page-"].type-fullX, div[class^="page-"].main-body)) {max-width: 1600px; max-width: 1440px; max-width: 1520px; margin-left: auto; margin-right: auto;}
#contents .content-section:has( > div[class^="page-"].type-fullX),
#contents .content-section:has( > div[class^="page-"].main-body) {width: 100%;}
#contents .content-section > div[class^="page-"]:not(.page-tab, .type-hasLnb, .main-body) {padding-left: var(--pdLR); padding-right: var(--pdLR);}*/
#contents {width: 100%; min-width: 260px; flex: 1 1 0; width: 100%; padding-top: var(--headerH, 80px);}

#contents #contents {padding-top: 0;}

html:has( .btn-topmove.show) #contents:not(:has( .page-body.type-hasLnb)),
html:has( .btn-topmove.show) #contents:has( .page-body.type-hasLnb) .area-content {padding-bottom: calc(var(--topBtSize) + 40px);}
html:has( .fixed-right) #contents:not(:has( .page-body.type-hasLnb)),
html:has( .fixed-right):has( .btn-topmove.show) #contents:not(:has( .page-body.type-hasLnb)),
html:has( .fixed-right) #contents:has( .page-body.type-hasLnb) .area-content,
html:has( .fixed-right):has( .btn-topmove.show) #contents:has( .page-body.type-hasLnb) .area-content {padding-bottom: calc(var(--fixRSize) + 40px);}

#contents .content-section {min-height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}


/*footer*/
#footer{ border-top: 1px solid #ddd;}
#footer .inner{ padding: 18px var(--pdLR) 30px var(--pdLR); display: flex; flex-direction: column;}
#footer .util-btn{ width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
#footer .util-btn .list{ display: flex;}
#footer .util-btn .item{ margin-right: 17px; position: relative;}
#footer .util-btn .item::after{ width: 1px; height: 8px; background-color: #ccc; content: ''; margin: -4px 0 0 0; position: absolute; top: 50%; right: -9px;}
#footer .util-btn .item:last-child{ margin-right: 0;}
#footer .util-btn .item:last-child::after{ display: none;}
#footer .util-btn .link{ height: 100%; display: flex; align-items: center; justify-content: center;}
#footer .util-btn .link:hover .txt{ text-decoration: underline;}

/*#header .util-ico .ico:not([class*="ico-bi-"])::before,
#header .util-btn .ico:not([class*="ico-bi-"])::before {background-size: 96% auto;}*/

#footer .util-btn .ico + .txt{ margin-left: 5px;}
#footer .util-btn .txt{ font-weight: var(--fw-sb); font-size: var(--fs-caption); color: #666; line-height: 1;}
#footer .copy{ font-weight: 400; font-size: var(--fs-caption); color: #333; line-height: 17px; margin: 10px 0 0 0;}

#deviceCk > .device {opacity: 0; width: 0; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; z-index: -1; display: none;}


/*body 풀페이지 bg*/
html:has( .page-body.type-fullX > .typeList-area), html:has( .page-body.type-fullX > .typeList-area) body {background-color: #f9f9fa !important;}
html:has( .page-body.type-fullX > .typeList-area) body #header,
html:has( .page-body.type-fullX > .typeList-area) body #contents .page-head {background-color: #fff;}
html:has( .page-body.type-fullX > .typeList-area) body #contents .page-head {max-width: unset;}

/*main body bg*/
html:has( .page-body.main-body), html:has( .page-body.main-body) body {background-color: #f5f5f5;}
html:has( .page-body.main-body) body #header {background-color: #fff;}


/**************************************************login**************************************************/
#wrap.wrap-login .rc-box {column-gap: 14px; margin: 0 2px;}
#wrap.wrap-login .rc-box .label {font-weight: var(--fw-sb);}
#wrap.wrap-login .login-form .form-input,
#wrap.wrap-login .login-form .form-select,
#wrap.wrap-login .btn-ix {--mySize: 60px; border-radius: 30px;}
#wrap.wrap-login .login-form .form-input,
#wrap.wrap-login .login-form .form-select { padding-left: 20px;}
#wrap.wrap-login .help-text .text {color: #666; font-size: 12px; font-weight: 500; line-height: 16px; padding-left: 18px; position: relative;}
#wrap.wrap-login .help-text .text::before {content: '•'; display: block; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; width: 18px; text-align: center; position: absolute; top: 0; left: 0;}
#wrap.wrap-login .help-text > .text + .text {margin-top: 5px}
#wrap.wrap-login .help-text .text a,
#wrap.wrap-login .help-text .text .txt-point {color: #EC6608;}
#wrap.wrap-login .help-text .text a {word-break: break-all;}
#wrap.wrap-login .form-dlbox {display: flex; justify-content: flex-start; align-items: center; gap: 4px;}
#wrap.wrap-login .form-dlbox.flex-col {align-items: flex-start; justify-content: center;}
#wrap.wrap-login .form-dlbox.flex-col > .dt,
#wrap.wrap-login .form-dlbox.flex-col > .dd {width: 100%;}

#wrap.wrap-login .btn-ix .txt {font-size: var(--fs-body);}

#wrap.wrap-login .header {display: flex; justify-content: center; align-items: center; padding: 30px  var(--pdLR); position: unset; min-height: unset;}
#wrap.wrap-login .header .logo {width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 var(--pdLR);}
#wrap.wrap-login .header .logo img {max-width: 100%;}
#wrap.wrap-login .header .logo-text {display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100%;}
#wrap.wrap-login .header .logo-text .ico-logo {width: 10.2294rem; height: 2.1375rem; aspect-ratio: 163.67/34.20; margin-top: 0.25rem;}
#wrap.wrap-login .header .logo-text .text {color: var(--Gray_333); font-size: 1.5rem; font-weight: var(--fw-sb); line-height: 1.75rem; margin-left: 0.9375rem; padding-left: 1.5rem; position: relative;}
#wrap.wrap-login .header .logo-text .text span {font-weight: var(--fw-m);}
#wrap.wrap-login .header .logo-text .text::before {content: ''; width: 1px; height: 1.4286rem; background-color: #EC6608; position: absolute; left: 0; top: 0.25rem;}
#wrap.wrap-login .contents-login {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; flex: 1;}
#wrap.wrap-login .contents-login .visual {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/login/bg-login.jpg) center center no-repeat; background-size: cover;}

#wrap.wrap-login .contents-login .login-wrap {width: 440px; max-width: calc(100% - (var(--pdLR) * 2)); height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border-radius: 16px; padding:20px 40px 30px; position: relative; z-index: 1; transition: all .2s;}
#wrap.wrap-login .contents-login .login-wrap .info-bx,
#wrap.wrap-login .contents-login .login-wrap .login-form {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; gap: 20px;}
#wrap.wrap-login .contents-login .login-wrap .info-bx > *,
#wrap.wrap-login .contents-login .login-wrap .login-form > * {width: 100%;}

#wrap.wrap-login .form-box,
#wrap.wrap-login .contents-login .login-wrap .info-bx > div {display: flex; justify-content: flex-start; align-items: center;}
#wrap.wrap-login .form-box.between,
#wrap.wrap-login .contents-login .login-wrap .info-bx > div.between {justify-content: space-between;}
#wrap.wrap-login .form-box.ta-l,
#wrap.wrap-login .contents-login .login-wrap .info-bx > div.ta-l {justify-content: flex-start;}
#wrap.wrap-login .form-box.ta-r,
#wrap.wrap-login .contents-login .login-wrap .info-bx > div.ta-r {justify-content: flex-end;}
#wrap.wrap-login .form-box {gap: 4px;}

#wrap.wrap-login .form-box:has( .form-select[class*="styleT"]) {padding-left: 20px; padding-right: 20px;}
#wrap.wrap-login .form-box:has( .form-select[class*="styleT"]) + .login-form {margin-top: -7px;}

#wrap.wrap-login .contents-login .login-wrap .info-bx .textbox {min-height: 70px; margin-bottom: 3px; justify-content: center;}
#wrap.wrap-login .contents-login .login-wrap .info-bx .textbox .tit {font-size: var(--fs-h2); line-height: 30px; font-weight: bold; color: #333;}
#wrap.wrap-login .contents-login .login-wrap .info-bx > .formbox {margin-top: 15px; margin-bottom: 3px;}

#wrap.wrap-login .select2-container .select2-selection--single .select2-selection__rendered {padding-left: 10px; padding-right: 40px;}


/*cookie*/
.cookies-wrap {display: flex; justify-content: flex-start; align-items: center; background: rgba(51, 51, 51, 1); color: rgba(255, 255, 255, 1); padding: 10px var(--pdLR);}
.cookies-inner {display: flex; justify-content: flex-start; align-items: center; gap: 26px; row-gap: 13px;}
.cookies-inner .txt-point {text-decoration: underline; font-weight: var(--fw-m);}
.cookies-inner .btn-ix {background-color: transparent !important;}
.cookies-inner .btn-ix .txt {color: #fff !important;}

.cookies-wrap + #wrap {height: calc(100% - var(--cookiesH)); min-height: calc(100% - var(--cookiesH));}

/*********************************************layout media*********************************************/
.mode-mo {display: none !important;}
.mode-tablet {display: none !important;}


/*@media (min-width: 1441px) {
	.btn-topmove.show {right: 50%; margin-right: calc(-1 * (var(--maxW) / 2 - var(--pdLR)));}
}*/
@media (max-width: 1440px) {
	.btn-topmove.show {right: var(--pdLR); margin-right: 0;}
}

@media (max-width: 1439px) {
	.header-top .util-ico {column-gap: 8px;}
}

/*@media (max-width: 1200px) and (min-width: 768px) {
    .header-top > .left {padding-top: 20px;}
    #header .logo {display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px;}
    #header .logo .txt {font-size: 14px; margin-left: 0; margin-right: 0; padding-left: 0;}
    #header .logo .txt::before {content: none;}
    .header-top > .center {width: calc(100% - 440px); max-width: 580px;}
}*/

/*pc*/
@media (min-width: 1024px) {
	#deviceCk .device{ display: none;}
	#deviceCk .pc{ display: block;}
}

/*모바일 ~ 태블릿*/
@media (max-width: 1023.98px) {
	:root {
		--pdLR: 24px; --fixRSize: 52px; --topBtSize: 44px;
	}

	html {font-size: 15px;}

	.btn-topmove.show {margin-bottom: 5px;}
	html:has( .fixed-right) .btn-topmove.show {margin-bottom: 0;}

	.mode-pc {display: none !important;}

	/*.btn-topmove.show {bottom: calc(var(--footerH, 99px) + 10px);}*/
	/*html:has( .fixed-right):has( .main-body) .btn-topmove.show {right: calc(100% - (var(--pdLR) + 54px));}*/

	/*.header-top {min-height: var(--headerTopH);}*/
	.header-top {padding-top: 12px; padding-bottom: 12px;}

	#wrap.wrap-login .contents-login .login-wrap {width: 480px;}
}

/*태블릿*/
@media (min-width: 768px) and (max-width: 1023.98px) {
	#deviceCk .device{ display: none;}
	#deviceCk .tablet{ display: block;}

	.mode-tablet {display: flex !important;}

	.header-top .top-search:has( .history-best-box[style*="display"][style*="flex"], .autoComplete_wrapper[aria-expanded="true"]) {position: unset;}
	.header-top .top-search:has( .autoComplete_wrapper[aria-expanded="true"]) .input-box .autoComplete_wrapper > ul,
	.header-top .top-search:has( .history-best-box[style*="display"][style*="flex"]) .history-best-box {left: var(--pdLR); right: var(--pdLR); width: auto;}
}

/*모바일*/
@media (max-width: 767.98px) {
	:root {
		--pdLR: 20px;
	}

	html {font-size: 14px;}

	#deviceCk .device{ display: none;}
	#deviceCk .mo{ display: block;}

	.mode-pc-tablet {display: none !important;}

	.mode-mo:not(.btn-ix.back, .file-type) {display: flex !important;}
	.form-selectDiv.mode-mo {display: inline-flex !important;}
	.mode-mo.file-type {display: inline-block !important;}

	.mode-mo-icon.btn-ix > .txt,
	.mode-mo-icon > .btn-ix > .txt {display: none !important;}

	.mode-mo-icon.btn-ix[class*="type"]:has( > .txt) {padding-left: 5px; padding-right: 5px;}

	.mo-date {font-size: 11px !important;}

	html:has( #header .form-selectDiv.open) #contents {z-index: 0 ;}

	#footer .inner {padding-top: 14px;}

	#header .logo {width: 110px; width: auto;}
	#header .logo .ico.ico-logo {width: 110px;}
    #header .logo .txt {font-size: 14px;}

	#header .ico-close::before {background-size: 30% auto;}

	#header .header-top {flex-direction: column; gap: 5px; padding-top: 8px; padding-bottom: 8px;}
	.header-top > .left, .header-top > .center, .header-top > .right {padding-top: 0;}
	.header-top > .right {position: absolute; top: 16px; width: auto; right: var(--pdLR);}
	.header-top > .center {width: 100%; max-width: unset;}

	/*#header .header-top > .center.searchFocus / #header .header-top > .center.searchFocus::before*/
	#header .header-top > .center:has( .history-best-box[style*="display"][style*="flex"]) {position: fixed; top: 7px; z-index: 2; width: calc(100% - (var(--pdLR) * 2)); padding-left: 30px;}
	#header .header-top > .center:has( .history-best-box[style*="display"][style*="flex"])::before {content: ''; display: block; z-index: 1; background-color: #fff; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
	body:has( #header .header-top > .center .history-best-box[style*="display"][style*="flex"]) {overflow: hidden;}

	.header-top .util-ico {column-gap: 4px;}

	.header-top .top-search .search-box {width: 100%; position: relative; z-index: 1;}
	.header-top .top-search.searchFocus .search-box {width: calc(100% - 34px);}
	.header-top .top-search .history-best-box {flex-direction: column; padding: 4px 10px; box-shadow: none; border-radius: 0;
        height: auto; max-height: unset; overflow: hidden; position: fixed; top: 54px; bottom: 0; z-index: 2;}
	.header-top .history-best-box .btn-close {right: auto; left: 8px; top: 14px; position: fixed;}
	.header-top .ico-search-close::before {--svg-color: var(--filterColor-333); transform: rotate(180deg); background-size: 80% auto;}
	.header-top .history-best-box .history-box,
	.header-top .history-best-box .best-box {flex: unset; width: 100%; height: 50%; padding-bottom: 20px;}
	.header-top .history-best-box .history-box {border: 0;}
	.header-top .history-best-box .history-box + .best-box {border-top: 1px solid #ccc; padding-top: 20px;}
	.header-top .best-box > .box-head,
	.header-top .history-best-box .btn-best,
	.header-top .history-best-box .history-box .item {padding-left: 10px;padding-right: 10px;}
	.header-top .history-best-box .btn-del {margin-right: -6px;}
    .header-top .top-search .search-box {--selLabelW: 54px;}
	.header-top .top-search .type-box .selectDiv-label .ico + .txt {display: none;}
	.header-top .best-box > .box-head .tit {color: var(--HK_or)}

	.header-top .top-search .search-box:has( .type-box.open) {z-index: 10;}

	.header-top .top-search .input-box .autoComplete_wrapper > ul {box-shadow: none; border-radius: 0; position: fixed; top: 50px; padding: 10px 10px; bottom: 10px;
        top: 95px; border-top: 1px solid #ddd; box-shadow: 0 4px 18px #00000026; height: 50vh;
    }

	/*.header-top .top-search .type-box.open .selectDiv-list {width: 100%;}
	#header .util-ico .form-selectDiv.open .selectDiv-list,
	.header-top .top-search .type-box .selectDiv-list,
	.header-top .util-ico .user-box .selectDiv-list, #header .lan-box .selectDiv-list {left: 0; right: 0; top: auto; border-radius: 15px 15px 0 0}*/

	.header-openbox .headerOpen-inner {padding: 0;}
	.header-openbox .headerOpen-inner > [class*="open-"]:not(.open-body) {padding: 15px 20px;}
	.header-openbox .headerOpen-inner > [class*="open-"]:not(:last-child) {border-bottom: 1px solid var(--Form_border2);}

	.header-openbox .headerOpen-inner > [class*="open-"].open-head {margin-top: 0; padding-bottom: 0; /*height: var(--headerTopH, 70px);*/ align-items: flex-start;}
	.header-openbox .headerOpen-inner > [class*="open-"].open-head .btn-headClose {margin-top: -10px;}

	.header-openbox .open-foot > ul > li > .btn-ix,
	.header-openbox .open-foot > ul > li > .form-selectDiv,
	.header-openbox .open-foot .lan-box .selectDiv-label,
	#header .header-openbox .open-foot .lan-box .selectDiv-label {width: 100%;}
	#header .header-openbox .open-foot .lan-box .selectDiv-label .txt {text-indent: 0px;}
	.header-openbox .open-foot > ul > li > .btn-ix,
	.header-openbox .open-foot > ul > li > .form-selectDiv > .selectDiv-label > .sel-label {display: flex; justify-content: flex-start; align-items: center; column-gap: 10px; padding-left: 0; padding-right: 0;}
	.header-openbox .open-foot > ul > li > .btn-ix .txt,
	.header-openbox .open-foot .lan-box .selectDiv-label .txt {color: #0077FF; font-weight: var(--fw-m);}
	.header-openbox .open-foot > ul > li > .btn-ix .ico::before,
	.header-openbox .open-foot .lan-box .selectDiv-label .ico::before {--svg-color: var(--filterColor-0077FF);}

	/*#header .lan-box.form-selectDiv.open .selectDiv-list .selectDiv-btn {padding-left: 0; padding-right: 0;}*/


	.header-openbox .headerOpen-inner > [class*="open-"].open-langResult {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;min-height: 40px; row-gap: 4px; padding-top: 8px; padding-bottom: 8px;}
	.header-openbox .open-langResult > .txt {position: relative; padding-right: 24px;}
	.header-openbox .open-langResult > .txt:after {content: ''; display: block; width: 1px; height: 12px; background-color: var(--Form_border2); position: absolute; right: 12px; top: 50%; margin-top: -6px;}
	.header-openbox .open-langResult > .txt:last-child {padding-right: 0;}
	.header-openbox .open-langResult > .txt:last-child:after {content: none;}

	.header-openbox .gnblistbox > .gnb-list {padding-top: 10px; padding-bottom: 10px;}
	.header-openbox .gnblistbox > .gnb-list > li > .btn {padding-left: 20px;}
	.header-openbox .gnblistbox > .gnb-list > li > .btn::after {right: 15px;}
	.header-openbox .gnblistbox > .gnb-list > li > .gnb-list > li > .btn {padding-left: 40px;}

	.header-openbox .headerOpen-inner > [class*="open-"].open-myInfo {display: flex; justify-content: space-between; align-items: center; min-height: 66px;}
	.header-openbox .open-myInfo .user-box {display: flex; justify-content: space-between; align-items: center; gap: 15px;}
	.header-openbox .open-myInfo .user-box .name,
	.header-openbox .open-myInfo .user-box .id {font-size: var(--fs-body); line-height: 18px; color: #333; font-weight: 400;}
	.header-openbox .open-myInfo .user-box .id {font-size: var(--fs-caption);}
	.header-openbox .open-myInfo .btn-ix {width: 34px; height: 34px; min-width: 34px;}
	.header-openbox .open-myInfo .btn-ix:has( > .txt) {padding: 0;}
	.header-openbox .open-myInfo .btn-ix .ico-logout + .txt {display: none;}
	.header-openbox .open-myInfo .ico::before {--svg-color: var(--filterColor-1C1B1F);}
	.header-openbox .open-myInfo .right > .btn-ix:last-child {margin-right: -10px;}

	#header .header-openbox .open-linkbox .ico.ico-like::before {background-size: 90% auto;}
	.header-openbox .headerOpen-inner > [class*="open-"].open-linkbox {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 86px; row-gap: 14px; padding-top: 12px; padding-bottom: 12px;}
	.header-openbox .open-linkbox .btn-ix {width: 100%; justify-content: flex-start; padding: 0; gap: 10px;}
	.header-openbox .open-linkbox .ico.ico-mypage::before {margin-left: 1px;}

	#footer .util-btn {flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; row-gap: 30px;}

	/*login*/
	#wrap.wrap-login .login-form .form-input, #wrap.wrap-login .login-form .form-select, #wrap.wrap-login .btn-ix {--mySize: 40px;}
	#wrap.wrap-login .contents-login .login-wrap .info-bx, #wrap.wrap-login .contents-login .login-wrap .login-form {gap: 12px;}
	#wrap.wrap-login .header {padding-top: 13px; padding-bottom: 4px;}
	#wrap.wrap-login .header .logo-text .ico-logo {width: 104px; margin-top: 0;}
	#wrap.wrap-login .header .logo-text .text {font-size: 1.0rem; line-height: 1.3rem; margin-top: 1px;}
	#wrap.wrap-login .header .logo-text .text::before {height: 1rem; top: 0;}
	#wrap.wrap-login .contents-login {padding: 0;}
	#wrap.wrap-login .contents-login .visual {display: none;}
	#wrap.wrap-login .contents-login .login-wrap {width: 100%; max-width: unset; padding: var(--pdLR);}
}
@media (max-width: 480px) {
	.header-openbox .headerOpen-inner {width: 100%; max-width: 100%;}
	.header-openbox .headerOpen-backdrop {display: none;}

	/*.btn-topmove.show:not([style*="bottom"]) {bottom: 138px;}*/
}
@media (max-width: 420px) {
	#wrap.wrap-login .contents-login .login-wrap {padding: var(--pdLR);}
	#wrap.wrap-login .form-box:has( .form-select[class*="styleT"]) {padding: 0;}
	#wrap.wrap-login .form-select[class*="styleT"] {height: 34px; line-height: 33px; padding-top: 0; padding-bottom: 0;}
}

@media (max-width: 399.98px) {
    #header .logo .txt {font-size: 13px;}
}
@media (max-width: 319.98px) {
	:root {
		--pdLR: 10px;
	}
	a, button {word-break: break-all;}
	#wrap.wrap-login .contents-login .login-wrap {max-width: 100%;}

	#wrap.wrap-login .header .logo-text {flex-direction: column; align-items: center;}
	#wrap.wrap-login .header .logo-text .text {margin-left: 0; padding-left: 0;}
	#wrap.wrap-login .header .logo-text .text::before {content: none;}
}
@media (max-width: 290px) {
	#header .header-top {padding: 8px;}
	.header-top > .right {right: 8px;}
}

/*region 테스트후 삭제
html {min-width: 1728; overflow: auto;}
#contents {min-width: 1728px;}*/