/* common */
html, body {background:#F6F6F6;}
.container {max-width:1630px; margin:0 auto; padding:0 15px;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}

/* header */
header {position:fixed; left:0; top:0; width:100%; background:#06092C; z-index:10000; padding:20px 0;}
header .container {display:flex; flex-wrap:wrap; align-items:center;}
header .header-logo h1 a img {width:102px;}
header .header-cate {flex:1; min-width:0; margin:0 60px;}
header .header-cate .cate-head {display:none;}
header .header-cate .cate-body ul {display:flex; flex-wrap:wrap; align-items:center;}
header .header-cate .cate-body ul li a {display:flex; flex-wrap:wrap; align-items:center; padding:0 40px; height:70px; font-size:20px; font-weight:500; color:#fff;}
header .header-cate .cate-body ul li.active a {color:#39EE8B; font-weight:bold;}
header .header-cate .cate-body ul li.mo {display:none;}
header .header-cate .cate-foot {display:none;}
header .header-button {display:flex; flex-wrap:wrap; align-items:center;}
header .header-button .button-box {
    gap:12px;
}
header .header-button .button-box .btn {margin:0 10px 0 0; font-weight:600; font-size:16px;}
header .header-button .button-box .btn:last-of-type {margin:0;}
header .header-button .menu {display:none;}
@media (max-width:1200px){
header .header-cate {margin:0 30px;}
header .header-cate .cate-body ul li a {padding:0 20px;}
}
@media (max-width:991px){
header {padding:15px 0;}
header .container {justify-content:space-between;}
header .header-logo h1 a img {width:58px;}
header .header-cate {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; transition:all ease 0.5s; z-index:9999; background:#fff; margin:0;}
header .header-cate .cate-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; background:#06092C; padding:0 15px; height:70px;}
header .header-cate .cate-head a {display:block; font-size:0; width:44px; height:44px; background:url('../images/icon_user_close.png') no-repeat center / cover;}
header .header-cate .cate-body {height:calc(100% - 198px); overflow-y:auto;}
header .header-cate .cate-body ul li {width:100%; border-bottom:1px solid #e5e5e5;}
header .header-cate .cate-body ul li.mo {display:block;}
header .header-cate .cate-body ul li a {padding:15px; justify-content:space-between; font-size:18px; font-weight:500; color:#000;}
header .header-cate .cate-body ul li a:after {display:block; content:""; width:24px; height:24px; background:url('../images/icon_user_cate_more.png') no-repeat center / cover;}
header .header-cate .cate-body ul li.active a {background:linear-gradient(to right, #048283, #13C463); color:#fff;}
header .header-cate .cate-body ul li.active a:after {background-image:url('../images/icon_user_cate_more_on.png');}
header .header-cate .cate-foot {display:block; padding:20px;}
header .header-cate .cate-foot a {display:flex; flex-wrap:wrap; align-items:center; padding:10px 0; font-size:16px; font-weight:500; color:#666;}
header .header-button .button-box .btn {height:35px; font-size:13px; padding:0 15px; margin:0 5px 0 0;}
header .header-button .menu {display:block; font-size:0; width:35px; height:35px; background:url('../images/icon_user_menu.png') no-repeat center / cover; margin:0 0 0 5px;}
header.fixed .header-cate {pointer-events:inherit; opacity:1;}
}

/* footer */
footer .footer-top {background:#282828; padding:20px 0;}
footer .footer-top .top-link {display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-top .top-link a {margin:0 40px 0 0; display:flex; flex-wrap:wrap; align-items:center; line-height:1; color:#fff; font-size:16px;}
footer .footer-top .top-link a:last-of-type {margin:0;}
footer .footer-bottom {background:#1D1D1D; padding:100px 0;}
footer .footer-bottom .container {display:flex; flex-wrap:wrap;}
footer .footer-bottom .bottom-logo {margin:0 100px 0 0;}
footer .footer-bottom .bottom-logo h2 img {width:146px;}
footer .footer-bottom .bottom-qa {margin:0 100px 0 0; display:flex; flex-wrap:wrap;}
footer .footer-bottom .bottom-qa div strong {display:block; font-size:20px; font-weight:bold; color:#fff;}
footer .footer-bottom .bottom-qa div p {margin:5px 0 0; font-size:14px; color:#a6a6a6;}
footer .footer-bottom .bottom-qa:before {position:relative; top:-4px; display:block; content:""; width:40px; height:40px; margin:0 10px 0 0; background:url('../images/icon_user_qa.png') no-repeat center / cover;}
footer .footer-bottom .bottom-info {flex:1; min-width:0; margin:0 100px 0 0;}
footer .footer-bottom .bottom-info p {font-size:14px; color:#a6a6a6;}
footer .footer-bottom .bottom-copy p {font-size:14px; color:#a6a6a6;}
@media (max-width:1230px){
footer .footer-bottom .bottom-logo {margin:0 50px 0 0;}
footer .footer-bottom .bottom-qa {margin:0 50px 0 0;}
footer .footer-bottom .bottom-info {margin:0 50px 0 0;}
}
@media (max-width:991px){
footer .footer-top .top-link a {width:100%; margin:0; padding:10px 0;}
footer .footer-bottom {padding:40px 0;}
footer .footer-bottom .bottom-logo {width:100%; order:4; margin:30px 0 0;}
footer .footer-bottom .bottom-qa {width:100%; order:1;}
footer .footer-bottom .bottom-qa:before {margin:0 0 10px;}
footer .footer-bottom .bottom-qa div {width:100%;}
footer .footer-bottom .bottom-info {flex:none; width:100%; order:2; margin:30px 0 0;}
footer .footer-bottom .bottom-copy {width:100%; order:3; margin:30px 0 0;}
}

/* section */
section {padding:0 0 80px; margin:110px 0 0; min-height:calc(100vh - 450px)}
@media (max-width:991px){
section {padding:0 0 40px; margin:69.8px 0 0; min-height:unset;}
}

/* color */
.ft-green {color:#3B971F !important;}
.ft-blue {color:#314CFF !important;}
.ft-purple {color:#542FF6 !important;}
.ft-black {color:#000000 !important;}
.ft-gray {color:#6c6c6c !important;}

/* title-box */
.title-box h2 {padding:50px 0; text-align:center; font-size:40px; font-weight:600;}
.title-box h3 {margin:0 0 20px; font-size:24px; font-weight:600;}
.title-box h4 {margin:0 0 10px; font-size:20px; font-weight:500;}
@media (max-width:991px){
.title-box h2 {padding:20px 0; font-size:25px;}
.title-box h3 {font-size:18px;}
.title-box h4 {font-size:16px;}
}

/* text-box */
.text-box .text-inner {margin:0 0 50px;}
.text-box .text-inner:last-of-type {margin:0;}
.text-box .text-inner h4 {font-size:24px; font-weight:600; word-break:keep-all; margin:0 0 15px;}
.text-box .text-inner strong {font-size:18px; font-weight:600; display:block; word-break:keep-all; margin:0 0 10px;}
.text-box .text-inner p {font-size:16px; color:#666; word-break:keep-all;}
.text-box .text-inner b {font-size:16px; color:#333; font-weight:700;}
.text-box .text-inner ol {padding:0 0 0 15px; margin:10px 0 0;}
.text-box .text-inner ol > li {margin:0 0 5px; list-style:auto; font-size:16px; color:#666; word-break:keep-all;}
.text-box .text-inner ol > li:last-of-type {margin:0;}
.text-box .text-inner ol > li a {font-size:16px; color:#333; text-decoration:underline;}
.text-box .text-inner ol > li ul {margin:5px 0 0;}
.text-box .text-inner ul {padding:0 0 0 20px; margin:10px 0 0;}
.text-box .text-inner ul > li {margin:0 0 5px; list-style:disc; font-size:16px; color:#666; word-break:keep-all;}
.text-box .text-inner ul > li:last-of-type {margin:0;}
.text-box .text-inner ul > li a {font-size:16px; color:#333; text-decoration:underline;}
.text-box .text-inner table {border-top:1px solid #333; margin:10px 0;}
.text-box .text-inner table thead tr th {background:#efefef; text-align:left; padding:10px; border:1px solid #ddd; border-width:0 1px 1px 0; font-size:16px;}
.text-box .text-inner table thead tr th:last-of-type {border-right:0;}
.text-box .text-inner table tbody tr td {text-align:left; padding:10px; border:1px solid #ddd; border-width:0 1px 1px 0; font-size:16px; color:#666; word-break:keep-all;}
.text-box .text-inner table tbody tr td:last-of-type {border-right:0;}
@media (max-width:991px){
.text-box .text-inner {margin:0 0 30px;}
.text-box .text-inner h4 {font-size:20px;}
.text-box .text-inner strong {font-size:16px;}
.text-box .text-inner p {font-size:14px;}
.text-box .text-inner b {font-size:14px;}
.text-box .text-inner ol > li {font-size:14px;}
.text-box .text-inner ol > li a {font-size:14px;}
.text-box .text-inner ul > li {font-size:14px;}
.text-box .text-inner ul > li a {font-size:14px;}
.text-box .text-inner table thead tr th {font-size:14px;}
.text-box .text-inner table tbody tr td {font-size:13px;}
}

/* search-box */
.search-box {background:#06092C; padding:40px 0;}
.search-box h3 {text-align:center; font-size:32px; font-weight:bold; color:#fff; margin:0 0 15px;}
.search-box strong {margin:0 40px 0 0; font-size:20px; font-weight:500;}
.search-box form {max-width:685px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center;}
.search-box.white {background:#fff;}
@media (max-width:991px){
.search-box {padding:20px 0;}
.search-box h3 {font-size:20px;}
.search-box strong {display:none;}
}

/* input-box */
.input-box {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #d9d9d9; background:#fff; overflow:hidden;}
.input-box input {flex:1; min-width:0; height:40px; padding:0 12px; font-size:14px; color:#000;}
.input-box input::placeholder {color:#5d5d5d;}

/* select-box */
.select-box {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #d9d9d9; background:#fff; overflow:hidden;}
.select-box select {flex:1; min-width:0; height:40px; padding:0 40px 0 10px; font-size:14px; background:url('../images/icon_user_select.png') no-repeat calc(100% - 10px) center / 24px; color:#000;}

/* check-box */
.check-box {position:relative; overflow:hidden;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; color:#a1a1a1;}
.check-box label:before {display:block; content:""; width:20px; height:20px; margin:0 6px 0 0; background:url('../images/icon_user_check.svg') no-repeat center / cover;}
.check-box input:checked ~ label {color:#000;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_user_check_on.png');}

/* file-box */
.file-box {display:flex; flex-wrap:wrap; align-items:center;}
.file-box .file-name {display:flex; flex-wrap:wrap; align-items:center; border-radius:4px; border:1px solid #d9d9d9; background:#fff; flex:1; min-width:0; margin:0 5px 0 0;}
.file-box .file-name p {padding:0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:40px; line-height:40px; color:#5d5d5d;}
.file-box .file-select {position:relative; overflow:hidden;}
.file-box .file-select input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.file-box .file-select label {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:4px; height:40px; color:#fff; background:#939091; font-size:14px; font-weight:500; padding:0 10px;}
.file-box .file-name.has-value p {color:#000;}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:250px; padding:10px; border-radius:4px; border:1px solid #d9d9d9; background:#fff; font-size:14px;}
.textarea-box textarea::placeholder {color:#5d5d5d;}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:40px; border-radius:4px; font-size:14px; padding:0 24px;}
.button-box .btn.round {border-radius:50px;}
.button-box .btn.full {width:100%; flex:1; min-width:0; padding:0;}
.button-box .btn-xs {height:26px; padding:0 12px; border-radius:4px;}
.button-box .btn-sm {height:33px; padding:0 15px; border-radius:4px;}
.button-box .btn-lg {height:60px; font-size:18px;}
.button-box .btn-gray {background:#747474; color:#fff;}
.button-box .btn-white {background:#ffffff; color:#000;}
.button-box .btn-green {background:linear-gradient(to right, #037D86, #14CA60); color:#fff;}
.button-box .btn-blue {background:#4779E4; color:#fff;}
.button-box .btn-skyblue {background:#28A8EA; color:#fff;}
.button-box .btn-purple {background:#542FF6; color:#fff;}
.button-box .btn-lightgreen {background:#13C463; color:#fff;}
.button-box .btn-orange-outline {background:#fff; color:#EA6C3E; border:1px solid #EA6C3E;}
.button-box .btn-blue-outline {background:#fff; color:#314CFF; border:1px solid #314CFF;}
.button-box .btn-gray-outline {background:#fff; color:#626262; border:1px solid #626262;}
.button-box .btn-active {background:linear-gradient(to right, #0C1655, #037455); color:#fff;}
.button-box .btn img {width:30px; margin:0 10px 0 0;}
@media (max-width:991px){
.button-box .btn img {width:20px; margin:0 5px 0 0;}
}

/* icon-box */
.icon-box { position: relative; display:flex; flex-wrap:wrap; align-items:center;}
.icon-guide { position: relative; width: 20px; height: 20px; background: url("../images/icon_user_guide.png") no-repeat center / cover; border: none; cursor: pointer; display: block; font-size: 0; }
.tooltip { position: fixed; max-width: 250px; background: #000; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 13px; line-height: 1.5; z-index: 1000; white-space: normal; word-break: break-word; overflow-wrap: break-word; box-sizing: border-box; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.tooltip p {font-size:13px; color:#fff !important; padding:0 !important; text-align:left;}
.tooltip-arrow { content: ""; position: absolute; width: 10px; height: 10px; background: #000; }
.icon-guide:hover .tooltip { opacity: 1; pointer-events: auto; }
.icon-box .icon-guide.black {background-image:url('../images/icon_user_guide_black.png');}
.icon-box .icon-x {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 auto; font-size:0;}
.icon-box .icon-x:before {display:block; content:""; width:30px; height:30px; background:url('../images/icon_user_x.png') no-repeat center / cover;}
.icon-box .icon-o {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 auto; font-size:0;}
.icon-box .icon-o:before {display:block; content:""; width:30px; height:30px; background:url('../images/icon_user_o.png') no-repeat center / cover;}
.icon-box .icon-o.font {font-size:18px; font-weight:bold; color:#4779E4;}
.icon-box .icon-o.font:before {margin:0 10px 0 0;}
@media (max-width:991px){
.icon-box {position:static;}
.icon-box .icon-guide div {left:auto; right:42px; top:calc(50% - 7px);}
.icon-box .icon-guide div:before {left:auto; right:-2px; font-size:12px !important; word-break:keep-all;}
.icon-box .icon-guide div p {font-size:12px !important; word-break:keep-all;}
.icon-box .icon-x:before {width:20px; height:20px;}
.icon-box .icon-o:before {width:20px; height:20px;}
.icon-box .icon-o.font {font-size:13px;}
.icon-box .icon-o.font:before {margin:0 5px 0 0;}
}

/* help-box */
.help-box ul {display:flex; flex-wrap:wrap;}
.help-box ul li {flex:1; min-width:0; margin:0 20px 0 0; border-radius:30px;}
.help-box ul li:last-of-type {margin:0;}
.help-box ul li .inner {display:block; padding:60px 30px;}
.help-box ul li .inner strong {display:block; text-align:center; font-size:24px; font-weight:bold; color:#fff;}
.help-box ul li .inner span {width:150px; height:50px; margin:10px auto 0; font-size:20px; font-weight:bold; color:#fff;  border:2px solid #fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
.help-box ul li .inner:before {display:block; content:""; width:120px; height:120px; margin:0 auto 10px; background-size:cover; background-position:center;}
.help-box ul li.help01 {background:#31999D;}
.help-box ul li.help02 {background:#2283D2;}
.help-box ul li.help03 {background:#454CDD;}
.help-box ul li.help04 {background:#763DB3;}
.help-box ul li.help01 .inner:before {background-image:url('../images/icon_user_help_01.png');}
.help-box ul li.help02 .inner:before {background-image:url('../images/icon_user_help_02.png');}
.help-box ul li.help03 .inner:before {background-image:url('../images/icon_user_help_03.png');}
.help-box ul li.help04 .inner:before {background-image:url('../images/icon_user_help_04.png');}
@media (max-width:991px){
.help-box ul {margin:0 -5px -10px;}
.help-box ul li {width:calc(50% - 10px); margin:0 5px 10px; flex:none; border-radius:15px;}
.help-box ul li:last-of-type {margin:0 5px 10px;}
.help-box ul li .inner {padding:30px 15px;}
.help-box ul li .inner strong {font-size:16px; line-height:1.3;}
.help-box ul li .inner span {width:136px; height:40px; font-size:16px;}
.help-box ul li .inner:before {width:70px; height:70px;}
}

/* sca-box */
.sca-box ul {display:block; overflow-x:auto; white-space:nowrap; font-size:0;}
.sca-box ul li {display:inline-block; font-size:0; margin:0 10px 0 0;}
.sca-box ul li a {height:47px; padding:0 30px; font-size:18px; font-weight:600; border:1px solid #E3E3E3; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#fff; border-radius:50px;}
.sca-box ul li.active a {background:#000; color:#fff;}
@media (max-width:991px){
.sca-box ul {margin:0 -15px;}
.sca-box ul li {margin:0 5px 0 0;}
.sca-box ul li:first-of-type {margin-left:15px;}
.sca-box ul li:last-of-type {margin-right:15px;}
.sca-box ul li a {height:40px; padding:0 20px; font-size:14px;}
}

/* tab-box */
.tab-box {background:#fff; border:1px solid #e3e3e3; border-width:1px 0; margin:0 0 60px;}
.tab-box .container {padding:0;}
.tab-box ul {display:flex; flex-wrap:wrap; align-items:center;}
.tab-box ul li {flex:1; min-width:0; border-right:1px solid #e3e3e3;}
.tab-box ul li:last-of-type {border:0;}
.tab-box ul li a {height:70px; font-size:20px; text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; word-break:keep-all;}
.tab-box ul li.active a {background:#314CFF; color:#fff;}
.tab-box.cate {border:0; background:none;}
.tab-box.cate ul {margin:0 -5px -10px;}
.tab-box.cate ul li {flex:none; width:calc(25% - 10px); margin:0 5px 10px; border:0;}
.tab-box.cate ul li a {height:55px; background:#f5f5f5; font-size:16px; font-weight:600;}
.tab-box.cate ul li.active a {background:#414141; color:#fff;}
.tab-box.cate ul li.inactive a {background:#fff; color:#000;}
.tab-box.guide {background:none; border:0; margin:0;}
.tab-box.guide ul li {flex:none; width:100%; margin:0 0 10px; border:0;}
.tab-box.guide ul li:last-of-type {margin:0;}
.tab-box.guide ul li a {background:#f6f6f6; justify-content:space-between; padding:20px; text-align:left; height:auto; border-radius:10px;}
.tab-box.guide ul li a p {flex:1; min-width:0; font-size:20px; word-break:keep-all;}
.tab-box.guide ul li a:after {display:block; content:""; width:24px; height:24px; margin:0 0 0 15px; background:url('../images/icon_user_arrow_right.png') no-repeat center / cover;}
.tab-box.guide ul li.active a {background:#314CFF;}
.tab-box.guide ul li.active a p {color:#fff;}
.tab-box.guide ul li.active a:after {background-image:url('../images/icon_user_arrow_right_white.png');}

.tab-box.guide ul li.active button {background:#314CFF;}
.tab-box.guide ul li.active button p {color:#fff;}
.tab-box.guide ul li.active button:after {background-image:url('../images/icon_user_arrow_right_white.png');}
@media (max-width:1200px){
.tab-box.cate ul li {width:calc(33.33% - 10px);}
}
@media (max-width:991px){
.tab-box {margin:0 0 30px;}
.tab-box ul li a {height:50px; font-size:13px;}
.tab-box.cate ul {margin:0;}
.tab-box.cate ul li {width:100%; margin:0 0 10px;}
.tab-box.cate ul li:last-of-type {margin:0;}
.tab-box.guide ul li a {padding:15px;}
.tab-box.guide ul li a p {font-size:15px;}
.tab-box.guide ul li a:after {width:20px; height:20px; margin:0 0 0 10px; transform:rotate(90deg);}
}

/* tab-content-box */
.tab-content-box > .content {display:none;}
.tab-content-box > .content.active {display:block;}

/* inner-box */
.inner-box {background:#fff; padding:40px;}
.inner-box.small {max-width:640px; margin:0 auto;}
@media (max-width:991px){
.inner-box {padding:20px;}
}

/* border-box */
.border-box {border:1px solid #000; border-radius:10px; padding:40px;}
@media (max-width:991px){
.border-box {padding:20px;}
}

/* write-box */
.write-box {border-top:1px solid #e3e3e3;}
.write-box > ul > li {border-bottom:1px solid #e3e3e3; display:flex; flex-wrap:wrap;}
.write-box > ul > li > strong {width:80px; font-size:14px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center;}
.write-box > ul > li > strong b {font-size:14px; font-weight:500; margin:0 0 0 3px;}
.write-box > ul > li > strong.md {width:80px;}
.write-box > ul > li > strong.lg {width:120px;}
.write-box > ul > li > div {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; padding:10px;}
.write-box > ul > li > div p {padding:10px 0; font-size:14px; font-weight:500; color:#a1a1a1;}
@media (max-width:991px){
.write-box > ul > li > strong.md {width:100%; margin:0 0 5px; padding:10px 10px 0;}
.write-box > ul > li > strong.md ~ div {flex:none; width:100%; padding:0 10px 10px; position:relative;}
.write-box > ul > li > strong.lg {width:100%; margin:0 0 5px; padding:10px 10px 0;}
.write-box > ul > li > strong.lg ~ div {flex:none; width:100%; padding:0 10px 10px; position:relative;}
}

/* faq-box */
.faq-box > ul > li {margin:0 0 10px;}
.faq-box > ul > li:last-of-type {margin:0;}
.faq-box > ul > li .inner {display:flex; flex-wrap:wrap; align-items:center; background:#fff; padding:24px 40px; border:2px solid #fff;}
.faq-box > ul > li .inner:after {display:block; content:""; width:24px; height:24px; margin:0 0 0 24px; background:url('../images/icon_user_faq_toggle.png') no-repeat center / cover;}
.faq-box > ul > li .inner .list-left {flex:1; min-width:0;}
.faq-box > ul > li .inner .list-left .left-head a {display:flex; flex-wrap:wrap;}
.faq-box > ul > li .inner .list-left .left-head b {display:flex; flex-wrap:wrap; align-items:center; font-size:15px; font-weight:bold; color:#314cff;}
.faq-box > ul > li .inner .list-left .left-head b:after {display:inline-block; content:""; width:2px; height:10px; margin:0 10px; background:#314cff;}
.faq-box > ul > li .inner .list-left .left-head p {flex:1; min-width:0; font-size:20px; font-weight:400;}
.faq-box > ul > li .inner .list-left .left-head time {font-size:16px; color:#666; padding:5px 0 0;}
.faq-box > ul > li .inner .list-left .left-head .button-box {margin:2px 10px 0 0; width:62px; align-items:flex-start;}
.faq-box > ul > li .inner .list-left .left-body {border-top:1px solid #000; margin:10px 0 0; padding:20px 0 0; display:none;}
.faq-box > ul > li .inner .list-left .left-body p {font-size:16px; color:#666; word-break:keep-all; margin:0 0 24px; white-space: pre-line;}
.faq-box > ul > li .inner .list-left .left-body p:last-of-type {margin:0;}
.faq-box > ul > li .inner .list-left .left-foot {display:none; margin:20px 0 0;}
.faq-box > ul > li .inner .list-left .left-foot > div {border-top:1px solid #000; padding:20px 0;}
.faq-box > ul > li.active .inner {border:2px solid #000;}
.faq-box > ul > li.active .inner:after {transform:rotate(180deg);}
.faq-box > ul > li.active .inner .list-left .left-head p {font-weight:bold;}
.faq-box > ul > li.active .inner .list-left .left-body {display:block;}
.faq-box > ul > li.active .inner .list-left .left-foot {display:block;}
.faq-box.qa > ul > li .inner:after {display:none;}
@media (max-width:991px){
.faq-box > ul > li .inner {padding:20px;}
.faq-box > ul > li .inner:after {margin:0 0 0 10px;}
.faq-box > ul > li .inner .list-left .left-head b {width:100%;}
.faq-box > ul > li .inner .list-left .left-head b:after {display:none;}
.faq-box > ul > li .inner .list-left .left-head p {flex:none; width:100%; font-size:18px; margin:5px 0 0; font-weight:400;}
.faq-box > ul > li .inner .list-left .left-head time {font-size:14px; width:100%; margin:5px 0 0; padding:0;}
.faq-box > ul > li .inner .list-left .left-head .button-box {margin:0 5px 0 0;}
.faq-box > ul > li .inner .list-left .left-body p {font-size:14px;}
.faq-box.qa > ul > li .inner .list-left .left-head p {flex:1; min-width:0; margin:0 0 0 5px;}
}

/* qa-banner-box */
.qa-banner-box {margin:80px 0 -80px; padding:80px 0; background:url('../images/bg_user_qa.png') no-repeat center / cover;}
.qa-banner-box ul {display:flex; flex-wrap:wrap;}
.qa-banner-box ul li {flex:1; min-width:0; margin:0 20px 0 0; border-radius:30px;}
.qa-banner-box ul li:last-of-type {margin:0;}
.qa-banner-box ul li:nth-of-type(1) {background:#31999D;}
.qa-banner-box ul li:nth-of-type(2) {background:#604CD1;}
.qa-banner-box ul li:nth-of-type(3) {background:#046CC2;}
.qa-banner-box ul li .inner {display:block; padding:60px 30px;}
.qa-banner-box ul li .inner strong {display:block; text-align:center; margin:0 0 15px; font-size:30px; font-weight:bold; color:#fff;}
.qa-banner-box ul li .inner p {font-size:20px; text-align:center; color:#fff;}
.qa-banner-box ul li .inner span {margin:20px auto 0; width:150px; height:50px; font-size:20px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; border:2px solid #fff; color:#fff;}
@media (max-width:991px){
.qa-banner-box {margin:30px 0 -40px; padding:40px 0;}
.qa-banner-box ul li {flex:none; width:100%; margin:0 0 10px;}
.qa-banner-box ul li:last-of-type {margin:0; border-radius:15px;}
.qa-banner-box ul li .inner {padding:30px 15px;}
.qa-banner-box ul li .inner strong {font-size:24px; margin:0 0 10px;}
.qa-banner-box ul li .inner p {font-size:16px;}
.qa-banner-box ul li .inner span {margin:10px auto 0; width:135px; height:40px; font-size:16px;}
}

/* file-list-box */
.file-list-box > ul {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.file-list-box > ul > li {width:calc(25% - 10px); margin:0 5px 10px;}
.file-list-box > ul > li a {display:flex; flex-wrap:wrap; align-items:center; background:#f5f5f5; padding:10px;}
.file-list-box > ul > li a p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0 0 10px; font-size:16px; color:#666;}
.file-list-box > ul > li a:before {display:block; content:""; width:24px; height:24px; background:url('../images/icon_user_file.png') no-repeat center / cover;}
@media (max-width:991px){
.file-list-box > ul {margin:0;}
.file-list-box > ul > li {width:100%; margin:0 0 5px;}
.file-list-box > ul > li:last-of-type {margin:0;}
.file-list-box > ul > li a p {font-size:14px;}
.file-list-box > ul > li a:before {width:20px; height:20px;}
}

/* comment-box */
.comment-box > ul > li {border-bottom:1px solid #ddd; padding:0 0 20px; margin:0 0 20px; display:flex; flex-wrap:wrap;}
.comment-box > ul > li:last-of-type {border:0; padding:0; margin:0;}
.comment-box > ul > li:before {display:block; content:""; width:24px; height:24px; margin:0 10px 0 0; background:url('../images/icon_user_comment.png') no-repeat center / cover;}
.comment-box > ul > li .comment-inner {flex:1; min-width:0;}
.comment-box > ul > li .comment-inner .list-head {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 10px;}
.comment-box > ul > li .comment-inner .list-head time {margin:0 0 0 10px; font-size:16px; color:#666;}
.comment-box > ul > li .comment-inner .list-body .body-text {background:#f5f5f5; padding:10px;}
.comment-box > ul > li .comment-inner .list-body .body-text p {font-size:16px; color:#5d5d5d;}
.comment-box > ul > li .comment-inner .list-body .body-file {margin:10px 0 0;}
@media (max-width:991px){
.comment-box > ul > li:before {width:20px; height:20px;}
.comment-box > ul > li .comment-inner .list-head time {font-size:14px; margin:0 0 0 5px;}
.comment-box > ul > li .comment-inner .list-body .body-text p {font-size:14px;}
}

/* paging-box */
.paging-box {margin:60px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li {margin:0 12px 0 0;}
.paging-box ul li:last-of-type {margin:0;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px; font-size:14px; font-weight:600; color:#A1A1A1;}
.paging-box ul li p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px; font-size:14px; font-weight:600; color:#A1A1A1;}
.paging-box ul li.active a {border-radius:50%; background:#3D6AFF; color:#fff;}
.paging-box ul li.pg a {font-size:0;}
.paging-box ul li.pg.prev a {background:url('../images/icon_paging_prev.svg') no-repeat center / cover;}
.paging-box ul li.pg.next a {background:url('../images/icon_paging_next.svg') no-repeat center / cover;}
@media (max-width:991px){
.paging-box {margin:30px 0 0;}
.paging-box ul li {margin:0 7px 0 0;}
}

/* announce-list-box */
.announce-list-box > ul {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.announce-list-box > ul > li {width:calc(33.33% - 10px); margin:0 5px 10px; background:#fff;}
.announce-list-box > ul > li .inner {display:flex; flex-wrap:wrap; padding:40px;}
.announce-list-box > ul > li .inner time {display:flex; flex-wrap:wrap; align-items:center; height:40px; border:1px solid #EA6C3E; border-radius:4px; padding:0 15px; color:#EA6C3E; font-size:18px; font-weight:bold;}
.announce-list-box > ul > li .inner p {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100%; margin:15px 0 0; font-size:20px;}
.announce-list-box > ul > li .inner small {width:100%; margin:10px 0 0; font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block;}
@media (max-width:991px){
.announce-list-box > ul {margin:0;}
.announce-list-box > ul > li {width:100%; margin:0 0 10px;}
.announce-list-box > ul > li:last-of-type {margin:0;}
.announce-list-box > ul > li .inner {padding:20px;}
.announce-list-box > ul > li .inner time {height:35px; padding:0 15px; font-size:15px;}
.announce-list-box > ul > li .inner p {margin:10px 0 0; font-size:18px;}
.announce-list-box > ul > li .inner small {margin:5px 0 0; font-size:15px;}
}

/* announce-view-box */
.announce-view-box .view-head {display:flex; flex-wrap:wrap; align-items:center; background:#fff; padding:20px 40px; margin:0 0 10px;}
.announce-view-box .view-head h3 {flex:1; min-width:0; padding:0 20px 0 0; font-size:20px; font-weight:bold;}
.announce-view-box .view-head time {font-size:16px; color:#666;}
.announce-view-box .view-body {background:#fff; padding:20px 40px; margin:0 0 10px;}
.announce-view-box .view-body p {font-size:20px; margin:0 0 30px;}
.announce-view-box .view-body p:last-of-type {margin:0;}
.announce-view-box .view-foot {background:#fff; border-top:1px solid #D2D2D2;}
.announce-view-box .view-foot ul li {border-bottom:1px solid #d2d2d2;}
.announce-view-box .view-foot ul li a {display:flex; flex-wrap:wrap; align-items:center; padding:10px 0;}
.announce-view-box .view-foot ul li a b {width:90px; height:40px; display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; padding:0 10px;}
.announce-view-box .view-foot ul li a p {flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:600; color:#666; padding:0 10px;}
@media (max-width:991px){
.announce-view-box .view-head {padding:20px;}
.announce-view-box .view-head h3 {flex:none; width:100%; padding:0; margin:0 0 10px; font-size:18px;}
.announce-view-box .view-head time {width:100%; font-size:14px;}
.announce-view-box .view-body {padding:20px;}
.announce-view-box .view-body p {font-size:14px; margin:0 0 20px;}
.announce-view-box .view-foot ul li a b {width:80px; height:35px; font-size:14px;}
.announce-view-box .view-foot ul li a p {font-size:14px;}
}

/* guide-box */
.guide-box {background:#fff; padding:80px 0; margin:0 0 -80px;}
.guide-box .container {display:flex; flex-wrap:wrap; align-items:flex-start;}
.guide-box .title-box {width:100%;}
.guide-box .list-left {width:350px; margin:0 50px 0 0; position:sticky; top:120px;}
.guide-box .list-right {flex:1; min-width:0;}
@media (max-width:991px){
.guide-box {padding:30px 0; margin:0 0 -30px;}
.guide-box .list-left {width:100%; margin:0 0 20px; position:static;}
.guide-box .list-right {flex:none; width:100%;}
}

/* guide-image-box */
.guide-image-box h4 {font-size:20px; font-weight:600; border-top:3px solid #000; border-bottom:1px solid #000; padding:20px; background:#fff; margin:0 0 20px;}
.guide-image-box > ul > li {margin:0 0 20px;}
.guide-image-box > ul > li:last-of-type {margin:0;}
.guide-image-box > ul > li .list-head {display:flex; flex-wrap:wrap; align-items:center; background:#06092C; border-radius:10px; padding:20px; margin:0 0 10px;}
.guide-image-box > ul > li .list-head b {padding:0 15px; font-size:20px; font-weight:bold; background:#00F0FF; display:flex; flex-wrap:wrap; align-items:center; height:34px; border-radius:50px;}
.guide-image-box > ul > li .list-head p {flex:1; min-width:0; padding:0 0 0 10px; font-size:20px; font-weight:bold; color:#fff;}
.guide-image-box > ul > li .list-body {border:1px solid #000; border-radius:10px; padding:20px; background:#fff;}
.guide-image-box > ul > li .list-body .body-image {background:#F5F5F5; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.guide-image-box > ul > li .list-body .body-image img {max-width:100%;}
.guide-image-box > ul > li .list-body .body-text {border-top:1px solid #000; padding:20px 0 0; margin:10px 0 0;}
.guide-image-box > ul > li .list-body .body-text dl dd {position:relative; font-size:18px; word-break:keep-all; margin:0 0 5px; padding:0 0 0 15px;}
.guide-image-box > ul > li .list-body .body-text dl dd:last-of-type {margin:0;}
.guide-image-box > ul > li .list-body .body-text dl dd:before {position:absolute; left:0; top:13px; width:7px; height:1px; content:""; background:#000;}
.guide-image-box > ul > li .list-body .body-text dl dd.fw7 {padding:0;}
.guide-image-box > ul > li .list-body .body-text dl dd.fw7:before {display:none;}
@media (max-width:991px){
.guide-image-box h4 {font-size:16px; padding:15px; margin:0 0 15px;}
.guide-image-box > ul > li .list-head {padding:15px;}
.guide-image-box > ul > li .list-head b {height:27px; font-size:16px;}
.guide-image-box > ul > li .list-head p {flex:none; width:100%; margin:10px 0 0; font-size:16px; word-break:keep-all; padding:0;}
.guide-image-box > ul > li .list-body {padding:15px;}
.guide-image-box > ul > li .list-body .body-text {padding:10px 0 0;}
.guide-image-box > ul > li .list-body .body-text dl dd {font-size:14px; padding:0 0 0 10px;}
.guide-image-box > ul > li .list-body .body-text dl dd:before {width:5px; top:10px;}
}

/* price-list-box */
.price-list-box {padding:80px 0; background:#fff;}
.price-list-box h3 {margin:0 0 20px; font-size:24px; font-weight:600;}
.price-list-box ul {display:flex; flex-wrap:wrap;}
.price-list-box ul li {flex:1; min-width:0; margin:0 45px 0 0; background:#fbfbfb; box-shadow:0 2px 3px rgba(0,0,0,0.25); border-radius:20px; overflow:hidden;}
.price-list-box ul li:last-of-type {margin:0;}
.price-list-box ul li .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#141541; padding:15px;}
.price-list-box ul li .list-head strong {font-size:20px; font-weight:bold; color:#fff;}
.price-list-box ul li .list-head b {margin:0 0 0 10px; height:27px; background:#FFEA00; border-radius:0 10px 0 10px; padding:0 20px; font-size:18px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.price-list-box ul li .list-body {padding:30px;}
.price-list-box ul li .list-body .body-price {min-height:140px;}
.price-list-box ul li .list-body .body-price img {display:block; margin:0 auto; width:178px;}
.price-list-box ul li .list-body .body-price strong {display:block; text-align:center; font-size:48px; font-weight:bold; line-height:1; padding:14px 0 0;}
.price-list-box ul li .list-body .body-price p {text-align:center; margin:10px 0 0; font-size:18px;}
.price-list-box ul li .list-body .body-option {margin:20px 0 0; border-radius:12px; border:1px solid #e3e3e3; padding:20px 10px;}
.price-list-box ul li .list-body .body-option dl dd {display:flex; flex-wrap:wrap;}
.price-list-box ul li .list-body .body-option dl dd:before {display:block; content:""; width:25px; height:25px; background:url('../images/icon_user_price_disc.png') no-repeat center / cover;}
.price-list-box ul li .list-body .body-option dl dd p {flex:1; min-width:0; margin:0 0 0 5px; font-size:18px; word-break:keep-all;}
.price-list-box ul li .list-body .body-option dl dd p b {font-size:18px; font-weight:700;}
.price-list-box ul li .list-body .body-button {border-top:3px dashed rgba(102,102,102,0.2); padding:20px 0 0; margin:20px 0 0;}
.price-list-box ul li .list-body .body-button .button-box .btn {height:55px; font-size:18px; font-weight:600; border-radius:8px;}
@media (max-width:1250px){
.price-list-box ul li {margin:0 25px 0 0;}
.price-list-box ul li .list-body .body-price strong {font-size:35px;}
.price-list-box ul li .list-body .body-price p {font-size:16px;}
.price-list-box ul li .list-body .body-option dl dd:before {width:22px; height:22px;}
.price-list-box ul li .list-body .body-option dl dd p {font-size:16px;}
.price-list-box ul li .list-body .body-option dl dd p b {font-size:16px;}
}
@media (max-width:991px){
.price-list-box {padding:30px 0;}
.price-list-box h3 {margin:0 0 20px; font-size:16px;}
.price-list-box ul li {flex:none; width:100%; margin:0 0 20px;}
.price-list-box ul li:last-of-type {margin:0;}
.price-list-box ul li .list-body {padding:20px 15px;}
.price-list-box ul li .list-body .body-price {min-height:0;}
}

/* price-table-box */
.price-table-box {padding:80px 0; background:url('../images/bg_user_price_table.png') no-repeat center / cover;}
.price-table-box h3 {margin:0 0 20px; font-size:24px; font-weight:600; color:#fff;}
.price-table-box table {border-radius:20px; overflow:hidden; table-layout:fixed;}
.price-table-box table thead tr th {border:1px solid #D9D9D9; border-width:0 1px 1px 0; background:#F6F8FA;}
.price-table-box table thead tr th:first-of-type {border-radius:20px 0 0 0 0; width:280px;}
.price-table-box table thead tr th:last-of-type {border-right:0; border-radius:0 20px 0 0;}
.price-table-box table thead tr th:nth-of-type(2) {background:#367CFF;}
.price-table-box table thead tr th:nth-of-type(3) {background:#542FF6;}
.price-table-box table thead tr th:nth-of-type(4) {background:#13C463;}
.price-table-box table thead tr th div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:70px;}
.price-table-box table thead tr th div p {font-size:20px; font-weight:bold; color:#fff;}
.price-table-box table thead tr th div b {margin:0 0 0 10px; height:27px; background:#FFEA00; border-radius:0 10px 0 10px; padding:0 20px; font-size:18px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.price-table-box table tbody tr th {background:#F6F8FA; border:1px solid #d9d9d9; border-width:0 1px 1px 0; font-size:18px; height:70px;}
.price-table-box table tbody tr td {background:#ffffff; border:1px solid #d9d9d9; border-width:0 1px 1px 0; font-size:18px;}
.price-table-box table tbody tr td:last-of-type {border-right:0;}
.price-table-box table tbody tr td.ft-blue {color:#4779E4 !important;}
.price-table-box table tbody tr td.bg-purple {background:#F8F6FF !important;}
@media (max-width:991px){
.price-table-box {padding:30px 0;}
.price-table-box table thead tr th {height:auto; padding:12px 5px; vertical-align:bottom;}
.price-table-box table thead tr th:first-of-type {width:auto;}
.price-table-box table thead tr th div {align-items:flex-end; height:auto;}
.price-table-box table thead tr th div p {width:100%; font-size:16px; line-height:1.3; order:2; font-weight:600;}
.price-table-box table thead tr th div b {margin:0 0 10px; max-width:100%; order:1; font-size:14px;}
.price-table-box table tbody tr th {font-size:13px; word-break:keep-all;}
.price-table-box table tbody tr td {font-size:13px;}
}

/* banner-box */
.banner-box {margin:80px 0 -80px; padding:80px 0; background:url('../images/bg_user_banner.png') no-repeat center / cover;}
.banner-box strong {display:block; text-align:center; font-size:48px; font-weight:bold; color:#fff;}
.banner-box p {text-align:center; font-size:32px; color:#fff; word-break:keep-all;}
.banner-box a {margin:40px auto 0; width:300px; height:70px; font-size:30px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:2px solid #fff; color:#fff; border-radius:50px;}
@media (max-width:991px){
.banner-box {margin:30px 0 -40px; padding:40px 0;}
.banner-box strong {font-size:30px;}
.banner-box p {font-size:17px;}
.banner-box a {margin:20px auto 0; width:220px; height:50px; font-size:18px;}
}

/* agree-box */
.agree-box .agree-list > ul > li {margin:0 0 30px;}
.agree-box .agree-list > ul > li:last-of-type {margin:0;}
.agree-box .agree-list > ul > li > .list-head {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 10px;}
.agree-box .agree-list > ul > li > .list-head b {margin:0 5px 0 0; font-size:14px; color:#696969; font-weight:500;}
.agree-box .agree-list > ul > li > .list-head b.active {color:#BA2A2D;}
.agree-box .agree-list > ul > li > .list-head strong {font-size:16px; font-weight:700;}
.agree-box .agree-list > ul > li > .list-body {margin:0 0 10px; border:1px solid #d9d9d9; padding:10px; height:200px; overflow-y:auto; border-radius:8px;}
.agree-box .agree-total {border-top:1px solid #000; padding:25px 0 0; margin:25px 0 0;}
.agree-box .agree-total .check-box label {color:#000; font-weight:700; font-size:16px;}

/* login-box */
.login-box {display:flex; flex-wrap:wrap; position:fixed; left:0; top:0; width:100%; height:100%; z-index:1000; padding:50px; padding-top:160px; background:url('../images/bg_user_login.png') no-repeat center / cover;}
.login-box > div {flex:1; min-width:0; height:100%;}
.login-box > div.list-left {background:#fff; border-radius:20px; padding:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-box > div.list-left .inner {width:100%; max-width:650px; margin:0 auto;}
.login-box > div.list-left .login-banner a {display:flex; flex-wrap:wrap; align-items:center; border-radius:30px; background:linear-gradient(to right, #4B2CD4, #01808E); padding:30px;}
.login-box > div.list-left .login-banner a strong {flex:1; min-width:0; padding:0 15px 0 0; font-size:24px; font-weight:bold; color:#fff; word-break:keep-all;}
.login-box > div.list-left .login-banner a strong b {font-size:24px; font-weight:bold; color:#FFEE91;}
.login-box > div.list-left .login-banner a span {height:60px; padding:0 30px; font-size:20px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:2px solid #fff; color:#fff; border-radius:50px;}
.login-box > div.list-left .login-button {margin:40px 0 0;}
.login-box > div.list-left .login-button h2 {font-size:32px; font-weight:600;}
.login-box > div.list-left .login-button p {font-size:20px;}
.login-box > div.list-left .login-button ul {display:flex; flex-wrap:wrap; margin:20px -5px -10px;}
.login-box > div.list-left .login-button ul li {width:calc(50% - 10px); margin:0 5px 10px;}
.login-box > div.list-left .login-button ul li a {border-radius:8px; height:60px; font-size:18px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.login-box > div.list-left .login-button ul li a:before {display:block; content:""; width:30px; height:30px; background-size:cover; background-position:center; margin:0 10px 0 0;}
.login-box > div.list-left .login-button ul li.google a {background:#EBEBEB; color:#333;}
.login-box > div.list-left .login-button ul li.kakao a {background:#FFE812; color:#333;}
.login-box > div.list-left .login-button ul li.naver a {background:#00C73C; color:#fff;}
.login-box > div.list-left .login-button ul li.telegram a {background:#28A8EA; color:#fff;}
.login-box > div.list-left .login-button ul li.google a:before {background-image:url('../images/icon_user_login_01.png');}
.login-box > div.list-left .login-button ul li.kakao a:before {background-image:url('../images/icon_user_login_02.png'); width:33px;}
.login-box > div.list-left .login-button ul li.naver a:before {background-image:url('../images/icon_user_login_03.png');}
.login-box > div.list-left .login-button ul li.telegram a:before {background-image:url('../images/icon_user_login_04.png');}
.login-box > div.list-left .login-text {margin:40px 0 0;}
.login-box > div.list-left .login-text strong {display:flex; flex-wrap:wrap; align-items:center; font-size:20px;}
.login-box > div.list-left .login-text strong:before {display:block; content:""; width:24px; height:24px; margin:0 5px 0 0; background:url('../images/icon_user_login.png') no-repeat center / cover;}
.login-box > div.list-left .login-text p {font-size:16px; margin:5px 0 0;}
.login-box > div.list-left .login-text p a {font-size:16px; font-weight:500; text-decoration:underline; margin:0 0 0 10px; display:inline-block;}
.login-box > div.list-left .login-link {margin:40px 0 0;}
.login-box > div.list-left .login-link p {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:5px; background:#ededed; font-size:16px; padding:8px;}
.login-box > div.list-left .login-link p a {font-size:16px; font-weight:600; text-decoration:underline; margin:0 0 0 3px;}
.login-box > div.list-right {display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.login-box > div.list-right img {width:146px;}
.login-box > div.list-right p {margin:10px 0 0; width:100%; text-align:center; font-size:16px; font-weight:500; color:#b1b1b1;}
@media (max-width:1200px){
.login-box {padding:30px;}
.login-box > div.list-left .login-button ul li a {font-size:16px;}
}
@media (max-width:991px){
.login-box {padding:20px; padding-top:100px; position:static;}
.login-box > div {flex:none; width:100%; height:auto;}
.login-box > div.list-left {padding:20px;}
.login-box > div.list-left .inner {max-width:100%;}
.login-box > div.list-left .login-banner a {border-radius:15px; padding:20px;}
.login-box > div.list-left .login-banner a strong {flex:none; width:100%; padding:0; font-size:16px;}
.login-box > div.list-left .login-banner a strong b {font-size:16px;}
.login-box > div.list-left .login-banner a span {margin:10px 0 0; height:40px; padding:0 15px; font-size:16px;}
.login-box > div.list-left .login-button {margin:20px 0 0;}
.login-box > div.list-left .login-button h2 {font-size:24px;}
.login-box > div.list-left .login-button p {font-size:15px;}
.login-box > div.list-left .login-button ul {margin:15px -2.5px -5px;}
.login-box > div.list-left .login-button ul li {width:calc(50% - 5px); margin:0 2.5px 5px;}
.login-box > div.list-left .login-button ul li a {height:45px; font-size:13px;}
.login-box > div.list-left .login-button ul li a:before {margin:0 5px 0 0; width:20px; height:20px;}
.login-box > div.list-left .login-button ul li.kakao a:before {width:23px;}
.login-box > div.list-left .login-text {margin:20px 0 0;}
.login-box > div.list-left .login-text strong {font-size:18px;}
.login-box > div.list-left .login-text strong:before {width:20px; height:20px;}
.login-box > div.list-left .login-text p {font-size:14px;}
.login-box > div.list-left .login-text p a {font-size:14px; margin:0 0 0 5px;}
.login-box > div.list-left .login-link {margin:20px 0 0;}
.login-box > div.list-left .login-link p {font-size:14px;}
.login-box > div.list-left .login-link p a {font-size:14px;}
.login-box > div.list-right {margin:30px 0 0;}
.login-box > div.list-right img {width:120px;}
.login-box > div.list-right p {font-size:13px;}
}

/* main-title-box */
.main-title-box {margin:0 0 50px;}
.main-title-box h2 {word-break:keep-all; text-align:center; color:#fff; font-size:48px; font-weight:bold;}
.main-title-box p {margin:5px 0 0; text-align:center; font-size:24px; color:#b9b9b9; word-break:keep-all;}
@media (max-width:991px){
.main-title-box {margin:0 0 30px;}
.main-title-box h2 {font-size:30px;}
.main-title-box p {font-size:15px;}
}

/* main-video-box */
.main-video-box {background:url('../images/bg_user_main_video.png') no-repeat center / cover; padding:150px 0;}
.main-video-box .video {max-width:1140px; margin:0 auto; position:relative; border-radius:12px; border:1px solid #a7a7a7; overflow:hidden;}
.main-video-box .video:after {display:block; content:""; padding-bottom:60%;}
.main-video-box .video video {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
@media (max-width:991px){
.main-video-box {padding:70px 0;}
.main-video-box .video {border-radius:6px;}
}

/* main-review-box */
.main-review-box {padding:150px 0; background:url('../images/bg_user_main_review.png') no-repeat center / cover;}
.main-review-box ul {display:flex; flex-wrap:wrap;}
.main-review-box ul li {flex:1; min-width:0; margin:0 30px 0 0; background:#fff; border-radius:30px; padding:30px;}
.main-review-box ul li:last-of-type {margin:0;}
.main-review-box ul li strong {display:block; font-size:20px; font-weight:bold; color:#6669EE;}
.main-review-box ul li p {margin:30px 0 0; font-size:36px; word-break:keep-all;}
.main-review-box ul li small {margin:30px 0 0; font-size:18px; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; color:#777;}
@media (max-width:991px){
.main-review-box {padding:70px 0;}
.main-review-box ul li {padding:20px 15px; flex:none; width:100%; margin:0 0 10px;}
.main-review-box ul li strong {font-size:20px;}
.main-review-box ul li p {margin:10px 0 0; font-size:20px;}
.main-review-box ul li small {margin:10px 0 0; font-size:15px;}
}

/* main-skill-box */
.main-skill-box {padding:150px 0; background:url('../images/bg_user_main_skill.png') no-repeat center / cover;}
.main-skill-box .list-head {margin:0 auto 100px; max-width:1411px; position:relative;}
.main-skill-box .list-head > ul {margin:0 auto 40px; display:flex; flex-wrap:wrap; justify-content:space-between; max-width:945px;}
.main-skill-box .list-head > ul:last-of-type {margin:0 auto;}
.main-skill-box .list-head > ul:nth-of-type(2) {max-width:100%;}
.main-skill-box .list-head > ul li {background:#fff; padding:20px; border-radius:30px; width:340px; height:340px; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.main-skill-box .list-head > ul li img {display:block; max-width:100%; margin:0 auto; height:140px;}
.main-skill-box .list-head > ul li strong {display:block; margin:10px 0 0; font-size:28px; font-weight:bold; text-align:center; width:100%;}
.main-skill-box .list-head > ul li p {margin:10px 0 0; font-size:20px; text-align:center; width:100%;}
.main-skill-box .list-head > div {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:51.5%;}
.main-skill-box .list-head > div h2 {text-align:center; font-size:48px; font-weight:bold; color:#fff;}
.main-skill-box .list-head > div p {margin:10px 0 0; text-align:center; font-size:24px; color:#fff;}
.main-skill-box .list-head > div a {max-width:300px; height:70px; font-size:30px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:15px auto 0; border:2px solid #fff; color:#fff; border-radius:50px;}
.main-skill-box .list-body {background:linear-gradient(to right, #4B2CD4, #01808E); border-radius:30px; padding:75px 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-skill-box .list-body h2 {font-size:48px; font-weight:bold; color:#fff;}
.main-skill-box .list-body h2 small {display:block; margin:5px 0 0; font-size:24px; color:#c5c5c5;}
.main-skill-box .list-body a {width:240px; height:76px; font-size:30px; font-weight:bold; margin:0 0 0 100px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:2px solid #fff; color:#fff; border-radius:50px;}
@media (max-width:1300px){
.main-skill-box .list-head > ul li {width:300px; height:300px;}
.main-skill-box .list-head > ul li strong {font-size:22px;}
.main-skill-box .list-head > ul li p {font-size:16px;}
.main-skill-box .list-head > div h2 {font-size:35px;}
.main-skill-box .list-head > div p {font-size:18px;}
.main-skill-box .list-head > div a {max-width:250px; height:50px; font-size:20px;}
}
@media (max-width:991px){
.main-skill-box {padding:70px 0;}
.main-skill-box .list-head {margin:0 auto 30px;}
.main-skill-box .list-head > ul {margin:0 0 10px;}
.main-skill-box .list-head > ul li {flex:1; min-width:0; height:auto; margin:0 10px 0 0; padding:20px 15px; align-items:flex-start;}
.main-skill-box .list-head > ul li:last-of-type {margin:0;}
.main-skill-box .list-head > ul li img {height:80px;}
.main-skill-box .list-head > ul li strong {font-size:16px; margin:5px 0 0;}
.main-skill-box .list-head > ul li p {margin:10px 0 0; font-size:13px;}
.main-skill-box .list-head > div {position:static; margin:0 0 30px; transform:none; width:100%;}
.main-skill-box .list-head > div h2 {font-size:24px;}
.main-skill-box .list-head > div p {font-size:15px;}
.main-skill-box .list-head > div a {width:170px; font-size:15px;}
.main-skill-box .list-body {padding:30px 15px; border-radius:20px;}
.main-skill-box .list-body h2 {width:100%; text-align:center; font-size:24px;}
.main-skill-box .list-body h2 small {text-align:center; font-size:15px;}
.main-skill-box .list-body a {width:140px; height:45px; margin:20px auto 0; font-size:15px;}
}

/* main-count-box */
.main-count-box {padding:250px 0; background:#020B28 url('../images/bg_user_main_count.png') no-repeat center top / cover;}
.main-count-box ul {display:flex; flex-wrap:wrap;}
.main-count-box ul li {padding:80px 40px; flex:1; min-width:0; border-radius:30px; border:1px solid rgba(255,255,255,0.3); box-shadow:7px 6px 20px rgba(0,0,0,0.25); margin:0 10px 0 0; background:linear-gradient(to bottom, #000000, rgba(0,18,108,0.2));}
.main-count-box ul li:last-of-type {margin:0;}
.main-count-box ul li .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.main-count-box ul li .list-head p {font-size:24px; font-weight:bold; color:#fff;}
.main-count-box ul li .list-head strong {height:40px; padding:0 15px; font-size:24px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#fff; border-radius:50px;}
.main-count-box ul li .list-body {margin:80px 0 0;}
.main-count-box ul li .list-body p {font-size:90px; font-weight:bold; color:#fff; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;}
.main-count-box ul li .list-body b {font-size:90px; font-weight:bold; color:#fff;}
.main-count-box ul li .list-body em {font-size:40px; font-weight:bold; color:#fff;}
@media (max-width:1300px){
.main-count-box ul li .list-head p {font-size:18px;}
.main-count-box ul li .list-head strong {font-size:18px;}
.main-count-box ul li .list-body p {font-size:70px;}
.main-count-box ul li .list-body b {font-size:70px;}
.main-count-box ul li .list-body em {font-size:30px;}
}
@media (max-width:991px){
.main-count-box {padding:50% 0 0; background:#020B28 url('../images/bg_user_main_count_m.png') no-repeat center top / cover;}
.main-count-box ul li {padding:20px 40px; border-radius:15px; flex:none; width:100%; margin:0 0 10px;}
.main-count-box ul li .list-head p {font-size:14px;}
.main-count-box ul li .list-head strong {height:27px; padding:0 15px; font-size:14px;}
.main-count-box ul li .list-body {margin:10px 0 0;}
.main-count-box ul li .list-body p {font-size:32px;}
.main-count-box ul li .list-body b {font-size:32px;}
.main-count-box ul li .list-body em {font-size:20px;}
}

/* main-card-box */
.main-card-box {padding:23% 0 150px; background:url('../images/bg_user_main_card.png') no-repeat center / cover;}
.main-card-box .inner {position:relative; padding:150px 0; margin:80px 0 0;}
.main-card-box .inner .list ul {display:flex; flex-wrap:wrap; position:relative; z-index:3;}
.main-card-box .inner .list ul li {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center; border-radius:500px; padding:50px 30px; flex:1; min-width:0; margin:0 20px 0 0;}
.main-card-box .inner .list ul li:last-of-type {margin:0;}
.main-card-box .inner .list ul li p {width:100%; text-align:center; font-size:24px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-card-box .inner .list ul li p b {font-size:40px; font-weight:bold; color:#fff; margin:0 5px 0 0;}
.main-card-box .inner .list ul li p span {width:100%; font-size:20px; color:#fff;}
.main-card-box .inner .list ul li small {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:10px 0 0; border-radius:50px; background:rgba(0,0,0,0.2); height:34px; padding:0 25px; font-size:20px; font-weight:bold; color:#fff;}
.main-card-box .inner .list ul li:nth-of-type(1) {background:#2EA990;}
.main-card-box .inner .list ul li:nth-of-type(2) {background:#6F71D2;}
.main-card-box .inner .list ul li:nth-of-type(3) {background:#5E91FF;}
.main-card-box .inner .list ul li:nth-of-type(4) {background:#8FA66F;}
.main-card-box .inner .list ul li:nth-of-type(even) {position:relative; top:100px;}
.main-card-box .inner .image {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; max-width:750px;}
.main-card-box .inner .image img {width:100%;}
@media (max-width:1500px){
.main-card-box .inner .list ul li p {font-size:20px;}
.main-card-box .inner .list ul li p b {font-size:30px;}
.main-card-box .inner .list ul li p span {font-size:17px;}
}
@media (max-width:1250px){
.main-card-box .inner .list ul {margin:0 -10px -20px;}
.main-card-box .inner .list ul li {flex:none; width:calc(50% - 20px); margin:0 10px 20px;}
.main-card-box .inner .list ul li:last-of-type {margin:0 10px 20px;}
}
@media (max-width:991px){
.main-card-box {padding:30px 0;}
.main-card-box .inner {padding:0; margin:0;}
.main-card-box .inner .list ul {padding:80px 0 0;}
.main-card-box .inner .list ul li {padding:30px 10px;}
.main-card-box .inner .list ul li p {font-size:15px;}
.main-card-box .inner .list ul li p b {font-size:15px;}
.main-card-box .inner .list ul li p span {font-size:15px;}
.main-card-box .inner .list ul li small {font-size:14px;}
.main-card-box .inner .list ul li:nth-of-type(even) {top:0;}
.main-card-box .inner .image {top:0; transform:translateX(-50%);}
}

/* main-top-box */
.main-top-box {padding:150px 0 0; margin:0 0 -20%; background:url('../images/bg_user_main_top.png') no-repeat center / cover;}
.main-top-box .text p {text-align:center; font-size:32px; color:#fff; word-break:keep-all;}
.main-top-box .text p b {font-size:32px; font-weight:600; color:#FFFCAA;}
.main-top-box .text h2 {margin:20px 0 0; font-size:65px; font-weight:600; color:#fff; text-align:center; line-height:1.2;}
.main-top-box .text h2 b {font-size:65px; font-weight:600; color:#00FFE1; line-height:1.2;}
.main-top-box .text a {margin:50px auto 0; width:300px; height:70px; font-size:30px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:2px solid #fff; color:#fff; border-radius:50px;}
.main-top-box .image {padding:80px 0; position:relative;}
.main-top-box .image:after {position:absolute; left:0; top:0; width:100%; height:100%; content:""; background:url('../images/img_user_main_top_after.png') no-repeat center / cover;}
.main-top-box .image img {display:block; margin:0 auto; width:100%; max-width:1143px;} 
@media (max-width:991px){
.main-top-box {padding:70px 0 20px; margin:0;}
.main-top-box .text p {font-size:14px;}
.main-top-box .text p b {font-size:14px;}
.main-top-box .text h2 {margin:10px 0 0; font-size:24px;}
.main-top-box .text h2 b {font-size:24px;}
.main-top-box .text a {margin:20px auto 0; width:150px; height:45px; font-size:15px;}
.main-top-box .image {padding:50px 0;}
.main-top-box .image img {max-width:85%;}
}

/* popup-box */
.popup-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; transition:all ease 0.5s; background:rgba(0,0,0,0.7);}
.popup-box .box {pointer-events:none; opacity:0; position:absolute; left:50%; top:45%; width:calc(100% - 30px); max-width:380px; transform:translate(-50%,-50%); background:#fff; border-radius:15px; padding:20px; transition:all ease 0.5s;}
.popup-box .popup-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; position:absolute; right:0; top:0; padding:15px;}
.popup-box .popup-head .close {display:block; font-size:0; width:20px; height:20px; background:url('../images/icon_close.svg') no-repeat center / cover;}
.popup-box .popup-body {margin:15px 0 0;}
.popup-box .popup-body strong {display:block; text-align:center; font-size:16px; font-weight:600; margin:0 0 5px;}
.popup-box .popup-body p {text-align:center; word-break:keep-all;}
.popup-box.fixed {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;}

/* invest-box */
.invest-box {background:#4e4e4e; overflow:hidden; display:flex; flex-direction:column;}
.invest-box .invest-head {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #666; width:100%; background:#000; position:relative; z-index:1000;}
.invest-box .invest-head > div {display:flex; flex-wrap:wrap; align-items:center; justify-content: flex-end;}
.invest-box .invest-head .head-left .btn-home {
    width: 100px;
    height: 54px;
    color: #fff;
    font-size: 15px;
    border-radius: 0 0 20px 0;
    margin: -10px -15px 0 0;
    font-weight: bold;
    display: flex
;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-right:auto;
    background-color:#314CFF; color:#fff;
}
.invest-box .invest-head .head-left button {display:flex; flex-wrap:wrap; align-items:center; font-size:0; height:55px; color:#fff;}
.invest-box .invest-head .head-left button:after {display:block; content:""; width:20px; height:20px; margin:0 0 0 10px; background:url('../images/icon_invest_more.png') no-repeat center / cover;}
.invest-box .invest-head .head-left button .inner p {font-size:14px; font-weight:bold; line-height:1.2;}
.invest-box .invest-head .head-left button .inner small {font-size:12px; font-weight:500; line-height:1.2;}
.invest-box .invest-head .head-left button .table {pointer-events:none; opacity:0; position:absolute; transition:all ease 0.5s; top:45px; border:1px solid #333; background:#333; padding:15px; width:527px; max-height:300px; overflow-y:auto;}
.invest-box .invest-head .head-left button .table thead tr th {background:#111;}
.invest-box .invest-head .head-left button .table thead tr th a {display:flex; flex-wrap:wrap; align-items:center; font-size:13px;}
.invest-box .invest-head .head-left button .table thead tr th a:after {display:inline-block; content:""; width:9px; height:21px; background:url('../images/icon_sort.svg') no-repeat center / cover; margin:0 0 0 10px;}
.invest-box .invest-head .head-left button .table tbody tr td {text-align:left; font-weight:600; border-bottom:1px solid #666; padding:3px 0; font-size:13px;}
.invest-box .invest-head .head-left button .table tbody tr td small {margin:0 0 0 5px; font-size:12px; color:#999;}
.invest-box .invest-head .head-left button:hover .table {pointer-events:inherit; opacity:1; top:55px;}
.invest-box .invest-head .head-left strong {margin:0 0 0 15px; font-size:16px; font-weight:bold;}
.invest-box .invest-head .head-left .menu {display:none;}
.invest-box .invest-head .head-right {flex:1; min-width:0; margin:0 0 0 35px;}
.invest-box .invest-head .head-right ul {display:block; overflow-x:auto; white-space:nowrap; font-size:0;}
.invest-box .invest-head .head-right ul li {display:inline-block; font-size:0; margin:0 20px 0 0;}
.invest-box .invest-head .head-right ul li b {font-size:12px; font-weight:500; color:#999; line-height:1.2;}
.invest-box .invest-head .head-right ul li p {font-size:13px; font-weight:500; line-height:1.2; color:#fff;}
/*.invest-box .invest-body {width:100%; height:calc(100% - 76px); display:flex; flex-wrap:wrap;}*/
.invest-box .invest-body {width:100%; height:100vh; display:flex; flex-wrap:wrap;}
.invest-box .invest-body .body-graph {height:100%; flex:1; min-width:0; border-right:1px solid #666; display:flex; flex-direction:column;}
.invest-box .invest-body .body-graph .graph-inner {border-bottom:1px solid #666; width:100%; height:70%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content:center;}
.invest-box .invest-body .body-graph .graph-inner:last-of-type {border:0; height:30%;}
.invest-box .invest-body .body-graph .graph-inner > * {width:100%;}  
.invest-box .invest-body .body-graph .table-inner {/*height:30%;*/ display:flex; flex-direction:column; overflow-y:auto;}
.invest-box .invest-body .body-graph .table-inner > * {width:100%;}
.invest-box .invest-body .body-graph .table-inner .invest-content-box {height:100%;}
.invest-box .invest-body .body-graph .table-inner .invest-content-box > .content {height:100%;}
.invest-box .invest-body .body-graph .table-inner .invest-table-box {}
.invest-box .invest-body .body-graph .table-inner .invest-tab-box {position:sticky; top:0; z-index:100;}
.invest-box .invest-body .body-right {width:560px; display:flex; flex-wrap:wrap;}
.invest-box .invest-body .body-right .right-inner {flex:1; min-width:0; border-right:1px solid #666; display:flex; flex-direction:column; height:100%;}
.invest-box .invest-body .body-right .right-inner.active {
    opacity:1 !important;
    pointer-events: auto !important;
}
.invest-box .invest-body .body-right .right-inner:last-of-type {border:0;}
.invest-box .invest-body .body-right .right-inner > * {width:100%;}
.invest-box .invest-close {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; background:#434343; padding:10px 15px; display:none;}
.invest-box .invest-close .close {display:block; font-size:0; width:40px; height:40px; background:url('../images/icon_close_white.png') no-repeat center / cover;}
.invest-box .invest-tab ul {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #666;}
.invest-box .invest-tab ul li {flex:1; min-width:0; border-right:1px solid #666;}
.invest-box .invest-tab ul li:last-of-type {border:0;}
.invest-box .invest-tab ul li a {height:40px; font-size:13px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-top:3px solid #666; background:#333; color:#999;}
.invest-box .invest-tab ul li.active a {background:#314CFF; border-color:#367CFF; color:#fff; font-weight:600; }
.invest-box .invest-tab-content {height:100%; display:flex; flex-wrap:wrap; align-items:start; justify-content:center; background-color:#1a1a1a;}
.invest-box .invest-tab-content > .content {width:100%; background-color:#1a1a1a;}
.invest-box .invest-content {height:100%; overflow-y:auto;}
.invest-box .invest-content > .content {display:none; height:100%; max-height:100vh; overflow-y:auto; overflow-x:hidden;}
.invest-box .invest-content > .content.active {display:block; background:#222;}
.invest-box .invest-content > .content.gray {background:#222;}
.invest-box .invest-write > ul > li {border-bottom:1px solid #d9d9d9; padding:15px;}
.invest-box .invest-write > ul > li .write-head {display:flex; flex-wrap:wrap; align-items:center; position:relative; margin:0 0 10px;}
.invest-box .invest-write > ul > li .write-head strong {font-size:14px; font-weight:bold; color:#fff;}
.invest-box .invest-write > ul > li .write-head .icon-guide {width:15px; height:15px;}
.invest-box .invest-write > ul > li .write-body b {font-size:12px;}
.invest-box .invest-write > ul > li .write-body .icon-guide {width:15px; height:15px;}
.invest-box .invest-write > ul > li .write-body .tooltip p {font-size:12px;}
.invest-box .invest-write em {color:#d9d9d9;}
.invest-box .invest-button {display:flex; flex-wrap:wrap;}
.invest-box .invest-button a,
.invest-box .invest-button button {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#333; color:#fff; height:23px; border-radius:3px; font-size:13px; font-weight:500; margin:0 5px 0 0; border:1px solid #444;}
.invest-box .invest-button *:last-of-type {margin:0;}
.invest-box .invest-input {display:flex; flex-wrap:wrap;}
.invest-box .invest-input input {font-size:13px; flex:1; min-width:0; height:30px; background:#333; color:#fff; border:1px solid #444; border-radius:3px; padding:0 2px; text-align: center;}
.invest-box .invest-input select {font-size:13px; flex:1; min-width:0; height:30px; background:#333 url('../images/icon_select_white.png') no-repeat calc(100% - 10px) center / 12px auto; color:#fff; border:1px solid #444; border-radius:3px; padding:0 35px 0 10px;}
.invest-box .invest-switch {position:relative;}
.invest-box .invest-switch input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.invest-box .invest-switch label {display:block; width:40px; height:20px; border-radius:50px; background:#DADADA; padding:3px; font-size:0; transition:0.3s; cursor:pointer;}
.invest-box .invest-switch label p {position:absolute; left:3px; top:2.2px; width:15.5px; height:15.5px; border-radius:50%; background:#B4B2B2; font-size:0; transition:0.3s; cursor:pointer;}
.invest-box .invest-switch input:checked ~ label {background:#367CFF;}
.invest-box .invest-switch input:checked ~ label p {left:21px; background:#fff;}
.invest-box .invest-radio {position:relative;}
.invest-box .invest-radio input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.invest-box .invest-radio label {display:flex; flex-wrap:wrap; align-items:center; color:#e9ecef; font-size:12px;}
.invest-box .invest-radio label:before {display:block; content:""; width:16px; height:16px; margin:0 5px 0 0; background:url('../images/icon_invest_radio.png') no-repeat center / cover;}
.invest-box .invest-radio input:checked ~ label:before {background-image:url('../images/icon_invest_radio_on.png');}
.invest-box .invest-range {margin:20px 0 0;}
.invest-box .invest-range input {width:100%; height:6px; border-radius:3px; background:linear-gradient(to right, #2a73ff 50%, #ddd 50%); transition:background 450ms ease-in;}
.invest-box .invest-range input::-webkit-slider-thumb {width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid #2a73ff; cursor:pointer; appearance:none; -webkit-appearance:none;}
.invest-box .invest-range .slider-labels {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; color:#d9d9d9; margin:-10px 0 0;}
.invest-box .invest-control {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:15px;}

.invest-box .invest-control button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:55px; border-radius:8px; font-size:16px; font-weight:600; padding:0 15px;}
.invest-box .invest-control button:before {display:inline-block; content:""; width:24px; height:24px; margin:0 10px 0 0; background-size:cover; background-position:center;}
.invest-box .invest-control button.play {background:#367CFF; color:#fff; flex:1; min-width:0; margin:0 5px 0 0;}
.invest-box .invest-control button.play:before {background-image:url('../images/icon_invest_play.svg');}
.invest-box .invest-control button.pause {background:#616161; color:#D5D5D5;}
.invest-box .invest-control button.pause:before {background-image:url('../images/icon_invest_pause.svg');}

.invest-box .invest-control a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:55px; border-radius:8px; font-size:16px; font-weight:600; padding:0 15px;}
.invest-box .invest-control a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 10px 0 0; background-size:cover; background-position:center;}
.invest-box .invest-control a.play {background:#367CFF; color:#fff; flex:1; min-width:0; margin:0 5px 0 0;}
.invest-box .invest-control a.play:before {background-image:url('../images/icon_invest_play.svg');}
.invest-box .invest-control a.pause {background:#616161; color:#D5D5D5;}
.invest-box .invest-control a.pause:before {background-image:url('../images/icon_invest_pause.svg');}

@media (max-width:1600px){
.invest-box .invest-head {padding:0 15px 10px; padding-left:0;}
.invest-box .invest-head .head-left {width:100%;}
.invest-box .invest-head .head-left button {height:54px;}
.invest-box .invest-head .head-left button .inner p {font-size:15px;}
.invest-box .invest-head .head-left button .inner small {font-size:13px;}
.invest-box .invest-head .head-left button .table {width:100%; max-width:500px; top:45px;}
.invest-box .invest-head .head-left button:hover .table {top:54px;}
.invest-box .invest-head .head-left strong {flex:1; min-width:0; margin:0 0 0 15px;}
.invest-box .invest-head .head-left .menu {width:100px; height:54px; background:#314CFF; color:#fff; font-size:15px; border-radius:0 0 0 20px; margin:-10px -15px 0 0; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.invest-box .invest-head .head-right {flex:none; width:100%; margin:10px 0 0;}
.invest-box .invest-head .head-right ul {margin:0 -15px;}
.invest-box .invest-head .head-right ul li:first-of-type {margin-left:15px;}
.invest-box .invest-head .head-right ul li:last-of-type {margin-right:15px;}
.invest-box .invest-head .head-right ul li {margin:0 10px 0 0;}
.invest-box .invest-head .head-right ul li b {font-size:12px;}
.invest-box .invest-head .head-right ul li p {font-size:14px;}
/*.invest-box .invest-body {height:calc(100% - 125px);}*/
.invest-box .invest-body {height:100vh;}
.invest-box .invest-body .body-graph {flex:none; width:100%; height:100%;}
.invest-box .invest-body .body-right {width:100%;}
.invest-box .invest-body .body-right .right-inner:first-of-type {display:none;}
.invest-box .invest-body .body-right .right-inner:last-of-type {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; transition:all ease 0.5s; background:#fff;}
.invest-box.fixed .invest-body .body-right .right-inner:last-of-type {pointer-events:inherit; opacity:1;}
    .invest-box .invest-tab {display: block;}
    .invest-box .invest-close {display:flex;}
}


/* 로그인 폼 스타일 */
.login-form {margin:30px 0 0;}
.login-form .login-input {margin:0 0 15px;}
.login-form .login-input input {width:100%; height:50px; border:1px solid #e0e0e0; border-radius:8px; padding:0 20px; font-size:16px; transition:all 0.3s;}
.login-form .login-input input:focus {border-color:#3B82F6; outline:none; box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);}
.login-form .login-input input::placeholder {color:#999;}
.login-form .login-submit {margin:20px 0 0;}
.login-form .btn-login {width:100%; height:50px; background:#3B82F6; color:#fff; border:none; border-radius:8px; font-size:18px; font-weight:600; cursor:pointer; transition:all 0.3s;}
.login-form .btn-login:hover {background:#2563EB;}
.login-form .btn-login:active {transform:scale(0.98);}

@media (max-width:991px){
.login-form {margin:20px 0 0;}
.login-form .login-input {margin:0 0 10px;}
.login-form .login-input input {height:45px; font-size:14px; padding:0 15px;}
.login-form .login-submit {margin:15px 0 0;}
.login-form .btn-login {height:45px; font-size:16px;}
}

/* 추천전략 리스트 스타일 */
.strategy-list {padding:15px; overflow-y:auto; overflow-x:hidden; background-color:#1a1a1a;}
.strategy-item {padding:12px; margin-bottom:8px; border:2px solid #333; border-radius:6px; cursor:pointer; background-color:#2a2a2a; transition:all 0.2s ease;}
.strategy-item:hover {border-color:#4a8cff; background-color:#333;}
.strategy-item.active {border:2px solid #4a8cff; background-color:#2d3748;}
.strategy-item.premium.active {border:2px solid #FFD700; background:linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 193, 7, 0.15) 100%); box-shadow:0 0 12px rgba(255, 215, 0, 0.4);}
.strategy-item h4 {margin-bottom:6px; font-size:15px; font-weight:600; display:flex; align-items:center; color:#fff;}
.strategy-item p {margin-bottom:4px; color:#aaa; font-size:13px; white-space: pre-line;}
.strategy-item p span {font-weight:500; font-size:12px; color:#ccc;}
.strategy-item .description {margin-top:8px; font-size:13px; color:#999; line-height:1.5;}
.strategy-list .empty-message {text-align:center; padding:40px; color:#666;}

/* 자동매매 상태 표시 스타일 */
.auto-trade-status {text-align:center; margin-bottom:10px; font-size:14px; color:#666;}
.auto-trade-status .status-active {color:#28a745;}
.auto-trade-status .status-stopped {color:#dc3545;}

/* Tooltip Modal styles */
.tooltip-modal-overlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100000;
}
.tooltip-modal {
    background:#fff;
    padding:30px;
    padding-top:48px;
    border-radius:12px;
    max-width:500px;
    width:90%;
    max-height:80vh;
    overflow-y:auto;
    position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
.tooltip-modal .close-btn {
    position:absolute;
    top:15px;
    right:15px;
    width:30px;
    height:30px;
    background:#f0f0f0;
    border:none;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:#666;
    transition:all 0.2s;
}
.tooltip-modal .close-btn:hover {
    background:#e0e0e0;
    color:#333;
}
.tooltip-modal .content {
    font-size:15px;
    line-height:1.8;
    color:#333;
    white-space: pre-line;
    word-break: keep-all;
}
.icon-box {position:relative; display:inline-block;}
.icon-box .icon-guide {cursor:pointer;}
.strategy-list .empty-message {text-align:center; padding:40px; color:#999;}

/* 마이페이지 서브메뉴 스타일 */
.mypage-wrapper {position:relative; display:inline-block;}
.mypage-wrapper::before {
    content:'';
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:10px;
}
.mypage-submenu {
    position:absolute;
    top:calc(100% + 5px);
    right:0;
    background:#fff;
    border:1px solid #e0e0e0;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    min-width:160px;
    z-index:1000;
}
.mypage-submenu::before {
    content:'';
    position:absolute;
    top:-8px;
    right:20px;
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #e0e0e0;
}
.mypage-submenu::after {
    content:'';
    position:absolute;
    top:-7px;
    right:20px;
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:8px solid #fff;
}
.mypage-submenu a,
.mypage-submenu button {
    display:block;
    padding:12px 20px;
    color:#333;
    font-size:14px;
    text-decoration:none;
    transition:all 0.2s;
    border:none;
    background:none;
    width:100%;
    text-align:left;
    cursor:pointer;
}
.mypage-submenu a:hover,
.mypage-submenu button:hover {
    background:#f5f5f5;
    color:#3B82F6;
}
.mypage-submenu a:first-child {
    border-radius:8px 8px 0 0;
}
.mypage-submenu button:last-child {
    border-radius:0 0 8px 8px;
    border-top:1px solid #e0e0e0;
    color:#dc3545;
}
.mypage-submenu button:last-child:hover {
    background:#fee;
    color:#dc3545;
}

/* invest-tab-box */
.invest-tab-box {display:flex; flex-wrap:wrap; background:#1a1a1a;}
.invest-tab-box ul {max-width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.invest-tab-box ul li {border-right:1px solid #787474;}
.invest-tab-box ul li a {width:130px; height:40px; font-size:13px; color:#b8b8b8; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center;}
.invest-tab-box ul li a:hover {color:#fff;}
.invest-tab-box ul li.active a {background:#314CFF; color:#fff; font-weight:bold;}
@media (max-width:991px){
.invest-tab-box ul {width:100%;}
.invest-tab-box ul li {flex:1; min-width:0;}
.invest-tab-box ul li a {width:100%; height:45px; font-size:13px;}
}

/* invest-content-box */
.invest-content-box .content {display:none;}
.invest-content-box .content.active {display:block;}

/* invest-table-box */
.invest-table-box {overflow-x:auto; white-space:nowrap;}
.invest-table-box table {table-layout:auto; width:100%;}
.invest-table-box table thead {position:sticky; top:0;}
.invest-table-box table thead tr th {background:#000; border:1px solid #4e4e4e; border-width:1px 1px 1px 0; padding:5px; font-weight:600; color:#fff; font-size:12px;}
.invest-table-box table thead tr th:last-of-type {border-right:0;}
.invest-table-box table tbody tr th {width:120px; background:#000; border:1px solid #313131; border-width:0 1px 1px 0; padding:5px; font-weight:600; color:#fff; font-size:12px;}
.invest-table-box table tbody tr td {background:#202020; border:1px solid #4e4e4e; border-width:0 1px 1px 0; padding:5px; color:#fff; font-size:12px;}
.invest-table-box table tbody tr td:last-of-type {border-right:0;}
.invest-table-box table tbody tr td.red {color:#BA2A2D;}
.invest-table-box table tbody tr td.log {width:40%; text-align:left;}
@media (max-width:991px){
.invest-table-box table thead tr th {padding:8.5px 5px; font-size:13px;}
.invest-table-box table tbody tr th {padding:8.5px 5px; font-size:13px;}
.invest-table-box table tbody tr td {padding:8.5px 5px; font-size:13px;}
}