@charset "utf-8";

[class^="scene-"].active .main_txt{visibility:visible !important;}
[class^="scene-"].active .sub_txt{visibility:visible !important;}
[class^="scene-"].active .mobile_wrap{visibility:visible !important;}
[class^="scene-"].active .vi_wrap{visibility:visible !important;}
[class^="scene-"].active .cont_wrap .info_wrap{visibility:visible !important;}

.anchur { position:absolute; top:-50px; }

@media screen and (min-width:901px) {
[class^="scene-"] { position:relative; width:100%; }
[class^="scene-"] .inner { z-index:1; }
[class^="scene-"] .cont_wrap { overflow:hidden; }
[class^="scene-"] .main_txt { position: relative; }
[class^="scene-"] .sub_txt { position: relative; }
[class^="scene-"] .mobile_wrap { position: relative; }
[class^="scene-"] .vi_wrap { position: relative; }
[class^="scene-"] [class^="status_wrap-"] { display: inline-block;}

.scene-1 { background:url(/theme/basic/img/sub/back03.jpg) no-repeat center / cover; }
.scene-1 .cont_wrap{ margin:auto; }
.scene-1 .main_txt { padding:0 0 100px; text-align:center; height:100vh; }
.scene-1 .main_txt > div { position:absolute; top:50%; left:100px; transform:translateY(-50%); text-align:left; width:50%; }
.scene-1 .main_txt > div > span { display:inline-block; height:25px; line-height:25px; padding:0 10px; border-radius:3px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#012169; margin:0 0 15px; }
.scene-1 .main_txt > div h2 { font-family:'Noto Sans KR'; font-size:48px; line-height:60px; color:#ccc; margin:0px; }
.scene-1 .main_txt > div h2 font { color:#09F; }
.scene-1 .main_txt > div h2 span { display:block; }
.scene-1 .main_txt > div p { font-family:'Noto Sans KR'; font-size:18px; line-height:27px; color:#fff; padding:20px 0 30px; }
.scene-1 .main_txt > div a { display:inline-block; width:200px; height:50px; line-height:48px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; border:1px solid #fff; text-align:center; }
.scene-1.active .main_txt > div h2 span:first-child { animation: transit-fadeInRight 1s 1 alternate; }
.scene-1.active .main_txt > div h2 span:nth-child(2) { animation: transit-fadeInLeft 1s 1 alternate; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.scene-1.active .main_txt > div h2 span:last-child { animation: transit-fadeInRight 1s 1 alternate; -webkit-transition-delay: .7s; -o-transition-delay: .9s; transition-delay: .9s; }

.scene-2 { padding:100px 0; }
.scene-2 .cont_wrap{ max-width:1200px; margin:auto; }
.scene-2 .main_txt { text-align:left; }
.scene-2 .main_txt > div h2 { font-family:'GS_M'; font-size:42px; color:#333; margin:0px; }
.scene-2 .main_txt > div h2 font { color:#09F; }
.scene-2 .main_txt > div p { font-family:'Noto Sans KR'; font-size:18px; line-height:27px; color:#666; padding:20px 0 30px; }
.scene-2 .main_txt > div a { display:inline-block; width:200px; height:50px; line-height:48px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#666; border:1px solid #ddd; text-align:center; }

.scene-3 { padding:100px 0; background:url(/theme/basic/img/sub/midback.jpg) no-repeat center / cover; }
.scene-3 .cont_wrap{ position:relative; max-width:1200px; margin:auto; }
.scene-3 .sub_txt { padding:50px; text-align:left; }
.scene-3 .sub_txt > div:first-child {  }
.scene-3 .sub_txt > div:first-child h6 { font-family:'GS_M'; font-size:42px; color:#012169; }
.scene-3 .sub_txt > div:first-child p { font-size:15px; font-family:'Noto Sans KR'; color:#666; }
.scene-3 .sub_txt > div:first-child p:after {display:block;visibility:visible; width:30px; height:1px; background-color:#666; clear:both;content:""; margin:20px 0; }
.scene-3 .sub_txt > div:last-child { box-sizing:border-box; }
.scene-3 .sub_txt > div:last-child h3 { display:block; font-family:'Noto Sans KR'; font-size:21px; line-height:32px; color:#333; }

.scene-4 { padding:100px 0; }
.scene-4 .cont_wrap{ position:relative; max-width:1200px; margin:auto; }
.scene-4 .main_txt { padding:0; text-align:center; }
.scene-4 .main_txt > div h2 { font-family:'GS_M'; font-size:36px; color:#222; }
.scene-4 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#666; }
.scene-4 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#F90; }
.scene-4 .sub_txt { padding:50px 0 0; text-align:center; }
.scene-4 .sub_txt ul { display:grid; grid-template-columns:repeat(2, 1fr); column-gap:10px; row-gap:10px; padding:10px; }
.scene-4 .sub_txt ul li { position:relative; padding:20px 0 20px 50px; display:block; font-size:15px; font-family:'Noto Sans KR'; color:#666; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:10px; text-align:left; }
.scene-4 .sub_txt ul li:after { visibility:visible; content:""; display:block; width:20px; height:20px; background:url(/theme/basic/img/check.png) no-repeat center / 100% auto; position:absolute; top:20px; left:20px; }
.scene-4 .sub_txt ul li img { width:40px; margin:0 0 15px; }

.scene-5 { padding:100px 0; background-color:#f6f6f6; }
.scene-5 .cont_wrap{ position:relative; max-width:1200px; margin:auto; }
.scene-5 .main_txt { padding:0; text-align:center; }
.scene-5 .main_txt > div h2 { font-family:'GS_M'; font-size:36px; color:#222; }
.scene-5 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#666; }
.scene-5 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#F90; }

.scene-6 { padding:200px 0; background:url(/theme/basic/img/sub/backbtm.jpg) no-repeat center right / auto 100%; }
.scene-6 .cont_wrap{ position:relative; max-width:1200px; margin:auto; }
.scene-6 .main_txt { padding:0; text-align:left; }
.scene-6 .main_txt > div h2 { font-family:'GS_M'; font-size:36px; color:#222; }
.scene-6 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#666; margin:0 0 20px; }
.scene-6 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#012169; text-align:center; }
}


@media screen and (max-width:900px) {
[class^="scene-"] { position:relative; width:100%; }
[class^="scene-"] .inner { position:relative; z-index:1; }
[class^="scene-"] .cont_wrap { overflow:hidden; }
[class^="scene-"] .main_txt { position: relative; }
[class^="scene-"] .sub_txt { position: relative; }
[class^="scene-"] .mobile_wrap { position: relative; }
[class^="scene-"] .vi_wrap { position: relative; }
[class^="scene-"] [class^="status_wrap-"] { display: inline-block;}	

.scene-1 { background:url(/theme/basic/img/sub/back03.jpg) no-repeat center / cover; }
.scene-1 .cont_wrap{ margin:auto; }
.scene-1 .main_txt { padding:0; text-align:center; height:100vh; }
.scene-1 .main_txt > div { position:absolute; top:50%; left:20px; transform:translateY(-50%); text-align:left; }
.scene-1 .main_txt > div > span { display:inline-block; height:25px; line-height:25px; padding:0 10px; border-radius:3px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#012169; margin:0 0 15px; }
.scene-1 .main_txt > div h2 { font-family:'Noto Sans KR'; font-size:27px; line-height:40px; color:#ccc; margin:0px; }
.scene-1 .main_txt > div h2 font { color:#09F; }
.scene-1 .main_txt > div h2 span { display:block; }
.scene-1 .main_txt > div p { font-family:'Noto Sans KR'; font-size:18px; line-height:27px; color:#fff; padding:20px 0 30px; }
.scene-1 .main_txt > div a { display:inline-block; width:200px; height:50px; line-height:48px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; border:1px solid #fff; text-align:center; }
.scene-1.active .main_txt > div h2 span:first-child { animation: transit-fadeInRight 1s 1 alternate; }
.scene-1.active .main_txt > div h2 span:nth-child(2) { animation: transit-fadeInLeft 1s 1 alternate; -webkit-transition-delay: .3s; -o-transition-delay: .3s; transition-delay: .3s; }
.scene-1.active .main_txt > div h2 span:last-child { animation: transit-fadeInRight 1s 1 alternate; -webkit-transition-delay: .7s; -o-transition-delay: .9s; transition-delay: .9s; }

.scene-2 { padding:50px 20px; }
.scene-2 .cont_wrap{ margin:auto; }
.scene-2 .main_txt { text-align:center; }
.scene-2 .main_txt > div h2 { font-family:'GS_M'; font-size:27px; color:#333; margin:0px; }
.scene-2 .main_txt > div h2 font { color:#09F; }
.scene-2 .main_txt > div p { font-family:'Noto Sans KR'; font-size:13px; line-height:21px; color:#666; padding:20px 0 30px; word-break:keep-all; }
.scene-2 .main_txt > div a { display:inline-block; width:calc(50% - 4px); height:50px; line-height:48px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#666; border:1px solid #ddd; text-align:center; }

.scene-3 { padding:50px 20px; background:url(/theme/basic/img/sub/midback.jpg) no-repeat center / cover; }
.scene-3 .cont_wrap{ position:relative; max-width:1200px; margin:auto; }
.scene-3 .sub_txt { padding:50px; text-align:center; }
.scene-3 .sub_txt > div:first-child {  }
.scene-3 .sub_txt > div:first-child h6 { font-family:'GS_M'; font-size:27px; color:#fff; }
.scene-3 .sub_txt > div:first-child p { font-size:15px; font-family:'Noto Sans KR'; color:#fff; }
.scene-3 .sub_txt > div:first-child p:after {display:block;visibility:visible; width:30px; height:1px; background-color:#fff; clear:both;content:""; margin:20px auto; }
.scene-3 .sub_txt > div:last-child { box-sizing:border-box; }
.scene-3 .sub_txt > div:last-child h3 { display:block; font-family:'Noto Sans KR'; font-size:18px; line-height:32px; color:#fff; }

.scene-4 { padding:50px 20px; }
.scene-4 .cont_wrap{ position:relative; margin:auto; }
.scene-4 .main_txt { padding:0; text-align:center; }
.scene-4 .main_txt > div h2 { font-family:'GS_M'; font-size:36px; color:#222; }
.scene-4 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#666; }
.scene-4 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#F90; }
.scene-4 .sub_txt { padding:20px 0 0; text-align:center; }
.scene-4 .sub_txt ul { display:grid; grid-template-columns:repeat(1, 1fr); column-gap:10px; row-gap:10px; padding:10px; }
.scene-4 .sub_txt ul li { position:relative; padding:20px 0 20px 50px; display:block; font-size:15px; font-family:'Noto Sans KR'; color:#666; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:10px; text-align:left; }
.scene-4 .sub_txt ul li:after { visibility:visible; content:""; display:block; width:20px; height:20px; background:url(/theme/basic/img/check.png) no-repeat center / 100% auto; position:absolute; top:20px; left:20px; }
.scene-4 .sub_txt ul li img { width:40px; margin:0 0 15px; }

.scene-5 { padding:50px 20px; background-color:#f6f6f6; }
.scene-5 .cont_wrap{ position:relative; margin:auto; }
.scene-5 .main_txt { padding:0; text-align:center; }
.scene-5 .main_txt > div h2 { font-family:'GS_M'; font-size:27px; color:#222; }
.scene-5 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#666; }
.scene-5 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#F90; }

.scene-6 { padding:100px 20px; background:url(/theme/basic/img/sub/mbackbtm.jpg) no-repeat center right / auto 100%; }
.scene-6 .cont_wrap{ position:relative; margin:auto; }
.scene-6 .main_txt { padding:0; text-align:left; }
.scene-6 .main_txt > div h2 { font-family:'GS_M'; font-size:27px; color:#fff; }
.scene-6 .main_txt > div p { font-family:'Noto Sans KR'; font-size:15px; color:#fff; margin:0 0 20px; }
.scene-6 .main_txt > div a { display:inline-block; width:150px; height:40px; line-height:40px; border-radius:5px; font-size:15px; font-family:'Noto Sans KR'; color:#fff; background-color:#012169; text-align:center; }
}


#scrollDowns {
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 40px;
  margin-left: -75px;
  width: 150px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
}
#scrollDowns .icon {
  position: relative;
  border: 2px #fff solid;
  width: 20px;
  height: 30px;
  border-radius: 10px;
}
#scrollDowns .icon::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #fff;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-animation: scrollDownPointer 1.5s infinite;
  animation: scrollDownPointer 1.5s infinite;
}
#scrollDowns span {
  display: block;
  margin-top: 15px;
}