@charset "utf-8";

body.scrollLock { overflow:hidden;}

#headerWrap { position:fixed; top:0; z-index:2; width:100%; height:16.67vw; background:rgba(61,81,153,0.9 );}
#headerWrap .logo { position:absolute; left:4.44vw; top:50%; width:13.89vw; height:8.06vw; font-size:0; background:url('../images/loginNew/logo.png') no-repeat; background-size:100%; transform:translateY(-50%);}
#headerWrap h1 { line-height:16.67vw; text-align:center; font-size:4.72vw; color:#fff; font-weight:normal;}
#headerWrap .btnMenu { overflow:hidden; position:absolute; right:2.5vw; top:50%; width:8.88vw; height:8.88vw; transform:translateY(-50%); font-size:0;}
#headerWrap .btnMenu span { position:absolute; left:50%; top:50%; width:4.44vw; height:0.37vw; margin-top:-1.7vw; font-size:0; background:#fff; transform:translate(-50%, -50%);}
#headerWrap .btnMenu span:after { content:''; display:block; position:absolute; top:1.67vw; right:0; width:100%; height:0.37vw; background:#fff; animation:menuM 3s linear infinite alternate;}
#headerWrap .btnMenu span:before { content:''; display:block; position:absolute; top:3.34vw; left:0; width:100%; height:0.37vw; background:#fff;}

#headerWrap.main { background:none; transition:all .3s ease;}
#headerWrap.main .logo { background:url('../images/loginNew/logo_main.png') no-repeat; background-size:100%;}
#headerWrap.main .btnMenu span { background:#fff;}
#headerWrap.main .btnMenu span:after { background:#fff;}
#headerWrap.main .btnMenu span:before { background:#fff;}
#headerWrap.main.on { background:rgba(255,255,255,0.8)}
#headerWrap.main.on .btnMenu span,
#headerWrap.main.on .btnMenu span:after,
#headerWrap.main.on .btnMenu span:before { background:#4f505e;}

