@charset "utf-8";

h2 {margin-bottom:20px;line-height:32px;font-size:24px;font-weight:500;color:#282828;}
h2 > strong {color:#5d74e6;}
h2 > i {font-size:18px;font-style:normal;color:#5d74e6;}
h2.trophy {margin-bottom:5px;min-height:47px;background:url('../img/common_icon_trophy01.png') no-repeat right top;background-size:contain;}
h3 {margin:20px 0 10px;line-height:18px;font-size:18px;font-weight:500;color:#282828;}

@media (max-width:340px) /* (max-width:1025px) */
{
    h2 {line-height:30px;font-size:22px;}
}

img.visual {display:block;width:100%;}

a.btn {display:block;line-height:40px;font-size:14px;color:#fff;text-align:center;background-color:#5d74e6;border:0;border-radius:10px;}
a.btn.t02 {color:#5d74e6;background-color:#dbe1ff;}
a.btn.off {color:#787878;background-color:#f6f6f6;}

.btn-area {}
.btn-area:after {display:block;content:"";clear:both;}
.btn-area > a {float:left;display:block;margin-left:10px;}
.btn-area > a:first-child {margin-left:0;}
.btn-area.n02 > a {width:calc((100% - (10px * 1))/2);}

.btn-area2 {margin-top:30px;}
.btn-area2 > a {display:block;line-height:42px;font-size:16px;font-weight:500;color:#fff;text-align:center;border-radius:13px;background-color:#5d74e6;}
.btn-area2 > a.prev {background:url('../img/common_btn_prev01.png') no-repeat left 15px center;background-size:auto 15px;}
.btn-area2 > a.home {display:flex;align-items:center;justify-content:center;}
.btn-area2 > a.home:before {display:block;height:20px;width:20px;margin:-3px 7px 0 0;content:"";background:url('../img/common_btn_home01.png') no-repeat center center;background-size:contain;}
.btn-area2 > a.off {background-color:#dedede;color:#aaa;}
.btn-area2 > a.t02 {color:#0080e6;background-color:#d9ecfb;}
.btn-area2 > a.t03 {color:#0080e6;background-color:#f0f0f0;}
.btn-area2.n02 {display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;}
.btn-area2.n02 > a {width:calc((100% - 10px - 0.1px)/2);}

.fullbox {width:calc(100% + 40px);margin:20px 0 0 -20px;padding:20px 0;line-height:20px;font-size:12px;color:#787878;text-align:center;word-break:keep-all;background-color:#f6f6f6;}
.fullbox span {display:inline-block;}
.fullbox strong {font-weight:500;color:#5d74e6;}
.fullbox.warn {background-color:#ffedec;}
.fullbox.exclamation {font-size:14px;color:#282828;}
.fullbox.exclamation:before {display:block;content:"";height:23px;background:url('../img/common_icon_exclamation01.png') no-repeat center top;background-size:auto 18px;}

table.tb-base {table-layout:fixed;border-collapse:collapse;width:100%;line-height:15px;font-size:13px;color:#787878;}
table.tb-base th,
table.tb-base td {padding:7px 0;font-weight:400;text-align:center;border:1px solid #b2b2b2;}
table.tb-base th.aL,
table.tb-base td.aL {padding-left:5px;}
table.tb-base th.aR,
table.tb-base td.aR {padding-right:5px;}
table.tb-base th:first-child,
table.tb-base td:first-child {border-left:0;}
table.tb-base th:last-child,
table.tb-base td:last-child {border-right:0;}
table.tb-base th {color:#000;background-color:#f6f6f6;}
table.tb-base th.t02 {color:#787878;}
table.tb-base td.t02 {color:#282828;}
table.tb-base th.t03 {color:#787878;padding-left:40px;text-align:left;background:#f6f6f6 url('../img/common_help01.png') no-repeat left 15px center;background-size:auto 16px;}
table.tb-base tr.on td.sel  {color:#ffffff;background-color:#5d74e6;}
table.tb-base td.nodata {color:#999;padding:50px 0;text-align:center;}
table.tb-base td .term {display:block;margin-top:3px;font-size:0.8em;}
table.tb-base td .term.up {color:#eb1c24;}
table.tb-base td .term.dn {color:#1d71b8;}
table.tb-base .clrY td {background-color:#fffbe3;}
table.tb-base .clrR td {background-color:#fff1f2;}
table.tb-base .clrB td {background-color:#ebf5fd;}

ul.tb-desc {margin-top:10px;line-height:14px;font-size:12px;color:#706f6f;}
ul.tb-desc > li {position:relative;display:block;margin-top:5px;padding-left:7px;}
ul.tb-desc > li:before {position:absolute;left:0;top:5px;display:block;content:"";width:2px;height:2px;border-radius:100%;background-color:#706f6f;}
ul.tb-desc > li:first-child {margin-top:0;}

form.login {margin-top:20px;}
form.login .class-code {padding:30px 0;line-height:38px;font-size:38px;font-weight:700;color:#787878;text-align:center;background-color:#f6f6f6;border-radius:15px;}
form.login .class-code-wrap {display:none;padding-top:20px;/*opacity:0;transform:scaleY(0);transition:all .3s;*/}
form.login .class-code-wrap.ing {display:block;}
form.login .class-code-wrap.on  {opacity:1;transform:scaleY(1);transform-origin;top center;}

.link-ext {display:block;margin-top:20px;padding:20px;text-align:center;background-color:#ebeeff;border-radius:10px;}
.link-ext > .tit {line-height:22px;font-size:15px;font-weight:700;color:#5d74e6;}
.link-ext > .dsc {margin-top:10px;line-height:18px;font-size:12px;color:#787878;word-break:keep-all;}
.link-ext span {display:block;}

dl.frm-input {}
dl.frm-input > dt {padding-left:5px;line-height:20px;font-size:13px;font-weight:500;color:#282828;}
dl.frm-input > dd {margin-bottom:15px;}
dl.frm-input > dd:last-child {margin-bottom:0;}
dl.frm-input > dd input,
dl.frm-input > dd select {display:block;height:40px;width:100%;padding:0 15px;font-size:14px;color:#282828;background-color:#f6f6f6;border:0;border-radius:10px;box-sizing:border-box;}
dl.frm-input > dd select {background:#f6f6f6 url('../img/common_icon_select01.png') no-repeat right 15px center;background-size:auto 20%;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
dl.frm-input > dd a {display:block;line-height:40px;font-size:14px;font-weight:500;color:#fff;text-align:center;background-color:#5d74e6;border:0;border-radius:10px;}
dl.frm-input > dd a.t02 {background-color:#dce1ff;color:#5d74e6;}
dl.frm-input > dd.btn {}
dl.frm-input > dd.btn:after {display:block;content:"";clear:both;}
dl.frm-input > dd.btn input {float:left;width:calc(100% - 110px);}
dl.frm-input > dd.btn a {float:right;width:100px;}
dl.frm-input > dd.half:after {display:block;content:"";clear:both;}
dl.frm-input > dd.half > a {float:right;width:calc((100% - 10px)/2);}
dl.frm-input > dd.half > a:first-child {float:left;}

.share-box {text-align:center;background-color:#ebeeff;border-radius:15px;overflow:hidden;}
.share-box > .tit {padding:10px 0;line-height:14px;font-size:14px;font-weight:500;color:#5d74e6;background-color:#dbe1ff;}
.share-box > .lnk {display:flex;justify-content:space-evenly;padding:15px 0 10px;}
.share-box > .lnk > a {display:block;width:55px;padding-top:55px;line-height:20px;font-size:12px;color:#282828;background:no-repeat center top;background-size:auto 55px;}
.share-box > .lnk > a.cpy {background-image:url('../img/common_icon_share01_copy.png');}
.share-box > .lnk > a.kko {background-image:url('../img/common_icon_share01_kakao.png');}
.share-box > .lnk > a.sms {background-image:url('../img/common_icon_share01_sms.png');}

.class-ctrl {margin-top:20px;}
.class-ctrl > dt {padding-bottom:10px;line-height:13px;font-size:13px;font-weight:500;color:#1d1d1b;}
.class-ctrl > dt:after {display:block;content:"";clear:both;}
.class-ctrl > dt > .tit {float:left;display:block;}
.class-ctrl > dt > .lnk {float:right;display:block;color:#787878;}
.class-ctrl > dd {margin-bottom:25px;}
.class-ctrl > dd:last-child {margin-bottom:0;}
.class-ctrl > dd > a {font-size:13px;}
.class-ctrl > dd > a.done {color:#5d74e6;background-color:#f6f6f6;}
.class-ctrl > dd.half:after {display:block;content:"";clear:both;}
.class-ctrl > dd.half > a {float:left;display:block;width:calc((100% - 10px)/2);}
.class-ctrl > dd.half > a:last-child {float:right;}

.character-select {padding:20px 15px;background-color:#f6f6f6;border-radius:15px;}
.character-select > .lst {margin:-15px 0 0 -15px;width:calc(100% + 15px);}
.character-select > .lst:after {display:block;content:"";clear:both;}
.character-select > .lst > a {position:relative;float:left;display:block;width:calc((100% - (15px * 5))/5);margin:15px 0 0 15px;background:no-repeat center center;background-size:contain;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.character-select > .lst > a:before {display:block;content:"";padding-bottom:100%;}
.character-select > .lst > a.on:after {position:absolute;left:-3px;top:-3px;width:calc(100% - 4px);height:calc(100% - 4px);display:block;content:"";border:5px solid #5d74e6;/*background-color:rgba(255,255,255,0.6);*/border-radius:100%;/*box-sizing:border-box;*/}
.character-select > .lst > a.t01 {background-image:url('../img/member_img01.png');}
.character-select > .lst > a.t02 {background-image:url('../img/member_img02.png');}
.character-select > .lst > a.t03 {background-image:url('../img/member_img03.png');}
.character-select > .lst > a.t04 {background-image:url('../img/member_img04.png');}
.character-select > .lst > a.t05 {background-image:url('../img/member_img05.png');}
.character-select > .lst > a.t06 {background-image:url('../img/member_img06.png');}
.character-select > .lst > a.t07 {background-image:url('../img/member_img07.png');}
.character-select > .lst > a.t08 {background-image:url('../img/member_img08.png');}
.character-select > .lst > a.t09 {background-image:url('../img/member_img09.png');}
.character-select > .lst > a.t10 {background-image:url('../img/member_img10.png');}
.character-select > .lst > a.t11 {background-image:url('../img/member_img11.png');}
.character-select > .lst > a.t12 {background-image:url('../img/member_img12.png');}
.character-select > .lst > a.t13 {background-image:url('../img/member_img13.png');}
.character-select > .lst > a.t14 {background-image:url('../img/member_img14.png');}
.character-select > .lst > a.t15 {background-image:url('../img/member_img15.png');}
.character-select > .lst > a.t16 {background-image:url('../img/member_img16.png');}
.character-select > .lst > a.t17 {background-image:url('../img/member_img17.png');}
.character-select > .lst > a.t18 {background-image:url('../img/member_img18.png');}
.character-select > .lst > a.t19 {background-image:url('../img/member_img19.png');}
.character-select > .lst > a.t20 {background-image:url('../img/member_img20.png');}

.quide-step {}
.quide-step > .itm {position:relative;display:flex;justify-content:center;align-items:center;min-height:60px;margin-top:20px;line-height:20px;font-size:14px;color:#282828;text-align:center;background-color:#ebeeff;border-radius:15px;}
.quide-step > .itm:after {position:absolute;left:0;top:-14px;display:block;content:"";width:100%;height:8px;background:url('../img/common_icon_nextstep01.png') no-repeat center center;background-size:contain;}
.quide-step > .itm:first-child {margin-top:0;}
.quide-step > .itm:first-child:after {display:none;content:none;}

.invest-summary {margin-top:30px;color:#282828;}
.invest-summary > .tit {line-height:14px;font-size:14px;}
.invest-summary > .val {line-height:24px;font-size:24px;font-weight:500;margin-top:8px;}

.invest-base {padding-bottom:15px;color:#fff;text-align:center;background-color:#5d74e6;border-radius:15px;}
.invest-base:after {display:block;content:"";clear:both;}
.invest-base > .itm {float:left;width:50%;margin-top:15px;}
.invest-base > .itm > .tit {line-height:12px;font-size:12px;color:#dbe1ff;}
.invest-base > .itm > .val {line-height:18px;font-size:18px;color:#ffffff;font-weight:500;margin-top:5px;}

.company-list {margin-top:20px;}
.company-list > .lst {margin:-10px 0 0 -10px;}
.company-list > .lst:after {display:block;content:"";clear:both;}
.company-list > .lst > .itm {float:left;display:block;width:calc((100% - (10px * 2))/2);margin:10px 0 0 10px;padding:15px 0;text-align:center;background-color:#f6f6f6;border-radius:15px;}
.company-list > .lst > .itm > .val {display:block;margin-top:5px;line-height:20px;font-size:20px;font-weight:500;color:#1d1d1b;}
.company-list > .lst > .itm > .tit {display:block;padding-top:40px;line-height:14px;font-size:14px;color:#787878;background:no-repeat center top;background-size:auto 30px;}
.company-list > .lst > .itm > .tit.t01 {background-image:url('../img/company01.png');}
.company-list > .lst > .itm > .tit.t02 {background-image:url('../img/company02.png');}
.company-list > .lst > .itm > .tit.t03 {background-image:url('../img/company03.png');}
.company-list > .lst > .itm > .tit.t04 {background-image:url('../img/company04.png');}
.company-list > .lst > .itm > .tit.t05 {background-image:url('../img/company05.png');}
.company-list > .lst > .itm > .tit.t06 {background-image:url('../img/company06.png');}
.company-list > .lst > .itm > .tit.t07 {background-image:url('../img/company07.png');}
.company-list > .lst > .itm > .tit.t08 {background-image:url('../img/company08.png');}
.company-list > .lst > .itm > .tit.t09 {background-image:url('../img/company09.png');}
.company-list > .lst > .itm > .tit.t10 {background-image:url('../img/company10.png');}

.company-tab {}
.company-tab > .lst {margin:-10px 0 0 -10px;width:calc(100% + 10px);}
.company-tab > .lst:after {display:block;content:"";clear:both;}
.company-tab > .lst > a {float:left;display:block;width:calc((100% - (10px * 3))/3);margin:10px 0 0 10px;border:1px solid #5d74e6;border-radius:10px;line-height:44px;font-size:13px;font-weight:500;color:#5d74e6;text-align:center;box-sizing:border-box;white-space:nowrap;}
.company-tab > .lst > a.on {color:#fff;background-color:#5d74e6;}

.company-cont {margin-top:10px;line-height:24px;font-size:14px;color:#282828;}

.company-graph {margin-top:20px;position:relative;}
.company-graph:before {display:block;content:"";padding-bottom:60%;}
.company-graph > img {display:block;width:100%;}
.company-graph > .wrap {position:absolute;top:0;left:0;width:100%;height:100%;}

.company-slide {width:calc(100% + 40px);margin:15px 0 0 -20px !important;padding-bottom:35px !important;border-bottom:10px solid #f6f6f6;}
.company-slide .swiper-slide {display:block;padding:15px;border-radius:10px;box-sizing:border-box;background:#f6f6f6 no-repeat right 10px top 10px;background-size:auto 27px;}
.company-slide .swiper-slide.t01 {background-image:url('../img/company01.png');}
.company-slide .swiper-slide.t02 {background-image:url('../img/company02.png');}
.company-slide .swiper-slide.t03 {background-image:url('../img/company03.png');}
.company-slide .swiper-slide.t04 {background-image:url('../img/company04.png');}
.company-slide .swiper-slide.t05 {background-image:url('../img/company05.png');}
.company-slide .swiper-slide.t06 {background-image:url('../img/company06.png');}
.company-slide .swiper-slide.t07 {background-image:url('../img/company07.png');}
.company-slide .swiper-slide.t08 {background-image:url('../img/company08.png');}
.company-slide .swiper-slide.t09 {background-image:url('../img/company09.png');}
.company-slide .swiper-slide.t10 {background-image:url('../img/company10.png');}
.company-slide .swiper-slide.t81 {background-image:url('../img/company81.png');}
.company-slide .swiper-slide.t82 {background-image:url('../img/company82.png');}
.company-slide .swiper-slide .tit {line-height:13px;font-size:13px;color:#9d9d9c;}
.company-slide .swiper-slide .dsc {line-height:24px;font-size:15px;color:#1d1d1b;font-weight:500;margin-top:20px;height:48px;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.company-slide .swiper-pagination-bullet {/*background-color:#dbe1ff;*/ transition:all .2s;}
.company-slide .swiper-pagination-bullet-active {background-color:#5d74e6;width:16px;border-radius:4px;}

.top-ranker {margin-top:20px;}
.top-ranker > .itm {display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:10px;padding:0 20px 0 60px;height:80px;background-color:#ffedec;border-radius:20px;overflow:hidden;}
.top-ranker > .itm:first-child {margin-top:0;}
.top-ranker > .itm > .rnk {position:absolute;left:0;top:0;height:100%;width:50px;display:flex;justify-content:center;align-items:center;font-size:14px;color:#fff;text-align:center;background-color:#ff9f9a;}
.top-ranker > .itm > .val {font-size:18px;font-weight:500;color:#282828;text-align:right;}
.top-ranker > .itm > .uid {font-size:15px;color:#787878;line-height:55px;padding-left:65px;background:no-repeat left center;background-size:contain;}
.top-ranker > .itm > .uid.t01 {background-image:url('../img/member_img01.png');}
.top-ranker > .itm > .uid.t02 {background-image:url('../img/member_img02.png');}
.top-ranker > .itm > .uid.t03 {background-image:url('../img/member_img03.png');}
.top-ranker > .itm > .uid.t04 {background-image:url('../img/member_img04.png');}
.top-ranker > .itm > .uid.t05 {background-image:url('../img/member_img05.png');}
.top-ranker > .itm > .uid.t06 {background-image:url('../img/member_img06.png');}
.top-ranker > .itm > .uid.t07 {background-image:url('../img/member_img07.png');}
.top-ranker > .itm > .uid.t08 {background-image:url('../img/member_img08.png');}
.top-ranker > .itm > .uid.t09 {background-image:url('../img/member_img09.png');}
.top-ranker > .itm > .uid.t10 {background-image:url('../img/member_img10.png');}
.top-ranker > .itm > .uid.t11 {background-image:url('../img/member_img11.png');}
.top-ranker > .itm > .uid.t12 {background-image:url('../img/member_img12.png');}
.top-ranker > .itm > .uid.t13 {background-image:url('../img/member_img13.png');}
.top-ranker > .itm > .uid.t14 {background-image:url('../img/member_img14.png');}
.top-ranker > .itm > .uid.t15 {background-image:url('../img/member_img15.png');}
.top-ranker > .itm > .uid.t16 {background-image:url('../img/member_img16.png');}
.top-ranker > .itm > .uid.t17 {background-image:url('../img/member_img17.png');}
.top-ranker > .itm > .uid.t18 {background-image:url('../img/member_img18.png');}
.top-ranker > .itm > .uid.t19 {background-image:url('../img/member_img19.png');}
.top-ranker > .itm > .uid.t20 {background-image:url('../img/member_img20.png');}

.news-layer {z-index:90;position:fixed;left:0;right:0;top:60px;bottom:0;background-color:#fff;overflow-y:auto;padding:20px 0 0;display:none;opacity:0;transform:translateX(30%);transition:all .3s;}
.news-layer.ing {display:block;}
.news-layer.on {opacity:1;transform:translateX(0);}
.news-layer .typ {line-height:14px;font-size:14px;color:#9d9d9c;}
.news-layer .tit {line-height:24px;font-size:20px;color:#1d1d1b;font-weight:500;margin-top:15px;word-break:keep-all;white-space:pre-wrap;}
.news-layer .cnt {margin-top:20px;line-height:24px;font-size:15px;color:#282828;word-break:keep-all;white-space:pre-wrap;}

.dim-image {z-index:90;position:fixed;left:0;right:0;top:60px;bottom:0;background-color:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;}
.dim-image > img {display:block;width:65%;max-width:400px;}

.popup-info {position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.4);display:none;}
.popup-info > .win {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:15px;padding:0 20px;width:80%;max-width:340px;box-sizing:border-box;}
.popup-info > .win > .tit {padding:15px 0;font-size:18px;font-weight:500;color:#5d74e6;text-align:center;border-bottom:1px solid #aebaf3;}
.popup-info > .win > .cnt {padding:15px 0;line-height:24px;font-size:14px;color:#282828;word-break:keep-all;}
.popup-info > .win > .cnt > span {display:inline-block;}
.popup-info > .win > .btn {padding:15px 0;border-top:1px solid #aebaf3;display:flex;justify-content:center;}
.popup-info > .win > .btn > a {display:block;padding:0 40px;line-height:34px;font-size:15px;font-weight:500;color:#fff;border-radius:17px;background-color:#5d74e6;}
.popup-info.ing {display:block;opacity:0;transition:all .3s;}
.popup-info.on  {opacity:1;}

.privacy {margin-bottom:30px;}
.privacy > .cnt {font-size:14px;line-height:23px;color:#333;font-weight:500;letter-spacing:-0.5px;word-break:keep-all;}
.privacy > .cnt.bold {font-size:15px;font-weight:bold;color:#303030;}
.privacy > .cnt p {margin-top:15px;word-break:inherit;}
.privacy > .cnt p:first-child {margin-top:0;}
.privacy > .cnt.box {padding:20px;font-size:14px;line-height:19px;letter-spacing:-0.5px;background-color:#f6f6f6;border-radius:5px;}
.privacy > .cnt.box .itm {margin-top:10px;word-break:keep-all !important;}
.privacy > .cnt.box .itm:first-child {margin-top:0;}
.privacy > .cnt.box .itm i {font-weight:bold;color:#00294f;font-style:normal;}
.privacy > .cnt.box .tit {font-size:15px;font-weight:700;margin-top:20px;color:#333;}
.privacy > .cnt.box .etc {margin-top:20px;color:#111;}
.privacy > .cnt.box .dsc {margin-top:20px;font-weight:700;color:#333;text-align:center;}
.privacy > .cnt.box .dsc strong {color:#f58220;}
.privacy > .cnt > label {cursor:pointer;}
.privacy > .cnt > label > input {display:inline-block;width:18px;height:18px;vertical-align:middle;margin-right:5px;}

form.frm {}
form.frm .frm-input {display:block;padding:0 15px;width:100%;height:44px;font-size:15px;color:#333;border:0;border-radius:10px;background-color:#f0f0f0;box-sizing:border-box;}
form.frm select.frm-input {background:#f0f0f0 url('../img/layaout_menu_bullet01_on.png') no-repeat right 15px center;background-size:auto 20%;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
form.frm fieldset > .frm-input {margin-top:10px;}
form.frm fieldset > .frm-input:first-child {margin-top:0;}

.warn-box {margin-top:50px;padding:20px 20px;line-height:20px;font-size:14px;font-weight:500;color:#78787a;text-align:center;word-break:keep-all;border-radius:13px;background-color:#ebeeff;}
.warn-box > p {margin-top:10px;}
.warn-box > p:first-child {margin-top:0;}
.warn-box span {display:inline-block;}
.warn-box .bold {font-size:1.1em;font-weight:bold;color:#5d74e6;}

/*================================================================================================
 * Tablet & Mobile 공용 : ~ 1023px
 *================================================================================================*/
@media (max-width:1023px) /* (max-width:1025px) */
{
}

/*================================================================================================
 * Tablet : 638px~1023px 해상도에서 해석하는 코드 
 *================================================================================================*/
@media (min-width:638px) and (max-width:1023px) /* (max-width:1025px) */
{   
}

/*================================================================================================
 * Mobile : 637px 이하 해상도에서 해석하는 코드
 *================================================================================================*/
@media(max-width:637px)
{
}

/*================================================================================================
 * Mobile : ~379px 해상도에서 해석하는 코드 (해상도 낮은 Mobile)
 *================================================================================================*/
@media (max-width:379px) /* (max-width:1025px) */
{
}