@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:100%; font-family:Orbitron; font-size:12px; }
body::-webkit-scrollbar {display: none;}
body::-ms-scrollbar {display: none;}



/*배경*/
.bg {width: 100%; height: 100%; position: fixed; top: 0px;}
.bg article {width: 14.3%; height: 100%; position: relative; float: left; border-right: 0.2px solid #ccc;}

/*wrap 로고*/
.wrap {position: fixed; top: 10px; right: 40px; width: 80px; height: 70px; z-index: 10; cursor: pointer; }
.wrap a {display: block; font: 30px Kaushan script; color: #000; -webkit-transition: all 0.9s; transition: all 0.9s;}
.wrap:hover a {-webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
.wrap p {font: 15px Arial; color: #555;}

/*네비*/
#nav {position: fixed; width:200px; height: 450px; top:20%; right: 2%; z-index: 10; }
#nav li { top: 0px; width: 200px;}

#nav li a { top: 190px; width: 200px; height: 45px; font: bold  30px Arial; float: left; text-align: left; margin-bottom: 20px; display: block;}
#nav li p {position: relative; top: 43px; width: 0px; height: 3px; background: #4027dd; opacity: 1; margin-bottom: 90px; transition: all 1s;}
#nav li:hover p {background: #ed4283; width: 250px; opacity: 1;}
#nav li.on a {color: #ed4283;}

p.info {position:fixed; width: 200px; height: 60px; bottom: 13%; right: 2%; font: 12px/1.5 Arial; color: #777; letter-spacing: 1px;}
span.inf {position: fixed; width: 50px; height: 3px; bottom: 22%; right: 11%; background: #000;}

#box {display: none;}
.btn {display:none;}



.box2 {display: none;}
.box3 {display: none;}
.box4 {display: none;}
#contents {position: relative; width: 100%; height: 100%;}

/*box1*/
.box1  {position: relative; left: 14.3%; width: 71.5%; height:100%; text-align: left; }
.box1 p { position: relative; top: 20%; left: 0%; font: 50px Nanumgothic; color: #333; height: 100%; padding-bottom: 10px; letter-spacing: 1px;}
.box1 h1 { position: relative; top: 40%; left: 0%; font: 50px Arial; color: #777; height: 100%; margin-bottom: 10px;}
.box1 p.box {width: 30px; height: 80px; background: #fff;}






/*box2*/

.box2 { position: relative; top: 70px; left: 14.3%; width: 71.5%; height:100%; text-align: left; }
.box2 p {font: 70px Kaushan script; color: #333; }
.box2 p strong {font: bold 40px Nanumgothic; }
.box2 .txt {font: 14px Arial; color: #000;  top: 15px; left: 0px; letter-spacing: 1px; width: 15%; height: 10%;}
.box2 .slo {position: absolute; font-size: 40px; color: #000; top: 290px; left: 20%; width: 50%; height: 10%;}
.box2 section {position: relative; top: 70px; margin-bottom: 100px;}
.box2 footer {margin-top: 90px; top: -50px; width: 100%; height: 30%; }
.box2 h1 {font: 25px Nanumgothic; color: #000;}
.box2 .conbox1 {position: relative; left: 20%; width: 60%;}
.box2 .conbox2 {position: relative; left: 20%; width: 60%;}
.box2 .conbox3 {position: relative; left: 20%; width: 60%;}
.box2 .con1 h2 { font: 15px Nanumgothic; color: #000; line-height: 180%;}
.box2 .con1 h2 em { color: #555;  line-height: 180%;}

.box2 .con2 {margin-bottom: 180px; }
.box2 .con2 h2 {font: 18px Arial; color: #000; margin-bottom: 100px;}
.box2 .con2 p { width: 50px; height: 50px; display: inline-block; margin-right: 70px; }

.box2 .con2 span {position: relative; top: -26px; width: 50px; height: 50px;  display: inline-block; margin-right: 50px; opacity: 0; transform: scale(1.6); transition: all 0.4s; }

.box2 .icon1 {position: absolute; top: 30px; left: 100px; width: 80%; height: 20%; }
.box2 .icon2 {position: absolute; top: 150px; left: 100px; width: 80%; height: 20%;}
  .box2 .icon3 {position: absolute; top: 270px; left: 100px; width: 80%; height: 20%;}
    .box2 .icon1 p:nth-child(1) {background: url(../img/html.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(2) {background: url(../img/css.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(3) {background: url(../img/java.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(4) {background: url(http://pluspng.com/img-png/jquery-png-continue-learning-800.gif) no-repeat center center; background-size: contain;}
    .box2 .icon2 p:nth-child(1) {background: url(../img/photo.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(2) { background: url(../img/illust.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(3) { background: url(../img/indi.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(4) { background: url(../img/premiere-pro-logo.jpg) no-repeat center center; background-size: contain; }
    .box2 .icon3 p:nth-child(1) { background: url(https://pbs.twimg.com/media/B62xj9FCUAA3YoC.png) no-repeat center center; background-size: contain; transform: scale(1.2);}
    .box2 .icon3 p:nth-child(2) {background: url(https://www.reviversoft.com/blog/wp-content/uploads/2013/04/Notepadplusplus.png) no-repeat center center; background-size: contain;}
    .box2 .icon3 p:nth-child(3) { width: 70px; background: url(https://static1.squarespace.com/static/51c27d6fe4b018bf440e1ff7/t/54164c09e4b0f30badec85f1/1500424832266/Microsoft+Office+ProPlus.png?format=300w) no-repeat center left; background-size: contain;}


  .box2 .con2 p:hover span {opacity: 1;}
    .box2 .icon1 p:nth-child(1) span {background: url(../img/80.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(2) span {background: url(../img/60.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(3) span {background: url(../img/30.png) no-repeat center center; background-size: contain;}
    .box2 .icon1 p:nth-child(4) span {background: url(../img/30.png) no-repeat center center; background-size: contain;}
    .box2 .icon2 p:nth-child(1) span {background: url(../img/90.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(2) span {background: url(../img/85.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(3) span {background: url(../img/70.png) no-repeat center center; background-size: contain; }
    .box2 .icon2 p:nth-child(4) span {background: url(../img/50.png) no-repeat center center; background-size: contain; }
    .box2 .icon3 p:nth-child(1) span {background: url(../img/80.png) no-repeat center center; background-size: contain; transform: scale(1.3);}
    .box2 .icon3 p:nth-child(2) span {background: url(../img/70.png) no-repeat center center; background-size: contain;}
    .box2 .icon3 p:nth-child(3) span {background: url(../img/70.png) no-repeat center center; background-size: contain;}

.box2 .con3 h2 {position: relative; font: 16px Nanumgothic; color: #000; left: 150px; margin-bottom: 80px; line-height: 150%; }
.box2 .con3 .line {position: absolute; top: 170px; left: 0px; width: 100%; height: 5px; display: inline-block; background:-webkit-linear-gradient(left, rgba(237,66,131,1) 0%,rgba(64,39,221,1) 100%); background:-ms-linear-gradient(left, rgba(237,66,131,1) 0%,rgba(64,39,221,1) 100%);}
.box2 .con3 h3 {position: relative; top: -70px; font: 16px Arial; color: #ED4283; }
.box2 .con3 h4 {position: relative; top: -88px; text-align: right; font: 16px Arial; color: #4027DD; }
.box2 .con3 p {width: 20%; height: 20%;}
.box2 .con3 .red  {position: relative; top: -79px; left: 60%; background: url(../img/reddot.png) no-repeat center top; width: 90px; height: 40px; background-size: contain;}
.box2 .con3 .ide {position: relative; top: -119px; left: 68%;background: url(../img/ide.png) no-repeat center top; width: 110px; height: 40px; background-size: contain; }
.box2 .con3 .und {position: relative; top: -158px; left: 81.5%; background: url(../img/ridrik.png) no-repeat center top; width: 130px; height: 40px; background-size: contain; }






/*box3*/
.box3 {width: 100%; height: 100%;}
.wrap3  { position: relative; top: 70px; left: 14.3%; width: 71.5%; height:100%; text-align: left;}
.wrap3 p {font: 70px Kaushan script; color: #333;}
.wrap3 .txt {position: relative; font:18px Nanumgothic; top: 50px; line-height: 150%; color: #444;}

.wrap3 article {position: relative; top: 170px;width: 80%; height: 50%; left: 20%; margin-bottom: 200px; border: 0.5px solid #ccc; background: #f4f4f4;}
.wrap3 .mul {left: 0%;}
.wrap3 article h1 {position: relative; top: 20%;font: bold 35px Nanumgothic; color: #333; line-height: 90%;}
.wrap3 article span {font: 17px Nanumgothic;}
.wrap3 article h2 {position: relative; left: 4%; font: 17px Nanumgothic; color:#333; line-height: 130%;}
.wrap3 article a {display:block; position: absolute; top: 21%;left: 38%;width:57%; height: 65%;}
.wrap3 article:nth-child(3) a { background: url(../img/sli4.jpg) no-repeat; background-size: cover;}
.wrap3 article:nth-child(4) a { background: url(../img/sli8.jpg) no-repeat; background-size: cover;}
.wrap3 article:nth-child(5) a {background: url(../img/sli18.jpg) no-repeat; background-size: cover;}
.wrap3 article:nth-child(6) a {background: url(../img/sli24.jpg) no-repeat; background-size: cover;}
.wrap3 article:nth-child(7) a {background: url(../img/sli32.jpg) no-repeat; background-size: cover;}
.wrap3 article:after {content: ""; display: block; height: 350px;}

.wrap3 article p {position: absolute; top: 80%; left: -32%; width: 8%; height:9%; font:17px Arial; color: #000; line-height: 190%; float: left; opacity: 0;}
.wrap3 article p.po1 {position: absolute; top: 85%; left: -23%;width: 0%; height: 0.6%; background: #4027dd; transition: all 0.5s; opacity: 1;}
.wrap3 article p.po2 {position: relative; left: 0%; top: 0%; width: 100%; height: 100%; background: #fff; opacity: 0; transition: all 0.4s;}
.wrap3 article a:hover .po1 {width: 17%; background: #ed4283;}
.wrap3 article a:hover p {opacity: 1;}
.wrap3 article a:hover .po2 {opacity: 0.4;}

/*box3 내용 컨텐츠*/
/*1번내용*/
.box3 footer {display: none;}
  .box3 footer .sub {display: none;}
  .box3 footer .ana {display: none;}
  .box3 footer .set1 {display: none;}
  .box3 footer .set2 {display: none;}
  .box3 footer .pro {display: none;}

  .box3 footer .ana .roll2 {display: none;}
  .box3 footer .ana .roll3 {display: none;}
  .box3 footer .ana .roll4 {display: none;}
  .box3 footer .ana .roll5 {display: none;}

  .box3 footer .set1 .roll2 {display: none;}
  .box3 footer .set1 .roll3 {display: none;}
  .box3 footer .set1 .roll4 {display: none;}
  .box3 footer .set1 .roll5 {display: none;}

  .box3 footer .set2 .roll2 {display: none;}
  .box3 footer .set2 .roll3 {display: none;}
  .box3 footer .set2 .roll4 {display: none;}
  .box3 footer .set2 .roll5 {display: none;}

  .box3 footer .pro .roll2 {display: none;}
  .box3 footer .pro .roll3 {display: none;}
  .box3 footer .pro .roll4 {display: none;}
  .box3 footer .pro .roll5 {display: none;}

.box3 footer {position:fixed; top: 0%; left: 0%; width: 100%; height: 100%; background: #555; opacity: 0.9; z-index: 20;}
.box3 footer>div {position: relative; top: 15%; left: 0%; width: 100%; height: 70%; background: #000; }
.box3 footer h1 { position: relative; top: 10%; left: 3%; font: 17px Nanumgothic; color: #ccc; line-height: 170%;}
.box3 footer h1 em {color: #777;}
.box3 aside { position: relative; top: -4%; left: 95%; width: 3%; height: 7%; cursor: pointer;}
.box3 aside p {height: 100%; width: 5%; background: #fff; transform: rotate(45deg); transition: all 0.5s; display: inline-block;}
.box3 aside p:nth-child(1) {position: relative; left:50%;}
.box3 aside p:nth-child(2) {position: relative; left:38%; transform: rotate(-45deg);}
.box3 aside:hover p {transform: rotate(135deg);}
.box3 aside:hover p:nth-child(2) {transform: rotate(45deg);}


.box3 footer .sub>p:nth-child(3) {position: relative; top: 4%; left: 22%; width: 25%; height: 23%; background: url(../img/sea.jpg)no-repeat top center; background-size: cover; opacity: 1;}
.box3 footer .sub>p:nth-child(4) {position: relative; top: 6%; left: -53%; width: 25%; height: 23%;float: right; background: url(../img/sea.jpg)no-repeat bottom center; background-size: cover; opacity: 1;}
.box3 footer .sub h2 {position: relative; top: -18%; left: 55%; font: 18px Nanumgothic; line-height: 150%; text-align: left; color: #ddd;}
.box3 footer .sub h2 em {color: #207cca; font: bold 30px Nanumgothic; font-style: italic;}


/*2번내용*/
.box3 footer .ana .roll1 p:nth-child(1) {position: absolute; top: 11%; left: 25%; width: 15%; height: 65%; background: url(../img/pic1.png) no-repeat; background-size: contain;}
.box3 footer .ana .roll1 p:nth-child(2) {position: absolute; top: 11%; left: 60%; width: 15%; height: 65%; background: url(../img/pic2.jpg) no-repeat; background-size: contain;}
.box3 footer .ana .roll1 h2:nth-child(3) {position: absolute; top: 11%; left: 41%; font: 15px Nanumgothic; color: #ddd; line-height: 150%;}
.box3 footer .ana .roll1 h2:nth-child(3) em {font: bold 25px Nanumgothic; color: #24B7D8;}
.box3 footer .ana .roll1 h2:nth-child(4) {position: absolute; top: 59%; left: 46%; font: 15px Nanumgothic; color: #ddd; text-align: right; line-height: 150%;}
.box3 footer .ana .roll1 h2:nth-child(4) em {font-size: 25px; color: #1e69de;}
/*버튼*/
.box3 footer .ana>p:nth-child(4) {position: absolute; top: 65%; left: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .ana>p:nth-child(5) {position: absolute; top: 65%; right: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .ana>p i {position: relative; font-size: 18px; color: #ddd; top: 35%; left:35%;}
.box3 footer .ana>p:hover {animation: ani1 0.5s infinite alternate; background: #ddd;}
@keyframes ani1 {
  0% {transform: scale(1);}
  100% {transform: scale(1.2);}
}
.box3 footer .ana p:hover i {color: #111; font-size: 20px;}

.box3 footer .ana ul {position: fixed; right: 2.3%; top: 35%; width: 3%; height: 20%;}
.box3 footer .ana ul li {width: 25%; height: 20%;}
.box3 footer .ana ul li a {position: absolute; width: 10px; height: 10px; border-radius: 5px;  border: 1px solid #ddd;}
.box3 footer .ana ul li a:hover {background: #ddd; opacity: 0.5;}
.box3 footer .ana ul li.on a {background: #ddd;}


/*롤2*/
.box3 footer .ana .roll2 p:nth-child(1) {position: absolute; top: 11%; left: 25%; width: 15%; height: 65%; background: url(../img/pic1.png) no-repeat; background-size: contain;}
  .box3 footer .ana .roll2 p:nth-child(2) {position: absolute; top: 11%; left: 60%; width: 15%; height: 65%; background: url(../img/pic3.jpg) no-repeat; background-size: contain;}
  .box3 footer .ana .roll2 h2:nth-child(3) {position: absolute; top: 11%; left: 41%; font: 15px Nanumgothic; color: #ddd; line-height: 150%;}
  .box3 footer .ana .roll2 h2:nth-child(3) em {font: bold 25px Nanumgothic; color: #24B7D8;}
  .box3 footer .ana .roll2 h2:nth-child(4) {position: absolute; top: 59%; left: 46%; font: 15px Nanumgothic; color: #ddd; text-align: right; line-height: 150%;}
  .box3 footer .ana .roll2 h2:nth-child(4) em {font-size: 25px; color: #1e69de;}


/*롤3*/
.box3 footer .ana .roll3 p:nth-child(1) {position: absolute; top: 11%; left: 25%; width: 15%; height: 65%; background: url(../img/pic4.jpg) no-repeat; background-size: contain;}
  .box3 footer .ana .roll3 p:nth-child(2) {position: absolute; top: 11%; left: 60%; width: 15%; height: 65%; background: url(../img/pic5.jpg) no-repeat; background-size: contain;}
  .box3 footer .ana .roll3 h2:nth-child(3) {position: absolute; top: 11%; left: 41%; font: 15px Nanumgothic; color: #ddd; line-height: 150%;}
  .box3 footer .ana .roll3 h2:nth-child(3) em {font: bold 25px Nanumgothic; color: #24B7D8;}
  .box3 footer .ana .roll3 h2:nth-child(4) {position: absolute; top: 59%; left: 46%; font: 15px Nanumgothic; color: #ddd; text-align: right; line-height: 150%;}
  .box3 footer .ana .roll3 h2:nth-child(4) em {font-size: 25px; color: #1e69de;}


/*롤4*/
.box3 footer .ana .roll4 p:nth-child(1) {position: absolute; top: 11%; left: 25%; width: 15%; height: 65%; background: url(../img/pic6.png) no-repeat; background-size: contain;}
  .box3 footer .ana .roll4 p:nth-child(2) {position: absolute; top: 11%; left: 60%; width: 15%; height: 65%; background: url(../img/pic7.jpg) no-repeat; background-size: contain;}
  .box3 footer .ana .roll4 h2:nth-child(3) {position: absolute; top: 11%; left: 41%; font: 15px Nanumgothic; color: #ddd; line-height: 150%;}
  .box3 footer .ana .roll4 h2:nth-child(3) em {font: bold 25px Nanumgothic; color: #24B7D8;}
  .box3 footer .ana .roll4 h2:nth-child(4) {position: absolute; top: 59%; left: 50%; font: 15px Nanumgothic; color: #ddd; text-align: right; line-height: 150%;}
  .box3 footer .ana .roll4 h2:nth-child(4) em {font-size: 25px; color: #1e69de;}


/*롤5*/
.box3 footer .ana .roll5 p:nth-child(1) {position: absolute; top: 11%; left: 25%; width: 15%; height: 65%; background: url(../img/pic8.png) no-repeat; background-size: contain;}
  .box3 footer .ana .roll5 p:nth-child(2) {position: absolute; top: 11%; left: 60%; width: 15%; height: 65%; background: url(../img/pic9.png) no-repeat; background-size: contain;}
  .box3 footer .ana .roll5 h2:nth-child(3) {position: absolute; top: 11%; left: 41%; font: 15px Nanumgothic; color: #ddd; line-height: 150%;}
  .box3 footer .ana .roll5 h2:nth-child(3) em {font: bold 25px Nanumgothic; color: #24B7D8;}
  .box3 footer .ana .roll5 h2:nth-child(4) {position: absolute; top: 59%; left: 50%; font: 15px Nanumgothic; color: #ddd; text-align: right; line-height: 150%;}
  .box3 footer .ana .roll5 h2:nth-child(4) em {font-size: 25px; color: #1e69de;}


/*3-1번내용*/
/*버튼*/

.box3 footer .set1>p:nth-child(4) {position: absolute; top: 65%; left: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .set1>p:nth-child(5) {position: absolute; top: 65%; right: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .set1>p i {position: relative; font-size: 18px; color: #ddd; top: 35%; left:35%;}
.box3 footer .set1>p:hover {animation: ani1 0.5s infinite alternate; background: #ddd;}
@keyframes ani1 {
  0% {transform: scale(1);}
  100% {transform: scale(1.2);}
}
.box3 footer .set1 p:hover i {color: #111; font-size: 20px;}
.box3 footer .set1 ul {position: fixed; right: 2.3%; top: 35%; width: 3%; height: 20%;}
.box3 footer .set1 ul li {width: 25%; height: 20%;}
.box3 footer .set1 ul li a {position: absolute; width: 10px; height: 10px; border-radius: 5px;  border: 1px solid #ddd; }
.box3 footer .set1 ul li a:hover{background: #ddd; opacity: 0.5;}
.box3 footer .set1 ul li.on a {background: #ddd;}

/*롤1*/
.box3  .set1 .roll1 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set1 .roll1 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set1 .roll1 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set1 .roll1 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set1 .roll1 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca1.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll1 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca2.jpg) no-repeat; background-size: contain;}
.box3  .set1 .roll1 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca3.jpg) no-repeat; background-size: contain;}


/*롤2*/
.box3  .set1 .roll2 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set1 .roll2 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set1 .roll2 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set1 .roll2 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set1 .roll2 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca4.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll2 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca5.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll2 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca6.jpg) no-repeat; background-size: contain; }


/*롤3*/
.box3  .set1 .roll3 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set1 .roll3 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set1 .roll3 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set1 .roll3 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set1 .roll3 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca7.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll3 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca8.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll3 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca14.jpg) no-repeat; background-size: contain; }


/*롤4*/
.box3  .set1 .roll4 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%; }
.box3  .set1 .roll4 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set1 .roll4 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set1 .roll4 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set1 .roll4 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca9.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll4 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca10.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll4 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca11.jpg) no-repeat; background-size: contain; }


/*롤5*/
.box3  .set1 .roll5 section:nth-child(1) {position: absolute; top: 11%; left: 28%; width: 18%; height: 85%; }
.box3  .set1 .roll5 section:nth-child(2) {position: absolute; top: 11%; left: 53%; width: 18%; height: 85%; }
.box3  .set1 .roll5 h2  {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set1 .roll5 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca12.jpg) no-repeat; background-size: contain; }
.box3  .set1 .roll5 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/sca13.jpg) no-repeat; background-size: contain; }


/*3-2번내용*/
/*버튼*/
.box3 footer .set2>p:nth-child(4) {position: absolute; top: 65%; left: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .set2>p:nth-child(5) {position: absolute; top: 65%; right: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .set2>p i {position: relative; font-size: 18px; color: #ddd; top: 35%; left:35%;}
.box3 footer .set2>p:hover {animation: ani1 0.5s infinite alternate; background: #ddd;}
@keyframes ani1 {
  0% {transform: scale(1);}
  100% {transform: scale(1.2);}
}
.box3 footer .set2 p:hover i {color: #111; font-size: 20px;}
.box3 footer .set2 ul {position: fixed; right: 2.3%; top: 35%; width: 3%; height: 20%;}
.box3 footer .set2 ul li {width: 25%; height: 20%;}
.box3 footer .set2 ul li a {position: absolute; width: 10px; height: 10px; border-radius: 5px;  border: 1px solid #ddd;}
.box3 footer .set2 ul li a:hover {background: #ddd; opacity: 0.5;}
.box3 footer .set2 ul li.on a {background: #ddd;}

/*롤1*/
.box3  .set2 .roll1 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set2 .roll1 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set2 .roll1 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set2 .roll1 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set2 .roll1 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g1.png) no-repeat; background-size: contain; }
.box3  .set2 .roll1 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g2.png) no-repeat; background-size: contain;}
.box3  .set2 .roll1 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g4.png) no-repeat; background-size: contain;}


/*롤2*/
.box3  .set2 .roll2 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set2 .roll2 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set2 .roll2 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set2 .roll2 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set2 .roll2 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g13.png) no-repeat; background-size: contain; }
.box3  .set2 .roll2 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g14.png) no-repeat; background-size: contain; }
.box3  .set2 .roll2 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g11.png) no-repeat; background-size: contain; }


/*롤3*/
.box3  .set2 .roll3 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .set2 .roll3 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set2 .roll3 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set2 .roll3 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set2 .roll3 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g9.png) no-repeat; background-size: contain; }
.box3  .set2 .roll3 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g12.png) no-repeat; background-size: contain; }
.box3  .set2 .roll3 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g6.png) no-repeat; background-size: contain; }

/*롤4*/
.box3  .set2 .roll4 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%; }
.box3  .set2 .roll4 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .set2 .roll4 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .set2 .roll4 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set2 .roll4 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g7.png) no-repeat; background-size: contain; }
.box3  .set2 .roll4 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g8.png) no-repeat; background-size: contain; }
.box3  .set2 .roll4 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g10.png) no-repeat; background-size: contain; }


/*롤5*/
.box3  .set2 .roll5 section:nth-child(1) {position: absolute; top: 11%; left: 28%; width: 18%; height: 85%; }
.box3  .set2 .roll5 section:nth-child(2) {position: absolute; top: 11%; left: 53%; width: 18%; height: 85%; }
.box3  .set2 .roll5 h2  {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .set2 .roll5 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g3.png) no-repeat; background-size: contain; }
.box3  .set2 .roll5 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/g5.png) no-repeat; background-size: contain; }


/*4번내용*/
/*버튼*/
.box3 footer .pro>p:nth-child(4) {position: absolute; top: 65%; left: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .pro>p:nth-child(5) {position: absolute; top: 65%; right: 3%; width: 60px; height: 60px; border:1px solid #ddd; border-radius: 40px; cursor: pointer;}
.box3 footer .pro>p i {position: relative; font-size: 18px; color: #ddd; top: 35%; left:35%;}
.box3 footer .pro>p:hover {animation: ani1 0.5s infinite alternate; background: #ddd;}
@keyframes ani1 {
  0% {transform: scale(1);}
  100% {transform: scale(1.2);}
}
.box3 footer .pro p:hover i {color: #111; font-size: 20px;}
.box3 footer .pro ul {position: fixed; right: 2.3%; top: 35%; width: 3%; height: 20%;}
.box3 footer .pro ul li {width: 25%; height: 20%;}
.box3 footer .pro ul li a {position: absolute; width: 10px; height: 10px; border-radius: 5px;  border: 1px solid #ddd; }
.box3 footer .pro ul li a:hover {background: #ddd; opacity: 0.5;}
.box3 footer .pro ul li.on a {background: #ddd;}

/*롤1*/
.box3  .pro .roll1 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%; }
.box3  .pro .roll1 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .pro .roll1 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .pro .roll1 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .pro .roll1 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p1.png) no-repeat; background-size: contain; }
.box3  .pro .roll1 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p2.jpg) no-repeat; background-size: contain;}
.box3  .pro .roll1 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p4.jpg) no-repeat; background-size: contain;}

/*롤1* - 보존/
/*.box3 footer .pro .roll1 p:nth-child(1) {position: absolute; top: 11%; left: 23%; width: 25%; height: 75%; background: url(../img/p1.png) no-repeat; background-size: contain;}
.box3 footer .pro .roll1 p:nth-child(2) {position: absolute; top: 11%; left: 42%; width: 25%; height: 75%; background: url(../img/p2.jpg) no-repeat; background-size: contain;}
.box3 footer .pro .roll1 p:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 25%; height: 75%; background: url(../img/p4.jpg) no-repeat; background-size: contain;}
.box3 footer .pro .roll1 h2 {font: 20px Arial; color: #ddd; text-align: center;}
.box3 footer .pro .roll1 h2:nth-child(4) {position: absolute; top: 88%; left: 26.5%; }
.box3 footer .pro .roll1 h2:nth-child(5) {position: absolute; top: 88%; left: 47.5%;}
.box3 footer .pro .roll1 h2:nth-child(6) {position: absolute; top: 88%; left: 67.5%;}*/


/*롤2*/
.box3  .pro .roll2 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .pro .roll2 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .pro .roll2 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .pro .roll2 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .pro .roll2 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p13.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll2 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p14.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll2 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p11.jpg) no-repeat; background-size: contain; }


/*롤3*/
.box3  .pro .roll3 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%;}
.box3  .pro .roll3 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .pro .roll3 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .pro .roll3 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .pro .roll3 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p9.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll3 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p12.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll3 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p6.jpg) no-repeat; background-size: contain; }


/*롤4*/
.box3  .pro .roll4 section:nth-child(1) {position: absolute; top: 11%; left: 21%; width: 18%; height: 85%; }
.box3  .pro .roll4 section:nth-child(2) {position: absolute; top: 11%; left: 41%; width: 18%; height: 85%; }
.box3  .pro .roll4 section:nth-child(3) {position: absolute; top: 11%; left: 61%; width: 18%; height: 85%; }
.box3  .pro .roll4 h2 {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .pro .roll4 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p7.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll4 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p8.jpg) no-repeat; background-size: contain; }
.box3  .pro .roll4 section:nth-child(3) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p10.jpg) no-repeat; background-size: contain; }


/*롤5*/
.box3  .pro .roll5 section:nth-child(1) {position: absolute; top: 11%; left: 28%; width: 18%; height: 85%; }
.box3  .pro .roll5 section:nth-child(2) {position: absolute; top: 11%; left: 53%; width: 18%; height: 85%; }
.box3  .pro .roll5 h2  {position: relative; width: 100%; top: 2%; height: 5%; font: 18px Nanumgothic; color: #ddd; text-align: center;}
.box3  .pro .roll5 section:nth-child(1) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p3.png) no-repeat; background-size: contain; }
.box3  .pro .roll5 section:nth-child(2) p {position:  relative; left: 2.5%; width: 95%; height: 92%; background: url(../img/p5.jpg) no-repeat; background-size: contain; }

/*box4*/


.box4  { position: relative; top: 70px; left: 14.3%; width: 71.5%; height:100%; text-align: left;}

.box4 p {font: 70px Kaushan script; color: #333;}
.box4 .txt {position: relative; font: 18px Arial; top: 50px; line-height: 150%; color: #444;}

.box4 article {position: relative; top: 170px;width: 80%; height: 50%; left: 20%; margin-bottom: 200px; border: 0.5px solid #ccc; background: #f4f4f4; }
.box4 .mul {left: 0%;}
.box4 article h1 {position: relative; top: 20%;font: bold 35px Nanumgothic; color: #333; line-height: 90%;}
.box4 article h2 {position: relative; left: 4%; font: 17px Nanumgothic; color:#333; line-height: 130%;}
.box4 article a {display:inline-block; position: absolute; top: 21%;left: 38%;width:57%; height: 65%;}
.box4 article:nth-child(3) a { background: url(../img/inp2.jpg) no-repeat; background-size: cover;}
.box4 article:nth-child(4) a { background: url(../img/inp4.jpg) no-repeat; background-size: cover;}
.box4 article:nth-child(5) a {background: url(../img/inp5.jpg) no-repeat; background-size: cover;}
.box4 article:nth-child(6) a {background: url(../img/inp8.jpg) no-repeat; background-size: cover;}
.box4 article:nth-child(7) a {background: url(../img/inp9.jpg) no-repeat; background-size: cover;}
.box4 article:after {content: ""; display: block; height: 350px;}

.box4 article p {position: absolute; top: 80%; left: -32%; width: 8%; height:9%; font:17px Arial; color: #000; line-height: 190%; float: left; opacity: 0;}
.box4 article p.po1 {position: absolute; top: 85%; left: -23%;width: 0%; height: 0.6%; background: #4027dd; transition: all 0.5s;}
.box4 article p.po2 {position: relative; left: 0%; top: 0%; width: 100%; height: 100%; background: #fff; opacity: 0; transition: all 0.4s;}
.box4 article a:hover .po1 {width: 17%; background: #ed4283;}
.box4 article a:hover p {opacity: 1;}
.box4 article a:hover .po2 {opacity: 0.4;}

/*on*/
#int.on {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20; opacity: 1;}
#int.on article {position:fixed; top: 0px; left: 0px; width: 14.285%; height: 100%; background: #222; opacity: 1; animation: ani4 1s; -ms-animation: ani4 1s;}

/*fr*/
#int.fr {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20; opacity: 1;}
#int.fr article {position:fixed; top: 0px; left: 0px; width: 14.285%; height: 100%; background: #222; opacity: 1; animation: ani4 1s; -ms-animation: ani4 1s;}

@-ms-keyframes ani3 {
  0% {top: 0%; height: 100%;}
  100% {top: 100%; height: 0px;}
}
@keyframes ani3 {
  0% {top: 0%; height: 100%;}
  100% {top: 100%; height: 0px;}
}
@-ms-keyframes ani4 {
  0% {top: 100%; height: 0%;}
  100% {top: 0%; height: 100%;}
}
@keyframes ani4 {
  0% {top: 100%; height: 0%;}
  100% {top: 0%; height: 100%;}
}
@keyframes ani5 {
  0% {transform: scale(1);}
  10% {transform: scale(1.1);}
  30% {transform: scale(1);}
  50% {transform: scale(1.1);}
  70% {transform: scale(1);}
  90% {transform: scale(1.1);}
  100% {transform: scale(1); }
}

#int.on article:nth-child(1) {left: 0%; animation: ani3 0.5s 1.5s ease-in-out forwards; -ms-animation: ani3 0.5s 1.5s ease-in-out forwards;}
#int.on article:nth-child(2) {left: 14.285%; animation: ani3 0.7s 1.5s ease-in-out  forwards; -ms-ani3 0.7s 1.5s ease-in-out forwards;}
#int.on article:nth-child(3) {left: 28.57%; animation: ani3 0.9s 1.5s ease-in-out  forwards; -ms-ani3 0.9s 1.5s ease-in-out forwards;}
#int.on article:nth-child(4) {left: 42.855%; animation: ani3 1.1s 1.5s ease-in-out  forwards; -ms-ani3 1.1s 1.5s ease-in-out forwards;}
#int.on article:nth-child(5) {left: 57.14%; animation: ani3 1.3s 1.5s ease-in-out  forwards; -ms-ani3 1.3s 1.5s ease-in-out forwards;}
#int.on article:nth-child(6) {left: 71.425%; animation: ani3 1.5s 1.5s ease-in-out  forwards; -ms-ani3 1.5s 1.5s ease-in-out forwards;}
#int.on article:nth-child(7) {left: 85.71%; animation: ani3 1.7s 1.5s ease-in-out  forwards; -ms-ani3 1.7s 1.5s ease-in-out forwards;}

#int.fr article:nth-child(1) {left: 0%; animation: ani4 0.25s ease-in-out forwards; -ms-ani4 0.25s ease-in-out forwards;}
#int.fr article:nth-child(2) {left: 14.285%; animation: ani4 0.35s ease-in-out  forwards; -ms-ani4 0.35s ease-in-out forwards;}
#int.fr article:nth-child(3) {left: 28.57%; animation: ani4 0.45s ease-in-out  forwards; -ms-ani4 0.45s ease-in-out forwards;}
#int.fr article:nth-child(4) {left: 42.855%; animation: ani4 0.55s ease-in-out  forwards; -ms-ani4 0.55s ease-in-out forwards;}
#int.fr article:nth-child(5) {left: 57.14%; animation: ani4 0.65s ease-in-out  forwards; -ms-ani4 0.65s ease-in-out forwards;}
#int.fr article:nth-child(6) {left: 71.425%; animation: ani4 0.75s ease-in-out  forwards; -ms-ani4 0.75s ease-in-out forwards;}
#int.fr article:nth-child(7) {left: 85.71%; animation: ani4 0.85s ease-in-out  forwards; -ms-ani4 0.85s ease-in-out forwards;}

#int p {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; text-shadow: 2px 2px #fdf;}
#int h1 {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; opacity: 0.4; animation: ani5 1.3s ease-in-out forwards;}

#int p.on {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; text-shadow: 2px 2px #fdf;}
#int h1.on {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; opacity: 0.4; animation: ani5 1.3s ease-in-out forwards;}

#int.fr p {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; text-shadow: 2px 2px #fdf;}
#int.fr h1 {position: fixed; font: 60px Kaushan script; color: #fff; top: 35%; width: 100%; height: 30%; text-align: center; opacity: 0.4;  animation: ani5 1.3s 1s ease-in-out forwards;}


/*미디어*/
/*@media screen and (max-width:640px) {
  .bg {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;}
  .bg:nth-child(1) article{width:33.3%;}

  .wrap {position: fixed; top: 0px; right: 20px; width: 90%; height: 100%; }
  .logo {right: 0px; top: 0px; transform: scale(0.7);}
  #nav {display: none;}
  .box1 .txt {position: fixed; top: 110px; right:10px;width: 80%; height: 100%;}
  .box1 .txt p {font: 30px Arial;}
  .box1 .txt p strong {font: 30px Arial;}


  #box {display: block; position: fixed; top: 200px; left: 0px; width: 13px; height: 150px; }
  #box p {position: relative; left: -2px;top: 10px; width: 8px; height:40px; font: 15px/2.3 Arial; float: left; text-align: left; color: #333; background: #aaa; color: #aaa; margin-bottom: 5px; }
  #box p.on {background: #000; color: #000;}

  .btn {display: block; position: fixed; top: 10px; left: 20px;  width: 50px; height: 50px;  color: #000; font-size: 35px; animation: ani2 0.5s infinite alternate;}
  @keyframes ani2 {
    0% {transform: scale(1); color: #000;}
    100% {transform: scale(1.2); color: #555;}
  }

}*/