.headerMenu {}
.headerMenu .bg { visibility:hidden; position:fixed; top:0; left:0%; z-index:10; width:100%; height:100%; background:rgba(0,0,0,0.5); transition:all .3s ease .2s; opacity:0;}
.headerMenu .AllMenu { overflow-y:auto; position:fixed; top:0; left:-100%; z-index:10; width:65%; height:100%; background:#fff; transition:left .3s ease;}
.headerMenu .AllMenu h2 { padding:8.33vw 6.94vw; font-size:5.56vw; color:#1c9bd7;  border-bottom:0.56vw solid #1c9bd7;}
.headerMenu .AllMenu h2 a { font-size:5.56vw; color:#1c9bd7; font-weight:bold;}
.headerMenu .AllMenu h2:before { content:''; display:inline-block; width:9.44vw; height:9.44vw; margin-right:1.85vw; margin-top:-1.05vw; vertical-align:middle; background:url(../images/loginNew/img_menu_logo.png) no-repeat; background-size:cover;}
.headerMenu .AllMenu .menu {border-bottom:0.28vw solid #e8e8e8; padding:6.48vw 6.94vw 4.63vw;  }
.headerMenu .AllMenu .menu h3 { font-size:4.72vw; color:#333; }
.headerMenu .AllMenu .menu ul { padding-top:2.78vw; }
.headerMenu .AllMenu .menu li { position: relative;}
.headerMenu .AllMenu .menu li:before { content:''; position:absolute; left:0; top:50%; margin-top:-0.56vw; width:1.11vw; height:1.11vw; border-radius:0.56vw; background:#cccccc;  }
.headerMenu .AllMenu .menu li a { display:block; height:7.41vw; padding-left:3.7vw; line-height:7.41vw; font-size:3.89vw;  color:#333;}
.headerMenu .AllMenu .menu li a .roundInfo { display:inline-block; height: 6.41vw; padding: 0 3vw; line-height: 6.41vw; font-size: 3.5vw; background-color: #666; color: #fff; border-radius: 7.41vw; font-weight: bold; float: right;}
.headerMenu.on {}
.headerMenu.on .bg { visibility:visible; left:0; transition:all .3s ease; opacity:1;}
.headerMenu.on .AllMenu { left:0; transition:left .3s ease .2s;}

/* main */
#wrap { overflow:hidden;  position:absolute; top:0; left:0; width:100%; height:100%;}
.contentWrap.mainCont { padding-bottom:16.67vw;}
.contentWrap.mainCont ~ .btnApp { display:none; background:#1c9bd7;}
.contentWrap.mainCont ~ .btnApp.on { display:block; z-index:5;}

.mainVisual { overflow:hidden; position:relative; height:122.22vw;}
.mainVisual h1 { position:absolute; top:50%; left:0; right:0; z-index:1; font-size:6.67vw; font-weight:800; text-align:center; color:#fff; transform:translateY(-50%);}
.mainVisual h1 .normal { font-weight:normal;}
.mainVisual h1 span { display:inline-block; font-weight:800;}
.mainVisual h1 span.block { display:block;}

.mainVisual .mainVisualBox {}
.mainVisual .mainVisualBox .img { visibility:hidden; opacity:0.5; position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(1.05); transition:all 1.5s ease;}
.mainVisual .mainVisualBox .img.on { visibility:visible; opacity:1; z-index:1; transform:scale(1);}
.mainVisual .mainVisualBox .img span {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.mainVisual .mainVisualBox .img.on span { animation:mainVisualM 4.5s linear infinite alternate;}

@keyframes mainVisualM{
	0% { transform:scale(1.02);}
	100% { transform:scale(1);}
}

.mainVisual .btnMainApp { position:absolute; bottom:0; left:0; right:0; z-index:2; width:55.56vw; height:15vw; border-radius:11.11vw; margin:0 auto; font-size:5.28vw; line-height:15vw; text-align:center; color:#fff; background:#1c9bd7;}
.mainVisual .video { position:absolute; top:0; left:0; bottom:0; right:0;}
.mainVisual .video:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2);}
.mainVisual .video video { position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%,-50%);}

[class*=mainSec] { /* height:calc(180vw - 16.67vw - 16.67vw) !important; */ padding-top:16.66vw;  border-radius:3.89vw 3.89vw 0 0; text-align:center;box-shadow:0px -24px 45px rgba(0,0,0,0.06); background:#fff;z-index: 1;}
[class*=mainSec] h2 { font-size:6.94vw; color:#333; position: relative;}
[class*=mainSec] a { display:block;}
[class*=mainSec] .text { margin-top:3.89vw; font-size:3.61vw; line-height:1.4545; color:#666; position: relative;}
[class*=mainSec] .text strong { font-weight:bold; color:#333;}
[class*=mainSec] .text .color { color:#1c9bd7;}

.mainSec01 { overflow:hidden; position:relative; z-index:1; height:138.89vw; padding-top:24.16vw; margin-top:-7.5vw; background:#fff; }
.mainSec01:before { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:65.74vw; background:url('../images/loginNew/main/bg_sec01.png') no-repeat; background-size:cover; transform-origin:50% 100%; animation:sec01Bg 10s linear both infinite alternate;}

.mainSec01 .motion {}
.mainSec01 .motion .item1 { position:absolute; bottom:0; left:50%; width:69.44vw; height:91.2vw; margin-left:-31.94vw; background:url('../images/loginNew/main/img_sec01.png') no-repeat; background-size:cover;}

@keyframes sec01Bg{
	0%{ transform:scale(1) rotateZ(0.000deg)}
	100%{ transform:scale(1.05) rotateZ(0.001deg)}
}

.mainSec01 .item1_1 { opacity:0; position:absolute; left:2.96vw; top:44.44vw; width:57.96vw; height:13.61vw; background:url('../images/loginNew/main/img_sec01_1.png') no-repeat; background-size:cover;}
.mainSec01 .heandM { opacity:0; position:absolute; left:44.91vw; top:53.52vw; width:6.11vw; height:6.11vw; background:url('../images/loginNew/main/img_heand_click.png') no-repeat; background-size:cover;}
.mainSec01 .clickM { opacity:0; position:absolute; left:41.85vw; top:49.07vw; width:6.48vw; height:6.48vw; border-radius:50%; border:2.22vw solid #50bef2; background:#ffffff}
.mainSec01 .clickM:after { content:''; position:absolute; left:50%; top:50%; width:6.48vw; height:6.48vw; border-radius:50%; box-shadow: 0 0 0 0vw rgba(0,97,143,0.2); transform:translate(-50%,-50%)}
.mainSec01 .item1_2 { opacity:0; position:absolute; left:2.96vw; bottom:0vw; width:57.96vw; height:88.06vw; border-radius: 4vw 4vw 0 0; background:url('../images/loginNew/main/img_sec01_2.png') no-repeat; background-size:100%;}

.mainSec01 .aniAction { animation:fadeInUp .6s ease;}
.mainSec01 .aniAction .item1_1 { animation:bounceIn .8s ease .6s both;}
.mainSec01 .aniAction .heandM { animation:fadeInRight .5s ease 1.3s both;}
.mainSec01 .aniAction .clickM { animation:bounceIn .8s ease 1.6s both;}
.mainSec01 .aniAction .clickM:after { animation:clickShadow .8s ease-in-out 1.8s both}
.mainSec01 .aniAction .item1_2 { animation:slideUp .5s ease 2.5s forwards, autoPlay 4s ease-in-out 3s infinite alternate;}

.mainSec01 .aniAction.wait-animation,
.mainSec01 .aniAction.wait-animation .item1_1,
.mainSec01 .aniAction.wait-animation .item1_2,
.mainSec01 .aniAction.wait-animation .heandM,
.mainSec01 .aniAction.wait-animation .clickM,
.mainSec01 .aniAction.wait-animation .clickM:after {animation-play-state: paused;}


@keyframes clickShadow{
	0% { opacity:1; box-shadow: 0 0 0 0vw rgba(0,97,143,0.2)}
	50% { opacity:0.5; width:6.48vw; height:6.48vw; box-shadow: 0 0 0 2.04vw rgba(0,97,143,0.2);}
	100% { opacity:0; width:8.52vw; height:8.52vw; box-shadow: 0 0 0 0vw rgba(0,97,143,0.2);}
}

@keyframes slideUp{
	0% { opacity:1; bottom:-100%;}
	100% { opacity:1; bottom:0%;}
}

@keyframes autoPlay{
	0%,20% { background-position:0 0;}
	80%,100% { background-position:0 100%;}
}

.mainSec02 { overflow:hidden; position:relative; height:118.8vw; margin-top:-5.56vw; padding-top:22.22vw;}
.mainSec02 .motion { position:relative; transform-style: preserve-3d; width:52.78vw; height:52.78vw; margin:25.87vw auto 0; perspective: 300px;}
.mainSec02 .motion > div { position:absolute; top:50%; left:50%; width:52.78vw; height:52.78vw; border-radius:50%; margin:-26.39vw 0 0 -26.39vw; background:skyblue; transition:all .5s ease;}
.mainSec02 .motion > div:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; border:0.56vw solid rgba(255,255,255,0.5); box-sizing:border-box; transform:scale(0.85);}
.mainSec02 .motion .title { position:relative; display:flex; height:52.78vw; flex-flow: column; color:#f5f6f8; justify-content:center;}
.mainSec02 .motion .title span { font-size:3.61vw;}
.mainSec02 .motion .title strong { display:block; font-size:5.56vw; transition:all .3s ease;}
.mainSec02 .motion .on .title strong { margin-top:22vw; font-size:3.89vw;}
.mainSec02 .motion .on:after { display:none;}

.mainSec02 .motion .item1 { z-index:4; background:rgba(28,155,215,0.5);}
.mainSec02 .motion .item2 { z-index:3; background:rgba(37,109,207,0.5);}
.mainSec02 .motion .item3 { z-index:2; background:rgba(141,198,52,0.5);}
.mainSec02 .motion .item4 { z-index:1; background:rgba(247,160,36,0.5);}
.mainSec02 .motion .item1:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/loginNew/main/img_sec02_1.png') no-repeat; background-size:cover; transition:all .3s ease; opacity:0;}
.mainSec02 .motion .item2:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/loginNew/main/img_sec02_2.png') no-repeat; background-size:cover; transition:all .3s ease; opacity:0;}
.mainSec02 .motion .item3:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/loginNew/main/img_sec02_3.png') no-repeat; background-size:cover; transition:all .3s ease; opacity:0;}
.mainSec02 .motion .item4:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../images/loginNew/main/img_sec02_4.png') no-repeat; background-size:cover; transition:all .3s ease; opacity:0;}

.mainSec02 .motion .item1.on:before,
.mainSec02 .motion .item2.on:before,
.mainSec02 .motion .item3.on:before,
.mainSec02 .motion .item4.on:before { opacity:1;}

.mainSec03 { overflow:hidden; position:relative; height:104.44vw; background:url('../images/loginNew/main/bg_sec03.png') no-repeat; background-size:100% 100%;}
.mainSec03 .motion {}
.mainSec03 .motion > div { position:absolute; bottom:3.7vw; left:0; width:100%; height:85.65vw;}
.mainSec03 .motion .item1 { background:url('../images/loginNew/main/img_sec03_1.png') no-repeat center center; background-size:cover;}
.mainSec03 .motion .item2 { background:url('../images/loginNew/main/img_sec03_2.png') no-repeat center center; background-size:cover;}
.mainSec03 .motion .item3 { background:url('../images/loginNew/main/img_sec03_3.png') no-repeat center center; background-size:cover;}

.mainSec03 .sec03M .item1 { animation:fadeInUp .8s ease .4s both;}
.mainSec03 .sec03M .item2 { animation:sec03_1 .8s ease .8s both;}
.mainSec03 .sec03M .item3 { animation:sec03_2 .8s ease 1.2s both;}

@keyframes sec03_1{
	0% { opacity:0; transform:translate(-30%,5%)}
	100% {opacity:1; transform:translate(0%,0%)}
}

@keyframes sec03_2{
	0% { opacity:0; transform:translate(30%,-30%)}
	100% {opacity:1; transform:translate(0%,0%)}
}
	
.mainSec03 .sec03M.wait-animation,
.mainSec03 .sec03M.wait-animation .item1,
.mainSec03 .sec03M.wait-animation .item2,
.mainSec03 .sec03M.wait-animation .item3 {animation-play-state: paused;}

.mainSec04 { overflow:hidden; position:relative; height:114.54vw; margin-top:-3.7vw; padding-top:20.36vw;}

.mainSec04 .motion { position:absolute; bottom:0vw; left:0; width:100%; height:79.44vw; background:url('../images/loginNew/main/bg_sec04_1.png') no-repeat; background-size:cover;}
.mainSec04 .motion > div { opacity:0; position:absolute; bottom:0vh; left:0; width:100%; height:100.44vw;}
.mainSec04 .motion .item1 { background:url('../images/loginNew/main/img_sec04_1.png') no-repeat center center; background-size:cover;}
.mainSec04 .motion .item1 span { display:block; position:absolute; top:45.39vw; left:68.96vw; width:14.72vw; height:9.63vw; background:url('../images/loginNew/main/img_sec04_4.png') no-repeat; background-size:cover; transform-origin:0 100%; transform:rotate(72deg);}
.mainSec04 .motion .item1 p { position:absolute; top:70.37vw; right:0vw; width:20.93vw; text-align:left; font-size:3.06vw; color:#666;}

.mainSec04 .motion .item2 { background:url('../images/loginNew/main/img_sec04_2.png') no-repeat center center; background-size:cover;}
.mainSec04 .motion .item2 span { display:block; position:absolute; top:69.83vw; right:61.57vw; width:10vw; height:9.17vw; background:url('../images/loginNew/main/img_sec04_3.png') no-repeat right 0; background-size:cover;}
.mainSec04 .motion .item2 p { position:absolute; top:72.7vw; left:0vw; width:26.85vw; text-align:right; font-size:3.06vw; color:#666;}

.mainSec05 { overflow:hidden; position:relative; height:118.06vw; background:url('../images/loginNew/main/bg_sec05.png') no-repeat; background-size:cover;}
.mainSec05 .motion {}
.mainSec05 .motion > div { position:absolute; top:50vw;}
.mainSec05 .motion .item1 { opacity:0; left:50%; width:37.78vw; height:73.06vw; background:url('../images/loginNew/main/img_sec05_1.png') no-repeat; background-size:cover; transform:translateX(-50%);}
.mainSec05 .heandM { opacity:0; position:absolute; left:25.28vw; top:67.1vw; width:6.11vw; height:6.11vw; background:url('../images/loginNew/main/img_heand_click.png') no-repeat; background-size:cover;}
.mainSec05 .clickM { opacity:0; position:absolute; left:22.22vw; top:62.5vw; width:6.48vw; height:6.48vw; border-radius:50%; border:2.22vw solid #50bef2; background:#ffffff}
.mainSec05 .clickM:after { content:''; position:absolute; left:50%; top:50%; width:6.48vw; height:6.48vw; border-radius:50%; box-shadow: 0 0 0 0vw rgba(0,97,143,0.2); transform:translate(-50%,-50%)}
.mainSec05 .motion .loding { opacity:0; top:71.76vw; left:50%; width:12.69vw; height:14.81vw; background:url('../images/loginNew/main/img_sec05_2.png') no-repeat; background-size:cover; transform:translateX(-50%);}
.mainSec05 .motion .item2 { opacity:0; left:50%; width:37.78vw; height:73.06vw; background:url('../images/loginNew/main/img_sec05_3.png') no-repeat; background-size:cover; transform:translateX(-50%);}

.mainSec05 .aniAction .heandM { animation:fadeInRight .5s ease .9s both;}
.mainSec05 .aniAction .clickM { animation:bounceIn .8s ease 1.4s both;}
.mainSec05 .aniAction .clickM:after { animation:clickShadow .8s ease-in-out 1.7s both}

.mainSec05 .aniAction.wait-animation .heandM,
.mainSec05 .aniAction.wait-animation .clickM,
.mainSec05 .aniAction.wait-animation .clickM:after {animation-play-state: paused;}

.mainSec06 { overflow:hidden; position:relative; height:126.02vw; margin-top:-3.7vw; padding-top:20.36vw;}
.mainSec06 .motion { position:absolute; top:50vw; width:100%; height:95.91vw;}
.mainSec06 .motion > div { position:absolute; top:0;}
.mainSec06 .heandM { opacity:0; position:absolute; left:14.35vw; top:40.8vw; width:6.11vw; height:6.11vw; background:url('../images/loginNew/main/img_heand_click.png') no-repeat; background-size:cover;}
.mainSec06 .clickM { opacity:0; position:absolute; left:11.39vw; top:36.54vw; width:6.48vw; height:6.48vw; border-radius:50%; border:2.22vw solid #50bef2; background:#ffffff}
.mainSec06 .clickM:after { content:''; position:absolute; left:50%; top:50%; width:6.48vw; height:6.48vw; border-radius:50%; box-shadow: 0 0 0 0vw rgba(0,97,143,0.2); transform:translate(-50%,-50%)}
.mainSec06 .motion .item1 { opacity:0; left:39.81vw; z-index:2; width:46.89vw; height:95.91vw; background:url('../images/loginNew/main/img_sec06_1.png') no-repeat; background-size:cover; transform:translateX(-50%);}
.mainSec06 .motion .item2 { opacity:0; left:17.37vw; z-index:1; width:40.52vw; height:83.52vw; margin-top:5.09vw; background:url('../images/loginNew/main/img_sec06_2.png') no-repeat; background-size:cover; transform:translateX(-50%);}
.mainSec06 .item1 .showOn { opacity:0; position:absolute; top:37.87vw; left:-4.63vw; width:30.04vw; height:30.04vw; background:url('../images/loginNew/main/img_sec06_1_1.png') no-repeat; background-size:cover;}
.mainSec06 .item2 .showOn { opacity:0; position:absolute; top:55.87vw; left:-4.63vw; width:30.04vw; height:30.04vw; background:url('../images/loginNew/main/img_sec06_2_1.png') no-repeat; background-size:cover;}
.mainSec06 .motion:before { content:''; display:block; position:absolute; bottom:-24vw; left:-10vw; width:100%; height:31.74vw;  background:url('../images/loginNew/main/bg_sec06.png') no-repeat; background-size:cover;}
.mainSec06 .motion:after { content:''; display:block; position:absolute; top:0vw; bottom:0; left:0; z-index:1; width:40.09vw; background:linear-gradient(90deg, rgba(255,255,255,1) 45%, rgba(255,255,255,0) 100%);}

.mainSec06 .aniAction .heandM { animation:fadeInRight .5s ease 1s  forwards, fadeOut .3s ease 2.5s forwards;}
.mainSec06 .aniAction .clickM { animation:bounceIn .8s ease 1.5s forwards, fadeOut .3s ease 2.5s forwards;}
.mainSec06 .aniAction .clickM:after { animation:clickShadow .8s ease-in-out 1.8s  forwards;}
.mainSec06 .aniAction .item1 { animation:fadeInDown .6s ease forwards, sec06_1 1s ease 3.5s forwards;}
.mainSec06 .aniAction .item2 { animation:fadeInRight .6s ease .4s forwards, sec06_2 1s ease 3.5s forwards;}
.mainSec06 .aniAction .item1 .showOn { animation:sec06_showOn .6s ease 2.5s forwards, fadeOut .3s ease 3.5s forwards;}
.mainSec06 .aniAction .item2 .showOn { animation:sec06_showOn .6s ease 4.2s forwards;}
.mainSec06 .aniAction.motion:before { animation:fadeInUp .6s ease both;}

.mainSec06 .aniAction.wait-animation:before,
.mainSec06 .aniAction.wait-animation .item1,
.mainSec06 .aniAction.wait-animation .item2,
.mainSec06 .aniAction.wait-animation .item1 .showOn,
.mainSec06 .aniAction.wait-animation .item2 .showOn,
.mainSec06 .aniAction.wait-animation .heandM,
.mainSec06 .aniAction.wait-animation .clickM,
.mainSec06 .aniAction.wait-animation .clickM:after {animation-play-state: paused;}

@keyframes sec06_showOn{
	0% { opacity:0; transform:scale(0)}
	60% { opacity:1; transform:scale(1.2)}
	80% { opacity:1; transform:scale(0.8)}
	100% { opacity:1; transform:scale(1)}
}
@keyframes sec06_1{
	0% {left:39.81vw; z-index:2; width:46.89vw; height:95.91vw;}
	100% {left:17.37vw; z-index:1; width:40.52vw; height:83.52vw; margin-top:5.09vw;}
}
@keyframes sec06_2{
	0% {left:17.37vw; z-index:1; width:40.52vw; height:83.52vw; margin-top:5.09vw;}
	100% {left:39.81vw; z-index:2; width:46.89vw; height:95.91vw; margin-top:0;}
}

.mainSec07 { overflow:hidden; position:relative; height:130.56vw; background:#fff url('../images/loginNew/main/bg_sec07.png') no-repeat 0 100%; background-size:100%;}
.mainSec07 .motion { position:absolute; top:50vw; height: 83.15vw;}
.mainSec07 .motion .item1 { overflow:hidden; opacity:0; position:absolute; top:0; left:26.56vw; width:48.78vw; height:95.15vw; background:url('../images/loginNew/main/img_sec07_1.png') no-repeat; background-size:cover;}
.mainSec07 .motion .item2 { opacity:0; position:absolute; top:2vw; left:2vw; width:40.37vw; height:87.39vw; border-radius:3.43vw; background:url('../images/loginNew/main/img_sec07_3.png') no-repeat; background-size:cover;}
.mainSec07 .motion .blur { position:absolute; bottom:50.1vw; left:6.4vw; width:32vw; height:17.5vw; background:rgba(255,255,255,0.8)}
.mainSec07 .motion .scanM { opacity:0; position:absolute; top:25.98vw; left:4.07vw; width:36.93vw; height:3.61vw; background:url('../images/loginNew/main/img_sec07_2.png') no-repeat; background-size:cover;}

.mainSec08 { overflow:hidden; position:relative; height:126.02vw; background:#fff url('../images/loginNew/main/bg_sec08.png') no-repeat 0 100%; background-size:100%;}
.mainSec08 .motion { position:absolute; top:50vw; width:100%; height:79.91vw;}
.mainSec08 .motion .item1 { opacity:0; position:absolute; top:16.85vw; left:14.81vw; z-index:1; width:71.2vw; height:57.5vw; background:url('../images/loginNew/main/img_sec08_1.png') no-repeat; background-size:cover;}
.mainSec08 .motion .item2 { opacity:0; position:absolute; top:0vw; left:27.56vw; width:46.5vw; height:95.91vw; background:url('../images/loginNew/main/img_sec08_2.png') no-repeat; background-size:cover;}
.mainSec08 .motion .item3 { opacity:0; position:absolute; top:0vw; left:27.56vw; width:46.5vw; height:95.91vw; background:url('../images/loginNew/main/img_sec08_3.png') no-repeat; background-size:cover;}
.mainSec08 .motion .loding-act { visibility:hidden; opacity:0; margin-top:28.57vw; transition:all .3s ease;}
.mainSec08 .motion .loding-act.on { visibility:visible; opacity:1;}
.mainSec08 .motion .loding-act canvas { width:27.78vw !important; height:27.78vw !important; }
.mainSec08 .motion .loding-txt { margin-top:-19vw; font-size:1.57vw;}
.mainSec08 .motion .loding-txt span { font-weight:800; font-size:2.78vw; color:#1c9bd7;}
.mainSec08 .motion .bg { opacity:0; display:block; position:absolute; bottom:-18vw; left:-9vw; width:100%; height:25.74vw;  background:url('../images/loginNew/main/bg_sec06.png') no-repeat; background-size:cover;}


.mainSec09 { overflow:hidden; position:relative;  background:#f5f6f8; background-size:100%;}
.mainSec09 .motion { position:absolute;   height:95.91vw; width:100%; margin-top:8.33vw; }
.mainSec09 .swiper-container { width:100%; height:100%; position: relative; opacity: 0; transition:all .3s ease;}
.mainSec09 .swiper-container .swiper-wrapper {/* position: relative;width:100%; */ display: inline-flex; box-sizing: content-box;}
.mainSec09 .swiper-slide { opacity:1; transition:all .3s ease;  display: flex; height:92.22vw; width:66.67vw;  justify-content: space-between;align-items: center;  }
.mainSec09 .swiper-slide  div{ padding:2.78vw;  display: inline-block;  width:100%; height:100%;}
.mainSec09 .swiper-slide div > a{ padding:9.26vw; background: #fff;  display: inline-block;  width:100%; height:100%; text-align: left;}
.mainSec09 .swiper-slide.swiper-slide-active div > a { box-shadow: 0.93vw 0.93vw 0.74vw rgba(0,0,0,0.1); }
.mainSec09 .swiper-slide div > a .subTitle { font-size: 3.06vw; font-weight:800; color:#0c91e5;}
.mainSec09 .swiper-slide div > a h1{font-family:'NotoSans',sans-serif !important; margin-top:5.56vw; font-size: 5.83vw; color:#333; font-weight: bolder; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word;}
.mainSec09 .swiper-slide div > a .itemText {font-family:'NotoSans',sans-serif !important; margin-top:8.33vw; font-size:3.89vw; color:#333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word; }
.mainSec09 .swiper-slide div > a .itemDate {margin-top:10.96vw; font-size:3.06vw; color:#888; }

.mainSec09 .aniAction.swiper-container { animation:fadeInUp .6s both;}
.mainSec09 .aniAction.swiper-container.wait-animation {animation-play-state: paused;}

/* BOX POS */
.mainSec10 { overflow:hidden; position:relative; z-index:1; height:138.89vw; padding-top:24.16vw; margin-top:-7.5vw; background:#fff; background:url('../images/loginNew/main/bg_sec10.png') no-repeat; background-size:100%; /*animation:sec10Bg 10s linear both infinite alternate;*/}

.mainSec10 .motion {}
.mainSec10 .motion .item1 { position:absolute; bottom:2vh; left:0; width:100%; height:83.2vw;}
.mainSec10 .item1_1 { opacity:1; position:absolute; left:19vw; bottom:0; width:64vw; height:84vw; background:url('../images/loginNew/main/img_sec10_3.png') no-repeat; background-size:cover; z-index: 10;}
.mainSec10 .item1_2 { opacity:0; position:absolute; left:27vw; bottom:-4.8vw; width:48vw; height:84vw; background:url('../images/loginNew/main/img_sec10_5.png') no-repeat; background-size:100%; z-index: 10;}
.mainSec10 .item2 { opacity:0; position:absolute; left:78.96vw; bottom:21vw; width:60.96vw; height:42.06vw; background:url('../images/loginNew/main/img_sec10_card.png') no-repeat; background-size:100%; z-index: 0; }


@keyframes sec10Bg{
	0%{ transform:scale(1) rotateZ(0.000deg)}
	100%{ transform:scale(1.05) rotateZ(0.001deg)}
}

.mainSec10 .aniAction { animation:fadeInUp .6s ease;}
.mainSec10 .aniAction .item1_2 { animation:sec10_item1_2 2.2s ease 1.5s both;}
.mainSec10 .aniAction .item2 {animation:sec10_item2 4s ease both ;}

@keyframes sec10_item2 {
	0%{  opacity:0; left:97.96vw;}
	10%{  opacity:1; left:97.96vw;}
	30%{  opacity:1; left:78.96vw;}
	70%{ opacity:1; left:-42.04vw;}
	100%{ opacity:1; left:-42.04vw;}
}
@keyframes sec10_item1_2 {
	0%{ opacity:0; bottom:-84.8vw;}
	30%{ opacity:1;  bottom:-84.8vw;}
	70%{ opacity:1;  bottom:-4.8vw;}
	100%{ opacity:1;  bottom:-4.8vw;}
}

.mainSec10 .aniAction.wait-animation,
.mainSec10 .aniAction.wait-animation .item1_1,
.mainSec10 .aniAction.wait-animation .item1_2,
.mainSec10 .aniAction.wait-animation .item2 {animation-play-state: paused;}

/* 혁신기업투자 */
.mainSec11 { overflow:hidden; position:relative; z-index:1; height:138.89vw; padding-top:24.16vw; margin-top:-7.5vw; background:#fff; background:url('../images/loginNew/main/img_sec11_1.png') no-repeat 0 95%; background-size:100%; background-color: #fff;}

.mainSec11 .motion {}
.mainSec11 .motion .item1 { position:absolute; bottom:4vh; left:0; width:100%; height:83.2vw;}
.mainSec11 .item1_1 { opacity: 1; position: absolute; left: 15.3vw; bottom: 22vw; width: 16vw; height: 20vw; background: url(../images/loginNew/main/img_sec11_icon01.png) no-repeat; background-size: 90%; }
.mainSec11 .dot1 { opacity: 0; position: absolute; left: 20.3vw; bottom: 43.5vw; width: 4vw; height: 4vw; background: url(../images/loginNew/main/img_sec11_icon_dot.png) no-repeat; background-size: 100%;}
.mainSec11 .arrow1 { opacity: 0; position: absolute; left: 21.5vw; bottom: 48vw; width: 20.96vw; height: 15.06vw; background: url(../images/loginNew/main/img_sec11_icon_arrow.png) no-repeat; background-size: 100%; }
.mainSec11 .item1_2 { opacity: 0; position: absolute; left: 38.4vw; bottom: 34.9vw; width: 16vw; height: 20vw; background: url(../images/loginNew/main/img_sec11_icon02.png) no-repeat; background-size: 90%;}
.mainSec11 .dot2 { opacity: 0; position: absolute; left: 43.3vw; bottom: 57.1vw; width: 4vw; height: 4vw; background: url(../images/loginNew/main/img_sec11_icon_dot.png) no-repeat; background-size: 100%;}
.mainSec11 .arrow2 { opacity: 0; position: absolute; left: 44vw; bottom: 61vw; width: 25.96vw; height: 19.06vw; background: url(../images/loginNew/main/img_sec11_icon_arrow2.png) no-repeat; background-size: 100%; }
.mainSec11 .item1_3 { opacity: 0; position: absolute; left: 65.3vw; bottom: 51vw; width: 16vw; height: 20vw; background: url(../images/loginNew/main/img_sec11_icon03.png) no-repeat; background-size: 90%;}
.mainSec11 .dot3 { opacity:0; position: absolute; left: 68.3vw; bottom: 71.8vw; width: 4vw; height: 4vw; background: url(../images/loginNew/main/img_sec11_icon_dot.png) no-repeat; background-size: 100%;}
.mainSec11 .item_txt {font-size: 3.3vw; font-weight: 800; color: #000; padding-top: 16.3vw; display: block; text-align: center;}

.mainSec11 .aniAction { animation:fadeInUp .6s ease; }
.mainSec11 .aniAction .item1_1 { animation:fadeInUp .6s ease .4s both; }
.mainSec11 .aniAction .dot1 { animation:fadeIn .7s ease .5s both; }
.mainSec11 .aniAction .arrow1 { animation:fadeIn 1.1s ease 1.1s both; }
.mainSec11 .aniAction .item1_2 { animation:fadeInUp .8s ease .7s both; }
.mainSec11 .aniAction .dot2 { animation:fadeIn .9s ease .8s both;}
.mainSec11 .aniAction .arrow2 { animation:fadeIn 1.2s ease 1.7s both;}
.mainSec11 .aniAction .item1_3 { animation:fadeInUp 1.0s ease 1.3s both;}
.mainSec11 .aniAction .dot3 {animation:fadeIn 1.1s ease 1.4s both;}

.mainSec11 .aniAction.wait-animation,
.mainSec11 .aniAction.wait-animation .item1_1, 
.mainSec11 .aniAction.wait-animation .dot1,
.mainSec11 .aniAction.wait-animation .arrow1, 
.mainSec11 .aniAction.wait-animation .item1_2,
.mainSec11 .aniAction.wait-animation .dot2, 
.mainSec11 .aniAction.wait-animation .arrow2, 
.mainSec11 .aniAction.wait-animation .item1_3,
.mainSec11 .aniAction.wait-animation .dot3 {animation-play-state: paused;}

/* 전자어음할인 */
.mainSec12 { overflow:hidden; position:relative; z-index:1; height:138.89vw; padding-top:24.16vw; margin-top:-7.5vw; background:#fff; background:url('../images/loginNew/main/bg_sec12.png') no-repeat ; background-size:100%; background-position: bottom; background-color: #fff;}

.mainSec12 .motion {}
.mainSec12 .motion .item1 { position:absolute; bottom:2vh; left:0; width:100%; height:83.2vw;}
.mainSec12 .item1_1 { opacity:1; position:absolute; left:0; bottom:34%; width:45vw; height:45vw; background:url('../images/loginNew/main/img_sec12_1.png') no-repeat; background-size:cover; z-index: 10;}
.mainSec12 .item1_2 { opacity:1; position:absolute; left:27vw; bottom:50%; width:45vw; height:45vw; background:url('../images/loginNew/main/img_sec12_2.png') no-repeat; background-size:100%; z-index: 10;}
.mainSec12 .item1_3 { opacity:1; position:absolute; left:53vw; bottom:64%; width:45vw; height:45vw; background:url('../images/loginNew/main/img_sec12_3.png') no-repeat; background-size:100%; z-index: 10; }

.mainSec12 .aniAction .item1_1 { animation:fadeInUp .6s ease .4s both;}
.mainSec12 .aniAction .item1_2 { animation:fadeInUp .9s ease .7s both;}
.mainSec12 .aniAction .item1_3 { animation:fadeInUp 1.2s ease 1.1s both;}

.mainSec12 .aniAction.wait-animation .item1_1,
.mainSec12 .aniAction.wait-animation .item1_2,
.mainSec12 .aniAction.wait-animation .item1_3 { animation-play-state: paused; }

.copy { padding:5.56vw 0; border-top:0.28vw solid #dbdbdb; font-size:3.06vw; text-align:center; color:#666;}
.copy .copytxt { margin-bottom: 2.78vw;}
.copy .copyTt { color:#333; font-weight: bold; margin-left: 2.78vw;}
/* //main */

.contentWrap { padding-bottom:22.22vw;}
.contentWrap .visual { overflow:hidden; position:relative; padding:22.22vw 6.94vw 11.11vw;}
.contentWrap .visual:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#3d5199; border-radius:0 0 4.17vw 4.17vw; animation:visualM .8s ease-in-out both}
.contentWrap .visual h1 { opacity:0; position:relative; font-size:6.94vw; line-height:1.2; font-weight:normal; color:#fff;}
.contentWrap .visual .roundInfo {display: inline-block; height: 6.41vw; padding: 0 3vw; line-height: 6.41vw; font-size: 3.5vw; background-color: #000; color: #fff; border-radius: 7.41vw; font-weight: bold; position: relative; margin-top: 1.8vh;}
.contentWrap .visual ul { position:relative; display:flex; margin-top:7.87vw;}
.contentWrap .visual ul li { flex:1 1 auto; opacity:0; color:#fff; align-items:center; text-align:center;}
.contentWrap .visual ul li img { display:block; width:22.22vw; margin:0 auto;}
.contentWrap .visual ul li p { margin-top:2.78vw; font-size:3.7vw;}

a.btnApp { position:fixed; bottom:0%; left:0; width:100%; height:16.67vw; line-height:16.67vw; text-align:center; text-align:center; font-size:5.28vw; color:#fff; background:#3d5199; animation:btnAppM .8s ease-in-out both }
a.btnApp span { animation:fadeIn .5s ease-in-out .5s both}

.contentWrap .secCont { padding:11.11vw 6.94vw 5.56vw;}
.contentWrap .secCont h2 { font-size:5vw; color:#333333; line-height:1.277; font-weight:normal; opacity:0;}
.contentWrap .secCont .text { margin-top:5.56vw; font-size:3.61vw; color:#666666; line-height:1.4166; letter-spacing: -0.2vw; opacity:0;}
.contentWrap .secCont .img { margin-top:6.48vw; border-radius:4.07vw; opacity:0;}
.contentWrap .secCont .img img { width:100%;}

/* click motion */
.clickMotion { overflow:hidden; position:relative;}
.click-in { display:block; position:absolute; background:rgba(0,0,0,0.2); border-radius:100%; transform:scale(0); -webkit-transform:scale(0);}
.click-in.animate {-webkit-animation:btnClick 0.65s linear;animation:btnClick 0.65s linear;}

.progressbar { position:fixed; top:0; left:0; z-index:10; width:100%; height:0.93vw; background:rgba(255,255,255,0.2);}
.progressbar span { position:absolute; top:0; left:0; width:0%; height:100%; background:rgba(0,0,0,0.5); transition:all .3s ease;}

.textCoverShow { overflow:hidden; position:relative;}
.textCoverShow:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);  animation:textCoverShow .6s ease-in-out both;}
.textCoverShow:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);  animation:textCoverShow .6s ease .2s both;}
.textCoverShow.wait-animation:before { animation-play-state: paused;}
.textCoverShow.wait-animation:after { animation-play-state: paused;}

.zoonInOp{ -webkit-animation-name:zoonInOp; animation-name:zoonInOp;}

/* 2022-08-17 fixedBanner배너 css 수정 */
.fixedBanner {position:fixed; right:3.85vh; bottom: 20vh; z-index:3;}
.fixedBanner img {height:calc(100vh/5); max-height:190px;}
.fixedBanner .btnClose { position:absolute; top:0; right:0; width:3.42vh; height:3.42vh; max-width:30px; max-height:30px; font-size:0; background:url('../images/loginNew/main/btn_pop_close.png') no-repeat; background-size:cover;}
.fixedBanner1 {}
.fixedBanner2 {bottom: calc(20vh + 100vh/5 + 10px);}
.fixedBanner3 {bottom: calc(20vh + 100vh/5 + 100vh/5 + 20px);}
/* //2022-08-17 fixedBanner배너 css 수정 */

/* 정책자금(PB) */
.PB #headerWrap { background: rgba(6, 162, 180, 0.9); }
.PB .contentWrap .visual:before { background: #06a2b4;}
.PB a.btnApp { background: #06a2b4;}

/* 근태 (TA) */
.TA #headerWrap { background: rgba(28, 155, 215, 0.9)}
.TA .contentWrap .visual:before { background: #1c9bd7;}
.TA a.btnApp { background: #1c9bd7;}

/* BOX 투데이 (TB) */
.TB #headerWrap { background: rgba(28, 155, 215, 0.9)}
.TB .contentWrap .visual:before { background: #1c9bd7;}
.TB a.btnApp { background: #1c9bd7;}

/* 혁신기업투자(IB) */
.IB #headerWrap .logo { background: url(../images/loginNew/IB/logo.png) no-repeat; background-size: 100%;}
.IB #headerWrap h1, .IB .contentWrap .visual h1 {color: #333;}
.IB #headerWrap .btnMenu span,
.IB #headerWrap .btnMenu span:before,
.IB #headerWrap .btnMenu span:after {background: #333;}
.IB #headerWrap { background: rgba(255, 173, 0, 0.9)}
.IB .contentWrap .visual:before { background: #ffad00;}
.IB .contentWrap .visual h1 { color: #333;}
.IB .contentWrap .visual ul li { color: #000;}
.IB a.btnApp { background: #ffad00; color: #333;}

/* 박스포스(MP) */
.MP #headerWrap { background: rgba(96, 117, 255, 0.9)}
.MP .contentWrap .visual:before { background: #6075ff;}
.MP a.btnApp { background: #6075ff;}

/* 전자어음할인(EB) */
.EB #headerWrap { background: rgba(15, 119, 162, 0.9)}
.EB .contentWrap .visual:before { background: #0f77a2;}
.EB a.btnApp { background: #0f77a2;}

/* 미디어 (PRBox) */
.PR #headerWrap { background: rgba(28, 155, 215, 0.9);}
.PR .contentWrap .visual { margin-bottom: 11.11vw;}
.PR .contentWrap .visual:before { background: #1c9bd7;}
.PR a.btnApp { background: #1c9bd7;}
.PR .contentWrapPR { background: #f5f6f8;}
.PR .inpTxt{ border:0.28vw solid #fff; background: transparent; border-radius: 0.93vw; height:5.56vw; width:76.85vw; padding:3.7vw 4.63vw; outline: 0; color:#fff; font-size:4.44vw;} 
.PR input.inpTxt::placeholder { color:#fff; }
.PR .searchWrap { margin-top: 7.87vw}
.PR .searchWrap .searchBtn {position: absolute;top:0; right:0;width:13.33vw; height:13.33vw; outline: 0;}
.PR .searchWrap .searchBtn img { width:13.33vw; height:13.33vw;}
.PR .contentWrap .secCont { background: #fff; margin:0 6.94vw 8.33vw; padding:9.72vw; font-family:'NotoSans',sans-serif !important;}
.PR .secCont .subTitle { margin-bottom:4.63vw; font-size:3.06vw; color:#0c91e5; font-weight:800;}
.PR .secCont h1 {font-family:'NotoSans',sans-serif !important; margin-bottom:6.48vw; height:20.37vw; font-size:5.56vw; font-weight: bolder; color:#333; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word;}
.PR .secCont .text02 {font-family:'NotoSans',sans-serif !important; margin-bottom:10.19vw; height:13.6vw; font-size:3.61vw; line-height: 1.25;color:#333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap: break-word;}
.PR .secCont .date {font-size:3.06vw; color:#888;}
.PR .searchResult{ margin:0 6.94vw 7.41vw;}
.PR .searchResult .color { color:#0c91e5; font-weight: bold;}
.PR .conDetail .visual{padding:0; height: 16.67vw;}
.PR .secCont02 {padding:0 6.94vw;}
.PR .secCont02 .titWrap {border-botto,}
.PR .secCont02 h1 {font-family:'NotoSans',sans-serif !important; font-size:6.67vw; font-weight: bolder; color:#333; margin-bottom: 4.63vw;}
.PR .secCont02 .subtitle { font-size:3.89vw; color:#0c91e5; font-weight: 800; margin-right:4.17vw;}
.PR .secCont02 .date { font-size:3.89vw; color:#888888;}
.PR .secCont02 .aticle {font-family:'NotoSans',sans-serif !important; overflow:hidden; border-top:0.28vw solid #dbdbdb; border-bottom:0.28vw solid #dbdbdb; padding:11.11vw 4.17vw; margin-top:8.33vw;}
.PR .secCont02 .aticle img{text-align: center; width:90%; margin: 0 auto; display: block;}
.PR .conDetail .visual:before{background:#fff; height: 16.67vw;  animation:visualM02 .0s ease-in-out both}
.PR .secCont02 .source { font-size: 4.17vw; margin-top:10.19vw;}
.PR .secCont02 .source a { color:#0c91e5; font-weight: 800; text-decoration: underline; word-break:break-all; display: block; padding-left: 11vw; padding-top: 5px;}
.PR .secCont02 { animation:fadeInUp .6s ease;}
.PR .secCont02 .aniAction.wait-animation {animation-play-state: paused;}
.PR .btnGrp { padding:5.56vw 0;}
.PR .btnGrp a {display: block; margin: 2.78vw 0; height: 3.5vh; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word;}
.PR .btnGrp span {font-family:'NotoSans',sans-serif !important; font-weight:800; color:#333; margin-right: 5.56vw; }
.PR .btnGrp img { width:4.17vw; margin-right: 2.78vw;}
.secNone { text-align: center; margin-top:18.52vw; margin-bottom: 18.52vw;}
.secNone img { width:11.11vw; height:11.11vw;}
.secNone p { margin-top:3.7vw; font-size:4.17vw; color:#888888;}
.borderRadius{ border-radius: 0 0 4.17vw 4.17vw;}

/* 2026-01-28 전 BOX DB 업그레이드 안내팝업 */
/* layerPopup */
.layerPopWrap { visibility:hidden; display:flex; display:-ms-flex; align-items:center; position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; opacity:0; transition:all .2s ease;}
.layerPopWrap .bg {position:fixed; top:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.layerPopWrap .layerPopCont { display:flex; display:-ms-flex; flex-direction:column; position:relative; width: 300px; max-width: calc(100% - 48px); border-radius: 16px; margin:0 auto; opacity:0; background:#fff; animation:fadeInUp .4s ease-in-out forwards; }
.layerPopWrap .layerPopCont .contBox { overflow:hidden; overflow-y:auto; box-sizing: border-box;}
.layerPopWrap .layerPopCont > .btnPopClose { position:absolute; top: 16px; right: 16px; width: 24px; height: 24px; font-size:0; background:url('../images/common/header/ic_48_close.png') no-repeat center center; background-size: 24px;}
.layerPopWrap.on { visibility:visible; opacity:1; }
.layerPopWrap.on .layerPopCont{animation:fadeInUp .4s ease-in-out forwards;}
.layerPopWrap .layerPopCont.dbInfo {border-radius: 16px; overflow: hidden; }
.layerPopWrap .layerPopCont.dbInfo .contBox {padding: 0;} 
.layerPopWrap .layerPopCont.dbInfo .imgWrap {width: 100%; border-radius: 16px 16px 0 0; overflow:hidden;}
.layerPopWrap .layerPopCont.dbInfo .imgWrap img {width: 100%;}
.layerPopWrap .popFooter {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 24px 20px; box-sizing: border-box;}
.layerPopWrap .popFooter .formbox {margin: 0 !important;}
.layerPopWrap .popFooter .inpbox input {position: absolute; opacity: 0; width: 0; height: 0; margin: 0;}
.layerPopWrap .popFooter .lableTxt {font-size: 14px; line-height: 18px; font-weight: bold; color: #30323b; padding-left: 24px; margin: 0 !important;}
.layerPopWrap .popFooter .checkbox {position:relative;}
.layerPopWrap .popFooter .textCloseBtn {font-size: 14px; line-height: 18px; font-weight: bold; color: #30323b;}
.layerPopWrap .popFooter .checkbox {}
/* small 20px */
.ids .checkbox.small span {line-height: 20px;}
.ids .checkbox.small span + .checkbox.small span {margin-left: 8px;}
.ids .checkbox.small label { position:relative; display:inline-block; padding-left: 28px; line-height: 20px; cursor: pointer;}
.ids .checkbox.small label:before { content:''; display:block; position:absolute; top:0; left:0; width:20px; height:20px; background:url('../images/loginNew/main/ic_40_checkbox.png') no-repeat center; background-size: 100%; transition:all .3s ease;}
.ids .checkbox.small input:checked + label:before { background:url('../images/loginNew/main/ic_40_checkbox_on.png') no-repeat center; background-size: 100%;}
.ids .checkbox.small input:disabled + label:before,
.ids .checkbox.small input[readonly] + label:before { background:url('../images/loginNew/main/ic_40_checkbox_disabled.png') no-repeat center; background-size: 100%;}
.ids .checkbox.small input:disabled:checked + label:before,
.ids .checkbox.small input[readonly]:checked + label:before { background:url('../images/loginNew/main/ic_40_checkbox_disabled_on.png') no-repeat center; background-size: 100%;}
/* //2026-01-28 전 BOX DB 업그레이드 안내팝업 */


/* animation */
@keyframes textCoverShow {
	0% { left:0;}
	100% { left:100%;}
}

@keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}
@-webkit-keyframes btnClick{
	0% { transform:scale(0); -webkit-transform:scale(0); opacity:1;}
	100% { transform:scale(2.5); -webkit-transform:scale(2.5); opacity:0;}
}


@keyframes btnAppM{
	0% { transform:translateY(50%); border-radius:50%;}
	100% { transform:translateY(0%); border-radius:0%;}
}

@keyframes visualM{
	0% { height:37%; border-radius:0 0 90% 90%;}
	100% { height:100%; border-radius:0 0 4.17vw 4.17vw;}
}

@keyframes visualM02{
	0% { height:37%; border-radius:0 0 90% 90%;}
	100% { height:100%; border-radius:0 0 0 0;}
}

@keyframes menuM{
	0%,70% { width:100%;}
	100% { width:50%;}
}

@-webkit-keyframes zoonInOp {
  0% {
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

@keyframes zoonInOp {
 0% {
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8);
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}