@charset "utf-8";

/* HSK common.css 공통 css 스타일 기준으로 작업 : 시작 */
/*
* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
*/
@font-face {
  font-family: "NotoSansL";
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/NotoSansKR-Light.woff2)
      format("woff2"),
    url(../fonts/NotoSansKR-Light.woff)
      format("woff"),
    url(../fonts/NotoSansKR-Light.otf)
      format("opentype");
}
@font-face {
  font-family: "NotoSansR";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/NotoSansKR-Regular.woff2)
      format("woff2"),
    url(../fonts/NotoSansKR-Regular.woff)
      format("woff"),
    url(../fonts/NotoSansKR-Regular.otf)
      format("opentype");
}
@font-face {
  font-family: "NotoSansM";
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/NotoSansKR-Medium.woff2)
      format("woff2"),
    url(../fonts/NotoSansKR-Medium.woff)
      format("woff"),
    url(../fonts/NotoSansKR-Medium.otf)
      format("opentype");
}
@font-face {
  font-family: "NotoSansB";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/NotoSansKR-Bold.woff2)
      format("woff2"),
    url(../fonts/NotoSansKR-Bold.woff)
      format("woff"),
    url(../fonts/NotoSansKR-Bold.otf)
      format("opentype");
}
@font-face {
  font-family: "NotoSansBlack";
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/NotoSansKR-Black.woff2)
      format("woff2"),
    url(../fonts/NotoSansKR-Black.woff)
      format("woff"),
    url(../fonts/NotoSansKR-Black.otf)
      format("opentype");
}

/* reset */
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
form,
p,
input,
select,
button {margin:0;padding:0}
dl,
ul,
li {list-style:none}
input,
select,
button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}
a {color:inherit; text-decoration:none}
a:hover {text-decoration:underline;}
a:active {background-color:transparent}
/* //reset */

/* contents elements style */

