/** font family **/
html, body, textarea, input[type="image"], input[type="text"], input[type="submit"], input[type="password"], a, input, button, select, option {font-family:'Noto Sans KR', 'dotum', '돋움', sans-serif;}
input:read-only { background-color: #b9b9b9; }
/** skipNav **/
#skipNav{position:relative; z-index:100;}
#skipNav a{display: block; overflow: hidden; position:absolute; top:-400px; left:0; width:150px; text-align:center;}
#skipNav a:hover, #skipNav a:active, #skipNav a:focus{top:0; padding:5px; background:#333 none; color:#fff; text-align:center;}
/** layout **/
body{min-width:1300px;}
body:after{clear:both;display:block;content:""}
#wrap{width:100%; position: relative; overflow: hidden;}
/** header **/
header{position: absolute; width:100%; height:80px; top:0;z-index: 11;}
header .gnb{position:fixed; width:100%; min-width: 1300px; top:0; height:auto; max-height:100%; transition:ease-in-out .3s}
header .gnb.isBorder:before {display: block;content: "";position: absolute;left: 0;top: 80px; width: 100%; height: 1px;background: rgba(255, 255, 255, 0.1);}
header.fixHeader .gnb{background-color: rgba(0,0,0,0.8);}
header .gnb h1{float:left; width:195px; height:67px; margin-top:6px; margin-left:15px}
header .gnb h1 a{display:block; width:100%; height:100%; background:url('../images/common/logo_off.png') no-repeat left center; background-size: 100%;}
header .gnb h1 a:hover{background:url('../images/common/logo_on.gif') no-repeat left center; background-size: 100%;}
header .gnb .nav{float:left; height: 80px;line-height:80px; }
header .gnb .nav > li{float:left; padding:0 1.8vw; position: relative;}
header .gnb .nav > li:first-child{padding-left:1.8vw;}
header .gnb .nav > li a{color:#fff; font-size: 16px; }
header .gnb .nav li a:hover{color:#ff9900 !important;}
header .gnb .nav li ul{display: none; position: absolute; top:80px; left:50%; width: 100%; padding:10px 0 20px; box-sizing: border-box; transform:translateX(-50%); }
header .gnb .nav li ul li{float:none;text-align: center; width: 100%; padding:10px 0; height: auto; line-height: normal;}
header .gnb .nav li ul li a{ font-weight: 100; color:#999999; font-size: 0.9rem;}
header .gnb .nav li:hover ul.open{background:url('../images/common/bg_submenu.png') no-repeat center top;}
header .snb{float:right; line-height:80px}
header .snb li{display:block; float:left; margin-left:32px; padding-right:32px;}
header .snb .loginArea, header .snb .logoutArea{float: left;}
header .snb .loginArea li:first-child, header .snb .logoutArea li:first-child{background:url('../images/common/img_snb_bar.png')no-repeat right center; }
header .snb .loginArea li a, header .snb .logoutArea li a{color:#fff; font-size: 16px;display: block; padding-left:24px; background-repeat:no-repeat; background-position:left center;}
header .snb .loginArea .btnJoin{background-image: url('../images/common/btn_person_off.png');}
header .snb .loginArea .btnLogin{background-image: url('../images/common/btn_login_off.png');}
header .snb .logoutArea .btnMypage{background-image: url('../images/common/btn_person_off.png');}
header .snb .logoutArea .btnLogout{background-image: url('../images/common/btn_logout_off.png');}
header .snb .loginArea .btnJoin:hover{color:#ff9900;background-image: url('../images/common/btn_person_on.png');}
header .snb .loginArea .btnLogin:hover{color:#ff9900;background-image: url('../images/common/btn_login_on.png');}
header .snb .logoutArea .btnMypage:hover{color:#ff9900;background-image: url('../images/common/btn_person_on.png');}
header .snb .logoutArea .btnLogout:hover{color:#ff9900;background-image: url('../images/common/btn_logout_on.png');}
header .snb .btnGameStart{float:left; display: block; width: 229px;height: 80px; background:url('../images/common/btn_gameStart_210830_off.png') no-repeat left center; background-size: 100%; text-indent: -9999px; cursor:pointer;}
header .snb .btnGameStart:hover{ background:url('../images/common/btn_gameStart_210830_on.gif') no-repeat left center; background-size: 100%;}
header .snb .btnCheckGame{float:left; display: block; width: 229px;height: 80px; cursor:default; background:url('../images/common/btn_checkingGame_210831.png') no-repeat left center; text-indent: -9999px;}
/*bgm*/
.bgm{position:fixed;width: 107px; height: 28px; left:50px; top:100px; z-index:5; display: none; }
.btn_menuBGM { display: none; width: 100%; height: 100%; left:0; top:0; position: absolute; background: url(../images/common/btn_soundOn_off.png) no-repeat; z-index: 10; cursor:pointer}
.btn_menuBGM.active{ display: none; width: 100%; height: 100%; left:0; top:0; position: absolute; background: url(../images/common/btn_soundOff_off.png) no-repeat; z-index: 10; cursor:pointer }
/** footer **/
footer{overflow:hidden; width:100%; min-width:1300px; padding:60px 0; box-sizing:border-box; background-color:#050407}
footer div { width: 1300px; margin: 0 auto; text-align: center; }
footer div a { color: #fff; }
footer div p { color: #777778; display: block; font-size: 13px; margin-top: 25px; }
footer div span { color: #fff; margin-left: 5px; margin-right: 5px; }
footer div img { display: block; margin: 20px auto 0; }
/* footer .ftArea{width:1300px; margin:0 auto;}
footer .ftArea h1{display:block;float:left; width:151px; height:35px; margin:35px 50px 0 0}
footer .ftArea .ft{float: left;}
footer .ftArea .ft .terms{float: left;}
footer .ftArea .ft .terms li{float:left; margin-right: 17px; padding-left:17px;}
footer .ftArea .ft .terms li:first-child {background:none; padding-left:0;}
footer .ftArea .ft .terms li a{color:#dddddd;}
footer .company{clear:both; float:left; display:block; margin:30px auto 0; font-size:13px; color:#777777; }
footer .company a{color:#777; font-size: inherit;}
footer .company p{font-size: inherit;}
footer .gameInfo{float:right; width:578px; height:93px; margin-top:34px; margin-left:30px; background: url('../images/common/footer_gameInfo.png') no-repeat left top; }
footer .gameInfo table {display:none; overflow: hidden; text-indent: -10000px; }
footer .gameInfo span {display:none; overflow: hidden; text-indent: -10000px; } */
.btnTop{display:none; position: fixed; bottom:120px; right:20px; z-index: 10;}
/** container 공통 **/
#container{overflow:hidden; width:100%; height:100%; margin:0 auto; min-width: 1300px; box-sizing: border-box;}
#container:after{display:block; content:""; clear:both;}
/*서브 페이지 visual 공통*/
.visual{position:relative; overflow:hidden; width:100% !important; height:295px; background-repeat:no-repeat; background-position:center center; background-color: #000;}
.visual h1{position:absolute; top:180px; left:50%; text-align:center; font-size: 57px; font-weight: 400; color:#fff; transform:translate(-50%, 0); z-index: 2;}
/** contents 공통 **/
.contents {overflow:hidden; position:relative; width:1300px; min-height: 100px; margin:70px auto 50px; box-sizing: border-box; }
.contents:after {clear:both;display:block;content:""}
.contents h2{font-size:24px; color:#333; padding:50px 0 15px;}
.contents h2:first-child{padding:15px 0;}
p.noList{text-align: center; padding:20px 0;}
#divResultList{min-height: 300px;}
/*contents_footer 하단부분*/
.contents_footer{overflow:hidden; position: relative; width:1300px; margin:20px auto 60px;}
/* visual 영역 */
/* visual 영역 배경이미지 */
.visual .bgImg{ position: absolute;
top: 0;
left: 50%;
/* margin-left: -50%; */
z-index: 1;
transform: translate(-50%,0);
text-align: center;}
.pl300 { padding-left: 300px; }
.visual.gameIntro{height:1093px; background-image: url('../images/common/bg_gameIntro.jpg');background-size: cover; animation:changeScale 30s ease-in-out infinite}/*게임소개*/
.visual.gameFeature{height:2470px; background-image: url('../images/common/bg_feature.jpg');background-size: cover; background-position:center top;}/*게임특징*/
.visual.download{height:631px; text-align:center; background-image: url('../images/common/bg_download.jpg');}/*다운로드*/
.visual.download .begins{padding-top: 215px;}
.visual.download h1{padding-top:0; top:245px; font-weight: 500;}
.visual.download h2{position: absolute; top:320px; left:50%; transform: translateX(-50%); color:#fff; font-size: 22px; font-weight: 400;}
.visual.download p{position: absolute; top:585px; left:50%; transform: translateX(-50%); text-align: center; font-size:16px; color:#c8c8c8}
.visual.download .btn_download{ position: absolute; overflow: hidden; left:50%; top:375px; width:360px; height:86px; background-repeat: no-repeat; background-position:left center; background-image: url('../images/common/btn_download.png'); margin-left:-180px; display: block;}
.visual.download .btn_download::after {
position: absolute;
content: '';
top: calc(50% - 70px);
-moz-top: calc(50% - 70px);
-webkit-top: calc(50% - 70px);
left: -50px;
width: 20px;
height: 140px;
background: rgba(255,255,255,1);
-webkit-transform: rotate(30deg);
transform:rotate(30deg);
-webkit-transition:all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
}
.visual.download .btn_download:hover{background-image: url('../images/common/btn_download_on.png'); }
.visual.download .btn_download:hover:after {
left:110%;
opacity: 1 !important;
}
/*서브페이지 메뉴(탭박스) 공통*/
.btnTabBox{position: relative; width:100%; border-bottom: 1px solid #333; margin-bottom: 40px; }
.btnTabBox ul {display: flex; justify-content: flex-end;}
.btnTabBox ul li{display:table-cell; width:300px; height:60px;line-height: 60px; box-sizing: border-box; }
.btnTabBox ul li:first-child{border-left:1px solid #e2e2e2}
.btnTabBox ul li a{display: block; width:100%; height:100%; font-size:1.1rem; text-align:center; border:1px solid #e2e2e2; border-left:0; background-color: #fff;color:#333; box-sizing: border-box;}
.btnTabBox ul li.on a{background-color: #333; color:#fff; border:none}
/* 이벤트 공통 */
.eventTab{position: relative; width:100%; padding-bottom:20px; box-sizing: border-box; }
.eventTab ul {display: flex; justify-content: center;}
.eventTab ul li{ width:33.33%; height:60px;line-height: 60px; box-sizing: border-box; }
.eventTab ul li:first-child{border-left:1px solid #e2e2e2}
.eventTab ul li a{display: block; width:100%; height:100%; font-size:1.1rem; text-align:center; border:1px solid #e2e2e2; border-left:0; background-color: #f8f8f8;color:#999999; box-sizing: border-box;}
.eventTab ul li.on a{background-color: #333; color:#fff; border:none}
.eventList.close a{cursor: default;}
.eventList{position:relative; width:100%; overflow: hidden}
.eventList ul{overflow: hidden; width:100%; margin-top:20px;display:flex; flex-wrap: wrap; }
.eventList ul li{overflow:hidden; display:block; width:32%; margin:1%; box-sizing: border-box}
.eventList ul li:first-child{margin-left:0;}
.eventList ul li:nth-child(3n+1){margin-left:0;}
.eventList ul li:nth-child(3n){margin-right:0;}
.eventList .thumbnail{overflow:hidden; position:relative; display:block; width:100%; height:218px;box-sizing: border-box }
.eventList .thumbnail img{ width:100%; height:auto; min-height: 218px;}
.eventList .thumbnail.noImg{border:1px solid #e8e8e8}
.eventList .thumbnail.noImg img{min-height:auto;max-width:100%; max-height:100%;display:inline-block;vertical-align:middle;}
.eventList .box_conts{padding: 10px; box-sizing: border-box}
.eventList .box_conts a{display:block; width:100%; margin:3px 0; color:#333}
.eventList .box_conts .tit{font-weight: 500; font-size: 1.1rem; display:block; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; box-sizing: border-box;}
.eventList .box_conts .tit p{ font-weight: 500; font-size: 1.1rem; }
.eventList .box_conts .date{font-size:14px; color:#888}
.eventList .box_conts p{display:inline; margin:3px 0}
.eventList .box_conts span{width:100%; display:block; overflow: hidden; margin:3px 0}
.eventList .box_conts span p{font-size:14px; float:left; background:url('../images/common/img_bar2.gif')no-repeat right center; padding-right:10px; margin-left:10px; }
.eventList .box_conts span p:first-child{margin-left:0}
.eventList .box_conts span p:last-child{background:none; padding-right:0}
/*게임소개*/
.intro{position: absolute; top:600px; left: 50%; transform:translateX(-50%); z-index: 5;}
.intro h1{font-size:60px;color:#fff; text-align:center; font-weight:500; letter-spacing: -4px; animation:introtxt1 2s ease-in-out;}
.intro p{text-align:center; color:#fff; font-weight:200; padding-top:20px; font-size:18px; animation:introtxt2 3s ease-in-out;}
/*게임특징*/
.feature{width:1300px; position: absolute; top:0; left: 50%; transform:translateX(-50%);}
.feature .title {position: absolute; top:535px; left:0;}
.feature .title h1{font-size:60px;color:#fff; font-weight:500; letter-spacing: -2px; line-height:60px; animation:introtxt1 1.5s ease-in-out;}
.feature .title p{color:#fff; font-size: 24px; font-weight:300; letter-spacing: 0px;line-height:35px; padding-top:25px; animation:introtxt2 2.5s ease-in-out;}
.feature .featureImg{position: absolute; top:850px;}
.feature .featureImg > div{transition:all 1s ; opacity: 0;padding:40px 0;transform:translate(0,30px);}
.feature .featureImg > div.show{transform:translate(0,-30px);opacity: 1}
/*직업소개*/
/*tab (nav) */
.tab{position: absolute; width:1300px; overflow: hidden; top:94px; left:50%; margin-left:-650px; z-index: 3;}
.tab a{display:block; float:left; width:325px; height:429px; box-sizing: border-box; background-position:left center; background-repeat: no-repeat; cursor: pointer;}
.tab1 a{background-image: url('../images/common/jobs/btn_tab1_off.jpg');}
.tab2 a{background-image: url('../images/common/jobs/btn_tab2_off.jpg');}
.tab3 a{background-image: url('../images/common/jobs/btn_tab3_off_221004.jpg');}
.tab4 a{background-image: url('../images/common/jobs/btn_tab4_off.jpg');}
.tab1.on a, .tab1 a:hover{background-image: url('../images/common/jobs/btn_tab1_on.jpg');}
.tab2.on a, .tab2 a:hover{background-image: url('../images/common/jobs/btn_tab2_on.jpg');}
.tab3.on a, .tab3 a:hover{background-image: url('../images/common/jobs/btn_tab3_on_221004.jpg');}
.tab4.on a, .tab4 a:hover{background-image: url('../images/common/jobs/btn_tab4_on.jpg');}
.visual.jobIntro{height:3719px;}
.jobIntro .tab_con{width:100%; height:100%; position:relative; }
.jobIntro .tab_con .tabs{display: none; }
.jobIntro .tab_con .tabs .jobs{width:100%; position:relative; margin:0 auto; overflow:hidden; background-repeat: no-repeat; background-position: center top; background-size:cover}
.jobIntro .tab_con .tabs .jobs:nth-child(1){height:1380px;}
.jobIntro .tab_con .tabs .jobs:nth-child(2){height:1068px;}
.jobIntro .tab_con .tabs .jobs:nth-child(3){height:1272px;}
.jobIntro .tab_con .tab_1 .jobs:nth-child(1){background-image:url('../images/common/jobs/tab_con1_1.jpg')}
.jobIntro .tab_con .tab_1 .jobs:nth-child(2){background-image:url('../images/common/jobs/tab_con1_2.jpg')}
.jobIntro .tab_con .tab_1 .jobs:nth-child(3){background-image:url('../images/common/jobs/tab_con1_3.jpg')}
.jobIntro .tab_con .tab_2 .jobs:nth-child(1){background-image:url('../images/common/jobs/tab_con1_1.jpg')}
.jobIntro .tab_con .tab_2 .jobs:nth-child(2){background-image:url('../images/common/jobs/tab_con2_2.jpg')}
.jobIntro .tab_con .tab_2 .jobs:nth-child(3){background-image:url('../images/common/jobs/tab_con2_3.jpg')}
.jobIntro .tab_con .tab_3 .jobs:nth-child(1){background-image:url('../images/common/jobs/tab_con1_1.jpg')}
.jobIntro .tab_con .tab_3 .jobs:nth-child(2){background-image:url('../images/common/jobs/tab_con3_2.jpg')}
.jobIntro .tab_con .tab_3 .jobs:nth-child(3){background-image:url('../images/common/jobs/tab_con3_3.jpg')}
.jobIntro .tab_con .tab_4 .jobs:nth-child(1){background-image:url('../images/common/jobs/tab_con1_1.jpg')}
.jobIntro .tab_con .tab_4 .jobs:nth-child(2){background-image:url('../images/common/jobs/tab_con4_2.jpg')}
.jobIntro .tab_con .tab_4 .jobs:nth-child(3){background-image:url('../images/common/jobs/tab_con4_3.jpg')}
.jobIntro .tab_con .tab_2{background-image: url('../images/common/jobs/tab_con2.jpg');}
.jobIntro .tab_con .tab_3{background-image: url('../images/common/jobs/tab_con3.jpg');}
.jobIntro .tab_con .tab_4{background-image: url('../images/common/jobs/tab_con4.jpg');}
.jobIntro .tab_con .tabs .jobs .crt{position: absolute; width:1920px; bottom:-30px;left:50%; margin-left:-960px}
.jobIntro .tab_con .tabs .job_contents{position:absolute; width:440px; top:100px; text-align: center; margin: 0 auto;; }
.jobIntro .tab_con .tabs .jobs .skill{margin-top:50px; padding-top:40px; background:url('../images/common/jobs/img_skill.png') no-repeat center top;}
.jobIntro .tab_con .tabs .jobs .skill img{opacity:0; transition:all 0.5s; margin:5px}
.jobIntro .tab_con .tabs .jobs:nth-child(1) .job_contents{ left:10%;}
.jobIntro .tab_con .tabs .jobs:nth-child(2) .job_contents{ right:10%;}
.jobIntro .tab_con .tabs .jobs:nth-child(3) .job_contents{ left:10%;}
.jobIntro .tab_con .tabs .jobs:nth-child(1) .tit{padding-top:525px;}
.jobIntro .tab_con .tabs .jobs:nth-child(1) .sub{padding-top:55px;}
.jobIntro .tab_con .tabs .jobs:nth-child(2) .tit{padding-top:30px;}
.jobIntro .tab_con .tabs .jobs:nth-child(2) .sub{padding-top:55px;}
.jobIntro .tab_con .tabs .jobs:nth-child(3) .tit{padding-top:30px;}
.jobIntro .tab_con .tabs .jobs:nth-child(3) .sub{padding-top:55px;}
.jobIntro .tab_con .jobs:nth-child(1) .crt.firstShow{opacity:1; animation:jobs 1s}
.jobIntro .tab_con .jobs div{transition:all 0.5s; opacity: 0;}
.jobIntro .tab_con .jobs div.show{transform:translate(0,-30px);opacity: 1}
.jobIntro .tab_con .jobs .tit.show{transition-delay: .2s;}
.jobIntro .tab_con .jobs .sub.show{transition-delay: .5s;}
.jobIntro .tab_con .jobs .skill.show{transition-delay: 0.8s;}
.jobIntro .tab_con .jobs .skill.show img{opacity: 1;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(1){transition-delay: 1s;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(2){transition-delay: 1.1s;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(3){transition-delay: 1.2s;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(4){transition-delay: 1.3s;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(5){transition-delay: 1.4s;}
.jobIntro .tab_con .jobs .skill.show img:nth-child(6){transition-delay: 1.5s;}
/*노비스가이드*/
.guideWrap{width:100%; position:relative; overflow:hidden; height:auto; min-height:1000px; background: url('../images/common/bg_guide.jpg') no-repeat center top;background-size: contain; background-color: #26120b;}
.guideWrap h1{position:absolute; top:205px; left:50%; text-align:center; font-size: 50px; font-weight: 400; color:#fff; transform:translate(-50%, 0); z-index: 2;}
.guideWrap .contentsWrap{position:relative;width:1300px; height:auto; overflow: visible; margin: 300px auto 140px;}
.guideWrap .contents{position:relative; height:auto; min-height: 1000px; overflow: visible; margin: 0; z-index: 2;}
/*노비스 가이드 aside(left nav)*/
.guideWrap .leftGuideNav{float:left; width: 300px; height:750px;box-sizing: border-box; }
.guideWrap .leftGuideNav .menuwrap {width:300px; height:750px;box-sizing: border-box;border-top:1px solid #000; }
.guideWrap .leftGuideNav .menuwrap.fixed{position: fixed; top:50%; transform: translateY(-50%);}
.guideWrap .leftGuideNav .menuwrap.end{position: absolute; bottom: 0}
.guideWrap .leftGuideNav .menuwrap .leftScrollBar{width: 100%; height:100%; }
.mCSB_inside > .mCSB_container{margin-right: 0 !important;}
.guideWrap .leftGuideNav a{display:block; width:100%; height:100%; font-size:16px; color:#fff; box-sizing: border-box;}
.guideWrap .leftGuideNav ul li{width:100%; }
.guideWrap .leftGuideNav ul li a{position: relative; height:66px; line-height:66px; cursor: pointer; box-sizing: border-box; padding-left:80px; background-image:url('../images/common/img_icon1_off.png'); background-repeat: no-repeat; background-position: 40px center; background-color: #180c0c; border-bottom: 1px solid #000; }
.guideWrap .leftGuideNav ul li#go_guide1 a{background-image: url('../images/common/img_icon1_off.png');}
.guideWrap .leftGuideNav ul li#go_guide2 a{background-image: url('../images/common/img_icon2_off.png');}
.guideWrap .leftGuideNav ul li#go_guide3 a{background-image: url('../images/common/img_icon3_off.png');}
.guideWrap .leftGuideNav ul li#go_guide4 a{background-image: url('../images/common/img_icon4_off.png');}
.guideWrap .leftGuideNav ul li#go_guide5 a{background-image: url('../images/common/img_icon5_off.png');}
.guideWrap .leftGuideNav ul li#go_guide6 a{background-image: url('../images/common/img_icon6_off.png');}
.guideWrap .leftGuideNav ul li#go_guide7 a{background-image: url('../images/common/img_icon7_off.png');}
.guideWrap .leftGuideNav ul li#go_guide8 a{background-image: url('../images/common/img_icon8_off.png');}
.guideWrap .leftGuideNav ul li#go_guide9 a{background-image: url('../images/common/img_icon9_off.png');}
.guideWrap .leftGuideNav ul li#go_guide10 a{background-image: url('../images/common/img_icon10_off.png');}
.guideWrap .leftGuideNav ul li#go_guide1 a:hover, .guideWrap .leftGuideNav ul li#go_guide1 a.active{background-image: url('../images/common/img_icon1_on.png');}
.guideWrap .leftGuideNav ul li#go_guide2 a:hover, .guideWrap .leftGuideNav ul li#go_guide2 a.active{background-image: url('../images/common/img_icon2_on.png');}
.guideWrap .leftGuideNav ul li#go_guide3 a:hover, .guideWrap .leftGuideNav ul li#go_guide3 a.active{background-image: url('../images/common/img_icon3_on.png');}
.guideWrap .leftGuideNav ul li#go_guide4 a:hover, .guideWrap .leftGuideNav ul li#go_guide4 a.active{background-image: url('../images/common/img_icon4_on.png');}
.guideWrap .leftGuideNav ul li#go_guide5 a:hover, .guideWrap .leftGuideNav ul li#go_guide5 a.active{background-image: url('../images/common/img_icon5_on.png');}
.guideWrap .leftGuideNav ul li#go_guide6 a:hover, .guideWrap .leftGuideNav ul li#go_guide6 a.active{background-image: url('../images/common/img_icon6_on.png');}
.guideWrap .leftGuideNav ul li#go_guide7 a:hover, .guideWrap .leftGuideNav ul li#go_guide7 a.active{background-image: url('../images/common/img_icon7_on.png');}
.guideWrap .leftGuideNav ul li#go_guide8 a:hover, .guideWrap .leftGuideNav ul li#go_guide8 a.active{background-image: url('../images/common/img_icon8_on.png');}
.guideWrap .leftGuideNav ul li#go_guide9 a:hover, .guideWrap .leftGuideNav ul li#go_guide9 a.active{background-image: url('../images/common/img_icon9_on.png');}
.guideWrap .leftGuideNav ul li#go_guide10 a:hover, .guideWrap .leftGuideNav ul li#go_guide10 a.active{background-image: url('../images/common/img_icon10_on.png');}
.guideWrap .leftGuideNav ul li a::before{content: "";position: absolute; top: 50%; right: 40px; margin-top: -3px; width: 13px; height: 7px; background: url('../images/common/img_menu_view.png') no-repeat; background-size: contain;}
.guideWrap .leftGuideNav ul li a:hover, .guideWrap .leftGuideNav ul li a.active{color:#ff9900}
.guideWrap .leftGuideNav ul li a.active::before{transform:rotate(-180deg);color:#ff9900}
.guideWrap .leftGuideNav ul li a img{margin-top: 23px; margin-right: 8px;}
.guideWrap .leftGuideNav ul li ul li a { height: 40px; line-height: 40px; background-color: #361515; background-image: none !important; padding-left:94px; border-top: 0; border-bottom: 1px solid #240d0d; color:#b79a9a }
.guideWrap .leftGuideNav ul li ul li:last-child a{border-bottom:1px solid #000 ;}
.guideWrap .leftGuideNav ul li ul li a::before{content: "";position: absolute; top: 55%; left:80px; margin-top: -3px; width: 3px; height: 3px; background-image:url('../images/common/img_subIcon_off.png');background-repeat: no-repeat; }
.guideWrap .leftGuideNav ul li ul li a:hover{color:#ff9900}
.guideWrap .leftGuideNav ul li ul li a:hover::before, .guideWrap .leftGuideNav ul li ul li a.active::before{background-image: url('../images/common/img_subIcon_on.png');}
.guideWrap .leftGuideNav ul li .guideSubMenu{display: none;}
/*노비스 가이드 contents*/
.guideWrap .guideBox{ position: relative; margin-left:300px; overflow:hidden; width:1000px; min-height: 1000px; padding:30px 60px 70px; box-sizing: border-box; background-color: #fff; letter-spacing: -0.4px; z-index: 2;}
.guideWrap .guideBox img{ max-width: 880px;}
.guideWrap .guideBox > div{padding-top: 40px;}
.guideWrap .guideBox h2{font-size:32px; font-weight: 600; padding:0; color:#652f19; box-sizing: border-box;}
.guideWrap .guideBox h2 img{margin-top: 9px;}
.guideWrap .guideBox h3{color:#fff; width:100%; height:46px; line-height: 46px; font-weight: 500; font-size: 20px; padding:0 50px; margin:30px 0; background: url('../images/common/bg_title.png') no-repeat left top; background-size: contain; box-sizing: border-box; }
.guideWrap .guideBox .explain{width:100%; padding:0 20px;color:#444; box-sizing: border-box;}
.guideWrap .guideBox .explain h4{color:#444; font-size: 18px;;}
.guideWrap .guideBox .explain .imgs{width:600px; padding:20px 0; box-sizing: border-box;}
.guideWrap .guideBox .explain p{padding-bottom: 20px;}
.guideWrap .img_guideTop{position: absolute; top:-295px; right:-100px; z-index: 1;}
.guideWrap .img_guideBottom{position: absolute; bottom:-72px; right:0}
/*서브메뉴 큰타이틀 */
.bigTitle{width:800px; margin:0 auto; overflow:hidden; padding-top:80px; padding-bottom:20px; letter-spacing: -0.4px;border-bottom:1px solid #000;box-sizing: border-box;}
.bigTitle h2{font-size:50px; text-align: center; font-weight: normal;}
.bigTitle h3{font-size:18px; display:block; text-align: center; font-weight: normal;}
/* 전체 회원가입/로그인 페이지 */
.join{width:600px; margin:0 auto; padding:50px 0; text-align:center; box-sizing:border-box; }
.join.line{border-bottom:1px solid #e3e3e3;}
.join h3{font-size:22px; display:block; text-align: center; font-weight:500; padding-bottom:10px;}
.join > h3 em{font-size: 22px;}
.join h4{font-size:18px; font-weight:500; margin:50px 0 20px;}
.join p{font-size:16px; letter-spacing: 0px;}
.join .btnLogin{width:400px; height:60px;line-height: 60px; margin:5px auto 0; font-size:22px; color:#fff; text-align:center; display: block; background-color:#e78c03}
.join .find_info{ width:400px; margin:60px auto 0; text-align:center; padding-bottom:40px; border-bottom:0px solid #e3e3e3}
.join .find_info ul li{display: inline-block; background:url('../images/common/img_bar2.gif')no-repeat left center; padding-left:20px; margin-right:20px}
.join .find_info ul li:first-child{background:none}
.join .btn_email{display:block; width:400px; height:40px; line-height: 40px; color:#3c4043; border-radius: 4px; font-family:"Google Sans",arial,sans-serif; font-weight: normal; font-size: 14px; border:1px solid #dadce0; text-align: center; margin:0 auto 50px; box-sizing: border-box; }
.join .btn_email img{vertical-align: middle; margin-right:10px;}
.join .btn_email:hover{background-color: #f8faff;}
.join .snsArea{margin:50px 0 100px; text-align: center}
.join .snsArea h3{font-size:18px; padding-bottom:30px; text-align: center}
.join .snsArea ul li{margin-bottom:8px;}
.join .snsArea a{display:block; width:400px; height:40px; line-height: 40px; color:#3c4043; border-radius: 4px; font-family:"Google Sans",arial,sans-serif; font-weight: normal; font-size: 14px; border:1px solid #dadce0; text-align: center; margin:0 auto; box-sizing: border-box; }
.join .snsArea a:last-child{margin-bottom:0;}
.join .snsArea a:hover{ background-color: #f8faff; }
.join .snsArea a img{vertical-align: middle; margin-right:10px;}
.join .snsArea a.link--googleLoginError { border: 0; height: initial; line-height: inherit; margin-top: 17px; color: #777777; font-size: 14px; }
.join .icon{padding:20px 0}
.join .explain{padding:40px 0;}
.join .explain strong{font-size: 18px;}
.join .mailBox {margin-bottom:40px}
.join .mailBox span{display:block; text-align:center; padding:10px 0; margin-bottom:10px; background-color:#ffdea5}
.join .mailBox em{font-size:14px; }
.join .accredit{margin-top:40px; padding-top:20px; border-top:1px solid #e2e2e2;}
.join .accredit h3{padding-bottom: 5px;}
.join .accredit .btnArea{width:100%; padding:20px 0;}
.join .accredit .explain{color:#999}
.join .accredit .terms{text-align: left; letter-spacing: -0.8px; margin:20px 0 50px}
.join .accredit .terms h5{font-size:16px; font-weight:500;}
.join .accredit .terms p{font-size: 14px; font-weight:500; margin:10px 0; }
.join .accredit .terms ul li{font-size: 14px;}
.join + .btnArea{width:100%; padding:25px 0 150px; }
.join .sizeControl ul li:nth-child(2) { width: 400px; left: 50%; transform: translateX(-50%); position: relative; }
.join .snsArea ul li div { display: flex; justify-content: center; }
.inputBox{width:600px; margin:20px auto}
.inputBox.pwinputbox{margin:0 auto}
.login_form .inputBox { width: 400px; }
.login_form .inputBox input{margin:5px 0 }
.login_form .inputBox input.password{margin:5px 0 10px 0}
.inputBox input{width:100%; height:50px; outline:none;color:#333; margin:20px 0 5px 0; padding:0 20px; border:1px solid #e2e2e2; box-sizing: border-box; }
.inputBox input.password{background-color:#f9f9f9}
.inputBox input.SNSnickname{border:4px solid #e2e2e2}
.inputBox input.original_password{background-color:#fff}
/* .inputBox input.email + span{color:#b40000} */
.inputBox input::placeholder{color:#999999}
.inputBox span{display:block; font-size:14px; text-align:left; color:#666}
.inputBox p{display:block; font-size:14px; padding-bottom:0;text-align:left; color:#666}
.pattern{margin:50px auto;}
.btnArea{position:relative; overflow: hidden; margin:0 auto; width:1300px; text-align:center; padding:25px 0; }
.btnArea button{display:inline-block; width:240px; height:60px; line-height: 60px; margin:0 5px; text-align:center; font-size:22px; font-weight:500; }
.btnArea button.width350 { width: 350px; }
.btnArea a{display:inline-block; width:240px; height:60px; line-height: 60px; margin:0 5px; text-align:center; font-size:22px; font-weight:500; }
.btnArea a.width350 { width: 350px; }
.btnArea .btn_confirm, .btnArea .btn_send{background-color: #333; color:#fff;}
.btnArea .btn_ok{background-color: #e78c03; color:#fff;}
.btnArea .btn_clear{background-color: #5e4898; color:#fff;}
.btnArea .btn_cancel{background-color: #333; color:#fff;}
.btnArea .cancel{background-color: #999999; color:#fff;}
.btnArea .btn_submit{background-color: #333; color:#fff;}
.btnArea .btn_find{background-color: #333; color:#fff;}
.btnArea button.disable{background-color:#999; cursor: default;}
.btnArea span{display:block; padding-top:20px;text-align: center;}
.btnArea span a{color:#006fc5; text-decoration:underline}
.btnArea p{padding:10px 0;}
.id_list ul li{overflow:hidden ;display:block; clear:both; width:100%; padding:20px 5px; box-sizing: border-box; border-bottom:1px solid #e3e3e3 }
.id_list ul li:first-child{border-top:1px solid #e3e3e3}
.id_list ul li > div:first-child{display:block; float:left; }
.id_list ul li > div:last-child{display:block; float:right; }
.id_list input[type="radio"] {
display:none;
}
.id_list input[type="radio"] + label{
cursor: pointer;
}
.id_list input[type="radio"] + label span {
display:inline-block;
width:25px;
height:25px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url('../images/common/btn_chkbox_off.png') left top no-repeat;
cursor:pointer;
}
.id_list input[type="radio"]:checked + label span {
background:url('../images/common/btn_chkbox_on.png') left top no-repeat;
}
.progress{padding-top:50px; text-align: center;}
.blue{color:#006fc5;}
.red{color:#b40000;}
.yellow{color:#e78c03;}
strong.brown{color:#9d5a35; font-size: 1.05rem;}
strong.yellow{color:#e78c03; font-size: 1.05rem;}
/*parentInputArea*/
.parentInputArea{width:800px; margin:0 auto; border:4px solid #e2e2e2; box-sizing: border-box;}
.parentInputArea div{overflow:hidden; width:100%; clear: both; box-sizing: border-box;}
.parentInputArea div h5{float:left; font-size: 16px; font-weight:500;}
.parentInputArea div ul, .parentInputArea div ul li, .parentInputArea div .email{float: left;}
.parentInputArea div ul li{padding:0 20px}
.idSelect{padding:30px 45px 10px; }
.emailInput{padding:10px 45px 30px; }
.idSelect input[type="radio"] {
display:none;
}
.idSelect input[type="radio"] + label{
cursor: pointer;
}
.idSelect input[type="radio"] + label span {
display:inline-block;
width:25px;
height:25px;
margin:-2px 8px 0 0;
vertical-align:middle;
background:url('../images/common/btn_chkbox_off.png') no-repeat left top ;
cursor:pointer;
}
.idSelect input[type="radio"]:checked + label span {
background:url('../images/common/btn_chkbox_on.png') no-repeat left top;
}
.idSelect h5{padding-right: 15px;}
.emailInput input[type="text"]{float:left; width: 510px; height:50px; padding:0 25px; margin-left:20px; border:1px solid #e2e2e2; box-sizing: border-box ;font-size:16px; color:#333;}
.parentInputArea .emailInput h5{margin-top: 10px;}
.parentInputArea p{padding:0 45px 30px; font-size:14px; color:#666666; text-align: left; letter-spacing: -0.8px;}
.parentInputArea + .accredit{border-top: none;}
/*joinPolicy*/
.memberAgreeForm{width: 600px; margin:0 auto; text-align:left; padding-top: 20px;}
.memberAgreeForm .termsAll{overflow:hidden; width:100%; height:100%; }
.memberAgreeForm .termsAll .input_chk_all em{color:#006fc5}
.memberAgreeForm .termsAll .input_chk_all{padding-bottom:15px; border-bottom:1px solid #e3e3e3}
.memberAgreeForm .termsAll .input_chk_all, .termsArea .input_chk{display:block;width:100%; letter-spacing: 0px; font-size: 16px; box-sizing: border-box}
.memberAgreeForm .termsAll .input_chk_all input[type="checkbox"], .termsArea .input_chk input[type=checkbox]{display: none; }
.memberAgreeForm .termsAll .input_chk_all input[type="checkbox"] + label span, .termsArea .input_chk input[type="checkbox"] + label span {
display:inline-block;
width:25px;
height:25px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url('../images/common/btn_chkbox_off.png') left top no-repeat;
cursor:pointer;}
.memberAgreeForm .termsAll .input_chk_all input[type=checkbox]:checked + label span, .termsArea .input_chk input[type="checkbox"]:checked + label span {background-image:url('../images/common/btn_chkbox_on.png');}
.memberAgreeForm .termsArea{width:100%; margin:30px auto 0}
.memberAgreeForm label{cursor: pointer;}
.memberAgreeForm .termsArea .article{width:100%; height:200px; padding:0; margin:0; overflow-y: hidden; text-align:left;box-sizing: border-box; background-color:#fff; border:1px solid #e3e3e3;}
.memberAgreeForm .termsArea .article h3{font-size:16px; padding-bottom:20px;text-align:left;}
.memberAgreeForm .termsArea .article section{font-size: 14px;color:#333;text-align:left;}
.memberAgreeForm .termsArea .article pre{font-size:14px; color:#333;}
.memberAgreeForm .termsArea .input_chk{display:block; width:100%; font-size: 16px; padding:5px 0 }
.memberAgreeForm .termsArea .input_chk input[type=checkbox]{margin:0}
.memberAgreeForm .termsArea .input_chk em{color:#f55136}
.memberAgreeForm .term2 .article_title:first-child{margin-top:0;}
.memberAgreeForm .term2 .article_title{margin-top:50px}
.memberAgreeForm .adChk{margin:20px auto 0}
.memberAgreeForm .adChk .input_chk em{color:#006fc5}
.memberAgreeForm .adChk .detail{font-size: 14px; color:#666; text-decoration: underline; margin-left:5px}
.memberAgreeForm .ageCheck{margin:20px auto 0}
.memberAgreeForm .ageCheck .input_chk em{color:#f55136}
.memberAgreeForm .ageCheck .detail{font-size: 14px; color:#666; text-decoration: underline; margin-left:5px}
.memberAgreeForm .consentReceiveEvents{margin:20px auto 0}
.memberAgreeForm .consentReceiveEvents .input_chk em{color:#f55136}
.memberAgreeForm .consentReceiveEvents .detail{font-size: 14px; color:#666; text-decoration: underline; margin-left:5px}
/*mypage*/
.contents.mypage{text-align: center; width:900px; }
.contents.mypage .bigTitle{width:900px; padding-top:0}
.contents.mypage .bigTitle h2{padding:0}
.contents.mypage .icon{padding:20px 0;}
.contents.mypage h3{font-size:18px; display:block; padding-bottom:50px; text-align: center; font-weight: normal;}
.contents.mypage h4{font-size:20px; display:block; padding-bottom:10px; margin-top:50px; text-align: left; font-weight:500;}
.contents.mypage h3 em{font-size: 18px;}
.contents.mypage h4 em{font-size: 20px;}
.contents.mypage .myInfo{margin:50px auto; width:100%; text-align: center;}
.contents.mypage .change{margin:50px auto; width:600px; text-align: center;}
.myInfo .dropOut a{float:left; margin-top:0px}
.contents.mypage .btnArea{width:100%; padding:25px 0 150px; }
.contents.mypage .explain{width:100%; position: relative; overflow: hidden; margin:10px 0 50px}
.contents.mypage .explain p{float: left; font-size: 14px;}
.contents.mypage .explain a{float: right; display: block; padding:7px 15px; background-color: #999999; color:#fff}
.chkCashAgreeForm {margin-bottom:15px}
.chkCashAgreeForm .input_chk{padding:15px 10px;display:block;width:100%; text-align: left; letter-spacing: 0px; font-size: 16px; box-sizing: border-box; border:1px solid #e3e3e3}
.chkCashAgreeForm .input_chk input[type="checkbox"]{display: none; }
.chkCashAgreeForm .input_chk input[type="checkbox"] + label span{
display:inline-block;
width:25px;
height:25px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url('../images/common/btn_chkbox_off.png') left top no-repeat;
cursor:pointer;}
.chkCashAgreeForm .input_chk input[type=checkbox]:checked + label span {background-image:url('../images/common/btn_chkbox_on.png');}
.contents.mypage .terms{padding:35px; border:4px solid #e9e9e9; background-color:#f3f3f3}
.contents.mypage .terms ul li, .contents.mypage .terms ul li strong{text-align: left; font-size: 14px;}
.adultCheck{padding:50px 0 10px; }
.adultCheck ul li{overflow:hidden ;display:block; clear:both; width:100%; box-sizing: border-box; background-color: #e3e3e3; }
.adultCheck ul li:first-child{margin-bottom:10px}
.adultCheck input[type="radio"] {
display:none;
}
.adultCheck input[type="radio"] + label{
display:block;
cursor: pointer;
width:100%;
height:100%;
padding:16px 5px;
color:#666666;
font-size: 18px;
}
.adultCheck input[type="radio"] + label span {
display:inline-block;
width:25px;
height:25px;
margin:-2px 10px 0 0;
vertical-align:middle;
cursor:pointer;
}
.adultCheck input[type="radio"]:checked + label span {
background:url('../images/common/btn_adtchkbox_on.png')no-repeat left center ;
}
.adultCheck input[type="radio"]:checked + label{
background-color: #333333;
color:#fff;
}
.myInfo .accredit{margin-top:40px; padding-top:20px; border-top:1px solid #e2e2e2;}
.myInfo .accredit h3{padding-bottom: 5px;}
.myInfo .accredit .btnArea{width:100%; padding:20px 0;}
.myInfo .accredit .explain{color:#999}
.myInfo .deleting{width:600px; display: block; margin:0 auto; padding:50px 0; font-size: 18px; border-bottom:1px solid #e3e3e3; font-weight:500; line-height: 18px;}
.myInfo .deleting em{font-size: inherit;}
.myInfo .deleting + p{width:100%; display:block; margin:50px 20px; font-weight:500; text-align: center; box-sizing: border-box; }
.mypage .mailChkBox { width:100%; margin:0 auto 50px}
.mypage .mailChkBox .mailBox{width:100%;position:relative ; padding:10px 20px; border:1px solid #e2e2e2; box-sizing: border-box; text-align: left;}
.mypage .mailChkBox .input_chk input[type="checkbox"], .termsArea .input_chk input[type=checkbox]{display: none; }
.mypage .mailChkBox .input_chk input[type="checkbox"] + label span, .termsArea .input_chk input[type="checkbox"] + label span {
display:inline-block;
width:25px;
height:25px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url('../images/common/btn_chkbox_off.png') left top no-repeat;
cursor:pointer;}
.mypage .mailChkBox .input_chk input[type=checkbox]:checked + label span, .mailChkBox .input_chk input[type="checkbox"]:checked + label span {background-image:url('../images/common/btn_chkbox_on.png');}
.mypage .mailChkBox label{cursor: pointer;}
.mypage .mailChkBox .input_chk{display:block; width:100%; font-size: 16px; padding:5px 0 }
.mypage .mailChkBox .input_chk input[type=checkbox]{margin:0}
.mypage .mailChkBox .input_chk em{color:#006fc5}
.mypage .mailChkBox .input_chk a{position:absolute; display: block; right:20px; top:50%; padding:5px 10px; color:#fff; background-color:#e78c03; transform: translate(0, -50%);}
/*게임시간선택제*/
.gameTime {margin:50px auto}
.gameTime .tabs{overflow:hidden; width: 100%; margin:80px 0 50px 0; border-bottom:1px solid #333}
.gameTime .tabs ul li{float:left; width:224px; height:60px; line-height: 60px; box-sizing: border-box; border:1px solid #e2e2e2; border-right:0;}
.gameTime .tabs ul li:last-child{border-right:1px solid #e2e2e2}
.gameTime .tabs ul li.on{border:none; background-color:#333;}
.gameTime .tabs ul li a{display: block; width:100%; height:100%; font-size: 18px;}
.gameTime .tabs ul li.on a{color:#fff}
.gameTime .tabs + .tabcon{min-height:600px}
.gameTime h4 b{color:#666; font-size: 14px; font-weight: normal; padding-left:20px }
.gameTime .textBox{width:100%; margin-bottom:50px}
.gameTime .textBox li{width:100%; display:block; padding:35px 25px; letter-spacing: 0px; box-sizing: border-box;}
.gameTime .textBox li.date{background-color: #f8f8f8; color:#666; font-size: 14px;}
.gameTime .textBox li strong{font-size: inherit;}
.gameTime .steps {width:100%; overflow:hidden; margin-bottom: 40px; }
.gameTime .steps li{position:relative;float:left; width:25%; box-sizing: border-box; border:1px solid #333; border-right:0; }
.gameTime .steps li:last-child{border-right:1px solid #333}
.gameTime .steps li img{padding:30px 0}
.gameTime .steps li .nextStep{padding:0; position: absolute; top:40%; right:-23px; z-index: 1;}
.gameTime .steps li p{padding:20px; margin:4px;background-color: #f4f4f4;}
.gameTime .timeSetting{width:100%; box-sizing: border-box;}
.gameTime .timeSetting span{display:block; text-align: right;}
.gameTime .timeSetting .timesetbg{position: relative; overflow:hidden; width:100%; margin:20px auto; background:url('../images/common/bg_table.jpg') no-repeat left top; border:1px solid #e6e6e6; border-top: 0; box-sizing: border-box; padding-top:30px; padding-bottom:20px; }
.gameTime .timeSetting .noChange{position:absolute; display:block; width:100%; height:100%; z-index: 5; box-sizing:border-box; }
.gameTime .timeSetting h4{text-align: center; margin-top:0}
.gameTime .timeSetting .terms{background-color:transparent; border:0; padding:0; margin-bottom:50px;}
.gameTime .timeSetting .terms h5{text-align: left; font-weight:500; font-size: 18px; }
.gameTime .timeSetting .terms li{font-size: 16px !important;}
.gameTime .timeSetting .terms li strong{font-size: inherit !important;}
.gameTime .explain li{text-align: left;}
.gameTime .grayBox{width:100%; padding:100px 0;background-color:#f3f3f3; border:4px solid #e9e9e9; box-sizing: border-box;}
.child_id_list{padding: 20px 0 0 0; }
.child_id_list ul li{overflow:hidden ;display:block; width:100%; box-sizing: border-box; margin-bottom: 10px; }
.child_id_list ul li label{float:left}
.child_id_list ul li label b{text-align: left; padding:1px 12px; background-color: #666; color:#fff; margin:0 5px ;font-weight:normal; font-size:12px; border-radius: 30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
.child_id_list input[type="radio"] {
display:none;
}
.child_id_list div label{
display:block;
cursor: pointer;
width:100%;
height:100%;
text-align: left;
font-size: 16px;
padding:15px 10px;
border:1px solid #ddd;
background-color: #fff;
box-sizing: border-box;
}
.child_id_list div label span {
display:inline-block;
width:85px;
height:25px;
margin:0 auto;
vertical-align:middle;
cursor:pointer;
background:url('../images/common/btn_chkbox_off.png')no-repeat center center ;
}
.child_id_list input[type="radio"]:checked + label span {
background:url('../images/common/btn_chkbox_on.png')no-repeat center center ;
}
.child_id_list input[type="radio"]:checked + label{
border:1px solid #e78c03;
background-color:#fff9ef
}
.child_id_list .listView{
display:block;
width:100%;
height:100%;
position: relative;
overflow:hidden;
text-align: left;
font-size: 16px;
padding:6px 10px;
border:1px solid #ddd;
background-color: #fff;
box-sizing: border-box;
}
.child_id_list .listView p{
float:left;
margin-top: 6px;
font-size: 16px;
}
.child_id_list .listView b {
text-align: center;
display: inline-block;
padding: 1px 10px;
min-width: 45px;
color: #fff;
margin: 0 10px;
font-weight: normal;
font-size: 12px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.child_id_list .listView a {
display: block;
float: right;
width:75px;
height:40px;
line-height: 40px;
text-align:center;
font-size:16px;
background-color: #333;
color:#fff;
}
.delete{width:100%; height:1027px; margin:0 auto 0; padding-top: 70px;text-align: center; background: url('../images/common/bg_deleteComplete.jpg') no-repeat center center; }
.delete.bgDeleting{ background-image: url('../images/common/bg_deleting.jpg') }
.delete .bigTitle{padding-top:0}
.delete .myInfo{margin:50px auto; width:600px; text-align: center;}
.delete .icon{padding:20px 0;}
.delete .btnArea button{width:267px; height:67px;}
/*점검*/
.pageChk {position:relative; width:1300px; min-height:600px; margin:200px auto 50px; text-align: center; box-sizing: border-box; }
.pageChk h1{font-size: 34px; padding-bottom:30px; line-height: 65px;}
.pageChk h1 strong{font-size: 70px;}
.pageChk img{position: absolute; display: block; z-index: 1;}
.pageChk .img1{top:200px;left:0px;}
.pageChk .img2{top:120px;right:-150px;}
.pageChk .errorBox{position:relative; width:580px; margin:100px auto 0; padding:20px; box-sizing: border-box; border:4px solid #e3e3e3;}
.pageChk .errorBox img{position: absolute; top:-70px; left:50%; margin-left:-94px}
/*error페이지*/
.error{position:relative; width:800px; min-height:500px; margin:150px auto 50px; text-align: center; box-sizing: border-box; z-index: 2; }
.error h1{font-size: 50px; font-weight:500; color:#333; padding:20px 0; letter-spacing: -1px; line-height: 50px;}
.error h1 em{font-size: inherit; font-weight: inherit; color:#8f8f8f; }
.error .explain{padding:10px 0}
.error + .bgImg{position: absolute;z-index: 0;}
.error + .bgImg1{ left:250px; top:170px; }
.error + .bgImg2{ right:250px; top:230px; }
.error .btnArea{width:240px}
.error .btnArea .btn_ok{background-color:#333}
/* view 공통 */
.view > .title{width:100%; min-height:85px; line-height:normal; box-sizing:border-box; padding:25px 0; overflow:hidden; border-bottom:1px solid #333333}
.view .title span{display:block; width:100%; font-size: 24px; padding-bottom:5px; font-weight:500; color:#333; text-align: left; word-break: break-all; }
.view .title span .new{padding-top: 5px;}
.view .title p{display:inline-block; font-size:16px ;color:#666}
.view .title div p:first-child{padding-right:20px; }
.view .title div p:last-child{padding-left:20px;}
.view .title div a{ padding-left:20px;}
.view .title div a img{padding-top: 5px;}
.view .title .left{float: left;max-width:80%; }
.view .title .right{float: right;}
.view .title .event_date{float:right}
.view .conts{color:#333;width:100%; min-height:600px; padding:50px 0; box-sizing: border-box; word-break: break-all; font-size: 14px;}
.view .conts img{max-width: 1300px; height:auto !important;}
.view .conts .you_tube {overflow:hidden; position: relative; width:100%; height: 0; padding-bottom: 56.25%; max-width: 1300px; margin:0 auto; z-index: 9;}
.view .conts .you_tube iframe,
.view .conts .you_tube object,
.view .conts .you_tube embed {position: absolute; display: block; width: 100%; height: 100%; top:0 ;left:0;}
.conts_btn{width:100%; overflow:hidden; padding:30px 0; box-sizing: border-box; border-top:1px solid #e2e2e2;}
.conts_btn .left{float:left;}
.conts_btn .right{float:right;}
.conts_btn .right button{display: block; float: left;color:#fff; text-align: center; background-color:#333; padding:12px 30px; margin-left:10px}
.btnList{float:left; display: block; color:#fff; text-align: center; background-color:#333; padding:12px 20px; }
.btn_write{float:right; display: block;color:#fff; text-align: center; background-color:#333; padding:12px 25px; }
/* 댓글영역 */
.cmtArea{ position: relative; width:1300px; margin:0 auto 100px; box-sizing:border-box;}
.cmtArea .cmt_count{width:100%; margin-bottom: 10px;}
.cmtArea .cmt_count span{font-size:20px; color:#333;}
.cmtArea .cmt_count em{font-size:20px; color:#e78c03;}
.cmtArea .cmt_write{overflow:hidden; width:100%; height:100%}
.cmtArea .cmt_write textarea{float:left; width:1175px; min-height: 120px; margin-right:5px; border:1px solid #e2e2e2; background-color:#f9f9f9; box-sizing: border-box; padding:20px; color:#999; font-size:16px; resize: none}
.cmtArea .register, .cmtArea .modify, .cmtArea .cancel{float:left; display:block; width:120px; height:120px; line-height: 120px; text-align: center; color:#fff; background-color:#e78c03}
.cmtArea .cmt{position:relative; overflow:hidden ;width:100%; padding:20px 0 0 65px; box-sizing:border-box; }
.cmtArea .cmt .user{position:absolute; width:52px; top:30px; left:0; }
.cmtArea .cmt .title{clear:both; padding:10px 0; overflow: hidden}
.cmtArea .cmt .title .name, .cmtArea .cmt .title p, .cmtArea .cmt .title a, .cmtArea .mycmt .title .writer{float:left; font-size:16px;}
.cmtArea .cmt .title .name, .cmtArea .cmt .title p{letter-spacing:-1px; }
.cmtArea .cmt .title .name{font-weight:500; margin-right:10px}
.cmtArea .cmt .title p, .cmtArea .cmt .title a{ color:#666;margin-right: 10px ; background:url('../images/common/img_bar2.gif')no-repeat left center; padding-left:10px}
.cmtArea .cmt a{display: block; text-align: center; font-size: 16px; box-sizing: border-box }
.cmtArea .cmt .reply{position:relative; display:block;word-break: break-all;}
.cmtArea .cmt .reply span {width:100%; display:inline-block; padding:30px; box-sizing:border-box; background:#ededed; border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px;}
.cmtArea .cmt .reply:after {content:''; position:absolute; width:0; height:0; border-style:solid;border-color:transparent #ededed transparent transparent; left:-7px; border-width:8px; top:10px; transform: rotate(135deg); border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px;}
/*대댓글*/
.cmtArea .cmtofcmt{position:relative; overflow:hidden ;width:100%; padding:20px 0 0 65px; box-sizing:border-box; }
.cmtArea .cmtofcmt .user{position:absolute; width:52px; top:30px; left:0; }
.cmtArea .cmtofcmt .title{clear:both; padding:10px 0; overflow: hidden}
.cmtArea .cmtofcmt .title .name, .cmtArea .cmtofcmt .title p, .cmtArea .cmtofcmt .title a, .cmtArea .mycmt .title .writer{float:left; font-size:16px;}
.cmtArea .cmtofcmt .title .name, .cmtArea .cmtofcmt .title p{letter-spacing:-1px; }
.cmtArea .cmtofcmt .title .name{font-weight:500; margin-right:10px}
.cmtArea .cmtofcmt .title p, .cmtArea .cmt .title a{ color:#666;margin-right: 10px ; background:url('../images/common/img_bar2.gif')no-repeat left center; padding-left:10px}
.cmtArea .cmtofcmt a{display: block; text-align: center; font-size: 16px; box-sizing: border-box }
.cmtArea .cmtofcmt .reply{position:relative; display:block;word-break: break-all;}
.cmtArea .cmtofcmt .reply span {width:100%; display:inline-block; padding:30px; box-sizing:border-box; background:#ededed; border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px;}
.cmtArea .cmtofcmt .reply:after {content:''; position:absolute; width:0; height:0; border-style:solid;border-color:transparent #ededed transparent transparent; left:-7px; border-width:8px; top:10px; transform: rotate(135deg); border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px;}
/* .cmtArea .cmtofcmt{width:95%; margin-left:5%;box-sizing:border-box;} */
.cmtArea .cmtofcmt .replyModify{width:100%; box-sizing:border-box; background:none; }
.cmtArea .replyWrite, .cmtArea .replyModify{width:100%; box-sizing:border-box; background:none; }
.cmtArea .replyWrite, .cmtArea .replyModify{padding:10px 0}
.cmtArea .replyWrite .reply, .cmtArea .replyModify .reply{margin-left:3%;}
.cmtArea .replyWrite .write{width:100%}
.cmtArea .replyWrite .write textarea, .cmtArea .replyModify textarea{float:left;width:79.7%; min-height:90px; border:1px solid #e2e2e2; background-color:#f9f9f9; box-sizing: border-box; padding:20px; color:#999; font-size:16px;margin-right:5px; resize: none}
.cmtArea .cmtofcmt .replyWrite{padding:10px 0}
.cmtArea .cmtofcmt .replyWrite .write textarea, .cmtArea .cmtofcmt .replyModify .write textarea{width:78.6%;}
.cmtArea .replyWrite .cancel, .cmtArea .replyModify .cancel{height:90px; line-height:90px; margin-right:5px; background-color:#999}
.cmtArea .replyWrite .register, .cmtArea .replyModify .register{height:90px; line-height:90px}
/*더보기*/
.cmtArea .moreList{background:none; padding: 0; margin:20px 0; border-top:1px solid #ebebeb;border-bottom:1px solid #ebebeb}
.cmtArea .moreList .btn_more{ width:100%; display:Block; padding: 20px 0; font-weight:500;}
/*write*/
.write{overflow:hidden; position:relative; }
.write > .title{width:100%; line-height:normal; box-sizing:border-box; padding:25px 0 20px; margin-bottom:20px; overflow:hidden; font-size: 24px; font-weight:500; color:#333; text-align: left; border-bottom:1px solid #333333}
.write .foldable{width:100%; height:50px; margin-bottom:10px;clear: both; box-sizing: border-box;border:1px solid #e2e2e2; }
.write .foldable.add_folder{border:none; }
.write .foldable.add_folder div{float:right; margin-top:4px }
.write .foldable.add_folder div a{float:left;display: block; margin-left:5px; padding:10px 15px; color:#fff; background-color:#e78c03; box-sizing: border-box;}
.write .foldable.add_folder div a img{padding-right: 10px;}
.write input[type="text"]{float:left; width:100%; height:100%; padding:0 25px; border:none; box-sizing: border-box ;font-size:16px; color:#333;}
.write input.title{background-color:#f9f9f9}
.write .txtTit{float:left;display:block; width:18%; height:100%; line-height: 50px; padding-left:25px; border:none; box-sizing: border-box;font-size:16px; color:#999999; }
.write .txtTit img{padding-top:15px; padding-right: 10px;}
.write .filebox{float:left; min-width:40%;}
.write input#file_route, .write input.file_route{width:875px; height:48px;}
.write input::placeholder, .editor textarea::placeholder{color:#999999}
.write .deleteArea{width:100%; height:auto; overflow: auto; min-height: 65px; padding:0; border:0; box-sizing: border-box;}
.write .delete_chkbox{display:block; float:left; padding:5px 12px; margin:5px; border-radius: 5px; background-color: #dedede;}
.write .delete_chkbox input{margin-right: 5px;}
.write .deleteArea p{clear: both; font-size: 14px; color:#666666; padding:0 5px;}
.filebox label {cursor: pointer; overflow:hidden; margin-top:4px; margin-right:5px; box-sizing: border-box }
.filebox label.btn_upload{display:inline-block; width:90px; height:40px; line-height:40px; background:#333; color:#fff; text-align: center; }
.filebox input[type="file"] {clip: rect(0, 0, 0, 0); position:absolute; width:0; height:0;}
.write .btnBox{float: right;margin-top: 4px; margin-right:4px}
.write .btnBox .btn_delete{float:left; display:block; width:90px; height:40px; line-height:40px; background:#999999; color:#fff; text-align: center; }
.write .btnBox .more{float:left; display: block;}
.editor {width:100%; min-height: 395px; background-color:#f9f9f9; border:1px solid #e2e2e2; box-sizing: border-box; }
.editor textarea{width:100%; min-height: 395px; resize: none; border:none; background-color:#f9f9f9; box-sizing: border-box; padding:15px; font-size:16px; color:#333}
.write_btnArea{text-align: center; margin-top:20px;}
.write_btnArea .btn_submit, .write_btnArea .btn_cancel{display:inline-block; margin:0 5px; width:100px; height:50px; line-height:50px; color:#fff}
.write_btnArea .btn_submit{background-color:#333;}
.write_btnArea .btn_cancel{background-color:#999;}
/*downDriver*/
.downDriver{overflow:hidden; margin-bottom: 50px;}
.downBox{position: relative; overflow: hidden;}
.downBox ul li{position: relative; float:left; width:640px; height:320px; margin:0 10px; background-repeat:no-repeat; background-position:center center;background-color: #f9f9f9;}
.downBox ul li:first-child{margin-left:0}
.downBox ul li:last-child{margin-right:0}
.downBox ul li.directX{background-image: url('../images/common/img_directx.png'); background-position-y:30px;}
.downBox ul li.radeon{background-image: url('../images/common/img_radeon.png');background-position-y:88px}
.downBox ul li.nvidia{background-image: url('../images/common/img_nvidia.png');background-position-y:50px}
.downBox ul li a{position: absolute; left:50%; bottom:20px; margin-left:-130px; display: block; width:260px; height:60px; line-height:60px; font-size:18px; text-align: center; color:#fff; background-color:#333; }
.downBox ul li a:hover{background-color:rgba(51,51,51,0.9);}
.downDriver .terms{margin:40px 0}
.downDriver .terms ul li{color:#999; font-size: 14px; letter-spacing: 0px;}
/*iframe*/
.frameWrap iframe{width:100%;}
/*faq*/
.faq .frameWrap iframe{width:100%; min-height: 931px;}
.faq .go_help_wrap{width:100%; background-color: #e8f7f8; height:80px; margin:50px auto; line-height: 80px; text-align: center;}
.faq .go_help_wrap p{display: inline-block; padding:0 5px}
.faq .go_help_wrap .btn_go_help{display:inline-block; width:160px; height:46px; line-height: 46px; margin:0 5px; text-align:center; font-size:16px; color:#fff; background-color: #333;}
/*help*/
.contents.help{width:800px}
.contents.help .frameWrap iframe{width:100%; min-height: 925px; padding:10px 0}
.contents.help .loginWrap{text-align: center; padding:30px 0; min-height: 800px; box-sizing: border-box;}
.contents.help .loginWrap .explain{margin: 30px 0;}
.contents.help .loginWrap ul{font-size: 0;}
.contents.help .loginWrap ul li{position:relative; display:inline-block; width:340px; height:240px; background-repeat:no-repeat; background-position: center 50px; background-color: #f9f9f9;}
.contents.help .loginWrap ul li.btnUserLogin{margin-right:20px; background-image: url('../images/common/img_userlogin.png');}
.contents.help .loginWrap ul li.btnGuestLogin{background-image: url('../images/common/img_guestlogin.png');}
.contents.help .loginWrap ul li a{position:absolute; display:block; width:240px; height:60px; line-height: 60px; color:#fff; font-weight:500; font-size: 22px; text-align: center; left:50%; margin-left:-120px; bottom:30px}
.contents.help .loginWrap ul li.btnUserLogin a{background-color: #e78c03;}
.contents.help .loginWrap ul li.btnGuestLogin a{background-color: #333;}
/** table_style 구조 **/
table{width:100%;font-size:16px; color:#333; font-style:normal; table-layout: fixed; text-decoration: none; border-collapse:collapse;}
table tr{background-color: #fff; height: 60px; box-sizing:border-box;}
table th{border:1px solid #e2e2e2;vertical-align: middle; background-color:#efefef}
table td{font-size:16px;height:60px; letter-spacing: -0.4px; padding:0; border:1px solid #e2e2e2; padding:0 5px; vertical-align: middle; box-sizing: border-box;}
table td a{font-size:16px;max-width:80%;display:inline-block;}
table td .new img{margin-top:0; }
table td a.disable{background-color:#999 !important; cursor: default;}
/*공통아이콘*/
.new{display:inline-block; vertical-align: top;}
.new img{vertical-align: middle; margin-left:5px; display:inline-block;}
.count{display:inline-block; font-weight: normal; vertical-align: top; margin-left:3px; font-size:16px; text-align:left}
span.img, span.media{display:inline-block; font-weight: normal; vertical-align: top; margin-left:5px; margin-top: 2px;}
span.media{margin-top:3px}
/*table list*/
table.list{border-top:1px solid #e2e2e2}
table.list th{background-color: #fff;text-align: center; border:none}
table.list tr{background-color: #fff;border-bottom:1px solid #e2e2e2}
table.list tr:hover{background-color:#f7f7f7; }
table.list tr td{border:none; text-align: center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
table.list td.title{text-align: left; padding:0 20px;}
table.list tr.notify{background-color:#f7f7f7}
table.list td.user{text-align: left; line-height:60px; }
table.list td.user span{text-align: left; padding-left:10px; }
table.list td.user img{vertical-align: middle;}
table.list td.name{color:#666}
table.list td.date{color:#666666}
table.list tr a {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
table.list tr a::before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: #333;
height: 1px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
table.list tr a:hover:before, table.list tr a:focus:before, table.list tr a:active:before {
left: 0;
right: 0;
}
table tr td.like p{
display: block;
}
table tr td.like p img{
vertical-align: middle;
margin-right:5px
}
/*table show*/
table.show th{background-color: #f9f9f9;text-align: center; font-weight: normal;}
table.show tr{background-color: #fff; border:1px solid #e2e2e2; height:50px;}
table.show tr td{color:#999; height:50px; text-align: center;}
table.show tr td:first-child{background-color: #f9f9f9;}
/*table page*/
table.page th{background-color: #f9f9f9;text-align: center; font-weight: normal;}
table.page tr{background-color: #fff; border:1px solid #e2e2e2; height:60px;box-sizing: border-box; }
table.page tr td{color:#333; height:60px; line-height:60px; text-align: left; padding:0 20px; width:100%;}
table.page tr td:first-child{ text-align: center; background-color: #f9f9f9; width: 105px;}
table.page tr td a{display:block; width:160px; height:45px; line-height:45px;margin-top:8px; float:right; text-align: center; background-color:#333; color:#fff}
table.page tr td img{padding:22px 10px 0 0;}
table.page .save { background-color: #e78c03;}
table.page .highlight { color: #6f5ce5; display: inline-block; }
table.page #receiveAgree { display: none; }
table.page input[type="checkbox"] + label span {
display: inline-block; width: 25px; height: 25px; margin: -2px 10px 0 0; vertical-align: middle; background: url(../images/common/btn_chkbox_off.png) left top no-repeat; cursor: pointer;
}
table.page input[type=checkbox]:checked + label span {
background-image: url(../images/common/btn_chkbox_on.png);
}
/*table error*/
table.error{width:100%; min-height:0; margin:0 auto; }
table.error tr{background-color: #fff; border:0;box-sizing: border-box; height:40px; border: 0; }
table.error tr th{background-color: #fff;text-align: right; padding:0 15px; border:0; font-weight: normal; background:url('../images/common/img_errerBar.jpg') no-repeat right center;}
table.error tr td{color:#333; text-align: left; padding:0 15px; width:100%; height:40px; border:0;}
/*table gametimeset*/
table.gametimeset{width:865px; margin:0 auto }
table.gametimeset th{background-color:#fff; font-weight: normal; height:44px; width:32px; border: none; font-size: 14px; color: #666;}
table.gametimeset th:first-child{padding-left:0;}
table.gametimeset tr{background-color: #fff; border:none; height:30px; line-height: 15px;}
table.gametimeset td{background-color: #fff; border:none; height:30px; padding:0; font-size: 14px; color: #666;}
table.gametimeset .allchecks , table.gametimeset .allchecks td{height:20px}
.gametimeset input[type="checkbox"] {
display:none;
}
.gametimeset input[type="checkbox"] + label{
cursor: pointer;
}
.gametimeset input[type="checkbox"] + label span {
display:inline-block;
width:30px;
height:30px;
vertical-align:middle;
background:url('../images/common/img_Check.png') left top no-repeat;
cursor:pointer;
}
.gametimeset input[type="checkbox"]:checked + label span {
background:url('../images/common/img_noCheck.png') left top no-repeat;
}
.gametimeset .allchecks input[type="checkbox"] + label span {
display:inline-block;
width:14px;
height:14px;
vertical-align:middle;
background:url('../images/common/img_allChk_off.png') left top no-repeat;
cursor:pointer;
}
.gametimeset .allchecks input[type="checkbox"]:checked + label span {
background:url('../images/common/img_allChk_on.png') left top no-repeat;
}
/** paging **/
.paging{clear:both; display:block; margin:0 auto; padding:10px 0; text-align: center}
.paging .prev, .paging .next{width:40px; height:40px; border:none; padding:0; background-repeat: no-repeat; background-position:left center; text-indent: -99999px;}
.paging .prev{margin-right:20px; background-image:url('../images/common/btn_paging_prev.jpg');}
.paging .next{margin-left:20px; background-image:url('../images/common/btn_paging_next.jpg');}
.paging .prev.off{background-image:url('../images/common/btn_paging_prev_off.jpg');}
.paging .next.off{background-image:url('../images/common/btn_paging_next_off.jpg');}
.paging .prev.off:hover{background-color:transparent; background-image:url('../images/common/btn_paging_prev_off.jpg'); cursor: default;}
.paging .next.off:hover{background-color:transparent; background-image:url('../images/common/btn_paging_next_off.jpg'); cursor: default;}
.paging .prev:hover{background-image:url('../images/common/btn_paging_prev_on.jpg');}
.paging .next:hover{background-image:url('../images/common/btn_paging_next_on.jpg');}
.paging a {display: inline-block; color: #b7b7b7; width:40px; height:40px; line-height: 40px; box-sizing: border-box; margin-left:-3px; text-align: center; vertical-align: top;}
.paging a:hover{color:#fff; background-color: #333;}
.paging strong{display: inline-block; color:#fff; font-weight: normal; width:40px; height:40px; line-height: 40px; box-sizing: border-box; background-color: #333;margin-left:-3px; text-align: center; vertical-align: top; cursor:default;}
/*게시판 search*/
.board_search{position:relative; width:596px; display:flex; justify-content: left; overflow:hidden; margin:20px auto; text-align: center}
.board_search .selectList{width:140px; height:46px; line-height:46px; margin-right:6px; cursor: pointer; box-sizing: border-box; background-color: #fff; border:1px solid #e2e2e2}
.board_search .selectList select{width:100%; padding:0 20px; box-sizing: border-box; cursor: pointer; background: url('../images/common/btn_select.png') no-repeat 90% center; background-size: 15px;}
.board_search .searchBox input[type="text"]{width:410px; height:46px; padding:0 20px; box-sizing: border-box; border:1px solid #e2e2e2; border-right:none; color:#333}
.board_search .searchBox input[type="text"]::placeholder{color:#888 !important}
.board_search .searchBox input[type="text"]:-ms-input-placeholder{color:#888 !important}
.board_search .searchBox .btn_search {position: absolute; right:0; width:46px; height:46px;background-image:url('../images/common/btn_search_off.jpg'); background-position:left center; background-repeat:no-repeat; text-indent: -99999px;transition:all .3s}
.board_search .searchBox .btn_search:hover{background-image:url('../images/common/btn_search_on.jpg'); }
/** blind **/
.blind{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:black; opacity : 0.7; filter: alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; z-index:52; }
/* popup */
.blind{
display:none;
position:absolute;
top:0;
left:0;
background-color:black;
width:100%;
height:4254px;
z-index:21;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.popup{
display:none;
position: fixed;
top:50%;
left:50%;
width:1200px;
height:675px;
transform: translate(-50%,-50%);
box-sizing: border-box;
z-index: 25;
}
.popup > div{
width:100%;
height:100%;
}
.popup .btn_close{
position: absolute;
top: -40px;
right: 50%;
margin-right:-16.5px;
width: 33px;
height: 33px;
z-index: 25;
cursor: pointer;
}
.popup .btn_close:hover{
animation: rotate 1.5s;
}
.popup strong{
font-size: 1.1rem;
}
.popup .popbg{
width:100%;
display: block;
}
/* 설치, 일반 알림 팝업 */
.pop_alert{width:540px; margin-left: -270px; margin-top:-130px; height: auto; min-height:260px; }
.pop_alert div{padding:60px 20px; text-align: center; background-color:#fff; box-sizing: border-box; font-size:16px; background:url('../images/common/bg_pop_repeat.png') repeat-y center top ; background-size: 100%;}
.pop_alert div a{color:#006fc5; text-decoration:underline}
.pop_alert .btn_close{top:20px; right:20px; margin-right: 0; width:18px; height:18px;}
/* 버튼 팝업 */
.pop_alert2{width:400px; margin-left: -200px; margin-top:-120px; height: auto; min-height:240px; }
.pop_alert2 div{padding:80px 20px 60px; text-align: center; background-color:#fff; box-sizing: border-box;font-size:16px;background:url('../images/common/bg_pop_repeat.png') repeat-y center top ; background-size: 100%;}
.pop_alert2 .btnArea{padding:0 0 30px 0}
.pop_alert2 .btnArea a, .pop_alert2 .btnArea button{width:100px; height:45px; line-height: 45px; display: inline-block; margin:0 5px}
.pop_alert2 .btnArea .btn_ok{background-color: #333; color:#fff;}
.pop_alert2 .btnArea .btn_cancel{background-color: #999; color:#fff;}
.pop_alert2 .btn_close{top:20px; right:20px; margin-right: 0; width:18px; height:18px;}
/* 접속불가 팝업 */
.pop_noAccess{width:490px; margin-left: -245px; margin-top:-130px; height: auto; min-height:260px; }
.pop_noAccess > div{padding:40px 20px; text-align: center; background-color:#fff; box-sizing: border-box; font-size:16px;background:url('../images/common/bg_pop_repeat.png') repeat-y center top ; background-size: 100%;}
.pop_noAccess > div strong{font-size: 20px;}
.pop_noAccess .notToday{width:100%; padding:6px 20px; }
.pop_noAccess .notToday span{ display:block; width:100%; padding:6px 20px; text-align: right; background-color: #888; box-sizing: border-box;}
.pop_noAccess .notToday label{font-size:14px; color:#fff;}
.pop_noAccess .btn_close{top:20px; right:20px; margin-right: 0; width:18px; height:18px;}
/* 날짜, 제한 버튼(한개) 팝업 */
.pop_date{width:430px; margin-left: -215px; margin-top:-120px; height: auto; min-height:240px; }
.pop_date div{padding:60px 20px 30px; text-align: center; background-color:#fff; box-sizing: border-box;font-size:16px;background:url('../images/common/bg_pop_repeat.png') repeat-y center top ; background-size: 100%;}
.pop_date div .date{color:#3b22d1; font-size: 1.1rem;}
.pop_date div .caution{color:#ce0000}
.pop_date .btnArea{padding:0 0 30px 0}
.pop_date .btnArea .btn_ok{width:160px; height:45px; line-height: 45px; display: inline-block; margin:0 5px;background-color: #333; color:#fff;}
.pop_date .btn_close{top:20px; right:20px; margin-right: 0; width:18px; height:18px;}
/**/
.pop_detail{width:480px; margin-left: -240px; margin-top:-130px; height: auto; min-height:260px; }
.pop_detail div{padding:50px; text-align: left; background-color:#fff; letter-spacing:-1px; box-sizing: border-box; font-size:15px; background:url('../images/common/bg_pop_repeat.png') repeat-y center top ; background-size: 100%;}
.pop_detail div strong{display:block; text-align: center;}
.pop_detail div a{color:#006fc5; text-decoration:underline}
.pop_detail .btn_close{top:20px; right:20px; margin-right: 0; width:18px; height:18px;}
/* movie_wrap 동영상 */
.movie_wrap{
position: fixed;
transform: scale(0,0);
opacity: 0;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
top:50%;
left:50%;
width:1082px;
height:698px;
margin-left:-541px;
margin-top:-349px;
z-index:25;
}
.movie_wrap.open_movie{
transform : scale(1,1);
transition: all .5s;
opacity: 1;
}
.movie_wrap .btn_close{
position: absolute;
top: 3%;
right: 50%;
margin-right:-16.5px;
width: 33px;
height: 33px;
z-index: 25;
}
.movie_wrap .btn_close:hover{
animation: rotate 1.5s;
}
.movie_wrap .you_tube{
position:relative;
height:0;
padding-bottom:56.25%;
z-index:25;
}
.movie_wrap .you_tube iframe, .movie_wrap .you_tube object, .movie_wrap .you_tube embed{
position:absolute;
display:block;
width:100%;
height:100%;
margin-top:70px
}
/*popGameTime 내 팝업 */
.popGameTime{width:440px; margin-left: -220px; margin-top:-175px; height: auto; min-height:350px; background-color:#fff; border:1px solid #dddddd; box-shadow: 2px 2px 10px rgba(2,6,0,0.1);}
.popGameTime .btn_close{right:10px; top:10px; width:18px; height:18px; margin:0}
.popGameTime h1{text-align:center; font-size: 20px; margin-top:55px; font-weight:500;}
.popGameTime p{display:block; width:90%; text-align:center; font-size: 20px; margin:10px auto; padding:12px 0; font-size:16px; font-weight:500; background-color:#fff9ef;}
.popGameTime div{padding:10px; text-align: center; background-color:#fff; box-sizing: border-box;font-size:15px}
.popGameTime .btnArea{padding:30px 0}
.popGameTime .btnArea a{width:100px; height:45px; line-height: 45px; display: inline-block; margin:0 5px}
.popGameTime .btnArea .btn_ok{background-color: #333; color:#fff;}
.noPostavailable { display: none; text-align: center; width: 100%; height: 61px; line-height: 61px; border: 1px solid #e2e2e2; border-left: 0; border-right: 0; }
.padding0 { padding : 0px !important }
.pt25 { padding-top : 25px !important }
.mb15 { margin-bottom : 15px !important }
.mt35 { margin-top : 35px !important }
.marketArea { width: 649px; height: 62px; display: flex; position: absolute; top: 56%; left: 50%; transform: translateX(-50%); z-index: 5; justify-content: space-between; }
.marketArea::after { width: 649px; height: 43px; content: ''; position: absolute; z-index: 5; background: url(../images/common/img_downloadBanner.png) no-repeat; bottom: -79%; }
.mainVisual .marketArea {top: 50%; }
.marketArea li { width: 212px; height: 100%; display: block; background: url(../images/common/img_market_221107.png) no-repeat; }
.marketArea li:nth-child(2){ background-position: -218px 0; }
.marketArea li:nth-child(3){ background-position: -438px 0; }
.marketArea li a{ width: 100%; height: 100%; display: block; }
.specialCouponWrap { width: auto; height: auto; min-height: 300px; border: 1px solid #e9e9e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;}
.specialCouponWrap div { padding-left: 57px; box-sizing: border-box; max-width: 480px; }
.specialCouponWrap img { display: block; }
.specialCouponWrap h1 { color: #333333; display: block; text-align: left; margin-top: 30px; margin-bottom: 30px; font-size: 26px; font-weight: bold; }
.specialCouponWrap p { font-size: 14px; width: 480px; }
.specialCouponWrap span { position: relative; color: #999999; font-size: 13px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; box-sizing: border-box; }
.specialCouponWrap span a { font-size: 13px; text-decoration: underline; }
.specialCouponWrap span::before { content: ''; background: url(../images/common/warring.png)no-repeat ; width: 16px; height: 15px; position: absolute; left: 76px; top: 33px;}
.specialCouponWrap table { width: 480px; border: 1px solid #e9e9e9; height: 120px; margin-top: 30px; margin-bottom: 30px; }
.specialCouponWrap table tr td{ height: 45px; }
.specialCouponWrap table tr td:first-child{ background: #f6f6f6; text-align: center; }
.specialCouponWrap table tr td:last-child{ text-align: left; padding-left: 19px; }
.specialCouponWrap footer { position: relative; color: #999999; font-size: 13px; text-align: center; /* margin-top: 30px; */ /* margin-bottom: 30px; */ border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; width: 100%; min-width: auto; background: #f4f4f4; }
.warpportalLoginWrap { width: auto; height: auto; min-height: 300px; border: 1px solid #e9e9e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; padding: 0 22px;}
.warpportalLoginWrap div { padding: 0px 0px; box-sizing: border-box; }
.warpportalLoginWrap input[type=text] { width: 100%; border: 1px solid #ced4da; padding-left: 10px; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; box-sizing: border-box; }
.warpportalLoginWrap input[type=email] { width: 100%; border: 1px solid #ced4da; padding-left: 10px; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; box-sizing: border-box; }
.warpportalLoginWrap input[type=password] { width: 100%; border: 1px solid #ced4da; padding-left: 10px; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; box-sizing: border-box; }
.warpportalLoginWrap button { width: 100%; background: #29a746; color: #fff; text-align: center; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; }
.warpportalLoginWrap img { display: block; margin: 30px auto; }
.warpportalLoginWrap h1 { color: #333333; display: block; text-align: center; margin-top: 30px; margin-bottom: 30px; font-size: 26px; font-weight: bold; }
.warpportalLoginWrap .bottonWrap { position: relative; width: 290px; height: 87px; background: url(../images/common/img_warpportalBottom.png) no-repeat; background-size: cover; margin-bottom: 31px; margin-top: 23px; }
a.btn_register { width: 95px; height: 90px; cursor: pointer; position: absolute; left: 0px; top: 0px; z-index: 5; }
a.btn_forgotPW { width: 95px; height: 90px; cursor: pointer; position: absolute; left: 99px; top: 0px; z-index: 5; }
a.btn_customer { width: 95px; height: 90px; cursor: pointer; position: absolute; right: 0px; top: 0; z-index: 5; }
.join .buttonWrap { position: relative; }
a.btn_world { width: 295px; height: 198px; cursor: pointer; position: absolute; left: 0px; top: 35px; z-index: 5; }
a.btn_game { width: 295px; height: 198px; cursor: pointer; position: absolute; right: 0px; top: 35px; z-index: 5; }
a.btn_featureClass { width: 295px; height: 198px; cursor: pointer; position: absolute; left: 0px; bottom: 0; z-index: 5; }
a.btn_noviceGuide { width: 295px; height: 198px; cursor: pointer; position: absolute; right: 0px; bottom: 0; z-index: 5; }
.mt0 { margin-top: 0 !important; }
.pt0 { padding-top: 0 !important; }
.redeemCode form {
width: 600px;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.redeemCode form legend {
margin: 0 0 0rem;
padding: 0;
width: 100%;
float: left;
display: table;
font-size: 1.5rem;
}
.redeemCode form legend + * {
clear: both;
}
/* body:not(:-moz-handler-blocked) form {
display: table-cell;
} */
/* TOGGLE STYLING */
.redeemCode .toggle {
margin: 0 0 1.5rem;
box-sizing: border-box;
font-size: 0;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}
.redeemCode .toggle input {
width: 0;
height: 0;
position: absolute;
left: -9999px;
}
.redeemCode .toggle input + label {
background: #f8f8f8;
cursor: pointer;
color: #999999;
width: 50%;
margin: 0;
padding: 0.75rem 2rem;
box-sizing: border-box;
position: relative;
display: inline-block;
border: solid 1px #DDD;
border-radius: 0px;
font-size: 18px;
line-height: 140%;
font-weight: normal;
text-align: center;
box-shadow: 0 0 0 rgb(255 255 255 / 0%);
transition: border-color 0.15s ease-out, color 0.25s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.redeemCode .toggle input + label:first-of-type {
/* border-radius: 6px 0 0 6px;
border-right: none; */
}
.redeemCode .toggle input + label:last-of-type {
/* border-radius: 0 6px 6px 0;
border-left: none; */
}
.redeemCode .toggle input:hover + label {
border-color: #213140;
}
.redeemCode .toggle input:checked + label {
width: 50%;
background-color: #333333;
color: #FFF;
/* box-shadow: 0 0 10px rgba(102, 179, 251, 0.5);
border-color: #333333; */
z-index: 1;
}
/* STYLING FOR THE STATUS HELPER TEXT FOR THE DEMO */
.status {
margin: 0;
font-size: 1rem;
font-weight: 400;
}
.status span {
font-weight: 600;
color: #B6985A;
}
.status span:first-of-type {
display: inline;
}
.status span:last-of-type {
display: none;
}
.mt40 { margin-top: 40px; }
.mb55 { margin-bottom: 55px; }
.redeemCode input.redeemCodeInput { width: 100%; height: 58px; border: 1px solid #e2e2e2; margin-top: 5px; margin-bottom: 5px; box-sizing: border-box; padding-left: 15px; }
.redeemCode button { width: 245px; height: 60px; background: #e78c03; line-height: 60px; color: #fff; margin: 0 auto; font-size: 16px; display: block; margin-bottom: 150px; }
.registrationCompleteWrap { width: auto; height: auto; min-height: 300px; border: 1px solid #e9e9e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;}
.registrationCompleteWrap div { padding-left: 57px; box-sizing: border-box; max-width: 480px; }
.registrationCompleteWrap img { display: block; }
.registrationCompleteWrap h1 { color: #333333; display: block; text-align: left; margin-top: 30px; margin-bottom: 30px; font-size: 26px; font-weight: bold; }
.registrationCompleteWrap p { font-size: 14px; width: 480px; }
.registrationCompleteWrap span.serviceCenter { position: relative; color: #999999; font-size: 13px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; box-sizing: border-box; }
.registrationCompleteWrap span.serviceCenter a { font-size: 13px; text-decoration: underline; }
.registrationCompleteWrap span.serviceCenter::before { content: ''; background: url(../images/common/warring.png)no-repeat ; width: 16px; height: 15px; position: absolute; left: 76px; top: 33px;}
.registrationCompleteWrap button { width: 270px; background: #dd5e03; color: #fff; text-align: center; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; margin: 50px auto 0; }
.registrationCompleteWrap table { width: 480px; border: 1px solid #e9e9e9; height: 120px; margin-top: 30px; margin-bottom: 30px; }
.registrationCompleteWrap table tr td{ height: 45px; text-align: center; }
.registrationCompleteWrap footer { position: relative; color: #999999; font-size: 13px; text-align: center; /* margin-top: 30px; */ /* margin-bottom: 30px; */ border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; width: 100%; min-width: auto; background: #f4f4f4; }
.mailAuthenticationWrap { width: auto; height: auto; min-height: 300px; border: 1px solid #e9e9e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;}
.mailAuthenticationWrap div { padding-left: 57px; box-sizing: border-box; max-width: 480px; }
.mailAuthenticationWrap img { display: block; }
.mailAuthenticationWrap h1 { color: #333333; display: block; text-align: left; margin-top: 30px; margin-bottom: 30px; font-size: 25px; font-weight: bold; }
.mailAuthenticationWrap p { font-size: 14px; width: 480px; }
.mailAuthenticationWrap span.serviceCenter { position: relative; color: #999999; font-size: 13px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; box-sizing: border-box; }
.mailAuthenticationWrap span.serviceCenter a { font-size: 13px; text-decoration: underline; }
.mailAuthenticationWrap span.serviceCenter::before { content: ''; background: url(../images/common/warring.png)no-repeat ; width: 16px; height: 15px; position: absolute; left: 76px; top: 33px;}
.mailAuthenticationWrap button { width: 270px; background: #dd5e03; color: #fff; text-align: center; display: block; border-radius: 6px; margin-bottom: 10px; height: 40px; margin: 50px auto 0; }
.mailAuthenticationWrap table { width: 480px; border: 1px solid #e9e9e9; height: 120px; margin-top: 30px; margin-bottom: 30px; }
.mailAuthenticationWrap table tr td{ height: 45px; text-align: center; }
font.redColor { color: #b40000; font-weight: bold; }
.mailAuthenticationWrap footer { position: relative; color: #999999; font-size: 13px; text-align: center; /* margin-top: 30px; */ /* margin-bottom: 30px; */ border-top: 1px solid #e9e9e9; display: block; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box; width: 100%; min-width: auto; background: #f4f4f4; }
.mailAuthenticationWrap .signUpEmailBox { width: 480px; margin-top: 15px; margin-bottom: 15px; border: 1px solid #e9e9e9; padding: 15px; box-sizing: border-box; }
.mailAuthenticationWrap .signUpEmailBox h2 { text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.mailAuthenticationWrap .signUpEmailBox a { text-align: center; display: block; font-size: 14px; color: #006fc5; }
.cookieAllowWrap { letter-spacing: 1px; padding: 13px 0; width: 100%; text-align: center; position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 20; color: #fff; font-size: 13px; }
.cookieAllowWrap a { color: #007afc; font-size: 13px; font-weight: bold; }
.cookieAllowWrap a.cookieOnly { color: #f6a21d;}
.cookieAllowWrap a.btnClose { position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; background: url(../images/main/btnClose.png) no-repeat center top;}