@charset "utf-8";

@font-face {font-family:"Roboto";font-style:normal;font-weight:300;src:url(../../inc/fonts/Roboto-Regular.woff) format("woff");font-display:swap;}
@font-face {font-family:"Roboto";font-style:normal;font-weight:900;src:url(../../inc/fonts/Roboto-Bold.woff) format("woff");font-display:swap;}

/* Reset */
html,
body {
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: #000;
    -webkit-text-size-adjust: none;
}

body,
div,
form,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
ul,
ol,
li,
em,
p,
span,
textarea,
pre,
label,
fieldset,
th,
td,
button,
a,
input,
select,
hr,
figure {
    margin: 0;
    padding: 0;
    font-family: ns, Arial, sans-serif;
    word-break: break-all;
    vertical-align: top;
}

/*common*/

.non-kor {
    font-family: roboto;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 700;
}

.clr-primary {
    color: #000;
}

.mo_only {
    display: none;
}

#wrap {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

#wrap[data-page-id="378"] {
    position: relative;
}
#wrap[data-page-id="378"]:before {
    content: "";
    width: 21.198vw;
    height: 21.198vw;
    display: block;
    position: absolute;
    top: 90.729vw;
    left: -10.573vw;
    background: url(./images/circle_01.png) 0 0 no-repeat;
    background-size: 100% auto;
}
#wrap[data-page-id="378"]:after {
    content: "";
    width: 30.313vw;
    height: 30.313vw;
    display: block;
    position: absolute;
    top: 239.063vw;
    right: -15.156vw;
    background: url(./images/circle_02.png) 0 0 no-repeat;
    background-size: 100% auto;
}

.inner {
    width: 70.313vw;
    margin: 0 auto;
}

#container {
    overflow: hidden;
}

.visual {
    width: 100%;
    height: 44.271vw;
    position: relative;
}

.visual .bg {
    width: 100%;
    min-width: 1920px;
    height: 37.188vw;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
    overflow: hidden;
}

.visual .bg img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.visual .inner {
    height: 100%;
    padding: 7.083vw 0;
    box-sizing: border-box;
    position: relative;
}

.visual .logo {
    width: 14.792vw;
    height: 2.396vw;
    background: url(./images/logo.png) 0 0 no-repeat;
    background-size: 100% auto;
    text-indent: -9999px;
    overflow: hidden;
    transform: translateY(15px);
    opacity: 0;
}

.visual .tit {
    margin-top: 0.521vw;
    font-size: 2.604vw;
    font-weight: 500;
    color: #fff;
    line-height: 1.22;
    transform: translateY(15px);
    opacity: 0;
}

.visual .txt {
    margin-top: 2.083vw;
    font-size: 0.938vw;
    font-weight: 300;
    color: #fff;
    line-height: 1.77;
    transform: translateY(15px);
    opacity: 0;
}
.visual .display_wrap {
    position: absolute;
    bottom: 2.969vw;
    right: 0;
    font-size: 0;
}

.visual .display_wrap .display {
    display: inline-block;
    border-radius: 0.26vw;
    box-shadow: 0 0 1.042vw 0 rgba(0, 0, 0, 0.3);
    vertical-align: bottom;
    transform: translateY(15px);
    opacity: 0;
}

.visual .display_wrap .pc {
    width: 32.604vw;
    height: 18.021vw;
    background: url(./images/pc_display.png) 0 0 no-repeat;
    background-size: 100% auto;
}

.visual .display_wrap .mob {
    width: 12.292vw;
    height: 27.813vw;
    margin-left: -4.323vw;
    background: url(./images/mo_display.png) 0 0 no-repeat;
    background-size: 100% auto;
}

.section .inner {
    padding: 1.563vw 0 0;
    box-sizing: border-box;
}