.bul_dot {box-sizing: border-box; padding-left: 20px; font-size: 13px; color: #747474;}
.bul_dot:before {content: ''; float: left; width: 4px; height: 4px; margin: 8px 0 0 -14px; background-color: #bdbdbd;}
.bul_dot +.bul_dot {margin-top: 8px;}
.input_wrap {display: inline-block; width: 200px; margin-right: 6px;}

.button {background: url(../images/common/btn_bg.png) repeat-x 0 0; vertical-align: middle;}
.button:after {content: ''; position: relative; float: right; top: -4px; right: -2px; width: 3px; height: 29px; margin-left: 15px; background: url(../images/common/btn_bg.png) repeat-x -290px -30px;}
.button:hover {text-decoration: none;}

a.button {display: inline-block; box-sizing: border-box; height: 29px; margin-right: 2px; font-weight: bold; font-size: 12px; line-height: 20px; color: #747474; text-align: center !important;cursor: pointer; transition: all 300ms;}
a.button {padding: 4px 0 4px 18px;}

a.button:hover {text-shadow: 1px 1px 5px #aaa;}
/* //contents elements style */

.payment-modal,
.payment-modal-inner h1,
.payment-modal-inner input,
.payment-modal-inner select,
.payment-modal-inner button {font-style:normal;font-weight: normal;font-size:13px;line-height:1.5;font-family:"NotoSansR","Malgun Gothic","맑은 고딕", Arial, Tahoma, Helvetica, "Microsoft Yahei", simsun, sans-serif; color: #353535; -webkit-text-size-adjust: none;}
.payment-modal-inner {position: relative; height: 100%; word-break: keep-all; letter-spacing: -0.28px;}
.payment-modal-inner input[type="text"], 
.payment-modal-inner select {display: inline-block; box-sizing: border-box; height: 29px; padding: 5px 10px; border: 1px solid #dfdfdf; line-height: 18px; vertical-align: middle; transition: all 300ms; -webkit-transition: all 300ms;}
.payment-modal-inner input[type="text"] {outline: 0 none;}
.payment-modal-inner input[type="text"]:hover {border-color: #333;}
.payment-modal-inner input[type="text"]:focus {border-color: #d70c1c; box-shadow: inset 0 0 10px rgba(240,240,240,1);}
.payment-modal-inner select {padding: 3px; line-height: 23px;}
.payment-modal-inner input[type="radio"] {vertical-align: -2px; outline: 0 none;}
.payment-modal-inner label {display: inline-block; margin-right: 10px;}

/* 모달 */
/* .modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/images/common/bg_transparent.gif') repeat;
} */

.payment-modal-inner .container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	margin-top: -270px;
	background-color: #fff;
	/* border: 1px solid #2a2d36; */
	z-index: 9999;
}

.payment-modal-inner .header {
	position: relative;
	padding: 16px 40px 16px 16px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #E0E0E0;
    text-align: center;
}

.payment-modal-inner h3 {
	font-size: 22px;
	font-weight: bold;
}

.payment-modal-inner .header .close{
	position: absolute;
	top: 0;
	right: 0;
	height: 65px;
	padding: 15px 20px;
	box-sizing: border-box;
}

.payment-modal-inner .header .close img{
	vertical-align: middle;
}
/* 모달 */
/* 모달 - 결제 */
.modal.payment-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/images/common/bg_transparent.gif') repeat;    
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	/* backdrop-filter: blur(2px); */
	z-index: 10000;
}
.modal.payment-modal > iframe {
    width: 448px;
    min-height: 584px;
    height: 80vh;
}
.payment-modal-inner .container {
	position: static;
	width: 440px;
	margin: 0;
    overflow: hidden;
}
.payment-modal-inner .header {
	background-color: #ffffff; 
}
.payment-modal-content {
	padding: 16px;
    overflow-y: auto;
    max-height: 64vh;
    min-height: 300px;
}
.payment-modal-content .payment-content-box {
	padding: 16px;
	background-color: #F7F7F7;
	border: 1px solid #E5E5E5;
	font-size: 14px;
}
.payment-content-box .__section {
	padding-bottom: 14px;
}
.payment-content-box .__section:last-child {
	padding-bottom: 0;
}
.payment-content-box .__section + .__section {
	padding-top: 14px;
	border-top: 1px dashed #DDDDDD;
}
.payment-content-box .__sec-title {
	margin-bottom: 10px;
	color: #747474;
	line-height: 1;
}
.payment-content-box .__sec-title.point-title {
    color: #369CA1;
}
.payment-content-box dd {
    position: relative;
}
.payment-content-box .__list label {
    margin-right: 40px;
}
.payment-content-box .__list label:last-child {
    margin-right: 0;
}
.payment-content-box .__list > li {
	display: flex;
	justify-content: start;
	align-items: center;
}
.payment-content-box .__list > li + li {
	margin-top: 4px;
}
.payment-content-box .__list > li .list_tit {
    min-width: 52px;
    margin-right: 30px;
}
.payment-content-box .__list > li .list_tit.right_txt {
    text-align: right;
}
.payment-content-box .__list.list-form-type > li + li {
    margin-top: 10px;
}
.payment-content-box .__list_right {
    position: absolute;
    right: 20px;
    top: 9px;
    text-align: center;
}
.payment-content-box .__list_right .list_tit {
    font-size: 14px;
}
.payment-content-box .__list_right > strong {
    font-size: 20px;
    font-weight: 700;
    display: block;
    margin-top: 6px;
}
.payment-content-box .__list.list-input-button > li .list_tit {
    min-width: 76px;
    margin-right: 10px;
}
.payment-content-box .__list > li .list_name_txt {
    font-size: 16px;
}
.payment-content-box .__list > li .list_name_tit {
    line-height: 24px;
}
.payment-content-box .__list.list-input-button input[type="text"] {
    width: 100%;
}
.payment-content-box .__list.list-input-button .btn-list-form-payment {
    margin-left: 10px;
}
.payment-content-box .__list.list-input-button .unit_txt {
    margin-left: 4px;
}
.payment-content-box .__list.balance_info {
    margin-top: 10px;
    padding-left: 82px;
}
.payment-content-box .__list.balance_info > li {

}
.payment-content-box .__list.balance_info > li .list_tit {
    min-width: 76px;
    text-align: right;
    margin-right: 20px;
}
.payment-content-box .btn-list-form-payment {
    background-color: #FF3939;
    border-radius: 4px;
    padding: 0 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    min-width: 64px;
    line-height: 32px;
}
.payment-content-box .btn-list-form-payment:disabled {
    background: rgba(102, 102, 102, 0.50);
    pointer-events: none;
}
.payment-content-box .value {
	font-weight: 600;
}
.payment-content-box input[type="text"] {
    font-size: 14px;
    height: 32px;
    text-align: right;
}
.payment-content-box #upCardArea {
    width: 100%;
}
.payment-content-box .card-selection {
	display: flex;
}
.payment-content-box .card-selection .input_wrap {
    width: calc(100% - 70px);
    flex: 1 0 auto;
    margin-right: 8px;
    height: 32px;
    font-size: 14px;
}
.payment-content-box .card-selection .input_wrap + .button {
    font-size: 14px;
    background-image: url(../images/common/btn_bg_grey.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 32px;
    width: 62px;
    line-height: 32px;
    padding: 0;
    margin: 0;
    align-items: center;
    flex: 1 0 auto;
}
.payment-content-box .card-selection .input_wrap + .button::after {
    display: none;
}
.payment-content-box strong.value {
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
    font-family: "NotoSansBlack";
}
.mb-10 {
	margin-bottom: 10px;
}
/* 260102 결제 버튼 위치 수정 */
.payment-modal-inner .btn-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	margin-bottom: 24px;
}
.payment-modal-inner .btn-box [class^="btn-"] {
	width: 108px;
	height: 40px;
	border: 0;
	border-radius: 4px;
	font-weight: 700;
	font-size: 15px;
	color: #fff;
}
.payment-modal-inner .btn-box .btn-secondary {
	background: #666666;
}
/* // 260102 결제 버튼 위치 수정 */
/* 모달 - 결제 */
/* 250820 코나아이 */
.payment-content-box strong.value {
	font-size: 20px;
	line-height: 1;
}
/* // 250820 코나아이 */
/* HSK common.css 공통 css 스타일 기준으로 작업 : 끝 */