/*폰트불러오기*/
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv2 Gothic Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* 초기화 */
html {font-size:10px;}
body {margin:0 auto;padding:0;font-family: 'Pretendard', sans-serif;color:#222;font-weight:400;font-size: 1.5rem;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;}
input, button {margin:0;padding:0;font-family: 'Pretendard', sans-serif;}
input{background-color: #fff !important;}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}
textarea, select {font-family: 'Pretendard', sans-serif;}
textarea{
outline:1px; border-radius:0.5rem}
select {margin:0}
p {margin:0;padding:0;word-break:keep-all;}
hr {display:none}
a {
    color: #222;
    text-decoration: none;
}
a:hover {
    color: #222;
    text-decoration: none;
	transition:0.3s;
}
.un_reboot_a{color: var(--main);text-decoration: underline;}
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  word-break: keep-all;
}

img{max-width:100%;height: auto;}


:root {
	--main: #FFE206;
	--main-hover: #FFE206;
	--second: #C5CBD2;
	--second-hover: #bbc2c9;
	--second-in: #999;
	--third: #2E2E2E;
	--third-hover: #1d1a1a;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    --max-width-sm: 540px;
    --max-width-md: 720px;
    --max-width-lg: 960px;
    --max-width-xl: 1140px;
    --max-width-xxl: 1320px;
}




.line_h1{line-height:1.0rem;}
.line_h1_1{line-height:1.1em;}
.line_h1_2{line-height:1.2em;}
.line_h1_3{line-height:1.3em;}
.line_h1_4{line-height:1.4em;}
.line_h1_5{line-height:1.5em;}
.line_h1_6{line-height:1.6em;}
.line_h1_7{line-height:1.7em;}
.line_h1_8{line-height:1.8em;}
.line_h1_9{line-height:1.9em;}
.line_h2{line-height:2.0em;}


/*폰트커스텀 기본사이즈 10px*/
.ff_nexon{font-family: 'NEXON Lv2 Gothic Bold';}
.ff_SB{font-family: 'SBAggroB';}
.font_primary{font-family: "GmarketSansBold"; color: #333;transform: translate(0px,5%);}


h2{font-size: 3.5rem;}
h3{font-size: 3.3rem;}
h4{font-size: 3.0rem;}
h5{font-size: 2.2rem;}
h6{font-size: 1.8rem;}




.fs_8 {font-size: 0.8rem;}
.fs_9 {font-size: 0.9rem;}
.fs_10 {font-size: 1.0rem;}
.fs_11 {font-size: 1.1rem;}
.fs_12 {font-size: 1.2rem;}
.fs_13 {font-size: 1.3rem;}
.fs_14 {font-size: 1.4rem !important;}
.fs_15 {font-size: 1.5rem;}
.fs_16 {font-size: 1.6rem;}
.fs_17 {font-size: 1.7rem;}
.fs_18 {font-size: 1.8rem;}
.fs_19 {font-size: 1.9rem;}
.fs_20 {font-size: 2.0rem;}
.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_26 {font-size: 2.6rem;}
.fs_27 {font-size: 2.7rem;}
.fs_28 {font-size: 2.8rem;}
.fs_29 {font-size: 2.9rem;}
.fs_30 {font-size: 3.0rem;}
.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_36 {font-size: 3.6rem;}
.fs_37 {font-size: 3.7rem;}
.fs_38 {font-size: 3.8rem;}
.fs_39 {font-size: 3.9rem;}
.fs_40 {font-size: 4.0rem;}
.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_46 {font-size: 4.6rem;}
.fs_47 {font-size: 4.7rem;}
.fs_48 {font-size: 4.8rem;}
.fs_49 {font-size: 4.9rem;}
.fs_50 {font-size: 5.0rem;}
.fs_51 {font-size: 5.1rem;}
.fs_52 {font-size: 5.2rem;}


.fw_100 {font-weight: 100;}
.fw_200 {font-weight: 200;}
.fw_300 {font-weight: 300;}
.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}
.fw_700 {font-weight: 700 !important;}
.fw_800 {font-weight: 800;}
.fw_900 {font-weight: 900;}

.fc_wh{color:#fff !important;}
.fc_primary{color:#FFC506}
.fc_yellow{color:#FFE206}
.fc_FFC506{color:#FFC506;}
.fc_e3{color:#e3e3e3;}
.fc_A2A2A2{color:#A2A2A2;}
.fc_graaa{color:#aaa;}
.fc_grccc{color:#ccc;}
.fc_grddd{color:#ddd;}
.fc_gr999{color:#999;}
.fc_gr888{color:#999;}
.fc_gr777{color:#777;}
.fc_gr666{color:#666;}
.fc_gr444{color:#444;}
.fc_gr333{color:#333;}
.fc_bk{color:#000;}
.fc_rd{color:#FF4D4D;}

.fc_dgr{color:#3B4047;}
.fc_mgr{color:#969A9F;}
.fc_lgr{color:#D0D8E2;}

.fc_red{color:#F91010}

.fc_opa_222{color:rgba(34,34,34,0.8)}


.bg-third {background-color: var(--third) !important;}
.bg-secondary {background-color: var(--second) !important;}
.bg-primary {background-color: var(--main) !important;}
.bg-transparent{background:transparent;}
.bg_7510F9{background:#7510F9;}
.bg_F5F5F5{background:#F5F5F5;}
.bg_F2F2F2{background:#F2F2F2;}
.bg_e3e3e3{background:#e3e3e3;}
.bg_dc{background:#DCDCDC}
.bg_222{background:#222;}
.bg_FFE206{background:#FFE206;}
.bg_lgr{background:#f5f5f5;}
.bg_mgr{background:#E8EDF3;}
.bg_dgr{background:#D0D8E2;}
.bg_rd{background:#FF4D4D;}
.bg_green{background: #7ea900;}
.bg_yellow{background:#ffc107;}

.bg_pri{background-color: #FFDAB9;}
.bg_pr_light{background-color: #FFEAD8;}

/*border 선 커스텀*/
.border,
.border-top,
.border-bottom,
.border-left,
.border-right{border-color:#e3e3e3 !important;}

.bor_222{border:1px solid #222;}
.bor_yellow{border:1px solid  #FFE206}

.border-primary {border-color: var(--main) !important;}
.border-2{border-width: 2px !important;}
.border-black{border-color: #222 !important;}
.clear {clear: both;}
.clear:after{content:""; display:block; clear:both;}

.cont_wr{max-width:1230px;margin:0 auto;padding: 0 15px; position: relative;}
.cont_wr:after{content:""; display:block; clear:both;}

.wh_pre{white-space: pre-line;}
.required {
    color: var(--main) !important;
    font-size: 1.3rem;
    margin-left: 0.5rem;
    position: relative;
    top: -0.4rem;
}

.sq_guide{display:flex;flex-wrap: wrap;}
.sq_guide li {
    width: 90px;
    height: 90px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0.5rem;
}





/*드롭다운버튼*/
/* .dropdown-menu{font-size:1.7rem;font-family: 'NanumSquareRound',sans-serif;} */

/*버튼커스텀*/

.btn-primary {
    color: rgba(34,34,34,0.8) !important;
    background-color: var(--main);
    border-color: var(--main);
}
.btn-primary:hover {
	color: #222;
	background-color: var(--main-hover);
	border-color: var(--main-hover);
}

.btn-primary:focus, 
.btn-primary.focus {
	color: #222;
	background-color: var(--main-hover);
	border-color: var(--main-hover);
	box-shadow: 0 0 0 0.1rem var(--main-hover);
}

.btn-primary.disabled, 
.btn-primary:disabled {
	color:#fff !important;
	background-color:var(--second);
	border-color: var(--second);
	opacity:1;
}

.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: var(--main-hover);
	border-color: var(--main-hover);
}

.btn-secondary {
    color: #fff !important;
    background-color: #222;
    border-color: #222;
}
.btn-secondary:hover {
	color: #fff;
	background-color: #222;
	border-color: #222;
}

.btn-secondary:focus, 
.btn-secondary.focus {
	color: #fff;
	background-color: #222;
	border-color: #222;
	box-shadow: none;
}

.btn-secondary.disabled, 
.btn-secondary:disabled {
	color: #fff;
	background-color: var(--second-hover);
	border-color: var(--second-hover);
}

.btn-secondary:not(:disabled):not(.disabled):active, 
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
	color: #fff;
	background-color: #222;
	border-color: #222;
}

.btn-third {
	color:#fff !important;
	background-color:var(--third);
	border-color: var(--third);
}

.btn-third:hover {
	color: #fff;
	background-color: var(--third-hover);
	border-color: var(--third-hover);
}

.btn-third:focus, 
.btn-third.focus {
	color: #fff;
	background-color: #999;
	border-color: #999;
	/* box-shadow: 0 0 0 0.1rem var(--third-in); */
}

.btn-third.disabled, 
.btn-third:disabled {
	color: #fff;
	background-color: var(--third-hover);
	border-color: var(--third-hover);
}

.btn-third:not(:disabled):not(.disabled):active, 
.btn-third:not(:disabled):not(.disabled).active,
.show > .btn-third.dropdown-toggle {
	color: #fff;
	background-color: var(--third-in);
	border-color: var(--third-in);
}



.btn-outline-primary {
	color: var(--main) !important;
	background-color:#fff;
	border-color: var(--main);
}

.btn-outline-primary:hover {
	color:var(--main-hover) !important;
	background-color:#fff;
	border-color:var(--main-hover) !important;
}
.btn-outline-primary:focus {
	color:var(--main-hover) !important;
	background-color:#fff;
	border-color:var(--main-hover) !important;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
	color:var(--main-hover) !important;
	background-color:#fff;
	border-color:var(--main-hover) !important;
}

.btn-outline-secondary {
    color: rgba(34,34,34,0.8);
    background-color: #fff;
    border-color: #e3e3e3;
}

.btn-outline-secondary:hover {
    color: rgba(34,34,34,0.8);
    background-color: #fff;
    border-color: #e3e3e3;
}
.btn-outline-secondary:focus {
    color: rgba(34,34,34,0.8);
    background-color: #fff;
    border-color: #e3e3e3;
    box-shadow: none;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
    color: rgba(34,34,34,0.8);
    background-color: #fff;
    border-color: #e3e3e3;
}

.btn{border-radius:0.5rem;font-size:1.6rem;padding: 0.9rem 2.0rem;font-weight: 600;}
.btn-lg{font-size:1.8rem;border-radius:0.5rem;padding:1.35rem 1.0rem;
    color: rgba(34,34,34,0.8);}
.btn-sm {
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: rgba(34,34,34,0.8);
}
.btn-ssm {
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: rgba(34,34,34,0.8);
    padding: 0.8rem 1.5rem;
}
/*뱃지*/
.badge{font-size:1.4rem;padding: .429em .5em;border-radius: .5rem;font-weight: 500;}
.badge-primary {color: #7DB249;background-color: #E6F2FF;}



/*글자자르기*/
.line_text{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.line2_text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* 여러 줄 자르기 추가 스타일 */
	white-space: normal;
	line-height: 1.4em;
	height: 2.8em;
	text-align: left;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

}
.line3_text {
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis; /* 여러 줄 자르기 추가 스타일 */
	line-height: 1.4em;
	height: 4.2em;
	text-align: left;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;

}
.lst_st01 {
    list-style-image: url(../images/lst_st01.png);
    padding-left: 1.2rem;
}
.lst_st01 li{word-break: keep-all;}

/*스크롤 커스텀*/

.withdraw_terms>div::-webkit-scrollbar {
    width: 5px;
  }
.withdraw_terms>div::-webkit-scrollbar-thumb {
    background-color: #222;
    border-radius: 10px;
  }
.withdraw_terms>div::-webkit-scrollbar-track {
    background-color: #e3e3e3;
    border-radius: 10px;
  }

.collapse_txt>div::-webkit-scrollbar {
    width: 5px;
  }
.collapse_txt>div::-webkit-scrollbar-thumb {
    background-color: #222;
    border-radius: 10px;
  }
.collapse_txt>div::-webkit-scrollbar-track {
    background-color: #e3e3e3;
    border-radius: 10px;
  }

/*입력 인풋 input*/
.form-control {
    padding: 1.4rem 2rem;
    font-size: 1.6rem;
    height: 5.2rem;
    border-radius: 0.5rem;
    border-color: #e3e3e3;
    color: #222;
}
.form-control:focus {color: #222;border-color:transparent;box-shadow: none !important;}

.valid-feedback {
    margin-top: 0.7rem;
    font-size: 1.4rem;
    color: #222;
    font-weight: 500;
}
.invalid-feedback {
    margin-top: 0.7rem;
    font-size: 1.4rem;
    color: #F91010;
    font-weight: 500;
}
.valid-feedback img {
    margin-top: -2px;
}
.invalid-feedback img {
    margin-top: -2px;
}
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #e3e3e3 !important;background-image:none;box-shadow: none !important;}
.form-control.is-invalid, .was-validated .form-control:invalid {border-color: #e3e3e3 !important;background-image:none;box-shadow: none !important;}
.form-text{margin-top:0.7rem;font-size:1.4rem;}
input.form-control{}
input.form-control::placeholder {
    color: #A2A2A2;
    font-size: 1.4rem;
	font-weight:400 !important;
    border: 0.5rem;}

.form-row>.col, .form-row>[class*=col-] {
    padding-right: 4px;
    padding-left: 4px;
}
.write_box::placeholder{
    font-size: 1.4rem;
color: #A2A2A2;
	
}
.input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.input-group:not(.has-validation)>.form-control:not(:last-child){
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	margin-right: 0.8rem;
	resize: none;
}
.input-group>.form-control:focus{box-shadow: none;}
.input-group>.input-group-append>.btn{border-radius: 0.5rem !important;width:9.5rem;padding-right: 0.2rem;padding-left: 0.2rem;}

.ip_wr{}
.ip_wr .ip_tit {
    margin-bottom: 0.7rem;
    margin-top: 1.5rem;
}
.ip_wr .ip_tit h5 {
    font-size: 1.5rem !important;
    font-weight: 500;
    display: inline-block;
}
.ip_wr .custom-select_wr {width: calc(100% - 120px);}
.ip_wr .custom-select {
    padding:0.4rem 4rem 0.4rem 1rem;
    font-size: 1.5rem;
    height: 44px;
    border-radius: 0.4rem;
    border: 1px solid #e3e3e3 !important;
    color: #3B4047;
    background: url(../images/select_arrow.png)no-repeat center right 1rem;
    line-height: 1.4rem;
    background-color: #fff;
    background-size: 2.4rem !important;
}
.custom-select:focus {border-color:var(--main) !important;box-shadow: none;}
.ip_wr textarea.form-control {font-size: 1.6rem;min-height: 78px;width: 100%;}
.input_in_btn .input-group>div {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.input_in_btn .input-group>div{width:100%;}
.input_in_btn .form-control{width:calc(100% - 150px);}
.input_in_btn .btn_wr{width:auto;}
.input-group-append, .input-group-prepend {flex-wrap: inherit;}
.input-group-append{position:relative;}
.input-group-append span {
    position: absolute;
    left: -50px;
    top: 12px;
    color: #f91010;
}

/*버튼추가*/
.btn-outline-primary.fc_bk{color: #3B4047 !important;}
.btn-outline-primary.fc_bk:hover{background-color: #fff;}
.calendar_input{position: relative !important;}
.calendar_input::after{content: ''; width: 34px; height: 34px; background:url("./../images/ico_calendar.png") no-repeat center;position: absolute; top: 5px;right: 8px; cursor:pointer;background-size: cover;z-index: 5;}
.search_input{position: relative !important;}
.search_input::before{content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #F9A05C; margin-right: 0.8rem;position: relative; top: 50%; transform: translateY(-50%);}
.search_input::after{content: ''; width: 34px; height: 34px; background:url("./../images/ico_search.png") no-repeat center;position: absolute; top: 5px;right: 8px; cursor:pointer;background-size: cover;z-index: 5;}
input::-ms-clear,
input::-ms-reveal{display:none;width:0;height:0;}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{display:none;}
.btn-myinfo{border: 1px solid #E3E3E3;}

input.form-control[type="date"] {
    background: url(../images/calendar_ic.png)no-repeat right 1rem center;
    background-size: 2rem auto;
}
input.form-control[type="date"]::before {content:attr(data-placeholder);width:100%;color:#c3c3c3;line-height:2.0rem;}
input.form-control[type="date"]:focus:before, input[type="date"]:valid:before{display: none;}
input.form-control[type="date"]::-webkit-calendar-picker-indicator{opacity:0;z-index: 1;cursor: pointer;}

.form-group {
    margin-bottom: 0.3rem;
}

.form-group_1 {position:relative;}
.form-group_1 label {
    position: absolute;
    top: 14px;
    left: 10px;
    color: #a2a2a2;
    font-weight: 300;
	font-size:1.6rem
}
.form-group small {
    font-weight: 500;
}
.form-group small img {
    margin-right: 0.5rem;
    margin-bottom: 0.2rem;
}
.text-danger {
    color: #F91010!important;
}

.form-check-label {
    cursor: pointer;
    color: #222;
    font-weight: 500;
}

.form-check .form-check-input:checked + .form-check-label .chkbox {
    background: url(../images/ic_chk.png) #FFE206 no-repeat;
}
.chkbox {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    background-color: #E3E3E3;
    background: url(../images/ic_chk_none.png) #E3E3E3 no-repeat;
    transition: all 0.2s ease-in;
}
.chkbox.radio {
    border-radius: 50%;
}
.form-check input {
    display: none;
}

/*추천순 선택 select*/
.drop_opt .custom-select{
    padding: 1.4rem 3.5rem 1.4rem 0;
    font-size: 1.6rem;
    height: calc(1.706em + 2.5rem + 2px);
    border-radius: 0;
    border: 0;
    color: #333;
	background: url(../images/drop_opt.png)no-repeat center right 1.2rem;
}

/*페이저*/
.page-link:focus{box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0%);}
.page-item{margin: 0 5px; cursor: pointer;}
.pagination .page-link{padding: 0.8rem 1.1rem;border-color: transparent;color: #aaa;font-weight: 500; pointer-events: none;}
.page-item.active .page-link {z-index: 3;color: #222;background-color: transparent;border-color: transparent;}
.page-item.arrow .page-link, .page-item.arrow .page-link {border: 1px solid #e9e9e9; border-radius: 1rem;}
.page-item .page-link:hover {background-color: transparent;}


/*아코디언*/
.custom_acc .btn-link{width:23px;height:23px;background: url(../images/select_arrow.png)no-repeat center;padding:0;transform: rotate(0deg);}
.custom_acc .btn-link[aria-expanded="false"]{transform: rotate(0deg);transition: all 0.2s ease}
.custom_acc .btn-link[aria-expanded="true"]{transform: rotate(180deg);transition: all 0.2s ease}

/*체크박스*/
.checks {position: relative;}
.checks input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.checks input[type="checkbox"] + label {
    font-size: 1.5rem;
    display: inline-block;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	color: #37383A;
	padding-top: 2px;
	margin: 0;
    color: #3B4047;
	font-weight: 500;
}
.checks input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    text-align: center;
    background: url(./../images/check_off.png) #E3E3E3 no-repeat center;
    border-radius: 50px;
    background-size: cover;
}
.checks input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before {background: url(./../images/check_off.png) #FFE206 no-repeat center;}
.checks input[type="checkbox"]:checked + label:before {}
.checks input[type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 24px;
    height: 24px;
	border-radius: 50px;
    background: url(./../images/check_on.png) #FFE206 no-repeat center;
    background-size: cover;
}


/*라디오*/
.checks {position: relative;}
.checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.checks input[type="radio"] + label {
    display: inline-block;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    color: #3B4047;
    font-weight: 500;
    margin: 0;
    padding-top: 2px;
    font-size: 1.5rem;
}
.checks input[type="radio"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    text-align: center;
    background: url(./../images/check_off.png) #E3E3E3 no-repeat center;
    border-radius: 50px;
    background-size: cover;
}
.checks input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before {color:#333;}
.checks input[type="radio"]:checked + label:before {}
.checks input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    width: 24px;
    height: 24px;
	border-radius: 50px;
    background: url(./../images/check_on.png) #FFE206 no-repeat center;
    background-size: cover;
}


/*선택 라디오,체크박스*/
.select input[type="radio"] + label, .select input[type="checkbox"] + label {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    padding: 1.6rem 1.5rem;
    border-radius: 0.5rem;
    width: 100%;
    color: #3B4047;
}
.select input[type="radio"]:checked + label, .select input[type="checkbox"]:checked + label {
    border: 1px solid var(--main) !important;
    background: var(--main);
}
.select input[type=checkbox], input[type=radio] { 
 -webkit-user-select: none; 
 -moz-user-select: none; 
 -ms-user-select: none; 
 } 

.select .checks input[type="radio"] + label:before, .select .checks input[type="checkbox"] + label:before { display: none; } 
.select .checks input[type="radio"]:checked + label:after, .select .checks input[type="checkbox"]:checked + label:after { display: none; } 
.select{width: 100%;display: flex;}
.select .checks {
    width: 7rem;
    margin-right: 0.6rem;
    text-align: center;
}

.select input[type="radio"] + label {
    height: 5.2rem;
    padding: 0;
    line-height: 3rem;
    height: 3rem;
    box-shadow: none;
    border-radius: 0.5rem;
}
.select input[type="radio"]:checked + label{z-index: 1;}
.select .checks:not(:first-child), 
.select .checks:not(:first-child){
	margin-left: -1px;
}



/*탭 커스텀 */
.nav-tabs {
    border-bottom: transparent;
    background: #f5f5f5;
    border-radius: 0.4rem;
    font-size: 1.5rem;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: rgba(34,34,34,0.8);
    background-color: #FFE206;
    border-color: #FFE206;
    font-weight: 600;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent;
}
.nav-link {
    display: block;
    padding: 1.3rem 0;
}
li.nav-item {
    width: 50%;
}
.nav-tabs li.nav-item:first-child a {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0rem;
}

.nav-tabs li.nav-item:last-child a {
    border-top-left-radius: 0rem;
    border-top-right-radius: 0.5rem;
}

.item_detail_tab .nav-item{width: auto;}
/*너비 넓이*/
.w-5{width:5%;}
.w-10{width:10%;}
.w-15{width:15%;}
.w-20{width:20%;}
.w-30{width:30%;}
.w-33{width:33%;}
.w-35{width:35%;}
.w-40{width:40%;}
.w-45{width:45%;}
.w-55{width:55%;}
.w-60{width:60%;}
.w-65{width:65%;}
.w-70{width:70%;}
.w-80{width:80%;}
.w-85{width:85%;}
.w-90{width:90%;}
.w-95{width:95%;}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 1.8rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    color: #222;
    border-radius: 0.3rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .form-control:focus {
    border-color:#e3e3e3;
}
  .form-control-sm {
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0.25rem 1rem;
    font-size: 1.4rem;
    line-height: 1.5;
    border-radius: 0.2rem;
  }
  
  .form-control-lg {
    height: calc(1.5em + 3rem + 2px);
    padding: 0.5rem 1.4rem;
    font-size: 1.6rem;
    line-height: 1.5;
    border-radius: 0.3rem;
  }



/*컨테이너,콜*/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

/* 이미지 정사각형 만드는 클래스 */
.rect {
    border-radius: 1.6rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}
   .rect::after { 
    content: ''; 
    display: block; padding-bottom: 100%; 
    } 
   .rect>img { 
    position:absolute; width:100%; height:100%; object-fit: cover; 
    } 

    .px_20{padding-left: 20px; padding-right: 20px;}
.bg_tit{background:#f5f5f5; font-size: 1.8rem; font-weight: 600; padding:1.5rem 1.5rem; border-radius: 1rem; margin-bottom: 1rem;}



@media (min-width: 1199.98px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl {
		max-width: 1140px;
	}

}

/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {

}

/*반응형 max 992px lg*/
@media (max-width: 991.98px) {

	.input-group>.input-group-append>.btn{padding-left:1.0rem;padding-right:1.0rem;}
	.ip_wr .custom-select_wr {width: calc(100% - 120px);}
	.ip_wr .custom-select {background-size: 13px;}
	.m_mx_0{margin-left:-15px;margin-right:-15px;}
	.m_half .btn {width: 49%;padding-right: 0.5rem;padding-left: 0.5rem;}
}


/*반응형 max 767px md*/
@media (max-width: 767.98px) {
.order_condi .select{flex-wrap:wrap;}
.order_condi .select .checks {
    width: calc(33.3% - 6px) !important;
    padding: 0 !important;
}
}

/*반응형 max 576px sm*/
@media (max-width: 575.98px) {
.form-control {
    height: calc(1.5em + 1.8rem + -1px);}
.nav-tabs {
    font-size: 1.4rem;
}
.valid-feedback {
    font-size: 1.3rem;}
.invalid-feedback{
    font-size: 1.3rem;}
	input::placeholder {font-size: 1.4rem}
	textarea::placeholder {font-size: 1.4rem;line-height: 1.3;}
	input.form-control::placeholder{font-size:1.3rem;}
	.checks input[type="checkbox"] + label {
    font-size: 1.3rem;}
	.checks input[type="radio"] + label{
    font-size: 1.3rem;}
	.checks input[type="checkbox"] + label:before {
    width: 20px;
    height: 20px;}
	.checks input[type="checkbox"]:checked + label:after{
    width: 20px;
    height: 20px;}
	.checks input[type="radio"] + label:before{
    width: 20px;
    height: 20px;}
	.checks input[type="radio"]:checked + label:after{
    width: 20px;
    height: 20px;}
	.input-group>.input-group-append>.btn {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
	.write_box::placeholder{font-size:1.3rem;}
	.btn {font-size: 1.3rem;}
	.btn-lg {
		font-size: 1.6rem;
		height: 4.8rem;
		padding: 1.3rem 1rem;
	}
	.btn-md {height: 4.45rem;line-height: 2rem;font-size: 1.4rem;}
	.btn-sm {font-size: 1.3rem;line-height: 1.3rem;}
	.fs_35{font-size:3.3rem !important}
	.fs_33{font-size:3rem !important}
	.fs_30{font-size:2.7rem !important}
	.fs_18{font-size:1.6rem !important}
	.fs_24{font-size:2rem !important}
}


/*반응형 max 380px*/
@media (max-width: 380px) {
	
	.input-group>.input-group-append>.btn {
    width: 7.5rem;}
	.form-control {height: 4.1rem;font-size: 1.4rem;padding: 1.4rem 1rem;}
    .ip_wr .custom-select{height: 3.8rem; font-size: 1.4rem;}
	input.form-control::placeholder{font-size:1.2rem;}
	.checks input[type="checkbox"] + label {
    font-size: 1.2rem;}
	.checks input[type="radio"] + label{
    font-size: 1.2rem;}
	.btn-sm {
    font-size: 1.2rem;
    line-height: 1.2rem;
}
.order_condi .select .checks {
    width: calc(50% - 6px) !important;
    padding: 0 !important;
}
.write_box::placeholder{font-size:1.2rem;}
	.fs_35{font-size:3rem !important}
	.fs_33{font-size:2.7rem !important}
	.fs_30{font-size:2.4rem !important}
	.fs_18{font-size:1.4rem !important}
	.fs_15{font-size:1.3rem !important}
	.fs_24{font-size:1.8rem !important}
}