/* 기본 */
* { margin: 0;padding: 0;box-sizing: border-box;}
html,body {width:100%;height:100%;}
ul {margin-left:0}
li {list-style:none}
a:hover{text-decoration:none}
.user-point {color:#c83434 !important}
.pc-only {display:block}
.mobile-only {display:none}

/* wrap */
#user-wrap {height:100%}
.support {height:100%;background:url('/support/image/bg.svg');background-size:cover}
.support .body-wrap {height:100%;position:relative;overflow:hidden;}
.support .body-content {margin:auto;width:1200px;position:relative;margin-top:300px}
.support .main {width:1200px;margin:0 auto}
.support .container {margin:0 auto;padding:2rem 2rem;background:#fff;}

/* index */
.index-wrap {display:flex;dispaly:-ms-flexbox;}
.side {flex-grow:1}
.side.introduce {flex-grow:2}
.side.introduce .tit {font-size:55px;font-weight:600;letter-spacing:-0.05em;margin-bottom:13px;line-height:1.2em;}
.side.introduce .txt {font-size:20px;letter-spacing:-.05rem}
.side.introduce .btn-intro {display:block;width:68%;margin:20px auto;padding:8px 12px;background:#022F43 0% 0% no-repeat padding-box;border-radius:30px;color:#fff;font-size:0;text-align:center;transition: background-color .25s ease-out,color .25s ease-out;}
.side.introduce .btn-intro span {display:inline-block;vertical-align:middle;font-size:18px;}
.side.introduce .btn-intro .btn {width:25px;height:25px;margin-left:10px;background-image:url('/support/image/icon-arrow-big.png');background-size:40%;background-repeat:no-repeat;
background-position:center;background-color:#fff;border-radius:50%}
.side.introduce .btn-intro:hover {background:#8C3333}


/* logo */
.support .support-top {display:flex;display:-ms-flexbox;align-items:center;position:fixed;top:0;z-index:1004;width:100%;height:120px;padding:20px 30px;background-color:#fff;border-bottom:4px solid #097985}
.support .logo {text-align:left;}
.support .logo span {font-size:1.2rem; font-weight:600; text-align:center; letter-spacing:-.05em}
.support .logo span {border:1px solid #2e3483;border-radius:30px;padding:5px 15px;color:#2e3483;}
.support .logo span:hover {background:#2e3483;color:#fff;}


/* header */
.support .header {margin-left:auto}
.support .header .nav-logo {text-align:right;margin-bottom:15px}
.support .header nav .menu {display:flex;display:-ms-flexbox;justify-content:center;align-items:center;}
.support .header nav .menu li{margin-left:30px}
.support .header nav .menu li a {padding:0;color:#333;font-size:1.2rem;letter-spacing:-.075rem;border-radius:10rem;}
.support .header nav .menu li a.active {color:#8C3333;text-shadow:none;font-weight:bold;}
.support .header nav .menu li a:hover {text-decoration:none;}
.support .header nav .menu li.hw-btn {background-color:#8C3333;border-radius:20px;padding:8px 40px;}
.support .header nav .menu li.hw-btn:hover {background-color:#652525;cursor:pointer}
.support .header nav .menu li.hw-btn a {padding-left:0;text-align:center;color:#fff}


/* intro */
.support .intro-wrap {text-align:center}
.support .intro-wrap h2 {font-size:45px;margin:20px 0 30px 0;font-weight:bold;color:#fff;word-break:keep-all}
.support .intro-wrap p {margin-bottom:.45rem;color:#fdfdfd;font-size:18px;font-weight:400;word-break:keep-all}
.support .intro-wrap p:first-child {color:#cbcbcb;font-weight:bold;}
.obj {animation:fadeInUp 1.5s;}
 @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }
        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }


/* rule */
.support .rule-wrap ul {display:flex;display:-ms-flexbox;}
.support .rule-wrap ul li {width:50%;padding:24px 20px}
.support .rule-wrap .type-inner {min-height:420px;padding:30px;border-radius:16px;color:#353535;background-color:#fff;box-shadow:rgb(163 177 198 / 20%) 3px 3px 10px 4px;-webkit-box-shadow: rgb(163 177 198 / 20%) 3px 3px 10px 4px;}
.support .rule-wrap .type-inner .titles {display:block;width:88px;padding:16px;font-size:22px;font-weight:bold;text-align:center;line-height:1.3;word-break:break-word;background-color:#00a7a7;color:#fff;}
.support .rule-wrap .type-inner .cont {text-align:left;margin-top:30px;}
.support .rule-wrap .type-inner .cont p {margin-bottom::.5rem;font-size:18px;font-weight:400;letter-spacing:-.05rem}


/* service */
.support .service-wrap {}
.support .service-wrap h2 {font-size:36px;font-weight:bold;margin-bottom:30px}
.support .service-wrap .inner ul {display:flex;display:-ms-flexbox;justify-content:space-between;}
.support .service-wrap .inner li {position:relative;width:30%;background:#F8F8F8;border-radius:20px;padding:46px 50px}
.support .service-wrap .inner li:hover {background-color:#effaf5;}
.support .service-wrap .inner li a {display:block; height:100%; cursor:pointer;}
.support .service-wrap .inner li .ic_service {background:url('/support/image/icon-service.png');display:inline-block;width:60px;height:60px;margin-bottom:16px}
.support .service-wrap .inner li .sub {font-size:clamp(15px, 1.3vw, 16px);color:#888}
.support .service-wrap .inner li .txt {font-size:clamp(16px, 1.8vw, 20px);color:#333;font-weight:600}
.support .service-wrap .inner li:nth-child(1) .ic_service {background-position:0 -100px}
.support .service-wrap .inner li:nth-child(2) .ic_service {background-position:-83px -90px}
.support .service-wrap .inner li:nth-child(3) .ic_service {background-position:-158px -96px}
.support .service-wrap .inner li .stby {position:absolute;top:0;right:0;background-color:#00a7a7;color:#fff;padding:5px 15px;border-bottom-left-radius:15px;font-size:.85rem;}


/* FAQ */
.support .faq-list {border-top:1px solid #ddd}
.support .faq-list .faq-item {display:flex;align-items:center;cursor:pointer}
.support .faq-list .faq-item .faq-body {flex:1 1 100%;padding:40px 30px;}
.support .faq-list .faq-item .icon-wrap {flex:none;width:24px;height:24px;margin-right:30px;font-size:24px}
.support .faq-item .title {font-size:18px;font-weight:700;line-height:1.56}
.support .faq-content .answer-wrap {background-color:#f8f8f8;border-top:1px solid #ddd}
.support .faq-content .faq-body {padding:40px 30px;}


/* footer */
.support .footer {padding:1.5rem 1rem;background:#060404;color:#999}
.support .footer .footer-wrap{margin:auto;width:100%;max-width:1080px;text-align:center}
.support .footer .footer-wrap .address{font-size:.75rem}


/* mobile */
@media screen and (max-width: 63.9375em) {

}

@media screen and (max-width: 39.9375em) {
.pc-only {display:none}
.mobile-only {display:block}
.support {height:auto}
.support .main {width:100%}
.support .container {padding:2rem 1rem}
.support .support-top {display:block;position:relative;height:auto}
.support .body-wrap {padding:1rem 1rem;margin-top:0;}
.support .body-content {width:100%;margin-top:0}
.support .body-content .body-title {font-size:2rem;}
.support .logo {text-align:center}
.support .logo img {width:150px}
.support .logo span {font-size:1.2rem;font-weight:600;letter-spacing:-.08em;text-align:center;display:block;margin-top:10px;}
.support .flex.logo {display:flex;display:-ms-flexbox;align-items:center;justify-content:center;}
.support .flex.logo .nav-logo {margin-left:auto}
.support .header {padding-top:10px;}
.support .header .nav-logo {text-align:center}
.support .header nav .menu {flex-wrap:wrap}
.support .header nav .menu li {margin:10px 20px}
.support .header nav .menu li a {font-size:1.15rem}
.support .header nav .menu li.hw-btn {padding:3px 60px;margin-top:10px}
.support .header nav .menu li.hw-btn a {height: 28px;line-height: 28px;}
/* index */
.index-wrap {display:block}
.side.introduce .tit {font-size:40px;text-align:center}
.side.introduce .txt {font-size:20px;text-align:center}
/* rule */
.support .rule-wrap ul {display:block}
.support .rule-wrap ul li {width:100%;padding:0;margin-bottom:20px}
/* service */
.support .service-wrap .inner ul {display:block}
.support .service-wrap .inner li {width:100%;margin-bottom:20px}
}


/* 홍경아 / 1390421 / 20240716 */
.support .service-wrap .inner li:nth-child(1) .ic_service {background-position:0 -178px}
.support .service-wrap .inner li:nth-child(2) .ic_service {background-position:0 -100px}
.support .service-wrap .inner li:nth-child(3) .ic_service {background-position:-83px -90px}
.support .service-wrap .inner li:nth-child(4) .ic_service {background-position:-158px -96px}

.support .service-wrap .inner li {width: 23%; padding: 46px 28px;}

@media screen and (max-width: 39.9375em) {
    .support .service-wrap .inner li {
        width: 100%;
        margin-bottom: 20px;
    }
}
/* 최은비 / 1458590 / 20250401 */
.support .service-wrap .inner li .service-btn{display:inline-block;background:#00a7a7;color:#fff !important;padding:2px 12px 4px 12px;border-radius:50px;}