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

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


footer {width:100%; position:absolute; bottom:0px;; left:0; padding:13px; box-sizing:border-box; opacity:0.8; background:#fff; text-align:center; font-size:12px; color:#aaa;}
footer span {display:inline-block; margin:0 3px; vertical-align:middle;}
.gohome {position:fixed; right:3%; bottom:3%; width:50px; height:50px; border-radius:50%; overflow:hidden; background:#fbb634; z-index:100;}
.gohome a {display:block; width:100%; height:100%; text-align:center; box-sizing:border-box; padding-top:11px;}
.gohome a i {color:#fff; font-size:2em;  opacity:.8;}
.contCell {display:table-cell; vertical-align:middle;}
.intro {position:fixed; width:100%; height:100%; text-align:center; background-color:#fbb634; z-index:150; display:table; cursor:pointer;}
.intro .title {display:block; font-family:'Roboto'; font-weight:400; font-size:40px; color:#fff; padding-top:30px;}
.intro .title span {display:block; font-family:'Roboto'; font-weight:400; font-size:25px; color:#fff;}
.intro .stepCont {display:block; margin:20px 10px 10px;}
.intro .subtxt {display:block;  font-family:'Roboto'; font-weight:400; font-size:20px; color:#fff; margin-bottom:5px;}
.intro .btnStart {display:block; margin-top:10px; font-family:'Roboto'; font-weight:400; font-size:20px; color:#fff; -ms-animation: tada 1s infinite linear; -webkit-animation: tada 1s infinite linear;}
@keyframes tada {
  from {
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -ms-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
  }
}
.section h2 {position:absolute; top:0; left:0; color:#000; padding:10px; width:100%; box-sizing:border-box; opacity:0.8; background:#f8f8f8; font-size:15px; z-index:5;}

#goSlide {width:90%; padding-bottom:70px; margin:0 auto; cursor:grab;}
#goSlide>ul {min-height:250px; zoom:1;}
#goSlide>ul:after {content:''; display:block; clear:both;}
#goSlide>ul>li {*zoom:1;}
#goSlide>ul>li:after {content:''; display:block; clear:both;}
#goSlide .thumImg {float:left; width:40%;  margin:15px 0 0 5%; -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:    0px 0px 9px 0px rgba(0, 0, 0, 0.2);
box-shadow:         0px 0px 9px 0px rgba(0, 0, 0, 0.2);}
#goSlide .thumImg img {width:100%;}
#goSlide .contBox {float:right; width:50%;}
#goSlide .contBox dt {float:left; width:80px; margin:5px 0;}
#goSlide .contBox dd {float:left; width:80%; margin:5px 0;}
#goSlide .contBox .tit {font-size:15px; margin:5px 0px 7px;}
#goSlide .contBox .blue {font-size:12px; color:#375579;}
#goSlide .swiper-pagination {}
#goSlide .swiper-pagination-bullet-active {background:#555;}

#goCube {position:absolute; left:50%; top:50%; width:640px; height:640px; margin:-320px 0 0 -320px;}
#goCube .cubeCont {}
.swiper-cube-shadow {
  -webkit-filter: initial !important;
  filter: initial !important;
  background: none !important;
}
.swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}
.swiper-cube {bottom:6%; width:100%;}
.swiper-cube .swiper-pagination-bullet {border-radius:0; height:3px;}
.swiper-cube .swiper-pagination-bullet-active {background:#fbb634;}
#goCube .cubeCont .cubeList {background:#fff}
#goCube .cubeCont .chzInfo {padding:21px 15px 0; text-align:right;}
#goCube .cubeCont .chzInfo:after {content:''; display:block; clear:both;}
#goCube .cubeCont .chzInfo .tit {float:left; width:50%; font-size:22px; text-align:left; color:#111; letter-spacing: -1px;}
#goCube .cubeCont .chzInfo .cont {float:right; width:50%;}
#goCube .cubeCont .chzInfo .urltxt a {display:block; color:#4f7dff; font-family:'Roboto', 'Noto Sans KR', sans-serif, dotum, gulim; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#goCube .cubeCont .chzInfo .opendate {color:#999; font-family:'Roboto', 'Noto Sans KR', sans-serif, dotum, gulim;}

.bggray {background:#e8e8e8 !important;}

.sectionTop .fp-tableCell {vertical-align:top;}
.listCont {margin:40px auto 0; padding-bottom:40px;}

.cards { background:#f6f6f6;}
.cards:after {content:''; display:block; clear:both;}
.cards li {padding:5px; float:left; width:33.3%; box-sizing:border-box;}
.cards li:nth-child(odd) {background:#fff;}
.cardsOdd {background:#fff;}
.cardsOdd li:nth-child(odd) {background:#f6f6f6;}
.fp-scrollable {overflow:hidden;}

.fp-controlArrow.fp-prev {left:20px; width:25px; height:50px; margin-top:-25px; border:0; background:url(/images/btn_prev.png) 0 0 no-repeat;}
.fp-controlArrow.fp-next {right:20px; width:25px; height:50px; margin-top:-25px; border:0; background:url(/images/btn_next.png) 0 0 no-repeat;}

.myprofile {width:90%; margin:0 auto; *zoom:1;}
.myprofile:after {content:''; display:block; clear:both;}
.myprofile dt {float:left; text-align:right; width:18%; margin-right:2%; clear:both; font-size:14px; margin-bottom:15px;}
.myprofile dd {float:left; width:80%; margin-bottom:15px;}
.myprofile dd p {margin-bottom:10px;}
.myprofile dd p b {display:block; font-size:14px; margin-bottom:3px; color:#86bcb8;}
.myprofile dd p b.yellow {color:#FACB00;}
.myMove {position:absolute; top:45%; right:13%; font-family:'Roboto'; font-weight:300; font-size:45px; text-align:center; -ms-animation: spin 3s infinite linear; -webkit-animation: spin 3s infinite linear;}

@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:700px){
#goSlide .thumImg {width:80%; float:none; margin:3% auto;}
#goSlide .contBox {width:80%; float:none; margin:3% auto;}

#goSlide .contBox dt {width:25%;}
#goSlide .contBox dd {width:75%; min-height:25px;}

#goCube {width:460px; height:500px; margin:-250px 0 0 -230px;}
#goCube .cubeCont .chzInfo {padding:32px 15px 0}

.cards li {width:50%; background:#fff; border-bottom:1px solid #f6f6f6;}
.cards li:nth-child(odd) {border-right:1px solid #f6f6f6;}

.myprofile {padding:25% 0 10%;}
.myprofile dt {float:none; width:80%; text-align:left; margin-bottom:0;}
.myprofile dd {float:none; width:90%;}
.myprofile dd p b {margin-bottom:0;}
.myMove {top:6%; right:0; width:100%;}
footer {font-size:11px;}
.gohome {width:40px; height:40px;}
.gohome a {padding-top:10px;}
.gohome a i {font-size:1.5em;}
}

@media all and (max-width:480px){
.section h2 {letter-spacing:-1px;}
#fp-nav.right {right:7px !important;}
#goCube {width:300px; height:400px; margin:-200px 0 0 -150px;}
.swiper-cube-shadow:before {-webkit-filter: blur(40px);filter: blur(40px);opacity:0.7;}
#goCube .cubeCont .chzInfo .tit {float:none; width:100%; font-size:20px; margin-bottom:15px;}
#goCube .cubeCont .chzInfo .cont {float:none; width:100%;}
}