@charset "utf-8";
/* Reset CSS - YUI 3.12.0 (build 8655935) */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
/* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
/* Common Container */
html{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);  scroll-behavior: smooth;}
a{text-decoration:none}a img{border:0 none}input,select{outline-style:none}button{font-family:'Roboto', sans-serif;cursor:pointer}

button, input, textarea, select {
    box-sizing: border-box;
    outline-style: none;
    resize: none;
}
* {
    margin: 0;
    padding: 0;
}
*,
*:before,
*:after {
    transition-property: none;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-delay: 0;
}
@keyframes floating {
    0%,
    100% {
        transform: translateY(40px);
    }
    50% {
        transform: translateY(-10px);
    }
}
.hide {
    display: none !important;
}
/* Layout */
.wrap {
    position: relative;
    min-width: 1280px;
    overflow: hidden;
}
.wrap a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.header .logo {
    position: absolute;
    top: 21px;
    left: 50%;
    margin-left: -624px;
    height: 94px;
    width: 173px;
    background: url(../img/logo.png) no-repeat 0 0;
    z-index: 10;
}
.header .home {
    position: absolute;
    top: 32px;
    left: 50%;
    margin-left: 450px;
    width: 166px;
    height: 56px;
    background: url(../img/gohome.png) no-repeat 0 0;
    z-index: 10;
    transition-property: background;
}
.header .home:hover {
    background: url(../img/gohome_hover.png) no-repeat 0 0;
}
.content {
    position: relative;
    height: 1440px;
    background: url(../img/content.jpg) no-repeat center 0;
}
.content .btn a,.content .char{
    position: absolute;
    left: 50%;
    display: block;
    overflow: hidden;
    text-indent: -10000em;
    transition-property: background;
}
.content .slider .slick-list:focus, .content .slider .slick-track:focus,.content .slider .slick-slide:focus {
    outline: none;
}
.content .slider {
    width: 2560px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.content .slider .slick-list {
    overflow: visible;
}
.content .slider .content-1{
    position: relative;
    width: 2560px;
    height: 1440px;
    background: url(../img/content_bg1.png) no-repeat center 0;
}
.content .slider .content-1 .btn-1 a{
    width: 164px;
    height: 164px;
    top: 793px;
    margin-left: -256px;
    background: url(../img/btn1.png) no-repeat center 0;
}
.content .slider .content-1 .btn-1 a:hover{
    background: url(../img/btn1_over.png) no-repeat center 0;
}
.content .slider .content-1 .btn-2 a{
    width: 164px;
    height: 164px;
    top: 793px;
    margin-left: -79px;
    background: url(../img/btn2.png) no-repeat center 0;
}
.content .slider .content-1 .btn-2 a:hover{
    background: url(../img/btn2_over.png) no-repeat center 0;
}
.content .slider .content-1 .char_1{
    width: 658px;
    height: 941px;
    top: 251px;
    margin-left: 81px;
    background: url(../img/char1.png) no-repeat center 0;
    animation: floating 4s infinite;
}
.content .slider .content-2{
    position: relative;
    width: 2560px;
    height: 1440px;
    background: url(../img/content_bg2.png) no-repeat center 0;
}
.content .slider .content-2 .btn-3 a{
    width: 187px;
    height: 187px;
    top: 773px;
    margin-left: -92px;
    background: url(../img/btn3.png) no-repeat center 0;
}
.content .slider .content-2 .btn-3 a:hover{
    background: url(../img/btn3_over.png) no-repeat center 0;
}
.content .slider .content-2 .char_2{
    width: 741px;
    height: 1018px;
    top: 234px;
    margin-left: 145px;
    background: url(../img/char2.png) no-repeat center 0;
    animation: floating 4s infinite;
}
.content .slider .content-3{
    position: relative;
    width: 2560px;
    height: 1440px;
    background: url(../img/content_bg3.png) no-repeat center 0;
}
.content .slider .content-3 .btn-4 a{
    width: 187px;
    height: 187px;
    top: 773px;
    margin-left: -428px;
    background: url(../img/btn4.png) no-repeat center 0;
}
.content .slider .content-3 .btn-4 a:hover{
    background: url(../img/btn4_over.png) no-repeat center 0;
}
.content .slider .content-3 .btn-5 a{
    width: 187px;
    height: 187px;
    top: 773px;
    margin-left: 240px;
    background: url(../img/btn5.png) no-repeat center 0;
}
.content .slider .content-3 .char_3{
    width: 597px;
    height: 926px;
    top: 400px;
    margin-left: -1130px;
    background: url(../img/char3.png) no-repeat center 0;
    animation: floating 4s infinite;
}
.content .slider .content-3 .char_4{
    width: 685px;
    height: 851px;
    top: 246px;
    margin-left: 480px;
    background: url(../img/char4.png) no-repeat center 0;
    animation: floating 4s infinite;
}
.content .slider .content-3 .btn-5 a:hover{
    background: url(../img/btn5_over.png) no-repeat center 0;
}
.content .slider .slick-arrow{
    position: absolute;
    top: 593px;
    left: 50%;
    width: 120px;
    height: 120px;
    text-indent: -10000em;
    background-color: transparent;
    border: none;
    z-index: 9;
    transition-property: background;
}
.content .slider .slick-prev{
    margin-left: -807px;
    background-image: url(../img/btn_left.png);
}
.content .slider .slick-prev.bg_btn{
    background-image: url(../img/btn_left2.png);
}
.content .slider .slick-prev:hover{
    background-image: url(../img/btn_left_hover.png);
}
.content .slider .slick-prev.bg_btn:hover{
    background-image: url(../img/btn_left2_hover.png);
}
.content .slider .slick-next{
    margin-left: 684px;
    background-image: url(../img/btn_right.png);
}
.content .slider .slick-next.bg_btn{
    background-image: url(../img/btn_right2.png);
}
.content .slider .slick-next:hover{
    background-image: url(../img/btn_right_hover.png);
}
.content .slider .slick-next.bg_btn:hover{
    background-image: url(../img/btn_right2_hover.png);
}
.content .slider .slick-dots{
    position: absolute;
    top: 990px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 36px;
    background-image: url(../img/nav_bg.png);
}
.content .slider .slick-dots li{
    display: inline-block;
    position: absolute;
    height: 48px;
    top: 12px;
}
.content .slider .slick-dots li.slick-active{
    height: 56px;
    top: 4px;
}
.content .slider .slick-dots li:nth-child(1){
    width: 75px;
    left: -17px;
    background: url(../img/nav1.png) no-repeat center 0;
}
.content .slider .slick-dots li:nth-child(1).slick-active{
    background: url(../img/nav1_over.png) no-repeat center 0;
}
.content .slider .slick-dots li:nth-child(2){
    width: 95px;
    left: 125px;
    background: url(../img/nav2.png) no-repeat center 0;
}
.content .slider .slick-dots li:nth-child(2).slick-active{
    background: url(../img/nav2_over.png) no-repeat center 0;
}
.content .slider .slick-dots li:nth-child(3){
    width: 89px;
    left: 274px;
    background: url(../img/nav3.png) no-repeat center 0;
}
.content .slider .slick-dots li:nth-child(3).slick-active{
    background: url(../img/nav3_over.png) no-repeat center 0;
}
.content .slider .slick-dots li button{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    z-index: 9;
    text-indent: -10000em;
}
.footer {
    position: relative;
    height: 80px;
    margin-top: -80px;
    text-align: center;
    font: 13px/80px Verdana, "Tahoma", 돋움, Tahoma, sans-seirf;
    color: #707070;
}
.footer:before {
    display: inline-block;
    vertical-align: middle;
    width: 163px;
    height: 16px;
    margin: -2px 50px 0 0;
    background: url(../img/footer_logo.png) no-repeat 0 0;
    content: '';
}