@charset "utf-8";

/* 폰트 */
@font-face{ 
    font-family:'century Gothic'; 
    src:url('fonts/CenturyGothic.ttf') format('truetype');  
    font-weight: 400; 
    font-style: normal; 
    unicode-range:U+0041-005A, U+0061-007A;
}
@font-face{ 
    font-family:'century Gothic'; 
    src:url('fonts/CenturyGothicBold.ttf') format('truetype');  
    font-weight:700; 
    font-style: normal; 
    unicode-range:U+0041-005A, U+0061-007A;
}
.centuryGothic {
    font-family:'century Gothic','Noto Sans KR', sans-serif;
}
@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.kotraBold {
    font-family:'KOTRA_BOLD-Bold';
}

/* reset */
* {margin: 0; padding: 0; box-sizing:border-box;}
ul, ol {list-style-type: none;}
h1 {margin: 0;}
i {font-style:normal;}
a {text-decoration:none; color:inherit;}
a.block {display:block; width:100%; height:100%;}
button {outline:none; border:none; background:none; cursor:pointer;}
img {border: none; image-rendering:-webkit-optimize-contrast; backface-visibility: hidden;}
html {font-size: 0.625em; color:#444;}
body {font-family: 'century Gothic', 'Noto Sans KR', sans-serif; line-height: 1; overflow-x:hidden;}
.clear:after {content: ""; display: block; clear: both;}
.pc {display:none;}
body.hidden {overflow:hidden;}
section > h2 {display:none;}
main, section {overflow:hidden; position:relative;}

#wrap {overflow:hidden; position:relative;}

/* 최상단 배너 */
body.bannerTop {}
.top-banner {
    background: linear-gradient(270deg, #DBC9DB 0%, #97C2ED 49.48%, #DBC9DB 100%);
    position:relative;
    z-index:1;
}
.top-banner .banner-inner {
    width:360px; 
    margin:0 auto; 
    position:relative;
    height:40px;
}
.top-banner .banner-inner > * {
    position:absolute; 
    top:50%;
    transform:translateY(-50%);
}
.top-banner .banner-inner > img {
    top:7px;
    transform:translateY(0);
    left:0;
    display:none;
    width:44px;
}
.top-banner .banner-inner > p {
    font-size:10px;
    color:#fff;
    text-shadow: 0px 0px 7.5px #87A9CB;
    left:20px;
    line-height:140%;
}
.top-banner .banner-inner > p span {
    color:#F0FC56;
}
.top-banner .banner-inner a {
    font-size:10px; font-weight:700;
    color:#fff;
    display:block;
    width:90px; line-height:22px; height:22px;
    background:#6160D6; 
    border-radius:100px;
    right:50px;
    text-align:center;
}
.top-banner .banner-inner a span {
    vertical-align:middle;
    margin-bottom:2px;
    display:inline-block;
}
.top-banner .banner-inner a img {
    width:14px; vertical-align:middle;
    margin-left:4px;
}
.top-banner .banner-inner button {
    display:block;
    background:url(/images/banner_top_close.svg) no-repeat;
    background-size:contain;
    width:16px; height:16px;
    right:10px;
    text-indent:-9999px;
}

/* header */
.header-inner {
    background: #fff;
    box-shadow: 0px 18px 40px rgba(58, 47, 91, 0.02);
    height:62px;
    position:relative;
    z-index:1;
}
.header-inner h1 {
    width:100px; height:22px;
    background:url(/images/logo.svg) no-repeat;
    background-size:contain;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
}
.header-inner h1 span {display:none;}
.header-inner button {
    display:block; 
    width:20px; height:14px;
    position:absolute; top:50%; left:5.5%;
    transform:translateY(-50%);
}
.header-inner button span {
    display:block; 
    width:100%; height:2px;
    background:#3A2F5B;
    border-radius:100px;
}
.header-inner button span:nth-of-type(2) {
    margin:4px 0;
}
.side-menu {
    display:none;
    width:100%; height:100vh;
    position:fixed;
    background: rgba(0, 0, 0, 0.4);
    z-index:10;
    top:0; left:0;
}
.side-menu .on-off {display:none;}
.side-menu .side-inner {
    float:left;
    width:255px; height:100%;
    background:#fff;
    position:relative;
    padding-top:20px;
    animation-name: navCloseSlider;
    animation-duration: .8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
@keyframes navOpenSlider {
    from {
        transform:translateX(-100%);
    }

    to {
        transform:translateX(0);
    }
}
@keyframes navCloseSlider {
    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-100%);
    }
}
.side-menu.on .side-inner {
    animation-name:navOpenSlider;
}

.side-menu .side-inner .logo {
    display:block;
    margin-left:25px;
    width:100px; height:23px;
    background:url(/images/logo.svg) no-repeat;
    background-size:contain;
    text-indent:-9999px;
}
.side-menu .side-inner .close {
    display:block; width:18px; height:18px;
    background:url(/images/side_bar_close.svg) no-repeat;
    background-size:contain;
    position:absolute; top:20px; right:20px;
    text-indent:-9999px;
}
.side-menu .side-inner ul {
    margin-top:40px;
}
.side-menu .side-inner ul li {
    height:50px;
    line-height:50px;
}
.side-menu .side-inner ul li a {
    display:block; width:100%; height:100%;
    padding-left:35px;
    position:relative;
}
.side-menu .side-inner ul li span {
    font-size:14px; font-weight:500;
    color:#8379A0;
    vertical-align:middle;
    margin-left:12px;
}
.side-menu .side-inner ul li i {
    display:inline-block;
    width:18px; height:18px;
    background-size:contain;
    background-repeat:no-repeat;
    vertical-align:middle;
}
.side-menu .side-inner ul li:nth-of-type(1) i {
    background-image:url(/images/side_icon01.svg);
}
.side-menu .side-inner ul li:nth-of-type(2) i {
    background-image:url(/images/side_icon02.svg);
}
.side-menu .side-inner ul li:nth-of-type(3) i {
    background-image:url(/images/side_icon03.svg);
}
.side-menu .side-inner ul li:nth-of-type(4) i {
    background-image:url(/images/side_icon04.svg);
}
.side-menu .side-inner ul li:nth-of-type(1) a:hover i,
.side-menu .side-inner ul li:nth-of-type(1) a.on i {
    background-image:url(/images/side_icon01_on.svg);
}
.side-menu .side-inner ul li:nth-of-type(2) a:hover i,
.side-menu .side-inner ul li:nth-of-type(2) a.on i {
    background-image:url(/images/side_icon02_on.svg);
}
.side-menu .side-inner ul li:nth-of-type(3) a:hover i,
.side-menu .side-inner ul li:nth-of-type(3) a.on i {
    background-image:url(/images/side_icon03_on.svg);
}
.side-menu .side-inner ul li:nth-of-type(4) a:hover i,
.side-menu .side-inner ul li:nth-of-type(4) a.on i {
    background-image:url(/images/side_icon04_on.svg);
}
.side-menu .side-inner ul li a.on::before {
    content:""; display:block;
    width:6px; height:100%;
    position:absolute; top:0; left:0;
    background:#6355FF;
    border-radius:0 20px 20px 0;
}
.side-menu .side-inner ul li a:hover::after,
.side-menu .side-inner ul li a.on::after {
    content:""; display:block;
    width:8px; height:8px;
    position:absolute; top:50%; right:30px;
    transform:translateY(-50%);
    background:#864DFF;
    border-radius:100px;;
}
.side-menu .side-inner ul li a:hover span,
.side-menu .side-inner ul li a.on span {
    color:#864DFF;
    font-weight:700;
}
.side-menu .close-box {
    width:calc(100% - 255px);
    height:100%;
    float:left;
}

/* contents */
.main-inner {
    position:relative;
    padding-top:184px;
}
.main-inner .logo {display:none;}
.main-inner .login {
    position:absolute; top:6px; left:50%;
    transform:translateX(-50%);
    width:90%; height:93px;
    background: #FFFFFF;
    box-shadow: 0px 5.25405px 13.1351px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    padding:13px 10px;
}
.main-inner .login h2 {
    font-size:14px;
    color:#6632FB;
}
.main-inner .login a {
    position:absolute;
    font-size:12px;
    color:#999;
    top:14px; right:12px;
}
.main-inner .login a span + span::before {
    content:""; display:inline-block;
    width:1px; height:9px;
    background:#DADADA;
    margin:0 5px;
}
.main-inner .login .input-inner {
    display: flex;
    margin-top:13px;
}
.main-inner .login .input-inner > * {
    float:left;
    display:block;
}
.main-inner .login .input-inner input {
    width:35%; height:40px;
    padding:0 8px;
    background:#fff;
    border-radius:5px;
    border:1px solid #E7E7E7;
    font-size:12px;
    outline:none;
}
.main-inner .login .input-inner input::placeholder {
    color:#C8BFCA;
}
.main-inner .login .input-inner input + input {
    margin:0 0.6em;
}
.main-inner .login .input-inner button {
    width:65px; 
    flex-grow:1;
    height:40px;
    border-radius:5px;
    background:#6632FB;
    font-size:12px;
    font-weight:700;
    color:#fff;
}
.main-inner .text {
    height:360px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 22.18%, #F1F7FF 86.01%);
    padding-top:157px;
}
.main-inner .text > * {
    width:316px; 
    margin:0 auto;
}
.main-inner .text h3 {
    font-size:26px;
    color:#1C2F45;
    line-height:140%;
}
.main-inner .text h4 {
    font-size:12px; font-weight:400;
    line-height:150%;
    margin-top:15px;
    color:#6A6D73;
}
.main-inner .bg01 {
    display:block;
    width:643px;
    position:absolute;
    left:50%; top:-246px;
    transform:translateX(-26%);
}
.main-inner .bg02 {
    display:block;
    width:297px;
    position:absolute;
    left:50%; top:99px;
    transform:translateX(-50%);
    margin-left:23px;
}
.main-inner .bg01 img,
.main-inner .bg02 img {display:block; width:100%;}

.s-inner01,.s-inner02 {
    padding:50px 0;
}
.s-inner01 > div,
.s-inner02 > div {
    width:90.5%; max-width:600px;
    margin:0 auto;
}
.s-inner01 h2,
.s-inner02 h2 {
    font-size:20px;
    color:#1C2F45;
}
.s-inner01 h2 + p,
.s-inner02 h2 + p {
    font-size:12px;
    margin-top:15px;
    color:#6A6D73;
    position:relative;
}
.s-inner01 h2 + p a,
.s-inner02 h2 + p a {
    position:absolute; display:block;
    top:-26px; right:0;
    font-size:10px;
    font-weight:700;
    color:#6632FB;
    padding-right:24px;
    background:url(/images/right_arrow_p.svg) no-repeat;
    background-size:21px;
    background-position:100% 50%;
}
.s-inner01 ul,
.s-inner02 ul {
    margin-top:24px;
}
.s-inner01 ul li,
.s-inner02 ul li {
    float:left;
    width:calc(50% - 8px);
    border-radius:8px;
}
.s-inner01 ul li:nth-of-type(even),
.s-inner02 ul li:nth-of-type(even) {
    margin-left:16px;
}
.s-inner01 ul li:nth-of-type(n + 3),
.s-inner02 ul li:nth-of-type(n + 3) {
    margin-top:16px;
}
.s-inner01 ul li {
    height:160px;
    background-repeat:no-repeat;
    background-size:155px auto;
    background-position:50% 0;
    text-align:center;
    padding-top:111px;
}
.s-inner01 ul li:nth-of-type(1) {
    background-color:rgba(255,127,80,.4);
    background-image:url(/images/se01_bg01.png);
    color:#B05A3A;
}
.s-inner01 ul li:nth-of-type(2) {
    background-color:rgba(255,165,2,.4);
    background-image:url(/images/se01_bg02.png);
    color:#AE7E26;
}
.s-inner01 ul li:nth-of-type(3) {
    background-color:rgba(255,71,87,.4);
    background-image:url(/images/se01_bg03.png);
    color:#A35E5C;
}
.s-inner01 ul li:nth-of-type(4) {
    background-color:rgba(55,66,250,.4);
    background-image:url(/images/se01_bg04.png);
    color:#4349B9;
    padding-top:100px;
}
.s-inner01 ul li:nth-of-type(4) p:nth-of-type(1) {
    line-height:125%;
}
.s-inner01 ul li:nth-of-type(4) p:nth-of-type(2) {
    margin-top:5px;
}
.s-inner01 ul li p:nth-of-type(1) {
    font-size:12px; font-weight:700;
    color:#2E2E2E;
}
.s-inner01 ul li p + p {
    font-size:10px;
    margin-top:8px;
}
.s-inner02 {
    background:#F2F9FF;
}
.s-inner02 ul {
    max-width:326px;
    margin-left:auto;
    margin-right:auto;
}
.s-inner02 ul li {
    height:163px;
    background-color:#fff;
    box-shadow: 4px 4px 17px rgba(16, 15, 19, 0.1);
    background-repeat:no-repeat;
    background-size:auto 110px;
    background-position:50% 0;
    padding:121px 0 0 13px;
}
.s-inner02 ul li:nth-of-type(1) {
    background-image:url(/images/se02_bg01.jpg);
}
.s-inner02 ul li:nth-of-type(2) {
    background-image:url(/images/se02_bg02.jpg);
}
.s-inner02 ul li:nth-of-type(3) {
    background-image:url(/images/se02_bg03.jpg);
}
.s-inner02 ul li:nth-of-type(4) {
    background-image:url(/images/se02_bg04.jpg);
}
.s-inner02 ul li p {
    font-size:12px; font-weight:700;
    color:#333;
}
.s-inner02 ul li p + p {
    font-size:10px; font-weight:400;
    color:#444;
    margin-top:6px;
}
.s-inner03 {
    padding:46px 0 44px;
}
.s-inner03 .circle3 {
    display:block;
    width:376px;
    position:absolute;
    top:-55px; left:-127px;
}
.s-inner03 .circle1 {
    display:block;
    width:631px;
    position:absolute;
    top:-328px; left:-271px;
}
.s-inner03 .circle2 {
    display:block;
    width:564px;
    position:absolute;
    top:-188px; right:-352px;
}
.s-inner03 > div {position:relative;}
.s-inner03 > div > img {
    display:block;
    max-width:500px;
    width:58%; margin:0 auto;
    margin-bottom:35px;
}
.s-inner03 .text,
.s-inner04 .text {
    width:233px;
    margin:0 auto;
}
.s-inner03 .text h2,
.s-inner04 .text h2 {
    font-size:20px;
    color:#1C2F45;
}
.s-inner03 .text p,
.s-inner04 .text p {
    font-size:12px;
    line-height:160%;
    color:#6A6D73;
    margin:12px 0 18px;
}
.s-inner03 .text a,
.s-inner04 .text a {
    display:block;
    width:160px; height:40px;
    line-height:40px;
    font-size:12px; font-weight:700;
    color:#fff;
    background:#6632FB;
    border-radius:100px;
    text-align:center;
}
.s-inner03 .text a img,
.s-inner04 .text a img {
    vertical-align:middle;
    width:22px;
    margin-left:5px;
}
.s-inner04 {
    background:#F2F9FF;
    padding:39px 0 58px;
}
.s-inner04 > div > img {
    display:block;
    max-width:500px;
    width:58%; margin:0 auto;
    margin-bottom:15px;
}

/* footer */
footer {
    background:#06004A;
}
.footer-inner {
    width:88.8%; height:200px;
    margin:0 auto;
    padding-top:26px;
    position:relative;
}
.footer-inner button {
    font-size:10px; font-weight:700;
    color:#fff;
    border-radius:100px;
    width:35px; height:35px;
    position:absolute; top:20px; right:0;
    background:#3C32C8;
}
.footer-inner .logo {
    width:110px;
}
.footer-inner .text {
    margin-top:28px;
    color:#908DB2;
    font-size:12px;
    line-height:145%;
}
.footer-inner .text p:nth-of-type(1) {
    font-weight:700;
    margin-bottom: 6px;
}
.footer-inner .text p:nth-of-type(2) {
    margin:6px 0 10px;
}
.footer-inner .text p + p {
    color:#9B99B7;
}

.footer-inner text a {
    margin:6px 0 10px;
}

.footer-inner a + a:before {
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: -1px 10px 1px;
    background: #9B99B7;
    vertical-align: middle;
    content: "";
}


/* 가로 해상도 768 이상 */
@media screen and (min-width:768px){
    /* 최상단 배너 */
    .top-banner {
        overflow:hidden;
    }
    .top-banner .banner-inner {
        width:720px; 
        height:70px;
    }
    .top-banner .banner-inner > img {
        top:9px;
        transform:translateY(0);
        left:10px;
        display:block;
        width:87px;
    }
    .top-banner .banner-inner > p {
        font-size:18px;
        letter-spacing: -0.02em;
        left:100px;
    }
    .top-banner .banner-inner > p br {display:none;}
    .top-banner .banner-inner a {
        font-size:14px;
        width:135px; line-height:34px; height:34px;
        right:27px;
    }
    .top-banner .banner-inner a img {
        width:24px;
        margin-bottom:4px;
    }
    .top-banner .banner-inner button {
        width:16px; height:16px;
        right:-11px;
    }

    /* header */
    .header-inner {
        box-shadow: 0px 18px 40px rgba(112, 144, 176, 0.12);
        height:90px;
    }
    .header-inner h1 {
        width:155px; height:35px;
    }
    .header-inner button {
        width:26px; height:20px;
        left:39px;
    }
    .header-inner button span {
        height:3px;
    }
    .header-inner button span:nth-of-type(2) {
        margin:4px 0;
    }

    /* contents */
    .main-inner {
        padding-top:489px;
    }
    .main-inner .login {
        top:20px;
        width:728px; height:150px;
        box-shadow: 0px 4.58378px 11.4595px rgba(0, 0, 0, 0.1);
        border-radius:20px;
        padding:25px 20px;
    }
    .main-inner .login h2 {
        font-size:22px;
    }
    .main-inner .login a {
        font-size:16px;
        top:30px; right:20px;
    }
    .main-inner .login a span + span::before {
        width:1px; height:10px;
        margin:0 7px;
    }
    .main-inner .login .input-inner {
        margin-top:28px;
    }
    .main-inner .login .input-inner input {
        width:240px; height:50px;
        padding:0 15px;
        font-size:16px;
    }
    .main-inner .login .input-inner input + input {
        margin:0 10px 0 8px;
        width:230px;
    }
    .main-inner .login .input-inner button {
        width:200px; height:50px;
        font-size:16px;
        letter-spacing: -0.04em;
    }
    .main-inner .text {
        height:583px;
        padding-top:230px;
    }
    .main-inner .text > * {
        width:660px; 
    }
    .main-inner .text h3 {
        font-size:48px;
        letter-spacing: -0.01em;
        line-height:130%;
    }
    .main-inner .text h4 {
        font-size:22px;
        margin-top:27px;
    }
    .main-inner .bg01 {
        width:1275px;
        top:-423px;
        transform:translateX(-26%);
    }
    .main-inner .bg02 {
        width:560px;
        top:256px;
        margin-left:54px;
    }

    .s-inner01,.s-inner02 {
        padding:65px 0;
    }
    .s-inner01 > div,
    .s-inner02 > div {
        width:700px; max-width:none;
    }
    .s-inner01 h2,
    .s-inner02 h2 {
        font-size:34px;
    }
    .s-inner01 h2 + p,
    .s-inner02 h2 + p {
        font-size:14px;
        margin-top:17px;
    }
    .s-inner01 h2 + p a,
    .s-inner02 h2 + p a {
        top:1px; 
        font-size:13px;
        padding-right:27px;
        background-size:20px;
    }
    .s-inner01 ul,
    .s-inner02 ul {
        margin-top:36px;
    }
    .s-inner01 ul li,
    .s-inner02 ul li {
        float:left;
        width:calc(50% - 10px);
        border-radius:19px;
    }
    .s-inner01 ul li:nth-of-type(even),
    .s-inner02 ul li:nth-of-type(even) {
        margin-left:20px;
    }
    .s-inner01 ul li:nth-of-type(n + 3),
    .s-inner02 ul li:nth-of-type(n + 3) {
        margin-top:20px;
    }
    .s-inner01 ul li {
        height:300px;
        background-size:100% auto;
        padding-top:220px;
    }
    .s-inner01 ul li:nth-of-type(4) {
        padding-top:220px;
    }
    .s-inner01 ul li:nth-of-type(4) p br {display:none;}
    .s-inner01 ul li:nth-of-type(4) p:nth-of-type(1) {
        line-height:100%;
    }
    .s-inner01 ul li:nth-of-type(4) p:nth-of-type(2) {
        margin-top:10px;
    }
    .s-inner01 ul li p:nth-of-type(1) {
        font-size:20px; 
    }
    .s-inner01 ul li p + p {
        font-size:16px;
        margin-top:10px;
    }
    .s-inner02 ul {
        max-width:700px;
    }
    .s-inner02 ul li {
        height:340px;
        box-shadow: 9.55239px 9.55239px 38.2096px rgba(16, 15, 19, 0.1);
        background-size:100% 240px;
        padding:260px 0 0 28px;
    }
    .s-inner02 ul li p {
        font-size:20px; 
    }
    .s-inner02 ul li p + p {
        font-size:16px; 
        margin-top:12px;
    }
    .s-inner03 {
        padding:80px 0 100px;
    }
    .s-inner03 .circle3 {
        width:805px;
        top:-31px; left:-273px;
    }
    .s-inner03 .circle1 {
        width:1351px;
        top:-615px; left:-581px;
    }
    .s-inner03 .circle2 {
        width:1206px;
        top:-314px; right:-755px;
    }
    .s-inner03 > div > img {
        max-width:none;
        width:420px;
        margin-bottom:57px;
    }
    .s-inner03 .text,
    .s-inner04 .text {
        width:412px;
    }
    .s-inner03 .text h2,
    .s-inner04 .text h2 {
        font-size:36px;
    }
    .s-inner03 .text p,
    .s-inner04 .text p {
        font-size:16px;
        line-height:150%;
        margin:20px 0 40px;
        word-break:keep-all;
    }
    .s-inner03 .text a,
    .s-inner04 .text a {
        width:180px; height:52px;
        line-height:52px;
        font-size:16px;
    }
    .s-inner03 .text a img,
    .s-inner04 .text a img {
        width:26px;
        margin-left:7px;
        margin-bottom:3px;
    }
    .s-inner04 {
        padding:70px 0 104px;
    }
    .s-inner04 > div > img {
        max-width:none;
        width:420px;
        margin-bottom:0;
        transform:translateX(-24px);
    }

    /* footer */
    .footer-inner {
        width:700px; height:230px;
        padding-top:50px;
    }
    .footer-inner button {
        font-size:12px;
        width:40px; height:40px;
        top:45px;
    }
    .footer-inner .logo {
        width:154px;
        float:left;
    }
    .footer-inner .text {
        float:left;
        margin-top:5px;
        margin-left:84px;
        font-size:14px;
    }
    .footer-inner .text p:nth-of-type(1) {
        margin-bottom:10px;
    }
    .footer-inner .text p:nth-of-type(2) {
        margin:10px 0 15px;
    }
}
/* 가로 해상도 1024 이상 */
@media screen and (min-width:1024px){
    /* 최상단 배너 */
    .top-banner .banner-inner {
        width:686px; 
        height:60px;
    }
    .top-banner .banner-inner > img {
        top:4px;
        left:0;
    }
    .top-banner .banner-inner > p {
        letter-spacing:0;
        left:85px;
    }
    .top-banner .banner-inner a {
        font-size:14px;
        right:-25px;
    }
    .top-banner .banner-inner a img {
        width:14px;
        margin-bottom:4px;
    }
    .top-banner .banner-inner button {
        right:-81px;
    }

    /* header */
    header {display:none;}

    /* contents */
    .main-inner {
        padding-top:171px;
    }
    .main-inner .logo {
        display:block;
        position:absolute; top:30px; left:50%;
        width:940px;
        transform:translateX(-50%);
    }
    .main-inner .logo a {
        margin-left:16px;
        display:block;
        background:url(/images/logo.svg) no-repeat;
        background-size:contain;
        width:136px; height:30px;
        text-indent:-9999px;
    }
    .main-inner .login {
        top:216px; left:auto; right:35px;
        transform:translateX(0);
        width:280px; height:225px;
        box-shadow: 0px 3.3026px 8.25651px rgba(0, 0, 0, 0.1);
        border-radius:15px;
        padding:22px 15px;
        z-index: 1;
    }
    .main-inner .login h2 {
        font-size:14px;
        text-align:center;
    }
    .main-inner .login a {
        font-size:11px;
        top:192px; right:23px;
    }
    .main-inner .login a span + span::before {
        width:1px; height:8px;
        margin:0 4px;
    }
    .main-inner .login .input-inner {
        margin-top:10px;
        display: block;
    }
    .main-inner .login .input-inner input {
        width:100%; height:35px;
        padding:0 7px;
        font-size:11px;
    }
    .main-inner .login .input-inner input + input {
        margin:8px 0;
        width:100%;
    }
    .main-inner .login .input-inner button {
        width:100%; height:35px;
        font-size:11px;
    }
    .main-inner .text {
        height:324px;
        padding-top:0;
    }
    .main-inner .text > * {
        width:940px; 
    }
    .main-inner .text h3 {
        font-size:34px;
        letter-spacing: -0.01em;
        line-height:140%;
    }
    .main-inner .text h4 {
        font-size:16px;
        margin-top:22px;
    }
    .main-inner .bg01 {
        width:988px;
        top:-441px;
        transform:translateX(-82px);
    }
    .main-inner .bg02 {
        width:478px;
        top:74px;
        margin-left:0;
        transform:translateX(-11px);
    }

    .s-inner01,.s-inner02 {
        padding:50px 0;
    }
    .s-inner01 > div,
    .s-inner02 > div {
        width:940px;
    }
    .s-inner01 h2,
    .s-inner02 h2 {
        font-size:24px;
    }
    .s-inner01 h2 + p,
    .s-inner02 h2 + p {
        font-size:12px;
        margin-top:8px;
    }
    .s-inner01 h2 + p a,
    .s-inner02 h2 + p a {
        top:1px; 
        font-size:11px;
        padding-right:21px;
        background-size:17px;
    }
    .s-inner01 ul,
    .s-inner02 ul {
        margin-top:24px;
    }
    .s-inner01 ul li,
    .s-inner02 ul li {
        float:left;
        width:226px;
        border-radius:12px;
    }
    .s-inner01 ul li:nth-of-type(even),
    .s-inner02 ul li:nth-of-type(even) {
        margin-left:12px;
    }
    .s-inner01 ul li:nth-of-type(n + 2),
    .s-inner02 ul li:nth-of-type(n + 2) {
        margin-left:12px;
    }
    .s-inner01 ul li:nth-of-type(n + 3),
    .s-inner02 ul li:nth-of-type(n + 3) {
        margin-top:0;
    }
    .s-inner01 ul li {
        height:198px;
        background-size:100% auto;
        padding-top:145px;
    }
    .s-inner01 ul li:nth-of-type(4) {
        padding-top:145px;
    }
    .s-inner01 ul li:nth-of-type(4) p:nth-of-type(2) {
        margin-top:8px;
    }
    .s-inner01 ul li p:nth-of-type(1) {
        font-size:14px; 
    }
    .s-inner01 ul li p + p {
        font-size:11px;
        margin-top:8px;
    }
    .s-inner02 ul {
        max-width:940px;
    }
    .s-inner02 ul li {
        height:226px;
        box-shadow: 6.26667px 6.26667px 25.0667px rgba(16, 15, 19, 0.1);
        background-size:100% 160px;
        padding:176px 0 0 19px;
    }
    .s-inner02 ul li p {
        font-size:14px; 
    }
    .s-inner02 ul li p + p {
        font-size:11px; 
        margin-top:6px;
    }
    .s-inner03,.s-inner04 {
        padding:0;
        height:540px;
    }
    .s-inner03 .circle3 {
        width:829px;
        top:-171px; left:-108px;
    }
    .s-inner03 .circle1 {
        width:1391px;
        top:-772px; left:-426px;
    }
    .s-inner03 .circle2 {
        width:1242px;
        top:-463px; right:-716px;
    }
    .s-inner03 > div > img {
        max-width:none;
        width:420px;
        margin-bottom:0;
        position:absolute; top:73px; left:27px;
    }
    .s-inner03 > div,
    .s-inner04 > div {
        width:940px;
        margin:0 auto;
        position:relative;
    }
    .s-inner03 .text {
        position:absolute; top:190px; right:57px;
    }
    .s-inner03 .text,
    .s-inner04 .text {
        width:390px;
    }
    .s-inner03 .text h2,
    .s-inner04 .text h2 {
        font-size:24px;
    }
    .s-inner03 .text p,
    .s-inner04 .text p {
        font-size:14px;
        line-height:160%;
        margin:14px 0 34px;
    }
    .s-inner03 .text a,
    .s-inner04 .text a {
        width:140px; height:40px;
        line-height:40px;
        font-size:12px;
    }
    .s-inner03 .text a img,
    .s-inner04 .text a img {
        width:20px;
        margin-left:7px;
        margin-bottom:2px;
    }
    .s-inner04 {
        padding:0;
    }
    .s-inner04 > div > img {
        max-width:none;
        width:420px;
        margin-bottom:0;
        transform:translateX(0);
        position:absolute; top:79px; right:21px;
    }
    .s-inner04 .text {
        position:absolute; top:175px; left:36px;
    }

    /* footer */
    .footer-inner {
        width:940px; height:178px;
        padding-top:42px;
    }
    .footer-inner button {
        font-size:10px;
        width:34px; height:34px;
        top:42px;
    }
    .footer-inner .logo {
        width:120px;
    }
    .footer-inner .text {
        float:left;
        margin-top:4px;
        margin-left:175px;
        font-size:12px;
    }
    .footer-inner .text p:nth-of-type(1) {
        margin-bottom:8px;
    }
    .footer-inner .text p:nth-of-type(2) {
        margin:8px 0 10px;
    }
    
    /* 좌측메뉴 */
    .side-menu {
        display:block;
        width:auto; height:100%;
        position:absolute;
        background:none;
        z-index:10;
        top:0; left:0;
        transition:transform .5s ease-in-out, top .5s ease;
        transform:translateX(-100%);
    }
    .side-menu.on {transform:translateX(0);}
    .side-menu .on-off {display:none;}
    .side-menu .side-inner {
        box-shadow:none;
        border-top-right-radius:20px;
        float:left;
        width:70px; height:100%;
        padding-top:30px;
        animation:none;
    }
    .side-menu.on .side-inner {
        animation-name:none;
        box-shadow: 4px 4px 60px rgba(200, 200, 225, 0.4);
    }

    .side-menu .side-inner .logo {
        display:block;
        margin:0 auto;
        width:17px; height:20px;
        background:url(/images/side_bar_logo.svg) no-repeat;
        background-size:contain;
        text-indent:-9999px;
    }
    .side-menu .side-inner .close {
        display:none;
    }
    .side-menu .side-inner ul {
        margin-top:32px;
    }
    .side-menu .side-inner ul li {
        width:100%;
        margin:0 auto;
        padding-top:0;
        height:42px;
        line-height:16px;
    }
    .side-menu .side-inner ul li + li {
        margin-top:36px;
    }
    .side-menu .side-inner ul li a {
        display:block; width:100%; height:100%;
        padding-left:0;
        padding-top:7px;
        position:relative;
        text-align:center;
    }
    .side-menu .side-inner ul li span {
        font-size:11px; 
        color:#8379A0;
        vertical-align:middle;
        margin-left:0;
    }
    .side-menu .side-inner ul li i {
        display:block;
        margin:0 auto 3px;
        width:16px; height:16px;
    }
    .side-menu .side-inner ul li a.on::before {
        display:none;
    }
    .side-menu .side-inner ul li a:hover::after,
    .side-menu .side-inner ul li a.on::after {
        width:3px; height:3px;
        position:absolute; top:0; right:50%;
        transform:translateY(0) translateX(50%);
    }
    .side-menu .close-box {
        display:none;
    }
    .side-menu .on-off {
        width:40px; height:40px;
        display:block;
        position:absolute;
        top:25px; right:0;
        transform:translate(100%,0);
        border-radius:0 8px 8px 0;
        box-shadow:4px 6px 10px rgba(63, 37, 137, 0.2);
        padding:13px 11px;
        background:url(/images/side_bar_menu.svg) no-repeat;
        background-size:18px;
        background-position:50%;
        background-color:#864CFF;
        transition:background .5s ease;
    }
    .side-menu.on .on-off {
        background-image:url(/images/side_bar_close_w.svg);
    }
}
/* 가로 해상도 1280 이상 */
@media screen and (min-width:1280px){
    
    #wrap {padding-left:70px;}

    /* contents */
    .main-inner {
        padding-top:105px;
    }
    .main-inner .logo a {
        margin-left:0;
    }
    .main-inner .login {
        top:150px; right:20px;
    }
    .main-inner .bg01 {
        width:988px;
        top:-507px;
        transform:translateX(-75px);
    }
    .main-inner .bg02 {
        width:478px;
        top:8px;
        transform:translateX(-4px);
    }
    
    /* 좌측메뉴 */
    .side-menu {
        transform:translateX(0) !important;
    }
    .side-menu .on-off {display:none;}
    .side-menu .side-inner {
        box-shadow: 4px 4px 60px rgba(200, 200, 225, 0.4);
    }
}
/* 가로 해상도 1500 이상 */
@media screen and (min-width:1500px){
    
    #wrap {padding-left:100px;}
    
    /* 최상단 배너 */
    .top-banner .banner-inner {
        width:920px; 
        height:80px;
    }
    .top-banner .banner-inner > img {
        top:5px;
        left:0;
        width:116px;
    }
    .top-banner .banner-inner > p {
        font-size:24px;
        left:116px;
    }
    .top-banner .banner-inner a {
        font-size:18px;
        right:-27px;
        width:180px; height:45px;
        line-height:45px;
    }
    .top-banner .banner-inner a span {
        vertical-align:top;
        margin:0;
    }
    .top-banner .banner-inner a img {
        width:20px;
        margin-bottom:6px;
        margin-left:8px;
    }
    .top-banner .banner-inner button {
        right:-100px;
        width:21px; height:21px;
    }

    /* header */
    header {display:none;}

    /* contents */
    .main-inner {
        padding-top:160px;
    }
    .main-inner .logo {
        top:22px;
        width:1180px;
    }
    .main-inner .logo a {
        margin-left:0;
        width:167px; height:36px;
    }
    .main-inner .login {
        top:120px; right:20px;
        width:360px; height:260px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius:20px;
        padding:24px 20px;
        z-index: 1;
    }
    .main-inner .login h2 {
        font-size:18px;
    }
    .main-inner .login a {
        font-size:12px;
        top:224px; right:30px;
    }
    .main-inner .login a span + span::before {
        width:1px; height:8px;
        margin:0 6px;
    }
    .main-inner .login .input-inner {
        margin-top:18px;
    }
    .main-inner .login .input-inner input {
        width:100%; height:40px;
        padding:0 10px;
        font-size:12px;
    }
    .main-inner .login .input-inner input + input {
        margin:10px 0 15px;
        width:100%;
    }
    .main-inner .login .input-inner button {
        width:100%; height:40px;
        font-size:13px;
    }
    .main-inner .text {
        height:500px;
        padding-top:8px;
    }
    .main-inner .text > * {
        width:1180px; 
    }
    .main-inner .text h3 {
        font-size:42px;
        letter-spacing: -0.01em;
        line-height:140%;
    }
    .main-inner .text h4 {
        font-size:18px;
        margin-top:25px;
    }
    .main-inner .bg01 {
        width:1445px;
        top:-749px;
        transform:translateX(-121px);
    }
    .main-inner .bg02 {
        width:644px;
        top:10px;
        transform:translateX(-12px);
    }

    .s-inner01,.s-inner02 {
        padding:60px 0 52px;
    }
    .s-inner01 > div,
    .s-inner02 > div {
        width:1180px;
    }
    .s-inner01 h2,
    .s-inner02 h2 {
        font-size:34px;
    }
    .s-inner01 h2 + p,
    .s-inner02 h2 + p {
        font-size:14px;
        margin-top:16px;
    }
    .s-inner01 h2 + p a,
    .s-inner02 h2 + p a {
        top:1px; 
        font-size:13px;
        padding-right:28px;
        background-size:20px;
    }
    .s-inner01 ul,
    .s-inner02 ul {
        margin-top:30px;
    }
    .s-inner01 ul li,
    .s-inner02 ul li {
        float:left;
        width:280px;
        border-radius:15px;
    }
    .s-inner01 ul li:nth-of-type(even),
    .s-inner02 ul li:nth-of-type(even) {
        margin-left:20px;
    }
    .s-inner01 ul li:nth-of-type(n + 2),
    .s-inner02 ul li:nth-of-type(n + 2) {
        margin-left:20px;
    }
    .s-inner01 ul li:nth-of-type(n + 3),
    .s-inner02 ul li:nth-of-type(n + 3) {
        margin-top:0;
    }
    .s-inner01 ul li {
        height:246px;
        padding-top:180px;
    }
    .s-inner01 ul li:nth-of-type(4) {
        padding-top:180px;
    }
    .s-inner01 ul li:nth-of-type(4) p:nth-of-type(2) {
        margin-top:8px;
    }
    .s-inner01 ul li p:nth-of-type(1) {
        font-size:16px; 
    }
    .s-inner01 ul li p + p {
        font-size:13px;
        margin-top:8px;
    }
    .s-inner02 ul {
        max-width:1180px;
    }
    .s-inner02 ul li {
        height:280px;
        box-shadow: 7.86668px 7.86668px 31.4667px rgba(16, 15, 19, 0.1);
        background-size:100% 198px;
        padding:214px 0 0 24px;
    }
    .s-inner02 ul li p {
        font-size:16px; 
    }
    .s-inner02 ul li p + p {
        font-size:12px; 
        margin-top:6px;
    }
    .s-inner03,.s-inner04 {
        padding:0;
        height:630px;
    }
    .s-inner03 .circle3 {
        width:1276px;
        top:-513px; left:-162px;
    }
    .s-inner03 .circle1 {
        width:2141px;
        top:-1438px; left:-650px;
    }
    .s-inner03 .circle2 {
        width:1911px;
        top:-962px; right:-1148px;
    }
    .s-inner03 > div > img {
        width:450px;
        position:absolute; top:90px; left:90px;
    }
    .s-inner03 > div,
    .s-inner04 > div {
        width:1180px;
    }
    .s-inner03 .text {
        position:absolute; top:217px; right:78px;
    }
    .s-inner03 .text,
    .s-inner04 .text {
        width:452px;
    }
    .s-inner03 .text h2,
    .s-inner04 .text h2 {
        font-size:36px;
    }
    .s-inner03 .text p,
    .s-inner04 .text p {
        font-size:16px;
        line-height:150%;
        margin:16px 0 42px;
    }
    .s-inner03 .text a,
    .s-inner04 .text a {
        width:180px; height:52px;
        line-height:52px;
        font-size:16px;
    }
    .s-inner03 .text a img,
    .s-inner04 .text a img {
        width:26px;
        margin-left:7px;
        margin-bottom:4px;
    }
    .s-inner04 {
        padding:0;
    }
    .s-inner04 > div > img {
        width:500px;
        top:65px; right:50px;
    }
    .s-inner04 .text {
        position:absolute; top:212px; left:130px;
    }

    /* footer */
    .footer-inner {
        width:1180px; height:230px;
        padding-top:42px;
    }
    .footer-inner button {
        font-size:12px;
        width:40px; height:40px;
        top:42px;
    }
    .footer-inner .logo {
        width:154px;
    }
    .footer-inner .text {
        margin-top:8px;
        margin-left:211px;
        font-size:14px;
    }
    .footer-inner .text p:nth-of-type(1) {
        margin-bottom:10px;
    }
    .footer-inner .text p:nth-of-type(2) {
        margin:10px 0 11px;
    }
    
    /* 좌측메뉴 */
    .side-menu .on-off {display:none;}
    .side-menu .side-inner {
        width:100px; 
        padding-top:44px;
    }

    .side-menu .side-inner .logo {
        width:26px; height:30px;
    }
    .side-menu .side-inner ul {
        margin-top:46px;
    }
    .side-menu .side-inner ul li {
        width:100%;
        height:62px;
        line-height:23px;
    }
    .side-menu .side-inner ul li + li {
        margin-top:50px;
    }
    .side-menu .side-inner ul li a {
        padding-top:11px;
    }
    .side-menu .side-inner ul li span {
        font-size:16px; 
    }
    .side-menu .side-inner ul li i {
        margin:0 auto 4px;
        width:24px; height:24px;
    }
    .side-menu .side-inner ul li a:hover::after,
    .side-menu .side-inner ul li a.on::after {
        width:5px; height:5px;
    }
    
}
/* 가로 해상도 1920 이상 */
@media screen and (min-width:1920px){

    /* contents */
    .main-inner .logo {
        top:42px;
        width:1500px;
    }
    .main-inner .login {
        top:130px; right:125px;
        width:400px; height:320px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius:20px;
        padding:24px 20px;
        z-index: 1;
    }
    .main-inner .login h2 {
        font-size:25px;
    }
    .main-inner .login a {
        top:280px;
        font-size: 14px;
    }
    .main-inner .login a span + span::before {
        width:1px; height:8px;
        margin:0 6px;
    }
    .main-inner .login .input-inner {
        margin-top:26px;
    }
    .main-inner .login .input-inner input {
        width:100%; height:50px;
        padding:0 10px;
        font-size:15px;
    }
    .main-inner .login .input-inner input + input {
        margin:15px 0 15px;
    }
    .main-inner .login .input-inner button {
        height:50px;
        font-size: 15px;
    }
    .main-inner .text {
        height:582px;
        padding-top:0;
    }
    .main-inner .text > * {
        width:1500px; 
    }
    .main-inner .text h3 {
        font-size:48px;
    }
    .main-inner .text h4 {
        font-size:22px;
        margin-top:32px;
    }
    .main-inner .bg01 {
        width:1696px;
        top:-876px;
        transform:translateX(-294px);
    }
    .main-inner .bg02 {
        width:820px;
        top:8px;
        transform:translateX(-172px);
    }

    .s-inner01,.s-inner02 {
        padding:60px 0;
    }
    .s-inner01 > div,
    .s-inner02 > div {
        width:1500px;
    }
    .s-inner01 h2,
    .s-inner02 h2 {
        font-size:36px;
    }
    .s-inner01 h2 + p,
    .s-inner02 h2 + p {
        font-size:16px;
        margin-top:8px;
    }
    .s-inner01 h2 + p a,
    .s-inner02 h2 + p a {
        top:0; 
        font-size:16px;
        padding-right:34px;
        background-size:25px;
    }
    .s-inner01 ul,
    .s-inner02 ul {
        margin-top:36px;
    }
    .s-inner01 ul li,
    .s-inner02 ul li {
        width:360px;
        border-radius:20px;
    }
    .s-inner01 ul li {
        height:316px;
        padding-top:231px;
    }
    .s-inner01 ul li:nth-of-type(4) {
        padding-top:231px;
    }
    .s-inner01 ul li:nth-of-type(4) p:nth-of-type(2) {
        margin-top:10px;
    }
    .s-inner01 ul li p:nth-of-type(1) {
        font-size:18px; 
    }
    .s-inner01 ul li p + p {
        font-size:16px;
        margin-top:10px;
    }
    .s-inner02 ul {
        max-width:1500px;
    }
    .s-inner02 ul li {
        height:360px;
        box-shadow: 10px 10px 40px rgba(16, 15, 19, 0.1);
        background-size:100% 255px;
        padding:275px 0 0 30px;
    }
    .s-inner02 ul li p {
        font-size:18px; 
    }
    .s-inner02 ul li p + p {
        font-size:16px; 
        margin-top:12px;
    }
    .s-inner03,.s-inner04 {
        padding:0;
        height:740px;
    }
    .s-inner03 .circle3 {
        width:1276px;
        top:-514px; left:-52px;
    }
    .s-inner03 .circle1 {
        width:2141px;
        top:-1439px; left:-540px;
    }
    .s-inner03 .circle2 {
        width:1911px;
        top:-963px; right:-974px;
    }
    .s-inner03 > div > img {
        width:500px;
        position:absolute; top:122px; left:63px;
    }
    .s-inner03 > div,
    .s-inner04 > div {
        width:1500px;
    }
    .s-inner03 .text {
        position:absolute; top:270px; right:240px;
    }
    .s-inner03 .text p,
    .s-inner04 .text p {
        margin:15px 0 52px;
    }
    .s-inner04 > div > img {
        width:500px;
        top:135px; right:224px;
    }
    .s-inner04 .text {
        position:absolute; top:268px; left:293px;
    }

    /* footer */
    .footer-inner {
        width:1500px; 
        padding-top:42px;
	}
    .footer-inner .text {
        margin-left:371px;
    }
    
}


/* IE 10 이상 css 적용 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .main-inner .text h4 {
        font-family:'NotoSansKR','CenturyGothic';
    }
    .footer-inner {
        font-family:'NotoSansKR','CenturyGothic';
    }
}

/* parallax */
.move {
    transform:translate(0,0) !important;
    opacity:1 !important;
}
.moveX {
    transform:translate(-50%,0) !important;
    opacity:1 !important;
}
.moveY {
    transform:translate(0,-50%) !important;
    opacity:1 !important;
}
.moveO {
    opacity:1 !important;
}
.parallax-right {
    transition:all 1s ease;
    transform:translate(100px,0);
    opacity:0;
}
.parallax-right-top {
    transition:all 1s ease;
    transform:translate(100%,-100%);
    opacity:0;
}
.parallax-left {
    transition:all 1s ease;
    transform:translate(-100px,0);
    opacity:0;
}
.parallax-bottom {
    transition:all 1s ease;
    transform:translate(0,100px);
    opacity:0;
}
.parallax-opacity {
    transition:all 1s ease;
    opacity:0;
}
.delay01 {
    transition-delay:.1s;
}
.delay03 {
    transition-delay:.3s;
}
.delay05 {
    transition-delay:.5s;
}
.delay07 {
    transition-delay:.7s;
}
.delay10 {
    transition-delay:1s;
}