@charset "utf-8"; /*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/


@font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url(../font/Pretendard/woff2/Pretendard-Black.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Black.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url(../font/Pretendard/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-ExtraBold.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url(../font/Pretendard/woff2/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Bold.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url(../font/Pretendard/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-SemiBold.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url(../font/Pretendard/woff2/Pretendard-Medium.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Medium.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url(../font/Pretendard/woff2/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Regular.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url(../font/Pretendard/woff2/Pretendard-Light.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Light.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url(../font/Pretendard/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-ExtraLight.woff) format('woff'); } 

@font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url(../font/Pretendard/woff2/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard/woff/Pretendard-Thin.woff) format('woff'); } 


/* ===========================================================================================
basic style reset
=========================================================================================== */

html { position:relative; height:100vh; font-size:10px; box-sizing:border-box; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; letter-spacing:0; } 
*,::after,::before { box-sizing:border-box; } 
body { margin:0; padding:0; font-size:1.6rem; font-weight:400; letter-spacing: -0.025em; font-family:'Pretendard', 'Noto Sans KR','Malgun Gothic','맑은 고딕',Dotum,'돋움',sans-serif; line-height:1.4; color:#121214 } 

dd,dl,dt,li,ol,ul { margin:0; padding:0; list-style:none } 
h1,h2,h3,h4,h5,h6,p { margin:0; padding:0 } 
a { color:inherit; text-decoration:none } 
img { border:0; vertical-align:middle; font-size:0; max-width:100%; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } 
table { border-collapse:collapse; width:100%; table-layout:fixed; } 
caption,legend { width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 } 
input,select,textarea { color:#121214; font-size:1.6rem } 
input,select { vertical-align:middle } 
input::-moz-placeholder { color: #71727D; opacity: 1; } 
/*input:-ms-input-placeholder { color: #908B8B; } */
input::-webkit-input-placeholder { color: #71727D; } 
input::placeholder { color: #71727D; } 
input[type=password],
input[type=text],
select { color:inherit; background-color:#fff; background-image:none; -webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; } 
input[type=password]:focus,
input[type=text]:focus,
input[type=number]:focus,
select:focus,
textarea:focus { border-color: #ABABAB; } 
input[disabled],
input[readonly] { background-color: #eee; color:#908B8B; opacity: 1; } 
input[disabled] { cursor: not-allowed; } 
address,em,i { font-style:normal } 
button { color:inherit; border:0; padding:0; background:0 0; cursor:pointer } 
hr { margin:0; border:none; padding:0; display:block } 
figcaption,figure,form { padding:0; margin:0 } 
fieldset { border:none; padding:0; margin:0 } 
input[type=submit] { -webkit-appearance:none; -moz-appearance:none; appearance:none } 
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section { display:block } 
button,input,optgroup,pre,select,textarea { color:inherit; font-family:inherit; font-size:inherit; font-weight:inherit; margin:0 } 
iframe { border:0 } 
textarea { resize:none; } 
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; } 
input { outline:none; } 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 

/* rem rool */
/* pc */
@media all and (max-width:1280px) { html { font-size:9px; } 
 }
@media all and (max-width:1180px) { html { font-size:8px; } 
 }
@media all and (max-width:1080px) { html { font-size:7px; } 
 }
@media all and (max-width:980px) { html { font-size:6px; } 
 }
/* // pc */

/* mobile */
@media all and (max-width:768px) { html { font-size:9px; } 
 }
@media all and (max-width:375px) { html { font-size:9px; } 
 }
@media all and (max-width:360px) { html { font-size:9px; } 
 }
@media all and (max-width:340px) { html { font-size:8px; } 
 }
@media all and (max-width:320px) { html { font-size:7px; } 
 }
/* // mobile */

/* m_only */
@media all and (min-width:769px){
 .m_only { display:none !important; } 
 }
@media all and (max-width:768px){
 .m_none { display:none !important; } 
 }

/* layout */
.wrap { width:100%; min-width:128rem; } 
.guide { width: 100%; max-width:144rem; margin-left:auto; margin-right:auto; } 
.container { min-height:calc(100vh); padding-top: 8rem; } 

@media all and (max-width:768px){
 .wrap { min-width:auto; } 
.guide { width:100%; } 
.container { padding-top:6rem; } 
 }


/* color */
.col_orange { color:#FFAA00 } 


/* header */
/* pc header */
@media all and (min-width:769px){
 .header { position:fixed; width:100%; height:8rem; background-color:#fff; transition:all .3s; z-index:10; box-shadow:0px 4px 12px 0px rgba(0, 0, 0, 0.04); } 
 .header.hide { transform: translateY(-100%); } 
.header_inner { width:100%; height:8rem; display:flex; align-items:center; justify-content:space-between; padding:0 8rem; transition:all .3s; background-color:#fff; } 
.header .main_logo { height:3.2rem; font-size:0; } 
.header .main_logo a,
.header .main_logo img { display:inline-block; width:auto; height:2.4rem; } 
.header .gnb_wrap { height:100%; } 
.header .gnb { height:100%; display:flex; align-items:center; justify-content:space-between; width:74rem; } 
.header .gnb li { height:100%; } 
.header .gnb .depth_01 { font-size:1.8rem; font-weight:600; display:flex; height:100%; align-items:center; position: relative; } 
.header .gnb .depth_01:before { content:''; display:block; position:absolute; top:0; bottom:0; left:-2rem; right:-2rem; } 
.header .gnb .depth_01:hover,
.header .gnb .depth_01._active,
.header .gnb .depth_01.active { font-weight:600; border-top:2px solid transparent; border-bottom:2px solid #121214 } 
.header .gnb .depth_02_wrap { position:absolute; left:0; right:0; bottom:0; transform:translateY(100%); display:block; border-radius:0 0 4.6rem 4.6rem; background-color:#fff; max-height:0; overflow:hidden; transition:max-height .3s; justify-content:center; box-shadow:0 .6rem 0 #00000005; } 
.header .gnb .depth_02_wrap.active { max-height:50rem; } 
.header .gnb .depth_02_wrap:before { content:''; display:block; position:absolute; left:0; right:0; top:-2rem; height:2rem; } 
.header .gnb .depth_02_wrap_inner { padding:6rem; display:flex; flex-wrap:wrap; gap:4rem 8rem; border-top:1px solid #E6E6ED; } 
.header .gnb .depth_02 { display:flex; width:28rem; align-items:center; gap:1.2rem; font-size:1.8rem; font-weight:600; } 
.header .gnb .depth_02 img { height:3.6rem; } 

.header .lang_sel { flex:1; display:flex; justify-content:flex-end; } 
.header .lang_sel_wrap { position:relative; } 
.header .lang_sel_wrap .selected { width:11.8rem; height:4.8rem; border-radius:4.8rem; background-color:#fff; display:flex; align-items:center; justify-content:space-between; border:1px solid #D5D5DE; padding:0 2rem; font-size:1.6rem; font-weight:600; } 
.header .lang_sel_wrap .selected:after { content:''; display:blcok; width:1.6rem; height:1.6rem; background:url('../image/icon/arrow_down.svg') no-repeat center/contain; } 
.header .lang_sel_wrap .selected.active:after { transform:rotate(180deg); } 
.header .lang_sel_wrap .selected img { width: 2.4rem; } 
.header .lang_sel_wrap .option_wrap { display:none; background-color:#fff; position:absolute; left:0; right:0; bottom:-.8rem; transform:translateY(100%); flex-direction:column; box-shadow:0 .2rem .8rem #00000014; border-radius:2rem; overflow:hidden; } 
.header .lang_sel_wrap .option_wrap.active { display:flex; } 
.header .lang_sel_wrap .option_wrap button { height:4.8rem; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:600; } 
.header .lang_sel_wrap .option_wrap button:hover { background-color:#F1F1F7; } 

.header.fixed { top:0; max-width:100%; width:100%; border-radius:0; } 
.header.fixed .header_inner { max-width:192rem; margin:0 auto; padding:0 8rem; } 
.header.fixed .gnb .depth_02_wrap { border-radius:0; } 
.header.fixed .gnb .depth_02_wrap_inner { max-width:172rem; margin:0 auto; padding-left:0; padding-right:0; width:calc(100% - 4rem); } 
.m_burger_btn { display:none; } 
 }

/* mobile header */
@media all and (max-width:768px){
 .header { position:fixed; left:0; right:0; top:0; z-index:10; transition: all 0.3s ease; } 
.header.hide { transform: translateY(-100%); transition: all 0.3s ease; } 
.header_inner { height:6rem; background-color:#fff; display:flex; padding:0 1.6rem; align-items:center; justify-content:space-between; gap:2.4rem; border-bottom:1px solid #F1F1F7; } 
.header .main_logo { height:2.4rem; font-size:0; } 
.header .main_logo a,
.header .main_logo img { display:inline-block; height:100%; } 
.header .icon-wrap { display: flex; gap: 2.4rem; } 
.header .lang_sel_wrap { position:relative; display: flex; } 
.header .lang_sel_wrap .selected { width:2.4rem; font-size:0; } 
.header .lang_sel_wrap .option_wrap { display:none; flex-direction:column; position:absolute; left:50%; bottom:-2.2rem; transform:translate(-50%, 100%); background-color:#fff; width:8rem; border-radius:2rem; box-shadow:0 .2rem .8rem #00000014; overflow:hidden; } 
.header .lang_sel_wrap .option_wrap.active { display:flex; } 
.header .lang_sel_wrap .option_wrap button { display:block; line-height:4.4rem; text-align:center; font-size:1.6rem; font-weight:600; } 
.header .lang_sel_wrap .option_wrap button:hover { background-color:#F1F1F7; } 
.header .m_burger_btn { width:2.4rem; height:2.4rem; } 
.header .m_burger_btn .close-icon { display: none; } 
.header .m_burger_btn.m_active .burger-icon { display: none; } 
.header .m_burger_btn.m_active .close-icon { display: block; } 
.header .gnb_wrap { display:none; position:fixed; left:0; right:0; top:6rem; bottom:0; background-color:#fff; padding:3.2rem 2rem; overflow:auto; transform:translateX(105vw); transition:transform .3s } 
.header .gnb_wrap.m_active { display:block; transform:translateX(0vw) } 
.header .gnb { display:flex; flex-direction:column; gap:3.2rem; } 
.header .depth_01 { width: fit-content; line-height:2.7rem; font-size:1.8rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; } 
.header #gnbBrandMenu .depth_01:after { content:''; display:block; width:2rem; height:2rem; background:url('../image/icon/arrow_down.png') no-repeat center/contain; } 
.header .m_burger_btn .line_01, .header .m_burger_btn .line_02, .header .m_burger_btn .line_03 { width: 2.2rem; height: 0.2rem; background: #121214; } 
 }

/* TOP 버튼 */
.top-btn { width: 8.4rem; height: 8.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; position: fixed; bottom: 4rem; right: 4rem; z-index: 999; background: #fff; border: none; padding: 1rem 1.2rem; border-radius: 50%; font-size: 1.6rem; font-weight: 600; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.12); cursor: pointer; display: none; transition: opacity 0.3s; } 
.top-btn img { width: 2.4rem; } 
.top-btn.show { display: flex; } 

@media all and (max-width:768px){
 .top-btn { bottom: 2rem; right: 2rem; } 
 }

/* footer */
.footer { position:relative; overflow:hidden; background: var(--black, #000); } 
.footer_inner { width:100%; max-width:144rem; margin:0 auto; } 
.footer .address_wrap { padding:6rem 4rem; position:relative; z-index:2; } 
.footer .address_wrap .footer_inner { display:flex; gap:16rem; align-items:center; justify-content: space-between; } 
.footer .address_wrap .footer_inner .left { display:flex; flex-direction:column; gap:1.2rem; } 
.footer .address_wrap .foot_logo { display:inline-block; height:2.8rem; font-size:0; margin-bottom:2rem; } 
.footer .address_wrap .foot_logo img { height:100%; } 
.footer .address_wrap .key_val { display:flex; align-items:center; gap:1.2rem; color:#fff; font-size: 1.6rem; } 
.footer .address_wrap .key_val .key { width:6rem; font-size:1.6rem; font-family:'Pretendard'; font-weight:500; } 
.footer .address_wrap .key_val .val { font-size:1.6rem; font-weight:500; } 
.footer .address_wrap .right { display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-end; position: relative; } 
.footer .address_wrap .right button a { width: 100%; height: 4.8rem; display: flex; justify-content: center; align-items: center; gap: 0.4rem; padding: 1.2rem 2rem; font-size: 1.6rem; } 
.footer .address_wrap .right button a img { width: 1.6rem; } 
.footer .address_wrap .right .btn-wrap { display: flex; gap: 1.2rem; } 
.footer .address_wrap .right .btn-wrap button { height: 4.8rem; border-radius: 0.8rem; background: #FFF; font-size: 1.6rem; font-weight: 600; } 
.footer .copyright_wrap { border-top:1px solid #FFFFFF33; padding:3.2rem 4rem; position:relative; } 
.footer .copyright_wrap .footer_inner { display:flex; align-items:center; justify-content:space-between; } 
.footer .copyright_wrap .copyright { font-size:1.6rem; font-weight:400; color: rgba(255, 255, 255, 0.60); } 

.footer .policy_sel { flex:1; display:flex; justify-content:flex-end; } 
.footer .policy_sel_wrap { position:relative; } 
.footer .policy_sel_wrap .selected { width: fit-content; height:4.8rem; border-radius:0.8rem; background: none; display:flex; align-items:center; justify-content:space-between; gap: 0.4rem; border:1px solid rgba(255, 255, 255, 0.4); padding:0 2rem; font-size:1.6rem; font-weight:600; color: #fff; } 
.footer .policy_sel_wrap .selected:after { content:''; display:blcok; width:1.6rem; height:1.6rem; background:url('../image/icon/bottom_arrow_white.svg') no-repeat center/contain; } 
.footer .policy_sel_wrap .selected.active:after { transform:rotate(180deg); } 
.footer .policy_sel_wrap .selected img { width: 2.4rem; } 
.footer .policy_sel_wrap .option_wrap { display:none; background-color:#000; position:absolute; left:0; top: 6rem; flex-direction:column; box-shadow:0 .2rem .8rem #00000014; border-radius: 0.8rem; overflow:hidden; border: 1px solid rgba(255, 255, 255, 0.4); scrollbar-width: thin; scrollbar-color: #fff transparent; } 
.footer .policy_sel_wrap .option_wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; } 
.footer .policy_sel_wrap .option_wrap.active { width: 100%; height: 14.4rem; display:flex; overflow-y: auto; } 
.footer .policy_sel_wrap .option_wrap button { height:4.8rem; display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-weight:600; color: #fff; background: #000; } 
.footer .policy_sel_wrap .option_wrap button:hover { background: rgba(255, 255, 255, 0.2); } 


@media all and (max-width:768px){
 .footer { padding-top:0; } 
.footer:before { width:200rem; height:80rem; } 
.footer .address_wrap { padding:4rem 1.6rem; } 
.footer .address_wrap .footer_inner { flex-direction:column; align-items:flex-start; gap:3.2rem; } 
.footer .address_wrap .right { align-items:flex-start; } 
.footer .address_wrap .key_val { align-items:flex-start; } 
.footer .address_wrap .key_val .val { flex:1; } 
.footer .policy_sel_wrap .option_wrap { top: -16rem; } 
.footer .copyright_wrap { padding: 2.4rem 1.8rem; } 
.footer .copyright_wrap .footer_inner { flex-direction:column; align-items:flex-start; gap:2.4rem; } 
 }


/* title */
.sect_title .sub_title { font-size:2.4rem; font-weight:600; font-family:'Pretendard'; line-height: 1.4; margin-bottom: 2rem; } 
.sect_title .main-tit-wrap { display: flex; gap: 2.4rem; align-items: center; } 
.sect_title .main-tit-wrap img { width: 8rem; height: 8rem; } 
.sect_title .main_title { font-size:6.4rem; font-weight:700; font-family:'Pretendard'; line-height: 1.4; } 
.sect_title .desc_txt { font-size:1.8rem; font-weight:500; font-family:'Pretendard'; line-height: 1.6; color: #71727D; margin-top: 2.4rem; } 
.sect_title .desc_txt .important { font-weight: 600; color: #121214; } 
.sect_title .desc_txt p:not(:first-child) { margin-top: 1.6rem; } 
.sect_title .check-list, .check-list { display: flex; flex-direction: column; gap: 1.2rem; font-size: 1.8rem; margin-top: 3.2rem; font-weight: 500; } 
.sect_title .check-list li, .check-list li { display: flex; align-items: flex-start; gap: 0.8rem; } 
.sect_title .check-list li::before,.check-list li::before { content: ''; display: inline-block; width: 2.4rem; height: 2.4rem; background: url(/image/icon/blue_check.svg) center / cover no-repeat; } 

@media all and (max-width:768px){
 .sect_title { font-size:2.4rem; line-height:3.6rem; } 
.sect_title .main_title { font-size:3.6rem; } 
 }

/* swiper */
.swiper-sect { background: #F7F7FC; padding: 16rem 0; } 
.swiper-sect .sect_title { text-align: center; padding: 0 4rem; } 
.main-swiper { margin-top: 8rem; overflow: visible !important; } 
.main-swiper .swiper-wrapper { align-items: stretch; } 
.main-swiper .swiper-slide { display: flex; align-items: center; justify-content: space-between; gap: 8rem; border-radius: 3.2rem; background: var(--mode-white, #FFF); box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.04); padding: 10rem; max-width: 144rem; width: 80%; overflow: hidden; } 
.main-swiper .swiper-slide .img { height: 27rem; display: flex; justify-content: center; align-items: center; overflow: hidden; } 
.main-swiper .swiper-slide .img img { height: 100%; width: auto; object-fit: contain; } 
.main-swiper .swiper-slide .txt { width: 60%; display: flex; flex-direction: column; } 
.main-swiper .swiper-slide .txt .tit { font-size:4rem; font-weight:700; overflow:hidden; } 
.main-swiper .swiper-slide .txt .desc { font-size:1.8rem; font-weight:500; overflow:hidden; color: #71727D; margin-top: 1.6rem; line-height: 1.6; } 
.main-swiper .swiper-slide .txt button, .view_more_btn { width: fit-content; height: 4.8rem; font-size:1.8rem; font-weight:500; overflow:hidden; margin-top: 2.4rem; border-radius: 0.8rem; border: 1px solid var(--mode-gray-200, #E6E6ED); background: var(--white-white-100, #FFF); } 
.main-swiper .swiper-slide .txt button a, .view_more_btn a { padding: 1.2rem 2rem; } 
.main-swiper .swiper-slide .txt button img, .view_more_btn img { width: 1.6rem; margin-left: 0.8rem; } 
.main-swiper .swiper-slide .app-wrap { display: flex; gap: 2rem; } 
.main-swiper .swiper-slide .app-wrap > img, .main-swiper .swiper-slide .app-wrap > video { width: fit-content; max-width: 13.5rem; border-radius: 2rem; border: 0.6rem solid #121214; object-fit: cover; object-position: bottom; } 

@media all and (max-width:768px){
 .swiper-sect { padding: 8rem 0; } 
 .swiper-sect .sect_title { text-align: center; padding: 0 2rem; } 
 .main-swiper { margin-top: 4.8rem; } 
 .main-swiper .swiper-slide { flex-direction: column-reverse; padding: 6rem; gap:4rem; position: relative; } 
 .main-swiper .swiper-slide::before, .main-swiper .swiper-slide::after { content: ''; display: inline-block; width: 6rem; height: 100%; position: absolute; } 
 .main-swiper .swiper-slide::before { top: 0; left: 0; background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 40%); } 
 .main-swiper .swiper-slide::after { top: 0; right: 0; background: linear-gradient(270deg, #FFF 60%, rgba(255, 255, 255, 0.00) 100%); } 
 .main-swiper .swiper-slide .txt { width: 100%; } 
 .main-swiper .swiper-slide .txt .tit { font-size: 2.4rem; } 
 .main-swiper .swiper-slide .app-wrap { gap: 1.2rem; } 
 .main-swiper .swiper-slide .img { height: 20rem; } 
 .main-swiper .swiper-slide .app-wrap > img, .main-swiper .swiper-slide .app-wrap > video { max-width: 10rem; } 
 }

 @media all and (max-width:500px){
 .main-swiper .swiper-slide { padding: 4rem; gap: 2.4rem; } 
 .main-swiper .swiper-slide .img { height: 16rem; } 
 .main-swiper .swiper-slide::before, .main-swiper .swiper-slide::after { width: 4rem; } 
 .main-swiper .swiper-slide .app-wrap > img, .main-swiper .swiper-slide .app-wrap > video { max-width: 8rem; } 
 }

/* common */
.container { position: relative; } 
.container section { overflow: hidden; } 

/* tab */
.tab-container { display: flex; height: 5.6rem; justify-content: center; align-items: center; border-radius: 2.8rem; border: 1px solid rgba(0, 0, 0, 0.12); background: linear-gradient(180deg, rgba(153, 153, 153, 0.60) 0%, rgba(102, 102, 102, 0.60) 100%); backdrop-filter: blur(6px); position: fixed; top: 12rem; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 1.8rem; transition: all 0.4s; } 
.tab-container.fixed-top { position: fixed; top: 4rem; transition: all 0.4s; } 
.tab-container .tab-btn { width: 20rem; height: 100%; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; text-align: center; color: rgba(255, 255, 255, 0.6); font-weight: 500; cursor: pointer; } 
.tab-container .tab-btn.active { color: #fff; font-weight: 600; } 

@media all and (max-width:768px){
 .tab-container { width: 90%; top: 8rem; } 
 .tab-container.fixed-top { top: 2rem; } 
 }

/* btn */
.btn { height:5.6rem; padding:0 1rem; text-align:center; border-radius:5.6rem; display:inline-flex; align-items:center; justify-content:center; gap:.8rem; font-size:1.8rem; font-weight:500; cursor:pointer; } 
.btn:active { opacity:.5; } 

.btn.black_bor { border:1px solid #121214; } 
.btn.orange { background-color:#FFAE33; color:#fff; } 
.btn.gray { background-color:#71727D; color:#fff; } 
.btn.gray_bor { border:1px solid #B9BAC6; color:#71727D } 


@media all and (max-width:768px){
 .btn { height:4.8rem; font-size:1.6rem; padding:0 2rem; gap:.4rem; } 
 }


/* checkbox */
.checkbox input { position:absolute; left:-9999px; opacity:0; } 
.checkbox label { padding-left:2.4rem; text-indent:.8rem; display:inline-block; line-height:2.4rem; font-size:1.6rem; font-weight:600; color:#71727D; background:url('../image/icon/checkbox_off.png') no-repeat left top/2.4rem; cursor: pointer; } 
.checkbox input:checked + label { background-image:url('../image/icon/checkbox_on.png'); } 


/* sub_page */
.sub_banner { height: 64rem; position: relative; overflow: hidden; } 
.sub_banner .bg-img { width: 100%; height: 64rem; transition: transform 2s ease-out; transform: scale(1); background-repeat: no-repeat; background-position: center; background-size: cover; } 
.sub_banner .bg-img.zoom { transform: scale(1.3); height: 100%; } 
.sub_banner .guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 16rem 4rem; } 
.sub_banner .sub_banner_txt { color: #FFF; text-align: center; display: flex; flex-direction: column; gap: 1.2rem; } 
.sub_banner .sub_banner_txt .tit { font-size: 9.6rem; font-weight: 600; } 
.sub_banner .sub_banner_txt .desc { font-size: 2.4rem; font-weight: 500; line-height: 1.6; } 

@media all and (max-width:768px){
 .sub_banner .guide { padding: 8rem 2rem; } 
 .sub_banner { height: 32rem; display: flex; align-items: center; } 
 .sub_banner .sub_banner_txt .tit { font-size: 4.8rem; } 
 .sub_banner .sub_banner_txt .desc { font-size: 2rem; } 
 }

/* circle-diagram */
@media all and (max-width:768px){
 .circle-diagram .item h4 { font-size: 2.8rem; } 
 .circle-diagram .item p { font-size: 2rem !important; } 
 }

/* diagram */
.diagram { position: relative; display: flex; flex-direction: column; align-items: center; } 
.diagram .element { position: relative; } 
.diagram .main-tit { width: max-content; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; height: 5.6rem; padding: 1.2rem 4.8rem; justify-content: center; align-items: center; border-radius: 3.2rem; background: #3392FF; color: #fff; font-size: 2rem; font-weight: 600; text-align: center; } 
.diagram .card { display: flex; padding: 6rem 3.2rem 3.2rem 3.2rem; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 2.4rem; background: #EBF1FF; font-size: 1.8rem; margin-top: 2.8rem; } 
.diagram .sub-tit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 4.8rem; display: flex; justify-content: center; align-items: center; background: #3392FF; color: #fff; font-size: 1.8rem; font-weight: 600; border-radius: 2.4rem; padding: 0 2.4rem; width: fit-content; text-align: center; } 
.diagram .white-box { display: flex; padding: 1.6rem 2.8rem; justify-content: center; align-items: center; color: #3392FF; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.04); background: #fff; border-radius: 1.2rem; font-weight: 600; text-align: center; } 

/* wide-diagram */
.wide-diagram .card { width: 100%; background: #F7F7FC; padding: 6rem; } 

@media all and (max-width:768px){
 .wide-diagram .card { padding: 4.8rem 3.2rem 3.2rem 3.2rem; } 
 }

/* pagination */
.pagination { display:flex; align-items:center; justify-content:center; gap:1.2rem; } 
.pagination .pagi_first,
.pagination .pagi_prev,
.pagination .pagi_next,
.pagination .pagi_last { display:block; width:4.8rem; height:4.8rem; background:no-repeat center/contain; cursor:pointer; } 
.pagination .pagi_first { background-image:url('../image/icon/pagi_first.png'); } 
.pagination .pagi_prev { background-image:url('../image/icon/pagi_prev.png'); margin-right:1.2rem; } 
.pagination .pagi_next { background-image:url('../image/icon/pagi_next.png'); margin-left:1.2rem; } 
.pagination .pagi_last { background-image:url('../image/icon/pagi_last.png'); } 
.pagination .pagi_first.disabled { background-image:url('../image/icon/pagi_first_dis.png'); cursor:default; pointer-events:none; } 
.pagination .pagi_prev.disabled { background-image:url('../image/icon/pagi_prev_dis.png'); cursor:default; pointer-events:none; } 
.pagination .pagi_next.disabled { background-image:url('../image/icon/pagi_next_dis.png'); cursor:default; pointer-events:none; } 
.pagination .pagi_last.disabled { background-image:url('../image/icon/pagi_last_dis.png'); cursor:default; pointer-events:none; } 
.pagination .num { display:flex; width:4.8rem; height:4.8rem; align-items:center; justify-content:center; border-radius:50%; font-size:1.8rem; font-weight:500; color:#71727D } 
.pagination .num:hover,
.pagination .num.active { color:#fff; background-color:#FFAE33; font-weight:600; } 
.pagination .num:hover { opacity:.8; } 


/* card-list-wrap */
.card-list-wrap { width: 100%; display: flex; gap: 3.2rem; } 
.card-list-wrap > li { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 3.2rem 4rem 4.8rem; border-radius: 2.4rem; border: 1px solid #F1F1F7; background: #FFF; box-shadow: 0 0.4rem 4rem 0 rgba(0, 0, 0, 0.04); } 
.card-list-wrap img { width: 100%; max-width: 12rem; } 
.card-list-wrap h3 { font-size: 2rem; text-align: center; margin-top: 2rem; font-weight: 700; } 
.card-list-wrap .desc { font-size: 1.8rem; text-align: center; color: #71727D; font-weight: 500; margin-top: 0.8rem; } 
.card-list-wrap.text-card-list-wrap > li { align-items: flex-start; padding: 4rem; } 
.card-list-wrap.text-card-list-wrap > li h3, .card-list-wrap.text-card-list-wrap > li .desc { text-align: left; } 
.card-list-wrap.text-card-list-wrap > li h3 { margin-top: 0; font-size: 2.4rem; } 
.card-list-wrap.text-card-list-wrap > li .desc { margin-top: 1.2rem; } 

@media all and (max-width:768px){
 .card-list-wrap { gap: 2rem; flex-wrap: wrap; justify-content: center; } 
 .card-list-wrap > li { width: calc(50% - 2rem/2); } 
 }

@media all and (max-width:500px){
 .card-list-wrap > li { width: 100%; } 
 }

 
/* card-container */
.card-container { width: 100%; } 
.card-container ul { display: flex; flex-wrap: wrap; gap:3.2rem; } 
.card-container ul li { width: calc(100%/3 - 6.4rem/3); display: flex; padding: 2.4rem 4.8rem; justify-content: space-between; align-items: center; border-radius: 2.4rem; border: 0.1rem solid var(--mode-gray-100, #F1F1F7); background: var(--white-white-100, #FFF); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.04); font-size: 2.4rem; font-weight: 600; } 
.card-container ul li img { width: 10rem; } 

@media all and (max-width:768px){
 .card-container ul { gap: 2rem; justify-content: center; } 
 .card-container ul li { width: calc(50% - 2rem / 2); font-size: 2rem; padding: 2rem 3.2rem; } 
 .card-container ul li img { width: 8rem; } 
 }

@media all and (max-width:500px){
 .card-container ul li { width: 100%; } 
 }

/* card-wrap */
.card-wrap { display: flex; gap: 3.2rem; } 
.card-wrap li { width: 100%; min-width: 32rem; border-radius: 2.4rem; background: #F7F7FC; padding: 4rem; text-align: center; } 
.card-wrap li img { width: 7.2rem; } 
.card-wrap li h3 { margin-top: 2.4rem; font-size: 2.4rem; } 
.card-wrap li p { margin-top: 1.2rem; font-size: 1.8rem; color: #71727D; } 

@media all and (max-width:768px){
 .card-wrap { gap: 2rem; } 
 }

/* workflow-scroll */
.workflow-scroll { display: flex; align-items: center; margin-top: 8rem; } 
.workflow-list .workflow-card { display: flex; align-items: center; gap: 2rem; } 
.workflow-list { display: flex; gap: 2rem; align-items: center; transition: transform 0.3s ease-out; } 
.workflow-list .workflow-card > div { width: 100%; min-width: 34rem; background: #fff; border-radius: 2.4rem; box-shadow: 0 0.4rem 4rem 0 rgba(0, 0, 0, 0.04); text-align: center; padding: 4rem; scroll-snap-align: start; border: 1px solid #E6E6ED; } 
.workflow-list .workflow-card h4 { font-size: 1.8rem; } 
.workflow-list .workflow-card h3 { font-size: 2.4rem; margin-top: 0.8rem; } 
.workflow-list .workflow-card .desc { font-size: 1.8rem; color: #71727D; margin-top: 1.2rem; font-weight: 500; } 
.workflow-list .workflow-card img { width: 100%; max-width: 12rem; margin-top: 2rem; } 
.workflow-list .workflow-card:not(:first-child)::before { content: ''; width: 4.8rem; height: 0.8rem; display: flex; flex: none; background: url(/image/icon/process_dot.svg); } 

@media all and (max-width:768px){
 .workflow-scroll { margin-top: 4.8rem; } 
 }

/* modal_pop */
.modal_wrap { position:fixed; z-index:100; inset:0; display:none; } 
.modal_wrap .dimlayer { position:absolute; z-index:1; inset:0; background-color:#00000099; } 
.modal_wrap .modal_pop { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%, -50%); }