@charset "utf-8";
/* CSS Document */
@-ms-viewport{width:device-width}
html{overflow-x:hidden}
ul, ol{margin-bottom:0;}
li{margin:0;}
table{ border-collapse:collapse; border-spacing:0}

.doc{font-size: 16px;}
.box1{ width:1300px; /*max-width: 96%;*/ margin:0 auto; position:relative } 
.mo_box1{max-width:96%; margin:0 auto; position: relative;}

:root{
    color-scheme: light;
    --box1:1300px;
    --font: 'Pretendard';
    --font2: 'Isamanru';
    --all_menu:90px;
    --header_H:75px;
    --bor_r:3px;
    --mainColor:#333;
    --info_bg: #f0f6ff;
    --info_co: #3664a9;
}


/*flex*/
.flex{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display:flex}
.flex.fw{ -webkit-box-lines: multiple; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap:wrap}
.flex.col{ -webkit-box-orient: vertical; -moz-flex-direction: column; -ms-flex-direction: column;flex-direction:column}
.flex.space{ -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between}
.flex.hc{-webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content:center}
.flex.hr{ -webkit-box-pack: end; -moz-box-justify-content: flex-end; -ms-flex-pack: end; justify-content:flex-end}
.flex.vt{ -webkit-box-align: start; -moz-align-items: flex-start; -ms-flex-align: start; align-content:flex-start; align-items:flex-start}
.flex.vc{ -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-content:center; align-items:center}
.flex.vb{ -webkit-box-align: end; -moz-align-items: flex-end; -ms-flex-align: end; align-content:flex-end; align-items:flex-end}
.flex.rev{ -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.flex.cev{ -webkit-box-orient: vertical; -webkit-box-direction: reverse; -moz-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}
.flex .mgL{ margin-left:auto}
.flex .mgR{ margin-right:auto}
.flex .mgT{ margin-top:auto}

.va_wrap{ display:block; text-align:center; white-space: nowrap}
.va_wrap:before{ content:""; display:inline-block; vertical-align:middle; width:0; height:100%}
.va{display:inline-block; vertical-align:middle; max-width:100%; height:auto; white-space:normal}
.va_wrap img{vertical-align:middle; display:inline-block; max-width:100%; max-height:100%}

.ac{text-align:center!important;}
.ar{text-align:right!important;}
.al{text-align:left!important;}

.fwB{font-weight: 700;}
.fwM{font-weight: 500;}
.fwL{font-weight: 300;}

/*float:left*/
.fl_wrap > *{ float:left}
.fl_wrap::after{ content:""; display:block; clear:both}
.fl{ float:left !important;}
.fr{ float:right !important;}
.cl{ clear:both !important; display:block}

.bgfix{background-position: center; background-repeat: no-repeat; background-size: cover;}

/*margin*/
.mt0{ margin-top:0 !important;}
.mt3{ margin-top:3px !important;}
.mt5{ margin-top:5px !important;}
.mt7{ margin-top:7px !important;}
.mt10{ margin-top:10px !important;}
.mt15{ margin-top:15px !important;}
.mt20{ margin-top:20px !important;}
.mt25{ margin-top:25px !important;}
.mt30{ margin-top:30px !important;}
.mt40{ margin-top:40px !important;}
.mt50{ margin-top:50px !important;}

.mb0{ margin-bottom:0 !important;}
.mb3{ margin-bottom:3px !important;}
.mb5{ margin-bottom:5px !important;}
.mb10{ margin-bottom:10px !important;}
.mb15{ margin-bottom:15px !important;}
.mb20{ margin-bottom:20px !important;}
.mb25{ margin-bottom:25px !important;}
.mb30{ margin-bottom:30px !important;}
.mb40{ margin-bottom:40px !important;}
.mb50{ margin-bottom:50px !important;}

.ml0{ margin-left:0 !important;}
.ml5{ margin-left:5px !important;}
.ml10{ margin-left:10px !important;}
.ml15{ margin-left:15px !important;}
.ml20{ margin-left:20px !important;}
.ml25{ margin-left:25px !important;}
.ml30{ margin-left:30px !important;}
.ml40{ margin-left:40px !important;}
.ml50{ margin-left:50px !important;}

.mr0{ margin-right:0 !important;}
.mr3{ margin-right:3px !important;}
.mr5{ margin-right:5px !important;}
.mr10{ margin-right:10px !important;}
.mr15{ margin-right:15px !important;}
.mr20{ margin-right:20px !important;}
.mr25{ margin-right:25px !important;}
.mr30{ margin-right:30px !important;}
.mr40{ margin-right:40px !important;}
.mr50{ margin-right:50px !important;}


/*input 버튼*/
.input_st{display:inline-block; vertical-align:middle; border:1px solid #ddd; color:#666; padding:.5em 1em!important;  box-sizing:border-box; line-height:2em; height:3em; border-radius: var(--bor_r);}
textarea.input_st{ padding:1em; width:100%; height:10em!important; line-height:1.2}
.input_st::-webkit-input-placeholder{ color:#aaa}
.input_st::-moz-placeholder{ color:#aaa}
.input_st:-moz-placeholder{ color:#aaa}
.input_st:-ms-input-placeholder{ color:#aaa}

select.input_st:hover,
select.input_st:focus{ color:#666}
.input_st[disabled=disabled]:not([type=button]),
.input_st[readonly=readonly]:not([type=button]){ cursor:default; background:#f5f5f5; border-color:#ddd !important; color:#666}

.input_st .xi{ vertical-align: middle; font-size:1em; line-height: 1;}
.input_st .st_xi{ vertical-align: baseline; margin-right:7px;}

/*input size*/
.input_st.s1{ line-height:2.2em; height:3.2em; font-size:1.063em}
.input_st.s2{ line-height:1.5em; height:2.5em; padding:.5em 1em; font-size:.938em}
.input_st.s3{ line-height:1em; height:2em; padding:.25em .5em; font-size:.875em}

/*input color*/
.input_st.c1{ background:var(--mainColor); border-color:var(--mainColor); color:#fff}
.input_st.c1.re{ background:none; border-color:var(--mainColor); color:var(--mainColor)}
.input_st.c2{ background:#999; border-color:#999; color:#fff}
.input_st.c2.re{ background:#f5f5f5; border-color:#ccc; color:#888}
.input_st.c3{ background:#333; border-color:#333; color:#fff}
.input_st.c3.re{ background:#fff; border-color:#666; color:#666}
.input_st.c4{ background:#eb3b4b; border-color:#eb3b4b; color:#222}
.input_st.c4.re{ background:#fff; border-color:#eb3b4b; color:#222}



/*input width*/
.input_st.w1{ width:16.25em}
.input_st.w2{ width:7.5em}
.input_st.w3{ width:37em; max-width:100%}
.input_st.w4{ width:20em}
.input_st.w5{ width:9.4em}
.input_st.w6{ width:3em}
.input_st.w7{ width:120px}

/*table width*/
.w_form_tit{width:13em;}
.w_ordernum{width:20em;}
.w_status{width:8em;}
.w_auto{width:auto;} 

.w10{ width:10% !important}
.w15{ width:15% !important}
.w20{ width:20% !important}
.w25{ width:25% !important}
.w30{ width:30% !important}
.w35{ width:35% !important}
.w45{ width:45% !important}
.w50{ width:50% !important}
.w65{ width:65% !important}
.w75{ width:75% !important}
.w100{ width:100% !important}

.sw3 > *{width:33.33%;}


/*컬러 지정*/
.c_point{ color: var(--mainColor)!important; vertical-align:baseline;}
.c_point2{ color: var(--subColor)!important; vertical-align:baseline;}
.c_blue{ color: #1478eb !important; vertical-align:baseline;}
.c_red{ color: #ff3838 !important; vertical-align:baseline;}
.c_black{ color:#000 !important; vertical-align:baseline;}
.c_gray{ color:#999 !important; vertical-align:baseline;}