@charset "utf-8";
/* ---------------------------------------------------------
* FileName : main.css
* ProjectName : E9Pay (Responsive Web)
* Description : 메인페이지 전용 스타일시트
* Author : ideumotion.com
* Date : 2017.11
--------------------------------------------------------- */

/*

2022.05.09 신규 CSS 

*/

/* 공통 */
.main_tit.center{text-align:center;}
.main_tit.right{text-align:right;}
.main_tit h4{font-size:38px; font-weight:bold; letter-spacing:-0.04em; color:#222222; margin:0; line-height:1.3; word-break:keep-all;}
.main_tit p{font-size:20px; font-weight:400; letter-spacing:-0.04em; color:#666666; line-height:1.5; margin-top:30px; word-break:keep-all;}
.main_tit.white h4{color:#fff;}
.main_tit.white p{color:#fff;}

@media all and (max-width:1000px){
	.main_tit h4{font-size:32px;}
}

/* main - hero 비주얼 (그라데이션 + 장식, 이미지 의존도 낮춤) */
.main_visual{position:relative; font-size:0; letter-spacing:-4px; overflow:hidden; min-height:600px;}
.main_visual:after{content:''; display:table; clear:both;}
/* 배경 레이어: 그라데이션 + 블롭 + 그리드 */
.main_visual_bg{position:absolute; inset:0; z-index:0; background:linear-gradient(135deg, #1a1d29 0%, #252a3a 35%, #2d3548 70%, #1e2433 100%);}
.main_visual_bg .hero_blob{position:absolute; border-radius:50%; filter:blur(80px); opacity:0.35; pointer-events:none;}
.main_visual_bg .hero_blob--1{width:400px; height:400px; background:linear-gradient(135deg, #3b82f6, #8b5cf6); top:-100px; right:5%; animation:hero_float 12s ease-in-out infinite;}
.main_visual_bg .hero_blob--2{width:320px; height:320px; background:linear-gradient(135deg, #f59e0b, #fbbf24); bottom:10%; left:10%; animation:hero_float 14s ease-in-out infinite reverse;}
.main_visual_bg .hero_blob--3{width:200px; height:200px; background:linear-gradient(135deg, #06b6d4, #0ea5e9); top:40%; right:25%; animation:hero_float 10s ease-in-out infinite 1s;}
@keyframes hero_float{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(20px,-20px) scale(1.05);}}
.main_visual_bg .hero_grid{position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size:48px 48px;}
/* 콘텐츠 레이어 */
.main_visual_inner{position:relative; z-index:1; min-height:600px; display:flex; align-items:center;}
.main_visual .tit_box{display:inline-block; vertical-align:middle; width:100%; max-width:560px;}
.main_visual .tit_box .tit_badge{display:inline-block; margin:0 0 16px; padding:8px 16px; font-size:14px; font-weight:500; letter-spacing:-0.02em; color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:100px;}
.main_visual .tit_box h3{margin:0; font-size:52px; font-weight:800; letter-spacing:-0.04em; line-height:1.25; color:#fff;}
.main_visual .tit_box h3 em{font-style:normal; background:linear-gradient(120deg, #fbbf24 0%, #f59e0b 50%, #fcd34d 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.main_visual .tit_box .tit_desc{margin-top:24px; font-size:18px; font-weight:400; letter-spacing:-0.03em; color:rgba(255,255,255,0.75); line-height:1.6;}
.main_visual .tit_box .btn_box{margin-top:40px; display:flex; flex-wrap:wrap; gap:14px;}
.main_visual .tit_box .btn_box .app_box,
.main_visual .tit_box .btn_box .goo_box{display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; border-radius:14px; padding:18px 28px; min-width:200px; text-align:center; font-size:18px; font-weight:600; letter-spacing:-0.025em; transition:transform 0.2s, box-shadow 0.2s;}
.main_visual .tit_box .btn_box i{display:inline-block;}
.main_visual .tit_box .btn_box span{display:inline-block; vertical-align:middle;}
.main_visual .tit_box .btn_box .btn_primary{background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color:#1a1d29; box-shadow:0 4px 20px rgba(245,158,11,0.4);}
.main_visual .tit_box .btn_box .btn_primary:hover{transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,158,11,0.5);}
.main_visual .tit_box .btn_box .btn_secondary{background:rgba(255,255,255,0.12); color:#fff; border:1px solid rgba(255,255,255,0.25);}
.main_visual .tit_box .btn_box .btn_secondary:hover{background:rgba(255,255,255,0.18); transform:translateY(-2px);}
.main_visual .right_box{display:inline-block; vertical-align:middle; width:50%; text-align:right; padding:100px 0;}
.main_visual .right_box .box{text-align:left; display:inline-block; padding:30px 20px; box-sizing:border-box; border-radius:20px; background:#ffffff; max-width:435px; width:100%; position:relative;}
.main_visual .right_box .box .top_box{text-align:center; font-size:0; letter-spacing:-4px; padding-bottom:20px; }
.main_visual .right_box .box .top_box i{display:inline-block; vertical-align:middle; background:url('../images/main/right_box_top_icon01.png') no-repeat; width:18px; height:18px; margin-right:5px;}
.main_visual .right_box .box .top_box p{display:inline-block; vertical-align:middle; font-size:16px; letter-spacing:-0.045em; color:#222222; font-weight:400;}
.main_visual .right_box .box .top_box p b{color:#0b83e0; font-weight:500; border-bottom:1px solid #0b83e0}
.main_visual .right_box .select_box{padding:15px; box-sizing:border-box; border-radius:10px; border:1px solid #eeeeee;}
.main_visual .right_box .select_box dl dt{font-size:16px; font-weight:500; letter-spacing:-0.04em; color:#222222;}
.main_visual .right_box .select_box dl dd{font-size:0; letter-spacing:-4px; margin-top:10px;}
.main_visual .right_box .select_box dl dd .lang_box{display:inline-block; vertical-align:top; width:60px; position:relative; }
.main_visual .right_box .select_box dl dd .lang_box > a{display:block;}
.main_visual .right_box .select_box dl dd .lang_box > a > img {border: 1px solid #d2d2d2;}
.main_visual .right_box .select_box dl dd .lang_box.lang_click > a{background:url('../images/main/select_arrow.png') no-repeat center right;}
.main_visual .right_box .select_box dl dd .lang_box ul{display:none; position:absolute; left:0; top:100%; width:100%; max-height:100px; overflow-y:auto;  background:#fff; z-index:10; padding:10px 0 20px;}
.main_visual .right_box .select_box dl dd .lang_box ul::-webkit-scrollbar {width: 3px;}
.main_visual .right_box .select_box dl dd .lang_box ul::-webkit-scrollbar-thumb {background-color: #ffd21d;}
.main_visual .right_box .select_box dl dd .lang_box ul::-webkit-scrollbar-track {background-color: #eee;}
.main_visual .right_box .select_box dl dd .lang_box ul li + li{margin-top:10px}
.main_visual .right_box .select_box dl dd .lang_box ul li a{display:block;}
.main_visual .right_box .select_box dl dd .price_box{display:inline-block; vertical-align:top; width:calc(100% - 60px); padding-left:20px; box-sizing:border-box;}
.main_visual .right_box .select_box dl dd .price_box label{display:block; font-size:0; letter-spacing:-4px; text-align:right; box-sizing:border-box; }
.main_visual .right_box .select_box dl dd .price_box label input{display:inline-block;width:100%; border:0; background:transparent; width:Calc(100% - 45px); font-size:32px; font-weight:bold; letter-spacing:-0.04em; color:#222222; text-align:right;}
.main_visual .right_box .select_box dl dd .price_box label span{display:inline-block; font-size:20px; font-weight:300; letter-spacing:-0.04em; color:#222222; width:45px;}
.main_visual .right_box .select_box.type02 dl dd .price_box label input{color:#1b75bb;}
.main_visual .right_box .select_box.type02 dl dd .price_box label span{color:#1b75bb; font-weight:bold;}
.main_visual .right_box .mid_box{padding:30px 0; box-sizing:border-box; font-size:0; letter-spacing:-4px;}
.main_visual .right_box .mid_box .left{display:inline-block; vertical-align:top; width:75px; text-align:center}
.main_visual .right_box .mid_box .left .icon{position:relative; display:inline-block;}
.main_visual .right_box .mid_box .left .icon:before{content:''; position:absolute; left:50%; top:-90%; width:1px; height:317%; border-right:1px dashed #d2d2d2; box-sizing:border-box; transform:translateX(-50%)}
.main_visual .right_box .mid_box .left .icon img{position:relative; z-index:5;}
.main_visual .right_box .mid_box .right{display:inline-block; vertical-align:top; width:calc(100% - 75px); text-align:right; position:relative; z-index:20; }
.main_visual .right_box .mid_box .right > a{display:inline-block; max-width:225px; width:100%; height:47px; border-radius:23.5px; background:#f6f6f7 url('../images/main/select_arrow.png') no-repeat center right 20px; padding:0 40px 0 20px; font-size:16px; font-weight:500; letter-spacing:-0.04em; color:#222222; border:0; box-sizing:border-box; line-height:47px; text-align:left; position:relative; z-index:20;}
.main_visual .right_box .mid_box .right > a.on{background-color:#ffd21d;}
.main_visual .right_box .mid_box .right ul{display:none; position:absolute; right:0; top:calc(100% - 30px); max-width:215px; width:100%; max-height:143px; overflow-y:auto;  background:#fff; z-index:19; padding:40px 0 20px; text-align:left; border:1px solid #dcdcdc; border-radius:0 0 10px 10px; box-sizing:border-box; }
.main_visual .right_box .mid_box .right ul::-webkit-scrollbar {width: 3px;}
.main_visual .right_box .mid_box .right ul::-webkit-scrollbar-thumb {background-color: #ffd21d;}
.main_visual .right_box .mid_box .right ul::-webkit-scrollbar-track {background-color: #eee;}
.main_visual .right_box .mid_box .right ul li + li{margin-top:5px}
.main_visual .right_box .mid_box .right ul li a{display:block; font-size:16px; letter-spacing:-0.04em; color:#888888; padding:0 20px; box-sizing:border-box; }
.main_visual .right_box .mid_box .right ul li a:hover{background:#fffce1; color:#222}
.main_visual .right_box .txt_box{margin-top:20px; border-radius:10px; background:#f3f3f3; border-radius:10px; padding:15px 10px; box-sizing:border-box;}
.main_visual .right_box .txt_box p{font-size:16px; font-weight:400; letter-spacing:-0.04em; color:#666666;}
.main_visual .right_box .txt_box p + p{margin-top:10px;}
.main_visual .right_box .txt_box p img{displaY:inline-block; vertical-align:top; margin-right:10px;}

@media all and (max-width:1000px){
	.main_visual{padding:60px 0;}
	.main_visual .tit_box{width:100%;}
	.main_visual .tit_box h3{font-size:40px;}
	.main_visual .tit_box .tit_desc{font-size:16px;}
	.main_visual .tit_box .tit_badge{font-size:13px;}
	.main_visual .right_box{width:100%; padding:0; margin-top:40px; text-align:left;}
}

@media all and (max-width:767px){
	.main_visual{min-height:520px;}
	.main_visual_inner{min-height:520px;}
	.main_visual .tit_box h3{font-size:32px;}
	.main_visual .tit_box .tit_desc{font-size:15px;}
	.main_visual .tit_box .btn_box{flex-direction:column; margin-top:32px;}
	.main_visual .tit_box .btn_box .app_box,
	.main_visual .tit_box .btn_box .goo_box{width:100%; min-width:0;}
	.main_visual .right_box .box{max-width:100%;}
}

.main_con01{padding:145px 0; overflow:hidden;}
.main_con01 .img_box{margin-top:80px;}
.main_con01 .img_box img{width:100%;}
.main_con01 .btn_box{margin-top:50px; text-align:center;}
.main_con01 .btn_box a{display:inline-block; width:205px; height:59px; line-height:59px; border-radius:29.5px; background:#000000; font-size:18px; font-weight:bold; letter-spacing:-0.04em; color:#Fff;}

@media all and (max-width:1000px){
	.main_con01 {padding:125px 0;}
	.main_con01 .img_box{margin-top:40px;}
}

.main_con02{padding:145px 0; background:#fbfbfb; overflow:hidden;}
.main_con02 ul{font-size:0; letter-spacing:-4px; margin-top:50px;}
.main_con02 ul li{display:inline-block; vertical-align:top; box-sizing:border-box; text-align:center; width:calc(33.333% - 20px); margin-right:30px;}
.main_con02 ul li:last-of-type{margin-right:0;}
.main_con02 ul li .box{background:#fff; border-radius:4px; padding:50px 10px 60px; box-sizing:border-box;}
.main_con02 ul li .box p{font-size:18px; font-weight:bold; letter-spacing:-0.04em; color:#222222; margin-top:15px;}
.main_con02 ul li .box span{display:block; font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#666666; margin-top:10px; word-break:keep-all; }

@media all and (max-width:1000px){
	.main_con02{padding:125px 0;}
	.main_con02 ul{margin-top:30px;}
	.main_con02 ul li{width:100%; margin-right:0; margin-bottom:30px;}
	.main_con02 ul li:last-of-type{margin-bottom:0;}
}

.main_con03{background:url('../images/main/main_con03_bg.jpg') no-repeat center / cover; padding:145px 0; overflow:hidden;}
.main_con03 .box{margin:50px auto 0; max-width:1250px; width:100%;}
.main_con03 .box ul{font-size:0; letter-spacing:-4px; text-align:center; }
.main_con03 .box ul li {display:inline-block; vertical-align:top; width:calc(33.3333% + 44px) ;margin-left:-66px; position:relative;}
.main_con03 .box ul li:nth-of-type(1){margin-left:0;}
.main_con03 .box ul li .one{position:absolute; width:100%; height:100%; background:rgba(255,255,255,0.12); border:1px solid #e5e5e4; border-radius:50%; box-sizinG:border-box;}
.main_con03 .box ul li:nth-of-type(1) .one:before{content:''; position:absolute; left:7%; top:76.5%; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6)}
.main_con03 .box ul li:nth-of-type(2) .one:before{content:''; position:absolute; right:19.5%; bottom:89.5%; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6)}
.main_con03 .box ul li:nth-of-type(3) .one:before{content:''; position:absolute; right:17%; bottom:10.5%; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.6)}
.main_con03 .box ul li .txt_box{width:100%; height:100%; text-align:center; position:relative; z-index:5; padding:50% 0;}
.main_con03 .box ul li .txt_box .table{position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%)}
.main_con03 .box ul li .txt_box i{display:inline-block;}
.main_con03 .box ul li .txt_box p{font-size:24px; font-weight:bold; letter-spacing:-0.04em; color:#ffffff; margin-top:25px;}
.main_con03 .box ul li .txt_box span{display:block; margin-top:10px; font-size:20px; font-weight:400; letter-spacing:-0.04em; color:#fff; line-height:1.5;}
.main_con03 .box ul li.on .one{background:rgba(255,255,255,0.22);}
.main_con03 .box ul li.off{opacity:0.6;}

@media all and (max-width:1000px){
	.main_con03 {padding:100px 0;}
	.main_con03 .box{margin-top:30px; max-width:100%;}
	.main_con03 .box ul li{display:block; margin:0 auto; width:400px;}
	.main_con03 .box ul li:nth-of-type(1){margin-left:auto;}
	.main_con03 .box ul li:nth-of-type(2){margin-left:auto; margin-top:-66px;}
	.main_con03 .box ul li:nth-of-type(3){margin-left:auto; margin-top:-66px;}
	.main_con03 .box ul li:nth-of-type(1) .one:before{top:auto; bottom:76.5%}
	.main_con03 .box ul li:nth-of-type(2) .one:before{top:76.5%; bottom:auto; right:7%}
	.main_con03 .box ul li:nth-of-type(3) .one:before{top:76.5%; bottom:auto; right:90.5%}
}

.main_con04{padding:100px 0 150px;overflow:hidden;}
.main_con04 ul{font-size:0; letter-spacing:-4px;}
.main_con04 ul li + li{margin-top:100px}
.main_con04 ul li .left_box{display:inline-block; vertical-align:middle; width:50%; text-align:center; box-sizing:border-box; }
.main_con04 ul li .left_box .box{display:inline-block; text-align:left;}
.main_con04 ul li .left_box .main_tit h4{font-size:38px; letter-spacing:-0.04em; color:#222222; font-weight:bold;}
.main_con04 ul li .left_box .main_tit p{font-size:20px; letter-spacing:-0.04em; color:#666666; font-weight:400;}
.main_con04 ul li .right_box{display:inline-block; vertical-align:middle; width:50%; text-align:center;}
.main_con04 ul li .right_box .img_box{width:300px; height:590px; display:inline-block; background:url('../images/main/main_con04_bg.png') no-repeat center / contain; overflow:hidden;  padding:0 17.5px; box-sizing:border-box; box-shadow:5px 5px 10px rgba(0,0,0,0.27); border-radius:50px; }
.main_con04 ul li .right_box .img_box .box{margin-top:67px; border-radius:0 0 40px 40px; overflow:hidden;}
.main_con04 ul li .right_box .img_box .box .swiper-slide img{width:100%; }
.main_con04 ul li .right_box.m_ver{display:none; }

@media all and (max-width:1000px){
	.main_con04 ul li .left_box{display:block; width:100%; }
	.main_con04 ul li .right_box{display:block; width:100%; margin-top:40px;}
	.main_con04 ul li .right_box.pc_ver{display:none; }
	.main_con04 ul li .right_box.m_ver{display:block; }
}

.main_con05{background:#2f2f2f; font-size:0; letter-spacing:-4px; text-align:center; padding:80px 0; overflow:hidden;}
.main_con05 .left_box{display:inline-block; vertical-align:middle; width:50%;}
.main_con05 .left_box .txt_box{display:inline-block; text-align:left;}
.main_con05 .left_box .main_tit p{font-size:18px; margin-top:15px;}
.main_con05 .left_box .btn_box{margin-top:40px;}
.main_con05 .left_box .btn_box a{display:inline-block; width:205px; height:59px; line-height:59px; border-radius:29.5px; background:#ffd21d; text-align:center; font-size:18px; font-weight:bold; letter-spacing:-0.04em; color:#222222;}
.main_con05 .right_box{display:inline-block; vertical-align:middle; width:50%;}
.main_con05 .right_box .box{display:inline-block; vertical-align:top; width:calc(45% - 20px); margin-right:40px;}
.main_con05 .right_box .box:last-of-type{margin-right:0;}
.main_con05 .right_box .box .bx-viewport{overflow:inherit !important;}
.main_con05 .right_box .box img{width:100%;}

@media all and (max-width:1000px){
	.main_con05 {padding:100px 0;}
	.main_con05 .left_box{width:100%;}
	.main_con05 .left_box .txt_box{text-align:center; display:block;}
	.main_con05 .right_box{width:0;}
}

.main_con06{background:url('../images/main/main_con06_bg.jpg') no-repeat center / cover; padding:115px 0; text-align:center;overflow:hidden;}
.main_con06 .btn_box{margin-top:40px; font-size:0; letter-spacing:-4px;}
.main_con06 .btn_box a{display:inline-block; vertical-align:top; width:220px; margin-right:20px;}
.main_con06 .btn_box a:last-of-type{margin-right:0;}
.main_con06 .btn_box a img{width:100%;}

@media all and (max-width:1000px){
	.main_con06 {padding:100px 0;}
	.main_con06 .btn_box{margin-top:30px;}
	.main_con06 .btn_box a{width:180px;}
}

.main_popup_bg{display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100;}
.main_popup{display:none; position:fixed; left:50%; top:50%; z-index:101; transform:translate(-50% , -50%) ; width:540px; background:#fff; border-radius:30px; padding:40px 0; box-sizing:border-box;}
.main_popup .pop_con{padding:0 20px; box-sizing:border-box;}
.main_popup .tit_box:after{content:''; display:table; clear:both;}
.main_popup .tit_box p{float:left; font-size:20px; font-weight:bold; letter-spacing:-0.04em; color:#000000;}
.main_popup .tit_box a{float:right; display:inline-block;}
.main_popup .search_box{margin-top:20px; position:relative;}
.main_popup .search_box input{border-radius:10px; height:50px; width:100%; background:#f5f5f5; border:0; padding:0 15px 0 45px; box-sizing:border-box; font-size:18px; font-weight:400; letter-spacing:-0.04em; color:#222;}
.main_popup .search_box a{position:absolute; left:15px; top:50%; display:inline-block; transform:translateY(-50%)}
.main_popup .box_con{max-height:500px; overflow-y:auto; padding:0 20px; box-sizing:border-box; }
.main_popup .box_con::-webkit-scrollbar {width: 6px;}
.main_popup .box_con::-webkit-scrollbar-thumb {background-color: #b9b9b9; border-radius:3px;}
.main_popup .box_con::-webkit-scrollbar-track {background-color: #fff;}
.main_popup .box{padding:30px 0; }
.main_popup .box + .box{border-top:1px solid #eeeeee}
.main_popup .box .major{padding:6px 10px; display:inline-block; font-size:16px; font-weight:400; letter-spacing:-0.04em; color:#ffffff; border-radius:4px; background:#000000; }
.main_popup .box ul{font-size:0; letter-spacing:-4px;}
.main_popup .box ul li{display:inline-block; vertical-align:top; width:50%; padding-right:10px; box-sizinG:border-box;}
.main_popup .box ul li {margin-top:20px;}
.main_popup .box ul li input{display:none;}
.main_popup .box ul li label{display:block; box-sizing:border-box; font-size:0; letter-spacing:-4px; border:1px solid transparent; padding:3px 8px; border-radius:8px;}
.main_popup .box ul li label i{display:inline-block; vertical-align:middle; width:40px; border:1px solid #d2d2d2; box-sizing:border-box; }
.main_popup .box ul li label i.border_none{border:0; }
.main_popup .box ul li label span{display:inline-block; vertical-align:middle; max-width:calc(100% - 50px); font-size:16px; font-weight:400; letter-spacing:-0.04em; color:#222222; margin-left:10px; box-sizing:border-box;}
.main_popup .box ul li label span b{display:block; font-size:14px; font-weight:400; color:#999999}
#error-message {position: absolute; width: 28.3em; height: 30px; font-size: 12px; color: red; font-weight: bold; top: 0%; background-color: white; z-index: 9999; letter-spacing: 0em; border-radius: 13px; padding: 15px; right: 0; background-image: url('../images/main/info_con01.png'); background-repeat: no-repeat; background-position: 20px 20px; padding-left: 80px; background-position-y: center  }

.main_popup .box ul li label:hover{border-color:#ffda44}
.main_popup .box ul li input:checked + label {background-color:#ffda44}

@media all and (max-width:1000px){
	.main_popup{width:93.75%}
	.main_popup .box_con{max-height:500px;}
}