@charset "utf-8";

html, body { font-size: 14px; }
body {
    font-family: HelveticaNeue-Light, "Apple SD Gothic Neo", "NanumGothic", "Malgun Gothic", "dotum", "verdana", sans-serif;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -2px;
    color: #000;
}
header, footer, nav, section, article { display: block; }
li { list-style: none; }
img, fieldset { border: none; }
input[type=text], input[type=password], select, textarea {
    height: 23px;
    padding: 0;
    border: 1px solid #bdbdbd;
    background: #fff;
    color: #666;
    font-size: 14px;
    font-family: "맑은고딕", "Malgun Gothic", "돋움", "dotum", "verdana", "sans-serif";
    vertical-align: middle;
    line-height: 23px;
    outline: none;
    resize: none;
}
input, label, button { vertical-align: middle; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { border-color: #4bb2c1; }
select {
    height: 25px;
    margin-left: 0;
    padding: 1px 0 1px;
    line-height: 23px;
    vertical-align: middle;
}
em, address { font-style: normal; }
table {
    *border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    border: 1px #676767 solid;
    background: #fff;
}
h1, h2, h3, h4, h5, h6 {
    font-family: HelveticaNeue-Light, "Apple SD Gothic Neo", "NanumGothic", "MalgunGothic", "dotum", "verdana", sans-serif;
    color: #000;
    font-weight: bold;
}
input[type=checkbox] { padding: 1px; }
input::placeholder, textarea::placeholder {
    color: #666;
    font-size: 13px;
    letter-spacing: -0.5px;
}
a:link, a:visited, a:active {
    text-decoration: none;
    color: #94ebff;
}
a:hover { text-decoration: underline; }
a:focus { color: #00143d; }
caption, legend {
    position: relative;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}
textarea { width: 98%; height: 375px; background-color: #fff; border: 1px solid #00143d; }


/* layout */
#wrap { min-width: 320px; }
#header { margin: 0px auto; padding-top: 100px; width: 100%; z-index: 100; background-color: #000; clip-path: view-box; }
#container { margin: 0px auto; width: 100%; max-width: 1200px; }
#footer { background-color: #000; color: #fff; }

#header p.b { width: 100%; font-size: 37px; font-weight: bold; line-height: 55px; text-align: center; color: #fff; }
#header p.b span { color: #94ebff; }
#header p.s { font-size: 20px; line-height: 30px; width: 100%; text-align: center; letter-spacing: -0.5px; color: #fff; }
#header p.s b { color: #00143d; font-weight: 600; }
#header hr { background-color: #fff; height: 2px; width: 30px; border: none; margin: 28px auto 28px; }
#header .dot_line { height: 1px; width: 100%; margin: 60px auto 70px; }
#header .video { position: absolute; width: 100%; top: 0px; height: 394px; opacity: 0.5; z-index: 0 !important; }
#header .video video { width: 100%; height: 100%; object-fit: cover; }
#header .notVideo { position: relative; }

#container .contents { width: auto; max-width: 1200px; margin: 0 auto; }
#container .contents h2 { width: 100%; font-family: "NanumSquareNeo"; font-size: 22px; text-align: center; margin: 50px 0 22px; font-weight: 500; }
#container .contents .personal { position: relative; max-width: 800px; margin: 0 auto; }
#container .contents .personal ul { position: absolute; font-size: 15px; margin-top: 10px; right: 0px; }
#container .contents .personal li { display: inline-block; }
#container .contents .personal a::after { background: url(/Content/IMG/ico_hpone.svg) no-repeat; padding: 20px; }
#container .contents .personal_text .agree_area { border: 1px solid #00143d; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; letter-spacing: -1px; background: #fff; color: #000; font-size: 13px; padding: 28px 28px; line-height: 22px; }
#container .contents .personal_text .agree_area h3 { font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; font-weight: 400; margin-bottom: 4px; float: left; width: 100%; color: #ccc; }
#container .contents .personal_text .agree_area span { float: left; padding-left: 10px; margin-bottom: 15px; }
#container .contents .personal_text .agree_wrap li { float: left; font-size: 13px; line-height: 23px; }
#container .contents .personal_text .agree_wrap li:first-child { margin-right: 20px; }
#container .contents .personal_text .agree_wrap li input { float: left; width: 16px; margin-right: 5px; }
#container .contents .personal_text .agree_wrap li label { float: left; margin-bottom: 15px; letter-spacing: 0; }

#footer h3, #footer h4 { color: #fff; }
#footer .extra { padding: 50px 0; max-width: 800px; margin: 0px auto; }

.content_in { width: 100%; max-width: 800px; margin: 80px auto; }
.content_in h3 { width: 100%; color: #000; font-size: 18px !important; font-weight: 600 !important; font-family: "NanumSquareNeo"; text-align: left !important; margin: 40px 0 15px; }
.content_in .op_01 { display: grid; grid-template-columns:24% auto; align-items: end; width: 100%; margin-bottom: 25px; letter-spacing: 0rem; }
.content_in .op_01 .op_tit { width: 20%; height: 40px; line-height: 38px; font-weight: 600; border-bottom: 1px solid #00143d; background: #fff; color: #00143d; white-space: nowrap; width: 100%;  }
.content_in .op_01.fixed .op_tit { border-bottom: 0px; }
.content_in .op_01 .op_txt { width: 95%; border-bottom: 1px solid #676767; line-height: 38px; height: 40px; column-gap: 5px; padding-left:5%; }
.content_in .op_01.fixed .op_txt { border-bottom: 0px;  }
.content_in .op_01 .op_txt .in_btn { position: absolute; margin-left: -65px; width: 100px; height: 42px; line-height: 42px; font-weight: 600; color: #fff; text-align: center; background: #00143d; border-radius: 3px; cursor: pointer; }
.content_in .op_01 .selectBox { font-size: 13px; line-height: 38px; border-bottom: 1px solid #676767; }
.content_in .op_01 .selectBox span { color: #379cb0; font-weight: 600; vertical-align: middle; }
.content_in .op_01.fixed .selectBox { border-bottom: 0px; }
.content_in .op_01 .op_txt input { border: none; color: #000; width: 94%; height: 37px; background: #fff; }
.content_in .op_01 .op_txt select { padding: 13px 20px; margin: 0 0 5px 10px; border: 1px #383838 solid; background-color: #fff; }
.content_in .op_01 a:link, .content_in .op_01 a:visited, .content_in .op_01 a:active { text-decoration: none; color: #fff; }
.content_in .op_01 a:hover { text-decoration: underline; }
.content_in .op_01 a:focus { color: #00143d; }
.content_in .op_box .op_01 > *:last-child { padding-left:5%; width: 95% }
.content_in .op_box .op_extra .op_01 { margin-bottom: 10px; }
.content_in .op_box .op_extra .extra { margin-bottom: 25px; }

.end_area .modal { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity: 0.8; z-index: 1; }
.end_area .notice { width: 500px; height: 280px; position: fixed; border-radius: 5px; top: calc(50% - 140px); left: calc(50% - 250px); background: #fff; z-index: 2; padding: 10px; }
.end_area .notice .text_box { height: 200px; border: 1px solid #00143d; text-align: center; align-content: center; font-size: 14px; }
.end_area .notice .after_btn { width: 100%; margin: 25px auto 0; }

.kg_btn_box { display: flex; width: 100%; height: 40px; margin: 25px 0 50px; }

.before_btn { width: 49%; height: 50px; text-align: center; font-size: 17px; font-weight: 600; border-radius: 5px; background: #4d4d4d; line-height: 50px; }
.before_btn a { float: left; width: 100%; height: 100%; text-decoration: none; letter-spacing: 1px; color: #fff; }

.after_btn { width: 49%; height: 50px; text-align: center; font-size: 17px; font-weight: 600; border-radius: 5px; background: #00143d; line-height: 50px; margin-right: 2%; }
.after_btn a { float: left; width: 100%; height: 100%; text-decoration: none; letter-spacing: 1px; color: #fff; }

.extra h4 { font-size: 14px; font-weight: normal; letter-spacing: 1px; color: #676767; }
.extra .text { border: 1px solid #00143d; margin-top: 10px; padding-left: 10px; color: #000; width: 99%; height: 37px; background: #fff; }
.extra .op_01 { margin-top: 25px; }
.extra .op_01 .text { margin-top: 0px; }
.extra textarea.text { height: 500px; }

/* 미디어쿼리 */
@media screen and (max-width: 980px) {
    #header p.b { font-size: 1.8rem; }
    #header p.s { font-size: 1.2rem; }
    #header hr { margin: 20px auto 20px; width: 25px; }
}

@media screen and (max-width: 840px) {
    #container .contents { margin: 0 30px; }

    #footer .extra { margin: 0 30px; }
    
    .content_in .op_01 .op_tit { overflow: hidden; }
}

@media screen and (max-width: 680px) {
    #header p.b { font-size: 1.32rem; }
    #header hr { margin: 8px auto 18px; }

    #container .contents h2 { font-size: 1.4rem; margin: 70px 0 20px !important; }
}

@media screen and (max-width: 420px) {
    #header p.b { font-size: 1.25rem !important; }
    #header p.s { font-size: 0.9rem !important; line-height: 1.6rem; }
    #header hr { margin: 0 auto 10px; width: 20px; }
    #header .dot_line { margin: 40px auto 40px; }

    #container .contents
    #container .contents h2 { font-size: 1.3rem !important; margin: 60px 0 20px !important; }
    #container .contents .personal_text div.agree_area { font-size: 12px; padding: 18px; }
    #container .contents .personal_text div.agree_area h3 { font-size: 14px; font-weight: 600; }
    #container .btn_area { width: 60% !important; height: 50px; line-height: 50px; }

    .before_btn { height: 44px; line-height: 43px; font-size: 14px; }

    .after_btn { height: 44px; line-height: 43px; font-size: 14px; }

    .content_in { margin: 60px auto; }
    .content_in .op_01 { align-items: center; }
    .content_in .op_01 .op_tit { font-size: 0.9rem !important; line-height: 42px !important; border-bottom: 0; }

    .op_box .op_01{ display: grid; grid-template-columns: 1fr; }
    .op_box .op_01 .op_txt, .op_box .op_01 > *:last-child { padding-left: 0; }
}