.section .dotted {
    display: inline-block;
    position: relative;
    font-size: 1.667vw;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.section .dotted:after {
    content: "";
    width: 0.521vw;
    height: 0.521vw;
    display: block;
    position: absolute;
    right: -0.885vw;
    bottom: 0.26vw;
    background-color: #fe6b00;
    border-radius: 50%;
}

.section .dotted + p {
    margin-top: 3.125vw;
    font-size: 1.302vw;
    color: #3e3e3e;
    line-height: 1.6;
}

.section-ux .inner {
    padding-bottom: 7.448vw;
}

.section-ux li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transform: translateX(-35%);
    opacity: 0;
}

.section-ux li + li {
    margin-top: -2.083vw;
}

.section-ux li:nth-child(1) {
    z-index: 3;
}

.section-ux li:nth-child(2) {
    z-index: 2;
}

.section-ux li:nth-child(3) {
    z-index: 1;
}

.section-ux li > p {
    font-size: 1.302vw;
    font-weight: 300;
    color: #888;
    line-height: 1.6;
}
.section-ux li .arrow {
    width: 21.51vw;
    height: 0.573vw;
}

.section-ux li .arrow img {
    width: 100%;
}

.section-ux li .circle {
    width: 16.146vw;
    height: 16.146vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.573vw solid #fff;
    border-radius: 100%;
    background-color: #131b8b;
}

.section-ux li .circle > p {
    font-size: 1.302vw;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}

.section-concept .inner {
    padding-bottom: 13.333vw;
}

.section-concept .concept {
    display: block;
    margin-top: 10.625vw;
    font-family: "Roboto";
    font-size: 3.906vw;
    font-weight: 300;
    color: #131b8b;
    text-align: center;
    opacity: 0;
}

.section-concept .line {
    width: 100%;
    height: 0.156vw;
    display: block;
    margin-top: 3.646vw;
    background-color: #131b8b;
    transform-origin: 50% 50%;
    transform: scaleX(0);
}

.section-concept .description {
    margin-top: 3.333vw;
    font-size: 1.302vw;
    color: #3e3e3e;
    text-align: center;
    line-height: 1.6;
    opacity: 0;
}

.section-design .inner {
    padding-bottom: 11.51vw;
}

.section-design .elements {
    display: flex;
    justify-content: space-between;
    margin-top: 3.49vw;
}

.section-design .icons {
    width: calc(100% - 7.813vw);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* margin-right: -5.208vw; */
}

.section-design .icons .ico {
    margin-right: 5.208vw;
    transform: translateY(15px);
    opacity: 0;
}

.section-design .icons .ico > img {
    width: 6.25vw;
    height: 6.25vw;
}

.section-design .icons .ico:nth-child(1) > img {
    width: 12.5vw;
    height: 12.5vw;
}

.section-design .icons .ico:nth-child(5) {
    margin-left: 6.25vw;
}

.section-design .icons .ico p {
    margin-top: 1.615vw;
    font-size: 0.781vw;
    color: #666;
    text-align: center;
    line-height: 2.4;
    white-space: nowrap;
}

.section-design .colors {
    width: 15.625vw;
    display: flex;
    flex-wrap: wrap;
    transform: translateY(50px);
    opacity: 0;
}

.section-design .colors .main,
.section-design .colors .sub {
    padding: 0.833vw 1.042vw;
    box-sizing: border-box;
}

