@import url(http://fonts.googleapis.com/css?family=Play);
@import url(http://fonts.googleapis.com/css?family=Monoton);

/*   Reset CSS   */
* { margin: 0; padding: 0; }
ul li { list-style: none; }
a { outline: 0; text-decoration: none; color: #bbb;}
img { border: 0; }
body { position: fixed; width: 100%; height: 100%; background-color: #111; }

.im { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; opacity: 0.9;}
.im img { width: 100%; min-width: 1600px; background-size: cover; }

h1 { position: fixed; top: 40px; left: 30px; z-index: 10; }
h1 img { width: 200px; height: auto; }
header { width: 700px; height: 100%; background-color: #024137; opacity: 0.8;
         border-radius: 150px / 500px;
         position: fixed; top: 0px; left: -350px; z-index: 9;
}

/* 1depth */
#gnb { width: 220px; position: absolute; top: 200px; right: 0px;  transform: skewX(6deg)!important; }
#gnb>li { position: relative; }
#gnb>li>a { display: block; width: 220px; height: 50px; font: bold 19px/3 'Nanum Gothic', sans-serif; color: #fff;
            box-sizing: border-box; padding-right: 40px; text-align: right;
            border-radius: 15px / 25px;
}
#gnb>li.on>a { background-color: #167A68; color: #fff; }
#gnb>li:hover>a { background-color: #167A68; color: #fff; }
#gnb em { display: inline-block; }
#gnb em i { margin-right: 20px; }

/* 2depth */
#gnb ul { position: absolute; left: 0px; top: -10px; opacity: 0; transition: all 0.4s; }
#gnb li:hover ul { opacity: 0.8; left: 205px; }
#gnb ul a { display: block; width: 150px; height: 40px; background-color: #167A68; border-bottom: 3px solid #fff; font: bold 16px/2.5 arial; color: #fff; box-sizing: border-box; padding-left: 50px; margin-bottom: 3px; border-radius: 15px / 25px; transition: all 0.5s; }
#gnb ul a:hover { background-color: #fff; color: #167A68; }

#gnb>li.on ul { opacity: 0.8; left: 205px; top: -10px; }
#gnb li.on ul a { background-color: #167A68; opacity: 1.0; }
#gnb li.on ul a:hover { background-color: #fff; color: #167A68; }

/* sns */
#sns { position: fixed; top: 60px; right: 50px; }
#sns li { float: left; margin-right: 30px; }
#sns .fa { font-size: 25px; color: #024137; opacity: 0.7; transform: scale(1); transition: all 0.5s; }
#sns .fa:hover { opacity: 1; transform: scale(1.4); }

/* 텍스트 박스 */
.txtBox { width: 600px; height: 280px; position: fixed; top: 270px; right: 70px; }
.tit { position: absolute; top: 0px; right: 0px; font-style: italic; font-size: 100px; color: #024137; font-family: 'Source Sans Pro', sans-serif; letter-spacing: -5px; animation: ani2 linear 0.7s 0s; }
.txt { position: absolute; top: 90px; right: 0; font-style: italic; font-size: 60px; font-family: 'Source Sans Pro', sans-serif; color: #fff; letter-spacing: -3px; animation: ani2 linear 0.7s 0.1s;}
.tit2 { position: absolute; top: 160px; right: 0; font-size: 19px; font-family: 'Nanum Gothic', sans-serif; color: #167A68; animation: ani2 linear 0.7s 0.2s; }

/* contents */
#side { width: 700px; height: 300px; position: fixed; right: 30px; bottom: -250px;
        background-color: #024137; opacity: 0.7; transition: all 0.5s;
        border-radius: 70px 70px 0 0;
}
#side:hover { bottom: 0px; opacity: 0.8; border-radius: 50px 50px 0 0;}
#side .con { width: 93%; height: 230px; position: absolute; top: 35px; margin-left: 23px;
             background-color: #045e4f; box-sizing: border-box; padding: 10px; transition: all 0.5s;
             border-radius: 50px;
}
#side .con:hover { top: 25px; }

#side .con p { width: 180px; height: 210px; border-radius: 30px; display: inline-block; text-align: center; margin-left: 20px;}
#side .con p em { display: inline-block; font: 20px/1.7 arial; color: #fff; padding: 10px 0 5px; font-family: 'Song Myung', serif; }
#side .con p img { width: 150px; height: 150px; border-radius: 20px; opacity: 0.7; transition: all 0.5s; }
#side .con p img:hover { opacity: 1; }
#side .con p:nth-child(1) { transform: translateY(200px); transition: all 0.4s; }
#side .con p:nth-child(2) { transform: translateY(200px); transition: all 0.8s; }
#side .con p:nth-child(3) { transform: translateY(200px); transition: all 1.2s; }
#side:hover .con p {transform: translateY(0px); }

/* 자동 롤링 버튼 */
#side .btnContents { width: 700px; height: 50px; position: absolute; top: -40px; color: #024137; }
#side:hover .btnContents { top: 700px; }
.btnContents p { font-size: 25px; text-align: center; font-family: 'Song Myung', serif; }
.btnContents i { font-size: 30px; position: absolute; top: 0px; right: 140px; opacity: 1; }
.btnContents i:nth-child(2) { animation: ani linear 1s 0s infinite; }
.btnContents i:nth-child(3) { animation: ani linear 1s 0.5s infinite; }

@keyframes ani {
    0% {top: 10px; transform: scale(1); opacity: 1; }
    100% { top: -30px; transform: scale(1.5); opacity: 0; }
}

@keyframes ani2 {
    0% { right: -70px; opacity: 0; }
    100% {right: 0px; opacity: 1;}
}