/*========= header ===========*/
.top_ban {display: block; overflow:hidden; background-color: #f4f4f4;}
.top_ban > article  {display:flex; align-items: center; justify-content: flex-start;  width:fit-content; white-space: nowrap; animation:txt 50s infinite linear }
.top_ban > article div  {display:flex; align-items: center; justify-content: flex-start; height:50px;  font-size: 15px; font-weight: 500;}
.top_ban > article img  {display:block; width:auto; height:20px; margin:0 15px;}

@keyframes txt {
	0% {transform:translateX(0);}
	100% {transform:translateX(-50%);}

}

/*========= header ===========*/
#header { background-color: #fff;}
#header h1 a {font-weight: 700; color: #000;}
#header h1 a img {width:auto; height:54px;}

.sup {position: relative;}

#nav {justify-content: center;}
#nav > div {position: relative; }
#nav .dep1 {position: relative; display:flex; align-items: center; justify-content: center; width:auto; height:100px; padding:0 25px; font-size: 18px; font-weight: 600; color: #000; transition:0.5s}
#nav .dep1::before {position: absolute; left:50%; bottom:0; transform:translateX(-50%); display: block; width:0; height:3px; background-color: var(--main-color); content:""; transition:0.5s}
#nav > div:hover .dep1 {width: 250px; padding:0; }
#nav > div:hover .dep1::before {width:100%;}
#nav .dep2 {position: absolute; left:0; top:100px; width:100%; border:1px solid var(--main-color); z-index: 20; background-color:#fff; padding:25px 0; display: none;}
#nav > div:hover .dep2 {display: block; }
#nav .dep2 li a {display: block; text-align: center; padding:10px 0; font-size: 15px;}
#nav .dep2 li a:hover {color: #000;}
#nav .dep2 li a .sup {font-size: 12px; top:-5px;}



#sitemap {overflow-y:auto; display:none; position: fixed; left:0; top:0; width:100%; height:100%; padding:60px 0; background-image:linear-gradient(135deg,var(--main-color),var(--sub-color)); opacity:0.95; z-index: 100;}
.on #sitemap {display: block;}
#sitemap a {color: #fff;}
#sitemap .center > div { padding:50px 0 ;border-bottom:1px solid rgba(255,255,255,0.3)}
#sitemap .center > div:last-child { border-bottom:0;}
#sitemap .dep1 {display: block; line-height:1.2; font-size: 26px; font-weight: 700;}
#sitemap .dep1 span {font-size: 18px; font-weight: 200; margin-left:5px;}
#sitemap .dep2 {display:flex; align-items:flex-start; margin-top:30px; }
#sitemap .dep2 li {font-size: 18px; font-weight: 300;}
#sitemap .dep2 li::after {content:""; width:1px; height:15px; background-color: rgba(255,255,255,0.5); display: inline-block; margin:0 20px;}
#sitemap .dep2 li:last-child::after {display: none;}
#sitemap .dep2 li a .sup {font-size: 12px; top:-5px;}


/* visual */
.visual {position: relative; overflow:hidden; border-radius:50px 50px 30px 0;}
.visual .swiper-slide img {display: block; }
.visual .menu {width:762px; height:153px; display:flex; align-items: flex-end; justify-content: flex-start; position: absolute; left:0; bottom:0; background-image:url(/images/bg_visu_icon.png); background-position:left bottom; z-index: 10;}
.visual .menu > a {display:block; text-align: center; width:82px; margin-right:40px; text-align: center; line-height:1.3; color: #000;}
.visual .menu > a figure {margin-bottom: 10px;}







.main_title {margin-bottom:30px;}
.main_title h2 {font-size: 30px; line-height:44px; font-weight:700; color: #000;}
.main_title p {margin-top: 10px; color: #666;}

.video {position: relative; width:100%; border-radius:10px; overflow:hidden; background-color:#ddd;}
.video img {display: block; width:100%; height:auto;}
.video iframe {position: absolute; left:0; top:0; width:100%; height:100%;}

.caution_li {margin-top:15px; }
.caution_li li {position: relative; padding-left:10px; margin-bottom:5px; font-size: 12px; color: #888;}
.caution_li li::after {content:"-"; position: absolute; left:0; top:0; }

.set_btn {margin-top: 40px; }
.btn_comm { display:flex; width: 190px; height: 46px; border-radius:4px; border:1px solid #aaa; margin:0 auto; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; background-color: #fff;}




/*========= footer ===========*/

#footer {background-color: var(--bg-footer);}
#footer .ft_top {padding:60px 0; border-bottom:1px solid rgba(255,255,255,0.3)}
#footer .ft_top .center{align-items: stretch}
#footer .ft_top .center > div {width: 20%;}
#footer .ft_top .dep1 {display: block; margin-bottom:10px; line-height:1.2; font-weight: 600; color: #000;}
#footer .ft_top .dep1 span {display: block; font-size: 13px;}
#footer .ft_top .dep2 li {font-size: 14px; line-height:26px;}

#footer .ft_mid {border-bottom:1px solid rgba(255,255,255,0.3)}
#footer .ft_mid .center {position: relative; padding:60px 0;}
#footer .ft_mid h2  {margin-bottom: 20px; font-size: 24px; font-weight: 700; color: #000;}
#footer .ft_mid .caution  {font-size: 15px; line-height:1.7; font-weight: 700; color: #666;}
#footer .ft_mid .caution_li li  {font-size: 14px; line-height:1.2; }
#footer .ft_mid h3 {margin-top: 30px; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #000;}
#footer .ft_mid .btn_comm {display:inline-flex; width:auto; padding:0 30px; margin:0;}
#footer .ft_mid .btn_comm img {width:auto; height:22px;}
#footer .ft_mid .sns {position: absolute; right:0; top:60px; display:flex; align-items: center; justify-content:flex-end;}
#footer .ft_mid .sns a {margin-left:20px;}
#footer .ft_mid .sns img {height:24px; filter: hue-rotate(0) }
#footer .ft_mid .sns a:nth-child(3) img {height:30px; }

#footer .ft_btm {padding:20px 0;}
#footer .copyright {font-size: 13px; font-weight: 400; color: #555; }


/*renew-------------------------------------------------------------------------------*/
.down_icon{position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: up-down 2s ease-in-out infinite; z-index: 20; }

@keyframes up-down {

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

}



#wrapper.renew{background: transparent; }


.renew h2{font-size: 55px; }
.renew h3{font-size: 40px; font-weight: bold; line-height: 1.3;}
.renew .orange{color: var(--main-color) !important;}

.renew_main > section{height: 100vh; }
.renew .btn_more {display: flex; justify-content: flex-start; align-items: center; gap: 16px; font-size: 20px; font-weight: 600; color: #fff; transition: all .5s linear; }
.renew .btn_more span{display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background:  #fff; color: #fff; position: relative; border-radius: 500px; transition: all .5s linear;}
.renew .btn_more span::after{content: '→'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); color: #000; font-weight: bold; font-size: 16px;  }

.renew .btn_more:hover{ color: #03cc5c !important; }
.renew .btn_more:hover span{background: #03cc5c; color: #03cc5c !important;}
.renew .btn_more:hover span:after{color: #fff;;}

.renew .nav_wrap .btn_dep{display: none;}


.renew #header{padding: 0 40px; position: fixed; top: 0; left: 0; background: transparent; width: 100%; min-width: 100%; z-index: 90; }
.renew #header h1 a img{filter: brightness(0) invert(1);}
.renew #header #nav .dep1{color: #fff; }
.renew .btn_hbg div,
.renew .btn_hbg:before,
.renew .btn_hbg:after{background-color: #fff; }

.on.renew #header{z-index: 200; }
.on.renew #header h1,
.on.renew #header #nav{opacity: 0; }
.on.renew .btn_nav{z-index: 300; }
.on .btn_hbg div{background-color: transparent !important;}

.renew #header.bg{background: rgba(0, 0, 0, 0.6); }
.renew.on #header.bg{background: transparent; transition: all 0s linear }

.renew .main1{position: relative; width: 100%; height: 240vh;}
.renew .main1 .track_fixed{overflow: hidden; position: sticky; top: 0; left: 0; width: 100%; height: 100vh; }
.renew .main1 .img_bg{position: relative; height: 100%; overflow: hidden; }
.renew .main1 .img_bg img{position: absolute; top: 0; left: 50%; height: 100%; min-height: 100vh; object-fit: cover; object-position: center top; transform: translateX(-50%); z-index: 1; width: 100%; }
.renew .main1 .title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; z-index: 2; }
.renew .main1 .title *{color: #fff; font-weight: bold; }

.renew .main1 .title h2 span{display: inline-flex; line-height: 1.2; opacity: 0; transition: all .8s cubic-bezier(0.37, 0, 0.63, 1);}
.renew .main1 .title h4{font-size: 25px; }

.renew .main1 .title.first_text h2 span:nth-child(1){transform: translateX(-100px); }
.renew .main1 .title.first_text h2 span:nth-child(3){transform: translateX(-200px); transition-delay: .8s;}


.renew .main1 .first_text.hide h2{opacity: 0; transform: translateY(-170%); }
.renew .main1 .title.show h2 span{opacity: 1; transform: translateX(0);}
.renew .main1 .title.show h2 span:nth-child(1),
.renew .main1 .title.show h2 span:nth-child(3){transform: translateX(0);}

.renew .main1 .title.sec_text h3{opacity: 0; transform: translateY(40px); line-height: 1.3; }
.renew .main1 .title.sec_text h4{opacity: 0; transform: translateY(340px);}

.renew .main1 .title.sec_text.show h3{opacity: 1; transform: translateY(0);}
.renew .main1 .title.sec_text.show.last h4{opacity: 1; transform: translateY(300px);}

/*parallax*/
.parallax__wrap{overflow: hidden; }
.parallax__nav{position: absolute; z-index: 90; top: 0; width: 100%; }
.parallax__progress progress {position: absolute; left: 0; top: 0; height: 5px; width: 100%; border: none; background: transparent;}
progress::-webkit-progress-bar {background: transparent;}
progress::-webkit-progress-value { background: #fff;}
/* progress::-webkit-progress-value { background: #000;} */


.parallax__nav .nav_list{position: absolute; left: 40px; top: 186px; }
.parallax__nav .nav_list li a{padding: 10px 0; display: block; transition: all 0s linear; }
.parallax__nav .nav_list li a *{color: #fff; font-weight: 600; }
.parallax__nav .nav_list li a h2{font-size: 14px; opacity: .2; transition: all 0s linear; }
.parallax__nav .nav_list li a h6{display: none; transition: all 0s linear; }
.parallax__nav .nav_list li a.active h2{font-size: 40px; font-weight: 800; opacity: 1; line-height: 1.3; }
.parallax__nav .nav_list li a.active h2 span{font-size: 20px; }
.parallax__nav .nav_list li a.active h6{display: block; font-size: 15px; font-weight: bold; }

.parallax__nav .down_icon{left: 40px; transform: translateX(0); top: 800px;  }
.parallax__item {height: 100vh;}
.default{height: 100vh; }


.anchor_section{position: relative; /*background: var(--main-color)*/}
.anchor_section.active .parallax__nav{position: fixed; }

.renew .main2 .section{position: relative; }
.renew .main2 .center{height: inherit; display: flex; justify-content: space-between; align-items: center; }
.renew .main2  .center .tit{width: 50%; }
.renew .main2  .center .tit *{color: #fff;  }
.renew .main2  .center .tit .p_tit{font-size: 20px; line-height: 1.5; margin-bottom: 40px; }
.renew .main2  .center .tit h6{margin: 20px 0 10px; font-weight: bold; font-size: 16px; }
.renew .main2  .center .tit p,
.renew .main2  .center .tit .ol_list li{line-height: 1.5; }

.renew .main2 .chart{margin: 40px 0; width: 280px; }
.renew .main2 .chart .flex{display: flex; justify-content: flex-start; align-items: center; gap: 12px; }
.renew .main2 .graph{display: block; width: 500px; height: 32px; background: #fff; border-radius: 0 50px 50px 0;}

.renew .main2 .inner_box{position: relative; margin: 40px 0; padding: 40px 0;}
.renew .main2 .inner_box::after{content: ''; position: absolute; left: 0;  top: 0; width: 220px; height: 1px; background: rgba(255, 255, 255, 0.5 ); }
.renew .main2 .inner_box::before{content: ''; position: absolute; bottom: 0; left: 0; width: 220px; height: 1px; background: rgba(255, 255, 255, 0.5 ); }

.renew .main2 .thumb_box{position: fixed; left: 50%; top: 0%; transform: translateX(240px); width: 840px;  height: 100vh; z-index: 10; opacity: 0; transition: all 0s linear;  }
.renew .main2 .thumb_box .video_wrap{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; }
/* .renew .main2 .thumb_box .video_wrap{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0; padding-top: 100%; overflow: hidden; } */
.renew .main2 .thumb_box .video_wrap iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }

.renew .item1 .center .tit h6{writing-mode: vertical-lr;}
.renew .item1 .chart{margin: 0; }
.renew .item1 .chart li{display: flex; justify-content: flex-start; align-items: center; gap: 20px; }
.renew .item1 .chart li p span.box{display: inline-block; margin-bottom: 4px; padding: 0 4px; background: #000; color: #fff; }

.renew .item1 .chart li:nth-child(1) .graph{width: 220px; }
.renew .item1 .chart li:nth-child(2) .graph{width: 350px; }
.renew .item2 .chart li:nth-child(1) .graph,
.renew .item2 .chart li:nth-child(3) .graph{width: 250px; }
.renew .item2 .chart li:nth-child(2) .graph{background: rgba(255, 255, 255, 0.2); width: 50px; }
.renew .item2 .chart li:nth-child(3) .graph{background: var(--main-color);}

.renew .item3 .chart{position: relative; margin: 0; padding: 20px; border-radius: 15px; background: #fff; width: 428px;  }
.renew .item3 .chart::after{content: ''; width: 1px; height: 80%; position: absolute; top: 50%; left: 60%; transform: translateY(-50%); background: #eee; }
.renew .item3 .chart dl{display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.renew .item3 .chart dl dt{font-size: 15px; width: 80px; line-height: 1.5; }
.renew .item3 .chart dl .graph{margin: 20px 0; position: relative; background: #222; width:147px; }
.renew .item3 .chart dl .graph span{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 14px; font-weight: bold; }
.renew .item3 .chart dl .graph span em{font-style:normal;}

.renew .item3 .chart dl.before{justify-content: flex-end; padding-right: 39%;  }
.renew .item3 .chart dl.before dt{position: absolute; left: 20px; }
.renew .item3 .chart dl.before dt,
.renew .item3 .chart dl.before dt *{color: #787878 !important;}
.renew .item3 .chart dl.before .graph {border-radius: 50px 0 0 50px; background: #f5f5f5; }
.renew .item3 .chart dl.before .graph *{color: #777 !important; }
.renew .item3 .chart dl.before .graph span{color: #777; font-weight: 400; }

.renew .item3 .chart dl.after{gap: 158px; }
.renew .item3 .chart dl.after dt,
.renew .item3 .chart dl.after dt *{color: #000 !important;}
.renew .item3 .chart dl.after .graph{background: #03cc5c;}
.renew .item3 .chart dl.after .graph *{color: #000 !important}
.renew .item3 .chart dl.after .graph span{ color: #000 !important;  }

.renew .item3 .pcent{width: 428px;}
.renew .item3 .pcent li{margin-top: 10px; position: relative; display: grid; grid-template-columns: auto auto 4fr; align-items: center; gap: 10px; padding: 16px;  background: #02a34a; border-radius: 10px; opacity: 0; transition: all .8s linear; }
.renew .item3 .pcent li h5{font-size: 20px; font-weight: 300; }
.renew .item3 .pcent li h4{font-size: 26px; font-weight: 800; text-align: right; }
.renew .item3 .pcent li h4 span{font-size: 20px; }

/*main5---------------*/
.renew .main5{background: #000; position: relative; }
.renew .main5 .title{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.renew .main5 .title *{ color: #fff; }


/*main4~6*/
.renew .point{position: relative; }
.renew .point .center {position: relative; width: 100%; max-width: 100%; height: inherit;  padding: 0 160px; display: flex; justify-content: flex-start; align-items: center; gap: 70px; }
.renew .point hgroup.tit{text-align: left; }
.renew .point hgroup.tit em{color: var(--main-color) !important; font-style: normal;}
.renew .point hgroup.tit h3{position: relative; line-height: 1.2; }
.renew .point hgroup.tit h3::after{content: ''; position: absolute; bottom: -15px; left: 0; width: 461px; height: 16px; background: url(/images/renew/underline.png) 50% no-repeat; }
.renew .point hgroup.tit *{color: #fff; }
.renew .point hgroup.tit p{margin-top: 32px; font-size: 20px; line-height: 1.5; }
.renew .point .number{position: absolute; bottom: -10px; right: 50px; font-size: 80px; color: rgba(255, 255, 255, 0.1); font-weight: bold; }

.renew .point .graph_wrap {position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; gap: 20px; width: 100px; }
.renew .point .graph_wrap h4{font-size: 30px; font-weight: 800; color: #fff; line-height: 1.5; }
.renew .point .graph_wrap h4 .count{font-style: normal;}
.renew .point .graph_wrap h4 span{font-size: 20px; }
.renew .point .graph_wrap p{font-size: 15px; color: #767676; }
.renew .point .graph_wrap .graph{height: 100%; width: 80px; background: linear-gradient(0deg, var(--main-color), #fff); border-radius: 50px 50px 0 0;  }
.renew .point .right{padding-left: 160px; }


.renew .main6{margin: 0; background: url(/images/renew/main4_bg.jpg) 50% no-repeat; background-size: cover;}

.renew .main6 .graph_wrap .graph{height: 680px; }
.renew .main6 .latest {margin-top: 40px; display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.renew .main6 .wrap_payback {width: 390px; border-radius: 5px; overflow: hidden; }
.renew .main6 .wrap_payback h5{padding: 14px; background: #000; color: #fff; font-weight: bold; font-size: 16px; }
.renew .main6 .set_payback {padding: 20px; overflow:hidden; height: 159px; background: #fff; }
.renew .main6 .set_payback div {font-size: 16px; font-weight: 700;}
.renew .main6 .set_payback li{height: 35px; }
.renew .main6 .cont {display:flex; align-items: center; justify-content:flex-start; gap: 16px;  width:100%; font-size: 16px; font-weight: 600;}
.renew .main6 .cont div:last-child{width: 70%; text-align: right; font-weight: 400; }
.renew .main6 .rank {width: 24px; text-align: center; font-size: 16px; font-weight: 600;}
.renew .main6 .rank img{display: block; width: 100%; }


.renew .main7{margin: 0; background: url(/images/renew/main5_bg.jpg) 50% no-repeat; background-size: cover;}
.renew .main7 .graph_wrap .graph{height: 612px;}

.renew .main8{background: url(/images/renew/main6_bg.jpg) 50% no-repeat; background-size: cover;}
.renew .main8 .graph_wrap .graph{height: 560px;}


.renew .main9 {position: relative; background: #fff; overflow: hidden; }
.renew .main9 .bg{position: absolute; right: 0; top: 0; width: 50%; height: 100%; background: url(/images/renew/main7_bg.jpg) 50% no-repeat; background-size: cover;}
.renew .main9 .center{display: flex; justify-content: flex-start; align-items: center; height: inherit;}
.renew .main9 .tit h2{font-weight: 800; color: #000; line-height: 1.3; }
.renew .main9 .tit p{margin-top: 32px; font-size: 22px; line-height: 1.5; color: #000; font-weight: 300; }
.renew .main9 .tit p strong{font-weight: 800; }
.renew .main9 .tit p span.box{padding: 4px; display: inline-flex; position: relative; transition: all .5s linear; overflow: hidden; z-index: 5;}
.renew .main9 .tit p span.box:before{background: var(--main-color); content: ''; position: absolute; top: 0; right: 100%; transition: all .5s linear; z-index: -1; width: 100%; height: 100%; }

.renew .main9 .tit .btn_more{position: relative; margin-top: 40px; background: #eee; color: #000; font-weight: bold; padding: 20px; border-radius: 5px; font-size: 20px; width: max-content; font-weight: 600; overflow: hidden; z-index: 3; width: 900px}
.renew .main9 .tit .btn_more:before{content: ''; position: absolute; height: 100%; width: 100%; background-color: var(--main-color); top: 0; right: 100%;; transition: all 1.25s; z-index: -1;}
.renew .main9 .tit .btn_more span{position: initial; width: auto; height: auto; color: #222; background: transparent; font-weight: 600}
.renew .main9 .tit .btn_more span:after{display: none; }

.renew .main9.active .tit p span.box{color: #fff; }
.renew .main9.active .tit p span.box:before{transform: translateX(100%);}

.renew .main9 .tit .btn_more:hover {position: relative; background: transparent; color: #fff !important;; }
.renew .main9 .tit .btn_more:hover span{color: #fff !important; }
.renew .main9 .tit .btn_more:hover:before{transform: translateX(100%);}

.renew .main9 .thumb_box{position: absolute; left: 50%; top: 0%; width: 50vw; height: 100vh; z-index: 10; transition: all 0s linear;  }
.renew .main9 .thumb_box .video_wrap{position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 0; padding-top: 100%; overflow: hidden; }
.renew .main9 .thumb_box .video_wrap video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }


.renew #footer{background: #f5f5f5; }
.renew #footer .ft_top{border-bottom: 1px solid #ddd; }

.renew #footer .ft_logo{display: block; height: 44px; }
.renew #footer .ft_mid .center{padding: 40px 0;}
.renew #footer .ft_mid h3{color: #555; }
.renew #footer .ft_mid .caution{font-weight: 400; margin-top: 20px; }
.renew #footer .ft_mid .btn_comm{position: absolute; right: 0; top: 40px; padding: 0 20px; border: 1px solid var(--main-color); color: var(--main-color); border-radius: 500px; }


.renew #footer .ft_btm.center{padding: 0 0 40px; display: flex; justify-content: space-between; align-items: center; }
.renew #footer .ft_btm .sns{position: initial }
.renew #footer .ft_mid .sns a{background: #000; width: 30px; height: 30px; padding: 10px; border-radius: 500px; display: flex; justify-content: center; align-items: center; margin: 0; margin-right: 5px; }
.renew #footer .ft_mid .sns a img{display: block; height: 18px; filter: brightness(0) invert(1);}



/*그래프 움직임 애니메이션 */
.parallax__item.active .row-full {animation: row-full 2s;}
.parallax__item.active .col-full,
.renew .point.active .col-full{animation: col-full 2s;}
.parallax__item.active .graph.row-full.reverse {animation: reverse-row 2s; } /*오류/지연 단독*/


@keyframes row-full {

	0%{width: 0; }
	100%{opacity: 1; }

}

@keyframes col-full {

	0%{height: 0; }
	100%{opacity: 1; }

}

@keyframes reverse-row {

	0%{width: 250px;}
	100%{opacity: 1; width: 50px;}

}

#wrapper.renew.static .anchor_section.active .parallax__nav{position: absolute; }
#wrapper.renew.static .main2 .parallax__item.active .thumb_box{position: static; transform: translateX(-85px);}


/*active ---------*/
/*영상 제어*/
.renew .main2 .parallax__item .center{position: static; padding-left: 360px; width: 100%; min-width: 1920px; }
.renew .main2 .parallax__item.active .thumb_box{opacity: 1; z-index: 30; position: fixed; top: 50%; transform: translate(50px, -50%);}
/* .renew .main2 .parallax__item.active .thumb_box{opacity: 1; z-index: 30; position: fixed; top: 50%; transform: translate(240px, -50%);} */

/*item1 300% 성장 이벤트 제어*/
.item1 .chart .ani{opacity: 0; transition: all .5s linear 1.8s; }
.item1.active .chart .ani{opacity: 1; }

/*각 버튼들 색상 제어*/
.item2.active .btn_more:hover {color: var(--main-color) !important;}
.item2.active .btn_more:hover span{background: var(--main-color); color: var(--main-color) !important;}

.item3.active .btn_more:hover {color: #0046ff !important;;}
.item3.active .btn_more:hover span{background: #0046ff; color: #0046ff !important;}

/*손익비 비율 나타나는 효과*/
.renew .item3.active .pcent li{opacity: 1; }
.renew .item3.active .pcent li:nth-child(1){transition-delay: .6s; }
.renew .item3.active .pcent li:nth-child(2){transition-delay: 1.2s; }

.renew .main5 h3{opacity: 0; transform: translateY(40px);}
.renew .main5.active h3{opacity: 1; transform: translateY(0px);}


.renew .point{opacity: 0; transform: translateY(40px); transition: all .8s linear; }
.renew .point.active{opacity: 1; transform: translateY(0)}
.renew .point.active hgroup.tit h3:after{animation: row-full 2s;}





/* sub_visual ---------------------*/
.sub_visual {border-top:1px solid #ddd; background-color: #f8f8f8;}
.sub_visual .center {position: relative; padding:80px 0;}
.sub_visual h3 {font-size: 30px; font-weight: 700;color: #000;}
.sub_visual .location {position: absolute; right:0; top:20px; display:flex; justify-content: flex-end; }
.sub_visual .location li {font-size: 14px; color: #888;}
.sub_visual .location li::after {content:"-"; margin:0 2px;}
.sub_visual .location li:last-child::after {display: none;}

.sub_menu {display:flex; align-items: center; justify-content: flex-start; margin-top:30px;}
.sub_menu a {display:inline-flex; margin-right:4px; border-radius:4px; border:1px solid #ddd; background-color: #fff; padding:15px 20px; color: #555; }
.sub_menu a.on {border:1px solid var(--main-color); background-color:var(--main-color); color: #fff; }
.sub_menu .sup { top:-3px; font-size: 12px;}


#contents.sub {padding-bottom:150px;}

.cont_dep3 {display:flex; align-items: stretch; justify-content: space-between;padding-top:60px;}
.cont_dep3 .dep3 {width:200px; }
.cont_dep3 .detail {width:calc(100% - 200px); padding-left:80px; }
.cont_dep3 .detail_title {font-size: 30px; font-weight: 700; color: #000;}

.dep3 a {display: flex; align-items: center; justify-content: space-between; margin:20px 0 ; font-size: 18px; font-weight: 600; color: #000;}
.dep3 .on {color: var(--main-color);}
.dep3 .on:after {content:"●"; font-size: 12px; color: var(--main-color);}

.p_comm {font-size: 17px; line-height:1.7; margin-top:20px; }
.sub_title + .p_comm {margin-top: 0;}

.intro {text-align: center; padding-bottom:100px; background-color:#f8f8f8; background-position:bottom center;}
.intro h4 {font-size: 34px; font-weight: 700; color: #000;}
.intro h4 span {color: var(--main-color);}
.sub .partner {margin-bottom: 25px; font-size: 20px; line-height:1.5; margin-top:15px}
.intro h5 {position: relative; padding-top:60px; font-size: 20px; font-weight: 600; color: #000;}
.intro h5::after {content:""; position: absolute; left:50%; top:0; width:1px; height:26px; background-color: var(--main-color);}

.sub_title {margin-top:80px; margin-bottom: 30px; font-size: 24px; font-weight: 700; color: #000;}
.sub_title {margin-top:80px; margin-bottom: 30px; font-size: 24px; font-weight: 700; color: #000;}


.li_col {display:grid; grid-template-columns:repeat(3,1fr); grid-gap:20px;}
    .li_col5 {grid-template-columns:repeat(5,1fr); }
.li_col > div {padding:40px 0 50px 0; border-radius:10px; border:1px solid #ddd; background-color:#fff; text-align: center; font-size: 18px; line-height:30px; font-weight:400;}
.li_col > div img {display: block; margin:0 auto; margin-bottom:20px;}



.tbl {background-color: #fff;}
.tbl th,
.tbl td {padding:15px; border:1px solid #ddd; font-size: 15px;}
.tbl th {font-weight:600}
.tbl thead th,
.tbl thead td {background-color: var(--main-color); color: #fff;}
.tbl tbody th {background-color: #f8f8f8;}
.tbl a {text-decoration: underline; color: blue;}
.tbl a:visited {color:brown;}


/* sub0101 */
.sub0101 .intro {background-image:url(/images/sub0101_1.gif)}
.sub0101 .from {text-align: right; font-weight:700; margin-top: 0;}


.history  {position: relative;}
.history::before  {content:""; position: absolute; left:139px;  top:10px; width:1px; height:98%; background-color: #000;}
.history dl {display:flex; margin-bottom:40px;}
.history dl:nth-child(2n-1) dt {color: var(--main-color);}
.history dl:nth-child(2n-1) dd::after {background-color:var(--main-color)}
.history dl dt { width:80px;  text-align: center; font-size: 30px; font-weight: 300;}
.history dl dt > div {transform:rotate(90deg);color: var(--main-color);}
.history dl dd {position: relative; width:calc(100% - 120px); padding-left:110px; line-height:1.7; font-size: 17px; font-weight: 700; color: #000;}
.history dl dd::after {content:""; position: absolute; width:9px; height:9px; border-radius:100%; background-color: #000; left:55px; top:10px;}
.history dl li {line-height:1.7; font-size: 17px; font-weight: 700; color: #000; }



/* sub0102 */
.sub0102 .intro {background-image:url(/images/sub0101_1.gif)}
.li_col {margin-top:30px; }
.li_col > div {padding:20px; padding-bottom:40px; text-align: left; }
.li_col > div img {margin:0; margin-bottom:20px;}
.li_col h6 {font-size: 20px; font-weight: 700; line-height:26px; color: #000;}
.li_col div p {margin-top: 15px; font-size: 16px; line-height:26px;}
.li_col.point div {border-color:var(--main-color)}


/* sub0103 */
.sub0103 .cont {overflow:hidden; border-radius:20px; padding:60px; padding-bottom:70px; }
    .sub0103 .cont:nth-of-type(1) {background-image: url(/images/sub0103_1.jpg)}
    .sub0103 .cont:nth-of-type(2) {background-image: url(/images/sub0103_2.jpg)}
.sub0103 .cont h5,
.sub0103 .cont p {color: #fff;}
.sub0103 .cont h5 {font-size:34px; font-weight:700;}
.sub0103 .cont .partner span {text-decoration: underline}

.ptn {display:flex; flex-wrap:wrap; align-items: stretch; justify-content: space-between}
.ptn > div {width:calc((100% - 40px)/2);margin-bottom:20px;}
.ptn > div h5 {height:50px; margin-bottom:10px; padding:0 20px; font-size: 17px; font-weight: 500;  border-radius:10px; background-color: var(--main-color); color: #fff; cursor: pointer}
.ptn > div h5::after {content:"▼"; font-size: 10px;}
.ptn > div.on h5::after {content:"▲"}
.ptn > div .set_tbl {display:none;}
.ptn > div.on .set_tbl {display:block;}


.ban_dep3 {margin-top: 60px; padding:60px; background-image:url(/images/ban_sub0201.jpg)}
.ban_dep3 h3,
.ban_dep3 p {color: #fff}
.ban_dep3 h3 {font-size: 30px; font-weight: 700; }
.ban_dep3 .partner {margin-bottom:0;}


.li_row {}
.li_row > div {margin-bottom:10px; padding:40px 0 50px 0; border-radius:10px; border:1px solid #ddd; background-color:#fff;  font-size: 20px; line-height:30px; font-weight:400;}
.li_row > div img {display: block; margin:0 auto; margin-bottom:20px;}

.li_row > div {padding:20px; padding-bottom:40px; text-align: left;  border-radius:10px; border:1px solid #ddd; background-color:#fff;}
.li_row > div img {margin:0; margin-bottom:20px;}
.li_row h6 {font-size: 20px; font-weight: 700; line-height:26px; color: #000;}
.li_row div p {margin-top: 15px; font-size: 16px; line-height:26px;}


.li_comm {margin-top:15px; }
.li_comm li {position: relative; padding-left:15px;  line-height:1.3; margin-bottom:8px; font-size: 16px;}
.li_comm li:last-child {margin-bottom:0}
.li_comm li::before {position: absolute; left:0; top:7px; content:"●"; font-size: 5px; line-height:1.3; color: #aaa;}

.ban_account,
.ban_account img {display: block;}
.ban_account img {width:100%; height:auto;}



/* sub0201 */
.sub02 figure img {display: block; width:100%; height:auto;}
.sub02 .process {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:20px}
.sub02 .process > li {display:flex; align-items: flex-start; justify-content: flex-start; overflow:hidden; border-radius:10px; padding:25px 20px; border:1px solid #ddd}
.sub02 .process .num {margin-right:15px; font-size: 30px; font-weight: 100; color: var(--main-color);}
.sub02 .process dt {font-size: 18px; font-weight: 600;}
.sub02 .process dd {margin-top:10px; line-height:1.7;}


.caution {}
.caution h2 {margin-top:15px; margin-bottom:10px; font-size: 16px; font-weight: 600; color: #000; }
.caution p {line-height:1.5;}
.caution .ex {padding:20px; border-radius:5px; background-color: #f9f9f9; border:1px solid #ddd; }
.caution .ex dt,
.caution .ex dd {font-size: 15px; line-height:1.4;}
.caution .ex dt {font-weight: 600;}


/* sub0202 */
.define {border:1px solid #ddd; background-color: #f9f9f9; padding:50px 40px;}
.define dt {font-size:18px; font-weight: 600; color: #000;}
.define .p_comm {margin-top:15px; margin-bottom:30px;}
.define .p_comm:last-child {margin-bottom: 0;}


.choice {border-top:1px solid #aaa;}
.choice li {position: relative; padding:30px 0;  padding-left:40px; border-bottom:1px solid #aaa;}
.choice li::before {content:""; position: absolute; left:0; top:30px; display: block; width:22px; height:22px; border-radius:2px; border:1px solid #aaa; box-sizing:border-box;}
.choice li h6 {margin-bottom:15px; font-size: 20px; font-weight:600; color: var(--main-color);}



.sub0201 .sub_title:first-child,
.sub0202 .sub_title:first-child {margin-top: 0;}

/* sub0203 */
.sub0203 .ban_dep3 .btn_comm {margin:0; border-color:#fff}

.sub0203 .process {display:block;}
.sub0203 .process > li {padding:40px; margin-bottom:20px;}
.sub0203 .process .icon {display:flex; align-items: center; justify-content: center; margin-right:15px; width:90px; height:90px; background-color: var(--sub-color); border-radius:100%;}
.sub0203 .process dl {width:calc(100% - 90px); padding-left:30px}
.sub0203 .process dt {color: #000;}
.sub0203 .process .tbl {text-align: center;}
.sub0203 .process .tbl .not {color: red;}
.sub0203 .process h6 {margin-top:20px; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--main-color);}
.sub0203 .refer {margin-top:8px; font-size: 14px; color:red;}
.sub0203 .set_money {display:flex; align-items: center; justify-content: center; padding:20px 0;}
.sub0203 .set_money > li {font-weight: 700; color: #000; text-align: center;}
.sub0203 .set_money > .arr {margin:0 20px;}
.sub0203 .set_money figure {display:flex; align-items: center; justify-content: center; width:150px; height:150px; padding:40px; border-radius:100%; border:1px dashed #aaa; margin-bottom:15px;}
.sub0203 .set_money p {font-size: 17px; font-weight: 700; color: #000;}
.sub0203 .sup {position: relative; top:-5px; font-size:0.7rem; }


/* sub0204 */
.sub02 .cont {overflow: hidden; border-radius: 10px; padding: 40px; border: 1px solid #ddd;}
.sub02 .cont h6 {margin-top:40px; font-size:18px; font-weight: 700; color: #000;}
.sub02 .cont h6:first-child {margin-top: 0;}
.sub02 .cont .tbl {margin-top: 20px;}
.sub02 .cont .tbl th,
.sub02 .cont .tbl td {text-align: center; line-height:1.2}


.cal {display:flex; align-items: stretch; justify-content: space-between; margin-top:10px;}
.cal dl {width:230px; background-color:#fff; text-align: center;}
    .cal dl.in {border:1px solid var(--main-color)}
    .cal dl.out {border:1px solid var(--sub-color)}
.cal dl dt {padding:10px 0; font-weight: 600; color: #fff;}
    .cal dl.in dt {background-color:var(--main-color)}
    .cal dl.out dt {background-color:var(--sub-color)}
.cal dl dd {padding:10px; line-height:1.5; }
.cal dl dd strong {display: block; font-size: 18px; font-weight: 700;}
    .cal dl.in dd strong {color: var(--main-color)}
    .cal dl.out dd strong {color: var(--sub-color);}
.cal .result {display:flex; flex-direction: column; justify-content: center; align-items: center; width:400px; padding:20px; background-color:#000; text-align: center; }
.cal .result .math { line-height:1.3;color: #fff;}
.cal .result .math span {color:aquamarine; font-size:0.9em}
.cal .result .earn {margin-top:10px; font-size: 17px; font-weight: 700; color: #fff;}
.cal .arr {display:flex; align-items: center; justify-content: center; padding:0 10px; font-size: 17px; font-weight: 700;}

.cont .how {margin-top:15px; padding:20px 25px; background-color:#fafafa; border:1px dashed #ddd;}
.cont .how h6 {font-size: 16px; font-weight: 600; margin-bottom:15px;}
.cont .how dl dt,
.cont .how dl dd,
.cont p.how,
.cont .how p {line-height:1.5; font-size: 14px; color: #666;}
.cont .how dl dd {margin-bottom:15px;}
.cont .how dl dd:last-child {display:flex; margin-bottom:0px;}
.cont .how dl dd:last-child p {width: 50%;}

/* sub0301 */
.sub03 .ban_dep3 {background-image:url(/images/ban_sub03.jpg)}
.sub0301 .row {align-items: stretch}
.sub0301 .row > div {width:48%;background-color:#f8f8f8; padding:40px; border-radius:10px; border:1px solid #ddd; text-align: center;}
.sub0301 .row h5 {margin-bottom:30px; font-size: 26px; font-weight: 700; color: #000;}
.sub0301 .row h5 span {color:var(--nexus-color)}
.sub0301 .row h6 {margin-top:15px;font-size: 17px; line-height:1.5; font-weight: 700; color: #000;}
.sub0301 .row img {width:auto; height:180px;}
.sub0301 .row .btn_comm  {margin-top:40px;}

.sub0301 .choice {margin-top:40px;}



/* sub0302 */
.sub0302 .choice {margin-top:30px;}


/* sub0401 */
.sub04 .center {padding-top:80px;}
.sub04 .set_btn {text-align: center;}
.sub04 .btn_apply {display:inline-flex; width:auto; height:auto; font-size: 20px; padding:20px 30px;}
.sub04 .btn_preview {border-color:var(--main-color); color:var(--main-color)}
/* sub0402 */
.sub0402 .tbl th {width:180px;}
.sub0402 .tbl tbody tr:first-child th:first-child {background-color: var(--main-color); color: #fff;}

/* sub0403 */
.finish { padding:40px; padding-top:50px; border:2px solid var(--main-color); text-align: center; background-color: #fcf4ee;}
.finish h4  {font-size: 20px; font-weight: 700; color: #000;}
.finish .btn_comm {margin-top:20px;}



/* sub0404 */
.review  dl {margin-bottom:10px; background-color:#fff; border-radius:10px; box-shadow:1px 1px 15px rgba(0,0,0,0.2) }
.review  dl dt {display:flex; align-items: center; justify-content: space-between; padding:0 20px; height:60px; font-size: 18px; font-weight: 600; color: #000; cursor: pointer}
.review  dl dt::after {content:"▼"; font-size: 12px; color: var(--main-color);}
.review  dl.view dt::after {content:"▲"; }
.review  dl dd {display: none; padding:20px; background-color:#f9f9f9; border-top:1px solid #eee;  }
.review  dl.view dd {display: block;}
.review  dl dd * {line-height:1.7;}
.review  dl dd .from {margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--main-color);}



/* sub0504 */
.sub0504 .li_comm {margin-top: 0;}

.remote .item {width:30%; padding:30px 20px; border-radius:10px; border:1px solid #aaa; justify-content: flex-start}
.remote .item figure {margin-right: 15px;}
.remote .item dt {font-size: 18px; font-weight: 700; color: #000;}
.remote .item dd {margin-top: 15px; font-size: 10px; font-size: 16px;}
.remote .item dd a {color: blue; text-decoration: underline;}
.remote .arr {font-size: 20px; font-weight: 700; }


/* sub0505 */
.sub0505 .remote.apy {align-items: stretch; }
.sub0505 .remote.apy .step {font-weight: 700; color: var(--main-color);}




/* sub0506 */

.sub0506 .caution {margin-top: 20px; justify-content: center; padding:80px; background-image:url(/images/sub0506_2.jpg);}
.sub0506 .caution .p_comm {margin-top: 0; margin-bottom:20px; text-align: center; color: #fff;}
.sub0506 .caution ul {justify-content: center;}
.sub0506 .caution ul li {display:flex; align-items: center; justify-content: center; width:200px; height:200px; border-radius:100px; margin:0 10px; text-align: center; border:1px dashed #ddd; line-height:1.5; font-size: 17px; color: #fff;}


/* ----------------0601------------------ */

#contents.sub.sub0601 {padding-bottom:0;}

.sub0601 .btn_comm {margin:0; border-radius:100px; border:0; background-color: var(--main-color); color: #fff;}
.sub0601 .sub_title {margin-top:0;}
.sub0601 .sub_title h2 {font-size: 44px; font-weight: 600; line-height:54px; color: #000;}
.sub0601 .sub_title p {margin-top: 10px; font-size: 17px; line-height:26px;}

.sub0601-1 article,
.sub0601-1 .set_img {width:50%;}
.sub0601-1 .btn_comm {margin-top: 50px; width: 170px; height: 60px; font-size: 17px;}

.sub0601-1 .set_img {position:relative;}
.sub0601-1 .set_img .push {position:absolute; left:50%; top:50%; transform:translate(-60%,-60%); width:250px; height:120px; padding:30px 20px; border-radius:10px; background-color: #fff; box-shadow:10px 10px 10px rgba(0,0,0,0.5); display:flex; flex-direction: column; justify-content: center; }
.sub0601-1 .set_img .set_pay {display:flex; align-items: center; justify-content: flex-start; }
.sub0601-1 .set_img .set_pay figure {display:flex; align-items: center; justify-content: center;  width:40px; height:40px; border-radius:100px; background-color: var(--main-color); color: #fff; font-family: '맑은고딕','돋움',sans-serif; font-weight: bold;}
.sub0601-1 .set_img .set_pay dl {width:calc(100% - 40px); padding-left:10px;}
.sub0601-1 .set_img .set_pay dt {font-size: 15px;}
.sub0601-1 .set_img .set_pay dt span {color: var(--main-color);}
.sub0601-1 .set_img .set_pay dd {margin-top:5px; font-size:22px; font-weight:700; color: #000;}
.sub0601-1 .set_img .done {width:60px; height:20px; margin:0 auto; margin-top:15px;padding:5px 0; display:flex; align-items: center; justify-content: center; border-radius:100px; background-color: var(--main-color);}
.sub0601-1 .set_img .done img {display:block; width:auto; height:100%; filter:brightness(10)}

.sub0601-1 h2.active {animation-delay: 0.1s}
.sub0601-1 p.active {animation-delay: 0.4s}
/*
.sub0601-1 .sub_title span {position: relative; overflow:hidden; margin:0 3px;padding:3px 5px; border-radius:4px; display:inline-block; color: #fff;}
.sub0601-1 p span::before {content:""; position: absolute; left:0; top:0; width:0; height:100%; display:inline-block; background-color: var(--main-color); transition-delay:2s;  transition:0.5s; z-index: 1;}
.sub0601-1 p.active span::before {width:100%; z-index: -1;}
*/
.sub0601-1 .btn_comm.active {animation-delay: 0.9s}
.sub0601-1 .set_img.active {animation-delay: 1s}
.sub0601-1 .done.active {animation-delay: 1.3s}

.sub0601-1 .sub_title h2.active span {color: var(--main-color);}
.sub0601-1 .sub_title h2.active span:nth-child(1) {transition-delay: 0.3s}
.sub0601-1 .sub_title h2.active span:nth-child(2) {transition-delay: 0.4s}
.sub0601-1 .sub_title h2.active span:nth-child(3) {transition-delay: 0.5s}
.sub0601-1 .sub_title h2.active span:nth-child(4) {transition-delay: 0.6s}
.sub0601-1 .sub_title h2.active span:nth-child(5) {transition-delay: 0.7s}
.sub0601-1 .sub_title h2.active span:nth-child(6) {transition-delay: 0.8s}
.sub0601-1 .sub_title h2.active span:nth-child(7) {transition-delay: 0.9s}
.sub0601-1 .sub_title h2.active span:nth-child(8) {transition-delay: 1s}

.sub0601-1 .sub_title p.active span {position: relative; color: var(--main-color); transition-delay: 1.2s}


.sub0601-2 {padding:120px 0; background-color:#f6f6f6;}
.sub0601-2 .sub_title {margin-bottom:45px; text-align: center;}
    .sub0601-2 .sub_title.ani {animation-delay:0.3s }

.sub0601-2 .payback {background-color:#fff; border-radius:50px;}
    .sub0601-2 .payback.ani {animation-delay:0.6s}
.sub0601-2 .payback > div {width:50%; padding:60px 50px;}
.sub0601-2 .payback > div:first-child {border-right:1px dashed #ddd;}
.sub0601-2 .payback hgroup {margin-bottom:20px;}
.sub0601-2 .payback hgroup h3 {font-size: 24px; font-weight: 700; color: #000;}
.sub0601-2 .payback hgroup p {margin-top:10px;}
.sub0601-2 .payback dt {margin-bottom:10px; font-weight: 500;}
.sub0601-2 .payback dd {display:flex; align-items: center; justify-content: flex-start; height:40px; margin-bottom:20px; padding-left:15px; border-radius:100px; font-size: 16px; font-weight: 600; color: #fff;}
.sub0601-2 .payback dd:nth-child(2) {width: 150px; background-color:#ffb57f;}
.sub0601-2 .payback dd:nth-child(4) {width: 260px; background-color:#ff984c;}
.sub0601-2 .payback dd:nth-child(6) {width: 100%; background-color:#ff6c00;}
.sub0601-2 .payback dd:last-child {margin-bottom:0; }

.sub0601-3 {padding:0; }
.sub0601-3 .sub_title {width:350px;}
.sub0601-3 article {position: relative;width:calc(100% - 350px); border-radius:30px; }
.sub0601-3 article > div:nth-child(1) {position: relative; background-color:#ffb57f; z-index: 3;}
.sub0601-3 article > div:nth-child(2) {position: absolute; top:0; background-color:#ff984c; z-index: 2;}
.sub0601-3 article > div:nth-child(3) {position: absolute; top:0px; background-color:#ff6c00;z-index: 1;}
.sub0601-3 article > div {height:333px; padding: 50px; border-radius:30px;}
.sub0601-3 article > div hgroup {width: 350px; padding-right:50px;}
.sub0601-3 article > div hgroup h3 {font-size: 24px; line-height: 34px; font-weight: 700; color: #000;}
.sub0601-3 article > div hgroup p {margin-top:10px; line-height:22px;}
.sub0601-3 article > div .answer {position: relative; width:calc(100% - 350px); padding:40px; border-radius:10px; background-color:#fff; font-size: 18px; line-height:26px;}
.sub0601-3 article > div .answer::before {content:""; width:21px; height:24px; background-image:url(/images/comment.png); position:absolute; left:-20px; top:30px;}
.sub0601-3 article > div .answer li {position: relative; margin:10px 0; padding-left:30px; font-size: 18px; line-height:26px;}
.sub0601-3 article > div .answer li::before {content:""; width:20px; height:20px; background-image:url(/images/chk.png); position:absolute; left:0; top:3px; }

.sub0601-4 {padding:120px 0; background-color:#f6f6f6;}
.sub0601-4 .sub_title {margin-bottom:45px; text-align: center;}
.sub0601-4 .process {border-radius:20px; padding:20px 0; background-color:#fff; justify-content: space-evenly;}
.sub0601-4 .process .item {display:flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; color: #000;}
.sub0601-4 .process .item span {position: relative; overflow:hidden; margin:0 3px;padding:3px 5px; border-radius:4px; display:inline-block; color: #fff;}
.sub0601-4 .process .item span::before {content:""; position: absolute; left:0; top:0; width:0; height:100%; display:inline-block; background-color: var(--main-color); transition:0.5s; z-index: 1;}
.sub0601-4 .process.active .item span::before {width:100%; z-index: -1;}
.sub0601-4 .process li div {position:relative; display:flex; align-items: center; justify-content: center; width:240px; height:40px; color: #aaa; font-size: 18px; font-weight: 500; background-color:#eee; opacity:1; z-index: 1;}
.sub0601-4 .process li div.active {color: #fff;}
.sub0601-4 .process li div::before {position:absolute; left:0; top:0; border-radius:4px; width:0; height:100%; background-color: var(--main-color); content:""; z-index: -1;}
.sub0601-4 .process li div.active::before {width:100%; transition-duration: 1s}
.sub0601-4 .process .active .point {animation-delay:0.8s; animation-duration:1s}

.sub0601-4 .growup {margin-top:20px; border-radius:20px; padding:60px 50px; background-color:#fff;}
.sub0601-4 .growup h3 {margin-bottom:25px; text-align: center;font-size: 24px; font-weight: 700; color: #000;}
.sub0601-4 .growup .set_growup {position: relative; padding:10px 0; }
.sub0601-4 .growup .set_growup::before {content:""; position: absolute; left:50%; top:0; width:1px; height:100%; background-color:#ddd;}
.sub0601-4 .growup dl {display:flex; flex-direction: column; width:100%;}
.sub0601-4 .growup dl.left {align-items: flex-end; padding-right:50%;}
.sub0601-4 .growup dl.right {align-items: flex-start; padding-left:50%;}
.sub0601-4 .growup dl div {font-size:inherit; color:inherit;}
.sub0601-4 .growup dt,
.sub0601-4 .growup dd {display:flex; width:100%;}
.sub0601-4 .growup .left dt,
.sub0601-4 .growup .left dd {justify-content: flex-end}
.sub0601-4 .growup dt {margin-bottom:10px; padding:0 10px; font-weight: 500;}
.sub0601-4 .growup dd div {display:flex; align-items: center; height:40px; margin-bottom:20px; padding-left:15px; border-radius:100px; font-size: 16px; font-weight: 600; color: #fff;}
    .sub0601-4 .growup .left dd:nth-child(2) div {width: 100%; background-color:#ff984c;}
    .sub0601-4 .growup .left dd:nth-child(4) div {width: 350px; background-color:#dddddd;}
    .sub0601-4 .growup .right dd:nth-child(2) div {width: 100%; background-color:#ff6c00;}
    .sub0601-4 .growup .right dd:nth-child(4) div {width: 530px; background-color:#cccccc;}
    .sub0601-4 .growup dd:last-child {margin-bottom:0; }
.sub0601-4 .growup .left .bar div {border-radius:50px 0 0 50px; }
.sub0601-4 .growup .right .bar div {border-radius:0 50px 50px 0}





.sub0601-5 {padding:120px 0;}
.sub0601-5 .sub_title {margin-bottom:20px; text-align: center;}
.sub0601-5 .pagination {position: relative; justify-content: space-between; width: 270px; margin:0 auto; margin-bottom:60px; z-index: 1;}
.sub0601-5 .pagination:before {content:""; position: absolute; left:0; top:50%; width:100%; height:1px; background-color:#ddd; z-index: -1;}
.sub0601-5 .pagination > div {display:flex; align-items: center; justify-content: center; width:40px; height:40px; border-radius:50px; background-color: #eee; color: #888;}
.sub0601-5 .pagination > div.on {background-color:var(--main-color);color: #fff;}

.sub0601-5 .set_average {width: 560px; margin:0 auto;}
.sub0601-5 .average {display:flex; flex-direction: column; justify-content: center; align-items: center; width: 560px; height:510px; border:1px solid #ddd; background-color:#fff; border-radius:20px;}
.sub0601-5 .average img {margin-bottom:20px;}
.sub0601-5 .average fieldset {position: relative; width:350px; border-bottom:1px solid var(--main-color)}
.sub0601-5 .average fieldset .ip_comm {height:50px; border-radius:0; border:0;}
.sub0601-5 .average fieldset .unit {font-size:17px; font-weight:700; color: #000;}
.sub0601-5 .average button {width:350px; height:50px; margin-top: 30px; border-radius:5px; background-color: var(--main-color); font-size: 18px; color: #fff;}

.sub0601-5 .times {position: relative; width: 350px; margin:0 auto;}
.sub0601-5 .times label {display:flex; align-items: center;  width:100%; height:46px; margin-bottom:4px; padding:0 10px;  background-color:#eee; color: #aaa;}
.sub0601-5 .times :checked + label {background-color: #000; color: #fff;}
.sub0601-5 .load .logo {width:150px;}
.sub0601-5 .load .loading {width:50px; }
.sub0601-5 .load .loading.ani {animation-iteration-count: infinite; animation-timing-function: linear; opacity:1;}

.sub0601-5 .payback dl {margin-bottom:15px; text-align: center;}
.sub0601-5 .payback dt {font-size: 20px; color: #000;}
.sub0601-5 .payback dd {margin-top:10px; font-size: 34px; font-weight: 700; color: var(--main-color);}



.sub0601-6 {padding:120px 0; background-color:#f6f6f6; text-align: center;}
.sub0601-6 .sub_title {text-align: center;}
.sub0601-6 .video {overflow:hidden; width: 900px; height:506px; border-radius:10px; margin:0 auto;}
.sub0601-6 .video iframe {width:100%; height:100%;}
.sub0601-6 .btn_comm {overflow:hidden; position: relative; display:inline-block; width:auto; height:auto; padding:15px 70px; margin-top:40px; font-size: 20px; line-height:1.4; font-weight: 600; z-index: 1;}
.sub0601-6 .btn_comm::before {display: block; width:0; height:100%; background-color: var(--main-color);position: absolute; left:0; top:0; content:""}
.sub0601-6 .btn_comm:hover {background-color:#ddd}
.sub0601-6 .btn_comm:hover::before {width:100%; transition-duration:1s ;z-index: -1;}
.sub0601-6 .btn_comm span {display: block; font-size: 16px; font-weight: 400;}



.sub0601 .payback1 {overflow:hidden; height: 220px;}



.sub0601 .payback1 .cont {display:flex; align-items: center; justify-content:space-between;  width:100%;height:calc(238px / 5); font-size: 17px; font-weight: 700;}
.sub0601 .payback1 .date {font-size: 14px;}
.sub0601 .payback1 .rank {width: 39px; text-align: center; font-size: 18px; font-weight: 700;}
.sub0601 .payback1 div {font-size: 17px; font-weight: 700;}
.sub0601 .payback1 .earn {color: var(--main-color)}
.sub0601 .payback1 .earn::before {content:"/"; margin:0 5px; font-weight: 400;color: #aaa;}
.sub0601 .payback1 .state {font-weight: 700; color: var(--sub-color)}
.sub0601 .payback1 .btn_more {position: absolute; right:30px; top:30px; display:flex;align-items: center; justify-content: center; width:26px; height:26px; border-radius:100%; background-color: var(--main-color); color: #fff;}

.sub0601 .wrap_payback .arr {

}

@keyframes arr {
	0% {bottom:0;}
	100% {bottom:-20px;}
}

.sub0601 .wrap_payback .arr img {
	position:relative;
	display:block; margin:0 auto;
	animation-name:arr; animation-duration:1s; animation-iteration-count:infinite;
	animation-direction: alternate
}


.parallax__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.4;
}