@CHARSET "UTF-8";
@import url('default.css');
@import url('animate.css');
@import url('common.css');

html {-ms-touch-action: none;}
body {width:100%; height:100%; -webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased;}

footer {width:100%; padding:13px; font-family:'Roboto', sans-serif; box-sizing:border-box; text-align:center; font-size:12px; color:#aaa;}
#section4 {overflow-y:auto;}

.logo {display:inline-block; padding:8px 0 0 40px; font-size:37px; letter-spacing:0; line-height:26px; background:url(/chz/logo.svg) 0 0 no-repeat;}

.btn {transition: all 0.3s ease; text-decoration: none !important; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: none; box-shadow: none !important;}
.btn:hover {filter: brightness(95%);}
.contCell {display:table-cell; vertical-align:middle;}

.loading {position:fixed; top:0; left:0; width:100%; height:100%; background:#facb00; z-index:100; display:table;}
.loading .load {width:100%; text-align:center;}
.loading .load span {display:inline-block; position:relative; padding:10px; animation: spin 2.2s infinite ease-in;}
.loading .load span:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid #facb00; border-top-color:#333; border-radius:50%; box-sizing:border-box; animation: roll 2s infinite;}

.mainCont {position:relative; max-width:1130px; margin:0 auto; height:calc(100% - 105px);}
.mainCont:after {content:''; display:block; clear:both;}
.mainCont .ln { position:absolute; top:0; left:50%; width:1px; opacity:0; background:#fff; animation: lineup 1.5s 1s forwards;}
.mainCont .cont {position:absolute; top:32%; opacity:0; width:0%; text-align:center; overflow:hidden;}
.mainCont .cont .btn {border-radius:50%; overflow:hidden;}
.mainCont .cont .btn a {display:inline-block; position:relative; width:70px; height:70px; line-height:72px; color:#fff; border-radius:50%; background:#000; box-sizing:border-box; animation: btn 2.2s infinite ease-in; font-family: 'Aleo', 'Noto Sans KR', sans-serif, dotum, gulim;}
.mainCont .cont .btn a:after {content:''; display:block; position:absolute; top:0; width:100%; height:100%; border:2px solid #facb00; border-top-color:#fff; border-radius:50%; box-sizing:border-box; animation: roll 2s infinite;}
.mainCont .cont .btn a:before {content:''; display:block; position:absolute; top:0; left:0; width:20px; height:100%; filter: blur(4px); background:rgba(255,255,255,0.3); box-sizing:border-box; animation: glass 2s infinite ease-out;}
.mainCont .cont .btn.stop a {animation-play-state:paused;}
.mainCont .cont .btn.stop a:after {animation-duration:1s;}
.mainCont .cont .btn.stop a:before {animation-duration:1s;}
.mainCont .contFl {right:50%; animation: slide 1s 2s forwards ease-out;}
.mainCont .contFr {left:50%; animation: slide 1s 3s forwards ease-out;}
.mainCont .cont h3 {font-size:40px; margin-bottom:5px;}
.mainCont .cont h3 span {font-size:60px; font-weight:200; display:block; margin-bottom:5px; line-height:100%;}

.imgCont {margin:0 auto; height:calc(100% - 270px); text-align:center; display:table;}

.controller {position:fixed; top:50%; right:3%; z-index:10; margin-top:-70px; padding:5px 7px; border:1px solid #e7e7e7; border-radius:50px;}
.controller a {display:block; width:15px; height:15px; margin:10px auto; border:1px solid #FACB00; border-radius:50%; overflow:hidden; text-indent:-999em; background:rgba(255,255,255,.5);}
.controller a.on {background:rgba(0,0,0,1);}
.section {position:relative;}
.section h2 {padding:35px 0 30px; width:100%; text-align:center; box-sizing:border-box; font-family: 'Aleo', 'Noto Sans KR', sans-serif, dotum, gulim; font-size:35px; font-weight:600;}
.section h2 span {display:inline-block;}
.bgGy {background-color:#f3f3f3}
.bgCy {background-color:#FACB00;}

.section .subtxt {text-align:center;}
.section .subtxt p {font-size:20px;}

.section.action .txtCont span {animation: bounce .3s .5s ease infinite alternate;}
.txtCont {position:relative; text-align:center; margin-top:17%; padding-bottom:13%;}
.txtCont span {
  position: relative;
  top: 20px;
  display: inline-block;
  font-family: 'Poor Story', 'Noto Sans KR', sans-serif, dotum, gulim;
  font-weight:700;
  font-size: 65px;
  color: #FFF;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);
}
.txtCont span.mr {margin-right:1%;}
.section.action .txtCont span:nth-child(2) { animation-delay: .6s; }
.section.action .txtCont span:nth-child(3) { animation-delay: .7s; }
.section.action .txtCont span:nth-child(4) { animation-delay: .8s; }
.section.action .txtCont span:nth-child(5) { animation-delay: .9s; }
.section.action .txtCont span:nth-child(6) { animation-delay: 1s; }
.section.action .txtCont span:nth-child(7) { animation-delay: 1.1s; }
.section.action .txtCont span:nth-child(8) { animation-delay: 1.2s; }
.section.action .txtCont span:nth-child(9) { animation-delay: 1.3s; }
.section.action .txtCont span:nth-child(10) { animation-delay: 1.4s; }
.section.action .txtCont span:nth-child(11) { animation-delay: 1.5s; }
.section.action .txtCont span:nth-child(12) { animation-delay: 1.6s; }
.section.action .txtCont span:nth-child(13) { animation-delay: 1.7s; }
.section.action .txtCont span:nth-child(14) { animation-delay: 1.8s; }
.txtCont p.wow {position:absolute; bottom:0px; width:100%;  
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .4);}
.txtCont p.wow i {color:#fff;}
@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 50px 25px rgba(0, 0, 0, .2);
  }
}

.formCont {max-width:800px; margin:0 auto;}
.formCont .rdobox {margin:0 5px;}
.formCont .rdobox label {position:relative; display:inline-block; font-size:16px; margin-right:20px;}
.formCont .rdobox p {position:absolute;}
.formCont .txa {height:150px;}
.formCont .txa textarea {height:100%;}
.formCont .scr {height:80px; overflow-y:auto; font-size:13px; box-sizing: border-box;  border:2px solid #ccc; outline:none; padding:10px; border-radius: 5px; transition: all .3s; margin:0 0 5px;}
.formCont .scr strong {display:block; margin:0 0 5px;}
.formCont .scr strong:last-child {margin-top:15px}
.formCont .agreebox.on .scr {border-color:#FACB00;}

@keyframes lineup {
  from {
     height:0;opacity:0;
  }
   50% {
   transform: rotate(0deg);  
  }
  to {
    height:100%;
    transform: rotate(20deg);  opacity:1;
  }
}

@keyframes btn {
  from {
    transform: scale(0.9);
  }
   50% {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}

@keyframes glass {
  from {
     transform: rotate(20deg) translate(0, -10px);  

     opacity:0;
  }
   50% {
     opacity:1;
  }
  to {
     transform: rotate(20deg) translate(50px, -10px);  

     opacity:0;
  }
}


@keyframes roll {
  from {
     transform: rotate(0);
  }
  to {
     transform:rotate(360deg);
  }
}

@keyframes slide {
  from {
     width:20%;
     opacity:0;
  }
  to {
    width:50%;
    opacity:1;
  }
}

@keyframes spin {

  40% {
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -10deg);
    -webkit-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
  }

  60% {
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);

  }

  80% {
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -ms-transform: perspective(400px);
    -webkit-transform: perspective(400px);
  }
}

@media all and (max-width:640px){
.formCont, .imgCont {margin:0 15px;}
.txtCont {margin-top:38%; padding-bottom:30%;}
.txtCont span {font-size:40px;}
.formCont .txa {height:100px}
.formCont .scr {height:65px; line-height:17px;}
}
@media all and (max-width:480px){

.logo {padding:4px 0 0 24px; font-size:27px; line-height:16px;}
.section h2 {font-size:25px; letter-spacing:-1px;}
.section .subtxt {margin:0 15px;}
.section .subtxt p {font-size:15px;}

.formCont .rdotxt label {font-size:14px; margin:0 0 10px 5px;}
.formCont .agreebox {margin:10px 0;}

.mainCont .contFl {top:15%;}
.mainCont .contFr {top:45%;}
.mainCont .cont h3 {font-size:25px;}
.mainCont .cont h3 span {font-size:40px;}
.mainCont .cont .btn a {width:60px; height:60px; line-height:62px;}

.txtCont span {font-size:28px;}
.fa-4x {font-size:3em;}

}
@media all and (max-width:360px){

}