a:link, a:visited{text-decoration:none; color:#fff;} a:focus{ color:#fff; } body{font-family: 'Playfair Display', serif;} #wrap{min-width:1025px; width:100%;} html, body{width:100%; height:100%;} /* ################################# header ################################# */ #header{width:100%; height:92px; position:absolute; z-index:2; font-family: 'Ramaraja', serif;} #header_inn{width:1800px; height:62px; padding-top:50px; margin:0 auto;} /* 로고 */ h1{width:10%; height:100%; margin-left:60px; float:left;} h1 a{width:100%; height:100%; display:block;} h1 img{width:100%; height:100%; } /* 메뉴 */ #gnb{width:59%; float:left; padding-top:20px; margin-left:140px; opacity: 1; position:relative;} #gnb ul{width:1383px; height:100%; font-size:18px; } #gnb li{width:230px; margin-left:20px; line-height:40px; text-align:center; font-weight:700; float:left;} #gnb li ul{width:230px; height:0px; overflow:hidden; opacity:0; transition:all 0.4s linear; background-color:#fff; border-radius: 30px 30px 30px 30px; position:absolute; top:0;} #gnb .title{padding:20px 0;} #gnb li ul li{width:100%; margin-left:0; padding-bottom:10px;} /* 메뉴 기능 */ #gnb li:hover ul{opacity:1;} #gnb li:hover a{color:#000;} #gnb ul li li a:hover, #gnb ul li li a:focus{color:#f00;} #gnb ul li li:first-child a:hover{color:#000;} #gnb .gnb_game:hover ul{height:330px;} #gnb .gnb_more:hover ul{height:280px;} #gnb .gnb_about:hover ul{height:380px;} #gnb .gnb_commit:hover ul{height:330px;} /* header_btn / lang */ #header_btn{width:10%; height:44px; padding-top:16px; margin-left:8%; float:left; position: relative;} #header_btn .lang{width:41%; height:100%; text-align:center; } #header_btn .lang a{width:100%; height:100%; display:block;} #header_btn .lang .img{width:50%; height:100%; float:left;} #header_btn .lang img{width:100%;} #header_btn .lang .text{width:49%; height:100%; line-height:50px; font-weight:700; margin-left:1%;} /* header_btn / menu_bar*/ .menu_bar{width:35px; height:25px; float:left; position:absolute; right:40px; top:25px; cursor:pointer; } .menu_bar span{width:100%; height:4px; background-color:#fff; border-radius : 1px; display: inline-block; position:absolute; left:0;} .menu_bar span:nth-child(1){top:0;} .menu_bar span:nth-child(2){top:10px; opacity : 1; transition: all 0.4s;} .menu_bar span:nth-child(3){bottom:0;} /* menu_bar 애니메이션 */ .menu_bar span:nth-child(1){animation:menu_bar0 0.5s forwards;} @keyframes menu_bar0{ 0% {transform:translateY(10px) rotate(-45deg)} 50% {transform:translateY(10px)} 100% { transform:translateY(0px)} } .menu_bar span:nth-child(3){animation:menu_bar1 0.5s forwards;} @keyframes menu_bar1{ 0% {transform:translateY(-10px) rotate(45deg)} 50% {transform:translateY(-10px) rotate(0deg)} 100% {transform:translateY(0px) rotate(0deg)} } .menu_bar.allMenu span:nth-child(1){animation:all_menu_bar0 0.5s forwards; background-color:#333;} @keyframes all_menu_bar0{ 0% {transform:translateY(0px) } 50% {transform:translateY(10px)} 100% { transform:translateY(10px) rotate(-45deg)} } .menu_bar.allMenu span:nth-child(2){opacity : 0;} .menu_bar.allMenu span:nth-child(3){animation:all_menu_bar1 0.5s forwards; background-color:#333;} @keyframes all_menu_bar1{ 0% {transform:translateY(0px) rotate(0deg)} 50% {transform:translateY(-10px) rotate(0deg)} 100% {transform:translateY(-10px) rotate(45deg)} } /* all_menu_box */ #all_menu_box{width:100%; height:100%; position:absolute; left:0px; top:0px; background-color:#000; opacity: 0;} #all_menu_box:after{content:""; display:block; clear:both;} #all_menu_inn{width:1840px; height:94%; margin:30px; border-radius:20px; background-color:#f3f3f3 } #all_menu_inn .all_menu_gnb{width:100%;} #all_menu_inn .gnb_ul{width:1560px; padding:160px 80px 0 200px;} #all_menu_inn .title{width:100%; overflow:hidden; margin:50px 0; font-size:25px;} #all_menu_inn .title:after{content:""; display:block; clear:both; padding-bottom:50px; border-bottom: 1px solid #ccc;} #all_menu_inn .title ul{width:100%; } #all_menu_inn .title ul:after{content:""; display:block; clear:both;} #all_menu_inn .title li{overflow: hidden; float:left;} #all_menu_inn .sTitle{width:450px; color:#000; font-size:40px; float:left;} #all_menu_inn .title li a{margin-right:100px; line-height:45px; color:#000; float:left; background-image:-webkit-linear-gradient(transparent 60%, #fa0 5px); background-repeat:no-repeat; background-size:0 100%; transition: all 0.3s; } #all_menu_inn .title li a:hover{background-size: 100% 100%;} /* toggle active */ #all_menu_box.active{z-index:1; opacity: 0.9; position:fixed; left:0; top:0; } #header.active{z-index:2} #gnb.active{z-index:-1; opacity:0} body.active{overflow: hidden;} /* ################################# conatiner 공통작업 ################################# */ #container{width:100%;} #container h2{width:100%; padding:50px 0 0; text-align:center; font-size:40px; font-weight:900;} /* 박스*/ .box{width:170px; height:50px; line-height:50px; text-align:center; cursor: pointer; border:1px solid #f3f3f3; border-radius:3px; font-size:16px; transform:scale(1);} .box input{border:none; background:none; color:#fff; cursor: pointer;} .box:hover{transform:scale(1.1);} /* ################################# visual ################################# */ #visual {width:100%; height:100%; text-align:center;} #visual video{width:100%; } #visual source{width:100%;} /* ################################# txt ################################# */ #txt {width:100%; height:100%; } #txt_inn{width:1200px; margin:0 auto; height:100%; padding-top:10%; text-align: center; } #txt .typing_txt {display:none;} #txt .typing {display:inline-block; height:80px; font-size: 70px; animation:cursor 0.5s infinite;} #typing_ani .typing_txt_group{font-size:70px; padding:10px 0;} #typing_ani{color:rgba(0,0,0,0)} #txt:hover #typing_ani{color:rgba(0,0,0,1)} #txt .desc{font-size:22px; line-height:25px; text-align:center; padding:70px 0 50px;} #txt .txt_count ul{width:1200px; height:320px; margin:0 auto;} #txt .txt_count li {width:600px; text-align:center; float:left;} #txt .txt_count li .label{padding:70px 30px 10px; font-size:30px; } #txt .txt_count li .number{font-size:60px; } #typing_ani .typing_txt_sec{transition:color 1s linear 3.5s} #typing_ani .typing_txt_thr{transition:color 1s linear 4.5s} #typing_ani .desc{transition:color 1s linear 6s} #typing_ani .txt_count{transition:color 1s linear 6s} /* 커서 애니메이션 */ @keyframes cursor{ 0%{border-right:1px solid #fff} 50%{border-right:1px solid #000} 100%{border-right:1px solid #fff} } /* ################################# Featured ################################# */ #featured {width:100%; background-color:#201e1f; color:#fff; padding-bottom:40px;} #featured .featured_inner{width:1030px; height:690px; overflow:hidden; margin:0 auto;} #featured .featured_inner ul{width:100%; height:100%; } #featured .featured_inner li{width:290px; height:290px; margin:40px 0 0 40px; background-size:100% 100%; border-radius: 0px; transition:all 0.2s linear; position:relative; float:left; } #featured .featured_inner .logo{width:120px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); transition:all 0.3s ease-in-out;} #featured .featured_inner a{width:100%; height:100%; display:block; background-image:-webkit-linear-gradient(to right, rgb(21, 0, 179,0), rgb(255, 71, 71,0)); background-image:-moz-linear-gradient(to right, rgb(21, 0, 179,0), rgb(255, 71, 71,0)); background-image:-o-linear-gradient(to right, rgb(21, 0, 179,0), rgb(255, 71, 71,0)); background-image:-ms-linear-gradient(to right, rgb(21, 0, 179,0), rgb(255, 71, 71,0)); border-radius: 0px; transition:all 0.2s linear;} #featured .featured_inner span{width:100%; display:block;} #featured .featured_inner img{width:100%;} #featured .featured_inner .text:after{content:"offical site"; display:block; text-align:center; line-height:350px; transform:translatey(-50px); opacity:0; transition:transform 0.3s linear, opacity 0.3s linear; } /* 각 li 사진 */ #featured .no1{background-image:url("../resource/img/index/fea1.jpg");} #featured .no2{background-image:url("../resource/img/index/fea2.jpg");} #featured .no3{background-image:url("../resource/img/index/fea3.jpg");} #featured .no4{background-image:url("../resource/img/index/fea4.jpg");} #featured .no5{background-image:url("../resource/img/index/fea5.jpg");} #featured .no6{background-image:url("../resource/img/index/fea6.jpg");} #featured .no7{background-image:url("../resource/img/index/fea7.png");} #featured .no8{background-image:url("../resource/img/index/fea8.png");} #featured .no9{background-image:url("../resource/img/index/fea9.jpg");} #featured .no10{background-image:url("../resource/img/index/fea10.jpg");} #featured .no11{background-image:url("../resource/img/index/fea11.jpg");} #featured .no12{background-image:url("../resource/img/index/fea12.jpg");} /* li hover */ #featured li:hover{border-radius: 50px 0 50px; } #featured li:hover .logo{top:35%;} #featured li:hover a{border-radius: 50px 0 50px; background-image:linear-gradient(to right, rgb(21, 0, 179,0.8), rgb(255, 71, 71,0.8));} #featured li .text:hover:after{transform:translatey(5px); opacity:1;} /* 더보기 박스 */ #featured .box{margin:0 auto;} #featured .box a{width:100%; display:block;} /* ################################# sale ################################# */ #sale{width:100%; height:872px; background-color:#f7f7f7;} #sale h2{margin-bottom:40px;} /* 윗부분 */ #sale_inn_small{width:1310px; height:250px; margin:0 auto 80px; position:relative;} #sale #btn{width:50px; position:absolute; top:50%; transform:translatey(-50%); cursor:pointer;} #sale .prevBtn{left:0;} #sale .nextBtn{right:0;} #sale_ul_Area{width:1185px; height:100%; margin:0 auto; overflow: hidden; } #sale_ul_Area ul{width: 5000px; height:100%;} #sale_ul_Area li{width:213px; height:100%; margin-left:20px; float:left;} #sale_ul_Area a{width:100%; height:100%; display:block;} #sale_inn_small img{width:100%; height:100%;} /* 아랫부분 */ #sale_inn_big{width:1180px; overflow:hidden; margin:0 auto;} #sale_inn_big ul{width:100%; height:100%;} #sale_inn_big ul:after{content:""; display:block; clear:both;} #sale_inn_big li{width:570px; height:328px; overflow:hidden; margin-left:40px;border-radius: 50px 50px; text-align:center; float:left;} #sale_inn_big .sale_b_img{ position:relative;} #sale_inn_big a{width:100%; height:100%; display:block; } #sale_inn_big img{width:100%; height:100%; } #sale_inn_big li:first-child{margin:0} /* 비디오 */ #sale_inn_big video{height:348px; margin-top:-15px; position: absolute; left:0; top:0;} /* ################################# midlle_box ################################# */ #middle_box{width: 100%; height: 300px; overflow:hidden; background-color:#201e1f;} #middle_box div{width: 1100px; height:100%; margin: 0 auto;} #middle_box .desc {padding-top:80px; color: #fff; font-size: 40px; font-weight:700; line-height:40px;} #middle_box .desc span{line-height:40px; font-size: 16px; color:#ccc; font-weight:400;} #middle_box a{color: #fff; font-weight:700;} /* ################################# recomended ################################# */ #recomended{width:100%; height:954px; background-color:#f5f5f5} #recomended .reco_inn{width:1460px; height:688px; padding:40px 0; margin:0 auto;} #recomended a, #recomended img{overflow:hidden;} #recomended li a{filter: grayscale(100%); display:block; transform: scale(1,1); transition:transform 0.3s linear;} #recomended li a:hover, #recomended li a:focus{filter: none; transform: scale(1.1,1.1);} /* 왼쪽 */ #recomended .left{width:335px; height:100%; float:left; } #recomended .left ul{width:100%; height:100%;} #recomended .left li{width:100%; height:337px; margin-top:17px;background-color:rgba(255,255,255,0); overflow:hidden;} #recomended .left a{width:100%; height:100%;} #recomended .left img{width:100%; height:100%;} /* 중간 */ #recomended .middle{width:550px; margin:17px; height:691px; float:left; overflow:hidden;} #recomended .middle ul, #recomended .middle li, #recomended .middle a, #recomended .middle li img{width:100%; height:100%;} /* 오른쪽 */ #recomended .right{width:541px; height:100%; float:left;} #recomended .right ul{width:100%; height:100%;} #recomended .right li{height:337px; margin-top:17px; overflow:hidden;} /* 오른쪽-위 */ #recomended .top{width:524px; height:100%;} #recomended .top a{width:100%; height:100%;} #recomended .top img{width:100%; height:100%;} /* 오른쪽-밑 */ #recomended .bottom{width:253px; height:100%; margin-right:17px; float:left; overflow:hidden;} #recomended .bottom a{width:100%; height:100%;} #recomended .bottom img{width:100%; height:100%;} /* box */ #recomended .box{margin:0 auto; background-color:#201e9a;} #recomended .box a{width:100%; display:block; } /* ################################# update ################################# */ #update{width:100%; height:954px; margin:0 auto; background-color:#fff} #update .CNews a{background-image:-webkit-linear-gradient(transparent 60%, rgba(0,255,180,0.6) 5px)} /* 공통작업 */ #update .updateLi{transform:translatey(0px); box-shadow: 0px 0px 10px #999; transition:all 0.4s; cursor: pointer;} #update .updateLi:hover{transform:translatey(-15px); box-shadow: 2px 5px 15px #888;} #update .updateCate{width:1000px; height:660px; margin:0 auto;} #update .updateCate ul{width:100%; height:100%;} #update .updateCate li{margin:20px 20px 0 0; float:left;} #update .updateCate li:nth-child(3), #update .updateCate li:nth-child(6){margin-right:0} /* 공통작업_뉴스부분 */ .contNews{width:270px; height:260px; padding:25px;} .contTop{width:100%; line-height:50px; overflow:hidden;} .contTop h3{color:#e00; font-size:14px; display: inline-block; font-style:italic;} .contTop h4{display: inline-block; padding-left:10px;} .contDesc{height:200px; text-overflow: ellipsis; overflow:hidden;} .contDesc h3{font-size:25px; line-height:25px; padding-bottom:20px;} .contDesc h4{font-size:18px; line-height:25px; color:#333; font-weight:100;} /* 공통작업_이미지 */ .contGame{width:320px; height:310px; padding:0;} .contGame a{width:100%; height:100%; overflow:hidden; display:block;} .contGame img{width:140%; height:100%;} /* 공통작업_이미지+설명 */ .contGameImg{width:320px; height:310px; padding:0;} .contGameImg a{width:100%; height:auto; display:block;} .contGameImg img{width:100%; height:100%;} .contGameImg .desc{padding:10px 20px; text-align:center;} .contGameImg h3{color:#e00; font-style:italic;} .contGameImg h4{font-size:20px; padding:12px 0; line-height:24px;} /* 메뉴 */ #update .menu{width:100%; height:30px; padding:30px 0 40px;} #update .menu ul{width:920px; height:100%; font-weight:700; text-align:center; margin:0 auto ;} #update .menu li{padding:0 15px; margin-right:5px; line-height:30px; border-right:1px solid #ccc; float:left;} #update .menu li:last-child{border:none; margin:0;} #update .menu a{width:100%; height:100%; color:#333;} /* ################################# EA ################################# */ #EA{width: 100%; height:420px; background-image: url("../resource/img/index/s3.jpg"); background-repeat: no-repeat; background-size:100%; position:relative;} #EA div{width: 500px; position:absolute; left:20%; top:25%; } #EA .desc {color: #fff; font-size: 18px; padding-bottom:30px;} #EA .box a{width:100%; display:block;} #EA:after{content:""; display:block; clear:both;} /* ################################# footer ################################# */ #footer{width:100%; background-color:#f5f5f5;} #footer:after{content:""; display:block; clear:both;} #footer a{color:#777;} /* footer_info / info */ #footer_info{width:100%; padding:30px 0;} #footer_info:after{content:""; display:block; clear:both;} #footer_info .info{width:1150px; margin:0 auto;} /* footer_inn / gnb */ #footer_inn{width:1150px; padding:30px 0; margin:0 auto;} #footer_inn .gnb{width:100%; padding-bottom:30px; border-bottom: 1px solid #aaa;} #footer_inn .gnb ul{width:100%; height:100%;} #footer_inn .gnb li{display:inline; margin:0 20px; text-align:center;} /* bottom */ #footer_inn .footer_bottom{width:100%; padding-top:30px;} #footer_inn .footer_bottom:after{content:""; display:block; clear:both;} /* logo */ #footer_inn .logo{width:64px; height:64px; float:left;} #footer_inn .logo img{width:100%;} /* infoArea */ #footer_inn .infoArea{width:500px; margin-left:20px; float:left;} #footer_inn .infoArea:after{content:""; display:block; clear:both;} #footer_inn .infoArea ul{width:100%; height:100%;} #footer_inn .infoArea li{display:inline; margin-right:20px; line-height:25px; text-align:center; font-size:14px;} #footer_inn .infoArea p{font-size:14px; line-height:25px;} /* siteArea */ #footer_inn .siteArea{width:176px; margin-left:390px; float:left;} #footer_inn .siteArea:after{content:""; display:block; clear:both;} #footer_inn .siteArea .select{width:100%; height:44px;} #footer_inn .siteArea select{width:100%; height:100%; text-indent:10px; color:#555; border:1px solid #aaa;} #footer_inn .siteArea .sns{width:100%; padding-top:10px;} #footer_inn .siteArea .sns ul{width:100%;} #footer_inn .siteArea .sns li{width:24px; margin-left:13px; float:left;} #footer_inn .siteArea .sns li:first-child{margin:0;} #footer_inn .siteArea .sns li a{width:100%;} /* info */ #footer_inn .info{width:1064px; padding-left:84px; padding-top:30px; float:left;} #footer_inn .info ul{width:100%;} #footer_inn .info li{display:inline; margin-right:20px; line-height:25px; text-align:center; font-size:14px;} #footer_inn .info li a{color:#444;} /* 기능 */ #footer a:hover{color:rgb(228, 177, 77);}