@charset "utf-8"; @import url(base.css); /*메인비주얼*/
.fp-table { background-color: var(--font-color-base); } 
.main_vis { overflow: hidden; position: relative; background-color: var(--color-option-02); height: 100vh; } 
.main_vis::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } 
.main_vis .w1600 { height: 100vh; z-index: 1; padding: 0 20px; } 
.main_vis .imgBox { position: absolute; top: 22%; transform: translateX(130%); } 
.main_vis .main-vis_txt { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1; width: 100%; padding: 0 20px; } 
.main_vis .main-vis_txt > p:nth-child(1) { padding: 0; font-weight:700; color: var(--font-color-primary); font-size: 74px; line-height: 1.44; display: inline-block; } 
.main_vis .main-vis_txt > p:nth-child(2) { padding: 0; font-style: normal; background: linear-gradient(to right, #FF2174 , #9100B3); background-clip: text; -webkit-background-clip: text; color: transparent; animation: gradient 15s ease infinite; font-size: 74px; font-weight: 700; line-height: 1.44; display: inline-block; } 
.main_vis .main-vis_txt > p { font-size: 24px; padding: 25px 0 60px; color: var(--font-color-secondary); line-height: 1.5; } 
.main_vis .main-vis_txt > a { display: block; width: 255px; height: 70px; line-height: 70px; border-radius: 40px; font-size: 18px; text-align: center; border: 1px solid transparent; background-image: linear-gradient(#121e25, #121e25), linear-gradient(to right, #FF2174, #9100B3); background-origin: border-box; background-clip: content-box, border-box; } 
.main_vis .main-vis_txt > a span { color: #FF2174; } 
.main_vis .inq_btn { position: absolute; font-size: 16px; right: 0; bottom: 80px; text-decoration: underline;line-height: 24px; padding: 0 20px; cursor: pointer; } 
.main_vis .inq_btn {color: #243038;} 
.main_vis .btn_wrap {flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0 20px;}

/*메인공통*/
.main_title { text-align: center; } 
.main_title > h2 { font-size: 50px; line-height: 1.4; color: var(--font-color-primary); font-weight: 400; } 
.main_title > h2 b { font-weight: 500; } 
.main_title > p { padding: 5px 0 30px; font-size: 17px; line-height: 1.58; color:#232424; } 
.agree_p{font-size: 14px; line-height: 1.58; color:#232424; margin: 0 10px;}
/*main02*/
.main02 { padding: 120px 20px; } 
.main02 .main02_cont {margin-top: 50px;}
.main02 .main02_cont .main02_box > div { background:#1C2830; border-radius: 15px; overflow: hidden; } 
.main02 .main02_cont .main02_box { justify-content: space-between; margin: 50px auto 80px; } 
.main02 .main02_cont .main02_left { padding: 93px 0; width: calc(33% - 16px); text-align: center; } 
.main02 .main02_cont .main02_left .with_comp { color: #FF2174; font-size: 24px; line-height: 1.62; } 
.main02 .main02_cont .main02_left .comp_no_box { position: relative; } 
.main02 .main02_cont .main02_left .comp_no_box .comp_no { display: block; margin: 0 0 8px; font-family: 'Montserrat'; color:var(--font-color-primary); font-size: 80px; font-weight: 500; } 
.main02 .main02_cont .main02_left .comp_no_box i { font-style: normal; font-size: 18px; } 
.main02 .main02_cont .main02_left p { color: var(--font-color-secondary); line-height: 1.625; } 
.main02 .main02_cont .main02_right { width: calc(67% - 16px); position: relative; } 
.main02 .main02_cont .main02_right img { width: calc(100% - 60px); position: absolute; } 
.main02 .main02_list ul { justify-content: space-around; } 
.main02 .main02_list ul li { width: calc(25% - 25px); height: 260px; transition: all .3s; border-radius: 30px; background:#2B3740; position: relative; cursor: pointer; } 
.main02 .main02_list ul:hover li { animation:none; } 
.main02 .main02_list ul li img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
.main02 .main02_cont .grp_wrap { height:100%; padding: 50px 50px 10px 30px; position: relative; } 
.main02 .main02_cont .grp_wrap img { width: 75px; left: initial; right: 25px; top: 20px; } 

.cert_img_box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: #00000094; z-index: 99999; padding: 20px; pointer-events:none; opacity:0; transition: all .3s ease-in; } 
.cert_img_box img { width: 100%; max-width: 500px; padding: 0 20px; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); transition: all .5s ease-in-out .5s; } 
.cert_img_box.active { opacity:1; pointer-events:all; } 

/*main03*/
.main03 { background: #fff; padding: 120px 20px; } 
.main03_cont { justify-content: space-between; margin-top: 30px; gap: 30px; } 
.main03_cont > div { width: calc(33.33% - 22px); text-align: center; padding: 70px 0 50px; border-radius: 15px; overflow: hidden; background: linear-gradient(to bottom, var(--mode-color03), var(--mode-color04)); transition:all .3s ease-in-out; cursor: pointer; } 
.main03_cont .main03_box .main03_icon { width: 100px; margin: 0 auto 20px; } 
.main03_cont .main03_box .main03_icon img { width: 100%; } 
.main03_cont .main03_box span.market_en { font-family: 'Montserrat'; font-size: 17px; line-height: 20px; color: var(--font-color-point); font-weight: 600; } 
.main03_cont .main03_box b.market_ko { display: block; color: var(--font-color-primary); font-size: 24px; font-weight: 500; line-height: 1.25; } 
.main03_cont .main03_box p.market_desc { padding-top: 8px; line-height: 1.625; color: var(--font-color-secondary); } 

/*main05*/
.main05 { padding: 120px 20px; } 
.main05 .main_title { text-align: left; } 
.main05 .main_title h2 b { font-weight: 500; } 
.main05 .main_title p { padding: 20px 0 80px; } 
.main05 .review_slide { z-index: 0; position: relative; } 
.main05 .review_slide:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } 
.main05 .m_review { display:none; } 

.main05 .m_review .quest_box { position: relative; background: #182229; border-radius: 20px; padding: 40px 20px; text-align: center; margin-left: 15px; width: calc(100% - 16px); margin-bottom: 20px; } 
.main05 .m_review .quest_box:nth-of-type(2) { background:#313F48; } 
.main05 .m_review .quest_box:nth-of-type(3) { margin-bottom:0; } 
.main05 .m_review .quest_box:after { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid transparent; border-right: 19px solid #182229; position: absolute; left: -27px; top: 28px; } 
.main05 .m_review .quest_box:nth-of-type(2):after { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid transparent; border-right: 19px solid #313F48; position: absolute; left: -27px; top: 28px; } 
.main05 .m_review .quest_box p { color: var(--font-color-primary); line-height: 1.625; font-size: 15px; } 

.main05 .swiper-container-free-mode > .swiper-wrapper { transition-timing-function : linear; } 
.main05 .swiper-container-free-mode > .swiper-wrapper { transition-timing-function : linear; } 
.main05_cont { overflow: hidden; } 
.main05 .swiper-slide { width: 500px; margin-right: 80px; } 
.main05 .swiper-slide .quest_box { position: relative; background: #182229; border-radius: 20px; padding: 40px 60px; text-align: center; margin-left: 32px; } 
.main05 .swiper-wrapper > div:nth-child(2n-1) { margin-top: 60px; } 
.main05 .swiper-wrapper > div:nth-child(2n-1) .quest_box { background:#313F48; } 
.main05 .swiper-wrapper > div:nth-child(2n-1) .quest_box:after { border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid transparent; border-right: 19px solid #313F48; position: absolute; left: -27px; } 
.main05 .quest_box:after { content: ""; display: block; width: 0; height: 0; border-bottom: 8px solid transparent; border-top: 8px solid transparent; border-left: 8px solid transparent; border-right: 19px solid #182229; position: absolute; left: -27px; top: 28px; } 
.main05 .quest_box p { color: var(--font-color-primary); line-height: 1.625; } 
.main05 .heart_bnr { margin-top: 30px; border-radius: 20px; background: linear-gradient(to bottom, rgba(28, 40, 48, 0) , rgba(28, 40, 48, 1)); } 


.main05 .heart_bnr .heart_txt {padding: 95px 0;text-align: center;position: relative;z-index: 1;} 
.main05 .heart_bnr .heart_txt b { font-size: 30px; font-weight: 400; color: var(--font-color-primary); } 
.main05 .heart_bnr .heart_txt b strong { font-weight: 600; } 
.main05 .heart_bnr .heart_txt p { color: var(--font-color-secondary); line-height: 1.625; padding-top: 10px; } 
.main05 .heart_bnr i.icon_heart {display: block;position: absolute;animation: rise 10s infinite ease-in;} 
/*
.main05 .heart_bnr i.icon_heart:nth-child(1) {width: 24px;height: 20px;background: url(/img/icon_heart01.webp);top: 0;right: 23%;animation-duration:4s;animation-delay:0s;} 
.main05 .heart_bnr i.icon_heart:nth-child(2) { width: 24px; height: 20px; background: url(/img/icon_heart02.webp); top: 11%; left: 24%; animation-duration:5s; animation-delay:1s; } 
.main05 .heart_bnr i.icon_heart:nth-child(3) { width: 61px; height: 52px; background: url(/img/icon_heart03.webp); top: 18%; right: 14%; animation-duration:7s; animation-delay:0.5s; } 
.main05 .heart_bnr i.icon_heart:nth-child(4) { width: 76px; height: 64px; background: url(/img/icon_heart04.webp); bottom: -25px; left: 17%; animation-duration:5s; } 
.main05 .heart_bnr i.icon_heart:nth-child(5) { width: 24px; height: 20px; background: url(/img/icon_heart01.webp); top: 29%; right: 48%; animation-duration:5s; } 
.main05 .heart_bnr i.icon_heart:nth-child(6) { width: 24px; height: 20px; background: url(/img/icon_heart02.webp); top: 60%; right: 30%; animation-duration:6s; } 
.main05 .heart_bnr i.icon_heart:nth-child(7) { width: 76px; height: 64px; background: url(/img/icon_heart04.webp); bottom: -25px; left: 17%; animation-duration:5s; } 
*/
.main05 .heart_bnr .circle_wrap i.icon_circle { display: block; position: absolute; border-radius: 50%; width: 10px; height: 10px; background-color: var(--font-color-point); } 
.main05 .heart_bnr .circle_wrap i.icon_circle:nth-child(1) { opacity: 0.25; top: 5%; left: 12%; } 
.main05 .heart_bnr .circle_wrap i.icon_circle:nth-child(2) { top: 50%; left: 11%; } 
.main05 .heart_bnr .circle_wrap i.icon_circle:nth-child(3) { opacity: 0.25; opacity: 0.25; right: 37%; top: 43%; } 
.main05 .heart_bnr .circle_wrap i.icon_circle:nth-child(4) { opacity: 0.25; right: 23%; top: 50%; } 
.main05 .heart_bnr .circle_wrap i.icon_circle:nth-child(5) { width: 15px; height: 15px; right: 12%; bottom: 23%; } 

/*main07*/
.main07 { padding: 120px 0; } 
.main07 .mySwiper {overflow: hidden;} 
.main07 .hompage_slide { margin-top: 60px; position:relative;} 
.main07 .hompage_slide .swiper-slide { width: 695px; margin: 0 15px; } 
.main07 .hompage_slide .swiper-slide img { width: 100%; } 
.main07 .hompage_slide .mySwiper + img {position: absolute;top: -5px;width: 700px;left: 50%;transform: translateX(-50%);z-index: 1;pointer-events: none;} 
.main07 .hp_desc { color: var(--font-color-primary); line-height: 1.625; text-align: center; margin-top: 150px; } 

/*main09*/
.main09 { padding: 70px 0; } 
.main09 .particle_bg { position:absolute; top: 0; left: 0; } 
.main09 .main_title { position: relative; } 
.main09 .main_title b { display: block; margin-bottom: 50px; } 
.main09 .main09-btn_wrap { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0 50px; justify-content: center; } 

/* animation */
@keyframes rise { 
 0% { opacity: 0; transform:translateY(0); } 
 50% { transform:translateY(20px); } 
 100% { opacity:1; transform:translateY(-30px); } 
 }

@keyframes move-up-down { 
 0% { transform: translateY(-0); } 
 100% { transform: translateY(-40px); } 
 }
 
@keyframes jump-shaking { 
 0% { transform: translateX(0) } 
 25% { transform: translateX(0) } 
 35% { transform:rotate(5deg) } 
 55% { transform:rotate(-5deg) } 
 65% { transform:rotate(5deg) } 
 75% { transform:rotate(-5deg) } 
 100% { transform: translateY(0) rotate(0) } 
 }

/* responsive */
@media (hover: hover){
 .main02 .main02_list ul li::after { content: ""; display: inline-block; width: 66px; height: 50px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all .3s ease-in-out; } 
 html.dark_mode  .main02 .main02_list ul li::after { background: url(/img/click.svg)center center no-repeat; } 
 html.light_mode .main02 .main02_list ul li::after { background: url(/img/click_light.svg)center center no-repeat; }  
 
 .main02 .main02_list ul li:hover { transform: translateY(-10px); box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.26); } 
 .main02 .main02_list ul li:hover::after { top: -60px; opacity:1; } 
 .main03_cont > div:hover { transform: translate(-5px, -5px) !important; } 
 }
@media (hover: none){
 .site { display:none; } 
 }

@media (max-width: 1200px) { /* */
 .main_title > h2 { font-size:40px; } 
 /* main-top */
 .main_vis .main-vis_txt > p:nth-child(1),
 .main_vis .main-vis_txt > p:nth-child(2) { font-size: 50px; line-height: 1.2; display: block; } 
 .main_vis .main-vis_txt > p { font-size:20px; padding: 20px 0px 40px; } 

 /* main02 */
 .main02 { padding:70px 20px; } 
 .main02 .main02_list ul { gap:15px; } 
 .main02 .main02_cont .main02_box { margin: 0 0 30px; } 
 .main02 .main02_cont .main02_left { padding:50px 10px; } 
 .main02 .main02_cont .main02_left br { display:none; } 
 .main02 .main02_cont .main02_left .comp_no_box .comp_no { font-size:50px; margin-bottom: 0; } 
 .main02 .main02_list ul li { width: calc(20% - 12px); height: 205px; } 
 
 /* main03 */
 .main03 { padding:70px 20px; } 
 .main03_cont { gap: 15px; } 
 .main03_cont > div { width: calc(33.33% - 10px); padding: 50px 10px; } 
 .main03_cont .main03_box p.market_desc br { display:none; } 

 /* main05 */
 .main05 { padding: 70px 20px; } 

 /* main07 */
 .main07 { padding:70px 0; } 
 
 }
 
@media (max-width: 768px) { /*body br { display:none; } */
.main_title > h2 { font-size:24px; } 
.main_title > p { font-size:15px; } 
.main_title > h2 br { display:none; } 
 /* main-top */
 .main_vis .w1600 { height: 50vh; } 
 .main_vis{height: 50%;}
 .main_vis .main-vis_txt > p:nth-child(1), .main_vis .main-vis_txt > p:nth-child(2) { font-size: 27px; text-align: center; } 
 .main_vis .main-vis_txt > p { padding: 12px 0 50px; text-align: center; } 
 .main_vis .main-vis_txt > p br { display:none; } 
 .main_vis .inq_btn { display:none; } 
 /*main 02 */
 .main02 .main02_cont .main02_left .with_comp { font-size:18px; } 
 .main02 .main02_cont .grp_wrap {padding: 0;height: 185px;width: calc(100% + 10px);margin-left: -5px;margin-bottom: -8px;} 
 .main02 .main02_cont .grp_wrap img { display:none; } 
 .main02 .main02_cont .main02_left p { width:215px; margin:0 auto; } 
 .main02 .main02_cont .main02_left .comp_no_box { line-height: 60px; margin-bottom: -8px; } 
 .main02 .main02_cont .main02_box {display: flex;flex-direction: column;background: var(--mode-color02);border-radius: 15px;overflow: hidden;} 
 .main02 .main02_cont .main02_box > div { width: 100%; background: initial; border-radius: initial; overflow: initial; padding-bottom: 0; } 
 .main02 .main02_list ul { gap: 10px 0px; max-width: 315px; margin: 0 auto; } 
 .main02 .main02_list ul li { width: 20%; max-width: 55px; height:55px; border-radius: 10px; } 
 .main02 .main02_list ul li img { width: 80px; } 
  
 /*main 03 */
 .main03_cont { gap:0; } 
 .main03_cont > div { width:100%; padding: 45px 25px; } 
 .main03_cont .main03_box .main03_icon img { width:90px; } 
 .main03_cont .main03_box span.market_en,
 .main03_cont .main03_box p.market_desc { font-size:15px; } 
 .main03_cont .main03_box b.market_ko { font-size:18px; } 

 /*main 05 */
 .main05 .review_slide { display:none; } 
 .main05 .m_review { display:inline-block; width: 100%; } 
 .main05 .main_title > p { padding: 10px 0 30px; width: 290px; } 
 .main05 .heart_bnr .heart_txt b { font-size:22px; } 
 .main05 .heart_bnr .heart_txt p { font-size: 15px; width: 220px; text-align: center; margin: 0 auto; } 
 .main05 .heart_bnr .heart_txt { padding:60px 0; } 
 
 /* main07 */
 .main07 { padding:70px 0; } 
 .main07 .hompage_slide {margin-top:30px;} 
 .main07 .hompage_slide .swiper-slide {width:100%;width: 100%;max-width: 300px;min-width: 315px;} 
 .main07 .hompage_slide .mySwiper + img{width: 320px;top: -2px;}
 .main07 .hp_desc {margin-top: 70px;font-size:15px;padding:0 20px;line-height: 1.7;} 
 
 /* main09 * /
 .main09 { padding:70px 20px; background: url(/img/footer_bg_mo.webp)center center/cover no-repeat;} 
 */
 .main09 .particle_bg{display:none;}
/* html.light_mode .main09 {background: url(/img/footer_bg_mo_light.webp)center center/cover no-repeat;} */
 .main09 .main_title b { white-space:nowrap; } 
 .main09 .main09-btn_wrap { flex-direction: column; gap: 15px 0; } 
 .main09 [class*="btn_style_"] { width:100%; max-width: 200px; padding: 18px 20px; } 
 }

 /* popup */
 .popupArea { position: fixed; display: flex; align-items: flex-start; top: 20px; left: 20px; z-index: 9999; gap: 0 20px; } 
 .popupArea > div { min-width: 320px; border-radius: 25px; overflow: hidden; } 
 .popup { display: inline-block; width: 100%; max-width: 460px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } 
 .popup2 { display: inline-block; width: 100%; max-width: 440px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } 
 .popup-img { font-size: 0px; } 
 .popup-img img { width: 100%; max-height: 90vh; } 
 .popup-btns { display: flex; gap: 0 15px; padding: 15px 20px; overflow: hidden; background: #5a6267;} 
 .popup-btns #hideToday {flex: 2;font-size: 15px;line-height: 30px;padding: 0.4em;border-radius: 30px;color: #C9C9C9;background: #FFFFFF;cursor: pointer;} 
 .popup-btns #layerClose {flex: 1;font-size: 15px;padding: 0.4em;color: #fff;font-size: 15px;line-height: 30px;padding: 0.4em;border-radius: 30px;background: rgb(0 0 0 / 30%);cursor: pointer;} 
 .popup-temporary { display: inline-block; max-width: 550px; background: #999; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } 
 .popup-temporary .pt-img { font-size: 0px; margin: 0; } 
 .popup-temporary .pt-img img { width: 100%; } 
 .popup-temporary .pt-close { position: relative; width: 25%; left: 75%; color: #fff; background: #444; font-size: 1.4rem; padding: 0.4em; } 
 
 @media (max-width: 1386px){
 .popupArea { width:calc(100% - 40px); } 
 .popup,
 .popup2,
 .popup3 { width: 33vw; position: absolute; top: 0; } 
 .popup { left: 0; } 
 .popup2 { left: 50vw; transform: translateX(-50%); } 
 .popup3 { left:initial; right:0; } 
 }
 @media (max-width: 579px){
.popup2{left: 44vw;}

 }

/* light mode */
html.light_mode {
--mode-color01:#F8F8F8;--mode-color02:#fff;--mode-color03:rgba(248, 248, 248, 0);--mode-color04:rgba(248, 248, 248, 1);--mode-color05:rgb(215 215 215 / 50%); } 
html.light_mode .main05 .heart_bnr { background: linear-gradient(to bottom, var(--mode-color03) , rgba(230, 230, 230, 1)); } 
/*html.light_mode .main06::after{background: url(/img/logo/logo_bg_light.webp)no-repeat center/cover;}*/
html.light_mode .main07{background: var(--mode-color01);}
html.light_mode .main05 .swiper-slide .quest_box{background:#fff;}
html.light_mode .quest_box:after, html.light_mode .main05 .swiper-wrapper > div:nth-child(2n-1) .quest_box:after{border-right-color:#fff;}
html.light_mode .main08 .pj_list:after{background: linear-gradient(rgba(28, 40, 48, 0), #fff);}
html.light_mode .main08 .more_pj{color:#243038;}
/*html.light_mode .main08 .more_pj::after{background:url(/img/move_arrow_l.webp)no-repeat center/contain;}*/
html.light_mode .main08 .pj_list li .project_desc .pj_link{border:1px solid #243038;}
/*html.light_mode .main08 .pj_list li .project_desc .pj_link:before{background: url(/img/link_arrow_l.webp)no-repeat center/cover;}*/
html.light_mode .main05 .m_review .quest_box,
html.light_mode .main05 .m_review .quest_box:nth-of-type(2){background:#fff;}
html.light_mode .main05 .m_review .quest_box:after,
html.light_mode .main05 .m_review .quest_box:nth-of-type(2):after{border-right-color:#fff;}


 /* background #fff */
 .main02 .main02_cont .main02_box > div,
 .main02 .main02_list ul li,
 .main03{ background:var(--mode-color02) } 

 @media (prefers-color-scheme: light), (update: light) {
     .main05 {
        background: var(--mode-color01);
    }
}

 /* background gradient */
 .main03_cont > div { background: linear-gradient(to bottom, var(--mode-color03) , var(--mode-color04)); } 

 /* header */
 .header.active { background:var(--mode-color05); } 

 @media (max-width: 478px){

    .main_vis .main-vis_txt{top: 60%;}
 }

 
 /* 추가 */
 .thankyou_message{font-size: 12px; color: #647178; line-height: 16px; padding-top: 5px;}