/* common */
html, body {background:#00070D;}
.container {max-width:1230px; margin:0 auto; padding:0 15px; width:100%;}

/* animation-box */
.scroll_on {opacity: 0;transition: all ease-in-out 0.5s; display:block;}
.scroll_on.type_top {transform: translate(0, -50px);}
.scroll_on.type_bottom {transform: translate(0, 50px);}
.scroll_on.type_left {transform: translate(-50px, 0);}
.scroll_on.type_right {transform: translate(50px, 0);}
.scroll_on.on {opacity: 1; transform: translate(0, 0);}



.delay01 {transition-delay:0.1s !important;}
.delay02 {transition-delay:0.2s !important;}
.delay03 {transition-delay:0.3s !important;}
.delay04 {transition-delay:0.4s !important;}
.delay05 {transition-delay:0.5s !important;}
.delay06 {transition-delay:0.6s !important;}
.delay07 {transition-delay:0.7s !important;}
.delay08 {transition-delay:0.8s !important;}
.delay09 {transition-delay:0.9s !important;}
.delay10 {transition-delay:1s !important;}
.delay15 {transition-delay:1.5s !important;}
.delay20 {transition-delay:2s !important;}
.delay25 {transition-delay:2.5s !important;}
.delay30 {transition-delay:3s !important;}
.delay35 {transition-delay:3.5s !important;}
.delay40 {transition-delay:4s !important;}

/* header */
header .header-main {background:#00070D; position:fixed; left:50%; top:0; transform:translateX(-50%); z-index:1000; width:100%; padding:0 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
header .header-main .main-logo {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-logo .menu {display:block; font-size:0; width:24px; height:24px; margin:0 24px 0 0; background:url('../images/icon_menu.png') no-repeat center / cover;}
header .header-main .main-logo h1 a img {width:179px;}
header .header-main .main-right {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul li a {padding:0 21px; height:100px; font-size:16px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-right .right-cate ul li a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 12px 0 0; background-size:cover; background-position:center;}
header .header-main .main-right .right-cate ul li:nth-of-type(1) a:before {background-image:url('../images/icon_main_menu_01.png');}
header .header-main .main-right .right-cate ul li:nth-of-type(2) a:before {background-image:url('../images/icon_main_menu_02.png');}
header .header-main .main-right .right-cate ul li:nth-of-type(3) a:before {background-image:url('../images/icon_main_menu_03.png');}
header .header-main .main-right .right-menu {display:none;}
header .header-main .main-right .right-menu a {display:block; font-size:0; width:30px; height:30px; background:url('../images/icon_menu.png') no-repeat center / cover;}
header .header-main .main-right .right-member {position:relative; margin:0 0 0 12px;}
header .header-main .main-right .right-member .list-image {display:flex; flex-wrap:wrap; align-items:center; height:100px;}
header .header-main .main-right .right-member .list-image img {width:36px; height:36px; border-radius:50%; object-fit:cover;}
header .header-main .main-right .right-member .list-image:after {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_admin_user_more.png') no-repeat center / cover;}
header .header-main .main-right .right-member .list-content {pointer-events:none; opacity:0; transition:all ease 0.5s; width:150px; position:absolute; right:0; background:#fff; border-radius:8px; top:70px;}
header .header-main .main-right .right-member .list-content ul {padding:5px 0 0;}
header .header-main .main-right .right-member .list-content ul li a {display:flex; flex-wrap:wrap; align-items:center; padding:8px 20px; font-size:14px; color:#a1a1a1;}
header .header-main .main-right .right-member .list-content ul li a:hover {color:#000; text-decoration:underline;}
header .header-main .main-right .right-member .list-content ul li:last-of-type a {padding:12px 20px; border-top:1px solid #d9d9d9;}
header .header-main .main-right .right-member:hover .list-content {pointer-events:inherit; opacity:1; top:80px;}
header .header-fixed {position:fixed; left:24px; top:100px; width:72px; height:calc(100% - 124px);}
header .header-fixed * {line-height: 1.5;}
header .header-fixed .inner {position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:auto; overflow-x:hidden; background:linear-gradient(to bottom, #BA54F5, #E14ECA); border-radius:8px;}
header .header-fixed .inner::-webkit-scrollbar {display:none;}
header .header-fixed .fixed-head {display:none;}
header .header-fixed .fixed-body .body-cate {padding:24px 0;}
header .header-fixed .fixed-body .body-cate > ul > li {margin:0 0 24px;}
header .header-fixed .fixed-body .body-cate > ul > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > a {height:24px; display:flex; flex-wrap:wrap; align-items:center; padding:0 12px;}
header .header-fixed .fixed-body .body-cate > ul > li > a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 auto; background-size:cover; background-position:center;}
header .header-fixed .fixed-body .body-cate > ul > li > a p {display:none; flex:1; min-width:0; margin:0 0 0 8px; font-size:16px; font-weight:500; color:#fff;}
header .header-fixed .fixed-body .body-cate > ul > li > a.toggle:after {display:inline-block; display:none; content:""; width:24px; height:24px; margin:0 0 0 8px; background:url('../images/icon_admin_menu.png') no-repeat center / cover;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 {display:none; padding:0 0 0 48px; margin:12px 0 0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li {margin:0 0 12px;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > a {font-size:16px; font-weight:500; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 {margin:12px 0 0; border-left:1px solid #fff;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li {margin:0 0 8px;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li:last-of-type {margin:0;}
header .header-fixed .fixed-body .body-cate > ul > li > ul.depth-2 > li > .depth-3 > li a {padding:0 12px; font-size:14px; font-weight:500; color:#fff; display:flex; flex-wrap:wrap; align-items:center;}
header .header-fixed .fixed-body .body-cate > ul > li.cate01 > a:before {background-image:url('../images/icon_admin_cate_01.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate02 > a:before {background-image:url('../images/icon_admin_cate_02.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate03 > a:before {background-image:url('../images/icon_admin_cate_03.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate04 > a:before {background-image:url('../images/icon_admin_cate_04.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate05 > a:before {background-image:url('../images/icon_admin_cate_05.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate06 > a:before {background-image:url('../images/icon_admin_cate_06.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate07 > a:before {background-image:url('../images/icon_admin_cate_07.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate08 > a:before {background-image:url('../images/icon_admin_cate_08.png');}
header .header-fixed .fixed-body .body-cate > ul > li.cate09 > a:before {background-image:url('../images/icon_admin_cate_09.png');}
header .header-fixed:hover .inner {width:224px;}
header .header-fixed:hover .inner .fixed-body .body-cate > ul > li a p {display:block;}
header .header-fixed:hover .inner .fixed-body .body-cate > ul > li a.toggle:after {display:inline-block;}
header .header-fixed.hover .fixed-body .body-cate > ul > li.active > a.toggle:after {transform:rotate(180deg);}
header .header-fixed .fixed-body .body-cate > ul > li.active > ul.depth-2 {display:block;}


@media (max-width:1500px){
    header .header-main {padding:0 0 0 24px;}
}
@media (max-width:991px){
    header {width:100%; position:static; transform:none;}
    header .header-main {position:fixed; left:50%; top:0; width:100%; border:0; border-radius:0; margin:0; padding:15px;}
    /*header .header-main .main-logo .menu {display:none;}*/
    header .header-main .main-logo h1 a img {width:120px;}
    header .header-main .main-right .right-cate {display:none;}
    header .header-main .main-right .right-menu {display:block; display: none;}
    header .header-main .main-right .right-menu a {width:25px; height:25px;}
    header .header-main .main-right .right-member {margin:0 0 0 8px;}
    header .header-main .main-right .right-member .list-image {height:25px;}
    header .header-main .main-right .right-member .list-image img {width:26px; height:26px;}
    header .header-main .main-right .right-member .list-image:after {width:20px; height:20px;}
    header .header-main .main-right .right-member .list-content {top:25px;}
    header .header-main .main-right .right-member .list-content ul li a {font-size:13px; padding:5px 10px;}
    header .header-main .main-right .right-member .list-content ul li:last-of-type {margin:5px 0 0;}
    header .header-main .main-right .right-member:hover .list-content {top:35px;}
    header .header-fixed {pointer-events:none; opacity:0; left:0; top:0; width:100% !important; height:100% !important; background:rgba(0,0,0,0.7); z-index:99999; overflow:hidden; transition:all ease 0.5s;}
}
header .header-fixed {pointer-events:none; opacity:0; width:100% !important;    z-index: 9999;}
header .header-fixed .inner {pointer-events:none; opacity:0; left:-30px;width:280px !important; height:100% !important; transition:all ease 0.5s; border-radius:0 8px 8px 0;}
header .header-fixed .fixed-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:12px;}
header .header-fixed .fixed-head .close {display:block; width:24px; height:24px; font-size:0; position:relative;}
header .header-fixed .fixed-head .close:after {display:block; content:""; width:100%; height:2px; position:absolute; left:0; top:9px; transform:rotate(45deg); background:#fff;}
header .header-fixed .fixed-head .close:before {display:block; content:""; width:100%; height:2px; position:absolute; left:0; top:9px; transform:rotate(-45deg); background:#fff;}
header .header-fixed .fixed-body .body-cate > ul > li > a:before {margin:0 !important;}
header .header-fixed .fixed-body .body-cate > ul > li > a p {display:block !important;}
header .header-fixed .fixed-body .body-cate > ul > li > a.toggle:after {display:inline-block !important;}
header.fixed .header-fixed {pointer-events:inherit; opacity:1;}
header.fixed .header-fixed .inner {pointer-events:inherit; opacity:1; left:0;}
/* footer */
footer {background:#262626; padding:40px 0;}
footer .footer-info ul li {margin:0 0 10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
footer .footer-info ul li:last-of-type {margin:0;}
footer .footer-info ul li * {margin:0 24px 0 0;}
footer .footer-info ul li *:last-child {margin:0;}
footer .footer-info ul li p {font-size:14px; color:#fff;}
footer .footer-info ul li a {height:22px; padding:0 8px; font-size:12px; color:#fff; border-radius:4px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #A1A1A1;}
footer .footer-copy {margin:22px 0 0;}
footer .footer-copy p {text-align:center; font-size:14px; color:#fff;}
footer .footer-copy p b {font-size:14px; font-weight:700; color:#fff;}
@media (max-width:991px){
    footer .footer-info ul li p {font-size:13px;}
    footer .footer-copy p {font-size:13px;}
    footer .footer-copy p b {font-size:13px;}
}
@media (max-width:767px){
    footer {padding:25px 0;}
    footer .footer-info ul li {margin:0 0 7px;}
    footer .footer-info ul li p {width:100%; text-align:center; margin:0 0 5px;}
    footer .footer-info ul li p:last-of-type {margin:0;}
    footer .footer-info ul li p a {font-size:13px; color:#fff;}
    footer .footer-info ul li a {display:none;}
    footer .footer-copy {margin:15px 0 0;}
}

/* section */
section {margin:102px 0 0; min-height:700px;}
@media (max-width:991px){
    section {margin:55px 0 0;}
}

/* main-title */
.main-box h2 {font-size:48px; font-weight:bold; color:#fff; line-height:1.3; word-break:keep-all;}
.main-box h2 p {font-size:24px; font-weight:500; color:#d9d9d9; line-height:1.4; word-break:keep-all;}
.main-box h2 p.pu {color:#9857D3;}
@media (max-width:991px){
    .main-box h2 {font-size:25px;}
    .main-box h2 p {font-size:15px;}
}

/* main-text */
.main-box .main-text dl dt {font-size:48px; font-weight:bold; color:#fff; line-height:1.3; word-break:keep-all; margin:0 0 20px;}
.main-box .main-text dl dt small {display:block; font-size:24px; font-weight:500; line-height:1.5; color:#d9d9d9; word-break:keep-all;}
.main-box .main-text dl dd{position:relative; margin:0 0 20px; font-size:24px; font-weight:500; padding:0 0 0 15px; line-height:1.5; color:#d9d9d9; word-break:keep-all;}
.main-box .main-text dl dd .highlight{color: #FF5DF6;position:relative;font-size:24px; font-weight:500; line-height:1.5;}
.main-box .main-text dl dd:last-of-type {margin:0;}
.main-box .main-text dl dd:before {position:absolute; left:0; top:14px; width:5px; height:5px; background:#d9d9d9; border-radius:50%; content:"";}
@media (max-width:991px){
    .main-box .main-text dl dt {font-size:25px; margin:0 0 10px;}
    .main-box .main-text dl dt small {font-size:15px;}
    .main-box .main-text dl dd {margin:0 0 10px; font-size:15px; padding:0 0 0 10px;}
    .main-box .main-text dl dd .highlight{font-size:15px;}
    .main-box .main-text dl dd:before {width:4px; height:4px; top:8px;}
}

/* main-button */
.main-box .main-button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-button a {height:60px; font-size:24px; font-weight:bold; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
.main-box .main-button a:after {display:inline-block; content:""; width:24px; height:24px; margin:0 0 0 5px; background:url('../images/icon_link.png') no-repeat center / cover;}
.main-box .main-button a.bu {background:linear-gradient(to right, #9839FE, #6017DD);}
.main-box .main-button a.og {background:linear-gradient(to right, #BA54F5, #E14ECA);}
@media (max-width:991px){
    .main-box .main-button a {height:45px; font-size:16px;}
    .main-box .main-button a:after {width:18px; height:18px;}
}

/* main-banner */
.main-box .main-banner {position:relative;}
.main-box .main-banner .swiper-slide a {display:block; font-size:0; background-size:100% 100%; background-position:center;}
.main-box .main-banner .swiper-slide a:after {display:block; content:""; padding-bottom:22.5%;}
.main-box .main-banner .swiper-button-prev {left:20%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; background:url('../images/icon_main_swiper_prev.png') no-repeat center / cover;}
.main-box .main-banner .swiper-button-next {right:18%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; background:url('../images/icon_main_swiper_next.png') no-repeat center / cover;}
.main-box .main-banner .swiper-pagination {z-index:20; width:100%; text-align:center; bottom:5%;}
.main-box .main-banner .swiper-pagination span {background:rgba(255,255,255,0.6); width:8px; height:8px; opacity:1; margin:0 2px; transition:all ease 0.5s;}
.main-box .main-banner .swiper-pagination span.swiper-pagination-bullet-active {background:#fff; width:24px; border-radius:180px;}
@media (max-width:1500px){
    .main-box .main-banner .swiper-button-prev {left:15px; transform:translateY(-50%);}
    .main-box .main-banner .swiper-button-next {right:15px; transform:translateY(-50%);}
}
@media (max-width:991px){
    .main-box .main-banner .swiper-slide a {background-size:cover;}
    .main-box .main-banner .swiper-slide a:after {padding-bottom:46.5%;}
    .main-box .main-banner .swiper-button-prev {width:24px; height:24px; display:none;}
    .main-box .main-banner .swiper-button-next {width:24px; height:24px; display:none;}
    .main-box .main-banner .swiper-pagination span {width:6px; height:6px; margin:0 1px;}
    .main-box .main-banner .swiper-pagination span.swiper-pagination-bullet-active {width:20px;}
}

/* main-solution */
.main-box .main-solution {padding:100px 0; background:url('../images/bg_main_solution.png') no-repeat left top / cover;}
.main-box .main-solution ul {display:flex; flex-wrap:wrap; justify-content:space-between; margin:54px auto 0; max-width:946px;}
.main-box .main-solution ul li {margin:0 10px 0 0;}
.main-box .main-solution ul li:last-of-type {margin:0;}
.main-box .main-solution ul li a {display:block;}
.main-box .main-solution ul li a p {text-align:center; font-size:24px; font-weight:bold; color:#fff;}
.main-box .main-solution ul li a:before {display:block; margin:0 auto; width:100px; height:100px; background-size:cover; background-position:center; content:"";}
.main-box .main-solution ul li:nth-of-type(1) a:before {background-image:url('../images/main/main_icon1.png');}
.main-box .main-solution ul li:nth-of-type(2) a:before {background-image:url('../images/main/main_icon2.png');}
.main-box .main-solution ul li:nth-of-type(3) a:before {background-image:url('../images/main/main_icon3.png');}
.main-box .main-solution ul li:nth-of-type(4) a:before {background-image:url('../images/main/main_icon4.png');}
.main-box .main-solution ul li:nth-of-type(5) a:before {background-image:url('../images/main/main_icon5.png');}
.main-box .main-solution ul li:nth-of-type(6) a:before {background-image:url('../images/main/icon_main_solution_06.png');}
.main-box .main-solution small {display:block; text-align:center; margin:74px 0 42px; font-size:20px; font-weight:500; color:#d9d9d9; line-height:1.3; word-break:keep-all;}
@media (max-width:991px){
    .main-box .main-solution {padding:50px 0;}
    .main-box .main-solution ul {margin:24px auto -20px;}
    .main-box .main-solution ul li {flex:none; width:33.33%; margin:0 0 10px;}
    .main-box .main-solution ul li a p {font-size:12px;}
    .main-box .main-solution ul li a:before {width:45px; height:45px;}
    .main-box .main-solution small {margin:48px 0; font-size:13px;}
}
.main-box .main-solution ul li a p {margin-top: 15px}
/* main-service */
.main-box .main-service ul li {padding:100px 0;}
.main-box .main-service ul li .container {display:flex; flex-wrap:wrap; align-items:center;}
.main-box .main-service ul li .list-image {max-width:500px; background:url('../images/bg_purple.png') no-repeat center / cover;}
.main-box .main-service ul li .list-image img {width:100%;}
.main-box .main-service ul li .list-content {flex:1; min-width:0; padding:0 0 0 60px;}
.main-box .main-service ul li .list-content h3 {font-size:24px; font-weight:500; color:#9857D3;}
.main-box .main-service ul li:nth-of-type(odd) {background:#00070D;}
.main-box .main-service ul li:nth-of-type(odd) .list-image {order:2;}
.main-box .main-service ul li:nth-of-type(odd) .list-content {order:1; padding:0 60px 0 0;}
@media (max-width:1200px){
    .main-box .main-service ul li .list-image {max-width:450px;}
}
@media (max-width:991px){
    .main-box .main-service ul li {padding:50px 0;}
    .main-box .main-service ul li .list-image {order:1 !important; width:100%; margin:0 auto;}
    .main-box .main-service ul li .list-content {flex:none; width:100%; padding:0 !important; order:2 !important; margin:24px 0 0;}
    .main-box .main-service ul li .list-content h3 {font-size:18px;margin-top: 40px}
    .main-box .main-service ul li .list-content .main-text {margin-top: 30px}
    .main-box .main-service ul li:nth-of-type(2) .list-image,
    .main-box .main-service ul li:nth-of-type(3) .list-image {margin:-50px 0;}
}

/* main-add */
/* main-add */
.main-box .main-add {padding:100px 0;}
.main-box .main-add .swiper-wrapper {transition-timing-function:linear;}
.main-box .main-add .swiper-wrapper .swiper-slide {width:420px; height: 264px; margin:0 40px 0 0;}
.main-box .main-add .swiper-wrapper .swiper-slide img {width:420px; height: 264px;}
@media (max-width:991px){
    .main-box .main-add {padding:50px 0;}
    .main-box .main-add .swiper-wrapper .swiper-slide {width:100%; margin:0 10px 0 0;}
}

/* main-download */
.main-box .main-download {padding:100px 0;}
.main-box .main-download ul {max-width:722px; margin:0 auto; display:flex; flex-wrap:wrap;}
.main-box .main-download ul li {flex:1; min-width:0; margin:0 42px 0 0; padding:43px 30px; border:1px solid #4F228D; background:linear-gradient(to right, #130428 7%, #251043 34%, #38126D 57%, #261045 85%, #190634 100%);}
.main-box .main-download ul li:last-of-type {margin:0;}
.main-box .main-download ul li:before {display:block; margin:0 auto 18px; content:""; width:100px; height:100px; background:url('../images/icon_main_download.png') no-repeat center / cover;}
.main-box .main-download ul li p {font-size:16px; font-weight:bold; color:#d9d9d9; text-align:center; line-height:1.5;}
.main-box .main-download ul li strong {display:block; text-align:center; line-height:1.5; font-size:24px; font-weight:bold; color:#fff;}
.main-box .main-download ul li a {height:48px; border-radius:8px; margin:42px 0 0; font-size:20px; font-weight:bold; background:linear-gradient(to right, #E14ECA, #BA54F5); color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-box .main-download ul li:nth-of-type(1):before {background-image:url('../images/icon_ios.png');}
.main-box .main-download ul li:nth-of-type(2):before {background-image:url('../images/icon_android.png');}
@media (max-width:991px){
    .main-box .main-download {padding:50px 0;}
    .main-box .main-download ul li {margin:0 10px 0 0; padding:35px 20px;}
    .main-box .main-download ul li:before {width:50px; height:50px; margin:0 auto 15px;}
    .main-box .main-download ul li p {font-size:15px;}
    .main-box .main-download ul li strong {font-size:18px;}
    .main-box .main-download ul li a {margin:24px 0 0; font-size:17px; height:40px; border-radius:5px;}
}

/* main-bottom */
.main-box .main-bottom .container {max-width:1414px;}
.main-box .main-bottom img {width:100%;}

/* title-box */
.title-box {margin:0 0 42px;}
.title-box h2 {font-size:24px; font-weight:bold; color:#fff; text-align:center;}
@media (max-width:991px){
    .title-box {margin:0 0 32px;}
    .title-box h2 {font-size:20px;}
}

/* member-box */
.member-box {margin:0 auto; padding:100px 0; width:100%; max-width:384px;}
.member-box.lg {padding:185px 0;}
@media (max-width:991px){
    .member-box {padding:32px 0;}
    .member-box.lg {padding:111px 0;}
}

/* result-box */
.result-box .member-box {margin:-50px auto 0;}
@media (max-width:991px){
    .result-box {height:70vh; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
    .result-box .main-box {width:100%;}
    .result-box .member-box {margin:0 auto; width:100%;}
}

/* color */
.ft-blue {color:#21A0FF !important;}
.ft-white {color:#ffffff !important;}

/* write-box */
.write-box > ul > li {margin:0 0 24px;}
.write-box > ul > li:last-of-type {margin:0;}
.write-box > ul > li.border {margin:0 0 24px; padding:0 0 24px; border-bottom:1px solid #3d3d3d;}
.write-box > ul > li > strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 12px; font-size:14px; font-weight:500; color:#d9d9d9;}

/* input-box */
.input-box {background:#323339; border:1px solid #686868; border-radius:8px; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center;}
.input-box input {flex:1; min-width:0; background:none; height:44px; padding:0 12px; font-size:14px; font-weight:500; color:#fff;}
.input-box input::placeholder {color:#63656d;}
.input-box time {font-size:14px; color:#FF9437; font-weight:500; margin:0 12px 0 0;}

/* file-box */
.file-box {display:flex; flex-wrap:wrap; align-items:center;}
.file-box p {background:#323339; border:1px solid #686868; border-radius:8px; flex:1; min-width:0; margin:0 6px 0 0; height:44px; padding:0 12px; font-size:14px; font-weight:500; color:#63656d; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:44px;}
.file-box label {font-size:14px; font-weight:500; color:#D9D9D9; position:relative; width:70px; height:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#323339; border:1px solid #686868; border-radius:8px;}
.file-box label input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}

/* upload-box */
.upload-box {position:relative;}
.upload-box label {padding:48px 0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; border-radius:8px; border:1px solid #686868; background:#323339;}
.upload-box label p {width:100%; text-align:center; font-size:14px; font-weight:500; color:#63656d;}
.upload-box label input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.upload-box label:before {display:block; content:""; margin:0 auto; width:42px; height:42px; background:url('../images/icon_upload.png') no-repeat center / cover;}
.upload-box .file-list {display:flex; flex-wrap:wrap; margin:12px -6px -12px;}
.upload-box .file-list li {width:calc(25% - 12px); margin:0 6px 12px; position:relative; background-size:cover; background-position:center;}
.upload-box .file-list li:after {display:block; content:""; padding-bottom:100%;}
.upload-box .file-list li .delete {font-size:0; position:absolute; right:4px; top:4px; width:16px; height:16px; background:url('../images/icon_delete_file.png') no-repeat center / cover;}
@media (max-width:991px){
    .upload-box .file-list {margin:6px -3px -6px;}
    .upload-box .file-list li {width:calc(25% - 6px); margin:0 3px 6px;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {text-align:center; line-height:1.2; border:1px solid #686868; background:#323339; border-radius:8px; height:44px; font-size:14px; color:#d9d9d9; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0;}
.button-box .btn.radius {border-radius:50px !important;}
.button-box .btn.lg {height:48px; font-size:18px; font-weight:bold;}
.button-box .btn.sm {height:28px; border-radius:4px; font-size:12px; padding:0 15px; flex:none;}
.button-box .btn-purple {background:#6C00BF; border-color:#6C00BF; color:#fff;}
.button-box .btn-red {background:#BF008F; border-color:#BF008F; color:#fff;}
.button-box .btn-red2 {background:#FF3D40; border-color:#FF3D40; color:#D9D9D9;}
.button-box .btn-green {background:#00BF9A; border-color:#00BF9A; color:#fff;}
.button-box .btn-blue {background:#1D8CF8; border-color:#1D8CF8; color:#fff;}
.button-box .btn-orange {background:#FF3D40; border-color:#FF3D40; color:#fff;}
.button-box .btn-orange2 {background:#FF813D; border-color:#FF813D; color:#D9D9D9;}
.button-box .btn-pink {background:linear-gradient(to bottom, #BA54F5, #E14ECA); color:#fff; border-color:transparent;}
.button-box .btn-white {border:1px solid #D9D9D9; color:#fff; background:none;}
.button-box .btn-gray {background:#63656D; border-color:#63656D; color:#D9D9D9;}
.button-box .btn-lightgray {background:#D9D9D9; color:#63656D; border-color:#d9d9d9;}
.button-box .btn-yellow {background:#E7BD29; border-color:#E7BD29; color:#323339;}
.button-box .btn-black {background:#00070D; border-color:#00070D; color:#fff;}

/* message-box */
.message-box {margin:4px 0 0;}
.message-box p {font-size:12px; font-weight:500; line-height:1.5; color:#BECDFF;}
.message-box p.error {color:#FF9437;}

/* tab-box */
.tab-box {display:flex; flex-wrap:wrap; align-items:center;}
.tab-box ul {width:100%; display:flex; flex-wrap:wrap; align-items:center; border-radius:50px; border:1px solid #BE54F2; overflow:hidden;}
.tab-box ul li {flex:1; min-width:0; border-right:1px solid #FF5DF6;}
.tab-box ul li:last-of-type {border:0;}
.tab-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:44px; font-size:16px; font-weight:600; color:#FF5DF6;}
.tab-box ul li.active a {background:linear-gradient(to bottom, #BA54F5, #E14ECA); color:#fff;}
@media (max-width:991px){
    .tab-box ul {width:100%; border-radius:8px;}
    .tab-box ul li {flex:1; min-width:0;}
    .tab-box ul li a {font-size:14px;}
}

/* tab-content-box */
.tab-content-box {margin:24px 0 0;}
.tab-content-box .content {display:none;}
.tab-content-box .content.active {display:block;}



.box4 {
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box4-header {
    text-align: center;
    margin-bottom: 60px;
    max-width: 900px;
}

.box4-header h1 ,
.box4-header h1 .highlight,
.box4-header h2{
    font-size: 38px;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 16px;
    color: #fff;
}

@media (max-width:991px){
    .box4-header h1 ,
    .box4-header h1 .highlight,
    .box4-header h2{
        font-size: 25px !important;
    }
}

.box4-header h1 .highlight {
    color: #FF5DF6;
}

.box4 .card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1100px;
    width: 100%;
}

@media (min-width: 1024px) {
    .box4  .card-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.box4 .card ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: linear-gradient(to right, #4F228D, #4F228D);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.box4 .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100px; /* 왼쪽에서 살짝 떨어진 위치 */
    width: 50px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    filter: blur(40px); /* 부드럽게 퍼지게 */
    z-index: 0;
    pointer-events: none;
}
.box4 .card {
    /*background: linear-gradient(to bottom right, #5b21b6, #6d28d9);*/
    padding: 24px;
    position: relative;
    overflow: hidden;
    background-color: #2C1250;
    border-radius: 15px;
    /* Drop shadow */
    box-shadow: 4px 7px 26px rgba(0, 0, 0, 0.12);
}

.box4 .card-content {
    display: flex;
}

.box4 .card-img {
    width: 25%;
    margin-right: 16px;
    margin-top: 50px;
}

.box4 .card-img img {
    width: 100%;
    object-fit: contain;
}

.box4 .card-text {
    width: 75%;
    margin-top: 15px;
}

.box4 .card-text h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #fff;
}

.box4 .card-text p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #fff;
    height: 85px;
}

.box4 .card-text a {
    background-color: #2C1250;
    border: none;
    padding: 10px 20px;
    color: white;
    border: 1px solid #693B93;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.box4 .card-text a:hover {
    background-color: #7c3aed;
}

/*
.box4 .card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 64px;
    width: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}*/

.why-section {
    position: relative;
    text-align: center;
    padding: 100px 20px;
    /*background-color: #020617;*/
    overflow: hidden; /* 배경 넘침 방지 */
}

.why-section::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 80%;
    transform: translate(-50%, -50%);
    background-image: url('/page/asset/images/main/main_space_star.png'); /* 퍼짐 효과 이미지 경로 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 적당한 크기 조절 */
    opacity: 0.6; /* 필요한 경우 투명도 조절 */
    z-index: 0;
    pointer-events: none;
}

.why-section > * {
    position: relative;
    z-index: 1; /* 내용이 배경 위로 보이도록 */
}
.why-section .title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
}

.why-section .star-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.why-section h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 31px;
    margin-bottom: 10px;
    color: #fff;
}

.why-section .content {
    font-size: 30px;
    font-weight: 400;
    line-height: 46px;
    white-space: pre-line;
    color: #fff;
}


.why-section .highlight {
    font-weight: bold;
    color: #fff;
    font-size: 30px;
}

.why-section .highlight .free {
    color: #ff3cac;
    font-size: 30px;
}

@media (max-width:991px){
    .box4 .card-text p {
        height: 150px;
    }

    .why-section h2 {
        font-size:30px;
        line-height:20px;
        margin-bottom: 0px;
    }
    .why-section .content {
        font-size: 15px;
        line-height: 25px;
    }
    .why-section .highlight {
        font-size: 15px;
    }
    .why-section .highlight .free {
        font-size: 15px;
    }
    .why-section::before {
        width: 100%;
        height: 150%;
    }
}