@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/*@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 300;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
    src: local("Lato"), url("../fonts/Lato-Light.ttf");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
    src: local("Lato"), url("../fonts/Lato-Regular.ttf");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 500;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
    src: local("Lato"), url("../fonts/Lato-Bold.ttf");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;
    src: local("Lato"), url("../fonts/Lato-Black.ttf");
}*/

/* font */
/*@font-face {
    font-family: "Noto Sans CJK KR";
    font-style: normal;
    font-weight: 300;
    src: local("Noto Sans CJK KR"), url(../fonts/NotoSansCJKkr-Light.otf), url(../fonts/NotoSansCJKkr-Light.woff);
}
@font-face {
    font-family: "Noto Sans CJK KR";
    font-style: normal;
    font-weight: 400;
    src: local("Noto Sans CJK KR"), url(../fonts/NotoSansCJKkr-Regular.otf), url(../fonts/NotoSansCJKkr-Regular.woff);
}
@font-face {
    font-family: "Noto Sans CJK KR";
    font-style: normal;
    font-weight: 500;
    src: local("Noto Sans CJK KR"), url(../fonts/NotoSansCJKkr-Medium.otf), url(../fonts/NotoSansCJKkr-Medium.woff);
}
@font-face {
    font-family: "Noto Sans CJK KR";
    font-style: normal;
    font-weight: 700;
    src: local("Noto Sans CJK KR"), url(../fonts/NotoSansCJKkr-Bold.otf), url(../fonts/NotoSansCJKkr-Bold.woff);
}*/


