@charset 'utf-8';

/* reset */
* {margin:0px; padding:0px;}
ul,ol,li {list-style:none;}
a {text-decoration:none;}
body { background-color: #ffffff;}
strong { font-size:20px;}

/* header  상단 로고 , 로그인*/

header {width:85%; padding:20px 50px; background:rgba(0, 0, 0, 0.74);  display:flex; flex-wrap:wrap; justify-content:space-between; position:absolute; left:5%; top:50px; z-index:2; }
header h1 {font:bold 24px/1 'arial'; color:rgb(240, 240, 240); padding:5px 5vw;}
header ul {display:flex;}
header ul li {padding:5px 5vw;}
header ul li a {font:bold 16px/1 'arial'; color:rgb(245, 245, 245);}
header ul li a:hover { color: rgba(255, 255, 0, 0.993);}

.back { position: relative; width: 1900px; height: 600px; background: url(../images/333.png)no-repeat center; }

#guide { width: 1180px; padding: 100px 0px 100px 0px;  margin:0px auto;  margin-bottom:200px;}

#guide h1 { font: bold 80px/2 'arial'; color: rgb(0, 0, 0); text-align: center; padding-bottom: 150px;}

#guide h2 { font : bold 40px/2 'arial'; color: rgb(0, 0, 0); }
#guide h2::before {content:""; width: 1180px; height: 40px; background: rgb(0, 0, 0); opacity: 0.2; position:absolute ;margin-top:30px;}

#guide p { font : 18px/2 'arial'; color: rgb(0, 0, 0);margin-left:20px;}


#guide>.into { width: 100%; margin-bottom: 150px;  }

/* 가이드 내 이미지  */
#guide>.intro>.p1img {width:80%; height: 620px; background-image: url(../images/5P.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px; box-shadow:4px 4px 8px; }

#guide>.play>.p2_0img {width:70%; height: 330px;  background-image: url(../images/121600.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2img {width:70%; height: 425px;  background-image: url(../images/121601.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }
#guide>.play>.p2_1img {width:70%; height: 505px;  background-image: url(../images/3P.jpg); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2_2img {width:70%; height: 505px;  background-image: url(../images/3P_2.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2_3img {width:70%; height: 505px;  background-image: url(../images/3P_3.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2_4img {width:70%; height: 505px;  background-image: url(../images/3P_4.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2_5img {width:70%; height: 505px;  background-image: url(../images/3P_5.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }

#guide>.play>.p2_6img {width:70%; height: 505px;  background-image: url(../images/3P_6.png); background-repeat: no-repeat; background-size:cover; margin:20px 0px;box-shadow:4px 4px 8px; }




#guide>.play>.p3img {width:80%; height: 530px;  background-image: url(../images/7P_1.gif); background-repeat: no-repeat; background-size:cover; margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.play>.p4img {width:620px; height: 230px;background-image: url(../images/7P_2.jpg); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.play>.p5img {width:700px; height: 400px;background-image: url(../images/9P.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.evolution>.p55img {width:80%; height: 280px;background-image: url(../images/55P.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.evolution>.p555img {width:60%; height: 260px;background-image: url(../images/121602.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.evolution>.p6img {width:80%; height: 530px; background-image: url(../images/11P.gif); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.digimon>.p7img {width:40%; height: 200px; background-image: url(../images/13P.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.rank>.p8img {width:50%; height: 750px; background-image: url(../images/15P.jpg); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.cash>.p9img {width:80%; height: 120px; background-image: url(../images/16P.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p10img {width:70%; height: 505px; background-image: url(../images/17P.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p11img {width:30%; height: 545px; background-image: url(../images/121603.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p12img {width:40%; height: 325px; background-image: url(../images/121604.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p13img {width:40%; height: 305px; background-image: url(../images/121605.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p14img {width:40%; height: 285px; background-image: url(../images/121607.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}

#guide>.event>.p15img {width:40%; height: 285px; background-image: url(../images/121608.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}
#guide>.event>.p16img {width:40%; height: 285px; background-image: url(../images/121609.png); background-repeat: no-repeat; background-size:cover;margin:20px 0px; box-shadow: 4px 4px 8px;}


/*유튜브 영상*/
article { width:80%; height: 534px; box-sizing:border-box;    border:1px solid #bbb;    margin:10px 0px; box-shadow: 2px 2px 4px;}

/* footer */
#footer {width:100%; padding:70px 0px; background-color:#222;  margin-top:-200px;}
#footer .inner {width:1180px; margin:0px auto;}
#footer .inner::after {content:''; display:block; clear:both;}
#footer .inner h1 {float:left; font:bold 20px/1 'arial'; color:#999; }
#footer .inner .footermenu {float:right;}
#footer .inner .footermenu li {float:left; margin-right:30px;}
#footer .inner .footermenu li a {font:bold 15px/1 'arial'; color:#888;}
#footer .inner address {float:left; width:100%; margin-top:30px; border-top:1px solid #777; padding-top:40px; font:14px/1.7 'arial'; color:#888; letter-spacing:1px;}
#footer .inner p {float:left; margin-top:30px; width:100%; font:11px/1 'arial'; color:#777; letter-spacing:1px; }





#nav { position:fixed; width:200px; left: -160px; top:50%; margin-top:-260px; padding:20px 0px; transition: 0.7s;}
#nav:hover { left: 20px;transition: 0.7s;}

#nav>ul {background-size:200px 470px; padding: 20px 0px;background-color: rgb(105, 42, 12); border-radius: 5px;  }
#nav>ul>li {text-align: center;}
#nav>ul>li:hover {color:#fff; background-color: rgb(214, 119, 91); transition:0.7s ; }

#nav>ul>li>a {width:200px; padding: 10px 20px; font: bold 18px/3 'arial'; color: #fff;}