@charset "UTF-8";

/*reset*/
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, 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, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	display: block;
    line-height: 0;
}


/*프리텐다드 폰트*/
@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    unicode-range: U+AC00-D7A3, U+0041-005A, U+0061-007A, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}



html,body {margin:0; padding:0; font-size: 16px; height: 100%; width: 100%; font-family: 'Pretendard'; font-weight: 400; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.5; color:#2f2f2f; word-break: keep-all;}
nav,p,ul,li,a,strong,em,i,span,div,button,input,section, aside, article, h1, h2, h3, h4, h5, h6, header, footer { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.5;} 
h1, h2, h3, h4, h5, h6, header {line-height: 1.2;}
a {text-decoration: none; color: #484848;}
a:hover {text-decoration: none; color: #555555;}

/* Vertical Scrollbar default setting */
::-webkit-scrollbar-track
{
	background-color: #d6d6d6;
}

::-webkit-scrollbar
{
	width: 7px; 
	height: 7px; 
}

::-webkit-scrollbar-thumb
{
	background-color: #a8a8a8;
	/*background-image: -webkit-linear-gradient(45deg,
                    rgba(126, 182, 255, 0.2) 25%,
                    rgba(52, 102, 209, 0.2) 25%,
                    rgba(3, 63, 194, 0.2) 35%,
                    rgba(88, 134, 235, 0.2) 40%,
                    rgba(86, 152, 179, 0.2) 75%,
                    transparent 75%,
                    transparent);*/
	border-radius: 10px;
}


/* Vertical Scrollbar customer */
.navbar::-webkit-scrollbar-track,
.navbar > ul::-webkit-scrollbar-track
{
	background-color: #ffffff;
}
.navbar::-webkit-scrollbar,
.navbar > ul::-webkit-scrollbar
{
	width: 2px; 
	height: 2px; 
}
.navbar::-webkit-scrollbar-thumb,
.navbar > ul::-webkit-scrollbar-thumb
{
	background:rgba(0,0,0,0.6);
	border-radius: 10px;
}


/*패딩*/   
.pd0 {padding: 0px;}
.pd3 {padding: 3px;}
.pd5 {padding: 5px;}
.pd8 {padding: 8px;}
.pd10 {padding: 10px;}
.pd15 {padding: 15px;}
.pd20 {padding: 20px;}
.pd30 {padding: 30px;}
.pd40 {padding: 40px;}
.pd50 {padding: 50px;}
.pd60 {padding: 60px;}
.pd70 {padding: 70px;}
.pd80 {padding: 80px;}
.pd90 {padding: 90px;}
.pd100 {padding: 100px;}

.pdt0 {padding-top: 0px;}
.pdt5 {padding-top: 5px;}
.pdt10 {padding-top: 10px;}
.pdt15 {padding-top: 15px;}
.pdt20 {padding-top: 20px;}
.pdt30 {padding-top: 30px;}
.pdt40 {padding-top: 40px;}
.pdt50 {padding-top: 50px;}
.pdt60 {padding-top: 60px;}
.pdt70 {padding-top: 70px;}
.pdt80 {padding-top: 80px;}
.pdt90 {padding-top: 90px;}
.pdt100 {padding-top: 100px;}

.pdl10 {padding-left: 10px;}
.pdl20 {padding-left: 20px;}
.pdl30 {padding-left: 30px;}
.pdl40 {padding-left: 40px;}
.pdl50 {padding-left: 50px;}
.pdl60 {padding-left: 60px;}
.pdl70 {padding-left: 70px;}
.pdl80 {padding-left: 80px;}
.pdl90 {padding-left: 90px;}
.pdl100 {padding-left: 100px;}

.pdr10 {padding-right: 10px;}
.pdr20 {padding-right: 20px;}
.pdr30 {padding-right: 30px;}
.pdr40 {padding-right: 40px;}
.pdr50 {padding-right: 50px;}
.pdr60 {padding-right: 60px;}
.pdr70 {padding-right: 70px;}
.pdr80 {padding-right: 80px;}
.pdr90 {padding-right: 90px;}
.pdr100 {padding-right: 100px;}

.pdb0 {padding-bottom: 0px;}
.pdb5 {padding-bottom: 5px;}
.pdb10 {padding-bottom: 10px;}
.pdb15 {padding-bottom: 15px;}
.pdb20 {padding-bottom: 20px;}
.pdb30 {padding-bottom: 30px;}
.pdb40 {padding-bottom: 40px;}
.pdb50 {padding-bottom: 50px;}
.pdb60 {padding-bottom: 60px;}
.pdb70 {padding-bottom: 70px;}
.pdb80 {padding-bottom: 80px;}
.pdb90 {padding-bottom: 90px;}
.pdb100 {padding-bottom: 100px;}

.pdtb3 {padding-top: 3px; padding-bottom: 3px;}
.pdtb5 {padding-top: 5px; padding-bottom: 5px;}
.pdtb10 {padding-top: 10px; padding-bottom: 10px;}
.pdtb15 {padding-top: 15px; padding-bottom: 15px;}
.pdtb20 {padding-top: 20px; padding-bottom: 20px;}
.pdtb25 {padding-top: 25px; padding-bottom: 25px;}
.pdtb30 {padding-top: 30px; padding-bottom: 30px;}
.pdtb40 {padding-top: 40px; padding-bottom: 40px;}
.pdtb50 {padding-top: 50px; padding-bottom: 50px;}
.pdtb60 {padding-top: 60px; padding-bottom: 60px;}
.pdtb70 {padding-top: 70px; padding-bottom: 70px;}
.pdtb80 {padding-top: 80px; padding-bottom: 80px;}
.pdtb90 {padding-top: 90px; padding-bottom: 90px;}
.pdtb100 {padding-top: 100px; padding-bottom: 100px;}

.pdlr3 {padding-left: 3px; padding-right: 3px;}
.pdlr5 {padding-left: 5px; padding-right: 5px;}
.pdlr10 {padding-left: 10px; padding-right: 10px;}
.pdlr15 {padding-left: 15px; padding-right: 15px;}
.pdlr20 {padding-left: 20px; padding-right: 20px;}
.pdlr30 {padding-left: 30px; padding-right: 30px;}
.pdlr40 {padding-left: 40px; padding-right: 40px;}
.pdlr50 {padding-left: 50px; padding-right: 50px;}
.pdlr60 {padding-left: 60px; padding-right: 60px;}
.pdlr70 {padding-left: 70px; padding-right: 70px;}
.pdlr80 {padding-left: 80px; padding-right: 80px;}
.pdlr90 {padding-left: 90px; padding-right: 90px;}
.pdlr100 {padding-left: 100px; padding-right: 100px;}


/*vw*/
.pd2vw{padding: 2vw 0;}
.pd3vw{padding: 3vw 0;}
.pd4vw{padding: 4vw 0;}
.pd5vw{padding: 5vw 0;}
.pd6vw{padding: 6vw 0;}
.pd7vw{padding: 7vw 0;}
.pd8vw{padding: 8vw 0;}
.pd9vw{padding: 9vw 0;}
.pd10vw{padding: 10vw 0;}
.pd11vw{padding: 11vw 0;}
.pd12vw{padding: 12vw 0;}
.pd13vw{padding: 13vw 0;}
.pd14vw{padding: 14vw 0;}
.pd15vw{padding: 15vw 0;}

.pdt0vw{padding-top: 0vw;}
.pdt2vw{padding-top: 2vw;}
.pdt3vw{padding-top: 3vw;}
.pdt4vw{padding-top: 4vw;}
.pdt5vw{padding-top: 5vw;}
.pdt6vw{padding-top: 6vw;}
.pdt7vw{padding-top: 7vw;}
.pdt8vw{padding-top: 8vw;}
.pdt9vw{padding-top: 9vw;}
.pdt10vw{padding-top: 10vw;}

.pdb0vw{padding-bottom: 0vw;}
.pdb2vw{padding-bottom: 2vw;}
.pdb3vw{padding-bottom: 3vw;}
.pdb4vw{padding-bottom: 4vw;}
.pdb5vw{padding-bottom: 5vw;}
.pdb6vw{padding-bottom: 6vw;}
.pdb7vw{padding-bottom: 7vw;}
.pdb8vw{padding-bottom: 8vw;}
.pdb9vw{padding-bottom: 9vw;}
.pdb10vw{padding-bottom: 10vw;}


/*마진*/
.mg5 {margin: 5px;}
.mg10 {margin: 10px;}
.mg20 {margin: 20px;}
.mg30 {margin: 30px;}
.mg40 {margin: 40px;}
.mg50 {margin: 50px;}
.mg60 {margin: 60px;}
.mg70 {margin: 70px;}
.mg80 {margin: 80px;}
.mg90 {margin: 90px;}
.mg100 {margin: 100px;}

.mgt5 {margin-top: 5px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt30 {margin-top: 30px;}
.mgt40 {margin-top: 40px;}
.mgt50 {margin-top: 50px;}
.mgt60 {margin-top: 60px;}
.mgt70 {margin-top: 70px;}
.mgt80 {margin-top: 80px;}
.mgt90 {margin-top: 90px;}
.mgt100 {margin-top: 100px;}

.mgb5 {margin-bottom: 5px;}
.mgb10 {margin-bottom: 10px;}
.mgb15 {margin-bottom: 15px;}
.mgb20 {margin-bottom: 20px;}
.mgb25 {margin-bottom: 25px;}
.mgb30 {margin-bottom: 30px;}
.mgb40 {margin-bottom: 40px;}
.mgb50 {margin-bottom: 50px;}
.mgb60 {margin-bottom: 60px;}
.mgb70 {margin-bottom: 70px;}
.mgb80 {margin-bottom: 80px;}
.mgb90 {margin-bottom: 90px;}
.mgb100 {margin-bottom: 100px;}
.mgb200 {margin-bottom: 200px;}

.mgr0 {margin-right: 0px;}
.mgr5 {margin-right: 5px;}
.mgr10 {margin-right: 10px;}
.mgr15 {margin-right: 15px;}
.mgr20 {margin-right: 20px;}
.mgr30 {margin-right: 30px;}
.mgr40 {margin-right: 40px;}
.mgr50 {margin-right: 50px;}
.mgr60 {margin-right: 60px;}
.mgr70 {margin-right: 70px;}
.mgr80 {margin-right: 80px;}
.mgr90 {margin-right: 90px;}
.mgr100 {margin-right: 100px;}

.mgl5 {margin-left: 5px;}
.mgl10 {margin-left: 10px;}
.mgl20 {margin-left: 20px;}
.mgl30 {margin-left: 30px;}
.mgl40 {margin-left: 40px;}
.mgl50 {margin-left: 50px;}
.mgl60 {margin-left: 60px;}
.mgl70 {margin-left: 70px;}
.mgl80 {margin-left: 80px;}
.mgl90 {margin-left: 90px;}
.mgl100 {margin-left: 100px;}

.mglr5 {margin-left: 5px; margin-right: 5px;}
.mglr10 {margin-left: 10px; margin-right: 10px;}
.mglr20 {margin-left: 20px; margin-right: 20px;}
.mglr30 {margin-left: 30px; margin-right: 30px;}
.mglr40 {margin-left: 40px; margin-right: 40px;}
.mglr50 {margin-left: 50px; margin-right: 50px;}
.mglr60 {margin-left: 60px; margin-right: 60px;}
.mglr70 {margin-left: 70px; margin-right: 70px;}
.mglr80 {margin-left: 80px; margin-right: 80px;}
.mglr90 {margin-left: 90px; margin-right: 90px;}
.mglr100 {margin-left: 100px; margin-right: 100px;}

.m0auto {margin: 0 auto;}

/*font-weight*/
.fw1{font-weight: 100;}
.fw2{font-weight: 200;}
.fw3{font-weight: 300;}
.fw4{font-weight: 400;}
.fw5{font-weight: 500;}
.fw6{font-weight: 600;}
.fw7{font-weight: 700;}
.fw8{font-weight: 800;}
.fw9{font-weight: 900;}

/*position*/   
.poab {position: absolute;}
.porl {position: relative;}
.of_hidden {overflow: hidden;}


/*line-height*/
.lh_12{line-height: 1.2;}
.lh_13{line-height: 1.3;}
.lh_14{line-height: 1.4;}
.lh_16{line-height: 1.6;}
.lh_18{line-height: 1.8;}


/*width*/
.w10p {width: 10%;}   
.w20p {width: 20%;}   
.w30p {width: 30%;}     
.w40p {width: 40%;}   
.w50p {width: 50%;}   
.w60p {width: 60%;}   
.w70p {width: 70%;}   
.w80p {width: 80%;}   
.w90p {width: 90%;}   
.w100p {width: 100%;}  

.h10{height: 10%;}
.h20{height: 20%;}
.h30{height: 30%;}
.h40{height: 40%;}
.h50{height: 50%;}
.h60{height: 60%;}
.h70{height: 70%;}
.h80{height: 80%;}
.h90{height: 90%;}
.h100{height: 100%;}


/*margin_max_width*/
.innnerm1200 { margin: 0 auto; width: 100%; max-width: 1200px; position: relative;}
.innnerm1200_50 { margin: 50px auto; width: 100%; max-width: 1200px; position: relative;}
.innnerm1200_050 { margin: 0 auto 50px; width: 100%; max-width: 1200px; position: relative;}


/*margin_max_width*/
.innnerL10 {width: 10%; position: relative;}
.innnerL20 {width: 20%; position: relative;}
.innnerL30 {width: 30%; position: relative;}
.innnerL40 {width: 40%; position: relative;}
.innnerL50 {width: 50%; position: relative;}
.innnerL60 {width: 60%; position: relative;}
.innnerL70 {width: 70%; position: relative;}
.innnerL80 {width: 80%; position: relative;}
.innnerL90 {width: 90%; position: relative;}
.innnerL100 {width: 100%; position: relative;}
    

/*flex*/
.ac_sb {display: flex; align-items: center; justify-content: space-between;}
.ac_fs {display: flex; align-items: center; justify-content: flex-start;}
.ac_fd {display: flex; align-items: center; justify-content: flex-end;}
.ac_ct {display: flex; align-items: center; justify-content: center;}

.fs_sb {display: flex; align-items: flex-start; justify-content: space-between;}
.fs_fs {display: flex; align-items: flex-start; justify-content: flex-start;}
.fs_fd {display: flex; align-items: flex-start; justify-content: flex-end;}
.fs_ct {display: flex; align-items: flex-start; justify-content: center;}

.fd_sb {display: flex; align-items: flex-end; justify-content: space-between;}
.fd_fs {display: flex; align-items: flex-end; justify-content: flex-start;}
.fd_fd {display: flex; align-items: flex-end; justify-content: flex-end;}
.fd_ct {display: flex; align-items: flex-end; justify-content: center;}

.st_ct {display: flex; align-items: stretch; justify-content: center;}
.st_fs {display: flex; align-items: stretch; justify-content: flex-start;}
.st_fd {display: flex; align-items: stretch; justify-content: flex-end;}
.st_sb {display: flex; align-items: stretch; justify-content: space-between;}

.fx_1 {flex:1;}
.fx_2 {flex:2;}
.fx_3 {flex:3;}
.fx_4 {flex:4;}
.fx_5 {flex:5;}
.fx_6 {flex:6;}
.fx_7 {flex:7;}
.fx_8 {flex:8;}
.fx_w {flex-wrap:wrap;}
.fx_rd_c {flex-direction: column;}
.wb_ka {word-break: keep-all;}
.ws_nw {white-space: nowrap;}


/*font-color*/
.fc_7c {color: #7c7c7c;}
.fc_e75 {color: #e75700;}
.fc_a99 {color: #555a99;}


/*text align*/
.ta_c {text-align: center;}
.ta_r {text-align: right;}


/*border-radius*/
.bd_rd0 {border-radius: 0px !important;}
.bd_rd3 {border-radius: 3px;}
.bd_rd5 {border-radius: 5px;}
.bd_rd6 {border-radius: 6px;}
.bd_rd8 {border-radius: 8px;}
.bd_rd10 {border-radius: 10px;}
.bd_rd20 {border-radius: 20px;}
.bd_rd30 {border-radius: 30px;}
.bd_rd40 {border-radius: 40px;}
.bd_rd50 {border-radius: 50px;}

.bd_rdrt10 {border-radius: 0 10px 0 0;}
.bd_rdlt10 {border-radius: 10px 0 0 0;}
.bd_rdrt20 {border-radius: 0 20px 0 0;}
.bd_rdlt20 {border-radius: 20px 0 0 0;}

.bdt_df {border-top:1px solid #dfdfdf;}
.bdb_df {border-bottom:1px solid #dfdfdf;}
.bdt_e9 {border-top:1px solid #e9e9e9;}
.bdt_f9c {border-top:2px solid #f9c626;}
.bd_f9c {border:1px solid #f9c626;}
.bd_e9e {border:1px solid #e9e0c0;}
.bd_df {border:1px solid #dfdfdf;}


/*공통 background*/
.bg_def {background: #def0f9;}
.bg_f3 {background: #f3f3f3;}
.bg_ff5 {background: #fffff5;}
.bg_f9f {background: #f9fbff;}
.bg_df {background: #dfdfdf;}
.bg_9ea {background: #fff9ea;}
.bg_ff9 {background: #ff9f0f;}
.bg_e75 {background: #e75700;}
.bg_ffc {background: #ffcb96;}


/*공통 color*/
.cr_e75{color: #e75700;}
.cr_7c{color: #7c7c7c;}


/*공통 align*/
.tx_lf {text-align: left;}
.tx_ct {text-align: center;}
.d_block {display: block;}
.d_ib {display: inline-block;}
.st_cl {color: #535353;} 
.bg_cl_y {background: #f9c626;}
.tx_mgt {margin-top: 30px;}


/*font-size*/
.fs_08 {font-size: 0.8rem;}
.fs_09 {font-size: 0.9rem;}
.fs_1 {font-size: 1rem;}
.fs_11 {font-size: 1.1rem;}
.fs_12 {font-size: 1.2rem;}
.fs_13 {font-size: 1.3rem;}
.fs_14 {font-size: 1.4rem;}
.fs_15 {font-size: 1.5rem;}

.fs_2 {font-size: 2rem;}
.fs_21 {font-size: 2.1rem;}
.fs_22 {font-size: 2.2rem;}
.fs_23 {font-size: 2.3rem;}
.fs_24 {font-size: 2.4rem;}
.fs_25 {font-size: 2.5rem;}

.fs_3 {font-size: 3rem;}
.fs_31 {font-size: 3.1rem;}
.fs_32 {font-size: 3.2rem;}
.fs_33 {font-size: 3.3rem;}
.fs_34 {font-size: 3.4rem;}
.fs_35 {font-size: 3.5rem;}

.fs_4 {font-size: 4rem;}
.fs_41 {font-size: 4.1rem;}
.fs_42 {font-size: 4.2rem;}
.fs_43 {font-size: 4.3rem;}
.fs_44 {font-size: 4.4rem;}
.fs_45 {font-size: 4.5rem;}

.fs_5 {font-size: 5rem;}
.fs_6 {font-size: 6rem;}
.fs_7 {font-size: 7rem;}
.fs_8 {font-size: 8rem;}
.fs_9 {font-size: 9rem;}


/*font-size fixed*/
.fs_x1 {font-size: 1rem;}
.fs_x2 {font-size: 2rem;}
.fs_x3 {font-size: 3rem;}
.fs_x4 {font-size: 4rem;}
.fs_x5 {font-size: 5rem;}
.fs_x6 {font-size: 6rem;}
.fs_x7 {font-size: 7rem;}
.fs_x8 {font-size: 8rem;}
.fs_x9 {font-size: 9rem;}


@media screen and (max-width:1000px) {
    .fs_1 {font-size: 0.9rem;}
    .fs_11 {font-size: 1rem;}
    .fs_12 {font-size: 1.1rem;}
    .fs_13 {font-size: 1.2rem;}
    .fs_14 {font-size: 1.3rem;}
    .fs_15 {font-size: 1.4rem;}

    .fs_2 {font-size: 1.9rem;}
    .fs_21 {font-size: 2rem;}
    .fs_22 {font-size: 2.1rem;}
    .fs_23 {font-size: 2.2rem;}
    .fs_24 {font-size: 2.3rem;}
    .fs_25 {font-size: 2.4rem;}

    .fs_3 {font-size: 2.9rem;}
    .fs_31 {font-size: 3rem;}
    .fs_32 {font-size: 3.1rem;}
    .fs_33 {font-size: 3.2rem;}
    .fs_34 {font-size: 3.3rem;}
    .fs_35 {font-size: 3.4rem;}

    .fs_4 {font-size: 3.9rem;}
    .fs_41 {font-size: 4rem;}
    .fs_42 {font-size: 4.1rem;}
    .fs_43 {font-size: 4.2rem;}
    .fs_44 {font-size: 4.3rem;}
    .fs_45 {font-size: 4.4rem;}

    .fs_5 {font-size: 4.9rem;}
    .fs_6 {font-size: 5.9rem;}
    .fs_7 {font-size: 6.9rem;}
    .fs_8 {font-size: 7.9rem;}
    .fs_9 {font-size: 8.9rem;}
}


@media screen and (max-width:800px) {
    .fs_1 {font-size: 0.9rem;}
    .fs_11 {font-size: 0.9rem;}
    .fs_12 {font-size: 1rem;}
    .fs_13 {font-size: 1.1rem;}
    .fs_14 {font-size: 1.2rem;}
    .fs_15 {font-size: 1.3rem;}

    .fs_2 {font-size: 1.8rem;}
    .fs_21 {font-size: 1.9rem;}
    .fs_22 {font-size: 2rem;}
    .fs_23 {font-size: 2.1rem;}
    .fs_24 {font-size: 2.2rem;}
    .fs_25 {font-size: 2.3rem;}

    .fs_3 {font-size: 2.8rem;}
    .fs_31 {font-size: 2.9rem;}
    .fs_32 {font-size: 3rem;}
    .fs_33 {font-size: 3.1rem;}
    .fs_34 {font-size: 3.2rem;}
    .fs_35 {font-size: 3.3rem;}

    .fs_4 {font-size: 3.8rem;}
    .fs_41 {font-size: 3.9rem;}
    .fs_42 {font-size: 4rem;}
    .fs_43 {font-size: 4.1rem;}
    .fs_44 {font-size: 4.2rem;}
    .fs_45 {font-size: 4.3rem;}

    .fs_5 {font-size: 4.8rem;}
    .fs_6 {font-size: 5.8rem;}
    .fs_7 {font-size: 6.8rem;}
    .fs_8 {font-size: 7.8rem;}
    .fs_9 {font-size: 8.8rem;}
}


@media screen and (max-width:600px) {
    .fs_1 {font-size: 0.9rem;}
    .fs_11 {font-size: 0.9rem;}
    .fs_12 {font-size: 0.9rem;}
    .fs_13 {font-size: 1rem;}
    .fs_14 {font-size: 1.1rem;}
    .fs_15 {font-size: 1.2rem;}

    .fs_2 {font-size: 1.7rem;}
    .fs_21 {font-size: 1.8rem;}
    .fs_22 {font-size: 1.9rem;}
    .fs_23 {font-size: 2rem;}
    .fs_24 {font-size: 2.1rem;}
    .fs_25 {font-size: 2.2rem;}

    .fs_3 {font-size: 2.7rem;}
    .fs_31 {font-size: 2.8rem;}
    .fs_32 {font-size: 2.9rem;}
    .fs_33 {font-size: 3rem;}
    .fs_34 {font-size: 3.1rem;}
    .fs_35 {font-size: 3.2rem;}

    .fs_4 {font-size: 3.7rem;}
    .fs_41 {font-size: 3.8rem;}
    .fs_42 {font-size: 3.9rem;}
    .fs_43 {font-size: 4rem;}
    .fs_44 {font-size: 4.1rem;}
    .fs_45 {font-size: 4.2rem;}

    .fs_5 {font-size: 4.7rem;}
    .fs_6 {font-size: 5.7rem;}
    .fs_7 {font-size: 6.7rem;}
    .fs_8 {font-size: 7.7rem;}
    .fs_9 {font-size: 8.7rem;}
}


@media screen and (max-width:400px) {
    .fs_1 {font-size: 0.9rem;}
    .fs_11 {font-size: 0.9rem;}
    .fs_12 {font-size: 0.9rem;}
    .fs_13 {font-size: 0.9rem;}
    .fs_14 {font-size: 1rem;}
    .fs_15 {font-size: 1.1rem;}

    .fs_2 {font-size: 1.6rem;}
    .fs_21 {font-size: 1.7rem;}
    .fs_22 {font-size: 1.8rem;}
    .fs_23 {font-size: 1.9rem;}
    .fs_24 {font-size: 2rem;}
    .fs_25 {font-size: 2.1rem;}

    .fs_3 {font-size: 2.6rem;}
    .fs_31 {font-size: 2.7rem;}
    .fs_32 {font-size: 2.8rem;}
    .fs_33 {font-size: 2.9rem;}
    .fs_34 {font-size: 3rem;}
    .fs_35 {font-size: 3.1rem;}

    .fs_4 {font-size: 3.6rem;}
    .fs_41 {font-size: 3.7rem;}
    .fs_42 {font-size: 3.8rem;}
    .fs_43 {font-size: 3.9rem;}
    .fs_44 {font-size: 4rem;}
    .fs_45 {font-size: 4.1rem;}

    .fs_5 {font-size: 4.6rem;}
    .fs_6 {font-size: 5.6rem;}
    .fs_7 {font-size: 6.6rem;}
    .fs_8 {font-size: 7.6rem;}
    .fs_9 {font-size: 8.6rem;}
}




/* hamburger */
.hamberger_menu {position: relative; z-index: 12; margin-left: 0; display: block; padding-left: 0; display: flex; line-height: 1;}
.hamberger_menu > a {display: flex; align-items: center; justify-content: center;}
.hamberger_menu > a > em {margin-right: 10px; display: block; font-size: 15px; color:#7c7c7c;}
.hamberger_menu span { width: 25px; height: 3px; display: block; border-radius: 100px; transition: all 0.4s ease-in; }
.hamberger_menu span:nth-child(1) { margin-bottom: 5px; margin-top: 5px; }
.hamberger_menu span:nth-child(2) { margin-bottom: 5px; margin-top: 5px; }
.hamberger_menu span.up { background: #6f6f6f; }
.hamberger_menu span.dw { background: #b7b7b7; }

/*.hamberger_menu a.open span.mid { top: 23px; opacity: 0; transform: translate3d(0, 150px, 0) rotate(-720deg); -webkit-transform: translate3d(0, 150px, 0) rotate(-720deg); -moz-transform: translate3d(0, 150px, 0) rotate(-720deg); -o-transform: translate3d(0, 150px, 0) rotate(-720deg); background: #ffffff; }*/
.hamberger_menu a.open span.dw { top: 32px; opacity: 1; transform: translate3d(0, -6px, 0) rotate(-45deg); -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); -moz-transform: translate3d(0, -6px, 0) rotate(-45deg); -o-transform: translate3d(0, -6px, 0) rotate(-45deg); -ms-transform: translate(0, -6px) rotate(-45deg); background: #6f6f6f; }
.hamberger_menu a.open span.up { top: 32px; opacity: 1; transform: translate3d(0, 2px, 0) rotate(45deg); -webkit-transform: translate3d(0, 2px, 0) rotate(45deg); -moz-transform: translate3d(0, 2px, 0) rotate(45deg); -o-transform: translate3d(0, 2px, 0) rotate(45deg); -ms-transform: translate(0, 2px) rotate(45deg); /* background: #ffffff; */ }


/*textarea,input_box style css*/
input::-webkit-input-placeholder {
    color: #919191;
    font-family: 'SUIT-Light';
}

input:-ms-input-placeholder {
    color: #919191;
    font-family: 'SUIT-Light';
}

textarea::-webkit-input-placeholder {
    color: #919191;
    font-family: 'SUIT-Light';
}

textarea:-ms-input-placeholder {
    color: #919191;
    font-family: 'SUIT-Light';
}


/*check box css*/
input.cus_check[type="checkbox"] {  /* check box hidden */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0
}

input.cus_check[type="checkbox"] + label {  /* check box label */
    display: inline-block;
    padding-top: 2px;
    padding-bottom: 2px;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input.cus_check[type="checkbox"] + label:before {
    content: ' ';
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px; 
    margin: -2px 8px 0 0;
    text-align: center; 
    vertical-align: middle;
    background: transparent;
    border: 1px solid #b1b1b1;
    border-radius : 3px;
    transition: all ease-in 0.1s;
}

input.cus_check[type="checkbox"]:checked + label:before {
    color: #99a1a7;
    text-shadow: 1px 1px #fff;
    background: var(--title-light-color);
    border-color: var(--title-light-color);
}

input.cus_check[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    /* top: 3px; */
    top: 27%;
    left: 5px;
    width: 6px;
    height: 10px;
    /* bottom: 7px; */
    opacity: 1;
    z-index: 0;
    transform: rotate(45deg) scale(1);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all .3s ease;
    transition-delay: .15s;
}

input.cus_check[type="checkbox"][checked][disabled] + label:before {
    background: #d1d1d1;
    border-color: #d1d1d1;
}

input.cus_check[type="checkbox"]:disabled + label:before {
    background: #f0f0f0;
    border-color: #d1d1d1;
    border:2px solid #d1d1d1;
}

input.cus_check[type="checkbox"]:disabled + label {
    color: #a5a5a5;
}


/*radio css*/
input.cus_check[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}

input.cus_check[type="radio"] + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding-top: 2px;
    padding-bottom: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    white-space: nowrap;
}

input.cus_check[type="radio"] + label:before {
    content: ' ';
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 15px;
    margin: -2px 8px 0 0;
    text-align: center;
    vertical-align: middle;
    background: #fafafa;
    border: 1px solid #b6b6b6;
    border-radius: 100px;
    transition: all ease-in 0.1s;
}

input.cus_check[type="radio"]:checked + label:before {
    /* content: '\2714';  체크표시 유니코드 사용 */
    color: #99a1a7;
    text-shadow: 1px 1px #fff;
    background: #f9c930;
    border-color: #f9c930;
}

input.cus_check[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 39%;
    bottom: 0px;
    left: 5px;
    width: 6px;
    height: 6px;
    opacity: 1;
    z-index: 0;
    border-radius: 100px;
    transform: rotate(45deg) scale(1);
    background: #fff;
    transition: all .3s ease;
    transition-delay: .15s;
}

input.cus_check[type="radio"][checked][disabled] + label:before { 
    background: #d1d1d1;
    border-color: #d1d1d1;
}

input.cus_check[type="radio"]:disabled + label:before {
    /* content: '\2714';  체크표시 유니코드 사용 */
    color: #a5a5a5;
    text-shadow: 1px 1px #fff;
    background: #f0f0f0;
    border:2px solid #d1d1d1;
}

input.cus_check[type="radio"]:disabled + label {
    color: #9e9e9e;
}


/*radio checkbox css*/
input.radio_checkbox[type="radio"] { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0
}

input.radio_checkbox[type="radio"] + label { 
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input.radio_checkbox[type="radio"] + label:before {
    content: ' ';
    display: inline-block;
    width: 15px; 
    height: 15px;  
    line-height: 15px; 
    margin: -2px 8px 0 0;
    text-align: center; 
    vertical-align: middle;
    background: #fafafa;
    border: 1px solid #b6b6b6;
    border-radius : 3px;
    transition: all ease-in 0.1s;
}

input.radio_checkbox[type="radio"]:checked + label:before {  
    /* content: '\2714';  체크표시 유니코드 사용 */
    color: #99a1a7;
    text-shadow: 1px 1px #fff;
    background: #f9c930;
    border-color: #f9c930;
}

input.radio_checkbox[type="radio"]:disabled + label:before {
    /* content: '\2714';  체크표시 유니코드 사용 */
    color: #a5a5a5;
    text-shadow: 1px 1px #fff;
    background: #bdbdbd;
    border-color: #bdbdbd;
}

input.radio_checkbox[type="radio"]:disabled + label {
    color: #9e9e9e;
}

input.radio_checkbox[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 6px;
    height: 10px;
    opacity: 1;
    z-index: 1;
    transform: rotate(45deg) scale(1);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all .3s ease;
    transition-delay: .15s;
}

input.radio_checkbox[type="radio"][checked][disabled] + label:before {
    background: #d1d1d1;
    border-color: #d1d1d1;
}

input.radio_checkbox[type="radio"]:disabled + label:before {
    background: #f0f0f0;
    border-color: #d1d1d1;
    border:2px solid #d1d1d1;
}

input.radio_checkbox[type="radio"]:disabled + label {
    color: #a5a5a5;
}