/* reset */
body * {box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
fieldset,img {border: 0 none;}
dl,ul,ol,menu,li {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: "";content: none;}
input,select,textarea,button {vertical-align: middle;-webkit-appearance: none;font-family:"Noto Sans CJK KR", sans-serif;}
button {border: 0 none;background-color: transparent;cursor: pointer;}
body {color: #fff;line-height:1.6;background: #23232b;font-size: 14px;font-family:"Noto Sans CJK KR",sans-serif;letter-spacing: -0.1em;}
body,th,td,input,select,textarea,button {color:#fff;font-size: 14px;}
a {color: inherit;text-decoration: none;}
address,caption,cite,code,dfn,em,var {font-style: normal;font-weight: normal;}
span {display: inline-block;}
img {display:block;max-width: 100%;margin: 0 auto;}

/* common */
.screen_wrap {max-width:540px;margin:0 auto;}
.inner {padding:0 36px;}
.inner_2 {padding: 0 20px;}
.screen_out {position: absolute;top: -9999em;left: -9999em;width: 1px;height: 1px;overflow: hidden;text-indent: -9999em;}
.l_area {position: absolute;left: 20px;}
.r_area {position: absolute;right: 20px;}
.c_area {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

/* text transform */
.txt_lower {text-transform: lowercase;}
.txt_upper {text-transform: uppercase;}
.txt_capital {text-transform: capitalize}

/* txt */
.txt_box {text-align: center;}
.txt_box .logo_img {width: 120px;margin: 0 auto 10px;}
.txt_box .desc {color: #bec5ce;}
.txt_box .desc.mini {font-size: 12px;color: #bec5ce;}

/* text align */
.align_l {text-align: left;}
.align_r {text-align: right;}
.align_c {text-align: center;}
.align_j {text-align: justify;}

/* font color */
.fc_blue {color: #5fd7ff;}
.fc_white {color: #fff;}
.fc_hotpink {color: #fb5372;}

/* font size */
.fs_10 {font-size: 10px;}
.fs_11 {font-size: 11px;}
.fs_12 {font-size: 12px;}
.fs_13 {font-size: 13px;}
.fs_14 {font-size: 14px;}
.fs_16 {font-size: 16px;}

/* font weight */
.fw_light {font-weight: 300;}
.fw_bold {font-weight: 500;}
.fw_bbold {font-weight: 700;}

/* space */
.mb_4 {margin-bottom: 4px !important;}
.mb_8 {margin-bottom: 8px !important;}
.mb_10 {margin-bottom: 10px !important;}
.mb_20 {margin-bottom: 20px !important;}
.mt_0 {margin-top: 0 !important;}
.mt_20 {margin-top: 20px !important;}
.mt_50 {margin-top: 50px !important;}

/* list type */
.list_type_star li {position: relative;line-height: 1.45;padding-left: 10px;color: #bec5ce;font-size: 12px;}
.list_type_star li + li {margin-top: 10px;}
.list_type_star li::after {content: '*';display: block;position: absolute;top:3px;left: 0;}

/* 2021.04.15 게시판 추가 */
/* title */
.page_tit {margin-top:25px;font-size: 20px;font-weight: 500;}
.page_tit_ty2 {position: relative;height: 60px;line-height: 60px;margin:0;padding:0 35px 0 60px;font-size: 18px;font-weight: 500;background-color: #323446;}
.page_tit_ty2 .l_area {top: 50%;transform: translateY(-50%);}
.page_tit_ty2 .btn_back {width: 20px;}

/* button 2021.04.15 게시판 추가로 수정 */
.btn_wrap {margin-top: 30px;}
.btn_wrap.space {display: flex;flex-wrap: wrap;justify-content: space-between;}
button .arrow, a .arrow {display: inline-block;width: 7px; height: 7px;margin-left: 4px;border: 3px solid #23232b;border-width: 2px 2px 0 0;transform: rotate(45deg);}
.btn_big {position: relative;display: inline-block;width: 100%;height: 64px;line-height: 64px;padding:0 32px; border-radius: 30px;font-size: 18px;font-weight: 700;color: #23232b;background-color: #fff;letter-spacing: -0.1em;overflow: hidden;}
.btn_big .arrow {position: absolute;top: 50%;transform: translateY(-50%) rotate(45deg);right: 22px;}
/* === 20210426 수정 start === */
.btn_big.btn_gradient , .btn_mid.btn_gradient {color: #fff;background: linear-gradient(to right, #71bcf7, #9581e8);}
.btn_big.btn_gradient .arrow, .btn_mid.btn_gradient .arrow {border-color: #fff;}
/* === 20210426 수정 end === */
.btn_mid {height: 44px;border: 1px solid transparent;border-radius: 10px;padding: 0 33px;line-height: 38px;font-size: 17px;font-weight: 500;color: #23232b;background-color: #fff;text-align: center;}
.btn_sml {height: 30px;border: 1px solid transparent;border-radius: 10px;padding: 0 23px;line-height: 30px;font-size: 17px;font-weight: 500;color: #23232b;background-color: #fff;text-align: center;}
.btn_mid + .btn_mid {margin-left: 10px;}
.btn_line_gray {border-color: #8c9198;background-color: transparent;color: #fff;}
/* Add by Justin */
.btn_medium {position: relative;display: inline-block;width: 100%;height: 50px;line-height: 50px;padding:0 32px; border-radius: 40px;font-size: 16px;font-weight: 500;color: #23232b;background-color: #fff;letter-spacing: -0.1em;overflow: hidden;}
.btn_medium.btn_gradient {color: #fff;background: linear-gradient(to right, #71bcf7, #9581e8);}
.btn_search {position: relative;display: inline-block;width: 150px;height: 50px;line-height: 50px;padding:0 32px; border-radius: 20px;font-size: 16px;font-weight: 500;color: #23232b;background-color: #fff;letter-spacing: -0.1em;overflow: hidden;}
.btn_search.btn_gradient {color: #fff;background: linear-gradient(to right, #71bcf7, #9581e8);}
.btn_search2 {position: relative;display: inline-block;width: 120px;height: 50px;line-height: 50px;padding:0 32px; border-radius: 20px;font-size: 16px;font-weight: 500;color: #23232b;background-color: #fff;letter-spacing: -0.1em;overflow: hidden;}
.btn_search2.btn_gradient {color: #fff;background: linear-gradient(to right, #71bcf7, #9581e8);}

/* form 2021.04.15 게시판 추가로 수정 */
.std_form .inp_box {width: 100%;}
.std_form .inp_box + .inp_box {margin-top: 10px;}
.std_form .inp_box .inp_tit {margin-bottom: 3px;font-size:15px;font-weight: 500;}
.std_form .inp_box .inp_tit.req {position: relative;padding-left: 14px;}
.std_form .inp_box .inp_tit.req::after {content: '*';position:absolute;top: 3px;left: 2px;color: #fb5372;}
.std_form input[type="text"], .std_form input[type="password"], .std_form select, .std_form textarea {display: block;width:100%;height: 50px;background-color: #323446;border-radius: 10px;border: 2px solid transparent;padding: 0 15px;font-size: 14px;font-weight: 500;outline: none;}
.std_form input[type="text"].error, .std_form input[type="password"].error {border-color: #da0029;background: url(../images_mobile/icon_error.png) no-repeat 90% 50%;background-size: 22px;}
.std_form select {padding-right: 17%;background:#323446 url(../images_mobile/icon_arrow_down.png) no-repeat 95% 51%;background-size: 9px auto;}
.std_form textarea {padding:13px 15px;height: 250px;resize: none;}
.std_form input:focus, .std_form textarea:focus {border-color: #9da3bb;}
.std_form input:-ms-input-placeholder, .std_form textarea::-ms-input-placeholder {color: #6f7384;}
.std_form input:-webkit-input-placeholder, .std_form textarea::-webkit-input-placeholder {color: #6f7384;}
.std_form input:-moz-placeholder, .std_form textarea::-moz-placeholder {color: #6f7384;}
.std_form .file_box {position: relative;}
.std_form input[type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}
.std_form input[type="file"] + label {position: absolute;top:0;left: 0;height: 50px;line-height: 50px;border-radius: 10px;padding:0 10px;background-color: #16161b;}
.filebox {position: relative;}
.filebox input[type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0; } 
.filebox label {position: absolute;top:0;left: 0;color:#fff; font-size: 14px;line-height: 50px;padding:0 14px; background-color: #16161b;cursor: pointer;border: 0;border-radius: 10px; }
.filebox .upload_name {display: block;width: 100%;height: 50px;background-color: #323446;border-radius: 10px;border: 2px solid transparent;padding: 0 15px 0 86px;font-size: 14px;font-weight: 500;outline: none;-webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; }

.std_form .radio_wrap, .std_form .check_wrap {display: block;margin:10px 0 -10px -10px;}
.std_form .radio_box, .std_form .check_box {display: inline-block;min-width: 100px;height: 22px;margin:0 0 10px 10px;}
.std_form input[type="checkbox"], .std_form input[type="radio"] {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
.std_form input[type="radio"] + label {display: inline-block;min-height: 22px;line-height: 20px;padding-left: 32px;background: url(../images_mobile/radio_noCheck.png)no-repeat 0 0;background-size: 22px auto;font-size: 16px;font-weight: 500;overflow: hidden;}
.std_form input[type="radio"]:checked + label {background-image: url(../images_mobile/radio_check.png);}
.std_form input[type="checkbox"] + label {display: inline-block;min-height: 22px;line-height: 20px;padding-left: 32px;background: url(../images_mobile/checkBox_noCheck.png)no-repeat 0 0;background-size: 22px auto;font-size: 16px;font-weight: 500;word-break: keep-all;overflow: hidden;}
.std_form input[type="checkbox"]:checked + label {background-image: url(../images_mobile/checkBox_check.png);}
.std_form .check_wrap.large {margin: 0;}
.std_form .check_wrap.large input[type="checkbox"] + label {min-height: 30px;padding:3px 0 0 40px;background-size: 30px auto;}
.std_form .check_wrap.large .check_box {height: auto;margin: 0;}
.std_form .txt_box_long {width: 100%;padding: 15px;border-radius: 10px;background-color: #323446;color: #ddd;}
.std_form .txt_box_long .box_inner {width: 100%;max-height: 100px;overflow:hidden;overflow-y: auto;}

.std_form .txt_box_long2 {width: 100%; height: 400px; padding: 15px;border-radius: 10px;background-color: #323446;color: #ddd;}
.std_form .txt_box_long2 .box_inner {width: 100%;max-height: 100px;overflow:hidden;overflow-y: auto;}

.std_form .section {padding:40px 0 50px;}
.std_form .section + .section {border-top:1px solid #38404b;}
.std_form .section.btm_line {padding-bottom: 14px;border-bottom: 1px solid #38404b;margin-bottom: 12px;}
.std_form .form_tit {margin-bottom: 20px;font-size: 20px;font-weight: 700;}
.std_form .col {display: flex;flex-wrap: wrap;justify-content: space-between;}
.std_form .col + .col {margin-top: 20px;}
.std_form .col > .inp_box {margin: 0;}
.std_form .col.col2 > div {width: calc((100% - 10px)/2);}
/* ===2021-04-26 수정=== */
.std_form .col.searchbox_1 > .inp_box:first-child {width: 120px;}
.std_form .col.searchbox_1 > .inp_box:nth-child(2) {width: calc(100% - 130px);}
.std_form .col.searchbox_1 + .btn_wrap button {width: 100%;}
/* ===//2021-04-26 수정=== */


/* header */
.header {position: fixed;top: 0;left: 50%;transform:translateX(-50%);width: 100%;max-width:540px;min-height: 64px;z-index: 100; background-color:#23232b;}
.header [class^="section"] {position: relative;height: 64px;}
.header .main_logo {position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);width: 150px;}
.header .page_tit {line-height: 64px;padding:0 35px 0 60px;font-size: 20px;font-weight: 700;}
.header .l_area, .header .r_area {top:50%;transform: translateY(-50%);}
.header .btn_nav {width: 24px;}
.header .btn_back {width: 20px;}
.header .country {width: 38px;height: 38px;border: 3px solid #000;border-radius: 50%;background:url() no-repeat 50% 50%;background-size: cover;}
.header .country.ko {background-image: url(../images_mobile/lang_ko.png);}
.header .country.en {background-image: url(../images_mobile/lang_en.png);}

/* gnb */
.gnb_wrap {position: relative;z-index: 101;}
.gnb_bg {position: fixed;top:0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0, .7);opacity: 0;visibility: hidden;transition: .3s;}
.gnb {position: fixed;top:0;left:-100%;bottom: 0;width: calc(100vw - 50px);padding-left: 20px;background-color: #2c323b;transition: .2s;}
.gnb .btn_close {position: absolute;top:10px;right: 20px;padding: 12px;}
.gnb .btn_close img {width:18px;}
.gnb .gnb_logo {height: 64px;}
.gnb .gnb_logo img {width:150px;margin-left: 0;padding-top: 17px;}
.gnb ul {max-height: calc(100vh - 64px);padding-bottom: 100px;overflow: hidden;overflow-y: auto;}
.gnb li + li {border-top: 1px solid #38404b;}
.gnb li   {display: block; height: 45px; line-height: 45px; font-size: 18px; font-weight: 500;}
.gnb li a {display: block; height: 45px; line-height: 45px; font-size: 16px; font-weight: 400; margin-left:17px;}
.gnb li.title {display: block;height: 60px;line-height: 60px; font-size: 20px;font-weight: 500;}
.gnb li.gray a {color: #bec5ce;}
.gnb li.link a {color: #009FDC;}
.gnb li.eresblue a {color: #006DB5;}
.gnb li.green a {color: #70AD47;}

.gnb_wrap.on .gnb_bg {opacity: 1; visibility: visible;}
.gnb_wrap.on .gnb {left: 0;}

/* lang */
.lang_wrap {position: relative;z-index: 101;}
.lang_bg {position: fixed;top:0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0, .7);opacity: 0;visibility: hidden;transition: .3s;}
.lang_ck {display: none;position: fixed;top:60px;left:50%;transform: translateX(-40%);width: 250px;border-radius: 18px;padding:0 18px;background-color: #2c323b;transition: .2s;overflow-y: hidden;}
.lang_ck li + li {border-top: 1px solid #38404b;}
.lang_ck li button {position: relative;height: 60px;line-height: 60px;padding-left: 50px;font-size: 20px;font-weight: 500;color: #fff;}
.lang_ck li button .country {position:absolute;top:50%;left: 0;transform: translateY(-50%);width: 32px;height: 32px;border-radius: 50%; background:url() no-repeat 50% 50%;background-size: cover;}
.lang_ck li button .country.ko {background-image: url(../images_mobile/lang_ko.png);}
.lang_ck li button .country.en {background-image: url(../images_mobile/lang_en.png);}
.lang_wrap.on .lang_bg {opacity: 1; visibility: visible;}

/* footer */
.footer {text-align: center;padding-bottom: 28px;}
.footer_menu {min-height: 40px;line-height: 40px;border: 1px solid #2a333a;border-width: 1px 0;font-weight: 300;}
.footer_menu ul {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;align-items: center;}
.footer_menu li {position: relative;}
.footer_menu li + li::after {content: '';position: absolute;top:50%;left:0;transform: translateY(-50%);width: 1px;height: 12px;background-color: #2a333a;}
.footer_menu li a {padding:0 12px;}
.footer_logo {margin: 20px 0 8px;}
.footer_logo img {width: 84px;opacity: .8;}
.footer .copy {line-height: 1.4;font-size: 12px;color: #474d50;}

/* container */
.container {position: relative;min-height: calc(100vh - 171px);padding-top:64px;}

/* 메인 */
.main_cont {text-align: center;}
.main_cont .visual_img_1 img, .main_cont .visual_img_2 img {width: 80%;}
.main_cont .visual_img_2 {background-image: linear-gradient(#23232b, #0b0b0d);}
.main_cont .visual_txt {margin-top: -24px;}
.main_cont .visual_txt .tit_mini {line-height:1.5;font-size: 18px;font-weight: 300;color: #5fd7ff;}
.main_cont .visual_txt .tit_main {line-height:1.18;font-size: 40px;font-weight: 700;letter-spacing: -0.05em;}
.main_cont .visual_txt .desc {margin: 14px 0 38px;font-size: 14px;}
.main_cont .cont_wrap {background-color: #0b0b0d;padding:1px 0 100px;}
.main_cont .main_txt .tit {line-height: 1.3;margin-top: 75px;font-size: 24px;font-weight: 700;}
.main_cont .main_txt .desc {margin-top: 8px;font-size: 14px;color: #bec5ce;}

.main_cont .one_click {margin-top: 22px;}
.main_cont .one_click ul {display: flex;justify-content: space-between;}
.main_cont .one_click li {position: relative;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;width: 30%;border-radius: 18px;background-color: #2c323b;}
.main_cont .one_click li::before {content: '';display: block;padding-top: 100%;}
.main_cont .one_click li::after {content: '';position: absolute;top:50%;left: 100%;transform: translateY(-50%);border: 8px solid transparent;border-left: 8px solid #2c323b;}
.main_cont .one_click li .c_area {width: 100%;}
.main_cont .one_click li:last-child::after {display: none;}
.main_cont .one_click li img {height: 8vw;max-height: 44px;margin-bottom: 3px;}

.main_cont .cont_2 img {margin-top: 20px;}
.main_cont .machine_learning {margin-top: 22px;border-radius: 18px;padding:20px 20px;font-weight: 300;background-color: #2c323b;}

.main_cont .global_frame {padding-right: 45px;text-align:left;}
.main_cont .phas_list li {position: relative;display: flex;align-items: center;padding-left: 90px;}
.main_cont .phas_list li.tit {justify-content: center;margin:20px 0 2px;font-size: 14px;font-weight: 500;}
.main_cont .phas_list li.tit .phase {font-size: 16px;color: #dd484c;} 
.main_cont .phas_list li .phase {position: absolute;top:0;left: 0;bottom: 0;display: flex;align-items: center;justify-content: center;width: 80px;}
.main_cont .phas_list li + li {margin-top: 5px;}
.main_cont .phas_list .list_item {height: 58px;line-height: 1.4;border-radius:18px;background-color: #2c323b;color: #bec5ce;font-size:12px;}
.main_cont .phas_list .list_item .phase {border-radius:18px;font-size: 13px;font-weight: 500;color: #fff;text-align: center;}
.main_cont .phas_list .list_item:nth-child(2) .phase {background-color: #dd484c;}
.main_cont .phas_list .list_item:nth-child(3) .phase {background-color: #7f7f7f;}
.main_cont .phas_list .list_item:nth-child(4) .phase {background-color: #ad4aa7;}
.main_cont .phas_list .list_item:nth-child(5) .phase {background-color: #21b2ad;}
.main_cont .phas_list .list_item:nth-child(6) .phase {background-color: #2598bd;}
.main_cont .phas_list .list_item:nth-child(7) .phase {background-color: #5d6cc8;}
.main_cont .phas_list .list_item:nth-child(8) .phase {background-color: #ed9301;}
.main_cont .phas_list .list_item:nth-child(9) .phase {background-color: #3174b0;}

.main_cont .cobit {margin-top: 20px;padding:22px 18px;border-radius: 18px;background-color:#2c323b;}
.main_cont .cobit .cobit_logo img {width: 90px; margin-left:0;}
.main_cont .cobit .sub_tit {margin:4px 0 14px;color: #1cb7a3;}
.main_cont .cobit li {position: relative;height: 50px;line-height: 50px;border-radius: 12px;font-size: 13px;font-weight: 500;text-align: center;background-color: #20b3aa;color: #fff;}
.main_cont .cobit li + li {margin-top: 18px;}
.main_cont .cobit li::after {content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);display: block;border:8px solid transparent;border-top: 8px solid #20b3aa;}
.main_cont .cobit li:last-child::after {display: none;}

.main_cont .line_wrap .line {position: absolute;left: 100%;top:calc(60% - 2px);width:12px;height: 61px;border: 3px solid #7f7f7f;border-radius: 0 6px 6px 0;border-left:0;}
.main_cont .line_wrap .line.big {top: auto;bottom: calc(50% - 2px);}
.main_cont .line_wrap .line.big::after {content: '';position: absolute;top: -4px;left: 0;display: block;width:9px;height: 5px;background-color:#2c323b;}
.main_cont .line_wrap .line.large {top:auto;bottom:calc(45% - 2px);}
.main_cont .line_wrap .line.large::after {content: '';position: absolute;top: -4px;left: 0;display: block;width:18px;height: 5px;background-color:#2c323b;}
.main_cont .line_wrap.gray .line.big {height: 582px;width: 24px;}
.main_cont .line_wrap.green .line {border-color: #20b3aa;}
.main_cont .line_wrap.green .line.big {height: 525px;width: 40px;}
.main_cont .line_wrap.orange .line {border-color: #ed9301;}
.main_cont .line_wrap.orange .line.big {height: 405px;width: 50px;}
.main_cont .line_wrap.pink .line.large {width: 41px;height: 693px;border-color: #ad4aa7;}
.main_cont .line_wrap.blue .line.large {bottom: calc(54% - 2px);width: 65px;height: 242px;border-color: #3174b0;}

.main_cont .result_wrap {padding:1px 0;background: url(../images_mobile/main_03_02.png) no-repeat 50% 0;background-size: auto 83%;}
.main_cont .methodology {margin-top: 20px;padding:22px 18px;border-radius: 18px;background-color:#2c323b;}
.main_cont .methodology .sub_tit {margin:-6px 0 6px;color: #549df4;text-align: left;}
.main_cont .methodology .official {display: flex;flex-wrap: wrap;justify-content: space-between;}
.main_cont .methodology .official .item {position: relative;display: flex;flex-wrap: wrap;align-items: center;justify-content: center; width: calc((100% - 14px)/2);height:50px;line-height: 1.3;border-radius: 12px;color: #fff;background-color: #549df4;font-size: 13px;}
.main_cont .methodology .official .item::after {content: '';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);display: block;border:8px solid transparent;border-top: 8px solid #549df4;}
.main_cont .methodology .official .item:last-child {width: 100%;margin-top: 20px;}
.main_cont .methodology .official .item:last-child::after {display: none;}

.main_cont .result {height: 60px;line-height: 60px;margin-top: 50px;border-radius: 18px;font-size: 15px;font-weight: 700;color: #0b0b0d;background-color: #fff;}
.main_cont .result .ico_check {display:inline-block;width: 20px;height: 20px;border-radius: 50%;vertical-align: -4px;background-color: #000;}
.main_cont .result .ico_check img {width: 11px;margin-top: 6px;}

/* 로그인 */
.login_cont {padding-top: 40px;}
.login_cont .login_btn {margin: 60px 0 50px;}
.login_cont .login_btn_wrap ul {display: flex;justify-content: center;margin-top: 10px;}
.login_cont .login_btn_wrap li {position: relative;}
.login_cont .login_btn_wrap li + li::after {content: '';display: block;position: absolute;left: 0;top:7px;width: 1px;height: 10px;background-color: #4f4f55;}
.login_cont .login_btn_wrap li a {padding: 0 10px;}
.login_cont .login_btn .banner_area {margin-top: 30px;}
.login_cont .login_btn .banner_area img {max-width: 100%;}

/* 회원가입 */
.join_cont {padding-bottom: 50px;}

/* 진단리포트, 진단리포트 상세 */
.diagnostic_report_cont {padding: 40px 0 50px;}
.diagnostic_report_cont .report_tit {font-size: 20px;font-weight: 700;}
.diagnostic_report_cont .report_tit.icon img {display: inline-block;width: 35px;padding: 9px;border-radius: 50%;margin-right: 10px;background-color: #5ab0ac;vertical-align: -10px;}
.diagnostic_report_cont .circle_area {margin: 14px 0 0;text-align: center;}
.diagnostic_report_cont .circle_area .desc {margin-top: 10px;font-size:11px;color: #bec5ce;}
.diagnostic_report_cont .circle_area .desc ul {flex-wrap: wrap;display: flex;justify-content:center;}
.diagnostic_report_cont .circle_area .desc li {position: relative;padding:0 7px;}
.diagnostic_report_cont .circle_area .desc li + li::after {content: '';display: block;position:absolute;top:4px;left: 0;width: 1px;height: 9px;background-color: #52545c;}
.diagnostic_report_cont .circle_area .percent {position: relative;display: inline-block;width: 130px;height: 130px;margin: 0 8px;}
.diagnostic_report_cont .circle_area .percent path {stroke-linecap: round;}
.diagnostic_report_cont .circle_area .percent text {transform: translateY(-9px);font-size: 25px !important;font-weight: 500 !important;font-family: "Lato", sans-serif !important;}
.diagnostic_report_cont .circle_area .percent .percent_tit {position: absolute;top:61%;left: 0;transform: translateY(-50%);width: 100%;font-size: 12px;}
.diagnostic_report_cont .report_list {margin: 34px 0;}
.diagnostic_report_cont .report_list li {position:relative;background-color: #16161b;padding:15px 15px 15px 90px;border-radius: 10px;color: #fff;}
.diagnostic_report_cont .report_list li + li {margin-top: 14px;}
.diagnostic_report_cont .report_list .tit {position: absolute;top:15px;left: 0;bottom: 15px;display: flex;align-items: center;justify-content: center;width: 80px;border-right: 1px solid #1e1f28;font-size: 13px;font-weight: 700;text-align: center;}
.diagnostic_report_cont .report_list .tit .icon {position: relative;width: 18px;height: 18px;margin:4px auto 0;border-radius: 50%;color: #fff;}
.diagnostic_report_cont .report_list .tit .icon::after {content: '';display: inline-block;position: absolute;top: 50%;left: calc(50% + 2px);transform: translate(-50%, -50%);border: 4px solid transparent;border-left: 6px solid #fff;}
.diagnostic_report_cont .report_list .tit .icon.red {background-color: #c95351;}
.diagnostic_report_cont .report_list .tit .icon.gray {background-color: #807f7f;}
.diagnostic_report_cont .report_list .tit .icon.violet {background-color: #9f51a3;}
.diagnostic_report_cont .report_list .tit .icon.green {background-color: #5ab0ac;}
.diagnostic_report_cont .report_list .tit .icon.blue {background-color: #4f95b9;}
.diagnostic_report_cont .report_list .tit .icon.purple {background-color: #616ec2;}
.diagnostic_report_cont .report_list .tit .icon.orange {background-color: #de9635;}
.diagnostic_report_cont .report_list .tit .icon.deepblue {background-color: #4673ac;}
.diagnostic_report_cont .report_list .progress_box {position: relative;padding-left: 80px;}
.diagnostic_report_cont .report_list .progress_box + .progress_box {margin-top: 7px;}
.diagnostic_report_cont .report_list .progress_box .sub_tit {position: absolute;top:50%;left:0;transform: translateY(-50%);line-height: 1;}
.diagnostic_report_cont .report_list .progress_ty1 {width: 100%;height: 22px;border-radius: 15px;overflow:hidden;background-color: #323446;}
.diagnostic_report_cont .report_list .progress_ty1 .cont {height: 100%;line-height: 22px;border-radius: 15px;background-image: linear-gradient(to right, #009fdc, #73b7f6);color: #fff;font-size: 12px;font-weight: 500;text-align: center;}
.diagnostic_report_cont .report_list .progress_ty1.orange .cont {background-image: linear-gradient(to right, #eb7839, #f4b53b);}
.diagnostic_report_cont .report_list .progress_ty2 {display:flex;justify-content: space-between;width: 100%;height: 22px;overflow:hidden;}
.diagnostic_report_cont .report_list .progress_ty2 > span {width:calc((100% - 36px)/13);border-radius: 10px;background-color: #323446;}
.diagnostic_report_cont .report_list .progress_ty2 > span.on {background-color: #8338dd;}

.diagnostic_report_cont .details_list .box_wrap {border-radius: 10px;padding:20px;margin-top: 14px;background-color: #16161b;}
.diagnostic_report_cont .details_list .report_list {margin:0;}
.diagnostic_report_cont .details_list .report_list .progress_box {padding:0;}
.diagnostic_report_cont .details_list .report_list .progress_box + .progress_box {margin-top: 17px;}
.diagnostic_report_cont .details_list .report_list .progress_box .sub_tit {position: static;transform: none; margin-bottom: 8px;}
.diagnostic_report_cont .details_list .report_list .progress_ty2 > span {width: calc((100% - 72px)/25);}
.diagnostic_report_cont .details_list .details_tit {position:relative;line-height: 1;margin-top: 35px;font-size: 18px;font-weight: 700;}
.diagnostic_report_cont .details_list .details_tit .info_open {width: 20px;margin-left: 6px;vertical-align: -4px;}
.diagnostic_report_cont .details_list .info_pp {display: none;}
.diagnostic_report_cont .details_list .comparison_box {display: flex;flex-wrap: wrap;justify-content: space-between;}
.diagnostic_report_cont .details_list .comparison_box .item {width: calc((100% - 8px)/2);line-height: 33px;border: 1px solid #05a0de;border-radius: 10px;font-size: 15px;font-weight: 700;background-color: #323446;overflow:hidden;text-align: center;text-transform: uppercase;}
.diagnostic_report_cont .details_list .comparison_box .item_tit {height: 30px;line-height: 30px;font-size: 13px;font-weight: 500;background-color: #05a0de;}
.diagnostic_report_cont .details_list .comparison_box .item_icon {display: inline-block;width: 22px;margin:0 4px 0 -8px;vertical-align: -5px;}
.diagnostic_report_cont .details_list .info_pp {position: absolute;top:calc(100% + 6px);left:50%; transform: translateX(-50%);width: 80%; background-color: #323446;border: 1px solid #171a1f;border-radius: 10px;padding:12px;}
.diagnostic_report_cont .details_list .info_pp .desc {margin-top: 0;padding-top: 0;border-top: 0;}
.diagnostic_report_cont .details_list .info_pp .icon_info {display: inline-block;width: 12px;margin-right: 4px;}
.diagnostic_report_cont .details_list .info_pp .info_close {position: absolute;top:0;right: 0;width: 34px;padding:12px;}
.diagnostic_report_cont .details_list .comparison_box .item.orange {border-color: #ea7939;}
.diagnostic_report_cont .details_list .comparison_box .item.orange .item_tit {background-color: #ea7939;}
.diagnostic_report_cont .details_list .desc {line-height: 1.4;margin-top: 16px;padding-top: 16px;border-top: 1px solid #1e1f28; font-size: 12px;font-weight: 400;color: #bec5ce;word-break: keep-all;}

/* 2021.04.15 게시판 추가 */
/* 자유게시판 */
.free_board_cont {padding-bottom: 50px;}
.free_board_cont .btn_mid {min-width: 120px;}
.std_list {position: relative;border-top: 2px solid #fff;margin-top: 8px;}
.std_list li {border-bottom: 1px solid #38404b;padding: 18px 0 16px;}
.std_list li .tit {line-height: 1.3;margin-bottom: 14px;font-size: 17px;max-width: 100%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;text-overflow: ellipsis;-webkit-box-orient: vertical;word-wrap: break-word;}
.std_list li .tit .icon_new {min-width: 18px;width: 18px;vertical-align: -2px;}
.std_list li .thumb {width: 100%;height: 54vw;max-height: 295px;border-radius: 10px;margin-bottom: 12px;overflow:hidden;}
.std_list li .thumb img {width: 100%;object-fit: cover}
.std_list li .desc {line-height: 1.4;margin-bottom: 14px;font-size: 15px;color:#959ba3;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;text-overflow: ellipsis;-webkit-box-orient: vertical;word-wrap: break-word;}
.std_list li .btm_line {display: flex;align-items: center;flex-wrap: wrap;font-size: 12px;color: #a0a6ae;}
.std_list li .btm_line > span {position: relative;}
.std_list li .btm_line > span + span {margin-left: 18px;}
.std_list li .btm_line > span + span::after {content: '';display: block;position: absolute;top:5px;left: -9px;width: 1px;height: 9px;background-color: #61646c;}
.std_list.no_img_list li {padding: 10px 0;}
.std_list.no_img_list li .tit {margin-bottom: 4px;}
.std_list.no_img_list li .thumb {display: none;}
.std_list.no_img_list li .desc {display: none;}
.std_list.no_img_list li .btm_line {font-size: 13px;}

.std_list .std_btn_wrap {position: absolute;top:-43px;right: 0;display: flex;flex-wrap: wrap;align-items: center;}
.std_list .std_btn_wrap .btn_list_typ {padding:0 10px;}
.std_list .std_btn_wrap .btn_list_typ .img {background: url() no-repeat 50% 50%;background-size: auto 18px;}
.std_list .std_btn_wrap .list_typ_1 .img {width: 24px;height: 19px;background-image: url(../images_mobile/list_type_1_dark.png);}
.std_list .std_btn_wrap .list_typ_2 .img {width: 18px;height: 18px;background-image: url(../images_mobile/list_type_2_dark.png);}
.std_list .std_btn_wrap .list_typ_1.on .img {width: 24px;height: 19px;background-image: url(../images_mobile/list_type_1.png);}
.std_list .std_btn_wrap .list_typ_2.on .img {width: 18px;height: 18px;background-image: url(../images_mobile/list_type_2.png);}
.std_list .std_btn_wrap .write_btn {display: inline-block;padding:0 0 4px 10px;}
.std_list .std_btn_wrap .write_btn img {width: 33px;}
/*.pagination {margin-top: 20px;}
.pagination ul {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;}
.pagination li {width: 30px;margin: 0 7px;border: 0;padding:0;font-size: 18px;font-weight: 500;text-align: center;opacity: .2;}
.pagination li.on .num {position: relative;}
.pagination li.on .num::after {content: '';display: block;position: absolute;bottom: 2px;left: 0;width: calc(100% + 1px);height: 2px;background-color: #fff;}
.pagination li.page_prev, .pagination li.page_next, .pagination li.on {opacity: 1;}*/

/* 2021.04.18 Jst 추가*/
/* pagination >> 소셜러스에서 사용중 */
.pagination {text-align: center;font-size: 0;margin-bottom:50px}
.pagination a {display: inline-block;width: 37.2px;height: 37px;line-height: 37px;/*border:1px solid #dbdbdb;border-left: 0;*/color: #5b5c61;font-size: 14px;background-color:#aaa}
.pagination > a:first-child {/*border-left: 1px solid #c7c7c7;*/border-radius: 3px 0 0 5px}
.pagination > a:last-child { border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-ms-border-radius:0 5px 5px 0;-o-border-radius:0 5px 5px 0;}
.pagination .ico_page {text-indent: -9999px}
.pagination .first {background:#fff url(../images_mobile/common/ico_page_first.png) no-repeat center}
.pagination .prev {background:#fff url(../images_mobile/common/ico_page_prev.png) no-repeat center}
.pagination .next {background:#fff url(../images_mobile/common/ico_page_next.png) no-repeat center}
.pagination .last {background:#fff url(../images_mobile/common/ico_page_last.png) no-repeat center}
.pagination .page_num {display: inline-block}
.pagination .page_num a.on, .pagination .page_num a:focus, .pagination .page_num a:hover {background: #0a68c5;color: #fff}
/* 2021.04.18 Jst 추가*/
/* pagination dark >> 소셜러스에서 사용중 */
.pagination.dark a { border-left:1px solid #303640; background-color:#2a3141; color:#707c8f; }
.pagination.dark > a:first-child { border-left:0; }



/* 자유게시판 상세 */
.free_board_detals_cont {padding-bottom: 50px;}
.posting_cont {padding:30px 0 0;}
.posting_cont .top_area {border-bottom: 1px solid #38404b;padding-bottom: 16px;}
.posting_cont .category {margin-bottom: 5px;}
.posting_cont .category .cate_item {height: 26px;line-height: 24px;border-radius: 20px;border: 1px solid transparent;padding:0 10px;font-size: 13px;background-color: #05a0de;text-align: center;}
.posting_cont .category .cate_item_1 {height: 26px;line-height: 24px;border-radius: 20px;border: 1px solid transparent;padding:0 10px;font-size: 13px;background-color: #21b52a;text-align: center;}
.posting_cont .category .cate_item_2 {height: 26px;line-height: 24px;border-radius: 20px;border: 1px solid transparent;padding:0 10px;font-size: 13px;background-color: #c42bbf;text-align: center;}

.posting_cont .tit {line-height: 1.25;margin-bottom: 10px;font-size: 21px;font-weight: 700;}
.posting_cont .top_area .btm_line {font-size: 13px;color: #a0a6ae;}
.posting_cont .btm_line > span {position: relative;}
.posting_cont .btm_line > span + span {margin-left: 18px;}
.posting_cont .btm_line > span + span::after {content: '';display: block;position: absolute;top: 5px;left: -9px;width: 1px;height: 10px;background-color: #61646c;}
.posting_cont .cont_area {border-bottom: 1px solid #38404b;padding:16px 0 14px;}
.posting_cont .cont_area pre {display: block;line-height: 1.8;padding-bottom: 60px;font-size: 15px;color: #bec5ce;}
.posting_cont .attach_area [class^=attach_box_] {padding:6px 15px 8px;border: 1px solid;border-radius: 10px;background-color: #16161b;}
.posting_cont .attach_area .attach_box_link {color: #05a0de;}
.posting_cont .attach_area .attach_box_file {color: #22c485;}
.posting_cont .attach_area [class^=attach_box_] .attach_tit {padding-left: 18px;font-size: 15px;font-weight: 700;}
.posting_cont .attach_area .attach_box_link .attach_tit {background: url(../images_mobile/icon_link.png) no-repeat 1px 50%; background-size: 13px auto;}
.posting_cont .attach_area .attach_box_file .attach_tit {background: url(../images_mobile/icon_file.png) no-repeat 3px 50%;background-size: 11px auto;}
.posting_cont .attach_area [class^=attach_box_] + [class^=attach_box_] {margin-top: 8px;}
.posting_cont .attach_area [class^=attach_box_] .attach_tit img {display: inline-block;}
.posting_cont .attach_area [class^=attach_box_] .attach_cont {position:relative;display: block;padding-right: 24px;color: #bec5ce;font-size: 13px;}
.posting_cont .attach_area [class^=attach_box_] .attach_cont .txt_inner {display: block;width: 100%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;}
.posting_cont .attach_area [class^=attach_box_] .attach_cont::after {content: '';display: block;position:absolute;top:50%;right: -5px;transform: translateY(-50%);width: 20px;height: 20px;border-radius: 50%;background: url() no-repeat 50% 50%;background-size: 100%;}
.posting_cont .attach_area .attach_box_link .attach_cont::after {background-image: url(../images_mobile/icon_circle_link.png);}
.posting_cont .attach_area .attach_box_file .attach_cont::after {background-image: url(../images_mobile/icon_circle_download.png);}
.posting_cont .btm_area .btn_wrap {margin-top: 12px;}


/*화면 맨 상단(쿠키 동의) 알림*/
.cookie_alert { position:fixed; bottom:40px; right:40px; display:none; width:430px; line-height:1.5; border:1px solid #c9c9c9; border-radius:10px; background-color:#393168; color:#c9c9c9; font-size:13px; overflow:hidden; z-index:50; }
.cookie_alert .alert_cont { position:relative; padding:35px 35px 35px; }
.cookie_alert .btn_wrap { margin-top:30px; }
.cookie_alert .btn_wrap button { border-radius:25px; }
.cookie_alert em { display:block; line-height:26px; padding:8px 0 8px 85px; margin-bottom:20px; font-size:18px; color:#fff; background:url(../images_mobile/common/bg_sara3.png) no-repeat 0 50%; }