/* Atomy */
/*
@font-face {
	font-family:'Atomy';
	font-style:normal;
	font-weight:300;
	src:local('Atomy Light'), url(./webfonts/Atomy-Light.woff2) format('woff2'), url(./webfonts/Atomy-Light.woff) format('woff');
	font-display:fallback;
}
@font-face {
	font-family:'Atomy';
	font-style:normal;
	font-weight:400;
	src:local('Atomy Medium'), url(./webfonts/Atomy-Medium.woff2) format('woff2'), url(./webfonts/Atomy-Medium.woff) format('woff');
	font-display:fallback;
}
@font-face {
	font-family:'Atomy';
	font-style:normal;
	font-weight:600;
	src:local('Atomy Bold'), url(./webfonts/Atomy-Bold.woff2) format('woff2'), url(./webfonts/Atomy-Bold.woff) format('woff');
	font-display:fallback;
}
*/
/* reset */
*:focus { outline: none; }

html, body {margin:0; padding:0; font-size: 13px;}
body {background:#fff; -webkit-text-size-adjust:none;}
body, input, textarea, select, button, table { margin: 0; font-size: 1rem; font-family:"Noto Sans KR","맑은 고딕","Malgun Gothic","돋움",Dotum,"굴림",Gulim,AppleGothic,Sans-serif; color: #000; font-weight: 300;}
body, h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, form, fieldset, legend, button { margin: 0; padding: 0; }

img {max-width: 100%;}
img, fieldset{border:0 none}
dl, ul, ol, li {list-style: none outside none;}
button {padding: 0; border:0 none; cursor:pointer; display: block;}
.button {padding: 0; border:0 none; cursor:pointer; display: block; height: 45px; border-radius: 3px; text-align: center; appearance: none; -webkit-appearance: none;}
table {border-collapse:collapse;}

li img { vertical-align:top;}
td img { vertical-align:middle;}
.cursor { cursor: pointer;}

strong, b { font-weight: 600;}
address, caption, cite, code, dfn, em, var {font-style:normal;}

hr { clear:both; display: none; }
.blind, legend, caption {display:none;}

a {text-decoration:none; color:#000;}
a:hover, a:active, a:focus {text-decoration:none;}
table a:hover, table a:active {text-decoration:underline;}
table a.nonehoverline { text-decoration:none; }

input, select, textarea {border:1px solid #ccc; background:#fff; vertical-align:middle; font-size:0.923rem; appearance: none; -webkit-appearance: none; box-sizing:0; box-sizing:border-box; outline:0;}
select {height:35px;}
input.text {height: 35px; padding: 0 12px; border: none; background: #fff; border-radius: 3px; box-sizing: border-box;}
input[type="password"] {font-family: Arial, sans-serif;}
input[type="password"]::placeholder { font-family: Arial, Sans-serif; }                     
input[type="password"]::-webkit-input-placeholder { font-family: Arial, Sans-serif; }
input[type="password"]:-moz-placeholder { font-family: Arial, Sans-serif; }             
input[type="password"]::-moz-placeholder { font-family: Arial, Sans-serif; }         

input.file {border:1px solid #ddd; padding:2px 6px;}
input.check {border:none; background:none;}
input.radio	{border:0 none; background:none;}
textarea.textarea {height:120px; padding:2px 0;}

.hidden {display: none !important;}

/* float */
.floatL {float: left !important;}
.floatR {float: right !important;}
.alignR {text-align: right !important;}
.alignC {text-align: center !important;}
.alignL {text-align: left !important;}

/* color */
.black {color: #000 !important;}
.skyblue {color: #00b6f0 !important;}
.red {color: #e00000 !important;}
.gray {color: #555 !important;}
.gray_02 {color: #999 !important;}

/* padding */
.pdB40 {padding-bottom: 40px !important;}
.pdB50 {padding-bottom: 50px !important;}

/* margin */
.mgL0 {margin-left: 0px !important;}
.mgL5 {margin-left: 5px !important;}
.mgL10 {margin-left: 10px !important;}

.mgT20 {margin-top: 20px !important;}
.mgT30 {margin-top: 30px !important;}
.mgT40 {margin-top: 40px !important;}
.mgT50 {margin-top: 50px !important;}

/* width */
.w220 {width: 220px !important;}
.w290 {width: 290px !important;}

/* height */
.h40 {height: 40px !important; line-height: 40px !important;}

/* checkbox custom */
.checkLabel {cursor: pointer;}
.checkLabel input {display: none;}
.checkLabel .icon {display: inline-block; width: 18px; height: 18px; margin-right: 10px; margin-top: -2px; border: 1px solid #ccc; background: url('/img/mobile/rn201/icon/icon_check.png') no-repeat center center; background-size: 100%; border-radius: 2px; box-sizing: border-box; vertical-align: middle;}
.checkLabel input:checked + .icon {border-color: #000; background: #000 url('/img/mobile/rn201/icon/icon_check_on.png') no-repeat center center; background-size: 100%;}

.check_type_b {font-size: 1.154rem; cursor: pointer;}
.check_type_b input {display: none;}
.check_type_b .icon {display: inline-block; width: 20px; height: 20px; border: 1px solid #ccc; background: url('/img/mobile/rn201/icon/icon_check.png') no-repeat center center; background-size: 100%; border-radius: 2px; box-sizing: border-box; vertical-align: middle;}
.check_type_b input:checked + .icon {border-color: #000; background: #000 url('/img/mobile/rn201/icon/icon_check_on.png') no-repeat center center; background-size: 100%;}
.check_type_b .num {color: #00b6f0;}

.radioLabel {cursor: pointer;}
.radioLabel input {display: none;}
.radioLabel .icon {position: relative; display: inline-block; width: 18px; height: 18px; margin-right: 8px; margin-top: -2px; border: 1px solid #ccc;  border-radius: 100%; box-sizing: border-box; vertical-align: middle;}
.radioLabel input:checked + .icon {border-color: #000;}
.radioLabel input:checked + .icon::after {content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: #000; transform: translate(-50%, -50%); border-radius: 100%;}

.radio_check_tab {display: flex; margin-bottom: 20px; background: #f6f7f8; border: 1px solid #ddd; border-radius: 3px; overflow: hidden;}
.radio_check_tab label {display: block; flex: 1; border-left: 1px solid #ddd; text-align: center; color: #999; font-weight: 400; line-height: 1.4; box-sizing: border-box;}
.radio_check_tab label:first-child {border-left: none;}
.radio_check_tab label input {display: none;}
.radio_check_tab label span {display: flex; align-items: center; justify-content: center; height: 50px; box-sizing: border-box;}
.radio_check_tab label input:checked + span {background: #00b6f0; color: #fff; border-radius: 3px;}

/* 수량 버튼 */
.quantity_box {display: flex; width: 160px; border: 1px solid #ddd; background: #fff; border-radius: 5px; vertical-align: middle; box-sizing: border-box; overflow: hidden;}
.quantity_box .button {flex-shrink: 0; width: 35px; height: 35px; font-size: 0; line-height: 0; text-indent: -9999px; transition: background-color 0.2s;}
.quantity_box .btn_minus {background: #fff url('/img/mobile/rn201/icon/icon_minus.png') no-repeat center center; background-size: 12px;}
.quantity_box .btn_plus {background: #fff url('/img/mobile/rn201/icon/icon_plus.png') no-repeat center center; background-size: 12px;}
.quantity_box .button:hover {background-color: #f6f7f8;}
.quantity_box input {width: 100%; height: 35px; padding: 0 10px; font-size: 1.154rem; text-align: center; font-weight: 400;}

.quantity_box.small {width: 100px;}
.quantity_box.small .button {width: 25px; height: 25px; background-size: 10px !important;}
.quantity_box.small input {height: 25px; font-size: 1rem;}

/* button style */
#BtnArea {margin-top: 30px; text-align: center;}
#BtnArea .btn_con {display: flex; justify-content: space-between;}
#BtnArea .btn_con a,
#BtnArea .btn_con button {flex: 1; margin-left: 6px; padding: 0;}
#BtnArea .btn_con a:first-child,
#BtnArea .btn_con button:first-child {margin-left: 0;}
#BtnArea .btn_cancel {display: inline-block; margin-top: 25px; color: #555; font-size: 0.923rem; font-weight: 400; text-decoration: underline;}
#BtnArea .link_con {margin-top: 25px; text-align: left;}
#BtnArea .link_con a {margin-left: 20px; font-size: 0.923rem; color: #555; font-weight: 400; text-decoration: underline;}
#BtnArea .link_con a:first-child {margin-left: 0;}

.btn_b_gray {display: inline-block; min-width: 140px; height: 40px; line-height: 40px; padding: 0 10px; background: #b4babc; color: #fff; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_gray_02 {display: inline-block; min-width: 140px; height: 45px; line-height: 45px; padding: 0 10px; background: #caced1; color: #fff; font-size: 1.154rem; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_skyblue {display: inline-block; min-width: 140px; height: 40px; line-height: 40px; padding: 0 10px; background: #00b6f0; color: #fff; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_skyblue_02 {display: inline-block; min-width: 140px; height: 45px; line-height: 45px; padding: 0 10px; background: #00b6f0; color: #fff; font-size: 1.154rem; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_black {display: inline-block; min-width: 140px; height: 40px; line-height: 40px; padding: 0 10px; background: #000; color: #fff; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_black_02 {display: inline-block; min-width: 140px; height: 45px; line-height: 45px; padding: 0 10px; background: #000; color: #fff; font-size: 1.154rem; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_denim {display: inline-block; min-width: 140px; height: 40px; line-height: 40px; padding: 0 10px; background: #798fa8; color: #fff; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_b_denim_02 {display: inline-block; min-width: 140px; height: 45px; line-height: 45px; padding: 0 10px; background: #798fa8; color: #fff; font-size: 1.154rem; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_more_view {display: block; width: 100%; height: 40px; line-height: 40px; background: #f1f3f5; color: #999; font-weight: 400; text-align: center; border-radius: 3px; box-sizing: border-box;}
.btn_grayLine {display: block; width: 100%; height: 40px; line-height: 40px; background: #fff; border: 1px solid #ccc; font-weight: 400; text-align: center; color: #555; border-radius: 3px; text-decoration: none !important; transition: all 0.2s;}
.btn_s_skyblue {display: block; width: 125px; height: 28px; line-height: 28px; background: #00b6f0; border:none; font-size: 0.923rem; text-align: center; color: #fff; font-weight: 400; border-radius: 3px; text-decoration: none !important;}
.btn_s_skyblueLine {display: block; width: 125px; height: 28px; line-height: 28px; background: #fff; border: 1px solid #00b6f0; font-size: 0.923rem; text-align: center; color: #00b6f0; border-radius: 3px; text-decoration: none !important; transition: all 0.2s;}
.btn_s_skyblueLine:hover {border-color: #00b6f0; background: #00b6f0; color: #fff;}
.btn_s_grayLine {display: block; width: 125px; height: 28px; line-height: 28px; background: #fff; border: 1px solid #ccc; font-size: 0.923rem; text-align: center; color: #555; border-radius: 3px; text-decoration: none !important; transition: all 0.2s;}
.btn_s_grayLine:hover {border-color: #888; background: #888; color: #fff;}
.btn_s_black {display: block; width: 125px; height: 28px; line-height: 28px; background: #000; border:none; font-size: 0.923rem; text-align: center; color: #fff; font-weight: 400; border-radius: 3px; text-decoration: none !important;}
.btn_s_blackLine {display: block; width: 125px; height: 28px; line-height: 28px; border: 1px solid #000; font-size: 0.923rem; text-align: center; color: #000; border-radius: 3px; text-decoration: none !important; transition: all 0.2s;}
.btn_s_blackLine:hover {background: #000; color: #fff;}

/* icon */
.icon_ship_from {display: inline-block; min-width: 35px; height: 1.231rem; line-height: 1.231rem; margin-bottom: 3px; padding: 0 10px; background: #00b6f0; border:none; font-size: 0.769rem; text-align: center; color: #fff; font-weight: 400; border-radius: 2px; text-decoration: none !important; box-sizing: border-box;}

/*===============================================================*/
/*======================= Mobile 340 px ~ =======================*/
/*===============================================================*/
@media only screen and (max-width:340px){
  html, body {font-size: 12px;}
}