/* 영문css */

@charset "UTF-8";* { outline: none; text-decoration: none; box-sizing: border-box; word-break: break-word; } 
html { } 
body { position: relative; overflow-x: hidden; width: 100%; margin:0 auto; max-width: 2560px; } 
body.no_scroll { overflow: hidden!important; } 
ul { list-style: none; padding: 0; margin: 0; } 
a { display: inline-block; text-decoration: none; } a:active { text-decoration:none; } a:focus { text-decoration:none; } 
h1,h2,h3,h4,h5,h6,p,a, span, li, input, select, option, textarea, th, td { margin: 0; padding: 0; } 
img { image-rendering: -webkit-optimize-contrast; } 
a:hover { text-decoration: none; } 
a:focus { outline: none; } 
.flex { display: -webkit-flex; display: -ms-flex; display: flex; } 
.tt { text-transform: uppercase; } 
.img-responsive { display: block; max-width: 100%; } 
.center-block { display: block; margin-left: auto; margin-right: auto; } 
.text-center { text-align: center; } 
.mobile_br { display: none; } 
.hidden-pc { display:none !important; } 
.hidden-mobile { } 
button { cursor: pointer; } 
.RixBusanStation { font-family: 'NanumSquareNeo', sans-serif; } 
:root { --global-color: #000; --global-color-w: #fff; --main-color: #041996; --sub-color : #74c2ff; --sub-color2 : #a1d6ff; } 
small { font-size: 13px; } 
sup { color: inherit; } 
b { display: inline-block; font-weight: bold; color: inherit; font-size: inherit; } 
span { display: inline-block; font-size: inherit; font-weight: inherit; line-height: inherit; } 
.pay-popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 30; margin-top: 0; } 
.pay-popup .pay-popup-dim { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .8); } 
.pay-popup .overview_wrap { position: absolute; left: 50%; transform: translateX(-50%); width: 70%; top: 150px; } 
.pay-btn { background-color: #fff; padding: 30px 0; } 
.pay-btn button { max-width: 230px; width: 100%; margin: 0 auto; display: block; text-align: center; background-color: var(--main-color); border-radius: 40px; font-size: 20px; line-height: 66px; color: #f9f9ff; cursor: pointer; } 

/* header */
header { transform: translate(-50%, 0px); opacity: 1; position: fixed; left:50%; top:0; width: 100%; z-index: 20; -webkit-transform: translate3d(-50%, 0, 20px); padding-top: 15px; padding-bottom: 15px; background-color: #10121d; max-width: 2560px; } 
header .logo-box { width: 200px; } 
header .logo-box a { display: block; } 
.hd-container { max-width: 71.4%; width: 100%; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: space-between; } 
.hd-container .logo-box svg { display: block; } 
.hd-container .logo-box img { width: 200px; } 
header.roll .hd-container { max-width: 1800px; padding: 0 30px; } 
header nav { width: calc(100% - 200px - 60px - 20px); text-align: right; } 
header nav ul { font-size: 0; } 
header nav ul li { display: inline-block; vertical-align: top; margin-right: 55px; text-align: center; } 
header nav ul li.mypage { margin-right: 10px; } 
header nav ul li:last-child { margin-right: 0; } 
header nav>ul>li>a { display: block; font-size: 18px; padding: 16px 0; border-radius: 30px; line-height: 1; color: var(--global-color-w); position: relative; } 
header nav>ul>li>a:after { content: ''; display: block; background-color: #fff; width: 0%; height: 2px; border-radius: 10px; position: absolute; left: 0; bottom: 5px; transition: width 0.5s; } 
header nav>ul>li>a:hover:after { width: 100%; transition: width 0.5s; } 
header nav>ul>li.on>a:after { width: 100%; } 
#loginBtn { color: #fff; padding: 16px 39px; background: linear-gradient(286deg, var(--c1, #67cdff), var(--c2, #0e7be7) 51%, var(--c1, #67cdff)) var(--x, 0)/ 200%; transition: background 0.8s; } 
#loginBtn:hover { --x: 100%; --c1: #0e7be7; --c2: #67cdff; transition: background 0.8s; } 
#myPage { color: #fff; padding: 16px 30px; background-color: #373e71; display: block; border-radius: 30px; line-height: 1; position: relative; } 
header nav>ul>li>a#loginBtn:after { display: none; } 
header nav>ul>li>a#myPage:after { display: none; } 
header nav .sub-navi { display: none; position: absolute; width: 100%; left: 0; background-color: #fff; top: 105px; padding: 0 24%; border-top: 1px solid #9999994a; box-shadow: 0 7px 7px -6px rgba(0, 0, 0, 0.16); } 
header nav ul li.hover .sub-navi { display: block; } 
header nav .sub-navi ul li { margin-right: 80px; } 
header nav .sub-navi ul li:last-child { margin-right: 0; } 
header nav .sub-navi a { display: block; font-size: 16px; font-weight: 500; padding: 25px 0; } 
header nav .sub-navi a:hover { color: var(--main-color); } 
header.roll { background-color: #10121d; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 5px 20px 0 rgb(149 149 149 / 0%); padding-top: 15px; padding-bottom: 15px; } 
header.roll .logo-box img { content: url('../images/roll_logo.png'); width: auto; height: 35px; object-fit: contain; } 
header .lang-box { width: 60px; margin-left: 20px; position: relative; } 
header .lang-box .lang-head { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; cursor: pointer; } 
header .lang-box .lang-head span { font-size: 16px; color: #fff; } 
header .lang-box .lang-head img { transform: rotate(0deg); transition: transform 0.3s; transform-origin: center center; } 
header .lang-box .lang-head.on img { transform: rotate(180deg); transition: transform 0.3s; } 
header .lang-box ul { position: absolute; width: 100%; background-color: #373e71; border-radius: 13px; top: 40px; display: none; } 
header .lang-box ul li a { display: block; text-align: center; color: #fff; padding: 0 20px; line-height: 35px; transition: 0.3s; } 
header .lang-box ul li:first-child a { border-radius: 13px 13px 0 0; padding-top: 5px; } 
header .lang-box ul li:last-child a { border-radius: 0 0 11px 11px; padding-bottom: 5px; } 
header .lang-box ul li:hover a { background-color: #fff; color: #373e71; transition: 0.3s; } 
.pc-navi { display: none; position: fixed; left: 0; top: 100px; width: 100%; z-index: 10; background-color: rgba(0,0,0, 0.55); backdrop-filter: blur(5px); padding-top: 50px; padding-bottom: 120px; box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.33); } 
.pc-navi .inner { display: flex; justify-content: center; margin-left: 21%; } 
.pc-navi .inner .pc-navi-box { width: 200px; margin: 0 2px; } 
.pc-navi .inner .pc-navi-box ul li { margin-bottom: 10px; } 
.pc-navi .inner .pc-navi-box ul li a { display: block; font-size: 17px; line-height: 40px; text-align: center; padding: 0 10px; border-radius: 25px 25px 0; } 
.pc-navi .inner .pc-navi-box ul li a:hover { font-weight: bold; color: var(--main-color); background-color: rgba(255, 255, 255, 0.83); } 
body::-webkit-scrollbar { width: 12px; } 
body::-webkit-scrollbar-thumb { background-color:rgba(122,122,122,.75); border-radius:10px; } 
body::-webkit-scrollbar-track { background-color:rgba(122,122,122,.1); } 
.m_navi_btn { display: none; width: 50px; height: 32px; position: fixed; top: 27px; right: 15px; cursor: pointer; z-index: 50; } 
.m_navi_btn span { display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 2px; background-color: #fff; border-radius: 5px; transition: .3s; transform-origin: left; } 
.m_navi_btn span:nth-child(1) { top: 0; } 
.m_navi_btn span:nth-child(2) { top: 15px; transform:scale(1) translateX(-50%); } 
.m_navi_btn span:nth-child(3) { top: 30px; } 
.m_navi_btn.active span { background-color: #000; } 
.m_navi_btn.active span:nth-child(1) { top: 50%; transform:translate(-50%, -50%) rotate(-405deg); transition:0.5s; transform-origin:center; } 
.m_navi_btn.active span:nth-child(2) { transform:scale(0); transition:.3s; } 
.m_navi_btn.active span:nth-child(3) { top: 50%; transform:translate(-50%, -50%) rotate(405deg); transition:0.5s; transform-origin:center; } 
.ham-menu { display: none; position: fixed; width: 35%; height: 100vh; top: 0; right: 0; background-color: rgba(255, 255, 255, 0.88); z-index: 30; overflow-y: auto; padding-bottom: 100px; border-radius: 25px 0 0 25px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } 
.ham-menu::-webkit-scrollbar { width: 8px; } 
.ham-menu::-webkit-scrollbar-thumb { background-image:linear-gradient(45deg, #1fbda8, #77dfda); border-radius:8px; } 
.ham-menu::-webkit-scrollbar-track { background-color:#f5f5f5; } 
.ham-menu .inner { width: 100%; margin: 0 auto; padding-top: 100px; padding-left: 10%; padding-right: 10%; position: relative; } 
.ham-menu .inner .ham-lang { position: absolute; top: 30px; display: flex; } 
.ham-menu .inner .ham-lang a { display: block; font-size: 20px; text-align: center; padding: 0 30px; line-height: 35px; border: 1px solid #000; border-radius: 25px; margin-right: 10px; transition: 0.3s; color: #000; } 
.ham-menu .inner .ham-lang a:hover { background-color: #000; color: #fff; transition: 0.3s; } 
.ham-menu .inner .ham-lang a.on { background-color: #000; color: #fff; transition: 0.3s; } 
.ham-menu .inner>ul { padding: 20px 0; } 
.ham-menu .inner>ul>li { position: relative; margin-bottom: 45px; } 
.ham-menu .inner>ul>li img { position: absolute; right: 0; width: 60px; height: 60px; object-fit: contain; top: 50%; transform: translateY(-50%); opacity: 0.55; transition: 0.5s; } 
.ham-menu .inner>ul:hover img { right: 40px; opacity: 1; transition: 0.5s; } 
.ham-menu .inner>ul>li>a { font-size: 20px; font-weight: 600; color: #000; } 
.ham-menu .inner>ul>li>a:hover { color: var(--main-color); } 
.ham-menu .sub-navi { position: relative; } 
.ham-menu .sub-navi li { margin-bottom: 5px; } 
.ham-menu .sub-navi li:last-child { margin-bottom: 0; } 
.ham-menu .sub-navi a { font-size: 16px; font-weight: 500; color: #555; } 
.ham-menu .sub-navi a:hover { color:var(--main-color); } 
header .lang_box { width: 100px; height: 20px; position: fixed; right:10%; top:38px; z-index: 10; cursor: pointer; text-align: center; } 
header .lang_box .lang_button { cursor: pointer; font-size: 0; } 
header .lang_box .lang_button span { font-size: 18px; font-weight: 500; color: var(--global-color-w); display: inline-block; vertical-align: middle; padding-right: 10px; padding-left: 10px; } 
header .lang_box .lang_button svg { display: inline-block; vertical-align: middle; } 
header.roll .lang_box .lang_button span { color: var(--global-color) } 
header.roll .lang_box .lang_button svg path { stroke: var(--global-color) !important; } 
header .lang_box ul { display: none; position: absolute; width: 70%; z-index: 5; overflow: hidden; top: 30px; left: 10px; padding-bottom: 5px; } 
header .lang_box ul li { padding: 5px 20px; } 
header .lang_box ul li:hover { background-color: var(--global-color-w); } 
header .lang_box ul li a { display: block; color: var(--global-color-w); font-size: 18px; font-weight: 500; } 
header .lang_box ul li:hover a { color: var(--main-color); font-weight: bold; } 
.mobile_lang { display:none; } 
.dim { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.78); z-index: 15; } 
.dim.active { display: block; } 

/* index */
.container { max-width: 71.4%; width: 100%; margin-left: auto; margin-right: auto; } 
.logo-box.main { display: none; } 
.index_page { position: relative; } 
.tw { color: var(--global-color-w); } 
.tw * { color: var(--global-color-w); } 
.blue { color: var(--main-color); } 
.main_banner { height:100vh; max-height: 1080px; position: relative; overflow: hidden; /*clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transform: translateY(10%); */ } 

@keyframes reveal-cover { 
 0% { opacity: 0.5; clip-path: polygon(0 100%, 0 100%, 0 0, 0 0); } 
100% { opacity: 1; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0); } 
 }

.main_popup { position: fixed; bottom: 0; right: 100px; max-width: 400px; width: 100%; z-index: 20; box-shadow: 0px 0px 30px 0px rgb(0 0 0 / 6%); } 
.main_popup a { display: block; } 
.main_popup .chk-box { background-color: #000; padding: 10px 30px; text-align: right; } 
.main_popup .chk-box { font-size: 0; } 
.main_popup .chk-box span { display: inline-block; vertical-align: middle; font-size: 14px; color: #fff; position: relative; cursor: pointer; } 
.main_popup .chk-box img { width: 8px; display: inline-block; vertical-align: middle; margin-left: 10px; } 
.main_popup .close-btn { position: absolute; right: 30px; top: 30px; z-index: 21; max-width: 40px; width: 100%; cursor: pointer; } 
.main_banner .swiper-slide { height: 100%; position: relative; } 
.main_banner .swiper-slide .slide-bg { position:absolute; width: 100%; height: 100%; left: 0; top: 0; /*background-image: url('../images/main/main_banner_bg.png?ver=1'); */ background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #10121d; } 
.main_banner .swiper-slide .container { height: 100%; position: relative; } 
.main_banner .swiper-slide .container .flex { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; align-items: center; } 
.main_banner .swiper-slide .flex .left-wrap { width: 50%; } 
.main_banner .swiper-slide .txt-box span { font-size: 21px; margin-bottom: 10px; color: var(--sub-color); } 
.main_banner .swiper-slide .txt-box h2 { font-size: 48px; line-height: 1.33; } 
.main_banner .swiper-slide .txt-box p { margin-top: 50px; font-size: 18px; } 
.main_banner .swiper-slide .flex .left-wrap .btn-box { margin-top: 85px; } 
.main_banner .swiper-slide .flex .right-wrap { width: 50%; margin-top: 150px; } 
.main_banner .swiper-slide .flex .right-wrap .main-icon { animation: rotate1 12s linear infinite both; } 
.main_banner .swiper-slide .flex .right-wrap .main-icon img { transform: scale(0.8); transition: 1.5s; } 
.main_banner.active .swiper-slide .flex .right-wrap .main-icon img { transform: scale(1); transition: 1.5s; transition-delay: 0.4s; } 

@keyframes ani01 { 
 0% { opacity: 0; transform: translateY(20px); } 
100% { opacity: 1; transform: translateY(0px); } 
 }

.main_banner .swiper-slide .top-wrap { text-align: center; padding-top: 14%; position: relative; z-index: 3; opacity:0; transform: translateY(20px); } 
.main_banner.active .swiper-slide .top-wrap { animation: ani01 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 1; animation-direction: alternate; animation-delay: 0.8s; } 
.main_banner .swiper-slide .top-wrap h2 { font-size: 74px; color: transparent; background-clip: text; background-image: linear-gradient(90deg, #3cb8fd 0%, #117fe8 100%); font-weight: 900; margin-bottom: 10px; } 
.main_banner .swiper-slide .top-wrap h3 { font-size: 36px; font-weight: bold; color: #fff; margin-bottom: 30px; } 
.main_banner .swiper-slide .top-wrap p { font-size: 16px; color:#fff; } 
.main_banner .swiper-slide .top-wrap .btn-wrap { margin-top: 40px; } 
.main_banner .swiper-slide .top-wrap .btn-box a { display: flex; padding: 0 30px; line-height: 56px; background-color: #393d54; border-radius: 30px; font-size: 0; align-items: center; justify-content: center; min-width: 250px; } 
.main_banner .swiper-slide .top-wrap .btn-box a span { color: #fff; font-size: 16px; font-weight: 400; margin-right: 30px; } 
.main_banner .swiper-slide .top-wrap .btn-box:hover a { box-shadow: none; } 
.main_banner .swiper-slide .bottom-wrap { margin-top: 100px; height: 750px; } 
.main_banner .swiper-slide .bottom-wrap .move { height: 100%; } 
.main_banner.active .swiper-slide .bottom-wrap .move { animation: move-slide 1.5s forwards 1; animation-delay: 0.8s; } 
.main_banner .swiper-slide .bottom-wrap .img-frame { position: absolute; z-index: 2; width: 100%; height: 100%; } 
.main_banner .swiper-slide .bottom-wrap .img-frame img { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; } 
.main_banner .swiper-slide .bottom-wrap .img-frame .img { width: 110%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: 110%; background-position: top center; } 
.main_banner .swiper-slide .bottom-wrap .img-frame .img .dim { content: ''; display: block; width: 85%; height: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #0d0d0d; } 
.main_banner.active .swiper-slide .bottom-wrap .img-frame .img .dim { animation: dim 1.5s forwards 1; animation-delay: 0.6s; } 
.main_banner .swiper-slide .bottom-wrap .img-frame:before { content: ''; display: block; width: 185px; height: 280px; position: absolute; right: -40px; top: -205px; background-image: url('../images/main/main_banner_icon.png'); background-repeat: no-repeat; background-size: 185px; background-position: center; z-index: -1; transform: translate3d(0px, 10px, 10px); animation: move-modal 6s forwards infinite; } 
.main_banner .swiper-slide .bottom-wrap .img-frame #mobile { display: none; } 

@keyframes dim { 
 0% { opacity: 1; } 
100% { opacity: 0; } 
 }

.btn-box { display: inline-block; border-radius: 16px; } 
.btn-box a { display: inline-block; padding: 0 30px; line-height: 62px; background-color: #fff; border-radius: 16px; font-size: 0; transform: translateX(0); transition: 0.4s ease-in-out; } 
.btn-box:hover a { box-shadow: 0px 0px 4px 2px rgb(138 146 193 / 55%); transform: translateX(5px); transition: 0.4s ease-in-out; } 
.footer-inquiry .btn-box:hover a { box-shadow: 0px 0px 4px 2px rgb(138 146 193 / 55%); } 
.btn-box._02 { margin-left: 15px; } 
.btn-box._02 a { background-color: #c5cdff; } 
.btn-box a span { font-size: 18px; color: var(--main-color); font-weight: 700; display: inline-block; vertical-align: middle; margin-right: 35px; } 
.btn-box.blue a { background-color: #12173d; } 
.btn-box.blue a span { color: #fff; } 
.btn-box svg { transform: translateX(0px); transition: 0.4s linear; display: inline-block; vertical-align: middle; } 
.btn-box:hover svg { transform: translateX(5px); transition: 0.3s linear; transition-delay: 0.2s; } 
.tab02-inner01 .btn-box:hover a { transform: none; box-shadow: none; } 
.tab02-inner01 .btn-box a:first-child { margin-right: 10px; } 
.tab02-inner01 .btn-box a:last-child { background-color:var(--main-color); } 
.tab02-inner01 .btn-box a { transform: translateX(0); transition: 0.4s ease-in-out; } 
.tab02-inner01 .btn-box a:hover { box-shadow: 0px 0px 4px 2px rgb(138 146 193 / 55%); transform: translateX(5px); transition: 0.4s ease-in-out; } 

.main_banner .scroll-down { width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 45px; display: flex; align-items: center; justify-content: center; } 
.main_banner .scroll-down svg { animation: scroll 3s infinite forwards linear; opacity: 0; transform: translateY(-5px); display: block; height: 25px; } 

@keyframes scroll { 
 0% { transform: translateY(-5px); opacity: 0; } 

50% { transform: translateY(0px); opacity: 0.5; } 

100% { transform: translateY(5px); opacity: 1; } 
 }

.main-section01 { padding: 80px 0; position:relative; } 
.main-section01:after { content: ''; display: block; width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; top: 0; } 
.main-section01 h2 { font-size: 36px; font-weight: 900; margin-bottom: 25px; } 
.letter-wrap { display: flex; color:inherit; } 
.letter-wrap .letter { display: block; transform-origin: center bottom; color: inherit; } 
.main-section01 .flex { align-items: center; } 
.main-section01 .flex .left-wrap { width: 50%; padding-right: 50px; } 
.main-section01 .flex .right-wrap { width: 50%; } 
.main-section01 .btn-box { margin-top: 85px; } 
.main-section02 { background-image: url('../images/main/sub_banner.png?ver=1'); background-repeat: repeat; background-size: 300%; background-position: left center; padding-top: 160px; } 
.main-section02.active { animation: move_bg2 5s forwards 1 ease-out; } 

@keyframes move_bg2 { 
 0% { background-size: 300%; background-position: left center; } 

100% { background-size: 150%; background-position: center center; } 
 }

.main-section02 h2 { font-size: 36px; font-weight: 900; margin-bottom: 40px; } 
.main-section02 .flex { justify-content: space-between; } 
.main-section02 .flex .left-wrap { width: 45%; } 
.main-section02 .flex .right-wrap { width: 55%; } 
.main-section02 .prd-wrap { font-size: 0; } 
.main-section02 .prd-wrap .box { transform: translateY(20px); opacity: 0; display: inline-block; vertical-align: bottom; width: 50%; background-color: #fff; border-radius: 45px 45px 0 0; box-shadow: 0 -3px 20px 0 rgba(168, 207, 236, 0.5); padding: 25px; padding-top: 0; text-align: center; } 
.main-section02 .prd-wrap .box img { max-height: 185px; } 
.main-section02.active .prd-wrap .box { animation: move_box 0.6s forwards 1 linear; animation-delay: 0.4s; } 
.main-section02.active .prd-wrap .box:last-child { animation-delay: 1s; } 
.main-section02 .prd-wrap .box:first-child { margin-right: 30px; width: calc(50% - 15px); } 
.main-section02 .prd-wrap .box h3 { font-size: 21px; font-weight: 800; padding: 13px 0; line-height: 1; } 
.main-section02 .prd-wrap .box p { font-size: 14px; margin-bottom: 20px; text-align: left; } 

@keyframes move_box { 
 0% { transform: translateY(10px); opacity: 0; } 

50% { transform: translateY(-10px); opacity: 0.5; } 

100% { transform: translateY(0px); opacity: 1; } 
 }

.w100 { width: 100% !important; } 
.more-wrap { display: flex; } 
.more-wrap a { display: block; width: calc((100% - 10px) / 2); line-height: 56px; text-align: center; margin-right: 10px; font-size: 16px; font-weight: 700; border: 1px solid #b9b9b9; border-radius: 10px; transition: 0.5s; } 
.more-wrap a:last-child { margin-right: 0; } 
.more-wrap a.skybg { background-color: #d8ecfb; border-color: #d8ecfb; } 
.more-wrap a:hover { background-color: #d8ecfb; color: #000; transition: 0.5s; border-color: #d8ecfb; } 
.more-wrap a.skybg:hover { background-color: #b9b9b9; border-color: #b9b9b9; color: #000; } 
.main-section04 { background-color: #f9f9ff; padding: 145px 0; } 
.main-section04 h2 { font-size: 36px; font-weight: 900; text-align: center; margin-bottom: 45px; } 
.main-section04 .faq-wrap { padding: 0 10%; } 
.main-section04 .faq-wrap .faq-row { margin-bottom: 20px; } 
.main-section04 .faq-wrap .faq-row:last-child { margin-bottom: 0; } 
.main-section04 .faq-row .faq-title { display: flex; padding: 20px 30px; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 20px; box-shadow: 0 3px 20px 0 rgba(205, 205, 220, 0.3); cursor: pointer; } 
.main-section04 .faq-row .faq-title.on { border-radius: 20px 20px 0 0; } 
.main-section04 .faq-row .faq-title h3 { font-size: 18px; font-weight: 800; } 
.main-section04 .faq-row .faq-title .arrow-box { width: 60px; height: 60px; background-color: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; } 
.main-section04 .faq-row .faq-content { display: none; background-color: #f1f1f1; padding: 40px 30px; border-radius: 0 0 20px 20px; } 
.main-section04 .faq-row .faq-title .arrow-box img { transform: rotate(0deg); transform-origin: center; transition: transform 0.3s; } 
.main-section04 .faq-row .faq-title.on .arrow-box img { transform: rotate(-180deg); transition: transform 0.3s; } 
.main-section03 { padding-top: 80px; padding-bottom: 360px; background-color: #fff; } 
.main-section03 h2 { font-size:36px; margin-bottom: 10px; text-align: center; font-weight: 900; } 
.notice-wrap { overflow: hidden; padding-top: 45px; } 
.notice-wrap .swiper-wrapper { justify-content: center; } 
.notice-wrap .notice-box { box-shadow: 0 0px 20px 0px rgba(193, 193, 193, 0.3); border-radius: 30px; transform: translateY(0); transition: transform 0.2s linear; } 
.notice-wrap .notice-box:hover { transform: translateY(-5px); transition: transform 0.2s linear; } 
.notice-wrap .notice-box a { display: block; } 
.notice-wrap .notice-box .notice-img { height: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 61.34%; position: relative; } 
.notice-wrap .notice-box .notice-img img { border-radius: 20px 20px 0 0; background-color: #e2e2e2; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } 
.notice-wrap .notice-box .notice-img img.default { background-color:transparent; object-fit: cover; } 
.notice-wrap .notice-box .notice-txt { padding: 25px; background-color: #fff; border-radius: 0 0 20px 20px; } 
.notice-wrap .notice-box .notice-txt h3 { font-size: 20px; font-weight: 800; line-height: 1.2; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.notice-wrap .notice-box .notice-txt p { margin-bottom: 15px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; height: 50px; -webkit-box-orient: vertical; text-overflow: ellipsis; } 
.notice-wrap .notice-box .notice-txt .notice-date { display: block; font-size: 14px; color: #aeaeae; text-align: right; } 
.main-section03 .btn-box { margin-top: 30px; position: relative; left: 50%; transform: translateX(-50%); } 
.main-section03 .btn-box:hover { left: calc(50% + 5px); } 
.footer { position: relative; background-color: #e7e9ec; padding-bottom: 120px; } 
.footer-inquiry { background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 35px; height: 200px; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); max-width: 71.4%; top: -20px; opacity: 0; transition: 1s; background-color: var(--main-color); } 
.footer-inquiry.active, .footer-inquiry.active2 { top: -100px; opacity: 1; transition: 1s; } 
.footer-inquiry:after { content: ''; display: block; width: 313px; height: 300px; background-image: url('../images/common/footer_icon.png?ver=1'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 30px; bottom: -2px; z-index: 2; transform: translateX(-35%); opacity: 0; transition: 0.4s; } 
.footer-inquiry.active:after, .footer-inquiry.active2:after { opacity: 1; transform: translateX(0); transition: 0.6s; transition-delay: 0.2s; } 
.footer-inquiry .flex { justify-content: space-between; align-items: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding-left: 30%; padding-right: 5%; } 
.footer-inquiry .flex h3 { font-size: 30px; font-weight: 700; color: #fff; } 
.footer-row._01 { padding: 200px 0 0 0; } 
.footer-row._01 .flex { align-items: center; padding-bottom: 40px; border-bottom: 1px solid #c3c3d6; } 
.footer .flex { justify-content: space-between; } 
.footer-row._01 .footer-left { display: flex; align-items: center; } 
.footer-row._01 .footer-left .logo-box { font-size: 0; margin-right: 40px; } 
.footer-row._01 .footer-left .logo-box a { display:block; } 
.footer-row._01 .footer-left ul { font-size: 0; } 
.footer-row._01 .footer-left ul li { display: inline-block; vertical-align: top; margin-right: 20px; } 
.footer-row._01 .footer-left ul li a { color: #48556a; font-weight: bold; font-size: 18px; transition: color 0.2s; } 
.footer-row._01 .footer-left ul li a:hover { color: #1a2346; transition: color 0.2s; } 
.footer-row._01 .flex .footer-right .family-box { width: 210px; position: relative; cursor: pointer; } 
.footer-row._01 .flex .footer-right .family-box .family-title { width: 100%; height: 44px; border: 1px solid #48556a; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } 
.footer-row._01 .flex .footer-right .family-box .family-title p { line-height: 1; color: #48556a; font-weight: bold; } 
.footer-row._01 .flex .footer-right .family-box ul { display:none; position: absolute; left: 0; top: 50px; width: 100%; background-color: #48556a; border-radius: 18px; } 
.footer-row._01 .flex .footer-right .family-box ul li { margin: 0; width: 100%; } 
.footer-row._01 .flex .footer-right .family-box ul li a { font-size: 12px; color: #fff; display: block; padding: 15px 20px; } 
.footer-row._01 .flex .footer-right .family-box ul li a:hover { background-color: #1a2346; } 
.footer-row._01 .flex .footer-right .family-box ul li:first-child a { border-radius: 18px 18px 0 0; } 
.footer-row._01 .flex .footer-right .family-box ul li:last-child a { border-radius: 0 0 18px 18px; } 
.footer-row._01 .flex .footer-right .family-box img { transform: rotate(0); transform-origin: center; transition: 0.3s; } 
.footer-row._01 .flex .footer-right .family-box.on img { transform: rotate(180deg); transition: 0.3s; } 
.footer-row._02 { padding-top: 40px; } 
.footer-row._02 .flex .footer-left ul { font-size: 0; } 
.footer-row._02 .company-info li { display: inline-block; vertical-align: top; margin-right: 70px; margin-bottom: 5px; position:relative; } 
.footer-row._02 .company-info li:nth-child(1):after, .footer-row._02 .company-info li:nth-child(2):after { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 15px; background-color: #48556a; position: absolute; right: -35px; top: 3px; } 
.footer-row._02 .company-info li span, .footer-row._02 .company-info li a { color: #48556a; } 
.footer-row._02 .company-info li span:first-child { font-weight: bold; } 
.footer-row._02 .sns-box { display: flex; align-items: center; } 
.footer-row._02 .sns-box li { margin-right: 15px; } 
.footer-row._02 .sns-box li:last-child { margin-right: 0; } 
.footer-row._02 .sns-box li a { display: block; } 
.footer-row._02 .sns-box li a svg { display: block; height: 40px; object-fit: contain; } 
.footer-row._02 .logo-box { margin-bottom: 15px; } 
.top-btn { transform: scale(1.2); opacity: 0; transition: 0.3s; position: fixed; right: 60px; bottom: 60px; width: 100px; height: 100px; display: flex; background-color: rgba(18, 23, 61, 0.88); align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; box-shadow: 0 0px 10px 4px rgb(43 62 173 / 40%); transform: translateY(0); transition: 0.5s; z-index: 10; } 
.top-btn.show { transform: scale(1); opacity: 1; transition: 0.3s; } 
.top-btn:hover { transform: translateY(-5px); transition: 0.5s; } 
.top-btn p { font-size: 18px; color: #fff; } 
.fix-btn { position: fixed; z-index: 10; bottom: 60px; right: 60px; width: 100px; height: 100px; background-image: linear-gradient(180deg, rgba(59, 180, 251, 1) 11%, rgba(15, 122, 231, 1) 86%); box-shadow: 0 3px 15px 0 #8bcbff; border-radius: 20px; transform: scale(1); transition: 0.5s; } 
.fix-btn:hover { transform: scale(1.1); transition: 0.5s; } 
.fix-btn a { display: block; height: 100%; padding: 20px 0; text-align: center; } 
.fix-btn a p { color: #fff; } 

.sub-nav { background-color: #060e2f; } 
.sub-nav { padding-top: 136px; padding-bottom: 80px; } 
.sub-nav .flex { display: flex; justify-content: space-between; align-items: flex-end; border-top: 2px solid #707070; border-bottom: 2px solid #707070; padding: 40px 0; } 
.sub-nav .flex .nav-title h2 { font-size: 35px; font-weight: 900; } 
.sub-nav .flex ul { font-size: 0; } 
.sub-nav .flex ul li { display: inline-block; vertical-align: top; margin-right: 40px; position: relative; } 
.sub-nav .flex ul li:after { content: '>'; display: inline-block; vertical-align: middle; position: absolute; right: -25px; } 
.sub-nav .flex ul li:last-child { margin-right: 0; } 
.sub-nav .flex ul li:last-child:after { display: none; } 
.sub-nav .flex ul li.on a { font-weight: 700; } 

/* product */
.sub-banner { margin-top: 80px; position: relative; height: 0; padding-bottom: 19.3%; } 
.sub-banner .sub-banner-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background-repeat: repeat; background-size: 200%; background-position: left center; z-index: -1; animation: move_bg 3s forwards 1 ease-out; } 

@keyframes move_bg { 
 0% { background-size: 200%; background-position: left center; opacity: 0.5; } 

100% { background-size: 100%; background-position: center center; opacity: 1; } 
 }

.sub_page { overflow-x: hidden; } 
.sub-banner .sub-banner-txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:100%; text-align: center; opacity: 0; margin-top: 20px; transition: 0.8s linear; } 
.sub-banner .sub-banner-txt.active { opacity: 1; margin-top: 0; transition: 0.8s linear; } 
.sub-banner-txt h2 { font-size: 36px; font-weight: 800; margin-bottom: 15px; } 
.sub-banner .sub-banner-txt .btn-wrap { margin-top: 45px; display: flex; justify-content: center; } 
.sub-banner .sub-banner-txt .btn-wrap a { width: 200px; line-height: 50px; border-radius: 30px; background-color: #adcee5; color: #000; font-size: 18px; } 
.member_edit .sub-banner .sub-banner-txt .btn-wrap a { width: 300px; } 
.sub-banner .sub-banner-txt .btn-wrap a:first-child { margin-right: 15px; } 
.sub-banner .sub-banner-txt .btn-wrap a.on { background:linear-gradient(286deg, var(--c1, #67cdff), var(--c2, #0e7be7) 51%, var(--c1, #67cdff)) var(--x, 0)/ 200%; color:#fff; transition: 0.8s; } 
.sub-banner .sub-banner-txt .btn-wrap a.on:hover { --x: 100%; --c1: #0e7be7; --c2: #67cdff; transition: background 0.8s; } 
.product_page { background-color: #fff; } 
.product-content01 { padding-bottom: 100px; } 
.product-content01>h3 { text-align: center; } 
.product-content01 h3 { font-size: 28px; font-weight: 900; margin-bottom: 50px; transform: translateY(30px) scaleY(0.5); opacity:0; transition: 0.4s; } 
.product-content01.active h3 { transform: translateY(0px) scaleY(1); opacity: 1; transition: 1s; transition-delay: 0.2s; } 
.product-content01 .flex .box { width: calc((100% - 35px) / 2); margin-right: 35px; background-color: var(--main-color); border-radius: 70px; position: relative; height: 0; padding-bottom: 30.5%; cursor: pointer; } 
.product-content01.active .flex .box._01 { transform: translate3d(-60px, 0px, 30px); opacity: 0; animation: box_fade1 2s forwards 1 ease-in-out; animation-delay: 0.3s; } 
.product-content01.active .flex .box._02 { transform: translate3d(60px, 0px, 30px); opacity: 0; animation: box_fade2 2s forwards 1 ease-in-out; animation-delay: 0.3s; } 
.product-content01 .flex .box._02:last-child { margin-right: 0; } 
.product-content01 .flex .box .dim-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgb(6, 14, 47, 0.55); z-index: 1; } 
.product-content01 .flex .box.on .dim-bg { z-index: -1; background-color: transparent; } 
.product-content01 .flex .box:hover .dim-bg { z-index: -1; background-color: transparent; transition: 0.5s; } 

@keyframes box_fade1 { 
 0% { transform: translate3d(-60px, 0px, 30px); opacity: 0; } 

35% { transform: translate3d(0px, 0px, 30px); opacity: 0.55; } 

65% { transform: translate3d(0px, -5px, 30px); opacity: 1; } 

100% { transform: translate3d(0px, 0px, 30px); opacity: 1; } 
 }
@keyframes box_fade2 { 
 0% { transform: translate3d(60px, 0px, 30px); opacity: 0; } 

35% { transform: translate3d(0px, 0px, 30px); opacity: 0.55; } 

65% { transform: translate3d(0px, -5px, 30px); opacity: 1; } 

100% { transform: translate3d(0px, 0px, 30px); opacity: 1; } 
 }
.product-content01 .flex .box .txt-box { position: absolute; top: 90px; right: 70px; } 
.product-content01 .flex .box h3 { margin-bottom: 20px; } 
.more-btn-box { width: 310px; } 
.more-btn-box a { line-height: 63px; text-align: center; font-size: 18px; font-weight: 700; display: block; border: 1px solid #fff; border-radius: 32px; transition: 0.5s; } 
.more-btn-box a:hover { background-color: #fff; color: var(--main-color); transition: 0.5s; } 
.more-btn-box.black a { background-color:#060e2f; border-color: #060e2f; transition:0.5s; } 
.more-btn-box.black a:hover { background-color: #fff; color: #060e2f; transition:0.5s; } 
.product-content01 .flex .box:before { content: ''; display: block; width: 120px; height: 120px; background-color: #fff; border-radius: 50%; position: absolute; left: 35px; top: 55px; } 
.product-content01 .flex .box:after { content: ''; display: block; width: 150px; height: 210px; background-repeat: no-repeat; background-position: center; background-size: 90%; position: absolute; left: 15px; top: 0; } 
.product-content01 .flex .box._01:after { background-image: url('../images/product/prd01_1.png'); animation:twist 5s infinite alternate; } 
.product-content01 .flex .box._02:after { background-image: url('../images/product/prd01_2.png'); background-size: 75%; animation: updown 5s infinite; } 
.tab-title { border-bottom: 2px solid #d8ecfb; } 
.tab-title .container { padding: 0; } 
.tab-title ul { font-size: 0; } 
.tab-title ul li { display: inline-block; vertical-align: top; width: calc(100% / 2); position: relative; cursor: pointer; } 
.tab-title ul.grid2 { margin: 0 18%; } 
.tab-title ul.grid2 li { width: calc(100% / 2); } 
.tab-title ul li.on:before { content: ''; display: block; width: 100%; height: 3px; background-color: #12173d; position: absolute; left: 0; bottom: -2px; } 
.tab-title ul li a { display:block; text-align: center; font-size: 18px; color: #12173d; padding: 20px 0; } 
.tab-title ul li.on a { font-weight: bold; } 
.tab-title.sticky { position: fixed; width: 100%; top: 80px; z-index: 10; transition: 0.2s; background-color: rgba(18, 23, 61,0.9); border-bottom: none; max-width: 2560px; } 
.tab-title.sticky .container { max-width: 100%; padding:0; } 
.tab-title.sticky ul li.on { background-color: #d8ecfb; } 
.tab-title.sticky ul li a { color: #fff; padding: 10px 0; } 
.tab-title.sticky ul li.on a { color: #000; } 
.tab-title.sticky ul li.on:before { display:none; } 
.tab-title.sticky ul.grid2 { margin:0; } 
.tab01-inner01 { padding-bottom: 140px; text-align: center; } 
.tab-content-wrap .tab-content .inner h2 { font-size: 44px; font-weight: 800; text-align: center; } 
.tab-content-wrap .tab-content .inner h4 { font-size: 24px; font-weight: bold; margin-top: 15px; } 
.tab01-inner01 h4 { font-size: 20px; font-weight: 700; margin-top: 15px; } 
.tab01-inner01 p { text-align: center; margin-top: 40px; } 
.tab01-inner01 img { padding: 0 8%; } 
.tab01-inner01 .img { margin-top: 80px; margin-bottom: 85px; padding:30px 40px 50px; border-radius: 30px; border: 1px solid #eef5fb; } 
.tab01-inner01 .img .title { text-align: left; margin-bottom: 50px; } 
.tab01-inner01 .img span { display: inline-block; font-family: 'NanumSquareNeo', sans-serif; font-size: 22px; font-weight: 800; color: #12173d; background-color: #eef5fb; line-height: 65px; padding: 0 30px; border-radius: 100px; } 
.tab01-inner01 .img.bg { background-color: #eef5fb; } 
.tab01-inner01 .img.bg span { background-color: #fff; } 
.tab01-inner02 { padding-bottom: 145px; } 
.tab01-inner02 .flex { flex-wrap: wrap; } 
.tab01-inner02 .flex .box { width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 50px; } 
.tab01-inner02 .flex .box:nth-child(3n) { margin-right: 0; } 
.tab01-inner02 .flex .box svg { width: 100%; display: block; } 
.tab01-inner02 .flex .box p { margin-top: 20px; text-align: center; } 
#content01 { padding-top: 250px; margin-top: -150px; } 
#content02 { padding-top: 250px; background-color: #f9f9ff; padding-bottom: 360px; } 
.tab01-inner03 { padding-top: 145px; background-color: #f9f9ff; text-align: center; } 
.tab01-inner03 h4 { font-size: 20px; font-weight: bold; margin-top: 15px; } 
.tab01-inner03 .table-wrap { margin-top: 40px; padding: 0 10%; } 
.tab01-inner03 .table-wrap table { border-top: 3px solid #000; } 
.tab01-inner03 .table-wrap table tr { border-bottom: 1px solid #000; } 
.tab01-inner03 .table-wrap table tr th { font-size: 24px; font-weight: bold; padding: 25px 15px; text-align: center; border-right:1px solid #000; background-color: #eeeef9; line-height: 1.25; } 
.tab01-inner03 .table-wrap table tr td { font-size: 24px; padding: 25px 15px; text-align: center; border-right:1px solid #000; line-height: 1.25; } 
.tab01-inner03 .table-wrap table tr th:last-child { border-right: none; } 
.tab01-inner03 .table-wrap table tr td:last-child { border-right: none; } 
.tab01-inner04 { padding: 145px 0; } 
.tab01-inner04 h2 { font-size: 35px; font-weight: 900; text-align: center; margin-bottom: 40px; } 
.tab01-inner04 .flex { flex-wrap: wrap; margin: 0 10%; } 
.tab01-inner04 .flex .box { width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 50px; } 
.tab01-inner04 .flex .box:nth-child(2n) { margin-right: 0; } 
.tab01-inner04 .flex .box .img { margin-bottom: 20px; overflow: hidden; } 
.tab01-inner04 .flex .box .txt { } 
.tab01-inner04 .flex .box .txt ._title { margin-bottom: 20px; height: 50px; } 
.tab01-inner04 .flex .box .txt p { height: 50px; } 
.tab01-inner04 .flex .box .txt h3 { font-size: 24px; font-weight: 800; line-height: 1.2; } 
.tab01-inner04 .flex .box .txt span { } 
.tab01-inner04 .flex .box .txt span.emphasis { font-size: 16px; background-color: #041996; border-radius: 50px; color: #fff; padding: 0 20px; line-height: 40px; } 
.tab01-inner05 { background-color: #f9f9ff; padding-top: 110px; } 
.tab01-inner05 h2 { font-size: 35px; font-weight: 900; text-align: center; margin-bottom: 40px; } 
.tab01-inner05 .flex div { width: calc((100% - 120px) / 4); margin-right: 40px; } 
.tab01-inner05 .flex div:nth-child(4n) { margin-right: 0; } 
.tab01-inner05 .flex div p { font-size: 24px; font-weight: bold; text-align: center; margin-top: 15px; } 
.tab01-inner06 { background-color: #f9f9ff; padding-top: 110px; padding-bottom: 350px; } 
.tab01-inner06 h2 { font-size: 35px; font-weight: 900; text-align: center; margin-bottom: 40px; } 
.tab01-inner06 .flex { flex-wrap: wrap; } 
.tab01-inner06 .flex div { width: calc((100% - 120px) / 3); margin-right: 60px; margin-bottom: 40px; } 
.tab01-inner06 .flex div:nth-child(3n) { margin-right: 0; } 
.tab01-inner06 .flex div p { font-size: 24px; font-weight: bold; text-align: center; margin-top: 15px; } 
.tab01-inner07.inner { background-color: #f9f9ff; padding: 145px 0; text-align: center; } 
.tab01-inner07.inner img { margin-top: 80px; } 
.tab01-inner07.inner h3 { font-weight: 400; font-size: 22px; } 
.tab01-inner07.inner ul { margin-top: 60px; } 
.tab01-inner07.inner ul li { margin-bottom: 10px; } 
.tab01-inner07.inner ul li:last-child { margin-bottom: 0px; } 
.tab01-inner07.inner ul li span { position: relative; padding-left: 15px; font-size: 18px; } 
.tab01-inner07.inner ul li span:before { content: ''; display: block; width: 3px; height: 3px; background-color: #fff; border-radius: 50px; position: absolute; left: 0; top: 11px; } 
.tab02-inner01 { text-align: center; } 
.tab02-inner01 p { font-size: 24px; text-align: center; } 
.tab02-inner01 ul { margin-top: 60px; margin-bottom: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; } 
.tab02-inner01 ul li { font-size: 20px; margin-bottom: 5px; position: relative; padding-left: 15px; } 
.tab02-inner01 ul li:before { content: ''; display: block; width: 3px; height: 3px; background-color: #000; position: absolute; left: 0; top: 13px; border-radius: 50px; } 
.tab02-inner01 img { margin-top: 40px; padding: 0 10%; } 
.tab02-inner01 .table-wrap { margin: 40px 0; padding: 0 20%; } 
.tab02-inner01 .table-wrap table { border-top: 2px solid #515357; border-bottom: 2px solid #515357; } 
.tab02-inner01 .table-wrap table tr { border-bottom: 1px solid #dad8e5; } 
.tab02-inner01 .table-wrap table th, .tab02-inner01 .table-wrap table td { font-size: 20px; text-align: center; padding: 25px 0; } 
.tab02-inner01 .table-wrap table th { background-color: #ebebf8; width: 25%; } 
.tab02-inner01 .table-wrap table td { width: 75%; } 
.tab02-inner01 .btn-box { margin-top: 45px; } 
.tab02-inner01 .btn-box a { padding: 0 85px; display:inline-block; vertical-align: top; } 
.tab02-inner01 .btn-box a span { margin: 0; } 
.tab02-inner01 .btn-wrap { display: flex; width: auto; justify-content: center; margin-top: 60px; } 
.tab02-inner01 .btn-wrap .list-btn { margin: 0; } 
.tab02-inner01 .btn-wrap .list-btn:first-child { margin-right: 50px; } 
.tab03-inner01 { padding-top: 100px; padding-bottom: 360px; background-color: #f9f9ff; } 
.stand .tab03-inner01 { padding-top: 150px; } 
.tab03-inner01 .flex { justify-content: center; } 
.tab03-inner01 .flex .box { width: calc((100% - 80px) / 3); margin-right: 40px; border-radius: 50px; box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.07); padding: 50px 45px; text-align: center; } 
.tab03-inner01 .flex .box:last-child { margin-right: 0; } 
.tab03-inner01 .flex .box h4 { font-size: 30px; font-weight: 800; margin-bottom: 50px; } 
.tab03-inner01 .flex .box .desc { margin-top: 35px; border-top: 1px solid #d9d9d9; padding-top: 50px; } 
.tab03-inner01 .flex .box .desc h5 { font-size: 24px; font-weight: 800; margin-bottom: 20px; } 
.tab03-inner01 .flex .box .desc ul li { margin-bottom: 7px; } 
.tab03-inner01 .flex .box .desc ul li:last-child { margin-bottom: 0px; } 
.tab03-inner01 .flex .box .desc ul li span { position: relative; padding-left: 10px; } 
.tab03-inner01 .flex .box .desc ul li span:before { content: ''; display: block; width: 3px; height: 3px; background-color: #000; border-radius: 50%; position: absolute; left: 0; top: 10px; } 
.tab03-inner01 .buy-btn a { display: block; background-color: #12173d; color: #fff; line-height: 60px; border-radius: 15px; font-size: 18px; } 
.server-type .tab02-inner01 { background-color: #060e2f; } 
.server-type .tab02-inner01 .flex { justify-content: center; } 
.server-type .tab02-inner01 .flex .box { width: calc((100% - 40px) / 2); margin-right: 20px; cursor: pointer; border-radius: 20px; background-color: #1c233e; border: 3px solid #1c233e; padding: 35px; position: relative; text-align: center; transition: 0.4s; } 
.server-type .tab02-inner01 .flex .box:last-child { margin-right: 0; } 
.server-type .tab02-inner01 .flex .box:hover { border-color: var(--main-color); transition: 0.4s; } 
.server-type .tab02-inner01 .flex .box h4 { font-size: 28px; font-weight: 700; margin-bottom: 20px; } 
.server-type .tab02-inner01 .flex .box h5 { font-size: 20px; margin-bottom: 35px; } 
.server-type .tab02-inner01 .flex ul { margin: 35px 0; } 
.server-type .tab02-inner01 .flex ul li:before { background-color: #fff; } 
.price-td span { font-size: 20px; } 
.price-td .sale-price { text-decoration: line-through; color: #999; margin-right: 10px; font-size: 18px; } 
.tab02-inner01 .table-wrap table td p { font-size: 18px; margin-bottom: 20px; } 
.sub-title { text-align: center; } 
.sub-title h3 { margin-bottom: 20px; } 
.sub-title p { } 
.table-wrap { } 
table { width: 100%; table-layout: fixed; } 
table th, table td { vertical-align: middle; } 
.hidden { display: none; } 

/* login page */
input[type="password"] { font-family: 'Faktum Test'; } 
input[type="password"]::placeholder { font-family: "NanumSquare", sans-serif !important; } 
.login_page { padding-top: 200px; min-height: 110vh; } 
.login_page .login-box.join-box { max-width: 1020px; } 
.login_page .login-box { max-width: 800px; width: 100%; margin: 0 auto; margin-top: 60px; } 
.login_page .login-box .input-row input { width: 100%; border: none; line-height: 80px; background-color: #f5f5f5; border-radius: 20px; padding: 0 20px; font-size: 20px; color:#000; } 
.login_page .login-box .input-row input::placeholder { font-size: 20px; color:#333; } 
.login_page .chk-box { display: inherit; position: relative; } 
.login_page .chk-box label { display: flex; flex-direction: row; align-items: center; cursor: pointer; color:#333; font-size: 20px; } 
.login_page .chk-box label::before { content: ""; width: 30px; height: 30px; margin-right: 15px; background-image: url("../images/common/login_chk.png?ver=2"); background-size: 100%; background-repeat: no-repeat; background-position: center; border-radius: 10px; } 
.login_page .chk-box input[id="member_chk"]:checked + label::before { background-image: url("../images/common/login_chk_active.png"); } 
.login_page .chk-box input[id="member_chk"] { display: none; } 
.login_page .agree-wrap .chk-box input { display: none; } 
.login_page .agree-wrap .chk-box input:checked + label::before { background-image: url("../images/common/login_chk_active.png"); } 
.login_page .login-box button { border: none; position:relative; background-color: var(--main-color); border-radius: 20px; line-height: 80px; color: #fff; font-size: 18px; cursor: pointer; width: 100%; } 
.login_page .info-box ul { display: flex; justify-content: center; } 
.login_page .info-box ul li { margin-right: 55px; position: relative; line-height: 1; } 
.login_page .info-box ul li:last-child { margin-right: 0; } 
.login_page .info-box ul li:after { content: ''; display: block; width: 1px; height: 100%; position: absolute; right: -30px; top: 0; background-color: #808497; } 
.login_page .info-box ul li:last-child:after { display: none; } 
.login_page .info-box ul li a { font-size: 18px; color: #808497; line-height: 1; } 
.login_page .info-box ul li a:hover { color:var(--main-color); transition: 0.3s; } 
.login_page .join-box { padding-bottom: 360px; } 
.login_page .join-box .alert-info { font-size: 0; margin-bottom: 15px; } 
.login_page .join-box .alert-info label { font-size: 20px; font-weight: 700; display: inline-block; vertical-align: middle; } 
.login_page .login-box .input-row._email .input-box { display: flex; align-items: center; } 
.login_page .login-box .input-row input { width: 100%; border: none; line-height: 80px; background-color: #f5f5f5; border-radius: 20px; padding: 0 20px; font-size: 20px; color: #000; } 
.login_page .login-box .input-row input:focus { box-shadow: inset 0px 0px 10px 2px rgb(119 123 131 / 25%); background-color: rgb(140 212 255 / 15%); } 
.login_page .login-box .input-row._email .input-box span { margin: 0 10px; width: 20px; } 
select { cursor: pointer; } 
.login_page .login-box .input-row select { width: 100%; border: none; height: 80px; line-height: 80px; color: #000; background-color: #f5f5f5; border-radius: 20px; padding: 0 20px; font-size: 20px; appearance: none; background-image: url('../images/common/arrow_down.png?ver=1'); background-repeat: no-repeat; background-size: 13px; background-position: center right 20px; } 
.login_page .login-box .input-row._email select { margin-left: 20px; width: 360px; cursor: pointer; } 
.login_page .login-box .input-row._birth .input-box { display: flex; } 
.login_page .login-box .input-row._birth .input-box input[id="member_month"] { margin: 0 20px; } 
.login_page .join-box .btn-wrap { font-size: 0; margin-top: 80px; } 
.login_page .join-box .btn-wrap button { display: inline-block; vertical-align: top; width: 50%; } 
.login_page .join-box .btn-wrap button:last-child { margin-left: 10px; width: calc(50% - 10px); background-color: #404771; } 
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 
.input-box.id-comfirm-box { position: relative; } 
.input-box.id-comfirm-box button { position: absolute; width: 140px; top: 50%; right: 13px; line-height: 58px; transform: translateY(-50%); font-size: 16px; color: #f9f9ff; } 
.input-box.id-comfirm-box button:hover { box-shadow: 0px 0px 4px 2px rgb(76 88 153 / 35%); } 
.login_page .login-box .input-row._email .input-box input { width: 230px; } 
.login_page .login-box .input-row._email .input-box button { width: calc(100% - 520px); margin-left: 20px; } 
.input-row.sign_path .input-box { display: flex; } 
.input-row.sign_path .input-box select { width: 50%; } 
.input-row.sign_path .input-box input { width: 50%; margin-left: 20px; } 
.login_page .login-box .email-auth-box { display: flex; position: relative; padding-bottom: 30px; } 
.login_page .login-box .email-auth-box button { padding: 0 30px; margin-left: 20px; min-width: 150px; background-color: #303443; } 
.login_page .login-box .email-auth-box button.on { background-color: var(--main-color); } 
.login_page .login-box .email-auth-box span { position: absolute; left: 0; bottom: 0; } 
.login_page .login-box .input-row.phone .input-box { display: flex; } 
.login_page .login-box .input-row.phone .input-box input { margin-left: 20px; } 
.agree-row { display: flex; justify-content: space-between; align-items: center; padding: 25px 20px; background-color: #f5f5f5; } 
.agree-row .txt-box { width: 30%; text-align: right; } 
.agree-row .txt-box a { display: block; } 
.agree-wrap { margin-top: 60px; } 
.sub_page .agree-wrap h3 { text-align: center; margin-bottom: 30px; font-size: 28px; } 
.agree-wrap .all-agree { border-radius: 20px 20px 0 0; } 
.agree-wrap .agree-row:last-child { border-radius: 0 0 20px 20px; } 
.agree-row:hover .chk-box label { color: var(--main-color); } 
.agree-row .txt-box img { transform: translateX(0px); transition: 0.3s linear; } 
.agree-row:hover .txt-box img { transform: translateX(5px); transition: 0.3s linear; } 
.login_page .join-box .alert-info sup { position: relative; top: -3px; font-size: 15px; } 
.login_page .alert-info span { font-size: 16px; color: var(--main-color); display: inline-block; vertical-align: middle; margin-left: 15px; } 
.member-delete-wrap { margin-top: 30px; align-items: center; justify-content: center; } 
.member-delete-wrap p { margin-right: 20px; } 
.member-delete-wrap a { display: block; line-height: 40px; border: 1px solid #707070; border-radius: 12px; padding: 0 20px; transition: 0.3s; } 
.member-delete-wrap a:hover { background-color: #707070; color: #fff; transition: 0.3s; } 



/* password reset */
.pw-reset-popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; display: none; } 
.pw-reset-popup .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } 
.pw-reset-popup .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 100%; border-radius: 20px; } 
.pw-reset-popup .inner h2 { background-color: var(--main-color); padding: 30px 0; text-align: center; font-size: 24px; color: #f9f9ff; border-radius: 20px 20px 0 0; } 
.pw-reset-popup .inner .txt-box { background-color: #fff; border-radius: 0 0 20px 20px; padding: 40px; text-align: center; } 
.pw-reset-popup .inner .txt-box h3 { font-size: 20px; font-weight: 900; text-align: center; color: var(--main-color); margin-bottom: 10px; } 
.pw-reset-popup .inner .txt-box p { margin-bottom: 50px; } 
.pw-reset-popup .inner .txt-box a { display: block; width: 140px; text-align: center; margin: 0 auto; line-height: 50px; background-color: var(--main-color); border-radius: 25px; color: #fff; } 
.login_page .input-row .input-box p { font-size: 14px; color: rgba(249, 249, 255, 0.5); margin-top: 15px; } 
.login_page .login-box .confirm-wrap { text-align: center; } 
.login_page .login-box .confirm-wrap p { margin-bottom: 25px; } 
.login_page .login-box .confirm-wrap button { width: auto; min-width: 300px; } 
.pw-reset-popup .inner .popup-close { position: absolute; right: 0; top: -80px; z-index: 10; cursor: pointer; } 
.pw-reset-popup .inner .popup-close.okbtn { position: absolute; top: initial; right: 50%; transform: translateX(50%); bottom: 20px; } 
.memberok { color:var(--main-color) !important; } 
.memberalert { color:#ff0000 !important; } 
.pw_reset_desc { text-align: center; margin-bottom: 55px; } 

/* normal popup */
.layer-popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; display: none; } 
.layer-popup .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } 
.layer-popup .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 100%; border-radius: 20px; } 
.layer-popup .inner h2 { background-color: var(--main-color); padding: 30px 0; text-align: center; font-size: 24px; color: #f9f9ff; border-radius: 20px 20px 0 0; } 
.layer-popup .inner .txt-box { background-color: #fff; border-radius: 0 0 20px 20px; padding: 40px; text-align: center; } 
.layer-popup .inner .txt-box h3 { font-size: 20px; font-weight: 900; text-align: center; color: var(--main-color); margin-bottom: 10px; } 
.layer-popup .inner .txt-box p { margin-bottom: 50px; } 
.layer-popup .inner .txt-box a { display: block; width: 140px; text-align: center; margin: 0 auto; line-height: 50px; background-color: var(--main-color); border-radius: 25px; color: #fff; } 
.login_page .input-row .input-box p { font-size: 14px; color: rgba(249, 249, 255, 0.5); margin-top: 15px; } 
.login_page .login-box .confirm-wrap { text-align: center; } 
.login_page .login-box .confirm-wrap p { margin-bottom: 25px; } 
.layer-popup .inner .popup-close { position: absolute; right: 0; top: -80px; z-index: 10; cursor: pointer; } 

/* login popup */
.login-popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; display: none; } 
.login-popup .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } 
.login-popup .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 100%; border-radius: 20px; } 
.login-popup .inner h2 { background-color: var(--main-color); padding: 30px 0; text-align: center; font-size: 24px; color: #f9f9ff; border-radius: 20px 20px 0 0; } 
.login-popup .inner .txt-box { background-color: #fff; border-radius: 0 0 20px 20px; padding: 40px; text-align: center; } 
.login-popup .inner .txt-box h3 { font-size: 20px; font-weight: 900; text-align: center; color: var(--main-color); margin-bottom: 10px; } 
.login-popup .inner .txt-box p { margin-bottom: 50px; } 
.login-popup .inner .txt-box a { display: inline-block; width: 140px; text-align: center; margin: 0 auto; line-height: 50px; background-color: var(--main-color); border-radius: 25px; color: #fff; } 
.login-popup .inner .popup-login-close { cursor: pointer; background-color: #7a7a7a !important; } 
.login-popup .inner .popup-login-click { cursor: pointer; } 

/* buy_page */
.buy_page { padding-top: 150px; padding-bottom: 360px; } 
.buy-title { margin-bottom: 70px; } 
.buy-title p { font-weight: 700; } 
.buy-title span { display: inline-block; color: #666; } 
.buy-tab-content .buy-tab { display:none; } 
.buy-tab-content .buy-tab:first-child { display: block; } 
.buy-tab-content .buy-tab .flex .box { width: calc((100% - 80px) / 3); margin-right: 40px; border-radius: 30px; box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.07); padding: 50px 45px; text-align: center; position: relative; } 
.buy-tab-content .buy-tab .flex .box:last-child { margin-right: 0; } 
.buy-tab-content .buy-tab .flex .box h4 { font-size: 30px; font-weight: 800; } 
.buy-tab-content .buy-tab .flex .box h5 { font-size: 16px; color: #9191a8; font-weight: bold; } 
.price-area { margin-top: 30px; padding-bottom: 30px; border-bottom: 1px solid #d9d9d9; } 
.price-area .sale-price { font-size: 24px; font-weight: 700; text-decoration: line-through; color: #999; } 
.price-area .consumer-price { font-size: 36px; color: #006be2; font-weight: 800; } 
.buy-tab-content .buy-tab .flex .box .desc { margin-top: 35px; border-top: 1px solid #d9d9d9; padding-top: 50px; } 
.buy-tab-content .buy-tab .flex .box .desc h5 { font-size: 24px; font-weight: 800; margin-bottom: 20px; } 
.buy-tab-content .buy-tab .flex .box .desc ul li { margin-bottom: 7px; } 
.buy-tab-content .buy-tab .flex .box .desc ul li:last-child { margin-bottom: 0px; } 
.buy-tab-content .buy-tab .flex .box .desc ul li span { position: relative; padding-left: 10px; } 
.buy-tab-content .buy-tab .flex .box .desc ul li span:before { content: ''; display: block; width: 3px; height: 3px; background-color: #000; border-radius: 50%; position: absolute; left: 0; top: 10px; } 
.buy-content01 .flex { justify-content: center; } 
.buy-content01 .flex .box { width: calc((100% - 40px) / 2); margin-right: 20px; border-radius: 20px; background-color: #1c233e; border: 3px solid #1c233e; padding: 35px; position: relative; text-align: center; transition: 0.4s; } 
.buy-content01 .flex .box:last-child { margin-right: 0; } 
.buy-content01 .flex .box:hover { border-color: var(--main-color); transition: 0.4s; } 
.buy-content01 .flex .box:after { content: ''; display: block; opacity: 0; transition: 0.5s; width: 42px; height: 42px; background-image: url('../images/common/buy_chk.png'); background-repeat: no-repeat; background-position: center; background-size: contain; position:absolute; right: -20px; top: -20px; } 
.buy-content01 .flex .box.on { border-color: #041996; } 
.buy-content01 .flex .box.on:after { opacity: 1; transition: 0.5s; } 
.buy-content01 .flex .box .txt { display: flex; align-items: center; justify-content: space-between; } 
.buy-content01 .flex .box .txt h4 { font-size: 28px; font-weight: 700; } 
.buy-content01 .flex .box .txt h5 { font-size: 20px; } 
.buy-content01 .flex .box p { font-size: 20px; } 
.option-box .option-inner { display: flex; align-items: center; flex-direction: column; } 
.option-box .option-inner h6 { font-size: 16px; font-weight:bold; border-radius: 16px; margin-bottom: 10px; } 
.option-price { display: flex; align-items: center; } 
.option-price span { margin-right: 15px; } 
.option-calc { display: flex; background-color: #eee; padding: 5px; border-radius: 15px; cursor: pointer; } 
.option-calc input { width: 40px; background-color: transparent; text-align: center; } 
.minus-btn { position: relative; width: 31px; height: 31px; } 
.minus-btn img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
.minus-btn img.hover { opacity:0; } 
.minus-btn:hover img.hover { opacity:1; } 
.plus-btn { position: relative; width: 31px; height: 31px; } 
.plus-btn img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
.plus-btn img.hover { opacity:0; } 
.plus-btn:hover img.hover { opacity:1; } 
.buy-content01 .btn-wrap { max-width: 340px; width: 100%; margin: 0 auto; margin-top: 115px; } 
.buy-content01 .btn-wrap button { width: 100%; display: block; line-height: 66px; text-align: center; color: #f9f9ff; font-size: 20px; background-color: var(--main-color); border-radius: 40px; cursor: pointer; } 
.btn-wrap button { transition: 0.5s; } 
.btn-wrap button:hover { box-shadow: 0px 0px 8px 4px rgb(76 88 153 / 35%); transition: 0.5s; } 
button { transition: 0.5s; } 
button:hover { box-shadow: 0px 0px 8px 6px rgb(76 88 153 / 35%); transition: 0.5s; } 
.buy-content01 .flex .box h4 { font-size: 28px; font-weight: 700; margin-bottom: 20px; } 
.buy-content01 .flex .box h5 { font-size: 20px; margin-bottom: 35px; } 
.buy-btn { width: 100%; margin: 0 auto; margin-top: 30px; } 
.buy-btn a { display: block; background-color: #e8f7ff; line-height: 50px; border-radius: 15px; font-size: 20px; color: #0441bc; font-weight: bold; transition: 0.2s; } 
.buy-btn a:hover { background-color: #0441bc; color: #ffffff; transition: 0.2s; } 
.buy-info { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } 
.buy-info p { color: #787878; font-size: 16px; } 
.buy-info a { font-size: 20px; } 
.qr-btn { max-width: 100px; width: 100%; margin: 0 auto; margin-top: 25px; } 
.buy_confirm_page { padding-top: 150px; padding-bottom: 360px; } 
.buy-confirm01 ul { max-width: 650px; width: 100%; margin: 0 auto; margin-top: 80px; } 
.buy-confirm01 ul li { padding: 25px 20px; position: relative; display: flex; justify-content: space-between; align-items: center; } 
.buy-confirm01 ul li:before { content: ''; display: block; width: 100%; height: 2px; background-color: #707070; position: absolute; left: 0; top: 0; z-index: 2; } 
.buy-confirm01 ul li:nth-child(2):before { width: 75%; } 
.buy-confirm01 ul .price-txt { position: absolute; right: 0; top: 0px; width: 25%; height: 160px; background-color: #f5f5f5; z-index: 1; display: flex; justify-content: center; align-items: center; } 
.buy-confirm01 ul li span { font-size: 20px; } 
.buy-confirm01 ul li.emphasis { display: flex; justify-content: space-between; background-color: #f5f5f5; border-top: none; } 
.buy-confirm01 ul li.emphasis span:first-child { font-weight: 700; } 
.confirm-btn-wrap { max-width: 650px; width: 100%; margin: 0 auto; margin-top: 35px; } 
.confirm-btn { max-width: 230px; width: 100%; margin-left: auto; } 
.confirm-btn a { display: block; background-color: var(--main-color); border-radius: 40px; font-size: 20px; line-height: 66px; text-align: center; color: #f9f9ff; cursor: pointer; } 
.confirm-btn button { display: block; width: 100%; background-color: var(--main-color); border-radius: 40px; font-size: 20px; line-height: 66px; text-align: center; color: #f9f9ff; cursor: pointer; } 
.buy-title h4 { font-size: 24px; } 
.buy-tab-content .buy-tab .desc { margin-top: 150px; background-color: #233349; border-radius: 30px; padding: 30px 40px; position: relative; } 
.buy-tab-content .buy-tab .desc:after { content: ''; display: block; width: 378px; height: 320px; position: absolute; right: 0; bottom: 0; background-image: url('../images/buy/feature_bg.png'); background-repeat: no-repeat; background-position: center; background-size: contain; } 
.buy-tab-content .buy-tab .desc h5 { font-size: 28px; font-weight: 800; color: #03adff; margin-bottom: 20px; } 
.buy-tab-content .buy-tab .desc ul { display: flex; flex-wrap: wrap; max-width: 70%; } 
.buy-tab-content .buy-tab .desc ul li { width: 50%; margin-bottom: 3px; padding-left: 15px; position: relative; } 
.buy-tab-content .buy-tab .desc ul li:before { content: ''; display: block; width: 3px; height: 3px; position: absolute; left: 0; top: 12px; background-color: #e2efff; border-radius: 50px; } 
.buy-tab-content .buy-tab .desc ul li span { font-size: 18px; color: #e2efff; font-weight: 300; } 
.buy-tab-content .buy-tab .flex .box .mark { position: absolute; right: 20px; top: 20px; background-color: #20232e; border-radius: 50px; } 
.buy-tab-content .buy-tab .flex .box .mark span { font-size: 16px; color: #43d8ff; padding: 0 10px; line-height: 28px; } 

/* download page */
.download_page, .experience_page { padding-bottom: 360px; } 
.download_page { padding-top: 150px; } 
.sub_page h3 { font-size: 44px; font-weight: 800; } 
.download-section01 .flex { margin: 0 12.5%; justify-content: center; } 
.download-section01 .flex .box { width: 50%; background-color: #fff; box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.07); border-radius: 45px; padding: 50px 30px 25px; } 
.download-section01 .left-wrap { transform:translate3d(-60px, 0px, 30px); opacity: 0; animation: box_fade1 2s forwards 1 ease-in-out; animation-delay: 0.3s; } 
.download-section01 .right-wrap { transform: translate3d(60px, 0px, 30px); opacity: 0; animation: box_fade2 2s forwards 1 ease-in-out; animation-delay: 0.3s; } 
.download-section01 .flex .box .title-box { display: flex; align-items: center; justify-content: center; margin-bottom: 25px; flex-direction: column; text-align: center; } 
.download-section01 .flex .box .title-box h3 { font-size: 28px; } 
.download-section01 .flex .box .title-box .icon { margin-top: 30px; } 
.download-section01 .left-wrap .title-box img { animation: twist 5s infinite alternate; } 
.download-section01 .right-wrap .title-box img { animation: updown 4s infinite; } 
.download-section01 .flex .box .desc .text-box { margin-bottom: 50px; text-align: center; } 
.download-section01 .flex .box .desc .text-box p { height: 70px; } 
.download-section01 .flex .box .desc .btn-wrap { display: flex; justify-content: center; } 
.btn-wrap .down-btn { transform: translateY(0px); transition: 0.4s; width: 50%; } 
.btn-wrap .down-btn:first-child { margin-right: 10px; width: calc(50% - 10px); } 
.btn-wrap .down-btn:hover { transform: translateY(2px); transition: 0.4s; } 
.btn-wrap .down-btn a { background-color: var(--main-color); border-radius: 80px; line-height: 65px; display: flex; align-items: center; justify-content: center; } 
.btn-wrap .down-btn.gray a { background-color: #70707a; } 
.btn-wrap .down-btn a img { margin-left: 30px; } 
.btn-wrap { width: 100%; } 
.btn-wrap a { width: 100%; line-height: 82px; border-radius: 41px; display: block; text-align: center; color: #fff; } 
.btn-wrap.black a { background-color: #060e2f; border-color: #060e2f; } 
.btn-wrap a span { font-size: 18px; font-weight: 700; color: inherit; } 
.btn-wrap.black a span { font-size: 24px; } 
.download_page .btn-wrap.black a span { font-size: 18px; } 
.down-btn-mobile { display:none; } 

/* experience page */
.experience_page { padding-top: 200px; } 
.experience-section01 h2 { font-size: 36px; text-align: center; } 
.experience-section01 .box-wrap { background-color: #fff; border-radius: 40px; padding: 30px 40px; margin: 0 18%; position: relative; box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.07); text-align: center; } 
.experience-section01 .box-wrap h3 { font-size: 20px; font-weight: 800; } 
.experience-section01 .box-wrap .choose_box { } 
.experience_page .choose_box .box { width: calc((100% - 60px) / 4); text-align: center; margin-right: 20px; background-color: #f5f5f5; border-radius: 30px; cursor: pointer; } 
.experience_page .choose_box .box.on { background-color: var(--main-color); } 
.experience_page .choose_box .box.on span { color:#fff; } 
.experience_page .choose_box .box:nth-child(4n) { margin-right: 0; } 
.experience_page .choose_box .box span { line-height: 1.25; padding: 15px 0; display: block; } 
#file-zone { background-color: #f5f5f5; border-radius: 30px; margin-top: 20px; position: relative; height: 55vh; cursor: pointer; } 
#file-zone .txt-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
#file-zone .txt-box p { margin-top: 25px; color:#c5c5c5; } 
#file-zone #file-upload { display: none; } 
#file-zone #image-preview { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 100%; object-fit: contain; display: none; } 
.experience-section01 .box-wrap .btn-wrap { max-width: 300px; margin: 0 auto; margin-top: 30px; cursor: pointer; } 
.experience-section01 .box-wrap .btn-wrap span { display: none; line-height: 54px; border-radius: 27px; background-color: var(--main-color); color: #fff; text-align: center; } 
.load-popup { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 20; display: none; } 
.load-popup .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } 
.load-popup .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 800px; width: 100%; border-radius: 20px; height: calc(55vh + 96px); background-color: #fff; } 
.load-popup .inner h2 { background-color: var(--main-color); padding: 30px 0; text-align: center; font-size: 24px; color: #f9f9ff; border-radius: 20px 20px 0 0; } 
.load-popup .inner .img-box { background-color: #fff; border-radius: 0 0 20px 20px; padding: 40px; text-align: center; width: 100%; height: 55vh; } 
.load-popup .inner .img-box img { max-height: 100%; object-fit: contain; margin-left: auto; margin-right: auto; } 
.loading-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
#loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; /* visibility: hidden; *//* opacity: 0; */transition: opacity 0.3s, visibility 0.3s; z-index: 20; } 
#loading-overlay .loading-icon { border: 8px solid #f3f3f3; border-top: 8px solid var(--global-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } 
#loading-overlay .loading-text { color: #000; padding-left: 20px; } 
.load-popup .inner #close-btn { position: absolute; right: -80px; top: 0px; cursor: pointer; z-index: 10; } 

@keyframes spin { 
 0% { transform: rotate(0deg); } 

100% { transform: rotate(360deg); } 
 }

.experience_page .btn-box { width: 100%; } 
.experience_page .btn-box a { line-height: 82px; border-radius: 40px; } 
.experience_page .btn-box a span { font-size: 24px; font-weight: 900; } 

/* notice */
.notice .sub-nav { position: relative; z-index: 1; } 
.notice .sub-nav:after { content: ''; display: block; width: 100%; height: calc(100% + 112px); position: absolute; left: 0; top: 0px; background-color: #060e2f; z-index: -1; border-radius: 0 0 120px 120px; } 
.notice_page { padding-bottom: 360px; } 
.notice-info { margin-bottom: 20px; } 
.notice-info span { font-size: 24px; font-weight: 900; } 
.notice-section01 { padding-bottom: 70px; } 
.notice-section01 h3 { position: relative; z-index: 1; } 
.notice-section02 { padding-top: 150px; } 
.notice-section02 ul { border-top: 1px solid #575151; position: relative; } 
.notice-section02 ul:before { content: ''; display: block; width: 100px; height: 145px; background-image: url('../images/main/notice_icon.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; right: 0; top: -120px; z-index: 2; animation: rotate1 10s linear infinite both; } 
.notice-section02 ul li { display: flex; height: 106px; align-items: center; border-bottom: 1px solid #d3d3d3; } 
.notice-section02 ul li .notice-date { width: 106px; text-align: center; } 
.notice-section02 ul li .notice-date h4 { font-size: 35px; font-weight: bold; color: #3c4360; } 
.notice-section02 ul li .notice-date p { font-size: 20px; font-weight: bold; color: #3c4360; } 
.notice-section02 ul li .notice-title { width: calc(100% - 106px - 106px - 106px); padding-left: 75px; margin-right: 106px; } 
.notice-section02 ul li .notice-title a { display: block; } 
.notice-section02 ul li .notice-title h3 { font-size: 20px; font-weight: 900; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; } 
.notice-section02 ul li .notice-title p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
.notice-section02 ul li .arrow { width: 106px; height: 100%; display: flex; justify-content: center; align-items: center; } 
.notice-section02 ul li .arrow svg { transform: translateX(0px); transition: 0.8s linear; } 
.notice-section02 ul li:hover .arrow svg { transform: translateX(10px); transition: 0.8s linear; } 
.notice-section02 ul li:hover .arrow svg .stroke-color { stroke: var(--main-color) !important; } 
.pagination-box { margin-top: 70px; display: flex; align-items: center; justify-content: center; } 
.pagination-box .arrow img { display: block; margin-top: 2px; } 
.pagination-box .num-box { font-size: 0; margin: 0 30px; } 
.pagination-box .num-box a { display: inline-block; vertical-align: top; font-weight: bold; padding: 0 5px; margin-right: 25px; position: relative; } 
.pagination-box .num-box a:last-child { margin-right: 0; } 
.pagination-box .num-box a.on:after { content: ''; display: block; width: 20px; height: 1px; background-color: var(--main-color); position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; } 
.notice-section02 .notice-wrap { display: flex; flex-wrap: wrap; justify-content: center; } 
.notice-section02 .notice-wrap .notice-box { width: calc((100% - 75px) / 4); margin-right: 25px; margin-bottom: 30px; } 
.notice-section02 .notice-wrap .notice-box:nth-child(4n) { margin-right: 0; } 


/* notice view */
.notice-section02 h2 { font-size: 40px; font-weight: bold; margin-bottom: 25px; } 
.notice-section02 .view-info { border-top: 1px solid #000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; padding: 12px 0; } 
.notice-section02 .view-info .view-date { margin-right: 50px; padding-left: 30px; position: relative; } 
.notice-section02 .view-info .view-date:before { content: ''; display: block; width: 18px; height: 18px; background-image: url('../images/notice/icon_date.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 0; top: 3px; } 
.notice-section02 .view-info .view-count { padding-left: 30px; position: relative; } 
.notice-section02 .view-info .view-count:before { content: ''; display: block; width: 18px; height: 18px; background-image: url('../images/notice/icon_view.png'); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: 0; top: 3px; } 
.notice-section02 .view-content { padding: 30px 0; } 
.notice-section02 .view-content img { max-width: 100%; height: auto !important; } 
.notice-section02 .view-file { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 
.notice-section02 .view-file p { font-size: 14px; font-weight: bold; margin-right: 35px; } 
.notice-section02 .view-file a { display: block; font-size: 14px; color: #3e3a39; } 
.notice_page .list-btn { max-width: 220px; width: 100%; margin-left: auto; margin-right:0; margin-top: 30px; } 
.notice_page .list-btn a { display: block; background-color: #eee; text-align: center; color: #000; border-radius: 15px; line-height: 66px; font-size: 20px; border: 1px solid #e5e5e5; transition: 0.3s; } 
.notice_page .list-btn a:hover { background-color: var(--main-color); color:#fff; box-shadow:none; transition: 0.3s; } 
.list-btn { max-width: 280px; width: 100%; margin: 0 auto; margin-top: 30px; } 
.list-btn a { display: block; background-color: var(--main-color); text-align: center; color: #fff; border-radius: 15px; line-height: 66px; font-size: 20px; transition: 0.3s; } 
.list-btn a:hover { box-shadow: 0px 0px 6px 3px rgb(138 146 193 / 55%); transition: 0.3s; } 
.view-pagination-box { margin-top: 100px; } 
.view-pagination-box .pagination-row { border-bottom: 1px solid rgba(0, 0, 0, 0.2); } 
.view-pagination-box .pagination-row:first-child { border-top: 1px solid rgba(0, 0, 0, 0.2); } 
.view-pagination-box .pagination-row:hover { background-color: #0419960a; } 
.view-pagination-box .pagination-row a { display: flex; align-items: center; padding: 30px 20px; } 
.view-pagination-box .pagination-row .pag-btn { font-size: 0; margin-right: 120px; } 
.view-pagination-box .pagination-row .pag-btn img { vertical-align: middle; } 
.view-pagination-box .pagination-row .pag-btn span { margin-left: 20px; font-size: 18px; font-weight: bold; vertical-align: middle; } 
.view-pagination-box .pagination-row .pag-title p { font-size: 18px; } 

/* inquiry */
.inquiry_page { padding-bottom: 360px; } 
.inquiry-section01 { padding-top: 200px; } 
.sub-banner-txt { text-align: center; } 
.inquiry-wrap .input-row { display: flex; } 
.inquiry-wrap .input-row .input-box { width: 100%; } 
.inquiry-wrap .input-row.grid2 .input-box { width: 50%; margin-right: 20px; } 
.inquiry-wrap .input-row.grid2 .input-box:nth-child(2n) { margin-right: 0; } 
.inquiry-wrap .input-row input { width: 100%; border: none; background-color: #f5f5f5; border-radius: 20px; line-height: 80px; padding: 0 20px; font-size: 20px; color: #000; } 
.inquiry-wrap .input-row input::placeholder { font-size:20px; color:#333; } 
.inquiry-wrap .input-row input:focus { box-shadow: inset 0px 0px 10px 2px rgb(119 123 131 / 25%); background-color: rgb(140 212 255 / 15%); } 
.inquiry-wrap .input-row h4 { font-size: 20px; margin-right: 50px; } 
.inquiry-wrap .input-row .chk-wrap { display: flex; } 
.inquiry-wrap .input-row .chk-wrap .chk-box { font-size: 0; margin-right: 40px; } 
.inquiry-wrap .input-row .chk-wrap .chk-box input { display: none; } 
.inquiry-wrap .input-row .chk-wrap label { display: inline-block; vertical-align: middle; font-size: 20px; color: #000; padding-left: 45px; position: relative; cursor: pointer; } 
.inquiry-wrap .input-row .chk-wrap label:before { content: ''; display: block; width: 30px; height: 30px; position: absolute; left: 0; top: 0; background-image: url('../images/common/login_chk.png?ver=2'); border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: 30px; } 
.inquiry-wrap .input-row .chk-wrap input:checked + label:before { background-image: url('../images/common/login_chk_active.png?ver=1'); } 
.inquiry-wrap .input-row .input-box textarea { width: 100%; height: 250px; background-color: #f5f5f5; border-radius: 20px; padding: 30px 20px; resize: none; font-size: 20px; color: #000; } 
.inquiry-wrap .input-row .input-box textarea::placeholder { font-size:20px; color:#333; } 
.inquiry-wrap .input-row .input-box textarea:focus { box-shadow: inset 0px 0px 10px 2px rgb(119 123 131 / 25%); background-color: rgb(140 212 255 / 15%); } 
textarea::-webkit-scrollbar { width: 8px; } 
textarea::-webkit-scrollbar-thumb { background-color:rgb(150 162 255 / 75%); border-radius:10px; } 
textarea::-webkit-scrollbar-track { background-color:rgba(122,122,122,0); border-radius:10px; } 
.inquiry-wrap .input-row .input-box .agree-box { width: 100%; height: 250px; background-color: #f5f5f5; border-radius: 20px; padding: 30px 20px; overflow-y:auto; font-size: 20px; color: #000; } 
.inquiry-wrap .input-row .input-box .agree-box p { font-size: 20px; color:#333; } 
.inquiry-wrap .agree-row .chk-box { display: inherit; position: relative; } 
.inquiry-wrap .agree-row .chk-box input { display: none; } 
.inquiry-wrap .agree-row .chk-box label { display: flex; flex-direction: row; align-items: center; cursor: pointer; color: #000; font-size: 20px; } 
.inquiry-wrap .agree-row .chk-box label::before { content: ""; width: 30px; height: 30px; margin-right: 15px; background-image: url(../images/common/login_chk.png?ver=2); border-radius: 10px; background-size: 100%; background-repeat: no-repeat; background-position: center; } 
.inquiry-wrap .agree-row .chk-box input:checked + label::before { background-image: url(../images/common/login_chk_active.png); } 


/* guide */
.guide .sub-nav { position: relative; z-index: 1; } 
.guide .sub-nav:after { content: ''; display: block; width: 100%; height: calc(100% + 112px); position: absolute; left: 0; top: 0px; background-color: #060e2f; z-index: -1; border-radius: 0 0 120px 120px; } 
.guide-section01 h3 { position: relative; z-index: 1; } 
.guide-section01 { } 
.guide-section02 { padding-top: 150px; padding-bottom: 350px; } 
.guide-section02 .txt-row { padding-top: 150px; margin-top: -50px; } 
.guide-section02 .txt-row h4 { font-size: 35px; font-weight: 800; margin-bottom: 40px; } 
.guide-section02 .txt-row p { margin-bottom: 5px; line-height: 180%; } 
.num_list { padding-left: 20px; margin-top: 30px; } 
.num_list li { list-style: decimal; margin-bottom: 5px; } 


/* order */
.order_page { padding-bottom: 360px; } 
.order-content01 { padding-top: 150px; } 
.order-content01 .table-wrap { margin-top: 35px; } 
.order-content01 .table-wrap table { border-top: 1px solid #707070; } 
.order-content01 .table-wrap table th, .order-content01 .table-wrap table td { padding: 25px 20px; text-align: center; } 
.order-content01 .table-wrap table th { font-weight: bold; } 
.order-content01 .table-wrap table tr { border-bottom: 1px solid #e6e4e4; } 
.order-content01 .table-wrap table tbody tr:nth-child(2n) { background-color: #f9f9f9; } 
.order-content01 .table-wrap table .chk { width: 200px; } 
.order-content01 .table-wrap table .order_date { } 
.order-content01 .table-wrap table .order_name { } 
.order-content01 .table-wrap table .order_price { } 
.order-content01 .table-wrap table .order_period { } 
.order-content01 .table-wrap table .txt-inner .plus_date { color: #041996; font-weight: bold; } 
.order-content01 .table-wrap table .txt-inner .viewer-txt { color:#03adff; } 
.order_page .current-info { margin-top: 50px; } 
.order_page .current-info table tr { border-bottom: 1px solid #e6e4e4; } 
.order_page .current-info table thead th { background-color: rgba(18, 23, 61, 0.9); padding: 10px 0; font-weight: bold; color: #fff; } 
.order_page .current-info table th, .order_page .current-info table td { font-size: 16px; text-align: center; padding: 10px 10px; vertical-align: middle; } 
.order_page .current-info table tbody th { border-right: 1px solid #e6e4e4; } 
.order_page .current-info p { font-size: 14px; text-align: right; margin-bottom: 5px; } 
.chk .chk-box { display: inherit; position: relative; width: 30px; height: 30px; } 
.chk .chk-box input { display: none; } 
.chk .chk-box label { display: inline-block; vertical-align: middle; font-size: 20px; color: #000; padding-left: 45px; position: absolute; left:0; top:0; height: 100%; cursor: pointer; } 
.chk .chk-box label:before { content: ''; display: block; width: 30px; height: 30px; position: absolute; left: 0; top: 0; background-image: url('../images/common/login_chk.png?ver=2'); border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: 30px; } 
.chk .chk-box input:checked + label:before { background-image: url('../images/common/login_chk_active.png?ver=1'); } 
.order-content01 .btn-wrap { display: flex; justify-content: center; margin-top: 85px; } 
.order-content01 .btn-wrap button { border: none; position: relative; background-color: var(--main-color); border-radius: 20px; line-height: 80px; color: #fff; font-size: 20px; cursor: pointer; text-align: center; min-width: 305px; } 
#cancel_order { background-color: #041996; border-radius: 8px; line-height: 1.2; color: #fff; padding: 0 10px; margin-top: 5px; height: 50px; } 
#cancel_order:hover { box-shadow: none; background-color: #b9b9b9; } 
.h_auto { height: auto !important } 
.experience-section01 .box-txt { margin: 0 18%; margin-top: 50px; } 


@keyframes updown { 
 0% { transform: translate3d(0px, -10px, 10px) } 
50% { transform: translate3d(0px, 0px, 0px) } 
100% { transform: translate3d(0px, -10px, 10px) } 
 }

@keyframes twist { 
 0% { transform: rotate(5deg) } 
100% { transform: rotate(-8deg) } 
 }

@keyframes scale1 { 
 0% { transform: scale(1.1); } 

50% { transform: scale(1); } 

100% { transform: scale(1.1); } 
 }

@keyframes vis { 
 0% { opacity: 0; } 

100% { opacity: 1; } 
 }


@keyframes rotate1 { 
 0% { transform: translate3d(0px, 30px, 30px) } 

50% { transform: translate3d(0px, 0px, 0px) } 

100% { transform: translate3d(0px, 30px, 30px) } 
 }

@keyframes rotate2 { 
 0% { transform: rotate(-90deg) } 
100% { transform: rotate(0deg) } 
 }

@keyframes move-modal { 
 0% { transform: translate3d(0px, 10px, 10px) } 

50% { transform: translate3d(0px, 0px, 0px) } 

100% { transform: translate3d(0px, 10px, 10px) } 
 }

@keyframes move-slide { 
 0% { transform: translateY(0); } 

50% { transform: translateY(-20px); } 

100% { transform: translateY(0); } 
 }

/* 20240802 */
.main-section04 .faq-row .faq-content p a { text-decoration: underline; }