@charset "UTF-8";

/* Common */
.txt-lt {text-align:left !important}
.txt-ct {text-align:center !important}
.txt-rt {text-align:right !important}

a.link_line:hover {text-decoration:underline}

/* Layout */
.btn-top-wrap .btn-position {right:-630px}
.foot-inner {max-width:1180px}

/* txt */
.txt-point {color:#ee4c4c !important}
.txt-underline {text-decoration:underline}
.txt-info {margin-top:10px; font-size:15px}

.desc {padding-left:15px; text-indent:-15px; line-height:24px; font-size:15px}
.desc-point {margin:25px 0 10px; font-weight:bold; font-size:25px; color:#ee4c4c}
.desc-list {text-align:left}
.desc-list li {line-height:1.5; font-size:16px}
.desc-list li + li {margin-top:3px}

.info-list li {padding-left:15px; text-indent:-15px; color:#121212; font-size:16px; line-height:1.6}

.list-dot li {position:relative}
.list-dot li::before {content:''; display:inline-block; margin-right:5px; width:4px; height:4px; border-radius:50%; background-color:#121212; vertical-align:3px}
.list-dot li + li {margin-top:10px}

/* bullet */
.bul-dash > li {position:relative; padding-left:8px; font-size:15px; line-height:1.4}
.bul-dash > li:before {content:''; display:inline-block; position:absolute; top:9px; left:0; width:4px; height:1px; background:#121212}
.bul-dash > li + li {margin-top:10px}

.bul-dot > li {position:relative; /*padding-left:8px;*/ font-size:16px; line-height:1.4}
.bul-dot > li + li {margin-top:5px}
.bul-dot.columns {display:table; width:100%}
.bul-dot.columns > li {display:table-cell; margin:0}

/* info box */
.info-box {margin-bottom:40px; padding:22px 40px 25px; background:#f3f3f3; font-size:inherit; line-height:1.6}
.info-box.line-type {background:#fff; border-top:1px solid #ddd}
.info-box .col {vertical-align:middle}
.info-box .col.btns {width:200px; text-align:right; vertical-align:middle}
.info-box .col.btns .btn {width:160px}
.info-box * + p {margin-top:5px}
.info-box * + .txt-para {margin-top:10px}
.info-box * + .bul-dot {margin-top:12px}
.info-box * + .info-inquiry {margin-top:20px}
.info-box .info-inquiry dt {margin-bottom:10px}
.info-box .bul-dot > li + li {margin-top:5px}
.info-box .bul-dot + .txt_para {font-size:15px}

.info-box.info-modify .btn {height:auto; padding:10px 15px}
.info-box.info-modify .btn:before {display:none}
.info-box.info-subscription .user-name {font-weight:bold}

/* button */
a.btn {text-decoration:none}
.btn {display:inline-block; height:50px; padding:0 15px; border-radius:10px; font-weight:700; font-size:16px; vertical-align:middle; cursor:pointer; outline:none; text-align:center; box-sizing:border-box}
.btn::before {content:''; display:inline-block; height:100%; width:1px; vertical-align:-20px}
.btn-default {background:#777; color:#fff}
.btn-submit {background:#436f91; color:#fff}
.btn-outline {min-width:120px; border:1px solid #436f91; background:#fff; color:#436f91}

.btn-action {margin-top:50px; text-align:center}
.btn-action .btn {min-width:200px}

.btn-area {margin-top:30px; text-align:center}
.btn-area .btn-apply {padding:5px 12px; border-radius:20px; font-weight:bold; letter-spacing:-0.115em; color:#fff; font-size:15px; background-color:#436f91; box-sizing:border-box}
.btn-area .btn-down {display:inline-block; width:100%; padding:10px 0; border-radius:30px; border:2px solid #436f91; color:#436f91; font-size:18px; background-color:#fff; line-height:1.1; text-align:center; box-sizing:border-box}
.btn-down {display:inline-block; margin-top:30px; padding:11px 55px 12px; border-radius:30px; font-weight:bold; font-size:20px; text-align:center; background-color:#436f91;}
.btn-down.preview {background-color:#ef7d39}
.btn-down + .btn-down {margin-left:10px} 
.btn-down span {display:inline-block; color:#fff}

/* AD */
.ad-bottom {padding:40px 0 10px; text-align:center}

/* Contents */
.contents-wrap {width:1180px; margin:0 auto; padding-top:50px}
.contents-wrap > .layout-inner {max-width:780px; margin:0 auto}
.cont-tit {display:block; margin-bottom:30px; font-weight:bold; font-size:30px}
.cont-subtit {display:block; margin-bottom:15px; font-weight:bold; font-size:22px}

.tit-wrap {position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:40px}
.tit-wrap .cont-tit {display:block; font-weight:bold; font-size:30px}
.tit-wrap .cont-tit > em {margin-left:7px}
.tit-wrap .cont-tit > em:before {content:''; display:inline-block; width:13px; height:13px; margin-right:15px; border-top:1px solid #121212; border-right:1px solid #121212; vertical-align:3px; transform:rotate(45deg)}
.tit-wrap .cont-tit + .cont-subtit {margin-top:10px}
.tit-wrap .cont-info {font-size:14px}
.tit-wrap.line-type {margin-top:0; margin-bottom:35px; border-bottom:1px solid #ddd}
.tit-wrap.border-top {padding-top:30px}

.cont-box.border-top, .tit-wrap.border-top {border-top:1px solid #555}
.cont-box + .cont-box {margin-top:55px}
.cont-box.border-top + .cont-box {margin-top:35px}

/* 구독 문의 영역 */
.question-box .contact-point {display:flex; justify-content: space-between;}
.question-box .contact-point li {flex:0 0 auto; width:calc(50% - 10px); padding:54px 10px; border-radius:10px; line-height:1.1; text-align:center; background-color:#fafafa; box-sizing:border-box}
.question-box .contact-point li.email {position:relative}
.question-box .contact-point li span {display:inline-block; font-family:'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-weight:bold; color:#121212; line-height:1.1; font-size:24px; box-sizing:border-box}
.question-box .contact-point li span:before {content:""; display:inline-block; margin-right:20px; vertical-align:middle}
.question-box .contact-point li.tel span:before {width:24px; height:24px; background:url('https://static.hankyung.com/resource/www/subscribe/img/icon-tel.svg') no-repeat center/contain}
.question-box .contact-point li.email span:before {width:25px; height:20px; background:url('https://static.hankyung.com/resource/www/subscribe/img/icon-mail.svg') no-repeat center/contain}
.question-box .info-list {margin-top:25px}
.question-box .info-list li + li {margin-top:5px}
.question-box .desc-list {padding-left:10px}
.question-box .desc-list li {color:#555; font-size:14px; line-height:26px}

/* Pages */
/* 구독안내 페이지 */
.intro-box {position:relative; padding-bottom:35px; border-bottom:1px solid #ddd; box-sizing:border-box}
.intro-box .txt {margin-right:385px; word-break:keep-all; font-size:16px; line-height:1.6}
.intro-box .txt strong {display:block; margin-bottom:20px; font-size:26px} 

/* .intro-box.subs-info-area {min-height:250px; padding-bottom:50px; background:url('https://static.hankyung.com/resource/www/esg/img/w/bg-esg-join-202307.png') no-repeat right center/340px 223px} */
/* esg 구독 이미지 (기타 섹션 추가되면 클래스 지정 필요함) */
.intro-box.subs-info-area {min-height:160px; padding-bottom:50px; background:url('https://static.hankyung.com/resource/www/esg/img/subscribe-info.png') no-repeat right top/220px 160px}
.intro-box.subs-info-area .cont-tit {margin-bottom:50px}

.product-list ~ .desc {margin-top:15px; font-size:18px}
.product-list .product-item {position:relative; display:flex; margin-bottom:15px; padding:30px 35px; border:1px solid #ddd; border-radius:20px; text-decoration:none; box-sizing:border-box}
/* .product-item:hover {border-color:#004b3a; box-shadow: 0px 3px 6px #00000029;}
.product-item:hover::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:19px; border:1px solid #004b3a; box-sizing:border-box;} */

.product-item .product-info {flex:0 0 auto; width:305px; margin-right:67px; padding-left:5px; box-sizing:border-box}
.product-item .product-info .btn-subs {display:inline-block; min-width:130px; margin-top:20px; padding:11px 30px 12px; border-radius:20px; line-height:1; color:#fff; font-weight:700; font-size:16px; background-color:#436f91; box-sizing:border-box}
.product-item .name {display:inline-block; margin-top:10px; margin-bottom:30px; font-size:32px; letter-spacing:-0.075em}
.product-item .txt {line-height:1.3; font-size:18px}
.product-item .bg-box {flex:0 0 auto; width:calc(100% - 372px); min-height:160px; padding:20px 40px; border-radius:15px; line-height:1.5; font-size:18px; background:#f7f7f7; box-sizing:border-box}
.product-item .price-area {margin:20px -5px 0; padding-top:10px; border-top:1px solid #ddd; font-size:16px; box-sizing:border-box}
.product-item .price-area > span {display:flex; align-items:center; justify-content:flex-end}
.product-item .price-area strong {margin-left:34px; margin-right:6px; font-family:'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size:30px}
.product-item .desc {padding-left:0; text-indent:0}

.product-list.type-card {display:flex}
.product-list.type-card .product-item {flex-direction:column; width:33%; padding:25px 25px 30px; border:2px solid #004b3a}
.product-list.type-card .product-item + .product-item {margin-left:14px}
.product-list.type-card .product-item .product-info {width:100%; margin-right:0; padding-left:0; text-align:center}
.product-list.type-card .product-item .name {margin:0 0 15px; font-size:26px}
.product-list.type-card .product-item .price-area {margin-top:15px; padding-top:0; border:none}
.product-list.type-card .product-item .price-area > span {justify-content:center}
.product-list.type-card .product-item .price-area strong {margin-left:13px; margin-right:10px; color:#436f91; font-size:24px}
.product-list.type-card .product-item .bg-box {width:100%; margin-top:20px; padding:20px 25px}
.product-list.type-card .desc-list li {letter-spacing: -0.08em}

/* form */
.must {margin-left:4px; color:#ee4c4c}

.inptxt,
input.inptxt {display:inline-block; width:100%; height:50px; padding:0 15px; border:1px solid #ddd; border-radius:10px; font-size:17px; line-height:48px; vertical-align:middle; outline:none; transition:all .15s ease-out; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.inptxt.full {width:100%}
input.inptxt:focus {border-color:#121212}
.inptxt.disabled,
input.inptxt[disabled] {background:#f5f5f5; color:#121212; opacity:1}
input.inptxt[disabled] {cursor:not-allowed}
.inptxt::placeholder {color:#999}
.inptxt:-ms-input-placeholder {color:#999}
.inptxt::-ms-input-placeholder {color:#999}
.inptxtarea {display:block; width:100%; padding:15px; border:1px solid #ddd; border-radius:3px; font-size:17px; outline:none; transition:all .15s ease-out; box-sizing:border-box}
.inptxtarea:focus {border-color:#121212}
.inptxtarea[disabled] {background:#f5f5f5; color:#121212; opacity:1; cursor:not-allowed}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px white inset; box-shadow: 0 0 0 1000px white inset}

.select-style {display:block; position:relative; height:50px; background:#fff; box-sizing:border-box}
.select-style select {position:relative; z-index:2; width:100%; height:100%; padding:0 40px 0 15px; border:1px solid #ddd; border-radius:3px; background:transparent; font-size:17px; line-height:48px; vertical-align:middle; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; outline:none; box-sizing:border-box; transition:all .15s ease-out}
.select-style select:focus {border-color:#121212}
.select-style select::-ms-expand {opacity:0}
.select-style select:focus::-ms-value {color:#121212; background:transparent}
.select-style:after {content:''; position:absolute; top:16px; right:15px; width:10px; height:10px; border-right:1px solid #121212; border-bottom:1px solid #121212; transform:rotate(45deg)}

.radio-area {display:flex; align-items:center; height:50px}
.radio-style {flex:0 0 auto; line-height:1.4}
.radio-style label {display:inline-block; position:relative; min-width:130px; padding-left:30px; font-size:inherit; cursor:pointer}
.radio-style label:before {content:''; display:inline-block; position:absolute; top:2px; left:0; width:20px; height:20px; border:1px solid #ccc; border-radius:10px; box-sizing:border-box;}
.radio-style .inp-radio {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.radio-style .inp-radio:checked + label::after {content:''; display:block; position:absolute; top:50%; left:5px; width:10px; height:10px; border-radius:50%; background-color:#121212; transform:translateY(-50%)}
.radio-style .inp-radio:disabled + label:before {border-color:#ececec}
.radio-style .inp-radio:disabled + label {cursor:not-allowed; color:#ddd}
.radio-style + .radio-style {margin-left:20px}

.check-style {display:block; margin-top:15px}
.check-style label {display:inline-block; position:relative; padding-left:31px; line-height:21px; font-size:15px; cursor:pointer}
.check-style label:before {content:''; display:inline-block; position:absolute; top:1px; left:0; width:20px; height:20px; border:1px solid #666; box-sizing:border-box}
.check-style .inp-chk {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.check-style .inp-chk:checked + label::before {border-color:#000; background-color:#000}
.check-style .inp-chk:checked + label:after {content:''; display:block; position:absolute; top:6px; left:3px; width:11px; height:6px; margin-bottom:4px; border-bottom:2px solid #fff; border-left:2px solid #fff; transform:rotate(-45deg);}
.check-style .inp_chk:disabled + label:before {border-color:#ececec}
.check-style .inp_chk:disabled + label {cursor:not-allowed; color:#ddd}
.check-style .inp_chk:checked:disabled + label:before {background-color:#ececec}
.check-style + .check-style {margin-left:20px}

/* 구독신청 페이지 */ 
.join-wrap .question-box .cont-subtit {margin-bottom:25px}
.join-wrap .question-box .contact-point li {width:calc(50% - 7px); padding:32px 10px}
.join-wrap .question-box .contact-point li span {font-size:20px}
.join-wrap .question-box .contact-point li.tel span:before {width:18px; height:18px}
.join-wrap .question-box .contact-point li.email span:before {width:16px; height:13px; margin-right:13px}
.join-wrap .question-box .info-list {margin-top:20px}
.join-wrap .question-box .info-list li {font-size:15px}

.form-cont {padding-bottom:20px; border-bottom:1px solid #eee; box-sizing:border-box}
.form-cont .cont-subtit {margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #121212}
.form-cont + .form-cont {margin-top:50px}
.form-cont + .info-list {margin-top:20px}
.intro-box + .form-cont {margin-top:30px}
.form-cont dl {display:flex; width:100%; margin-top:10px}
.form-cont dt, .form-cont dd {flex:0 0 auto; font-size:17px; box-sizing:border-box}
.form-cont dt {width:130px; padding-top:12px}
.form-cont dd {width:calc(100% - 130px)}
.form-cont dl.align-middle {align-items:center}
.form-cont dl.align-middle dt {padding-top:0}

.form-cont.result-cont {padding-bottom:0}
.form-cont.result-cont dl {margin-top:0; padding:20px 0}
.form-cont.result-cont .cont-subtit + dl {padding-top:0}
.form-cont.result-cont dl + dl {border-top:1px solid #eee}
.form-cont.result-cont dt {padding-top:0; font-weight:700}

.cont-box + .info-box {margin-top:45px}
.tit-wrap + .info-box.line-type {padding:22px 0 0}
.form-cont + .info-box.line-type {margin-bottom:0; padding-left:90px; padding-right:90px}
.form-cont .agree-box .cont-subtit {margin:0; border-bottom:none}

.history .contents-wrap {padding-bottom:50px}

.row {display:flex; justify-content:space-between; align-items:center; width:100%}
.row .col {flex:0 0 auto}
.row .col.dash {width:20px; text-align:center}

.status-standby {font-weight:normal; color:#36ade2} /* 상태:승인대기 */
.status-cancel {font-weight:normal; color:#eb8809} /* 상태:신청취소 */
.status-subscribe-standby {font-weight:normal; color:#36ade2} /* 상태:구독대기 */
.status-subscribe {font-weight:normal; color:#64b660} /* 상태:구독중 */
.status-term {font-weight:normal; color:#ff3b3b} /* 상태:기간만료 */
.status-request-completion {font-weight:normal; color:#36ade2} /* 상태:신청완료 */
.status-payment-completion {font-weight:normal; color:#36ade2} /* 상태:입금완료 */
.status-no-orders {font-weight:normal; color:#888} /* 상태:주문없음 */

.nodata {padding-top:15px; font-weight:bold; font-size:22px; text-align:center}
.nodata:before {content:''; display:block; width:80px; height:80px; margin:0 auto 45px; background:url('https://static.hankyung.com/resource/www/subscribe/img/icon-exclamation.png') no-repeat}
.contit_wrap + .nodata {padding:35px 0 47px; border-top:1px solid #ddd}
.nodata + .txt_ct + .cont_item_wrap {margin-top:45px}

/* info box */
.info-box {margin-bottom:40px; padding:22px 40px 25px; background:#f3f3f3; font-size:17px; line-height:1.5}
.info-box.line-type {background:#fff; border-top:1px solid #ddd}
.info-box .col {vertical-align:middle}
.info-box .col.btns {width:200px; text-align:right; vertical-align:middle}
.info-box .col.btns .btn {width:160px}
.info-box .txt-primary {font-size:20px}
.info-box * + p {margin-top:5px}
.info-box * + .txt-para {margin-top:10px}
.info-box * + .bul-dot {margin-top:12px}
.info-box * + .info-inquiry {margin-top:20px}
.info-box .info-inquiry dt {margin-bottom:10px}
.info-box .bul-dot > li + li {margin-top:5px}
.info-box .bul-dot + .txt_para {font-size:15px}
.info-box.info-modify .btn {height:auto; padding:10px 15px}
.info-box.info-modify .btn:before {display:none}
.info-box.info-subscription .user-name {font-weight:bold}

/* table(가로형) */
.table {width:100%; border-bottom:1px solid #ddd}
.table tbody th,
.table td {padding:18px 40px 19px; border-top:1px solid #ddd; font-weight:normal; font-size:17px; vertical-align:top; box-sizing:border-box}
.table tbody th {width:220px; background-color:#f3f3f3; text-align:left}
.table .price {font-size:20px}
.table .btns-wrap {position:relative}
.table .btns-wrap .btns {position:absolute; top:-8px}
.table .btns-wrap .btns .txt {line-height:40px}
.table .btns-wrap .btns.btns_r {right:0}
.table .btns-wrap .btn {min-width:120px; height:40px}
.table .btns-wrap .btn::before {vertical-align:-14px}
.table + .bul-dot {margin-top:20px}
.table + .agree-box {margin-top:40px}
.table .btn {border-radius:0; height:47px}
.table .btn::before {vertical-align:-19px}

/* table(리스트형) */
.desc + .table-list {margin-top:10px}
.table-list {width:100%; border-bottom:1px solid #ddd; word-break:break-all}
.table-list thead th,
.table-list td {padding:18px 10px; border-top:1px solid #ddd; font-weight:normal; font-size:17px; word-break:keep-all; word-wrap:break-word}
.table-list thead th {background-color:#f3f3f3}
.table-list td {text-align:center}
.table-list + .pagination {margin-top:20px}

.agree-box .check-style {margin-top:0}
.agree-box .check-style label {font-size:17px}
.agree-box {margin-bottom:20px}
.agree-box .agree-list {border-top:1px solid #777}
.agree-box .agree-list > li + li {border-top:1px solid #d3d3d3}
.agree-box .agree-list > li:last-child {border-bottom:1px solid #d3d3d3}
.agree-box .agree-tit {display:block; position:relative; width:100%; padding:20px 35px 20px 5px; font-size:17px; text-decoration:none; box-sizing:border-box; cursor:pointer}
.agree-box .agree-tit::after {content:''; display:block; position:absolute; top:50%; right:5px; width:8px; height:8px; border-bottom:2px solid #121212; border-right:2px solid #121212; transform:translateY(-50%) rotate(45deg)}
.agree-box .agree-tit.on::after {content:''; display:block; position:absolute; top:50%; right:5px; width:8px; height:8px; border-bottom:0; border-right:0; border-top:2px solid #121212; border-left:2px solid #121212; transform:translateY(-50%) rotate(45deg)}
.agree-box .agree-tit .check-style {float:right}
.agree-box .agree-tit .check-style label {font-size:16px; vertical-align:top}
.agree-box .agree-tit .ft-color {color:#436f91}
.agree-box .agree-tit > em {float:left}
.agree-box .agree-cont {display:none; height:215px}
.agree-box .agree-cont.active {display:block}
.agree-box .scroll, .drop-list-box .scroll {overflow-y:auto; height:100%; padding:20px 15px; border:1px solid #ddd; border-bottom:none; font-size:12px; box-sizing:border-box}
.drop-list-box .scroll {max-height:200px}
.agree-box .scroll > em {display:inline-block; position:relative; margin:5px 0 10px; padding-left:13px; font-size:12px}
.agree-box .scroll > em::before {content:""; display:block; position:absolute; top:6px; left:0; width:4px; height:4px; border-radius:50%; background-color:#121212}
.agree-box .scroll > em + ul li {line-height:24px; font-size: 12px;}
.agree-box .scroll > em + ul li + li {margin-top:0}
.agree-box .scroll .bul-dash + em {margin-top:15px}
.agree-box .scroll .table-list {width:100%; margin:10px 0}
.agree-box .scroll ul li, .agree_box .scroll p {line-height:24px; font-size:12px}
.agree-box .bul-dash > li:before {top:12px}
.agree-box .scroll .table-list thead th, .agree-box .scroll .table-list td {padding:10px; font-size:12px; text-align:center; line-height:22px}
.agree-box .scroll .table-list thead th {background-color:transparent}
.agree-box + .bul-dot {margin-top:15px}
.agree-box + .desc-list {margin:10px 5px}

/* For lte IE9 */
.lte-ie9 .select-style {border:1px solid #ddd; border-radius:3px; overflow:hidden}
.lte-ie9 .select-style select {width:calc(100% + 60px); border:none}
.lte-ie9 .email-wrap .select-style {border:none}
.lte-ie9 .daterange-wrap .daterange {width:310px}

/* iframe 영역 */
.product-iframe {margin-top:30px; overflow:hidden}
.product-iframe iframe {width:100%; min-width:850px; height:1010px !important}

.product-desc {margin-top:23px; border-top:1px solid #ddd}
.product-desc li {display:flex; justify-content:space-between; padding:10px 30px; border-bottom:1px solid #ddd; box-sizing:border-box}
.product-desc li > span {flex:0 0 auto}
.product-desc li > span:first-child {color:#555; font-size:15px}
.product-desc li > span:nth-child(2) {font-size:18px}

.notice-box {margin-top:30px; padding:30px; border-radius:20px; background-color:#f7f7f7; box-sizing:border-box}
.notice-box .cont-subtit {margin-bottom:20px; padding-left:30px; line-height:1.5; font-size:18px; background:url('https://static.hankyung.com/resource/salesforce/img/icon-notice.svg') no-repeat left center/20px 20px}
.notice-box .info-list,
.notice-box .info-list li {padding-left:0; text-indent:0; line-height:1.5; font-size:15px}

.contact-list {display:flex}
.contact-list li {flex:1 1 auto; display:flex; justify-content:center; align-items:center; width:33%; height:115px; padding:30px 20px; border-radius:20px; border:1px solid #888; box-sizing:border-box}
.contact-list li + li {margin-left:40px}
.contact-list li::before {content:''; display:inline-block; width:20px; height:20px; margin-top:2px; margin-right:15px}
.contact-list li.tel::before {background:url('https://static.hankyung.com/resource/salesforce/img/icon-tel.svg') no-repeat left center/20px 20px}
.contact-list li.email::before {background:url('https://static.hankyung.com/resource/salesforce/img/icon-mail.svg') no-repeat left center/20px 20px}
.contact-list li.help::before {background:url('https://static.hankyung.com/resource/salesforce/img/icon-help.svg') no-repeat left center/20px 20px}
.contact-list li .tit, .contact-list li .txt {display:block}
.contact-list li .tit {font-weight:700; font-size:18px}
.contact-list li .txt {margin-top:6px; font-size:13px}

.product-area .cont-subtit, .question-box .cont-subtit {margin-bottom:20px}
.product-area .product-list.type-card .product-item {border:1px solid #888}
.product-area .product-list.type-card .product-item .name {font-size:24px}
.product-area .product-list.type-card .product-item .price-area strong {margin-right:0; font-size:22px}
.question-box {margin-bottom:40px}

@media \0screen {
    .tit-wrap .cont-tit > em:before {content:'>'; border:none}

    .select-style select {width:100%; height:20px; margin-top:13px; padding:0 15px}
    .select-style:after {display:none}

    .radio-style label {padding-left:0}
    .radio-style label:before {display:none}
    .radio-style .inp_radio {position:static; width:auto; height:auto; margin:0; border:initial; clip:auto;}

    .check-style label {padding-left:0}
    .check-style label:before {display:none}
    .check-style .inp-chk {position:static; width:auto; height:auto; margin:5px 0 0; border:initial; clip:auto; vertical-align:top}

    .btn-action .col2 .btn {max-width:98.5%}
}