@charset "utf-8";
/* ##############################
	# 공통 스타일
############################## */

/*--------------------------------------------------------------------------------
# 폼 : INPUT
---------------------------------------------------------------------------------*/
[class*="inp_type"] {position:relative;width:100%;text-align:left;border:1px solid #adb1b6;border-radius:0.3rem;background-color:#fff;vertical-align:middle;display:inline-block;box-sizing:border-box;transition:all 0.3s ease;}
[class*="inp_type"] input {width:100%; padding:0.9rem 3.8rem 0.8rem 1.3rem; font-size:1.4rem; line-height:1.5; color:#020219; letter-spacing:-0.05em; border:0; border-radius:0.3rem; box-sizing:border-box; display:block;}
.inp_type2 input:only-child {padding:1.4rem 1.65rem; font-size:1.406rem;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
input[type="number"] { -moz-appearance: textfield; }


/*--------------------------------------------------------------------------------
# 탭 : 기본
---------------------------------------------------------------------------------*/
[class*="tab_type"] {width:100%; padding:0; background-color:transparent; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; overflow-x:auto; overflow-y:hidden; box-sizing:border-box;}
[class*="tab_type"] li {text-align:center; flex:1 0 auto;}
[class*="tab_type"] li .check_type3 {display:block;}
[class*="tab_type"] li a {height:100%; padding:1.2rem 2rem; font-size:1.406rem; line-height:1; color:#fff; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; justify-content:left; box-sizing:border-box;}
[class*="tab_type"] li.on a {font-weight:700; color:#202020; background-color:#fff;}


/*--------------------------------------------------------------------------------
# 폼 : check
---------------------------------------------------------------------------------*/
[class*="check_type"] {position: relative; padding-left: 2.8rem; font-size: 1.406rem; line-height: 1.572; vertical-align: middle; display: inline-block; box-sizing: border-box; text-align: left;}
[class*="check_type"] input {position: absolute; left:0; top:0; width:100%; height:100%; opacity:0;}
[class*="check_type"] [type="checkbox"] + span::before {left: 0; width: 2.1rem; height: 2.1rem; margin-top: -1.1rem; /*border: 1px solid #000;*/ background-color: #202020;}
[class*="check_type"] [type="checkbox"] + span:before, 
[class*="check_type"] [type="checkbox"] + span:after {content:""; position:absolute; top:50%;}
[class*="check_type"] [type="checkbox"] + span:after {left:0.5rem; width:1rem; height:0.4rem; margin-top:-0.4em; border: solid #000; border-width:0 0 0.2rem 0.2rem; border-radius:0; transition:all 0.3s ease; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); background-color:transparent;}
[class*="check_type"] input:checked + span:after {border-color:#fff;}

[class*="check_type"] {padding-left:3.2rem;}
[class*="check_type"] [type="checkbox"] + span::before {border:1px solid #f0f0f0; background-color:#fff;}
[class*="check_type"] [type="checkbox"] + span::after {left:0.6rem; width:0.8rem; border: solid #e1e1e1; border-width:0 0 0.2rem 0.2rem;}
[class*="check_type"] input:checked + span:after {left:0.6rem; width:0.8rem; border: solid #fff; border-width:0 0 0.2rem 0.2rem}
[class*="check_type"] input:checked + span::before {border: none; background-color:#202020;}


/*--------------------------------------------------------------------------------
# 폼 : radio
---------------------------------------------------------------------------------*/

[class*="choice_wrap"] {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
[class*="choice_wrap"] label {position:relative; text-align:center; width:18.3rem; -webkit-box-flex:1; flex:1; display:block; color:#afafaf;}
[class*="choice_wrap"] label + label {margin-left:0.9rem;}
[class*="choice_wrap"] label span {padding:1rem 0; line-height:1.2; border:1px solid #adb1b6; border-radius:0.3rem; display:block; -webkit-transition:all 0.3s ease; transition:all 0.3s ease;}
[class*="choice_wrap"] label input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;}
[class*="choice_wrap"] label input:checked + span {color:#fff; border-color:#000; background-color:#000;}
/**/
[class*="choice_wrap"] label em {padding: 1rem 0; line-height: 1.2; border: 1px solid #adb1b6; border-radius: 0.3rem; display: block; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
[class*="choice_wrap"] label input:checked + em {color: #fff; border-color: #000; background-color: #000;}

[class*="check_type"] [type="radio"] + span:before, 
[class*="check_type"] [type="radio"] + span:after {content:""; position:absolute; top:50%; border-radius:50%;}
[class*="check_type"] [type="radio"] + span:before {left:0; width:2rem; height:2rem; margin-top:-1.1rem; border:1px solid #d3d3d3; background-color:#fff;}
[class*="check_type"] [type="radio"] + span:after {left:0.5rem; width:0; height:0; margin-top:-0.6rem; border:solid #d3d3d3; border-width:0.6rem; background-color:#d3d3d3; transition:all 0.3s ease;}


/*--------------------------------------------------------------------------------
# 폼 : select
---------------------------------------------------------------------------------*/
[data-fn="selected"] {position:relative;}
[data-fn="selected"] > select {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0;}
[class*="select_type"] {position:relative; width:100%; font-weight:400; border:1px solid #adb1b6; border-radius:0.3rem; background-color:#fff; box-sizing:border-box; transition:all 0.3s ease;}
[class*="select_type"] .selected {padding:1.45rem 0 1.45rem 1.65rem; margin:0; font-size:1.406rem; line-height:1.5; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; display:block; color:#afafaf;}
[class*="select_type"] .selected:before, 
[class*="select_type"] .selected:after {content:""; position:absolute; top:50%; width:0.9rem; height:0.2rem; margin-top:-0.1rem; border-radius:1rem; background-color:#afafaf; transition:all 0.3s ease;}
[class*="select_type"] .selected:before {right:1.65rem; transform:rotate(45deg); -webkit-transform:rotate(45deg);}
[class*="select_type"] .selected:after {right:1.1rem; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
[class*="select_type"] .list {position:absolute; left:-1px; top:100%; right:-1px; margin-top:0.5rem; border:1px solid #24aae1; border-radius:0.3rem; background-color:#fff; display:none;}
[class*="select_type"] select.list {top:-1px; width:calc(100% + 2px); height:calc(100% + 2px); margin-top:0; opacity:0; display:block;}


.inp_area {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
.inp_area > * {-webkit-box-flex:1; flex:1;}
.inp_area > * + * {margin-left:1rem;}


/*--------------------------------------------------------------------------------
# 반응형 list product
---------------------------------------------------------------------------------*/
/*2021.07.12*/
/* @media screen and (max-width: 768px) {.item_wrap .item li { width:44.6%;}} */