@charset "utf-8";

/* Sub Visual */
#sub-visual-container { position:relative; display:block; width:100%; height:450px; transition:all .5s; }

#sub-visual-container .sub-visual-title { position:absolute; left:0; top:50%; display:block; width:100%; font-family:'Noto Sans KR', sans-serif; color:#fff; text-align:center; transform: translateY(-20%); }
#sub-visual-container .sub-visual-title dt { margin:0 0 10px; font-size:3.75em; font-weight:500; }
#sub-visual-container .sub-visual-title dt h1{font-weight: inherit;}
#sub-visual-container .sub-visual-title dd { font-size:24px; font-weight:300; letter-spacing:-0.025em; opacity:0.7; }
#sub-visual-container .sub-visual-title dd h2{font-weight: inherit;}
#sub-visual-container .sub-visual-title dd.small_font span { display:block; }

.util-wrap {position: relative; max-width:1204px; margin:0 auto; padding-top:200px; line-height: 1.75;}



/* indicator (LNB) */
.sub-indicator {width:100%;height:50px; margin:0 0 100px; background:#f8f8f8;padding:16px 0 0 35px;-webkit-box-sizing:border-box;box-sizing:border-box;}
.sub-indicator.util {position: absolute; top:100px; left: 0;}
.sub-indicator > ul::after {content:'';display:block;clear:both;}
.sub-indicator > ul > li {float:left;position:relative;padding:0 15px;margin-right:6px;}
.sub-indicator > ul > li:first-child > a {display:inline-block;width:18px;min-width:initial;height:17px;background:url('../png/icon-home.png') no-repeat;}
.sub-indicator > ul > li::after {position:absolute;content:'';width:6px;height:10px;right:-6px;top:5px;background:url('../png/icon-indicator-arrow.png') center no-repeat; z-index:1;}
.sub-indicator > ul > li:last-child::after {display:none;}
.sub-indicator > ul > li:last-of-type::after {display:none;}
.sub-indicator > ul > li > a {position:relative;display:inline-block; min-width:90px;font-size: 14px;font-weight: 400;color:#999;line-height:17px;z-index:9;}
.sub-indicator > ul > li:not(:first-child) > a {padding-right:15px;}
.sub-indicator > ul > li > a::after {position:absolute;content:'';top:6px;right:0;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #999;}
.sub-indicator.util > ul > li > a::after {display:none;}
.sub-indicator > ul > li:first-child > a::after {display:none;}
.sub-indicator > ul > li:hover > a,
.sub-indicator > ul > li.current > a {font-weight: 700;color:#a12642;}
.sub-indicator > ul > li.current > a::after {border-top:4px solid #a12642;}
.sub-indicator > ul > li:hover > a::after,
.sub-indicator > ul > li.current:hover > a::after{border-top:0;border-bottom:4px solid #a12642;}

.sub-indicator .indicator-2depth {display:none;width:100%;position:absolute;top:-10px;left:4px;background:#fff;border:1px solid #ddd;border-radius:4px;padding:40px 20px 5px 10px;z-index:5;box-sizing:border-box;}
.sub-indicator .indicator-2depth > li {padding:8px 0;}
.sub-indicator .indicator-2depth > li > a {font-size: 14px;font-weight: 400;color:#999;}
.sub-indicator .indicator-2depth > li > a:hover {color:#a12642;}
.sub-indicator.mg_none{margin-bottom:0;}

.sub-indicator.absolute-indicator {position:absolute; top:100px; left:0; background:transparent; }
.sub-indicator.absolute-indicator > ul > li:first-child > a {background:url('../png/icon-home-white.png') no-repeat;}
.sub-indicator.absolute-indicator > ul > li > a {color:#fff;}
.sub-indicator.absolute-indicator > ul > li > a::after {border-top:4px solid #fff;}
.sub-indicator.absolute-indicator > ul > li:hover > a,
.sub-indicator.absolute-indicator > ul > li.current > a {color:#a12642;}
.sub-indicator.absolute-indicator > ul > li.current > a::after {border-top:4px solid #a12642;}
.sub-indicator.absolute-indicator > ul > li:hover > a::after,
.sub-indicator.absolute-indicator > ul > li.current:hover > a::after{border-top:0;border-bottom:4px solid #a12642;}


/* Sub Content */
#sub-body-container { display:block; }

.sub-max-inner { max-width:1204px; margin:0 auto; }
.sub-max-inner:after { display:block; content:''; clear:both; }

/* 개인정보 보호정책 */
.util-wrap {padding-bottom:140px;}
.util-wrap h1,
.util-wrap h2 {font-size: 36px;font-weight: 500;color:#222222;text-align:center;margin-bottom:50px;}
.util-wrap p {font-size: 16px;font-weight: 350;color:#666; padding-bottom:10px;}
.util-wrap p span,
.util-wrap p span a {color:#a12642;}
.util-wrap .util-title {font-size: 20px;font-weight: 500;color:#222;margin:30px 0 10px;}
.util-wrap .util-bold-title {font-weight: 500;}
.util-wrap .util-sub-title {font-size: 18px;font-weight: 500;color:#222;margin:30px 0 10px;}
.util-wrap > ul {padding-bottom:10px;}
.util-wrap > ul > li { color:#666; box-sizing: border-box; line-height:1.8em; font-weight:350;}
.util-wrap ul.disc > li { padding-left:18px; background:url('../png/ico_dot.png') left 13px no-repeat; color:#666; box-sizing: border-box; line-height:1.8em; font-weight: 300; }
.util-wrap input{float:left;}
.util-wrap label{display:block; color:#666; padding-bottom:10px; margin-left:25px;  font-weight:350;}
.font_red{color:#a12642;}
.util-wrap input[type=checkbox]:before { content:'d'; text-indent:-99999px; width:16px; height:16px;  display:inline-block; background:url('../png/check_box.png') 0 0 no-repeat; background-color:#fff; }
.util-wrap input[type=checkbox]:checked:before { background:url('../png/checked_box.png') 0 0 no-repeat; background-color:#fff; }
.util-wrap input[type=checkbox].on{ color:#a12642; border-bottom:1px solid #a12642; }
.util-wrap table {display:table; width:100%; border-top:2px solid #ccc; border-bottom:1px solid #ccc; border-spacing:0; text-align:left; margin-bottom:10px;}
.util-wrap th{ height:50px; background-color:#f5f5f5; color:#222; font-size:16px; letter-spacing: -0.03em; font-weight:600; text-align:center; border-bottom:1px solid #eee; border-right:1px solid #eee; }
.util-wrap td{ height:50px; color:#666; border-bottom:1px solid #eee; border-right:1px solid #eee; padding:5px 25px; box-sizing:border-box; text-align:center;  font-weight:350;}
.util-wrap .border{border-top: 1px solid #eee; padding-top:30px; box-sizing:border-box;}
.util-wrap .style-circle {position: relative; padding-left: 20px;}
.util-wrap .style-circle::before {content: '●'; position: absolute; left: 0;}
.util-wrap b {font-weight: 600;}

.tableWrap table{display:table; width:100%; border-top:2px solid #ccc; border-collapse:collapse;}
.tableWrap table caption{position:absolute !important; top:auto; left:-10000px; width:1px; height:1px; overflow:hidden;}
.tableWrap table tr{border-bottom:1px solid #ddd;}
.tableWrap table tr th{height:70px; font-weight:500; background:#f8f8f8; border-right:1px solid #ddd;}
.tableWrap table tr th:last-of-type{border-right:0;}
.tableWrap table tr td{height:50px; padding:10px 20px; border-right:1px solid #ddd; text-align:center; box-sizing:border-box; line-height:1.3;}
.tableWrap table tr td:last-of-type{border-right:0;}
.tableWrap table tr td img{max-width:100%;}

.privacy-policy table, .privacy-policy table td {text-align:left;}
.privacy-policy table td.ta-center {text-align: center;}
/* .privacy-policy table th {padding-left:25px;} */
.table_inner {width: 100%; margin: 0 auto; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.privacy-policy .license_table.privacy {width:2000px;}
.privacy-policy .license_table.privacy th, .privacy-policy .license_table.privacy td {padding:5px 10px;}
.privacy_btn {margin-top:20px;}
.privacy_btn a {color: #a12642;}

.align-center {text-align:center !important;}
.privacy-policy .align-center {text-align:center;}

/* Legal Policy */
.util-wrap.new-cont {color: #666; font-weight: 350;}
.util-wrap.new-cont h3{color: #222; font-weight: 500; font-size: 24px; margin-bottom: 24px;}
.util-wrap .list-type-dot b {font-weight: 500; margin-right: 6px;}
.util-wrap .list-type-dot li::before {background: #999;}
.util-wrap .list-type-dash li::before {margin-left: 0; color: #999;}

.util-wrap section + section {margin-top: 100px;}
.util-wrap .faq_box { display:block; border-top:2px solid #ccc; }
.util-wrap .faq_box > li { font-size:18px; background: url('../png/icon-arrow-down3.png') no-repeat 97% 37px; border-bottom:1px solid #ddd; font-weight: 400;}
.util-wrap .faq_box > li > a { display:block; padding:30px 85px; color:#222; background: url('../png/icon-q.png') no-repeat 30px 35px; }
.util-wrap .faq_box > li > .a_txt { display:none; padding:30px 85px; color:#666; background: url('../png/icon-a.png') no-repeat 30px 37px; background-color:#f8f8f8; }
.util-wrap .faq_box > li.on { background: url('../png/icon-arrow-up2.png') no-repeat 97% 37px; }
.util-wrap .faq_box > li.on > a > span { padding-bottom:5px; color:#a12642; border-bottom:1px solid #a12642; }
.util-wrap .util-sub-tit {color: #222; font-weight: 400;}
.util-wrap .link { font-weight: 500;}


@media screen and (max-width: 890px){
    .util-wrap {font-size: 3.61vw;}

    .util-wrap .faq_box { display:block; border-top:0.27vw solid #ccc; }
    .util-wrap .faq_box > li { font-size:3.88vw; background: url('../png/icon-arrow-down3.png') no-repeat 97% 5.55vw; }
    .util-wrap .faq_box > li > a { display:block; padding:4.16vw 11.11vw; background: url('../png/icon-q.png') no-repeat 2.77vw 5.55vw; }
    .util-wrap .faq_box > li > .a_txt { display:none; padding:4.16vw 0 4.16vw 11.11vw; background: url('../png/icon-a.png') no-repeat 2.77vw 5.55vw; }

    .util-wrap .faq_box > li.on { background: url('../png/icon-arrow-up2.png') no-repeat 97% 37px; }
    .util-wrap .faq_box > li.on > a > span { padding-bottom:5px; color:#a12642; border-bottom:1px solid #a12642; }

    .util-wrap .link,
    .util-wrap .faq_box > li p { word-break: break-all;}
}

.wrap-compliance .list-compl {margin-top: 100px;}
.wrap-compliance .list-compl h2 {font-size: 24px; text-align: left; margin-bottom: 0; font-weight: 600;}
.wrap-compliance .list-compl h3 {font-size: 18px; margin-top: 0;}
.wrap-compliance .list-compl p {margin: 24px 0 32px;} 
.wrap-compliance .list-compl li {margin-bottom: 50px;}
.wrap-compliance .list-compl .wrap-list {border: 1px solid #ededed; padding: 48px 32px; height: 100%; box-sizing: border-box;}
.wrap-compliance a.btn-primary-line, .btn-primary-line {box-sizing: border-box;}



/* default */
/* .new-container {line-height: 1.5;} */
.new-container div, .new-container [class^='btn']{ vertical-align: baseline; box-sizing: border-box;}
.new-container p:not(.cell_name p, .spec_table_main ul li p, .spec_table.spec_content p, .date-area .date, .date-area .yymm, .spec-footnote p, .platform_app_list p) { color: #666; font-size: 18px; line-height: 1.75;}
.new-container .date:not(.date-area .date){ color: #666;}
.new-container figure img {width: 100%; height: auto;}
.sub-body-container {margin: 0 0 150px;}
.material-icons{ font-size: inherit; vertical-align: middle;}

/* typography */
a.link{color:inherit; text-decoration: underline; font-weight: 600;}
.t-red{color:#a12642;}
.t-blue{color:#0058aa;}
.t-right{text-align: right;}
.t-center{text-align: center;}
.mainetc {display: block; color:inherit; padding-left:15px; font-size:85%; position:relative; line-height:1.5;}
.mainetc:before {content:"* "; position:absolute; left:0;}
.mainetc.double:before {content:"** ";}
.sub-txt-etc ul li{line-height: 1.5;}
.sub-txt-etc ul + ul{ margin-top: 12px;}
.sub-txt-etc .content {font-size: 75%; position: relative; padding-left:15px;}
.sub-txt-etc .content::before{ content:"-"; position:absolute; left:4px;}
.txt-info {position: relative; padding-left: 26px;}
.txt-info::before{font-size: 1.15em; content:'verified_user'; font-family: 'Material Icons'; position: absolute; left: 0; top: 1px; display: inline-block; }
.ico_gray{color: #ccc;}
.wrap-video .cookie-info-txt {height: 100%;background: #eee;display: table;padding: 20px;}
.wrap-video .cookie-info-txt p{display: table-cell; vertical-align: middle; text-align: center;}

.list-type-dash li{position: relative; padding-left: 16px; margin-bottom: 6px;}
.list-type-dash li::before{content: '-'; margin-left: 4px; position: absolute; left: 0;}
.list-type-dot li{position: relative; padding-left: 16px;}
.list-type-dot > li::before{content: ''; width:5px; height: 5px; border-radius: 50%; background: #666; margin-right: 4px; position: absolute; left: 0; top: 11px;}
.list-type-check li{position: relative; padding-left: 24px; margin-bottom: 6px;}
.list-type-check > li::before{font-size: 1em; content: 'done'; font-family: 'Material Icons'; position: absolute; left: 0;color: #a12944;}

/* Grid */
.row { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -16px; margin-left: -15px; box-sizing: border-box;}
.row.align-center {align-items: center;}
.col {-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; -webkit-box-flex: 1; flex-grow: 1; max-width: 100%; box-sizing: border-box;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col{ position: relative; width: 100%; padding-right: 16px;padding-left: 16px; box-sizing: border-box;}
.col-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
  
.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
}

.col-4 {
  -ms-flex: 0 0 33.333%;
  flex: 0 0 33.333%;
  max-width: 33.333%;
  box-sizing: border-box;
}

.col-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/* button */
a.btn-primary,
.btn-primary { background: #a12944; color: #fff; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500;transition: all .5s; line-height: 1.5;}
.btn-primary:hover {background: #7a1f33;}
a.btn-primary-line,
.btn-primary-line { background: none; color: #a12944; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500; border: 1px solid #a12944; transition: all .5s; line-height: 1.5;}
.btn-primary-line:hover {background: #a12944; color: #fff;}
a.btn-secondary,
.btn-secondary { background: #222; color: #fff; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500; transition: all .5s;}
.btn-secondary:hover {background: #000;}
a.btn-secondary-line,
.btn-secondary-line { background: none; color: #222; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500; border: 1px solid #222;transition: all .5s;}
.btn-secondary-line:hover {background: #000; color: #fff;}
a.btn-white,
.btn-white { background: #fff; color: #222; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500;transition: all .5s;}
.btn-white:hover {background: #a12944; color: #fff;}
a.btn-white-line { background: none; color: #fff; padding: 16px 36px; border-radius: 32px; display: inline-block;font-weight: 500; border: 1px solid #fff; transition: all .5s;}
a.btn-white-line:hover {background: #fff; color: #a12944;}

.btn .material-icons,
.btn-secondary-line .material-icons {margin-left: 16px;}

a.blue-link,.blue-link { color: #0782C1;}
a.btn-lg, .btn-lg {min-width: 274px; font-size: 20px; padding: 1vw 4vw; box-sizing: border-box;}
a.ico-link,.ico-link { color: #0782C1; font-weight: 500;position: relative; padding-left: 24px; display: inline-block; box-sizing: border-box; line-height: 1.4; font-size: 18px;}
.ico-link:hover { text-decoration: underline;}
a.ico-link::before { content:'open_in_new'; font-family: 'Material Icons'; position: absolute; left: 0; top: 1px; display: inline-block;}
.btm-btn-grp { text-align: center; padding-top: 40px; margin-top: 100px; border-top: 1px solid #ddd;}
a.txt-primary, .txt-primary {color: #a12944; font-weight: 600; font-size: 18px;}
a.txt-white, .txt-white {color: #fff; font-weight: 500; font-size: 18px;}

@media screen and (max-width: 890px){

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col{ -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}    
    .new-container p, .ico-link, h6 {font-size: 2.5vw;}
    
    a.btn-lg {width: 100%; line-height: 10.55vw; font-size: 3.88vw; border-radius: 8.27vw; padding: 1.5vw 4vw;}
    #wrap .new-container .date { font-size: 3.88vw;}
    a.btn, .btn,a.btn-primary,.btn-primary,
    a.btn-primary-line, .btn-primary-line {font-size: 2.5vw;; width: 100%; text-align: center;padding: 2vw 4vw; }

    .col-md-6 {-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;}
}

@media screen and (max-width: 576px){ 
    .hub-container .txt .content p,  
    .ico-link, h6, .new-container p {font-size: 3.88vw;}
    a.btn, .btn, a.btn-primary-line,.btn-primary-line,
    a.btn-primary,.btn-primary {padding: 3vw 6vw; font-size: 4vw; }   
    .icon-share img{ width: 10vw; height: auto;}
}

[id^="note"] {scroll-margin-top: 150px;}
.note-section {border-top: 1px solid #ccc;}
.note-section .container {padding-top: 24px;}