@charset "UTF-8";

/*수트폰트*/
@font-face {
    font-family: 'SUIT-Thin';
    src: url('/fonts/SUIT-Thin.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-ExtraLight';
    src: url('/fonts/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-Light';
    src: url('/fonts/SUIT-Light.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-Regular';
    src: url('/fonts/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-Medium';
    src: url('/fonts/SUIT-Medium.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-SemiBold';
    src: url('/fonts/SUIT-SemiBold.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-Bold';
    src: url('/fonts/SUIT-Bold.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-ExtraBold';
    src: url('/fonts/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    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: 'SUIT-Heavy';
    src: url('/fonts/SUIT-Heavy.woff2') format('woff2');
    font-weight: normal;
    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;
}


/*Gmarket Font*/
@font-face {
    font-family: 'GmarketSansLight';
    src: url('/fonts/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    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: 'GmarketSansMedium';
    src: url('/fonts/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    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: 'GmarketSansBold';
    src: url('/fonts/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    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: 'Spoqa Han Sans Neo_Bold';
    font-weight: 700;
    src: local('Spoqa Han Sans Neo Bold'),
    url('/fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
    url('/fonts/SpoqaHanSansNeo-Bold.woff') format('woff');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Spoqa Han Sans Neo_Medium';
    font-weight: 500;
    src: local('Spoqa Han Sans Neo Medium'),
    url('/fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
    url('/fonts/SpoqaHanSansNeo-Medium.woff') format('woff');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Spoqa Han Sans Neo_Regular';
    font-weight: 400;
    src: local('Spoqa Han Sans Neo Regular'),
    url('/fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
    url('/fonts/SpoqaHanSansNeo-Regular.woff') format('woff');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Spoqa Han Sans Neo_Light';
    font-weight: 300;
    src: local('Spoqa Han Sans Neo Light'),
    url('/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
    url('/fonts/SpoqaHanSansNeo-Light.woff') format('woff');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Spoqa Han Sans Neo_Thin';
    font-weight: 100;
    src: local('Spoqa Han Sans Neo Thin'),
    url('/fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
    url('/fonts/SpoqaHanSansNeo-Thin.woff') format('woff');
    unicode-range: U+0030-0039;
}

@font-face {
    font-family: 'Ghanachocolate';
    src: local('Spoqa Han Sans Neo Thin'),
    url('/fonts/Ghanachocolate.woff2')s format('woff2'),
    url('/fonts/Ghanachocolate.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html,body {margin:0; padding:0; font-size: 15px; height: 100%; width: 100%; /*font-family: 'SUIT-SemiBold';*/ font-family: 'SUIT-Medium' , 'Spoqa Han Sans Neo_Regular', 'sans-serif'; -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;}
img {line-height: 0;}
/*button,input {font-family: 'SUIT-Medium';}*/


/* Vertical Scrollbar (RIGHT SIDE) */

::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); */
	background-color: #eeeeee;
}


::-webkit-scrollbar
{
	width: 7px; /*vertical 세로*/
	height: 7px; /*horizontal 가로*/
}

::-webkit-scrollbar-thumb
{
	background-color: rgb(173, 206, 250);	
	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;
}




/*패딩*/   
.pd0 {padding: 0px !important;}
.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;}
.pdlr8 {padding-left: 7px; padding-right: 7px;}
.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;}

/*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%;}   
.w14p {width: 14%;}   
.w15p {width: 15%;}   
.w20p {width: 20%;}   
.w24p {width: 24%;}   
.w25p {width: 25%;}   
.w30p {width: 30%;}   
.w32p {width: 32%;}   
.w35p {width: 35%;}   
.w37p {width: 37%;}     
.w40p {width: 40%;}   
.w48p {width: 48%;}   
.w49p {width: 49%;}   
.w41p {width: 41%;}   
.w50p {width: 50%;}   
.w55p {width: 55%;}   
.w60p {width: 60%;}   
.w65p {width: 65%;}   
.w70p {width: 70%;}   
.w75p {width: 75%;}   
.w80p {width: 80%;}   
.w85p {width: 85%;}   
.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;}


.gap_5 {gap:5px;}
.gap_7 {gap:7px;}
.gap_8 {gap:5px;}
.gap_10 {gap:10px;}
.gap_20 {gap:20px;}
.gap_30 {gap:30px;}


/*font-color*/
.fc_7c {color: #7c7c7c;}
.fc_e75 {color: #e75700;}
.fc_a99 {color: #555a99;}


/*font-family*/
.ff_1 {font-family: 'SUIT-Thin', 'Spoqa Han Sans Neo_Thin';}
.ff_2 {font-family: 'SUIT-ExtraLight' ,'Spoqa Han Sans Neo_Thin';}
.ff_3 {font-family: 'SUIT-Light', 'Spoqa Han Sans Neo_Light';}
.ff_4 {font-family: 'SUIT-Regular', 'Spoqa Han Sans Neo_Regular';}
.ff_5 {font-family: 'SUIT-Medium', 'Spoqa Han Sans Neo_Medium';}
.ff_6 {font-family: 'SUIT-SemiBold', 'Spoqa Han Sans Neo_Medium';}
.ff_7 {font-family: 'SUIT-Bold', 'Spoqa Han Sans Neo_Bold';}
.ff_8 {font-family: 'SUIT-ExtraBold', 'Spoqa Han Sans Neo_Bold';}
.ff_9 {font-family: 'SUIT-Heavy', 'Spoqa Han Sans Neo_Bold';}



/*font-size class*/
.fz_m6 {font-size: 6rem;}
.fz_m5 {font-size: 5rem;}
.fz_m4 {font-size: 4rem;}
.fz_m3 {font-size: 3rem;}
.fz_m2 {font-size: 2rem;}
.fz_m1_3 {font-size: 1.3rem;}
.fz_m1 {font-size: 1rem;}
.fz_p1 {font-size: 0.95rem;}
.fz_p2 {font-size: 0.9rem;}
.fz_p3 {font-size: 0.85rem;}
.fz_p4 {font-size: 0.8rem;}
.fz_p5 {font-size: 0.75rem;}
.fz_p6 {font-size: 0.7rem;}

/*font-mediaquery*/
@media (max-width: 1200px) {
 
	
}
@media (max-width: 1000px) {
	.fz_m3 {font-size: 2.5rem;}
}
@media (max-width: 800px) {

	.fz_m2 {font-size: 1.5rem;}
}
@media (max-width: 700px) {

}	
@media (max-width: 600px) {
    .fz_m1_3 {font-size: 1.1rem;} 
    .fz_m1 {font-size: 0.9rem;}

}
@media (max-width: 500px) {


}
@media (max-width: 400px) {
	

}

.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;}



/* hamburger */
.hamberger_menu {
    position: relative;
    z-index: 12;
    margin-left: 0;
    display: block;
    padding-left: 0;
    display: flex;
    line-height: 1;
    /*background: #13307e;*/
}
.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 span.mid {
    background: #fff;
}*/


/*.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 {  /* fack checkbox */
    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 {  /* checkbox checked */ 
    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: 21%;
    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 { /*radio checked & disabled*/
    background: #d1d1d1;
    border-color: #d1d1d1;
}
input.cus_check[type="checkbox"]:disabled + label:before {  /* checkbox disabled */ 
    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"] {  /* radio 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="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 { /* radio checked & disabled */
    background: #d1d1d1;
    border-color: #d1d1d1;
}
input.cus_check[type="radio"]:disabled + label:before {  /* radio disabled */
    /* 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"] {  /* check box hidden */
    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 {  /* check box 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 {  /* fack checkbox */
    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 {  /* checkbox checked */ 
    /* content: '\2714';  체크표시 유니코드 사용 */
    color: #99a1a7;
    text-shadow: 1px 1px #fff;
    background: #f9c930;
    border-color: #f9c930;
}
input.radio_checkbox[type="radio"]:disabled + label:before {  /* checkbox disabled */ 
    /* 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 { /*radio checked & disabled*/
    background: #d1d1d1;
    border-color: #d1d1d1;
}
input.radio_checkbox[type="radio"]:disabled + label:before {  /* checkbox disabled */ 
    background: #f0f0f0;
    border-color: #d1d1d1;
    border:2px solid #d1d1d1;
}
input.radio_checkbox[type="radio"]:disabled + label {
    color: #a5a5a5;
}