@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Righteous);


* { margin:0;  padding:0; box-sizing: border-box;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#111; }
img { border:0;}
body { font:12px/1.6 arial; color:#111; 
    width: 100%; height: 100%; overflow: hidden;
} 

.logo{position: fixed; z-index: 999; width: 100%; height: 12%; text-align:center; 
 background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); 
}


.logo h1 a{position: relative; width: 50%; top: 10px;        
}
.logo h1 a img{position: absolute;top: -40px;left: -125px; width: 250px; height: auto;}



/*  menu --------------------------------------------------------------- */

#menu { position: absolute; bottom: 0; left:0px; 
    width: 100%; display: flex; 
}
#menu li{display: inline; flex: 1; }



#menu li>a { display:block; width:200px; height:60px; 
    font-size:20px; color:#fff; text-align:right; overflow:hidden; font-weight: bold;
    box-sizing:border-box;  
    transition:all 0.5s; text-align: center;}
#menu li:hover a { font-size:24px;  opacity:1; border-bottom:1px solid #fff;}
#menu li.on a { font-size:24px; opacity:1;}

#menu li:nth-child(1):hover a { color:#174728; border-color:#174728;}
#menu li:nth-child(2):hover a {  color:#E8A41F; border-color:#E8A41F;}
#menu li:nth-child(3):hover a { color:#F41515; border-color:#F41515;}
#menu li:nth-child(5):hover a { color:yellowgreen; border-color:yellowgreen;}
#menu li:nth-child(6):hover a { color:#AD4005; border-color:#AD4005;}
#menu li:nth-child(7):hover a { color:#13017C; border-color:#13017C;}

#menu li:nth-child(1).on a { color:#174728; border-color:#174728;}
#menu li:nth-child(2).on a { color:#E8A41F; border-color:#E8A41F;}
#menu li:nth-child(3).on a { color:#F41515; border-color:#F41515;}
#menu li:nth-child(5).on a { color:yellowgreen; border-color:yellowgreen;}
#menu li:nth-child(6).on a { color:#AD4005; border-color:#AD4005;}
#menu li:nth-child(7).on a { color:#13017C; border-color:#13017C;}

/*  article --------------------------------------------------------------- */

section { width:100%; height:100%; 
    overflow: hidden;
}
#slide-wrapper {display: block;
  width: 100%;
  height: 200vh; /* 화면 2개 분량의 높이 */

  /* 부드럽게 움직이도록 애니메이션 효과 주기 (0.6초 동안 작동) */
  transition: transform 0.6s ease-in-out; 
}
.contents{
    width:100%; height: 100vh; overflow:hidden;
    position:relative; background-size:cover; background-repeat: no-repeat;
    background-position:right bottom; background-attachment:fixed;
}
#screen1{background-image:url("../img/sub_Mountain_1a.png");}
#screen2{background-image:url("../img/sub_Mountain_2a.png");}
#screen3{background-image:url("../img/sub_Arena_1a.png");}
#screen4{background-image:url("../img/sub_Arena_2a.png");}
#screen5{background-image:url("../img/sub_Stadium_1a.png");}
#screen6{background-image:url("../img/sub_Stadium_2a.png");}
#screen7{background-image:url("../img/sub_Field_1a.png");}
#screen8{background-image:url("../img/sub_Field_2a.png");}
#screen9{background-image:url("../img/sub_Urban_1a.png");}
#screen10{background-image:url("../img/sub_Urban_2a.png");}
#screen11{background-image:url("../img/sub_Water_1a.png");}
#screen12{background-image:url("../img/sub_Water_2a.png");}


.contents article { position:absolute; bottom:0%; left:0px; z-index:11; 
    width: 70%; height: 55%;
    background: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.4) 90%,rgba(0,0,0,0) 100%);
}
.contents #line{
    position: absolute;top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,0) 100%);
}
.contents article h2 {margin-left: 5%; margin-top: -200px; font-size:80px; letter-spacing:2px; line-height:1;
    font-style: italic; font-weight: 500;text-shadow:3px 3px 3px rgba(255, 255, 255, 0.7) ;
} 
.contents article h3 {margin-left: 5%; margin-top: 15px; font-size:45px; letter-spacing:2px; 
    line-height:1; text-shadow:2px 2px 2px rgba(255, 255, 255, 0.7) ;
} 
.contents article span {
    display: block;
    width: 70%; height: 30%;
    letter-spacing:2px; line-height:1.3; color: #fff;
    margin-left: 5%; margin-top: 200px; font-size:16px; }

.iconline{margin-left: 5%; margin-bottom: 50px; 
   cursor: pointer;
}

.fas {width: 100px; height: auto; margin-right: 30px;  opacity: 0.5; 
    float: left; transition: 0.3s;
}
.fas:hover{opacity: 1; filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.8));
    color: #fff;
}

/* 컬러배경 고정 w값 움직임 */
.b11 { position:absolute; bottom: 0; right: 0;}

/* 그래픽 이미지 마우스 움직임 */
.p11 { position:absolute; bottom:20px; right:20px;}
.p12 { position:absolute; bottom:-40px; right:0px;}
.p13 { position:absolute; top:100px; right:-60px;}

.p54 { position:absolute; top:0px; right:150px;}
.p45 { position:absolute; top:0px; right:0px;}
.p55 { position:absolute; top:0px; right:0px;}

.p64 { position:absolute; top:0px; right:0px;}
.p65 { position:absolute; top:0px; right:0px;}
.p66 { position:absolute; top:0px; right:0px;}
.p67 { position:absolute; top:80px; right:-100px;}