@charset "utf-8";
@import url("http://fonts.googleapis.com/earlyaccess/notosanskr.css");

@font-face {
    font-family: "Noto Sans KR";
    src: url("./fonts/NotoSansKR-Light.woff") format("woff"), url("./fonts/NotoSansKR-Light.woff2") format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: "Noto Sans KR";
    src: url("./fonts/NotoSansKR-DemiLight.woff") format("woff"), url("./fonts/NotoSansKR-DemiLight.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Noto Sans KR";
    src: url("./fonts/NotoSansKR-Medium.woff") format("woff"), url("./fonts/NotoSansKR-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Noto Sans KR";
    src: url("./fonts/NotoSansKR-Bold.woff") format("woff"), url("./fonts/NotoSansKR-Bold.woff2") format("woff2");
    font-weight: 600;
}

* {
    word-break: keep-all;
    word-wrap: break-word;
    font-family: "Noto Sans KR", sans-serif;
    -webkit-font-smoothing: antialiased;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

p {
    display: block;
}
body {height:100%;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius:0;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=text], input[type=number]{ height:54px;color:#555}
select{appearance: none;-moz-appearance: none;-webkit-appearance: none;width:100%;height:48px;padding:0 10px;border:1px solid #c8c8c8;background:#fff;border-radius:4px}
select::-ms-expand{display: none;}

*:focus { outline:none; }

a {text-decoration: none;}
button, input{vertical-align:middle}
button {
    cursor: pointer;
    background: transparent;
    vertical-align: middle;
    font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #222;
    letter-spacing: 0;
    -webkit-text-size-adjust: none;
    -webkit-appearance: none;
}

button:disabled .btn__text {
    opacity: .5;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
img{display:block;vertical-align:top}
html {font-family:  'Noto Sans KR', sans-serif; letter-spacing:-0.5px}
body { font-family:  'Noto Sans KR', sans-serif; line-height:1.5; vertical-align: middle;font-size:14px;font-weight:400; }
div{box-sizing: border-box}
select:focus{border-color:#222}

::-webkit-input-placeholder{font-size:13px;color:#aaa}
::placeholder{font-size:13px;color:#aaa}
::-ms-input-placeholder{font-size:13px;color:#aaa}

h1{font-size:42px;}
h2{font-size:25px;}
strong {font-weight:600}

.C{text-align:center !important}
.L{text-align:left !important}
.mg-t10{margin-top:10px !important}
.mg-t15{margin-top:15px !important}
.mg-t50{margin-top:50px !important}
.w50{width:50% !important}

.db-414{display:inline}
.bdr-b0{border-bottom:0 !important}

.doyose-bg{background:#f5f6f7}
.doyo-form-wrap{max-width:960px;height:100%;margin:50px auto;background:#fff;padding:50px;border-radius:30px;    box-shadow: 0 0 25px rgb(220 220 220);}
.doyo-form-wrap .title{position:relative;padding:50px 0 25px; border-bottom: 3px solid #222; font-size: 40px; font-weight: 400; line-height:1.2; letter-spacing:-1.2px}
.doyo-form-wrap .title strong{font-size:48px;font-weight:500}
.doyo-form-wrap .title img{width:250px;position:absolute;bottom:0;right:0}
.doyo-form-wrap h2{font-size:20px;font-weight:500}
.doyo-form-wrap .doyo-form{margin:20px 0}
.comment{margin:15px 0 30px;text-align:right;font-size:15px;color:#3d3d3d}
.at{display:inline-block;font-size:16px;width:4%;text-align:center}
.sel-label{margin:20px 0 10px;font-size:16px; color:#3d3d3d;}
.ess{display:inline-block;position:relative;}
em{display:inline-block; font-size:0; margin-left:5px;width: 5px;height: 5px; border-radius: 50%;background-color: #e50032;vertical-align:middle}
.form-row { position:relative;margin:20px 0 0;font-size:0}
.form-row .input-type { box-sizing:border-box; padding:20px 0 10px 100px; width:100%; height:100%; border:0 none; font-size:15px; color:#595f63; outline:none; }
.form-row.fm-input label { position:absolute; left:0; bottom:-5px; width:100%; height:100%; border-bottom:2px solid #e5e5e5; text-align:left; pointer-events:none; }
.form-row.fm-input label:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:100%; border-bottom:2px solid #222; transition:all .3s ease; }
.form-row.fm-input label span { position:absolute; font-size:16px; color:#3d3d3d; left:0; bottom:10px; transition:all .3s ease; }
.form-row.fm-input .input-type:focus, .form-row.fm-input .input-type:valid {padding:20px 0 11px}
.form-row.fm-input .input-type:focus + label span,
.form-row.fm-input .input-type:valid + label span { transform:translateY(-150%); font-size:14px; color:#929292; }
.form-row.fm-input .input-type:focus + label::after,
.form-row.fm-input .input-type:valid + label::after {width:100%; transform:translateX(0);}

.form-row.fdiv div{display:inline-block}
.form-row.fdiv div+div{margin-left:30px}

.form-agree{margin-top:20px}
.form-agree dt{position:relative;padding:20px 0;border-bottom:1px solid #e5e5e5;cursor:pointer}
.form-agree dt .arr-view{position:absolute;width:100px;height:100%;right:10px;top:0;font-size:0;color:#3d4370;text-align:right;display:inline-block}
.form-agree dt .arr-view:after{content:'';display:inline-block;margin-left:10px;width:14px;height:100%;background:url('./images/bg_arrow.png') no-repeat right 50%;transform: rotate(-180deg)}
.form-agree dt.active{border-bottom:0}
.form-agree dt.active .arr-view:after{transform: rotate(0deg)}
.form-agree dd{display:none;font-size:16px}

.terms__wrap {
    overflow: hidden;
    padding: 10px;
    padding-right: 4px;
    height: 200px;
    border-radius: 12px;
    border: 2px solid #e5e5e5;
    line-height: 1.6;
    box-sizing: border-box;
}

.terms__inner {
    overflow-y: scroll;
    padding: 13px 0 13px 12px;
    height: 100%;
    box-sizing: border-box;
}

/* Table style */
caption, input[type="radio"], input[type="checkbox"] {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    font-size: 1px;
    line-height: 0;
}
.table__wrap {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

.table__wrap th, .table__wrap td {
    padding: 17px 5px 18px;
    border-left: 1px solid #e5e5e5;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    text-align: center;
}

.table__wrap th:first-of-type, .table__wrap td:first-of-type {
    border-left: none;
}

.table__wrap th.border--left, .table__wrap td.border--left {
    border-left: 1px solid #e5e5e5 !important;
}

.table__wrap thead {
    border-bottom: 1px solid #ddd;
}

.table__wrap thead th {
    font-size: 18px;
    color: #222;
    border-left: 1px solid #e5e5e5;
}

.table__wrap thead th:first-of-type {
    border-left: none;
}

.table__wrap thead tr + tr {
    border-top: 1px solid #e5e5e5;
}

.table__wrap tbody tr {
    border-top: 1px solid #e5e5e5;
}

.table__wrap tbody tr:first-of-type {
    border-top: none;
}

.table__wrap tbody th {
    font-size: 18px;
    font-weight: 400;
    color: #222;
    border-left: 1px solid #e5e5e5;
}

.table__wrap th.bg{background:#f9f9f9}

.table__wrap tbody th:first-of-type {
    border-left: none;
}

.table__type--mix2 thead th {
    font-size: 16px;
    background: #f9f9f9;
}

.table__type--mix2 thead tr.thead__point th {
    font-size: 18px;
    background: #eee;
}

.table__type--mix2 tbody th,
.table__type--mix2 tbody td {
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

.table__type--mix2 tbody td:first-of-type {
    border-left: 1px solid #e5e5e5;
}

/* Form Style */
.input__box {position:relative}
.input__box .input-type{width:100%; height:100%;  padding:20px 0 10px;border-bottom:2px solid #e5e5e5; text-align:left; }
.input__box .input-type:focus{border-bottom:2px solid #222; transition:all .3s ease;}
.input__group.zipcode {
    display: flex;
}

.input__group.zipcode .input__box {
    flex: 1;
}

.input__group.zipcode .input__box + .btn__square {
    margin-left: 20px;
}

.select-type{display: inline-block;width:28%;position: relative;border-bottom:#e5e5e5}
.select-type:after{
    content:'';
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 10px;
    transform: translate(0,-50%);
    width: 0;
    height: 0;
    border:5px solid #222;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:none;
}

.check__box,
.radio__box {
    position: relative;
}

.radio__wrap .radio__box {
    display:inline-block;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 38px;
    height:28px;
    font-size:16px;
    color: #222;
}

input[type="radio"] + label{margin:0 20px 5px 0}

input[type="radio"] + label:before {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ddd;
    box-sizing: border-box;
}

input[type="radio"]:checked + label:before {
    border-color: #e50032;
    background: #e50032;
}

input[type="radio"]:checked + label:after {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

.check__box{display:inline-block}
input[type="checkbox"] + label{
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 38px;
    font-size:18px;
    color: #222;
}


input[type="checkbox"] + label:before {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid #ddd;
    box-sizing: border-box;
}

input[type="checkbox"]:checked + label:before {
    border: #e50032;
    background: #e50032;
}

input[type="checkbox"]:checked + label:after {
    content: '';
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: url("./images/bg_checkbox_chk.png") no-repeat center/100% auto;
}

/*.radio-type {  display:none;}
.radio-type + label{font-size:15px;margin-right:15px}
.radio-type + label  span {
    display:inline-block;
    width:28px;
    height:28px;
    margin:0 7px 0 0;
    vertical-align:middle;
    background:url('./images/checkbox_bg.png') 0 -28px no-repeat;
    background-size:28px;
    cursor:pointer;
}
.radio-type:checked + label span {
    background:url('./images/checkbox_bg.png') 0 0 no-repeat;background-size:28px;
}*/

/* Button Style */
.btn__wrap {
    display: flex;
    justify-content: center;
}

a[class^="btn__"], button[class^="btn__"] {
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    font-weight: 400;
}
a[class*="--type3"], button[class*="--type3"] {
    background: #6e707d;
    border-color: #6e707d;
}

[class^="btn__default"] {
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
}

[class^="btn__small"], .btn__small, [class^="btn__xsmall"], [class^="btn__default"] {
    height: 50px;
    border-radius: 25px;
    border: 2px solid transparent;
    padding: 0 38px;
    color: #fff;
    font-size: 18px;
}

.btn__text {
    text-align: center;
}

[class^="btn__small"] .btn__text,
.btn__small .btn__text,
[class^="btn__xsmall"] .btn__text,
[class^="btn__default"] .btn__text {
    display: inline-block;
    position: relative;
    top: -2px;
    color: inherit;
    font-size: inherit;
}

[class^="btn__small"]:not(.disabled):hover, [class^="btn__small"]:not(.disabled):focus,
.btn__small:not(.disabled):hover,
:not(.disabled):hover[class^="btn__xsmall"],
:not(.disabled):hover[class^="btn__default"],
.btn__small:not(.disabled):focus,
:not(.disabled):focus[class^="btn__xsmall"],
:not(.disabled):focus[class^="btn__default"] {
    background: #fff;
}

[class^="btn__large"] {
    height: 80px;
    border-radius: 40px;
    font-size: 24px;
}

a[class*="--type00"], button[class*="--type00"] {
    width:300px;
    background: #e50032;
    color:#fff
}


.btn__wrap.full {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.btn__wrap.full [class^="btn__"] {
    flex: 1;
}

.btn__square {
    padding: 0 40px;
    height: 50px;
    border-radius: 10px;
    font-size: 16px;
    background: #6e707d;
}

.btn__square .btn__text {
    font-size: 16px;
    color: #fff;
}

.btn__square:hover, .btn__square:focus {
    background-color: #e50032;
}

a[class*="--type1"], button[class*="--type1"] {
    background: #e50032;
}

a[class*="--type3"]:hover, a[class*="--type3"]:focus, button[class*="--type3"]:hover, button[class*="--type3"]:focus {
    border: 2px solid #6e707d;
    color: #6e707d;
}

a[class*="--line"]{width:200px; background: #fff;border: 2px solid #6e707d; color: #6e707d;}

*::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background-color: #fff;
    border: 6px solid #fff;
}

*::-webkit-scrollbar-thumb {
    background: #666;
    border-top: 0;
    border-bottom: 0;
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:active {
    height: 3px;
}

*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment {
    display: block;
    width: 0;
    height: 0;
    background-color: transparent;
}
@media screen and (max-width: 960px) {
    .doyo-form-wrap {margin:15px; }
}

@media screen and (max-width: 800px) {
    .doyo-form-wrap .title{padding:20px 0 15px}
    .doyo-form-wrap .title img{width:200px}
}

@media screen and (max-width: 640px) {
    .doyo-form-wrap {border-radius:15px;padding: 15px; }
    .doyo-form-wrap .title{padding: 20px 0 0;text-align:center;font-size:30px}
    .doyo-form-wrap .title strong{font-size:40px;font-weight:500}
    .doyo-form-wrap .title img{position:relative;bottom:auto;right:auto;padding-top:20px;margin:0 auto}

    h2.mg-t50{margin-top:35px !important}
    .btn__square {height:40px;padding: 0 20px;}
}

@media screen and (max-width: 414px) {
    input[type="radio"] + label{height:auto}
    input[type="radio"]:checked + label:after {top:7px;transform:translateY(0)}
    .db-414{display:block}
    .select-type.w50{width:100% !important}
}