@charset "UTF-8";
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');  font-style: normal; font-weight: bold;}
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-style: normal; font-weight: normal; }
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-style: normal; font-weight: 100;}
:root {
   --white: #fff;
   --pale-grey: #f6f7f9;
   --lighten-grey: #d5dbe0;
   --light-grey: #b0b7be;
   --mid-grey: #878e95;
   --battleship-grey: #737b84;
   --dark-grey: #212529;
   --black: #000;
   --orange:#FAB005;
   --cherry-red: #F40223;
   --main-color: #F40223;
   --mint-blue :#00c2d5; 
   --main-gra:linear-gradient(to left, #ff9c8b, #ff687c);
   --main-gra-rev:linear-gradient(to right, #ff9c8b, #ff687c);
}
.color-white {color: var(--white)}
.color-pale-grey{color: var(--pale-grey)}
.color-light-grey{color: var(--light-grey)}
.color-mid-grey{color: var(--mid-grey)}
.color-battleship-grey{color: var(--battleship-grey)}
.color-dark-grey{color: var(--dark-grey)}
.color-black{color: var(--black)}
.color-orange{color: var(--orange)}
.color-cherry-red {color: var(--cherry-red) !important}
.color-main {color: var(--main-color) !important}

.bgcolor-white {background-color: var(--white) !important}
.bgcolor-pale-grey{background-color: var(--pale-grey) !important}
.bgcolor-light-grey{background-color: var(--light-grey) !important}
.bgcolor-mid-grey{background-color: var(--mid-grey) !important}
.bgcolor-battleship-grey{background-color: var(--battleship-grey) !important}
.bgcolor-dark-grey{background-color: var(--dark-grey) !important}
.bgcolor-black{background-color: var(--black) !important}
.bgcolor-orange{background-color: var(--orange) !important}
.bgcolor-main {background-color: var(--main-color) !important }
.bgcolor-main-gra {background-image: linear-gradient(to left,  #ff9c8b, #ff687c);  background-color: transparent;}
.bgcolor-cherry-red {background-color: var(--cherry-red) !important; background-image: none; }

.border-color-white {border-color: var(--white)}
.border-color-pale-grey{border-color: var(--pale-grey)}
.border-color-light-grey{border-color: var(--light-grey)}
.border-color-mid-grey{border-color: var(--mid-grey)}
.border-color-battleship-grey{border-color: var(--battleship-grey)}
.border-color-dark-grey{border-color: var(--dark-grey)}
.border-color-black{border-color: var(--black)}
.border-color-orange{border-color: var(--orange)}
.border-color-cherry-red, .color-main, .active {border-color: var(--cherry-red) }
.border-color-main {border-color: var(--main-color) !important}
/* CSS Document */
/*프리셋크기*/


.width-10 {width: 10% }
.width-20 {width: 20% }
.width-25 {width: 25% }
.width-30 {width: 30% }
.width-33 {width: 33.3% }
.width-40 {width: 40% }
.width-45 {width: 45% }
.width-50 {width: 50% }
.width-60 {width: 60% }
.width-66 {width: 66.6% }
.width-70 {width: 70% }
.width-75 {width: 75% }
.width-80 {width: 80% }
.width-90 {width: 90% }
.width-100 {width: 100% }
.height-10 {height: 10% }
.height-20 {height: 20% }
.height-40 {height: 40% }
.height-25 {height: 25% }
.height-33 {height: 33.3% }
.height-50 {height: 50% }
.height-60 {height: 60% }
.height-66 {height: 66.6% }
.height-75 {height: 75% }
.height-90 {height: 90% }
.height-100 {height: 100% }
.width-80px {width: 80px }
/*마진,패딩*/
.margin-top-10{margin-top: 10px }
.margin-top-15{margin-top: 15px }
.margin-top-20{margin-top: 20px }
.margin-top-30{margin-top: 30px }
.margin-top-40{margin-top: 40px }
.margin-left-5{margin-left: 5px }
.margin-left-10{margin-left: 10px }
.margin-left-15{margin-left: 15px }
.margin-left-20{margin-left: 20px }
.margin-bottom-0 {margin-bottom: 0 }
.margin-bottom-10 {margin-bottom: 10px }
.margin-right-5 {margin-right: 5px }
.padding-0 {padding: 0 }

.padding-20 {padding: 20px}
.padding-top-20 {padding-top: 20px}
.padding-left-10 {padding-left: 10px}
.padding-left-20 {padding-left: 20px}
/*플롯, 정렬*/
.float-left {float: left }
.float-right {float: right }
.float-none {float: none }
.txt-center { text-align: center  }
.txt-left{text-align: left }
.txt-right{text-align: right }
.fs-bold {font-weight:bold }
.fs-normal {font-weight:normal }
.inline-block {display: inline-block; vertical-align: top}
.clear{}
.clear:after {content: ""; display: block; clear: both}
.v-middle-container {display: table; width: 100%; vertical-align: middle}
.v-middle {display: table-cell; width: 100%; vertical-align: middle}
.z-index-1 {z-index: -1 }

.fs-21 {font-size: 21px}
.fs-21 {font-size: 21px}
.fs-21 {font-size: 21px}
.fs-21 {font-size: 21px}
.fs-18 {font-size: 18px}
.fs-16 {font-size: 16px}
.fs-14 {font-size: 14px}
.fs-12 {font-size: 12px}
.fs-11 {font-size: 11px}
.fs-10 {font-size: 10px}





.line-1px-top:after {background-color: var(--dark-grey); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; top: 0; content: ""; width: 300%; opacity: .3; }
.line-1px-bottom:after {background-color: var(--dark-grey); height: 1px; position: absolute; transform: scale(.334); transform-origin: left bottom; left: 0; bottom: 0; content: ""; width: 300%; opacity: .3; }
.no-1pxline:after {display: none !important;}
/*----------checkbox----------*/
input[type=checkbox] { display: none; }
input[type=checkbox] + label {  cursor: pointer; position: relative;  line-height: 20px; }
label + input[type=checkbox] + label:before {margin-left: 15px; content: ""; display: inline-block;}
input[type=checkbox] + label:before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; background-color: transparent; border-radius: 3px; border: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; margin-right: 5px; background-color: #fff}
input[type=checkbox]:checked + label:before { background: #F40223 url(../images/input/check_on.svg) no-repeat center; background-size: auto 40%; border: none; transition: 0.2s }
input[type=radio] { display: none; }
input[type=radio] + label { cursor: pointer; position: relative;  line-height: 20px; box-sizing: border-box; }
input[type=radio]:disabled + label, input[type=checkbox]:disabled + label {color: var(--lighten-grey)}
input[type=radio]:disabled + label:before, input[type=checkbox]:disabled + label:before,input[type=radio]:disabled + label + div, input[type=checkbox]:disabled + label + div {opacity: .5}
input[type=radio] + label:before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 20px;  vertical-align: middle; background-color: transparent;border-radius: 50%; margin-right: 5px; border: 1px solid rgba(0,0,0,0.2); box-sizing: border-box; background-color: #fff}
input[type=radio]:checked + label:before { border:5px solid #F40223; transition: 0.3s; box-sizing: border-box; background-color:#fff }
input, select{font-size: 12px; height: 44px; box-sizing: border-box; vertical-align: top; background: none; border: none; border-radius: 0;  appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */}
textarea {border: none; border-radius: 0;  appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */; width: 100%; padding: 15px;  background-size: 7px; box-sizing: border-box; vertical-align: top; color: var(--dark-grey);}
input[type=text], input[type=password], input[type=number], input[type=tel] { font-size: 14px; border-radius: 5px; background-color: var(--pale-grey); width: 100%; padding: 0 15px; height: 50px;}
input[type=text]:read-only, input[type=password]:read-only, input[type=number]:read-only, input[type=tel]:read-only {background: none;}
input[type=text]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=tel]:disabled { color: var(--light-grey)}
input[type=text]::placeholder,input[type=password]::placeholder, input[type=number]::placeholder, input[type=tel]::placeholder, textarea::placeholder  {color: var(--light-grey); font-weight: normal}
img {vertical-align: top}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px transparent inset ; -webkit-text-fill-color: var(--dark-grey); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
select { height: 50px; border-radius: 5px; border: 1px solid rgba(32,37,41, 0.15); font-size: 14px; text-indent: 15px; width: 100%; background: #fff url(../images/input/select_arrow.svg) no-repeat right 15px center; font-weight: 300; padding-right: 30px; }
select:disabled {background-color: var(--pale-grey); color: var(--light-grey);}
select:focus {border-color: var(--dark-grey)}
select.width_input {width: auto; background-color: var(--pale-grey); border-radius: 8px 0 0 8px; border: none;}



.switch {display: inline-block; width: 40px; height: 8px; position: relative}
.switch:before {display: block; width: 40px; height: 8px; opacity: .3; background-color: #A2A8B2; border-radius: 8px; position: relative; transition: .3s; content: ""; display: block;}
.switch:after {position: absolute; width: 20px; height: 20px; left: 0; top: -6px; content: ""; display: block; background-color: #A2A8B2; border-radius: 50%; transition:.3s }
.switch.on:before,.switch.on:after {background-color: #F40223}
.switch.on:after {left: 20px;}
.checkbox {display: inline-block; width: 24px; height: 24px; border-radius: 5px; box-sizing: border-box; border: 1px solid var(--light-grey); vertical-align: middle; }
.checkbox.on {border: 0; background:url("../images/input/check_on.svg") no-repeat center center; background-color: var(--main-color); background-size: auto 40%;}
.checkbox.readonly {border: 0; background:url("../images/input/check_on_readonly.svg") no-repeat center center; }
.checkbox + * {margin-left: 5px;}
.radio {display: inline-block; vertical-align: middle}
.radio span {width: 24px; height: 24px; border-radius: 24px;  box-sizing: border-box; border: 1px solid var(--light-grey); transition: .2s; display: inline-block; vertical-align: middle}
.radio span.on {border:6px solid var(--main-color); background-color: #fff} 
/*.radio + .radio {margin-left: 20px;}*/
.radio span {margin-right: 5px;}

.select {height: 60px; line-height: 58px;  font-size: 16px;  width: 100%; font-weight: 400; position: relative}
.select a.holder {font-weight: bold; border-radius: 8px; border: 1px solid rgba(32,37,41, 0.15);  background: #fff url(../images/input/select_arrow.svg) no-repeat right 15px center;}
.select i {margin-right: 5px; font-size: 1.2em; vertical-align: middle; margin-top: -2px;}
.select .option { background-color: #fff; border-radius: 8px; margin-top: 10px; left: 0; position: absolute; z-index: 10; width: 100%; box-shadow: rgba(0,0,0,0.1) 6px 6px 12px 0px; border: 1px solid rgba(32,37,41, 0.15); display: none;}
.select a {padding: 0 15px; display: block; position: relative;}
.select .option a { }
.select .option a.active {}
.select .option a:after {background: url(../images/img/1pxLine.png) repeat-x left bottom; background-size:100% 1px; height: 1px; position: absolute; left: 0; bottom: 0; width: 100%; opacity: .3; content: ""}
.select .option a:last-child:after {display: none;}
.list li.select_pay {padding-top: 20px !important;}
.list li.select_pay .select a.holder{box-shadow: 6px 6px 12px 0 rgba(0,0,0,0.1);}


.quantity {display: inline-block; line-height: 22px; font-size: 0; vertical-align: top}
.quantity a {display: inline-block; vertical-align:top;}
.quantity a:first-child {opacity: .3}
.quantity.multi a:first-child {opacity: 1}
.quantity .quantity_num {display: inline-block; text-align: center; color: var(--light-grey); border: none; -webkit-appearance:none; width: 60px; line-height: 22px; height: 22px; font-size: 18px; font-weight: bold; vertical-align:top;}