@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* Reset Styles */
* { margin: 0; padding: 0; font: inherit; color: inherit; }
*, :after, :before { box-sizing: border-box; flex-shrink: 0; }
:root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; -moz-tab-size: 4; tab-size: 4; }
html, body { height: 100%; line-height: 1; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -0.025em; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
video { box-sizing: border-box; }
input { box-sizing: border-box; background: transparent; }
button { background: none; border: 0; cursor: pointer; box-sizing: border-box; background: transparent; }
a { text-decoration: none; transition: 0.3s; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol, li { list-style: none; }
pre { white-space: pre-wrap; }

input[type=text], input[type=number], input[type=email], button, textarea, select, input[type=button], input[type=submit], input[type=reset] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
select { background: transparent url("./img/sel_arrow.svg") no-repeat calc(100% - 1.18rem) 50%; }
input, input:focus { outline: none; }

/* CSS Variables */
:root {
    --flex-separation-color: #a2ed28;
    --flex-btn-bg01: #2c2c2c;
    --flex-btn-bg02: #3a3a3a;
    --flex-f-p-color: #9a9a9a;
    --flex-f-h-color: #a3c958;
    --flex-f-w-color: #dedede;
    --flex-line-color: #4f4f4a;
    --dark-bg: #222;
    --status--step01: #ffb50f;
    --status--step02: #38dcfc;
    --status--step03: #ff5342;
    --hd-height: 105px;
    --lg-gap: 40px;
    --vSlider-li-h: 100px;
    --vSlider-li-gap: 20px;
}

/* Layout */
#wrap { max-width: 1920px; margin: 0 auto; position: relative; }
.in { max-width: 1440px; margin: 0 auto; display: flex; }

/* Header */
header { position: fixed; top: 0; left: 50%; z-index: 9999; width: 100%; max-width: 1920px; transform: translateX(-50%);}
header > div:last-of-type { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--lg-gap) 16px var(--lg-gap); transition: 0.5s;  }
header h1 { max-width: 120px; padding:0; }
header.bright:hover h1 a img, header h1 a { color: var(--flex-separation-color); }
header h1 a img { width: 100%; filter: brightness(0); transition: 0.4s; }
header.bright:hover nav a, header nav a { font-size: 1.125rem; padding: 1.75rem; font-weight: 600; color: var(--dark-bg); transition: 0.4s; background-size: calc(100% - 1rem) 0.5rem, 0 4px; background-position: 100% 100%, center calc(100% - 17px); background-repeat: no-repeat; transition: 0.5s; background-image: linear-gradient(transparent, transparent), linear-gradient(var(--flex-f-h-color), var(--flex-f-h-color)); }
header.bright nav a { color: #efefef; }
header.bright nav a.btn { background: var(--flex-separation-color); font-size: 15px; color: var(--dark-bg); display: flex; height: 38px; line-height: 38px; justify-content: center; align-items: center; padding: 0px 30px; border-radius: 100px; }
header.bright h1 a img { filter: brightness(1); }

.topNav { padding: 0 var(--lg-gap); border-bottom: 1px solid #ffffff40; background: #0000007d; width: 100%;}
.topNav > div  {display: flex; justify-content: flex-end;}
.topNav > div a {color: #fff; padding:  1rem; opacity: 0.7; font-size: 15px;}
.topNav > div a:last-of-type{padding-right: 0;}
.topNav > div a:hover {opacity: 1;}

@media (max-width: 1240px) {
    #wrap,
    header,
    .in {width: 100%;}
    #wrap {overflow-x: hidden;}
}

@media (max-width: 768px) {
    .topNav {display: none;}
    header > div:last-of-type {padding: 17px var(--lg-gap);}
    header.bright nav a.btn {font-size: 14px; height: 32px; line-height: 32px;}
}

@media (max-width:420px) {
    header h1 {max-width: 100px;}
    header.bright nav a.btn {padding: 0 24px;}
}

/* Course Section */
.course { min-height: 100vh; overflow: hidden; background: var(--dark-bg); position: relative; }
.course > .btnWrap { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); visibility: hidden; opacity: 0; transition: 0.4s; display: flex; gap: 8px; width: 780px; justify-content: center; }
.top.course > .btnWrap { visibility: visible; opacity: 1; z-index: 99; }
.course > .btnWrap > a { background: #c7c7c7; border-radius: 8px; font-size: 19px; display: flex; justify-content: center; align-items: center; width: 40%; max-width: 320px; height: 56px; font-weight: 600; transition: 0.4s; }
.course > .btnWrap > a:hover { opacity: 0.8; }
.course > .btnWrap > a:last-of-type { background: var(--flex-f-h-color); }

.course .title { text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -126%); z-index: 9999; visibility: hidden; opacity: 0; }
.course .title h2 { font-size: 48px; font-weight: 800; line-height: 138%; color: #f1f1f1; }
.course .title h2 b { color: var(--flex-separation-color); }
.courseCol { margin: 0 auto; width: 100%; transform-style: preserve-3d; }
.course .colWrap { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; width: 100%; transform-style: preserve-3d; transform-origin: 50% 50%; gap: 3px; }

.scrollIndicator { display: none; width: 132px; height: 132px; justify-content: center; align-items: center; }
.top.course .scrollIndicator { position: absolute; left: 50%; top: 100vh; transform: translate(-50%, -55%); z-index: 99; display: flex; }
.scrollTxt { font-size: 13px; color: #fff; display: block; position: relative; transform: translate(10%, -100%); cursor: pointer; }
.scrollTxt::after { content: '\f0d7'; font: var(--fa-font-solid); padding-left: 8px; display: inline-block; animation: scrollUpDown 1.5s ease-in-out infinite; }
.circularTxt { position: absolute; width: 100%; height: 100%; border-radius: 50%; animation: rotate 15s linear infinite; }
.circularTxt span { position: absolute; left: 50%; height: 66px; font-size: 11px; color: #fff; transform-origin: bottom center; }

.colWrap .col { width: 100%; padding-bottom: 55.6%; overflow: hidden; height: 0; position: relative; border-radius: 10px; }
.colWrap .col .flip { width: 100%; height: 100%; position: absolute; display: block; transform: rotateY(0); transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 0.4s; }
.colWrap .col .flip::before { content: ''; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(180deg); backface-visibility: hidden; background: #121212; display: block; position: absolute; }
.colWrap .col .flip img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; backface-visibility: hidden; }
.top .colWrap .col .flip { transform: rotateY(180deg); }

/* Course Section Media Queries */
@media (min-width: 1441px) {
    .top .colWrap .col:nth-of-type(8) .flip::before, .top .colWrap .col:nth-of-type(9) .flip::before, .top .colWrap .col:nth-of-type(10) .flip::before, .top .colWrap .col:nth-of-type(11) .flip::before, .top .colWrap .col:nth-of-type(14) .flip::before, .top .colWrap .col:nth-of-type(15) .flip::before, .top .colWrap .col:nth-of-type(16) .flip::before, .top .colWrap .col:nth-of-type(17) .flip::before, .top .colWrap .col:nth-of-type(20) .flip::before, .top .colWrap .col:nth-of-type(21) .flip::before, .top .colWrap .col:nth-of-type(22) .flip::before, .top .colWrap .col:nth-of-type(23) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 400% auto; }
    .top .colWrap .col:nth-of-type(8) .flip::before { background-position: 0% 0%; }
    .top .colWrap .col:nth-of-type(9) .flip::before { background-position: 33.33% 0%; }
    .top .colWrap .col:nth-of-type(10) .flip::before { background-position: 66.66% 0%; }
    .top .colWrap .col:nth-of-type(11) .flip::before { background-position: 100% 0%; }
    .top .colWrap .col:nth-of-type(14) .flip::before { background-position: 0% 50%; }
    .top .colWrap .col:nth-of-type(15) .flip::before { background-position: 33.33% 50%; }
    .top .colWrap .col:nth-of-type(16) .flip::before { background-position: 66.66% 50%; }
    .top .colWrap .col:nth-of-type(17) .flip::before { background-position: 100% 50%; }
    .top .colWrap .col:nth-of-type(20) .flip::before { background-position: 0% 100%; }
    .top .colWrap .col:nth-of-type(21) .flip::before { background-position: 33.33% 100%; }
    .top .colWrap .col:nth-of-type(22) .flip::before { background-position: 66.66% 100%; }
    .top .colWrap .col:nth-of-type(23) .flip::before { background-position: 100% 100%; }
    .course.top .courseCol .colWrap .col:hover { transform: rotateY(0); }
    .top .col:hover .flip { transform: rotateY(0); }
    /* .course.top .courseCol .colWrap .col:nth-of-type(21):hover, 
    .course.top .courseCol .colWrap .col:nth-of-type(21):hover .flip, 
    .course.top .courseCol .colWrap .col:nth-of-type(22):hover, 
    .course.top .courseCol .colWrap .col:nth-of-type(22):hover .flip { transform: rotateY(180deg); } */
}

@media (max-width: 1440px) {
    .course .courseCol { transition: 0.4s; }
    .pin-spacer:first-of-type, .course { height: 100vh !important; }
    .course .title { background: #00000087; width: 100vw; height: 100vh; transform: translate(0, 0); top: 0; left: 0; }
    .course .title h2 { font-size: 5vw; }
}

@media (max-width: 1440px) and (min-width: 1100px) {
    .course.mobP .courseCol { transform: translateY(-20%) scale(0.9); }
    .course .colWrap { grid-template-columns: repeat(4, 1fr); }
    .course .title h2 { font-size: 3.5vw; }
    .top .colWrap .col:nth-of-type(6) .flip::before, 
    .top .colWrap .col:nth-of-type(7) .flip::before,
    .top .colWrap .col:nth-of-type(10) .flip::before, 
    .top .colWrap .col:nth-of-type(11) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 300% auto; }
    .top .colWrap .col:nth-of-type(6) .flip::before { background-position: 26% 1%; }
    .top .colWrap .col:nth-of-type(7) .flip::before { background-position: 76.5% 1%; }
    .top .colWrap .col:nth-of-type(10) .flip::before { background-position: 26% 82%; }
    .top .colWrap .col:nth-of-type(11) .flip::before { background-position: 76.5% 82%; }
    .top .col:hover .flip { transform: rotateY(0); }
    .course > .btnWrap { transform: translate(-50%, 0); top: 35vw;}
    .course > .btnWrap > a:first-of-type {display: none;}
}
@media (max-width: 1099px) and (min-width: 991px) {
    .course.mobP .courseCol { transform: translateY(-20%) scale(0.9); }
    .course .colWrap { grid-template-columns: repeat(4, 1fr); }
    .course .title h2 { font-size: 3.5vw; }
    .top .colWrap .col:nth-of-type(10) .flip::before, .top .colWrap .col:nth-of-type(11) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 300% auto; }
    .top .colWrap .col:nth-of-type(10) .flip::before { background-position: 26% 40%; }
    .top .colWrap .col:nth-of-type(11) .flip::before { background-position: 76.5% 40%; }
    .top .col:hover .flip { transform: rotateY(0); }
    .course > .btnWrap { transform: translate(-50%, 0); top: 45vw; }
    .course > .btnWrap > a:first-of-type {display: none;}
}


@media (max-width: 990px) and (min-width: 768px) {
    .course .colWrap { grid-template-columns: repeat(4, 1fr); }
    .top .colWrap .col:nth-of-type(10) .flip::before, .top .colWrap .col:nth-of-type(11) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 300% auto; }
    .top .colWrap .col:nth-of-type(10) .flip::before { background-position: 26% 50%; }
    .top .colWrap .col:nth-of-type(11) .flip::before { background-position: 76.5% 50%; }
    .course > .btnWrap { top: 52vh; width: 400px; transform: translate(-50%, 100%); }
    .course > .btnWrap { transform: translate(-50%, 0); top: 46vw; }
    .course > .btnWrap > a { font-size: 18px; height: 52px; width: 100%; }
    .course > .btnWrap > a:first-of-type {display: none;}
}

@media (max-width: 767px) and (min-width: 461px) {
    .course .colWrap { grid-template-columns: repeat(4, 1fr); }
    .top .colWrap .col:nth-of-type(14) .flip::before, .top .colWrap .col:nth-of-type(15) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 300% auto; }
    .top .colWrap .col:nth-of-type(14) .flip::before { background-position: 26% 50%; }
    .top .colWrap .col:nth-of-type(15) .flip::before { background-position: 76.5% 50%; }
    .course > .btnWrap { top: 52vh; width: 400px; transform: translate(-50%, 100%); }
    .course > .btnWrap { transform: translate(-50%, 0); top: 60vw; }
    .course > .btnWrap > a { font-size: 14px; height: 38px; width: 100%;  max-width: 180px;}
    .course > .btnWrap > a:first-of-type {display: none;}
}


@media (max-width: 460px) {
    .course .courseCol { transition: 0.4s; }
    .course.mobP .courseCol { transform: translateY(-18vh) scale(0.9); }
    .course .colWrap { grid-template-columns: repeat(3, 1fr); gap: 1px; }
    .course .title h2 { font-size: 5.5vw; }
    .course.mobP .col:nth-of-type(7) { top: 650%; }
    .course.mobP .col:nth-of-type(8) { top: 800%; }
    .course.mobP .col:nth-of-type(15) { top: 500%; }
    .course.mobP .col:nth-of-type(11) { right: -150%; }
    .top .colWrap .col:nth-of-type(13) .flip::before, 
    .top .colWrap .col:nth-of-type(14) .flip::before, 
    .top .colWrap .col:nth-of-type(15) .flip::before, 
    .top .colWrap .col:nth-of-type(16) .flip::before, 
    .top .colWrap .col:nth-of-type(17) .flip::before, 
    .top .colWrap .col:nth-of-type(18) .flip::before { background-image: url('./img/mainBg.png'); background-repeat: no-repeat; background-position: center center; background-size: 350% auto; }
    .top .colWrap .col:nth-of-type(13) .flip::before { background-position: 8% 25%; }
    .top .colWrap .col:nth-of-type(14) .flip::before { background-position: 49% 25%; }
    .top .colWrap .col:nth-of-type(15) .flip::before { background-position: 90% 25%; }
    .top .colWrap .col:nth-of-type(16) .flip::before { background-position: 9% 90%; }
    .top .colWrap .col:nth-of-type(17) .flip::before { background-position: 50% 90%; }
    .top .colWrap .col:nth-of-type(18) .flip::before { background-position: 91.5% 90%; }
    .course > .btnWrap { top: 52vh; width: 400px; transform: translate(-50%, 100%); }
    .course > .btnWrap { transform: translate(-50%, 0); top: 90vw; }
    .course > .btnWrap > a { font-size: 14px; height: 38px; width: 100%;  max-width: 180px;}
    .course > .btnWrap > a:first-of-type {display: none;}
    .scrollIndicator { opacity: 0.8; }
}

/* How Use Section */
.howUse { min-height: 100vh; background: #0d0d0d; overflow: hidden; position: relative; }
.howUse h2 { font-size: 48px; font-weight: 700; position: absolute; top: 15vh; left: 13%; z-index: 99; }
.howUse .howUseCon { display: flex; width: max-content; height: 100vh; }

.hosUsePager { position: absolute; left: var(--lg-gap); bottom: calc(var(--lg-gap) - 10px); color: #fff; z-index: 99; width: calc(100vh - 126px - var(--lg-gap)*2); display: flex; align-items: flex-start; transform: rotate(270deg); gap: 20px; transform-origin: top left; opacity: 0.9; }
.hosUsePager > .bur { background: #fff; flex: 1; height: 2px; transform: translateY(7px); opacity: 0.4; order: 2; }
.hosUsePager > div:first-of-type { display: flex; align-items: flex-end; order: 3; }
.hosUsePager > div:first-of-type > img { margin-right: 10px; }
.hosUsePager > div:first-of-type button { position: relative; font-size: 22px; color: #ffffff5e; font-weight: 700; padding: 0 24px; }
.hosUsePager > div:first-of-type > button::after { content: '/'; font-weight: 800; color: #ffffff5e; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.hosUsePager > div:first-of-type > button:last-of-type::after { display: none; }
.hosUsePager > div:first-of-type button.on { color: #fff; }

.howUse .howUseCon > div { min-width: 100vw; height: 100%; flex-shrink: 0; position: relative; padding: calc(var(--lg-gap) + var(--hd-height)) var(--hd-height) var(--hd-height) var(--hd-height); }
.howUse .howUseCon > div:nth-of-type(1) .obj { position: absolute; left: 50%; top: 50%; animation: hzObjUpDown 3s infinite; z-index: 9; }
.howUse .howUseCon > div:nth-of-type(1) .objBg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(0.95); z-index: 1; }
.howUse .howUseCon > div:nth-of-type(1) .conTxt { width: 50%; display: flex; flex-direction: column; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(26%, -79%); z-index: 2; gap: 20px; }
.howUse .howUseCon > div:nth-of-type(1) .conTxt > img { width: 236px; }
.howUse .howUseCon > div:nth-of-type(1) .conTxt > strong { font-size: 66px; font-weight: 800; line-height: 110%; }
.howUse .howUseCon > div:nth-of-type(1) .con1Circle { position: absolute; top: 50%; left: 50%; transform: translate(68%, -227%); background: var(--flex-separation-color); width: 160px; height: 160px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.howUse .howUseCon > div:nth-of-type(1) .con1Circle .con1CircleTxt { position: absolute; width: 146px; height: 146px; border-radius: 50%; animation: rotate 15s linear infinite; }
.howUse .howUseCon > div:nth-of-type(1) .con1Circle .con1CircleTxt span { position: absolute; left: 50%; height: 73px; font-size: 13px; font-weight: 500; color: var(--dark-bg); transform-origin: bottom center; }
.howUse .howUseCon > div:nth-of-type(1) .con1Circle > img { width: 60px; }

.howUse .howUseCon .con1, .howUse .howUseCon .con2, .howUse .howUseCon .con3 { padding: calc(var(--lg-gap) + var(--hd-height)) calc(var(--lg-gap) + var(--hd-height)) calc(var(--hd-height) + 2vh) calc(var(--lg-gap) + var(--hd-height)); }
.howUse .howUseCon .con1 { min-width: 120vw; }
.howUse .howUseCon .con1 .gridWrap { display: grid; grid-template-columns: 384px 884px 384px; grid-template-rows: 160px auto; height: 100%; gap: 0 150px; }
.con h3 { grid-column: 1 / 3; font-size: 52px; color: #f1f1f1; font-weight: 600; line-height: 115%; }
.con1 .item { display: flex; flex-direction: column; gap: 32px; transition: 0.3s; }
.con1 .item.on .card { box-shadow: 0 0 45px 0 rgba(158, 255, 0, 0.5); }
.con1 .item:nth-of-type(1) { grid-column: 1/2; }
.con1 .item:nth-of-type(3) { grid-column: 3/4; grid-row: 1/3; }
.con1 .item:nth-of-type(2) .card { order: 4; }
.con1 .item .card { flex: 1; background: #1d1d1d; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 3px 6px 0 rgba(64, 64, 64, 0.3); transition: 0.3s; }
.con1 .item .card img { width: 100%; position: absolute; top: 0; left: 0; }
.con1 .item > div:last-of-type { display: flex; flex-direction: column; gap: 10px; }
.con1 .item b { color: var(--flex-separation-color); font-size: 18px; font-weight: 600; }
.con1 .item p { color: #fff; opacity: 0.8; line-height: 148%; }

.con2 .gridWrap { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 120px; height: 100%; gap: 50px; }
.con2 .gridWrap .card { flex: 1; background: #1d1d1d; border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 3px 6px 0 rgba(64, 64, 64, 0.3); transition: 0.3s; }

.con3 .gridWrap { gap: 40px; display: flex; flex-direction: column; }
.con3 .imgWrap { display: flex; gap: 40px; }

/* How Use Media Queries */
@media (max-width: 1440px) {    
    .howUse .howUseCon > div { min-width: 1020px; }
    .howUse .howUseCon > div:first-of-type {width: 125vw;}
    .howUse .howUseCon > div:nth-of-type(1) .obj { width: 50vw; top:54%; left: 55.5%;}
    .howUse .howUseCon > div:nth-of-type(1) .objBg { transform: translate(-40%, -46%) scale(1);}

    .howUse .howUseCon > div:nth-of-type(1) .con1Circle { transform: translate(65%, -204%); z-index: 1; }
    .howUse .howUseCon > div:nth-of-type(1) .conTxt { transform: translate(33%, -83%); }
    .howUse .howUseCon > div:nth-of-type(1) .conTxt > img { width: 14vw; }
    .howUse .howUseCon > div:nth-of-type(1) .conTxt > strong { font-size: 5.3vw; }
    .con h3 { font-size: 4.5vw; }
    .howUse .howUseCon .con1, .howUse .howUseCon .con2, .howUse .howUseCon .con3 { padding: 110px 160px; }
    .howUse .howUseCon .con1 .gridWrap { grid-template-rows: 140px auto; gap: 0 80px; }
}

@media (max-width: 990px) {
    .hosUsePager { display: none !important; }
    .howUse .howUseCon > div {min-width: 90vw;  padding: 80px 40px; }
    .course .title h2{ font-size: 5vw;} 
    .howUse .con h3 {font-size: 4vw;}
    .howUse .howUseCon > div:nth-of-type(1) .conTxt {transform: translate(41%, -80%); } 
    .howUse .howUseCon > div:nth-of-type(1) .con1Circle { transform: translate(37%, -197%) scale(0.8); z-index: 1; }
    .howUse .howUseCon .con1 { min-width: 115vw;  padding: 160px 160px 50px 160px; }   
    .howUse .howUseCon .con2 { min-width: auto;  padding: 220px 160px 100px 160px; }   
    .howUse .howUseCon .con2 .gridWrap {gap:30px; display: flex; flex-direction: column;}
    .howUse .howUseCon .con2 .card {display: flex; align-items: center;}
    .howUse .howUseCon .con2 .card .obj {width: 1230px;}
    .howUse .howUseCon .con3 { min-width: auto; width: auto; padding: 220px 45px 0 40px;}
    .howUse .howUseCon .con3 .gridWrap {gap: 30px}
    .howUse .howUseCon .con3 .imgWrap { align-items: flex-end; width: 140vw; gap:16px  }   
    .howUse .howUseCon .con3 .imgWrap img:first-of-type {width:calc(72.7% - 16px);}
    .howUse .howUseCon .con3 .imgWrap img:last-of-type {width:27.3%;}

    .howUse .howUseCon > div:nth-of-type(1) .obj {width: 70vw;}
    .con h3 {font-size: 6vw; }
}
@media (max-width: 768px) {
    :root {
        --lg-gap: 22px;
    }
    .con h3 {font-size: 4vw;}
    /* .howUse .howUseCon .con1 {padding: 100px 15vw 30px 15vw; }   */
    /* .howUse .howUseCon .con2, 
    .howUse .howUseCon .con3 */
    .howUse .howUseCon .con { padding: 10vh 20vw 10vh 0;}
    .howUse .howUseCon .con1 {padding-top: 13vh; padding-right: 20vw;} 
    .howUse .howUseCon .con2 {padding-top: 25vh; padding-right: 20vw;}
    .howUse .howUseCon .con3 {padding-top: 28vh; padding-right: 20vw;}
    .howUse .howUseCon > div:nth-of-type(1) .obj {width: 69vw; left: 45%;}
    .howUse .howUseCon > div:nth-of-type(1) .objBg {transform: translate(-55%, -37%) scale(0.95);}
    .howUse .howUseCon > div:nth-of-type(1) .con1Circle { transform: translate(-49%, -149%) scale(0.5);}
    .howUse .howUseCon > div:nth-of-type(1) .conTxt {transform: translate(17%, -70%); gap: 10px}
    .howUse .howUseCon .con1 .gridWrap {grid-template-columns : 40vw 100vw 40vw; grid-template-rows: 13.5vw auto;}
    .con2 .gridWrap .card {display: flex; justify-content: center; align-items: center;}
    .howUse .howUseCon .con2 {display: flex; justify-content: center;}
    .con2 .gridWrap {gap: 5vw; display: flex; flex-direction: column; width: 150vw;}
    
}

@media (max-width: 420px) {
    .howUse .con h3 {font-size: 24px; line-height: 128%;}
    .howUse .howUseCon > div:first-of-type {width: 200vw;}
    .howUse .howUseCon > div:nth-of-type(1) .obj {width: 100vw; left: 40%; top: 49%; }
    .howUse .howUseCon .con1 .gridWrap {gap: 0 60px; grid-template-columns: 70vw 120vw 70vw; grid-template-rows: 80px auto; }
    .con1 .item p {font-size: 15px;}
    .con2 .gridWrap {width: 280vw;}
    .howUse .howUseCon .con3 .imgWrap {width: 200vw;}
    
    
}


/* Reader Section */
.reader { background: #79a92a; min-height: 100vh; display: flex; justify-content: center; align-items: center; align-content: center; }
.reader p { font-size: 56px; font-weight: 600; line-height: 130%; color: rgba(255, 255, 255, 0.3); }
.reader-word { transition: color 0.1s ease-in-out; }

@media (max-width: 990px) {
    .reader > .in {display: flex; justify-content: center; align-content: center; align-items: center; width: 100%; padding-left: var(--lg-gap); padding-right: var(--lg-gap);}
    .reader p { font-size: 6vw; }
}

/* vSlider Section */
.vSlider { height: 100vh; display: flex; justify-content: center; align-items: center; align-content: center; position: relative; background: #232323 url('./img/vslider_bg2.jpg') no-repeat center center; background-size: cover; }
.vSlider .in { display: flex; justify-content: center; align-items: center; height: calc((var(--vSlider-li-h)*3) + (var(--vSlider-li-gap)*2)); overflow-y: hidden; width: 100%; gap: 100px; padding-bottom: var(--lg-gap); }
.vSlider .in h2 { font-size: 54px; font-weight: 700; text-align: left; color: #f1f1f1; line-height: 120%; }
.vSlider .in h2 > b {color: var(--flex-separation-color);}
.vSlider .in > div { width: 40%; }
.vSlider .in > div > div.swiper { height: 210px; overflow: visible; }
.vSlider .in > div > div > ul li.swiper-slide { width: 80%; height: 100%; display: flex; justify-content: center; align-items: center; border: 2px solid transparent; padding: 20px; transition: 0.4s; font-size: 20px; border-radius: 6px; color: #f1f1f1b0; }
.vSlider .in > div > div > ul li.swiper-slide.swiper-slide-active { border: 3px solid var(--flex-f-h-color); background: #fff; transform: scale(1.15); font-weight: 600; color: #000; box-shadow: 0 0 3px 4px #3d3d3dbd; }

@media (max-width: 1440px) {
    .vSlider .in { flex-direction: column; height: 100vh; gap: 10px; }
    .vSlider .in > div { width: 80%; max-width: 650px; }
    .vSlider .in > div > div.swiper { overflow: hidden; }
    .vSlider .in::before { content: ''; width: 100%; height: 100%; opacity: 0; display: block; position: absolute; z-index: 90; }
    .vSlider .in > div > div > ul li.swiper-slide { width: 100%; }
}
@media (max-width: 768px) {
    .vSlider .in h2 {font-size: 7vw; padding-bottom: 5vw;}
    .vSlider .in > div {width: calc(100% - var(--lg-gap) * 2 );}
    .vSlider .in > div > div > ul li.swiper-slide.swiper-slide-active {  transform: scale(1); }
}


/* Other Sections */
.innoInfo { min-height: 100vh; }
#fixedBtn { display: flex; align-items: center; justify-content: center; align-content: center; position: fixed; bottom: 0; left: 50%; z-index: 999; width: 100%; max-width: 1920px; height: 81px; background: #111111b8; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: 0.5s; gap: 0; }
#fixedBtn > a { background: var(--flex-f-h-color); display: flex; justify-content: center; align-items: center; width: 50%; max-width: 400px; height: 46px; border-radius: 100px; font-size: 18px; font-weight: 600; color: #111; }
#fixedBtn > a:first-of-type { background: #8d7beb; }

.sec05 { min-height: 100vh; background: #232323; display: flex; flex-wrap: wrap; max-width: 100%; }
.sec05 .fake { width: 100%; background: #161616; min-height: 50px; }

@media (max-width: 1440px) {
    #fixedBtn { gap: 10px; padding: 0 40px; }
}

/* Animations */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes scrollUpDown {
    0% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

@keyframes hzObjUpDown {
    0% { transform: translate(-53%, -53%); }
    50% { transform: translate(-53%, -56%); }
    100% { transform: translate(-53%, -53%); }
}

@media (max-width: 1440px) {
    @keyframes hzObjUpDown {
        0% { transform: translate(-63%, -53%); }
        50% { transform: translate(-63%, -56%); }
        100% { transform: translate(-63%, -53%); }
    }
}

/**/
.ourPride  {background: #282829 url('./img/ourPride_bg.png') no-repeat right bottom; padding: 160px 0 ; }
.ourPride h2  {color:#fff; padding-bottom: 80PX; font-size: 52px; font-weight: 700;}
.ourPride h2 > span {color:#fff; display: block;}
.ourPride h2 > strong > b {color: var(--flex-separation-color);}
.ourPride .in {display: block;}

.num_wrap {display: flex; }
.num_box {display: flex; flex-direction: column;  padding: 0 60px ; border-right: 1px solid #555555; gap:7px }
.num_box span {font-size: 1.25rem; color:#fff; opacity: 0.8; font-weight: 800;}
.num_box strong {font-size: 46px ; font-weight:  800;}
.num_box strong span {font-size: 1.75rem; colorl:#fff; font-weight: 700; opacity: 0.4;}
.num_box:nth-of-type(1) {padding-left:0; }
.num_box:nth-of-type(3) {border-right: 0; }
.num_box:nth-of-type(1) strong {color: #54E2DA; }
.num_box:nth-of-type(2) strong {color: #7AFB8A; }
.num_box:nth-of-type(3) strong {color: #FFE554; }

.text_wrap {padding-top: 50px; }
.text_wrap .row_box {display: flex;  flex-direction: column;  padding: 1.875rem 2.5rem 1.875rem 9rem; background: #252424ad; margin-bottom: 12px; border-radius: 1.125rem; box-shadow: 6px 6px 6px 0px rgba(30, 28, 28, 0.25); position: relative; }
.text_wrap .row_box::before {content: ''; width: 5rem; height: 5rem; position: absolute; left:2.5rem; top:50%; transform: translateY(-50%);}
.text_wrap .row_box:nth-of-type(1)::before {background: url('./img/sec04_01.svg') no-repeat center center; background-size: cover; }
.text_wrap .row_box:nth-of-type(2)::before {background: url('./img/sec04_02.svg') no-repeat center center; background-size: cover;height: 6rem; width: 4.5rem; left: 2.7rem;}
.text_wrap .row_box:nth-of-type(3)::before {background: url('./img/sec04_03.svg') no-repeat center center; background-size: cover;height: 5rem; width: 5em;}
.text_wrap .row_box:nth-of-type(4)::before {background: url('./img/sec04_04.png') no-repeat center center; background-size: cover;height: 5rem; width: 5em;}
.text_wrap .row_box strong { font-size: 1.875rem; font-weight: 800; color:#fff; margin-bottom: 0.625rem; }
.text_wrap .row_box span { font-size: 1.25rem; font-weight: 300; color:#fff; opacity: 0.7; padding-top: 0.625rem;}


footer { width: 100%; background: #1a1a1a; padding: 2.875rem 0 3.375rem 0; position: relative; z-index: 9; } 
footer > .footer_inner { max-width: 1440px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px } 
.footer_inner > div:first-of-type > img {max-width: 110px; filter: grayscale(1); opacity: 0.7;}
.footer_inner > div { display: flex; position: relative; align-items: flex-end; } 
.footer_inner > div > select { position: absolute; top: -0.5rem; right: 0; width: 13.75rem; height: 2.87rem; padding: 0 1.18rem;  color:#a1a1a1; border-radius: 0.25rem; border: 1px solid #ffffff40; } 
.footer_inner > div > select:focus,
.footer_inner > div > select:active {outline: none;}
.footer_inner > div span { margin-right : 2.18rem; }  
.footer_inner > div > a:nth-of-type(1) { margin-right: 1.125rem; } 
.footer_inner > p { color:#898989; line-height: 152%; font-weight: 400; } 
.footer_inner > p span { opacity: 0.5; padding: 0.35rem; font-weight: 200; } 
.footer_inner > p em {font-style: normal;}

@media (max-width: 1440px) {
    footer,
    .ourPride {padding-left: var(--lg-gap); padding-right: var(--lg-gap);}
}

@media (max-width: 990px) {
    .ourPride h2{ text-align: center;}
    .ourPride h2 > span {display: inline-block;}
	.num_wrap  {justify-content: center;  align-items: center;}
	.num_wrap .num_box {padding: 0; width: 33.3%; display: flex; justify-content: center; align-items: center;}
	.num_box span {font-size: 1.125rem; margin-bottom: 1rem;}
	.num_box strong {font-size: 2.25rem;}
    .text_wrap .row_box strong {line-height: 138%; margin-bottom: 0; }
	.text_wrap .row_box span {line-height: 168%; font-weight: 300; letter-spacing: -0.1px;}
    
    footer > .footer_inner { align-items: center; } 
    .footer_inner > div { flex-direction: column; align-items: center; gap: 1.5rem; } 
    .footer_inner > div > select { position: relative; top:0; width: 100%; max-width: 16.75rem;} 
    .footer_inner > p { text-align: center; } 
    .footer_inner > div span {margin-right: 0; display: flex; gap:1.25rem;}
    .footer_inner > div span a {font-size: 1.125rem;}   
    .footer_inner > p > em {display: block; padding-top: 5px;}
}
@media (max-width: 768px) {
    .ourPride {background-size: 180%; padding: 16vw var(--lg-gap) 10vw var(--lg-gap); }	
    
    .ourPride h2 {font-size: 7vw; padding-bottom: 5vw;}
    .num_wrap  {flex-wrap: wrap; justify-content: space-between; gap: 8px}
	.num_wrap .num_box {width: calc(50% - 4px); padding: 20px 10px ; border:  1px solid #6F6F78; border-radius: 10px; }
	.num_wrap .num_box:last-of-type {width: 100%} 
    .num_box span {margin-bottom: 5px; font-size: 16px; font-weight: 500;}
    .num_box strong {font-size: 5vw;}
    .text_wrap {padding-top: 5vw;}
    .text_wrap .row_box {padding: 1.875rem; background: #393939ad;}
	.text_wrap .row_box::before {width: 2rem; height: 2rem;  transform: translateY(0); top: 1.65rem; left: 1.875rem; }
	.text_wrap .row_box:nth-of-type(2)::before { width: 1.8rem; height: 2.3rem; left: 1.875rem;}
	.text_wrap .row_box:nth-of-type(3)::before { width: 1.9rem; height: 1.9rem; top:  2rem; left: 1.875rem;}
	.text_wrap .row_box:nth-of-type(4)::before { width: 1.9rem; height: 1.9rem; top:  2rem; left: 1.875rem;}
	.text_wrap .row_box strong {font-size: 1.25rem; margin-bottom: 0; padding-left: 3rem; }
	.text_wrap .row_box span {font-size: 1rem; width: 100%; }

    .footer_inner > p br {display: none;}
    .footer_inner > div,
    .footer_inner > div > select {width: 100%; max-width: 300px; }

}