@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/NotoSansKR-Thin.woff2) format('woff2'),
    url(../fonts/NotoSansKR-Thin.woff) format('woff'),
    url(../fonts/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    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: 'Noto Sans KR';
    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: 'Noto Sans KR';
    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: 'Noto Sans KR';
    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: 'Noto Sans KR';
    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');
}
 */
* {
   /* font-family: "Noto Sans KR", sans-serif;*/
    color: #000;
    font-size: 16px;
    line-height: 100%;
    padding: 0;
    margin: 0;
    word-break: keep-all;
    box-sizing: border-box;
    font-smoothing: antialiased;
}
:root {
    --mainBlue: #193b8c;
    --mainGray: #eee;
    --mainBg: #f2f5fa;
    --bgBtn: #f9fcfe;
    --orange: #fe6700;
    --black: #333;
    --gray: #666;
    --foot01: #19376c;
    --foot02: #163060;

    --iconGray: #afbbca;
    --ft-lightGray: #7b8796;
    --ft-gray: #586575;
    --ft-dark: #303c4b;
    --ft-foot: #acb9cb;
    --border: #e6e9ec;
    --borderBtn: #d9dfe2;
    --borderInt: #ebedf2;
    --borderCh: #d7dae2;
    --bg-th: #fbfdff;

    --font-family: "Noto Sans KR", sans-serif;
    --some-variable-name: 1px;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 600;
}
body {overflow-y: scroll;}
div, span, strong, em, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, td, abbr, acronym, address, big, cite, code, ins, small, sub, sup {
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
}
div img, dl img, dt img, dd img, ul img, ol img, li img, h1 img, h2 img, h3 img, h4 img, h5 img, h6 img, pre img, form img, fieldset img, input img, textarea img, p img, blockquote img, th img, td img {
    font-size: 0;
    line-height: 0;
}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul, li {margin: 0;padding: 0;list-style: none;}
ul, menu, dir {
    -webkit-margin-before: 0 !important;
    -webkit-margin-after: 0 !important;
    -webkit-margin-start: 0 !important;
    -webkit-margin-end: 0 !important;
}
h1, h2, h3, h4, h5, h6, th, td {font-weight: normal;font-size: 100%;}
form, fieldset, a img {border: 0;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
address, abbr, address, big, cite, code, ins, small, sub, sup, em {font-weight: normal;font-style: normal;}
sup, sub {color: inherit;}
blockquote, q {quotes: none;}
caption {display: none;}
input, textarea, select {background: #fff;}
input, textarea, select, img {vertical-align: middle;}
img {background: none;image-rendering: -webkit-optimize-contrast;}
a img, img {vertical-align: middle;}
time, progress, mark, output {display: inline;}
a {text-decoration: none;cursor: pointer;}
a img {border: 0;}
img, input, select {vertical-align: middle;outline: none;}
button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    outline: none;
}
textarea {resize: none;outline: none;}

.btn-bg{
    height:45px;
    line-height: 45px;
    padding:0 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bolder;
    letter-spacing: 4px;
    color:#fff;
}
.btn-180{width:180px;}
/* 흰색 버튼 */
.btn-bg-w {border:1px solid rgba(0, 0, 0, 0.2);background:#fff; transform: skew(0.2deg);font-weight: 600;}
.btn-bg-w:hover {background:#ebeef4;}
.btn-bg-w.dis {background:#fff;cursor:default;opacity:0.5;}

/* blue btn */
.btn-blue {
    display: inline-block;
    background: #193b8c;
}
.btn-orange{
    display: inline-block;
    background: #fe6700;
}
.btn-blue:hover,
.btn-orange:hover {opacity:0.8;}
/*.btn-bg-w2:hover {background:#ebeef4;}*/
/*.btn-bg-w2.dis {background:#fff;cursor:default;opacity:0.5;}*/

/* oragnge btn */

.btn-bg-cb:hover {opacity:0.8;}
.btn-bg-cb.dis {background:#ccc;cursor:default;color:#fff;opacity:1 !important;border:0;}

/* 흰색 버튼-none border */
.btn-bg-w-nb {background:#fff;transform: skew(0.2deg);font-weight: 600;}
.btn-bg-w-nb:hover {opacity:0.8;}
.btn-bg-w-nb.dis {background:#fff;color:#000;cursor:default;opacity:0.2;}

/* 코발트 버튼 */
.btn-bg-c {background: #4275df;color:#fff;text-align:center;transform: skew(0.2deg);font-weight: 600;}
.btn-bg-c:hover {background:#3867c6;}
.btn-bg-c.dis {background:#cccccc;cursor:default;color:#fff;}

/* 파랑색 텍스트 */
.text-cl-blue {color:#3867c6;font-weight: 600;display: inline-block;transform: skew(0.2deg);}
.text-cl-blue:hover {opacity:0.5;}
.text-cl-blue.dis {color:#3867c6;opacity:0.5;}


/* 아이콘들 */
.ico-change-region {
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 0;
    width: 19px;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-download{
    display: inline-block;
    background: url(../img/icon-foot.png) no-repeat 0 -7px;
    width: 21px;
    height: 12px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-news{
    display: inline-block;
    background: url(../img/icon-foot.png) no-repeat 0 -68px;
    width: 21px;
    height: 19px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-contact{
    display: inline-block;
    background: url(../img/icon-foot.png) no-repeat 0 -131px;
    width: 21px;
    height: 15px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-home{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -51px;
    width: 17px;
    height: 17px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-email{
    display: inline-block;
    background: url(../img/icon-common.png)  no-repeat 0 -168px;
    width: 22px;
    height: 14px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-website{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -227px;
    width: 18px;
    height: 17px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-call{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -106px;
    width: 20px;
    height: 19px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-detail{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -288px;
    width: 19px;
    height: 19px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}
.ico-note{
    position:absolute;
    left:64px;
    top:50px;
    display: inline-block;
    background: url(../img/icon-note.png) no-repeat 0 0;
    width: 75px;
    height: 97px;
    vertical-align: middle;
    margin: 0 20px 0 0;
}
.ico-add{
    display: inline-block;
    background: url(../img/btn-add.png) no-repeat 0 -42px;
    width: 41px;
    height: 41px;
    vertical-align: middle;
}
div:hover > .ico-add,
a:hover > .ico-add{
    background: url(../img/btn-add.png) no-repeat 0 0;
}
.ico-play{
    display: inline-block;
    background: url(../img/btn-play.png) no-repeat 0 -46px;
    width: 45px;
    height: 45px;
    vertical-align: middle;
}
div:hover > .ico-play,
a:hover > .ico-play{
    background: url(../img/btn-play.png) no-repeat 0 0;
}
.ico-arrow{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -370px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
}
.ico-arrow02{
    display: inline-block;
    background: url(../img/icon-common.png) no-repeat 0 -469px;
    width: 34px;
    height: 34px;
    vertical-align: middle;
}
sup{
    font-size: 20px!important;
}
.lt-spacing{letter-spacing: -1px;}
.txt-etc {font-size: 13px;}
.txt-unline {text-decoration: underline;}
.ft-900 {font-weight: 900 !important;}
.ft-700 {font-weight: 700 !important;}
.ft-500 {font-weight: 500 !important;}
.ft-400 {font-weight: 400 !important;}
.ft-300 {font-weight: 300 !important;}
.ft-100 {font-weight: 100 !important;}
.ft-10 {font-size: 10px !important;}
.ft-14 {font-size: 14px !important;}
.ft-18 {font-size: 18px !important;}
.ft-20 {font-size: 20px !important;}
.ft-22 {font-size: 22px !important;}
.ft-24 {font-size: 24px !important;}
.ft-28 {font-size: 28px !important;}
.ft-30 {font-size: 30px !important;}
.ft-38 {font-size: 38px !important;}

.ft-bold {font-weight: bold!important;}
.min-h300{
    min-height: 300px;
}
.min-h168{
    min-height:150px !important;
}
.txt-blue {
    color: #193b8c!important;
}
.txt-orange{
    color: #fe6700!important;
}
.txt-p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.5px;
}
.line-h200{
    line-height: 200% !important;
}
.tx-deco-unline{
    text-decoration: underline !important;
}
.txt-white {color: #fff!important;}
.fc-6 {color: #666 !important;}
.fc-9 {color: #999 !important;}
.ft-basic {color: #333 !important;}
.white-space {white-space: pre-line;}
.clearfix {*zoom: 1;}
.clearfix:after {content: '';display: block;clear: both;}
.dp-non {display: none!important;}
.dp-block {display: block!important;}
.dp-inline {display: inline-block!important;}
/* ui */
div .tc {text-align: center !important;}
div .tl {text-align: left !important;}
div .tr {text-align: right !important;}
div .fl {float: left!important;}

div .fr {float: right!important;}
div .fn {float: none!important;}
.bor-non{
    border:none!important;
}
.bor-bt-non{
    border-bottom:none!important;
}
.bor-hr-top{
    border-top: 2px solid #e2e2e2;
}
.bor-hr-bottom{
    border-bottom: 2px solid #e2e2e2;
}
.bor-hr-top-1px{
    border-top: 1px solid #e2e2e2;
}
.bor-hr-bot-1px{
    border-bottom: 1px solid #e2e2e2;
}
.over-unset{
    overflow: unset!important;
}
.table {
    width: 100%;
    margin: 20px 0;
    overflow-x: scroll;
}
.table th {
    padding: 5px;
    background: #19376c;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-right:1px solid #cacaca;
    border-bottom:1px solid #cacaca;
}
.table td{
    padding: 5px;
    border-bottom: 1px solid #dadada;
    border-right:1px solid #cacaca;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    color: #666;
}
.table td.tl{
    padding: 14px 20px 20px;
}
.table td img{
    width: 100%;
}
.table tr:nth-child(odd){
    background: #eee;
}
.table tr td:last-child{
    border-right: none;
}
.table.tb-white{
    border-left:1px solid #cacaca;
}
.table.tb-white tr td:last-child{
    border-right:1px solid #cacaca;
}
.table.tr:nth-child(even){
    background: #fff;
}
.tab-list{

    width: 100%;
}
.tab-list ul{
    overflow: hidden;
}
.tab-list ul li{
    float: left;
    width: 25%;
}
.tab-list ul li a{
    text-align: center;
    width: 100%;
    float: left;
    min-height:48px;
    font-size:16px;
    padding: 14px 0 12px;
    font-weight: 400;
    color:#999;
    display: block;
    background: #fafafa;
    border: 1px solid #e4e4e6;
    border-left:none;
    border-bottom: 1px solid #666;
}
.tab-list ul li:first-child a{
    border-left: 1px solid #e4e4e6;
}
.tab-list ul li:hover a,
.tab-list ul li.selected a{
    border: 1px solid #666;
    font-weight: 600;
    border-bottom: 1px solid #fff;
    background: #fff;
    color: #fe6700;
}
.mt-00 {margin-top: 0px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-12 {margin-top: 12px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-40 {margin-top: 40px !important;}
.mt-50 {margin-top: 50px !important;}
.mt-60 {margin-top: 60px !important;}
.mb-00 {margin-bottom: 0px !important;}
.mb-06 {margin-bottom: 6px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-12 {margin-bottom: 12px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.mb-60 {margin-bottom: 60px !important;}
.mb-70 {margin-bottom: 70px !important;}
.mb-80 {margin-bottom: 80px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-24 {margin-left: 24px !important;}
.ml-30 {margin-left: 30px !important;}
.ml-40 {margin-left: 40px !important;}
.mr-00 {margin-right: 0 !important;}
.mr-10 {margin-right: 10px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-30 {margin-right: 30px !important;}
.mr-40 {margin-right: 40px !important;}
.pt-00 {padding-top: 0 !important;}
.pt-10 {padding-top: 10px !important;}
.pt-12 {padding-top: 12px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-50 {padding-top: 50px !important;}
.pt-60 {padding-top: 60px !important;}
.pt-70 {padding-top: 70px !important;}
.pt-80 {padding-top: 80px !important;}
.pb-00 {padding-bottom: 0 !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pb-30 {padding-bottom: 30px !important;}
.pb-40 {padding-bottom: 40px !important;}
.pb-50 {padding-bottom: 50px !important;}
.pb-60 {padding-bottom: 60px !important;}
.pb-70 {padding-bottom: 70px !important;}
.pb-80 {padding-bottom: 80px !important;}

.w-360{
    width:360px !important;
}
.w-250{
    width:250px !important;
}