body{background:#111;}
.selectbox{display:block; width:100%; height:38px; position:relative; background:url('../images/bg_selctbox.jpg') repeat; border:1px solid #1d1d1d; border-radius:3px;}
.selectbox a{display:block; height:38px; padding:0 50px 0 20px; background:url('../images/ico_selectbox.jpg') no-repeat 100% 50%; text-align:left; line-height:38px; font-size:15px; color:#666;}
.selectbox select{width:100%; height:40px; position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity:'0');}
.line-up{padding:0 0 40px; position:relative; z-index:1;}
.line-up .tab{background:#1c1c1c;}
.line-up .tab menu, .line-up .list, .line-up .more{width:1200px; margin:0 auto 0; overflow:hidden;}
.line-up .more{width:1168px;}
.line-up .tab menu, .line-up .tab menu li{height:80px;}
.line-up .tab menu li{width:25%; float:left;}
.line-up .tab menu li a{display:block; height:80px; margin:0; line-height:80px; color:#fff; text-align:center; opacity:0.55; font-size:18px;}
.line-up .tab menu li a.selected{background:#ff3214; opacity:1;}
.line-up .tab menu li span{display:inline-block; height:80px; line-height:80px; background-position:0 50%; background-repeat:no-repeat; background-size:18px 17px;}
.line-up .tab menu li .featured span{padding-left:30px; background-image:url('../images/ico_featured.png');}
.line-up .tab menu li .pc span{padding-left:28px; background-image:url('../images/ico_pc.png');}
.line-up .tab menu li .mobile span{padding-left:23px; background-image:url('../images/ico_mobile.png');}
.line-up .tab menu li .browser span{padding-left:28px; background-image:url('../images/ico_browser.png');}
.line-up .tab .selectbox{display:none;}

.line-up .list{padding:10px 0 20px;}
.line-up .list li{width:268px; height:338px; float:left; margin:30px 15px 0; position:relative; border:1px solid #080808; overflow:hidden;}
.line-up .list li .caption{width:100%; height:40px; padding:0 0 1px; position:absolute; left:-1px; bottom:-1px; right:-1px; padding:2px; background:url('../images/bg_caption.png') repeat; overflow:hidden; z-index:2;}
.line-up .list li .caption .os{float:left; height:17px; padding:11px 0 0 10px; overflow:hidden;}
.line-up .list li .caption .os em{float:left; width:17px; height:17px; margin:0 0 0 10px; text-indent:-9999em; background-repeat:no-repeat; background-size:cover;}
.line-up .list li .caption .os .ios{background-image:url('../images/ico_os_apple.png');}
.line-up .list li .caption .os .android{background-image:url('../images/ico_os_android.png');}
.line-up .list li .caption .os .window{background-image:url('../images/ico_os_window.png');}
.line-up .list li .caption .genre{float:right; height:40px; padding:0 20px 0 0; line-height:40px; color:#fff; font-weight:normal;}
.line-up .list li .caption .preview{width:100%; height:100%; position:relative; overflow:hidden; opacity:0;}
.line-up .list li .caption .preview p{padding:20px 20px 0;}
.line-up .list li .caption .preview p strong, .line-up .list li .caption .preview p span{display:block; margin-top:10px;}
.line-up .list li .caption .preview p strong{font-size:24px; color:#fff; font-weight:600; line-height:120%;}
.line-up .list li .caption .preview p span{padding:15px 0 0 0; font-size:13px; color:#666; line-height:140%;}
.line-up .list li .caption .preview .menu{width:100%; position:absolute; left:0; bottom:0; margin-left:-1px; padding-left:1px; border-top:1px solid #202122;}
.line-up .list li .caption .preview .menu a{width:100%; height:60px; float:left; border-left:1px solid #212222; margin-left:-1px; background-repeat:no-repeat; background-position:50% 0; background-size:50px 124px; text-indent:-9999em;}
.line-up .list li .caption .preview .menu a:hover{background-position:50% -62px;}
.line-up .list li .caption .preview .menu.two a{width:50%;}
.line-up .list li .caption .preview .menu.three a{width:33%;}
.line-up .list li .caption .preview .menu .home{background-image:url('../images/bg_caption_menu_home.png');}
.line-up .list li .caption .preview .menu .movie{background-image:url('../images/bg_caption_menu_movie.png');}
.line-up .list li .caption .preview .menu .url{background-image:url('../images/bg_caption_menu_url.png');}
.line-up .list li .caption .preview .menu .app-store{background-image:url('../images/bg_caption_menu_appstore.png');}
.line-up .list li .caption .preview .menu .play-store{background-image:url('../images/bg_caption_menu_playstore.png');}
.line-up .list li .caption .preview .menu .twitter{background-image:url('../images/bg_caption_menu_twitter.png');}
.line-up .list li .caption .preview .menu .facebook{background-image:url('../images/bg_caption_menu_facebook.png');}
.line-up .list li .caption .preview .menu .google-plus{background-image:url('../images/bg_caption_menu_gooleplus.png');}
.line-up .list li .caption .preview .menu .youtube{background-image:url('../images/bg_caption_menu_youtube.png');}
.line-up .list li .flag{width:100%; height:32px; display:block; position:absolute; left:0; top:0; z-index:1; line-height:32px; text-align:center; color:#fff; font-size:14px;}
.line-up .list li .new{background:url('../images/bg_flag_new.png') repeat;}
.line-up .list li .comming-soon{background:url('../images/bg_flag_comming_soon.png') repeat;}
.line-up .list li .beta{background:url('../images/bg_flag_beta.png') repeat;}
.line-up .more{display:block; height:38px; color:#999; font-size:13px; text-align:center; line-height:38px; background:#181818; border:1px solid #242424;}

.line-up .tab menu li a, .line-up .tab menu li a:hover, .line-up .list li .caption, .line-up .list li:hover .caption, .line-up .list li .caption .os, .line-up .list li .caption .genre, .line-up .list li .caption .preview, .main-roll-banner .more span, .main-roll-banner .list li .item-contents a, .main-roll-banner .more, .line-up .more{transition:all .1s; transition-delay:.1s; -moz-transition-delay:.1s; -webkit-transition-delay:.1s; -webkit-transition:all .1s;}
.line-up .tab menu li a:hover{opacity:1;}
.line-up .list li:hover .caption{height:100%;}
.line-up .list li:hover .caption .os, .line-up .list li:hover .caption .genre{display:none;}
.line-up .list li:hover .caption .preview{transition:all .7s; transition-delay:.2s; -moz-transition-delay:.2s; -webkit-transition-delay:.2s; -webkit-transition:all .7s; opacity:1;}
.line-up .list li:hover .caption .preview strong, .line-up .list li:hover .caption .preview span{transition:all .4s; transition-delay:.2s; -moz-transition-delay:.2s; -webkit-transition-delay:.2s; -webkit-transition:all .4s; margin-top:0;}
.line-up .more:hover{color:#fff;}

.default-line-up .list li{cursor:default;}
.default-line-up .list li .caption .os, .default-line-up .list li .caption .genre, .default-line-up .list li .caption .preview p{display:none;}
.default-line-up .list li .caption{height:100%; background:transparent;}
.default-line-up .list li .caption .preview{opacity:1; left:-1px; bottom:-1px;}
.default-line-up .list li .caption .preview .menu{background:url('../images/bg_caption.png') repeat}

.main-roll-banner{position:relative; z-index:1;}
.main-roll-banner .more{display:block; width:100%; position:absolute; left:0; bottom:15px; text-align:center; z-index:2; font-size:15px;}
.main-roll-banner .more a{display:inline-block; padding:20px 0 35px; background:url('../images/ico_main_more.png') no-repeat 50% 70%; color:#fff; opacity:0.5; animation:mousedown 1s infinite linear;}
.main-roll-banner .more a:hover{opacity:1;}
@keyframes mousedown{
	30%{background-position:50% 90%}
	0%, 90%, 100%{background-position:50% 70%}
}

.main-roll-banner .list{width:100%; position:relative; overflow:hidden;}
.main-roll-banner .list li{width:100%; display:table; position:absolute; left:0; top:0; opacity:0; z-index:0;}
.main-roll-banner .list li.selected{opacity:1; z-index:1;}
.main-roll-banner .list li .item-contents{width:100%; position:relative; display:table-cell; vertical-align:middle; text-align:center; color:#fff; z-index:2;}
.main-roll-banner .list li .item-contents strong, .main-roll-banner .list li .item-contents em, .main-roll-banner .list li .item-contents span, .main-roll-banner .list li .item-contents a{display:block; color:#fff;}
.main-roll-banner .list li .item-contents em img{width:200px; height:120px;}
.main-roll-banner .list li .item-contents strong{font-size:32px; line-height:100%; font-weight:normal;}
.main-roll-banner .list li .item-contents span{padding:15px 0 20px; opacity:0.7; font-size:20px; line-height:120%;}
.main-roll-banner .list li .item-contents a{display:inline-block; width:258px; height:58px; padding:0 0 0 20px; margin:20px 0 0 0; line-height:58px; border:1px solid #fff; font-size:15px; background:url('../images/bg_main_top_btn.png') no-repeat 245px 50%; text-align:left;}
.main-roll-banner .list li .item-contents a:hover{background-color:#f13617; border:1px solid #f13617;}
.main-roll-banner .list li .bg{width:100%; position:absolute; left:0; top:0; z-index:1;}
.main-roll-banner .list li .movie video{position:absolute; top:0;}
.main-roll-banner .list li .image{background-repeat:no-repeat; background-position:50% 100%; background-size:cover; display:none;}
.main-roll-banner .list li .shadow{background:url('../images/ico_main_visual_pattern.png') repeat; text-indent:-9999em;}
.main-roll-banner .paging{width:100%; position:absolute; left:0; bottom:110px; text-align:center; z-index:2;}
.main-roll-banner .paging li, .main-roll-banner .paging a{display:inline-block; width:12px; height:12px;}
.main-roll-banner .paging li{margin:0 8px; opacity:0.2;}
.main-roll-banner .paging a{background:#fff; border-radius:50%; font-size:0px; line-height:0px;}
.main-roll-banner .paging li.selected{opacity:1;}
.main-roll-banner .paging li.selected a{background:#ff3214;}
.main-roll-banner .move{display:block; width:34px; height:79px; position:absolute; top:50%; margin-top:-40px; background:url('../images/btn_visual_slider.png') no-repeat; text-indent:-9999em; z-index:2;}
.main-roll-banner .prev{left:5%; background-position:0 0;}
.main-roll-banner .prev:hover{background-position:0 100%;}
.main-roll-banner .next{right:5%; background-position:100% 0;}
.main-roll-banner .next:hover{background-position:100% 100%;}

.maintenance{width:1170px; margin:80px auto 0; padding:0 15px; position:relative;}
.maintenance h1{width:80px; height:67px; position:absolute; right:15px; top:10px; background:url('../images/bg_webzen_x80.png') repeat; text-indent:-9999em;}
.maintenance h2{font-size:48px; color:#fff;}
.maintenance .text{padding:30px 0 70px; font-size:15px; color:#999; line-height:150%;}
.maintenance .progress h3{font-size:24px; color:#fff; font-weight:normal;}
.maintenance .progress .timer{display:block; padding:10px 0 15px; color:#ffae00; font-size:15px; font-weight:normal;}
.maintenance .progress .progress-bar{width:100%; height:8px; background:#333; border-radius:2px;}
.maintenance .progress .progress-bar strong{display:block; height:6px; position:relative; background:#3c72cc; border:1px solid #4c90d9; border-radius:2px; font-weight:normal;}
.maintenance .progress .progress-bar strong span{position:absolute; right:-20px; top:18px; font-size:15px; color:#3c72cc;}
.maintenance .notify{padding:70px 0 0 0;}
.maintenance .notify strong{font-size:24px; color:#fff; font-weight:normal;}
.maintenance .notify p{padding:10px 0 0 0; font-size:15px; color:#999;}

.error .code{width:370px; height:345px; margin:0 auto 0; padding:95px 0 0 370px; background:url('../images/bg_error.jpg') no-repeat 0 95px;}
.error .code p{height:345px; display:table-cell; vertical-align:middle;}
.error .code p strong, .error .code p em, .error .code p a{display:block;}
.error .code p strong{color:#fff; font-size:38px; line-height:38px;}
.error .code p em{padding:25px 0; font-size:15px; color:#999; line-height:140%;}
.error .code p a{display:inline-block; height:38px; padding:0 30px; line-height:38px; background:#ff3214; color:#fff; font-size:18px; border:1px solid #1d1d1d; border-radius:5px;}

.sub .accordion-container{padding:0 0 40px;}
.sub .accordion-caller, .sub .accordion a{white-space:nowrap; word-break:break-all; text-overflow:ellipsis; overflow:hidden; font-size:13px;}
.sub .accordion-caller{display:block; height:38px; padding:0 40px 0 20px; margin:0 0 1px; line-height:38px; border-radius:3px; color:#ff3214; background:url('../images/bg_accordion_split.png') no-repeat 100% -162px; border:1px solid #ff3214;}
.sub .accordion{padding:0; margin:0 0 1px 0; display:none;}
.sub .accordion a{display:block;}
.sub .accordion dt{border-radius:3px;}
.sub .accordion dt a{display:block; width:auto; height:40px; padding:0 40px 0 20px; line-height:38px; border-radius:3px; background:#ff3214 url('../images/bg_guide_split.png') no-repeat 100% 18px; color:#000;}
.sub .accordion dt.selected a{background-position:100% -38px;}
.sub .accordion dd{padding:22px 15px; display:none;}
.sub .accordion dd li{float:none; width:100%; padding:8px 0;}
.sub .accordion dd a{display:block; padding:0 0 0 10px; color:#999; background:url('../images/bg_accordion_split.png') no-repeat -60px -333px;}
.sub .accordion dd a:hover{color:#ff3214;}
.sub .accordion-container-active .accordion-caller{background-position:100% -250px;}
.sub .accordion-container-active .accordion{display:block;}
.sub header{height:120px; background:url('../images/bg_sub_header.jpg') repeat 50% 0; border-bottom:2px solid #ff3214;}
.sub header h2{width:1200px; height:120px; margin:0 auto 0; font-size:36px; color:#ff3214; line-height:120px; font-weight:600;}
.sub .tab{height:40px; overflow:hidden; border-bottom:1px solid #ff3214;}
.sub .tab li{float:left; width:298px;}
.sub .tab a{display:block; padding:0 0 0 20px; height:40px; line-height:40px; font-size:13px; color:#666; border:1px solid #404040; border-radius:5px 5px 0 0;}
.sub .tab a.selected{color:#000; background:#ff3214; border:1px solid #ff3214;}
.sub-contents{width:1200px; margin:0 auto 0; padding:50px 0;}
.policies section{padding:60px 0 50px 0; color:#999; font-size:13px; line-height:140%;}
.policies section h3{padding:25px 0 15px; font-weight:normal; color:#fff;}
.policies section a{color:#999;}
.policies section a:hover{text-decoration:underline;}

@media (min-width:980px) and (max-width:1279px){
	.line-up .tab menu, .line-up .list, .sub header h2, .sub-contents{width:900px;}
	.line-up .more{width:868px;}
	.maintenance{width:870px;}
	.default-line-up .list li:nth-child(4){display:none;}
}

@media (min-width:1px) and (max-width:979px){
	.line-up .tab, .line-up .list{padding:0 25px;}
	.line-up .list{padding-bottom:20px;}
	.line-up .tab{background:#111;}
	.line-up .tab menu{display:none;}
	.line-up .tab .selectbox{display:block; margin:30px 0 0 0;}
	.main-roll-banner .list li .movie{display:none;}
	.main-roll-banner .list li .image{display:block;}
	.main-roll-banner .paging li{margin:0 6px;}
	.main-roll-banner .move{display:none;}
	.maintenance{width:auto; margin-top:-20px;}
	.maintenance h1{position:inherit; right:auto; top:auto; margin:0 auto 0;}
	.maintenance h2{padding:60px 0 0 0;}
	.maintenance .text{padding:25px 0 60px;}
	.maintenance h2, .maintenance .text, .maintenance .progress h3, .maintenance .progress .timer, .maintenance .notify{text-align:center;}
}

@media (min-width:760px) and (max-width:979px){
	.line-up .tab menu, .line-up .list, .sub header h2, .sub-contents{width:630px;}
	.line-up .more{width:598px;}
	.default-line-up .list li:nth-child(3), .default-line-up .list li:nth-child(4){display:none;}
}

@media (min-width:1px) and (max-width:759px){
	.main-roll-banner .list li .item-contents span{display:none;}
	.line-up .tab{background:#111;}
	.line-up .list{width:auto;}
	.line-up .list li{width:100%; height:auto; margin:30px 0 0;}
	.line-up .list li img{width:100%;}
	.line-up .more{width:auto; margin:0 25px;}
	.maintenance h2{padding:25px 0 0; font-size:30px;}
	.maintenance .text{padding:25px 0 35px;}
	.maintenance .progress h3, .maintenance .notify strong{font-size:20px;}
	.default-line-up .list li:nth-child(2), .default-line-up .list li:nth-child(3), .default-line-up .list li:nth-child(4){display:none;}
	.error .code{width:auto; display:table; background:none; padding:0 30px; text-align:center;}
	.sub header h2, .sub-contents{width:auto; padding:0 25px;}
	.sub-contents{padding-top:30px;}
	.sub .tab li{width:50%;}
}

@media (min-width:1px) and (max-width:639px){
	.main-roll-banner .list li .item-contents strong{font-size:32px;}
	.main-roll-banner .list li .item-contents a{margin:25px 0 0 0; width:200px; height:38px; line-height:38px; background-position:190px 50%;}
	.main-roll-banner .paging{bottom:75px;}
	.main-roll-banner .more{bottom:-10px;}
}