.section-design .colors .main > p,
.section-design .colors .sub > p {
    font-size: 0.781vw;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.section-design .colors .main {
    width: 100%;
    height: 28.958vw;
    background-color: #21277d;
}

.section-design .colors .main > p {
    color: #fff;
}

.section-design .colors .sub {
    width: 50%;
    height: 7.292vw;
}

.section-design .colors .sub > p {
    color: #666;
}

.section-design .colors .sub-01 {
    background-color: #e3e4ec;
}

.section-design .colors .sub-02 {
    background-color: #f5f7f9;
}
.section-type {
    position: relative;
    z-index: 1;
}
.section-type .program-types {
    display: flex;
    justify-content: space-between;
    margin-top: 5.208vw;
}

.section-type .program-types .label {
    display: block;
    font-family: "Roboto";
    font-size: 1.042vw;
    font-weight: 900;
    color: #1a1a1a;
}

.section-type .program-types img {
    width: 100%;
    display: block;
    margin-top: 1.25vw;
}

.section-type .program-types .type {
    width: 32.396vw;
    height: 41.667vw;
}

.section-type .program-types .type01 .label {
    text-align: right;
}

.section-type .program-types .type01 {
    margin-left: -2.292vw;
    transform: translateX(-55px);
    opacity: 0;
}

.section-type .program-types .type02 .label {
    text-align: center;
}

.section-type .program-types .type02 {
    opacity: 0;
}

.section-type .program-types .type03 .label {
    text-align: left;
}

.section-type .program-types .type03 {
    margin-right: -2.188vw;
    transform: translateX(55px);
    opacity: 0;
}

.section-page {
    margin-top: -7.76vw;
    padding-top: 18.021vw;
    box-sizing: border-box;
    background-color: #000;
}

.section-page .dotted {
    color: #fff;
}

.section-page .page_wrap {
    width: 84.896vw;
    height: 37.865vw;
    margin: 5.833vw auto 7.917vw;
    position: relative;
}

.section-page .page_wrap .page {
    width: 14.479vw;
    height: 27.5vw;
    position: absolute;
    transform: translateY(20%);
    opacity: 0;
}

.section-page .page_wrap .page img {
    width: 100%;
}

.section-page .page_wrap .page01 {
    bottom: 0;
    left: 0;
}

.section-page .page_wrap .page02 {
    top: 0;
    left: 17.708vw;
}

.section-page .page_wrap .page03 {
    bottom: 2.917vw;
    left: 35.417vw;
}

.section-page .page_wrap .page04 {
    top: 0;
    left: 53.125vw;
}

.section-page .page_wrap .page05 {
    bottom: 4.01vw;
    right: 0;
}

.section-page .detail_wrap {
    padding-top: 0;
    position: relative;
    text-align: center;
}

.section-page .detail_wrap img {
    width: 100%;
}

.section-page .detail_wrap .img_detail {
    width: 53.646vw;
    margin: 0 auto;
    transform: translateY(150px);
    opacity: 0;
}

.section-page .detail_wrap .detail {
    width: 35.208vw;
    height: 21.927vw;
    position: absolute;
    transform: translateX(45%);
    opacity: 0;
}

.section-page .detail_wrap .detail01 {
    top: 38.958vw;
    right: 0;
}

.section-page .detail_wrap .detail02 {
    top: 78.281vw;
    left: 0;
    transform: translateX(-45%);
}

.section-page .detail_wrap .detail03 {
    top: 117.656vw;
    right: 0;
}

.section-page .detail_wrap .detail04 {
    top: 156.979vw;
    left: 0;
    transform: translateX(-45%);
}

.section-page .detail_wrap .detail05 {
    top: 196.302vw;
    right: 0;
}

@media screen and (max-width: 760px) {
    img {
        width: 100%;
    }

    #wrap[data-page-id="378"]:before {
        width: 53.553vw;
        height: 53.553vw;
        top: 212.368vw;
        left: -26.711vw;
    }
    #wrap[data-page-id="378"]:after {
        width: 76.579vw;
        height: 76.579vw;
        top: 504.079vw;
        right: -38.289vw;
    }

    .inner {
        width: auto;
    }

    .visual {
        height: 112.237vw;
    }

    .visual .bg {
        height: 93.947vw;
    }

    .visual .inner {
        padding: 18.026vw 5.132vw 0 5.921vw;
    }

    .visual .logo {
        width: 37.368vw;
        height: 6.053vw;
    }

    .visual .tit {
        margin-top: 1.447vw;
        font-size: 6.579vw;
        white-space: nowrap;
    }

    .visual .txt {
        margin-top: 5.789vw;
        font-size: 1.974vw;
        line-height: 2;
    }
    .visual .display_wrap {
        bottom: 2.969vw;
        right: 5.921vw;
    }

    .visual .display_wrap .display {
        border-radius: 0.658vw;
        box-shadow: 0 0 2.632vw 0 rgba(0, 0, 0, 0.3);
    }

    .visual .display_wrap .pc {
        width: 56.316vw;
        height: 31.184vw;
    }

    .visual .display_wrap .mob {
        width: 21.316vw;
        height: 48.026vw;
        margin-left: -8.158vw;
    }

    .section .inner {
        padding: 3.947vw 5.921vw 0;
    }

    .section .dotted {
        font-size: 4.211vw;
    }

    .section .dotted:after {
        width: 1.316vw;
        height: 1.316vw;
        right: -2.237vw;
        bottom: 0.658vw;
    }

    .section .dotted + p {
        margin-top: 7.895vw;
        font-size: 2.237vw;
    }

    .section-ux .inner {
        padding-bottom: 20.789vw;
    }

    .section-ux li + li {
        margin-top: -4.737vw;
    }

    .section-ux li > p {
        font-size: 2.237vw;
        line-height: 1.41;
    }
    .section-ux li .arrow {
        width: 14.737vw;
        height: 1.316vw;
    }

    .section-ux li .circle {
        width: 28.816vw;
        height: 28.816vw;
        border: 1.447vw solid #fff;
    }

    .section-ux li .circle > p {
        font-size: 2.237vw;
    }

    .section-concept .inner {
        padding-bottom: 22.237vw;
    }

    .section-concept .concept {
        margin-top: 19.868vw;
        font-size: 7.895vw;
    }

    .section-concept .line {
        height: 0.395vw;
        margin-top: 9.079vw;
    }

    .section-concept .description {
        margin-top: 9.605vw;
        font-size: 2.237vw;
    }

    .section-design .inner {
        padding-bottom: 18.684vw;
    }

    .section-design .elements {
        flex-direction: column;
        margin-top: 8.776vw;
    }

    .section-design .icons {
        width: 100%;
        justify-content: flex-start;
        margin-right: -7.237vw;
        margin-bottom: -9.211vw;
    }

    .section-design .icons .ico {
        margin-right: 7.237vw;
        margin-bottom: 9.211vw;
    }

    .section-design .icons .ico > img {
        width: 11.842vw;
        height: 11.842vw;
    }

    .section-design .icons .ico:nth-child(1) > img {
        width: 23.684vw;
        height: 23.684vw;
        /* margin-right: 0; */
    }

    .section-design .icons .ico:nth-child(5) {
        margin-left: 7.237vw;
    }

    .section-design .icons .ico p {
        margin-top: 2.671vw;
        font-size: 1.711vw;
    }

    .section-design .colors {
        width: 100%;
        flex-wrap: nowrap;
        margin-top: 10.526vw;
    }

    .section-design .colors .main,
    .section-design .colors .sub {
        padding: 2.368vw 2.632vw;
    }

    .section-design .colors .main > p,
    .section-design .colors .sub > p {
        font-size: 1.711vw;
    }

    .section-design .colors .main {
        width: 48.684vw;
        height: 18.421vw;
    }

    .section-design .colors .sub {
        width: 19.737vw;
        height: 18.421vw;
    }

    .section-type .program-types {
        margin-top: 16.842vw;
    }

    .section-type .program-types .label {
        font-size: 2.632vw;
    }

    .section-type .program-types img {
        margin-top: 3.816vw;
    }

    .section-type .program-types .type {
        width: 29.342vw;
        height: 43.289vw;
    }

    .section-type .program-types .type01 {
        margin-left: -4.211vw;
    }

    .section-type .program-types .type03 {
        margin-right: -4.211vw;
    }

    .section-page {
        margin-top: -10.395vw;
        padding-top: 41.053vw;
    }

    .section-page .page_wrap {
        width: 100%;
        height: 153.553vw;
        margin: 10.395vw auto 19.737vw;
    }

    .section-page .page_wrap .page {
        width: 28.355vw;
        height: 55.382vw;
    }

    .section-page .page_wrap .page01 {
        bottom: auto;
        top: 20.895vw;
    }

    .section-page .page_wrap .page02 {
        left: 35.737vw;
    }

    .section-page .page_wrap .page03 {
        bottom: auto;
        top: 15.013vw;
        left: auto;
        right: 0;
    }

    .section-page .page_wrap .page04 {
        top: 85.263vw;
        left: 17.908vw;
    }

    .section-page .page_wrap .page05 {
        bottom: auto;
        top: 98.171vw;
        right: 18.026vw;
    }

    .section-page .detail_wrap {
        padding: 0;
    }

    .section-page .detail_wrap .img_detail {
        width: 63.684vw;
    }

    .section-page .detail_wrap .detail {
        width: 62.368vw;
        height: 38.816vw;
        position: absolute;
    }

    .section-page .detail_wrap .detail01 {
        top: 44.605vw;
        right: 0;
    }

    .section-page .detail_wrap .detail02 {
        top: 90vw;
        left: 0;
    }

    .section-page .detail_wrap .detail03 {
        top: 135.395vw;
        right: 0;
    }

    .section-page .detail_wrap .detail04 {
        top: 180.921vw;
        left: 0;
    }

    .section-page .detail_wrap .detail05 {
        top: 226.316vw;
        right: 0;
    }
}
@media screen and (max-width: 360px) {
    .mo_only {
        display: block;
    }

    #wrap[data-page-id="378"]:before {
        content: none;
    }
    #wrap[data-page-id="378"]:after {
        content: none;
    }

    .visual {
        height: 200vw;
    }

    .visual .bg {
        height: 173.056vw;
    }

    .visual .inner {
        padding: 34.167vw 6.944vw 0 6.944vw;
    }

    .visual .logo {
        width: 54.167vw;
        height: 8.611vw;
    }

    .visual .tit {
        margin-top: 2.167vw;
        font-size: 9.167vw;
        word-break: keep-all;
        white-space: normal;
    }

    .visual .txt {
        margin-top: 11.944vw;
        font-size: 3.611vw;
        line-height: 1.62;
        word-break: keep-all;
    }
    .visual .display_wrap {
        bottom: 18.056vw;
        right: 6.944vw;
    }

    .visual .display_wrap .display {
        border-radius: 1.389vw;
        box-shadow: 0 0 5.556vw 0 rgba(0, 0, 0, 0.3);
    }

    .visual .display_wrap .pc {
        width: 69.722vw;
        height: 38.611vw;
    }

    .visual .display_wrap .mob {
        width: 26.389vw;
        height: 59.444vw;
        margin-left: -10vw;
    }

    .section .inner {
        padding: 22.222vw 6.944vw 0;
    }

    .section .dotted {
        font-size: 5.833vw;
    }

    .section .dotted:after {
        width: 1.944vw;
        height: 1.944vw;
        right: -3.472vw;
        bottom: 1.389vw;
    }

    .section .dotted + p {
        margin-top: 17.5vw;
        font-size: 4.722vw;
    }

    .section-ux .inner {
        padding-bottom: 18.611vw;
    }

    .section-ux ul {
        margin-top: 15.278vw;
    }

    .section-ux li {
        flex-wrap: wrap;
    }

    .section-ux li + li {
        margin-top: 14.722vw;
    }

    .section-ux li > p {
        width: 100%;
        font-size: 4.722vw;
    }
    .section-ux li .arrow {
        width: 31.111vw;
        height: 2.778vw;
    }

    .section-ux li .circle {
        width: 46.944vw;
        height: 46.944vw;
        margin-top: 4.167vw;
        border: 3.056vw solid #fff;
    }

    .section-ux li .circle > p {
        font-size: 4.722vw;
    }

    .section-concept .inner {
        padding-bottom: 21.944vw;
    }

    .section-concept .concept {
        margin-top: 34.722vw;
        font-size: 12.5vw;
    }

    .section-concept .line {
        height: 0.395vw;
        margin-top: 9.079vw;
    }

    .section-concept .description {
        margin-top: 9.605vw;
        font-size: 2.237vw;
    }

    .section-design .inner {
        padding-bottom: 18.684vw;
    }

    .section-design .elements {
        flex-direction: column;
        margin-top: 8.776vw;
    }

    .section-design .icons {
        width: 100%;
        justify-content: space-between;
        margin-right: -8.333vw;
        margin-bottom: -6.944vw;
    }

    .section-design .icons .ico {
        margin-right: 8.333vw;
        margin-bottom: 6.944vw;
    }

    .section-design .icons .ico > img {
        width: 18.333vw;
        height: 18.611vw;
    }

    .section-design .icons .ico:first-child {
        margin-right: 4.197vw;
    }

    .section-design .icons .ico:first-child > img {
        width: 36.667vw;
        height: 36.944vw;
    }

    .section-design .icons .ico:nth-child(5) {
        margin-left: 0;
        /* margin-right: 10vw; */
    }

    .section-design .icons .ico p {
        margin-top: 3.056vw;
        font-size: 2.222vw;
        line-height: 1;
    }

    .section-design .colors {
        width: 100%;
        flex-wrap: nowrap;
        margin-top: 14.167vw;
    }

    .section-design .colors .main,
    .section-design .colors .sub {
        padding: 2.5vw;
    }

    .section-design .colors .main > p,
    .section-design .colors .sub > p {
        font-size: 2.778vw;
    }

    .section-design .colors .main {
        width: 43.333vw;
        height: 38.889vw;
    }

    .section-design .colors .sub {
        width: 21.389vw;
        height: 38.889vw;
    }

    .section-type .program-types {
        flex-wrap: wrap;
        margin-top: 13.889vw;
    }

    .section-type .program-types .label {
        font-size: 4.722vw;
    }

    .section-type .program-types img {
        margin-top: 9.806vw;
    }

    .section-type .program-types .type {
        width: 83.333vw;
        height: auto;
        margin: 0 auto;
    }

    .section-type .program-types .type + .type {
        margin-top: 16.667vw;
    }

    .section-type .program-types .type01 .label {
        text-align: center;
    }

    .section-type .program-types .type03 .label {
        text-align: center;
    }

    .section-page {
        margin-top: 16.667vw;
        padding-top: 0;
    }

    .section-page .inner {
        padding-top: 13.889vw;
    }

    .section-page .page_wrap {
        height: 153.889vw;
        margin: 13.889vw auto 29.722vw;
    }

    .section-page .page_wrap .page {
        width: 28.611vw;
        height: 55.556vw;
    }

    .section-page .page_wrap .page01 {
        bottom: auto;
        top: 20.944vw;
    }

    .section-page .page_wrap .page02 {
        left: 35.833vw;
    }

    .section-page .page_wrap .page03 {
        top: 15vw;
    }

    .section-page .page_wrap .page04 {
        top: 85.278vw;
        left: 18.056vw;
    }

    .section-page .page_wrap .page05 {
        bottom: auto;
        top: 98.333vw;
        right: 18.056vw;
    }

    .section-page .detail_wrap {
        padding-top: 0;
    }

    .section-page .detail_wrap .img_detail {
        width: 70.833vw;
    }

    .section-page .detail_wrap .detail {
        width: 70.833vw;
        height: 44.167vw;
    }

    .section-page .detail_wrap .detail01 {
        top: 50.556vw;
    }

    .section-page .detail_wrap .detail02 {
        top: 102.222vw;
    }

    .section-page .detail_wrap .detail03 {
        top: 153.611vw;
    }

    .section-page .detail_wrap .detail04 {
        top: 205.278vw;
    }

    .section-page .detail_wrap .detail05 {
        top: 256.667vw;
    }
}