@charset "UTF-8";

/*-------------------------------------------------
Version : 1.0
Author : han
-------------------------------------------------*/


/*** setting ***/

:root{
	--main-color:transparent;
	--transition-custom: all 0.3s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out;
	--transition-custom-2: all 0.2s ease-in-out; 
  --font-family-noto: 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
	--font-family-mont: 'Montserrat', 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
  --font-family-pre: 'Pretendard', 'Noto Sans Korean', 'Nanum Gothic', Nanum Gothic, '나눔고딕', '맑은 고딕', 'Malgun Gothic', Dotum, '돋움', Gulim, '굴림',sans-serif;
}

.main .wrapper { overflow-x: clip; }

.main .sec_01.in_cover > .in_w,
.main .sec_02.in_cover > .in_w,
.main .sec_03.in_cover > .in_w {top:3rem; opacity: 0.3; filter: blur(8px);}
.main .sec_01.in_cover.wp > .in_w,
.main .sec_02.in_cover.wp > .in_w,
.main .sec_03.in_cover.wp > .in_w {top:0; opacity:1; filter: blur(0); transition: 0.8s;}


/* scrollbar */
body ::-webkit-scrollbar{width: 12px; height: 12px;}
body ::-webkit-scrollbar-thumb{background-color: #a0abba; border-radius: 0.625rem; border: 2px solid transparent; background-clip: padding-box;  box-sizing: border-box;}
body ::-webkit-scrollbar-track{ background:transparent; border-radius: 0.625rem; border: 2px solid transparent; box-shadow:inset 0.625rem 0 0 #e5e8ec;  box-sizing: border-box; }

.gnb ::-webkit-scrollbar{width: 8px; height: 8px;}

body.main {word-break: keep-all;}

.main .swiper-button-next:after, 
.main .swiper-button-prev:after {display: none;}
.main .swiper_controll_w {display: flex; align-items: center; gap:10px; z-index:10; position:absolute; left:0; bottom:20px;  box-sizing: border-box; }
.main .swiper-pagination {}
.main .swiper_controll {display: flex; align-items: center; gap:0.5rem; white-space: nowrap; }
.main .swiper_controll .ico {position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:auto; width:1rem; height: 1rem; }
.main .swiper-pagination {display: flex; align-items: center; position:relative; margin:0 3px;}
.main .swiper-pagination-bullets {display: flex; gap:6px; }
.main .swiper-pagination-bullet {  width:9px; height:9px; background:#003271;  border-radius: 5px; opacity: 0.2;}
.main .swiper-pagination-bullet-active {width:30px; background:#003271; opacity: 1;}

.main .swiper-pagination-progressbar {width:100px; height: 3px; background:#e5e5e5;}
.main .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#72a909;}

.main .swiper-pagination-fraction {display: inline-flex; gap:0.25rem; width:auto; letter-spacing: 0; font-family: var(--font-family-pre);}
.main .swiper-pagination-fraction > span:before {content:'0'; display: inline;}
.main .swiper-notification {position:absolute;}

.main .swiper-control {display: flex;}
.main .btn_autoPlay,
.main .swiper-button-prev,
.main .swiper-button-next {position:relative; right:auto; left:auto; top:auto; bottom:auto; margin:auto; width:1.875rem; height: 1.875rem; background: url(../images/main/main_icon_play_arwL.png) no-repeat 50% 50%; background-size:1.5rem auto;}
.main .swiper-button-next {background-image: url(../images/main/main_icon_play_arwR.png);}
.main .btn_autoPlay {background: url(../images/main/main_icon_play_pause.png) no-repeat 50% 50%; background-size:1.5rem auto;}
.main .btn_autoPlay.btn_stop {background-image: url(../images/main/main_icon_play_pause.png);}
.main .btn_autoPlay.btn_play {background-image: url(../images/main/main_icon_play_play.png);}

/* main content */
.main #header,
.main .hd_box,
.main .hd_box > .in_w,
.main #header nav  {height: 120px;}
.main #header .gnb > li > a {line-height: 120px;}
.main .gnb_open .hd_box  {height: 540px;}
.main .in_cover > .in_w {max-width:1200px;}

.main article {padding-top:0; padding-bottom:0; overflow: hidden; overflow: clip;}
.main .sec_vis > .in_w {display: flex; gap:30px; max-width:1600px;}
.main .sec_vis,
.main .sec_01,
.main .sec_02 {position:relative; padding-bottom:100px;}

.main .sec_vis .main_bgDeco {z-index:-1; position:absolute; left:0; top:100%; transform: translate(-50%,-50%); margin-top:130px; width:1006px; height: 1006px;  background: url(../images/main/main_bg_deco01.png) no-repeat 50% 50%; background-size:contain;
	animation: floatCloud 10s ease-in-out infinite;}
.main .sec_02 .main_bgDeco {z-index:-1; position:absolute; right:0; top:0; transform: translate(50%,-50%); margin-top:8.125rem; width:387px; height: 387px;  background: url(../images/main/main_bg_deco02.png) no-repeat 50% 50%; background-size:contain;
	 animation: cloudDrift 100s linear infinite;}
.main .sec_02 .main_bgDeco2 i {z-index:-1; position:absolute; transform: translate(-50%,-50%); width:120px; height: 120px;  background: url(../images/main/main_bg_icon01_01.png) no-repeat 50% 50%; }
.main .sec_02 .main_bgDeco2 i.i0101 {left:0; top:35%; background-image: url(../images/main/main_bg_icon01_01.png);}
.main .sec_02 .main_bgDeco2 i.i0102 {left:-15%; top:65%; background-image: url(../images/main/main_bg_icon01_02.png);}
.main .sec_02 .main_bgDeco2 i.i0103 {left:10%; top:100%; background-image: url(../images/main/main_bg_icon01_03.png);}
.main .sec_02 .main_bgDeco2 i.i0104 {left:98%; top:30%; background-image: url(../images/main/main_bg_icon01_04.png);}
.main .sec_02 .main_bgDeco2 i.i0105 {left:110%; top:65%; background-image: url(../images/main/main_bg_icon01_05.png);}
.main .sec_02 .main_bgDeco2 i.i0106 {left:100%; top:100%; background-image: url(../images/main/main_bg_icon01_06.png);}
.main .sec_03 .main_bgDeco {z-index:-1; position:absolute; left:0; top:0; transform: translateX(-50%); margin-top:150px; width:202px; height: 202px;  background: url(../images/main/main_bg_deco03.png) no-repeat 50% 50%; background-size:contain;
	animation: floatCloud2 8s ease-in-out infinite;}
@keyframes floatCloud {
  0%   { transform: translateX(-50%) translateY(-50%); }
  50%  { transform: translateX(-50%) translateY(-58%); }
  100% { transform: translateX(-50%) translateY(-50%); }
}
@keyframes floatCloud2 {
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-55%) translateY(-10%); scale:1.1; }
  100% { transform: translateX(-50%) translateY(0); }
}

@keyframes cloudDrift {
  0% {
    transform: translateX(50%) translateY(-50%) scale(1);
  }
  25% {
    transform: translateX(75%) translateY(-25%) scale(1.1);
  }
  50% {
    transform: translateX(0) translateY(0) scale(1);
  }
	75% {
    transform: translateX(75%) translateY(-25%) scale(1.1);
  }
  100% {
    transform: translateX(50%) translateY(-50%) scale(1);
  }
}
@media (max-width:1160px) {
	.main .sec_vis .main_bgDeco {top:70%; margin-top:0; zoom:0.7;}
	.main .sec_02 .main_bgDeco {width:18.75rem; height:18.75rem;}
	.main .sec_02 .main_bgDeco2 i {zoom:0.8;}
}
@media (max-width:960px) {
	.main .sec_vis,
	.main .sec_01,
	.main .sec_02 {padding-bottom:0; }
	.main .sec_01,
	.main .sec_02,
	.main .sec_03 {padding-top:5rem;}
	.main .sec_02 .main_bgDeco { margin-top:-7rem; right:5vw; zoom:1.3;}
	
	.main .sec_02 .main_bgDeco2 i {zoom:0.7;}
	.main .sec_02 .main_bgDeco2 i.i0104 {top:5%;}
	.main .sec_02 .main_bgDeco2 i.i0106 {top: 105%; left: 95%;}
	.main .sec_vis .main_bgDeco {margin-top:30vw; width:200vw;}
}
@media (max-width:640px) {
	.main .sec_02 .main_bgDeco { margin-top:-4rem;  zoom:1.1;}
	.main .sec_02 .main_bgDeco2 i {zoom:0.6;}
}



.main .h3_w {margin-bottom:40px; text-align: center;}
.main .h3_w h3.main_cntT {font-size:50px; letter-spacing: -5px;}
.main .h3_w .h3_x {margin-top:14px; font-size:18px; line-height: 1.4; }
.main .h3_w .btn_st_round { margin-top:1.5rem; padding:0 2rem; height: 3.25rem; font-size:1.1875rem; color:#000; font-weight: 500; border-radius: 1.75rem;}
.main .h3_w .btn_st_round .icon_arw {margin-left:0.75rem; width:1.75rem; height: 1.75rem; background: url(../images/main/main_arw02.png) no-repeat 50% 50%; background-size:contain;}
.main .h3_w .btn_w {display: inline-flex; margin:25px auto 0; width:440px; max-width:100%; background:#f6f6f6; border-radius: 24px; overflow: hidden;}
.main .h3_w .btn_w .btn {flex:1; height: 3rem; font-size:1.125rem; background:none; border:none;}
.main .h3_w .btn_w .btn span { color:#666; }
.main .h3_w .btn_w .btn.ac { background:#ff8a2a; border-radius: 24px;}
.main .h3_w .btn_w .btn.ac span {color:#fff;}
@media (max-width:1160px) {
	.main .h3_w h3.main_cntT { font-size: 3rem;}
	.main .h3_w .h3_x {font-size:1rem;}
}
@media (max-width:860px) {
	.main .h3_w h3.main_cntT { font-size: 2.5rem; letter-spacing: -1.5px;}
}
@media (max-width:640px) {
	.main .h3_w h3.main_cntT {font-size: 2.25rem;}
	.main .h3_w .btn_st_round {zoom:0.9;}
	.main .h3_w .btn_st_round .icon_arw { width: 1.25rem; height: 1.25rem; }
}
@media (max-width:460px) {
	.main .h3_w h3.main_cntT {font-size:7vw;}
}
@media (max-width:340px) {
	.main .h3_w h3.main_cntT {font-size:2rem;}
}
.main .main_bgDeco {position:absolute;}


.main_vis_tit {padding-top:40px; width:484px;  font-size:54px; color:#000; line-height: 1.25; font-weight: 600; letter-spacing: -5px;}
.main_vis_tit span {display: block; opacity: 0; transform: translateY(-20px);}
.main_vis_tit .deco_box { display: inline-block; position:relative; left:-8px; padding:10px 20px 11px; margin:6px 0; font-size:36px; color:#ff8a2a; letter-spacing: -3px; border:2px solid #ff8a2a; border-radius: 16px;}
.main_vis_tit .ac span {  animation: visTit_fade 0.5s ease-out forwards ;}
.main_vis_tit .ac span:nth-child(1) { animation-delay: 0.1s; }
.main_vis_tit .ac span:nth-child(2) { animation-delay: 0.25s; }
.main_vis_tit .ac span:nth-child(3) { animation-delay: 0.4s; }
.main_vis_tit .ac span:nth-child(4) { animation-delay: 0.55s; }

@keyframes visTit_fade {
  to { opacity: 1; transform: translateY(0); }
}

.main_vis { width:1086px; max-width:68%;}
.main_vis_swiper {width:100%;}
.main_visThumb_swiper { position:absolute; left:0; bottom:84px; width:420px; overflow: hidden;}
.main_visThumb_swiper .slide_box {position:relative; border-radius: 10px; overflow: hidden;}
.main_visThumb_swiper .slide_box:after {content:''; display: block; position:absolute; left:0; top:0; width:100%; height: 100%; background:rgba(0,0,0,0.35); opacity: 1;
  transition: var(--transition-custom);}
.main_visThumb_swiper .swiper-slide-thumb-active .slide_box:after { opacity: 0;}

.main_vis_swiper .slide_w {position:relative; }
.main_vis_swiper .slide_w .img_w {position:relative; height: 100%; border-radius: 1.875rem; overflow: hidden;}
.main_vis_swiper .slide_w img {width:100%; height: 100%; object-fit: cover;}
.main_vis_swiper .slide_w .tit { position:absolute; left:55px; bottom:50px; color:#fff; }
.main_vis .vis_iconBox_w {z-index:10; position:absolute; right:0; bottom:120px; width: 1086px; max-width: 68%; }

.main_vis_swiper .slide_w .tit span {display: block; font-size:17px; line-height: 1.5; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);}  

.main_vis .swiper_controll_w  {gap:15px; width:420px;}
.main_vis .swiper-control {margin-left:10px;}
.main_vis .swiper-pagination-progressbar {flex:1;}
@media (max-width:1540px) {
	.main_vis_tit {padding-top:1.5rem; width:28vw; }
	.main_vis_tit p {zoom: 0.9; }

	.main_vis {width:68vw;}

	.main_visThumb_swiper,
	.main_vis .swiper_controll_w {width:26vw;}
}
@media (max-width:1480px) {
	.main_vis_tit p {zoom: 0.85; }
	.main_visThumb_swiper { bottom: 80px;}
}
@media (max-width:1360px) {
	.main_vis_tit p {zoom: 0.8; }
	.main_vis_swiper .slide_w {height: 480px;}
}
@media (max-width:1240px) {
	.main_vis_tit p { zoom: 0.75;    }
}
@media (max-width:1160px) {
	.main_vis .vis_iconBox_w,
	.main_visThumb_swiper {display: none;}

	.main_vis_tit {z-index:10; position:absolute; left:6vw; top:2.5rem; padding-top:0; width:auto; color:#fff; font-size: 2.5rem;}
	.main_vis_tit p {zoom:1;}
	.main_vis_tit .deco_box {margin:0.5rem 0; padding: 0.625rem 1.25rem 11px; font-size:2rem;}

	.main_vis {width:100%; max-width:none;}
	.main_vis_swiper .slide_w {height: auto;}
	.main_vis_swiper .vis_iconBox_w {bottom:200px;}
	.main_vis_swiper .slide_w .tit { left:6vw; bottom:2.5rem;}
	.main_vis_swiper .slide_w .img_w:before {content:''; display: block; position:absolute; top:0; left:0; width:100%; height: 100%; background:rgba(0,0,0,0.18);}

	.main_vis .swiper_controll_w {justify-content: center;}

	.main_vis .swiper_controll_w { position:relative; bottom:auto; margin-top:2rem; width:auto;}
	.main_vis .swiper-pagination-progressbar {flex:none;}
	.main_vis .btn_autoPlay, 
	.main_vis .swiper-button-prev, 
	.main_vis .swiper-button-next {margin:0;}
}
@media (max-width:960px) {
	.main_vis_tit p {zoom:0.8;}
	.main_vis_swiper .slide_w {height: 26.25rem;}
	.main_vis_swiper .slide_w .tit span {font-size:1rem;}
}
@media (max-width:768px) {
	.main .btn_autoPlay, 
	.main .swiper-button-prev, 
	.main .swiper-button-next {width:1.25rem; height: 1.25rem;     background-size: 1.125rem auto;}

	.hd_sns_w a {width: 2rem; height: 2rem;}
}


.vis_iconBox { z-index: 2; position:absolute; top:0; right:21%; display: flex; align-items: center; width:296px; height:269px; color:#fff; opacity: 0;  box-sizing: border-box; scale:100%;
	transition: all 0.6s ease;
	animation: bubbleMotion 6s ease-in-out infinite;}
.vis_iconBox:before {content:''; display: block; position:absolute; left:-15px; top:-14px; width:332px; height: 304px; background: url(../images/main/main_visIcon01_01_shadow.png) no-repeat 50% 50%; background-size:contain; }
.vis_iconBox .t_w {position:relative; margin-bottom:34px; padding:20px 35px 20px 40px; font-size:25px; font-weight: 500; letter-spacing: -2px; width:100%; box-sizing: border-box;}
.vis_iconBox .t1 { display: flex; justify-content: space-between; gap:8px; line-height: 1.2;}
.vis_iconBox .t1 i {display: inline-block; margin-top:3px; width:54px; height: 54px; background: url(../images/main/main_visIcon02_01.png) no-repeat 50% 50%; background-size:contain;}
.vis_iconBox .t2 {margin-top:3px;}
.vis_iconBox .t2 strong {display: inline-block; margin-top:2px; margin-right:3px; font-size:56px; font-weight: bold; font-family:var(--font-family-pre) ;}

.vis_iconBox.front {top:0; right:21%; }
.vis_iconBox.back { z-index: 1; scale:80%;  right:10%; top:-190px; filter: blur(0.7px); }
.vis_iconBox.back .t_w {padding-left:35px;}

section.wp .vis_iconBox {  opacity: 0;
	animation: enterFromTop 0.5s ease-in-out forwards, bubbleMotion 6s ease-in-out 0.6s infinite;
}
section.wp .vis_iconBox.st01 {  opacity: 0;
	animation: enterFromTop 0.5s ease-in-out forwards, bubbleMotion2 6.5s ease-in-out 0.6s infinite;
}
@keyframes bubbleMotion {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}
@keyframes bubbleMotion2 {
  0%   { transform: translateY(0); }
  65%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
@keyframes enterFromTop {
  0% {  transform: translateY(-30px);  opacity: 0;}
	75% {  transform: translateY(-3px);  opacity: 0.9;}
  100% { transform: translateY(0); opacity: 1;  }
}
@media (max-width:1560px) {
	.vis_iconBox.front {right:15%; }
	.vis_iconBox.back { right:3%;}
}
@media (max-width:1400px) {
	.vis_iconBox {zoom:0.9;}
	.vis_iconBox.front {right:13%; }
	.vis_iconBox.back { right:1%;}
}
@media (max-width:1280px) {
	.vis_iconBox {zoom:0.85;}
	.vis_iconBox.front {right:10%; }
	.vis_iconBox.back { right:-5%;}
}
@media (max-width:1160px) {

}


.sec_quickScroll {z-index:10; position:sticky; top:0;}
.main .sec_quickScroll > .in_w { max-width:1600px;}

.main_sideQuick_w {}
.main_sideQuick_w .sideQuick_btn {position:absolute; top:0;}

.main_quickScroll_w {position:absolute; top:0; }
.main_quickScroll_w > li {display: block;}
.main_quickScroll,
.main_sideQuick_w .sideQuick_btn { display: flex; width:2.75rem; height: 2.75rem; background: #fff url(../images/main/main_quickIcon01_01.png) no-repeat 50% 50%; background-size:1.5rem auto; border:1px solid #c4c4c4; border-radius: 50%; box-sizing: border-box;}
.main_sideQuick_w .sideQuick_btn {background-image:  url(../images/main/main_arw02.png); background-size:1.75rem auto; opacity: 0;}
.main_quickScroll span {display: flex; align-items: center;  position:absolute; left:100%; height: 100%; width:0; color:#000; text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: var(--transition-custom); overflow: hidden;}
.main_quickScroll.icon02 {background-image: url(../images/main/main_quickIcon01_02.png); }
.main_quickScroll.icon03 {background-image: url(../images/main/main_quickIcon01_03.png); }
.main_quickScroll.icon04 {background-image: url(../images/main/main_quickIcon01_04.png); }
.main_quickScroll.ico_close {background-color:#000000; border-color:#fff;}
.main_quickScroll.ico_close:before,
.main_quickScroll.ico_close:after {background-color:#fff;}

.main_sideQuick_w .sideQuick_btn,
.main_sideQuick_w .main_quickScroll_w li { transition: transform 0.4s ease, opacity 0.4s ease; }
.main_sideQuick_w .sideQuick_btn { top:1.5rem; transform: translateX(-200%);}
.main_sideQuick_w .main_quickScroll_w {top:1.5rem;}
.main_sideQuick_w .main_quickScroll_w li { position:absolute; transform: translateX(0); opacity: 1;}
.main_sideQuick_w .main_quickScroll_w li:nth-child(1) { top:0; }
.main_sideQuick_w .main_quickScroll_w li:nth-child(2) { top:3.5rem; }
.main_sideQuick_w .main_quickScroll_w li:nth-child(3) { top:7rem;}
.main_sideQuick_w .main_quickScroll_w li:nth-child(4) { top:10.5rem; }
.main_sideQuick_w .main_quickScroll_w li:nth-child(5) { top:14rem; }

.main_sideQuick_w.hid .sideQuick_btn { transform: translateX(-2.5rem); opacity: 1; transition-delay: 0.5s; }
.main_sideQuick_w.hid .sideQuick_btn:hover {transform: translateX(-1.5rem); transition-delay: 0s;}
.main_sideQuick_w.hid .main_quickScroll_w li { transform: translateX(-200%); opacity: 0; }
.main_sideQuick_w.hid .main_quickScroll_w li:nth-child(1) { transition-delay: 0.1s; }
.main_sideQuick_w.hid .main_quickScroll_w li:nth-child(2) { transition-delay: 0.15s; }
.main_sideQuick_w.hid .main_quickScroll_w li:nth-child(3) { transition-delay: 0.2s; }
.main_sideQuick_w.hid .main_quickScroll_w li:nth-child(4) { transition-delay: 0.25s; }
.main_sideQuick_w.hid .main_quickScroll_w li:nth-child(5) { transition-delay: 0.3s; }

.main_sideQuick_w.off .sideQuick_btn { transform: translateX(-200%); transition-delay: 0s; opacity: 0;}
.main_sideQuick_w.off .main_quickScroll_w li { transform: translateX(0);  opacity: 1; }

.main_sideQuick_w.off .main_quickScroll_w li:nth-child(1) { transition-delay: 0.1s; }
.main_sideQuick_w.off .main_quickScroll_w li:nth-child(2) { transition-delay: 0.15s; }
.main_sideQuick_w.off .main_quickScroll_w li:nth-child(3) { transition-delay: 0.2s; }
.main_sideQuick_w.off .main_quickScroll_w li:nth-child(4) { transition-delay: 0.25s; }
.main_sideQuick_w.off .main_quickScroll_w li:nth-child(5) { transition-delay: 0.3s; }

.main_quickScroll_w > li:hover .main_quickScroll span { padding-left:12px; width:auto; opacity: 1; }

@media (max-width:1340px) {
	.main_quickScroll { box-shadow: 0.25rem 0.25rem 0.3775rem rgba(0, 0, 0, 0.3);}
	.main_quickScroll span {display: none;}	
}
@media (min-width:1341px) {
	.main_sideQuick_w .main_quickScroll_w .ico_close_w {display: none;}
}
@media (max-width:960px) {
	.sec_quickScroll.in_cover {padding-left:1.5rem ; padding-right:1.5rem ;}
}


.main_bann_list {display: flex; justify-content: space-between; gap:20px;}
.main_bann_list > li { width:100%; max-width:380px;  }
a.main_bann {display: block; position:relative;  color:#fff; background:#000; border-radius: 2.5rem; border-bottom-right-radius: 0; overflow: hidden; }
.main_bann .img {position:relative; width:100%; border-radius: 2.5rem; background: url(../images/main/main_bannImg01_01.jpg) no-repeat 50% 50%; background-size:cover;
	transition: var(--transition-custom2); } 
.main_bann .img:before {content:''; display: block; padding-top:87.4%;}
.main_bann .img:after {}
.main_bann .t {position:absolute; left:0; top:0; width:100%; height: 100%; padding:36px 28px;  font-size:26px; font-weight: 500; letter-spacing: -2px; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); word-break: keep-all; box-sizing: border-box;}
.main_bann .t span {display: inline; padding-bottom: 0.9375rem; background-image: linear-gradient(#000, rgba(0,0,0,0.9)); background-position: 0 50%; background-repeat: no-repeat; background-size: 0 1.5rem; transition: all .5s ease;}
.main_bann.bann02 .img {background-image: url(../images/main/main_bannImg01_02.jpg);}
.main_bann.bann03 .img {background-image: url(../images/main/main_bannImg01_03.jpg);}
.main_bann:after {content:''; display: block; position:absolute; right:-1px; bottom:-1px; width:115px; height: 121px; background: url(../images/main/main_bannCover.png) no-repeat 100% 100%; background-size:contain;}
.main_bann .ico {display: inline-block; z-index:1; position:absolute; right:1.875rem; bottom:1.875rem; transform: translate(50%, 50%); width:3.75rem; height: 3.75rem; background: #000 url(../images/main/main_arw01_w.png) no-repeat 50% 50%; background-size:1.5rem auto; border-radius: 50%;  
	transition: var(--transition-custom);}
.main_bann:hover {color:#fff;}
.main_bann:hover .img { scale:1.1; opacity: 0.9; fill: blur(1px);}
.main_bann:hover .t span {background-size: 100% 1.5rem;}
.main_bann:hover .ico {background-color:#0ab14e; }
@media (max-width:1160px) {
	.main_bann .t {padding:2.25rem 1.75rem; font-size:1.5rem;}
	.main_bann .ico,
	.main_bann:after,
	.main_bann2_box .ico,
	.main_bann2_box:after {zoom:0.9;}
}
@media (max-width:960px) {
	.main_bann_list { flex-wrap: wrap; gap:40px; margin:0 auto; max-width:800px;}
	.main_bann_list > li { width:calc(50% - 20px);}
	.main_bann .t { font-size: 1.25rem; }
	.main_bann .t span { background-size: 0 1.25rem;}
	.main_bann:hover .t span {background-size: 100% 1.25rem;}
}
@media (max-width:768px) {
	.main_bann_list {gap:1.5rem;}
	.main_bann_list > li { width:calc(50% - 0.75rem);}
	.main_bann .img {border-radius: 2rem;}
	.main_bann .t { padding: 2rem 5vw; }
	.main_bann .ico,
	.main_bann:after,
	.main_bann2_box .ico,
	.main_bann2_box:after {zoom:0.8;}
	.main_bann:after,
	.main_bann2_box:after {width:7.125rem; height:7.5rem ;}
}
@media (max-width:640px) {
	.main_bann .t br {display: none;}
}
@media (max-width:460px) {
	.main_bann .ico,
	.main_bann:after,
	.main_bann2_box .ico,
	.main_bann2_box:after {zoom:0.65;}
}

.main_card_list {display: flex; gap:1.5%; margin:0 auto; max-width:950px; height: 450px;}
.main_card_list > li {display: flex; flex-direction: column; gap:18px; transition: var(--transition-custom); width:30%;}
.main_card_list > li:first-child {    align-items: flex-end;}

.main_card {position:relative; width:100%; text-align: center; background:#f6f6f6; border-radius:24px; box-sizing: border-box; 
  transition: var(--transition-custom);}
.main_card:before {content:''; display: block; position:relative; padding-top:74.5%;}
.main_card .w { display: flex; flex-direction: column; justify-content: center; align-items: center; position:absolute; left:50%; top:50%; transform: translate(-50%,-50%) scale(0.8); padding:1.25rem; width:100%; opacity: 0.7;  box-sizing: border-box;
	transition: var(--transition-custom);}
.main_card .icon {display: block; width: 6.25rem; height: 6.25rem; background: url(../images/main/main_bannIcon02_01.png) no-repeat 50% 50%; background-size:contain; }
.main_card .icon.icon0101 {background-image: url(../images/main/main_bannIcon02_01.png);}
.main_card .icon.icon0102 {background-image: url(../images/main/main_bannIcon02_02.png);}
.main_card .icon.icon0103 {background-image: url(../images/main/main_bannIcon02_03.png);}
.main_card .icon.icon0104 {background-image: url(../images/main/main_bannIcon02_04.png);}
.main_card .icon.icon0105 {background-image: url(../images/main/main_bannIcon02_05.png);}
.main_card h4 {margin:0.25rem auto 0.3125rem; font-size:1.875rem; font-weight: 500;}
.main_card_txt_w {flex:1; display: flex; justify-content: flex-end; align-items: flex-start; gap:1rem;/* align-items: flex-end; justify-content: flex-end; */ position:relative; transition: var(--transition-custom); }
/*
.main_card_txt { display: flex; align-items: center; position:absolute; left:auto; right:auto; top:auto; bottom:auto; right:0;  padding:1.5rem; min-height: 150px; width:212px; font-size:0.875rem; color:#666; line-height: 1.6; background:#f6f6f6; border-radius:24px; box-sizing: border-box;
	transition:var(--transition-custom-2);}
*/
.main_card_txt { display: flex; align-items: center; position:relative; padding:1.5rem; min-height: 150px; width:212px; font-size:0.875rem; color:#666; line-height: 1.6; background:#f6f6f6; border-radius:24px; box-sizing: border-box;
	transition:var(--transition-custom-2);}
.main_card_txt_w .btn_ico {width:2.625rem; height: 2.625rem; background: #fff url(../images/main/btn_ico_st01.png) no-repeat 50% 50%; background-size:1.25rem auto; border:1px solid #c4c4c4; border-radius: 50%; box-sizing: border-box;}
.main_card.card02,
.main_card.card04 {width:212px; }
.main_card.card02 .w,
.main_card.card04 .w {transform: translate(-50%,-50%) scale(0.7); opacity: 0.5;}

.main_card_list.card02 .main_card.card01,
.main_card_list.card04 .main_card.card05,
.main_card_list.card04 .main_card.card01,
.main_card_list.card05 .main_card.card01 {width:212px; }
.main_card_list.card02 .main_card.card02,
.main_card_list.card04 .main_card.card04,
.main_card_list.card04 .main_card.card02,
.main_card_list.card05 .main_card.card02  {width:100%;}
.main_card_list.card02 .main_card.card01 .w,
.main_card_list.card04 .main_card.card05 .w,
.main_card_list.card04 .main_card.card01 .w,
.main_card_list.card05 .main_card.card01 .w {transform: translate(-50%,-50%) scale(0.65); opacity: 0.5;}
.main_card_list.card04 .main_card.card02 .w,
.main_card_list.card05 .main_card.card02 .w {transform: translate(-50%,-50%) scale(0.8); opacity: 0.7;}
.main_card_list.card02 .main_card.card02 .w
.main_card_list.card04 .main_card.card04 .w {transform: translate(-50%,-50%) scale(1); opacity: 1;}

/*
.main_card_list.card01 .main_card_txt {left:0; }
.main_card_list.card02 .main_card_txt {left:0; bottom:0;}
.main_card_list.card03 .main_card_txt {right:0; }
.main_card_list.card04 .main_card_txt {right:0; }
.main_card_list.card05 .main_card_txt {right:0; bottom:0; }
*/

.main_card.ac {/*width:340px; height: 247px;*/ }
.main_card.ac .w {opacity: 1; transform: translate(-50%,-50%) scale(1)}
.main_card_list .card01,
.main_card_list .card03 {margin-top:26px;}
.main_card_list.card05 .main_card.card04,
.main_card_list.card02 .card01  { margin-top:16px;}
.main_card_list.card01 .card01{margin-top:10px;}
.main_card_list.card05 .main_card.card01 {margin-top:0;}
.main_card_list.card01 > li.li01,
.main_card_list.card02 > li.li01,
.main_card_list.card03 > li.li02,
.main_card_list.card04 > li.li03,
.main_card_list.card05 > li.li03 {flex:none; width:37%;}

@media (max-width:1160px) {
	.main_card_txt_w .btn_ico {z-index:1; position:absolute; right:0.5rem; bottom:0.5rem; }
	.main_card_list {width:100%; max-width:640px; gap:1.25rem; height: auto;}	
	.main_card_list > li {gap:1.25rem; width:calc(33.33% - 0.84rem)!important;}
	.main_card {margin:0!important;  width:100%!important;  }
	.main_card:before {padding-top:90%; }
	.main_card .w { transform: translate(-50%, -50%) scale(1)!important; padding:1rem; }
	.main_card .w p {display: inline-flex; align-items: center; min-height: 2.25rem;}
	.main_card:not(.ac) .w {opacity: 0.5!important;}
	.main_card .icon { width: 3.5rem;  height: 3.5rem; }
	.main_card h4 {font-size:1.25rem;}
	.main_card .w p { min-height: 1.875rem; font-size: 0.75rem; }
	.main_card_txt {position:relative; width:100%; height: 100%; min-height: auto;}

	.main_card.ac {z-index:1; position:relative; scale: 1.1; box-shadow: 0 2px 20px rgba(0,0,0,0.3);}	
}
@media (max-width:680px) {
	.main_card_list { flex-direction: column; max-width: 460px; }
	.main_card_list > li { flex-direction: row; width: 100%!important;}
	.main_card_txt_w {flex:auto; width:100%;}
	.main_card:before {padding-top:80%;}
}
@media (max-width:640px) {
	.main_card_txt_w .btn_ico {background-size: 1rem auto;}
}
@media (max-width:460px) {
	.main_card_list,
	.main_card_list > li {gap:4vw;}
	.main_card .w {padding:1.25rem;}
	.main_card .w p {margin-bottom:-0.25rem; letter-spacing: 0;}	
	.main_card.ac {scale: 1.1; }	
}
@media (max-width:390px) {

}


.main .sec_03 {position:relative; padding-bottom:3.375rem;}
.main .sec_03:before {content:''; display: block; position:absolute; left:0; top:445px; right:0; bottom:0; background:#0ab14e;}

.main_bann2_box {display: flex; flex-direction: column; justify-content: center; align-items: center; position:relative; height: 410px; text-align: center; color:#fff; background: url(../images/main/main_bannImg03_01.jpg) no-repeat 50% 50%; background-size:cover; border-radius: 3rem; box-sizing: border-box; }
.main_bann2_box > .w {width:100%; }
.main_bann2_box .tit .t {margin-bottom:1rem; font-size:1.625rem; font-weight: 500;}
.main_bann2_box .tit .x {font-size:17px; font-weight: 300; line-height: 1.5;}
.main_bann2_list {display: flex; margin:70px auto -10px; width:100%; max-width:1000px; border-left:1px solid rgba(255,255,255,0.3);}
.main_bann2_list > li {flex:1; padding:0 1rem; height: 96px; border-right:1px solid rgba(255,255,255,0.3); box-sizing: border-box;}
.main_bann2 { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main_bann2 i {display: inline-block; width:3.75rem; height: 3.75rem; background: url(../images/main/main_bannIcon03_01.png) no-repeat 50% 50%; background-size:contain;}
.main_bann2 i.icon0201 {background-image: url(../images/main/main_bannIcon03_01.png); }
.main_bann2 i.icon0202 {background-image: url(../images/main/main_bannIcon03_02.png); }
.main_bann2 i.icon0203 {background-image: url(../images/main/main_bannIcon03_03.png); }
.main_bann2 i.icon0204 {background-image: url(../images/main/main_bannIcon03_04.png); }
.main_bann2 i.icon0205 {background-image: url(../images/main/main_bannIcon03_05.png); }
.main_bann2 i.icon0206 {background-image: url(../images/main/main_bannIcon03_06.png); }
.main_bann2 .t {margin-top:0.625rem; font-size:1.125rem; }

/*
.main_bann2_box:after {content:''; display: block; position:absolute; right:-1px; bottom:-1px; width:115px; height: 121px; background: url(../images/main/main_bannCover2.png) no-repeat 100% 100%; background-size:contain;}
.main_bann2_box .ico {display: inline-block; z-index:1; position:absolute; right:30px; bottom:30px; transform: translate(50%, 50%); width:60px; height: 60px; background: #000 url(../images/main/main_arw01_w.png) no-repeat 50% 50%; background-size:1.5rem auto; border:17px solid #0ab14e; border-radius: 50%;  }
*/
.main_customer {display: flex; gap:1.875rem; margin-top:3.375rem; color:#fff;}
.main_customer > li {flex:1;  display: flex; flex-direction: column; gap:15px;}
.main_cust {display: flex; gap:16px;}
.main_cust .icon {display: inline-block; width:67px; height: 65px; background: #fff url(../images/main/main_customIcon01_01.png) no-repeat 50% 50%; background-size:42px auto; border-radius: 1rem;}
.main_cust .icon.icon0301 {background-image: url(../images/main/main_customIcon01_01.png); }
.main_cust .icon.icon0302 {background-image: url(../images/main/main_customIcon01_02.png); }
.main_cust .icon.icon0303 {background-image: url(../images/main/main_customIcon01_03.png); }
.main_cust .t_w {flex:1;}
.main_cust .t_w h5 {margin-bottom:-3px; font-size:26px; line-height: 65px;; color:#fff; }
.main_cust .t_w .h_x { margin-bottom:16px; font-size:1.0625rem; line-height: 1.3; }
.main_cust .t_w .x {margin-top:10px; font-size:0.9375rem; font-weight: 300;}
.main_cust dl {display: flex; flex-wrap: wrap; gap:4px 6px; font-size:18px;}
.main_cust dl dt {position:relative; padding-left:12px;}
.main_cust dl dt:before {content: ''; display: block; position:absolute; left:0; top:9px; width:6px; height: 6px; background:#fff; border-radius: 50%;}
.main_cust dl dd {flex:1; min-width:calc(100% - 80px); font-family: var(--font-family-pre);}
.main_cust .x_ip_inline {gap:1px; max-width:440px; font-size:18px;}
.main_cust .x_ip_inline input[type="text"] {height: 50px; border:none;}
.main_cust .x_ip_inline input[type="text"]::placeholder {font-size:1rem; color:#999;}
.main_cust .x_ip_inline .ip_name {flex:1; width:9.375rem; margin-right:6px; }
.main_cust .x_ip_inline .ip_num {width:23%;}
.main_cust .x_ip_inline .btn {width:7.75rem; height: 3.125rem; background:#000; border:none;}
.main_cust .x_ip_inline .btn span { color:#fff;}
.main_cust .ip_secret {margin-top:0.625rem; gap:0;}
.main_cust .ip_secret #captchaImg {height: 3.125rem; width:9.375rem;}
.main_cust .ip_secret .btn { height: 3.125rem;}
.main_cust .ip_secret .btn_reset { padding:0; height: 3.125rem; width:3.125rem; } 
.main_cust .ip_secret input[type="text"] {flex:1; height: 3.125rem; width:40%;}
.main_cust .ip_secret .btn_sebmit {margin-left:6px;}


@media (max-width:1160px) {

	.main_bann2_list > li {height: auto;}
	.main_bann2_box .tit .x {font-size:1rem;}

	.main_customer > li:nth-child(2) {flex:none; width:50%;}

	.main_cust .icon {width:3.75rem; height: 3.75rem; background-size: 2.25rem auto;}
	.main_cust .t_w h5 {height: 3.75rem; font-size:1.5rem; line-height: 3.75rem;}
	.main_cust .t_w .h_x {font-size: 1rem;}
}
@media (max-width:1024px) {
	.main_customer > li:nth-child(2) {flex:none; width:54%;}
	.main_cust dl {font-size:1.0625rem;}
}
@media (max-width:960px) {
	.main_bann2_list {border-left:none;}
	.main_bann2_list > li:last-child {border-right-color:transparent;}
	.main_bann2 i {width:3.25rem; height: 3.25rem;}

	.main_customer { flex-direction: column; margin:3.5rem auto 0; max-width:520px;}
	.main_customer > li {gap:1.875rem;}
	.main_customer > li:nth-child(2) {width:100%;}	
}
@media (max-width:768px) {
	.main_bann2_box {padding:3rem 5vw; height: auto;}
	.main_bann2_list {flex-wrap: wrap; row-gap:3rem; margin-bottom:0;}
	.main_bann2_list > li { position:relative; min-width:40%;}
	.main_bann2_list > li:before {content:''; display: block; position:absolute; left:2rem; top:-1.5rem; right:2rem; height: 1px; background:rgba(255, 255, 255, 0.3);}
	.main_bann2_list > li:nth-child(2) {border-right-color:transparent;}
	.main_bann2_list > li:nth-child(1):before,
	.main_bann2_list > li:nth-child(2):before {display: none;}
}
@media (max-width:540px) {
	.main .sec_03 {padding-bottom:2.5rem;}

	.main_bann2 i {width:3rem; height: 3rem;}
	
	.main_cust .icon { width: 3.25rem; height: 3.25rem; background-size: 2rem auto; }
	.main_cust .t_w h5 {height: 3.25rem;font-size: 1.25rem; line-height: 3.25rem;}
	.main_cust .x_ip_inline .btn_sebmit {width: 6.5rem;}
	.main_customer {gap: 1.5rem; margin: 2.5rem auto 0; }
	.main_customer > li {gap: 1.5rem;}
	
}
@media (max-width:460px) {
	.main_cust .x_ip_inline { margin-left: -4rem; margin-right: 0.5rem; }
	.main_cust .t_w .x {margin-left: -4rem;}
}


.sec_04 {background:#00943d;}
.main_quickCustom_list {display: flex; gap:10px;}
.main_quickCustom_list > li {flex:1;}
.main_quickCustom_list .main_quickCustom {display: flex; align-items: center; gap:0.625rem; height: 5.625rem; font-size:1.0625rem; color:#fff;}
.main_quickCustom .icon {width:3rem; height: 3rem; background: url(../images/main/main_customIcon02_01.png) no-repeat 50% 50%; background-size:contain;}
.main_quickCustom .icon.icon0401 { background-image: url(../images/main/main_customIcon02_01.png);}
.main_quickCustom .icon.icon0402 { background-image: url(../images/main/main_customIcon02_02.png);}
.main_quickCustom .icon.icon0403 { background-image: url(../images/main/main_customIcon02_03.png);}
.main_quickCustom .icon.icon0404 { background-image: url(../images/main/main_customIcon02_04.png);}
.main_quickCustom .icon.icon0405 { background-image: url(../images/main/main_customIcon02_05.png);}
.main_quickCustom .t {flex:1;}
.main_quickCustom .ico_arw {width:1.5rem; height: 1.5rem; background: url(../images/main/main_arw01_w.png) no-repeat 50% 50%; background-size:contain; opacity: 0.3;}
.main_quickCustom:hover .ico_arw {opacity: 1;}
@media (max-width:960px) {
	.main_quickCustom_list { flex-wrap: wrap; gap:0 5%; margin:0 -4.5vw; padding: 1rem 4.5vw; border-top:1px solid rgba(255,255,255,0.2);}
	.main_quickCustom_list > li {flex:none; width:30%;}
	.main_quickCustom_list .main_quickCustom { height: 3.5rem;}
	.main_quickCustom .icon { width: 2.25rem; height: 2.25rem; }
}
@media (max-width:640px) {
	.main_quickCustom_list {  margin:0 -4vw; padding: 0.75rem 4vw; }
	.main_quickCustom .icon { width: 2rem; height: 2rem; }
	.main_quickCustom .ico_arw { width: 1.25rem; height: 1.25rem;}
}
@media (max-width:560px) {
	.main_quickCustom_list {  gap:0 10%; padding: 0.75rem 6vw;}
	.main_quickCustom_list > li {	width: 45%;}
}





















































