@charset "utf-8";
@import url("./common.css");
@import url("./layout.css");
/* ----------------------------------------------------
- Title : 소울워커 OBT 
- Author : dykang@smilegate.com
- Date : 20161212
- Description : sub.css
---------------------------------------------------- */

/* content style
--------------------------------------------------- */
.container{margin:0 auto;width:1200px;}
.contents{float:left;width:870px;}
.contents h4{font-weight:normal;font-size:18px;color:#252525;}/* 20170203 add */
.contents .line{position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #000;filter:alpha(opacity=15);-moz-opacity:0.15;opacity:0.15;}
.contents .titleNotice{margin:0 0 20px;font-weight:bold;font-size:14px;color:#959595;}/* 20190802 add */
.contents .titleNotice:before{content:'';display:inline-block;width:20px;height:20px;margin:-2px 5px 0 0;background:url('../images/common/icons.png') no-repeat -70px -220px;vertical-align:middle;}/* 20190802 add */
.aside{float:right;margin:-40px 0 0;width:290px;}
.path{position:relative;top:-28px;height:30px;text-align:right;font-size:14px;color:#959595;}
.path b{font-weight:normal;color:#363636;}

/* lnb */
.lnb{overflow:hidden;margin:10px 0 0;background:#ececec;}
.lnb ul{background:#f7f7f7;border-top:1px solid #d1d1d1;}
.lnb ul li{border-top:1px solid #e3e3e3;}
.lnb ul li:first-child{border:0 none;}
.lnb ul li a{display:block;padding:12px 0 0 50px;height:32px;font-size:14px;color:#252525;}
.lnb ul li a:hover,
.lnb ul li.active a{background:url('../images/common/bullet.png') 35px 0 no-repeat;text-decoration:none;font-weight:bold;color:#0d878d;}
.lnb h2{margin:19px 0 17px;height:18px;background-image:url('../images/common/bg_lnb_depth.png');background-position:-1000em 0;background-repeat:no-repeat;text-indent:-1000em;}
.lnb h2.tNews{background-position:50% 0;}
.lnb h2.tGuide{background-position:50% -20px;}
.lnb h2.tItem{background-position:50% -40px;}
.lnb h2.tRanking{background-position:50% -60px;}
.lnb h2.tData{background-position:50% -80px;}
.lnb h2.tCs{background-position:50% -100px;}/* 20170203 add */

/* quick banner */
.quick{margin:30px 0 0;}
.quick ul{overflow:hidden;padding:0 0 1px 1px;}
.quick ul li{float:left;width:50%;}
.quick ul li a{display:block;margin:0 0 -1px -1px;padding:55px 0 0;height:25px;background:#fff url('../images/common/quick.png') -1000em 0 no-repeat;border:1px solid #d7d7d7;text-align:center;color:#252525;}
.quick ul li a:hover{background-color:#f2f7f7;text-decoration:none;color:#0d878d;}
.quick ul li.benefit a{background-position:0 0;}
.quick ul li.benefit a:hover{background-position:0 -161px;}
.quick ul li.pcpos a{background-position:-145px 0;}
.quick ul li.pcpos a:hover{background-position:-145px -161px;}
.quick ul li.ad a{background-position:0 -81px;}
.quick ul li.ad a:hover{background-position:0 -242px;}
.quick ul li.shutdown a{background-position:-145px -81px;}
.quick ul li.shutdown a:hover{background-position:-145px -242px;}
.quick ul li.resetpw a{background-position:-288px 0;}
.quick ul li.resetpw a:hover{background-position:-288px -161px;}
.quick ul li.otpset a{background-position:-288px -80px;}
.quick ul li.otpset a:hover{background-position:-288px -242px;}
.quick ul li.bell a{background-position:-432px -81px;}
.quick ul li.bell a:hover{background-position:-432px -242px;}
.quick ul li.server a{background-position:-576px 0px;}/*20180426수정*/
.quick ul li.server a:hover{background-position:-576px -161px;}/*20180426수정*/
.quick ul li.fb a{background-position:-432px 0px;}/*20180426수정*/
.quick ul li.fb a:hover{background-position:-432px -161px;}/*20180426수정*/
.quick ul li.fb_bottom {width:100%;}/*20180426수정*/
.quick ul li.fb_bottom a{padding:13px 0 0 15px;height:27px; background-position:30px -323px;}/*20180426수정*/
.quick ul li.fb_bottom a:hover{background-position:30px -364px;}/*20180426수정*/
.quick ul li.coupon a{background-position:-722px 0px;}/* 20190409 추가 */
.quick ul li.coupon a:hover{background-position:-722px -161px;}/* 20190409 추가 */


/* tab */
.contents .tab{margin:0 0 30px;height:49px;border-bottom:1px solid #d7d7d7;}
.tab ul{overflow:hidden;margin:0 0 -1px;}
.tab li{float:left;margin:0 -1px 0 0;border:1px solid #d7d7d7;}
.tab li a{display:block;padding:13px 0 0;width:158px;height:35px;background:#ebebeb;text-align:center;letter-spacing:-2px;font-weight:bold;font-size:16px;color:#959595;}
.tab li a:hover{background:#fff;text-decoration:none;color:#252525;}
.tab li.active a{margin:0 0 -1px;background:#fff;border-bottom:1px solid #fff;color:#252525;}

/* grade star */
.gradeStar{overflow:hidden;margin:3px 0 0;width:54px;height:10px;background:url('../images/item/bg_grade_star.png') 0 0 repeat-x;text-indent:-1000em;}
.gradeStar span{display:block;width:0;height:100%;background:url('../images/item/bg_grade_star.png') 0 -10px repeat-x;text-indent:-1000em;}
.gradeStar span.star1{width:20%;}
.gradeStar span.star2{width:40%;}
.gradeStar span.star3{width:60%;}
.gradeStar span.star4{width:80%;}
.gradeStar span.star5{width:100%;}

/* paging */
.paging{text-align:center;}
.paging ul{display:inline;margin:0 10px;vertical-align:middle;}
.paging ul li{display:inline;}
.paging ul li a,
.paging ul li strong{display:inline-block;margin:2px 0 0;padding:0 4px;font-size:14px;vertical-align:middle;color:#727272;}
.paging ul li a:hover,
.paging ul li strong{color:#0d878d;}
.paging .btnPrevPage,
.paging .btnNextPage{display:inline-block;*display:inline;zoom:1;width:27px;height:27px;background:#fff;border:1px solid #d9d9d9;vertical-align:top;}
.paging .btnPrevPage span{display:block;margin:8px auto 0;width:0;height:0;border-left:0;border-right:5px solid #727272;border-top:5px solid #fff;border-bottom:5px solid #fff;text-indent:-1000em;}
.paging .btnNextPage span{display:block;margin:8px auto 0;width:0;height:0;border-left:5px solid #727272;border-right:0;border-top:5px solid #fff;border-bottom:5px solid #fff;text-indent:-1000em;}

/* data */
.downloadInfo .btnDownload{position:relative;min-height:215px;background:url("../images/data/bg_download_banner.jpg") no-repeat left top;}
.downloadInfo .btnDownload a{position:absolute;left:50%;top:50%;margin:-48px 0 0 -198px;}
.downloadSpec h4{padding:27px 0 20px;}/* 20170203 modify */
.downloadDriver{margin:35px 0 0;}
.downloadDriver h4{padding:0 0 20px;}/* 20170203 modify */
.cautionList{padding:10px 0 0;}
.cautionList li{padding:0 0 9px;font-size:13px;color:#959595;}
table.tableDownload{width:100%;border-top:2px solid #99c9c9;}
table.tableDownload th,
table.tableDownload td{padding:17px 5px;border:solid #e2e2e2;border-width:0 0 1px 1px;text-align:center;vertical-align:middle;font-weight:normal;}
table.tableDownload th{font-size:15px;color:#252525;}
table.tableDownload th:first-child{border-left:0;}
table.tableDownload td{font-size:14px;color:#959595;}
table.tableDownload .specialKey{color:#0d878d;}
table.tableDownload .specialKeyInfo{padding:10px;background:#ecf3f3;}
table.tableDownload .specialKeyInfo .title{display:block;font-size:14px;font-weight:bold;color:#252525;}
table.tableDownload .specialKeyInfo ol{padding:11px 0 0;text-align:left;}
table.tableDownload .specialKeyInfo ol li{margin:0 0 0 40px;*margin-left:20px;line-height:26px;list-style-type:decimal;font-size:14px;color:#0d878d;}
table.tableDownload .specialKeyInfo .checkAgree{padding:12px 0 20px;font-size:14px;color:#363636;}
table.tableDownload .specialKeyInfo .checkAgree input{vertical-align:-2px;}

/* 게임소개 */
.gameWorld{height:1300px;background:#101d3d url('../images/guide/txt_game_world.jpg') 0 0 no-repeat;}
.gameWorld p.description{padding:238px 0 0;text-align:center;line-height:1.4;font-size:14px;color:#a1a1a1;}
.gameWorld p.description b{display:block;margin:20px 0 25px;font-weight:normal;font-size:18px;color:#fff;}
.worldVideo{margin:330px auto 0;padding:15px 15px 0;width:673px;height:516px;background:#081431;}
.worldVideo .media{margin:14px 0 0;width:673px;height:377px;background:#000;}
.tabVideoList{overflow:hidden;}
.tabVideoList li{position:relative;float:left;margin:0 0 0 -1px;width:124px;height:110px;}
.tabVideoList li:first-child{margin:0;}
.tabVideoList li .gradient{position:absolute;left:0;right:0;bottom:0;padding:7px 0 0;height:26px;background:#000;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;text-align:center;}
.tabVideoList li a{display:block;height:100%;font-size:13px;color:#fff;}
.tabVideoList li a:hover *{text-decoration:none;color:#24b8ac;}
.tabVideoList li a.ep1{background:url('../images/guide/li_video_ep1.jpg') 50% 0 no-repeat;}
.tabVideoList li a.ep2{background:url('../images/guide/li_video_ep2.jpg') 50% 0 no-repeat;}
.tabVideoList li a.ep3{background:url('../images/guide/li_video_ep3.jpg') 50% 0 no-repeat;}
.tabVideoList li a.ep4{background:url('../images/guide/li_video_ep4.jpg') 50% 0 no-repeat;}
.tabVideoList li a.ep5{background:url('../images/guide/li_video_ep5.jpg') 50% 0 no-repeat;}
.tabVideoList li a.haru{background:url('../images/guide/li_video_haru.jpg') 50% 0 no-repeat;}
.tabVideoList li a.erwin{background:url('../images/guide/li_video_erwin.jpg') 50% 0 no-repeat;}
.tabVideoList li a.lily{background:url('../images/guide/li_video_lily.jpg') 50% 0 no-repeat;}
.tabVideoList li a.stella{background:url('../images/guide/li_video_stella.jpg') 50% 0 no-repeat;}
.tabVideoList li a.iris{background:url('../images/guide/li_video_iris.jpg') 50% 0 no-repeat;}/* 20170201 add */
.tabVideoList li a.jin{background:url('../images/guide/li_video_jin.jpg') 50% 0 no-repeat;}/* 20170213 add */
.tabVideoList li a.chii{background:url('../images/guide/li_video_chii.jpg') 50% 0 no-repeat;}/* 20190129 add */
.tabVideoList li a.comingsoon{background:url('../images/guide/li_video_coming.gif') 50% 50% no-repeat;}
.tabVideoList li a:hover:after,
.tabVideoList li.active a:after{position:absolute;left:0;top:0;right:0;bottom:0;border:3px solid #2fd5c7;content:'';z-index:9999;}
.tabVideoList li.active a{background-position:50% -110px;text-decoration:none;color:#24b8ac;}
.tabVideoList li a.comingsoon:after{display:none;}

.advancementList{overflow:hidden;}
.advancementList li{float:left;margin:0 0 0 -1px;width:124px;height:31px;}
.advancementList li:first-child{margin:0;}
.advancementList li a{display:block;width:122px;height:29px;line-height:29px;text-align:center;border:1px solid #d9d9d9;color:#545454;text-decoration:none;}
.advancementList li a:hover{color:#fff;background-color:#0d878d;border:1px solid #0d878d;}
.advancementList li a i{display:inline-block;margin:0 4px 0 0;width:11px;height:9px;background:url('../images/common/icons.png') -66px -205px no-repeat;vertical-align:middle;}
.advancementList li a:hover i{background-position:-83px -205px;}
.advancementList li a.off{display:block;width:122px;height:29px;line-height:29px;text-align:center;background-color:#ececec;border:1px solid #e3e3e3;color:#989898;text-decoration:none;}
.advancementList li a.off i{display:inline-block;margin:0 4px 0 0;width:11px;height:9px;background:url('../images/common/icons.png') -66px -109px no-repeat;vertical-align:middle;}

.characterVideo{position:relative;height:810px;}
.characterVideo .tabVideoList li{width:124px;}
.characterVideo .videoContent{display:none;padding:190px 470px 0 0;height:540px;color:#959595;}
.characterVideo .videoContent.haru{background:url('../images/guide/img_character_haru.jpg') center 0 no-repeat;}
.characterVideo .videoContent.erwin{background:url('../images/guide/img_character_erwin.jpg') 0 0 no-repeat;}
.characterVideo .videoContent.lily{background:url('../images/guide/img_character_lily.jpg') 0 0 no-repeat;}
.characterVideo .videoContent.stella{background:url('../images/guide/img_character_stella.jpg') 0 0 no-repeat;}
.characterVideo .videoContent.iris{background:url('../images/guide/img_character_iris.jpg') 0 0 no-repeat;}/* 20170201 add */
.characterVideo .videoContent.jin{background:url('../images/guide/img_character_jin.jpg') 0 0 no-repeat;}/* 20170213 add */
.characterVideo .videoContent.chii{background:url('../images/guide/img_character_chii.jpg') 0 0 no-repeat;}/* 20190129 add */
.characterVideo .description{width:450px;height:92px;line-height:1.6;font-size:14px;}/* 20190129 modify */
.characterVideo .personal{overflow:hidden;margin:20px 0 15px;}/* 20190129 modify */
.characterVideo .personal dt,
.characterVideo .personal dd{float:left;}
.characterVideo .personal dt{padding:2px 6px 0;height:18px;background:#e2e2e2;border:1px solid #d7d7d7;border-radius:1px;text-align:center;font-weight:bold;color:#252525;margin-bottom:5px;}
.characterVideo .personal dd{margin:3px 16px 10px 6px;}
.characterVideo .personal dd.age{width:307px;}
.characterVideo .gamestyle{overflow:hidden;padding:15px 0 10px;border-top:1px solid #e2e2e2;}
.characterVideo .gamestyle dt,
.characterVideo .gamestyle dd{float:left;margin:0 0 10px;}
.characterVideo .gamestyle dt{width:20%;font-weight:bold;color:#252525;}
.characterVideo .gamestyle dd{width:80%;}
.characterVideo .media{position:absolute;left:0;top:600px;width:400px;height:240px;background:#000;}
.characterVideo .media2{position:absolute;left:0;top:610px;width:400px;height:240px;background:#000;}
.gameInfo{height:1110px;background:#101d3d url('../images/guide/txt_game_info.jpg') 0 0 no-repeat;}
.gameInfo ul{margin:279px auto 0;padding:33px 0 0;height:700px;background:url('../images/guide/bg_list_info.png') 50% 0 no-repeat;}
.gameInfo ul li{padding:0 0 0 455px;height:240px;}
.gameInfo ul li {line-height:1.4;font-size:14px;color:#959595;}
.gameInfo ul li b{display:block;margin:0 0 25px;padding:5px 0 0;font-weight:normal;font-size:18px;color:#fff;}
.gameInfo ul li.middle{padding:0 455px 0 0;text-align:right;}

/* game guide */
.tabList{overflow:hidden;padding:1px 0 0 1px;width:870px;background:#f7f7f7;margin-left:-1px;margin-bottom:30px;}
.tabList li{float:left;margin:-1px 0 0 -1px;width:173px;height:48px;background:#f7f7f7;border:1px solid #e2e2e2;}
.tabList li a{display:block;margin:-1px;padding:13px 0 0;width:173px;height:35px;background:#fff;border:1px solid #e2e2e2;text-align:center;font-weight:bold;font-size:16px;color:#959595;}
.tabList li a:hover,
.tabList li.active a{position:relative;background:#0d878d;border-color:#0d878d;text-decoration:none;color:#fff;}

/* game guide - new tab */
.guide-tab {margin-bottom:30px;}
.guide-tab:after {content:"";display:block;clear:both;}
.guide-tab li {display:block;float:left;width:435px;height:70px;}
.guide-tab li a {display:block;width:435px;height:70px;background:url('../images/guide/guide_tab.png') no-repeat;text-indent:-10000em;}
.guide-tab li.tab01 a {background-position:0 0;}
.guide-tab li.tab02 a {background-position:100% 0;}
.guide-tab li.tab01.active a {background-position:0 100%;}
.guide-tab li.tab02.active a {background-position:100% 100%;}
.guide-tab li.tab01 a:hover {background-position:0 100%;}
.guide-tab li.tab02 a:hover {background-position:100% 100%;}

/* item */
.searchItem{overflow:hidden;margin:-30px 0 30px;padding:25px 0;border:solid #d7d7d7;border-width:0 1px 1px;text-align:center;}
.searchItem *{vertical-align:top;}
.searchItem .inputSearch{margin:0 4px 0 0;width:698px;height:33px;border:1px solid #e2e2e2;text-indent:10px;font-size:13px;}
.searchMessage{text-align:center;}
.searchMessage p{margin:45px 0 10px;line-height:1.4;letter-spacing:-2px;font-size:18px;color:#252525;}
.searchMessage .image{height:413px;}
.searchMessage .image img{width:100%;height:100%;}
.searchItem.filter{padding:0;}
.searchItem.filter dl{overflow:hidden;margin:-1px 0 0;}
.searchItem.filter dl dt,
.searchItem.filter dl dd{float:left;padding:14px 0 4px;border-top:1px solid #e2e2e2;text-align:left;font-size:14px;color:#959595;}
.searchItem.filter dl dt{width:19%;text-indent:40px;font-weight:bold;color:#252525;}
.searchItem.filter dl dd{width:81%;}
.searchItem.filter dl dd ul{padding:0 0 0 96px;}
.searchItem.filter dl dd ul li{position:relative;float:left;margin:0 0 10px;width:109px;}
.searchItem.filter dl dd ul li:first-child{margin-left:-96px;width:96px;}
.searchItem.filter dl dd ul li input{position:absolute;top:4px;left:0;margin:0;width:12px;height:12px;opacity:0;cursor:pointer;z-index:5;vertical-align:middle;}
.searchItem.filter dl dd ul li i{float:left;margin:4px 0 0;width:12px;height:12px;background:url('../images/item/input.png') 0 0 no-repeat;z-index:3;}
.searchItem.filter dl dd ul li label{float:left;margin-left:10px;cursor:pointer;}
.searchItem.filter dl dd ul li input:checked+i{background-position:0 bottom;}
.searchItem.filter dl dd ul li input:checked+i+label{color:#0d878d;}
.searchItem.filter dl dd.row ul{width:350px;}
.items{margin:0 0 30px;border-bottom:1px solid #e2e2e2;}
.itemList{overflow:hidden;margin:0 0 30px -11px;width:881px;}
.itemList li{position:relative;overflow:hidden;float:left;margin:0 0 0 11px;width:136px;height:234px;}
.itemList li:first-child{margin-right:-1px;}
.itemList li a{position:absolute;left:0;top:0;width:100%;height:100%;line-height:1.5;font-size:13px;}
.itemList li a:hover .gradient,
.itemList li a:hover .result-word,
.itemList li a.active .gradient,
.itemList li a.active .result-word{font-weight:normal;color:#24b8ac;text-decoration:none;}
.itemList li a:hover:after,
.itemList li a.active:after{position:absolute;left:0;top:0;right:0;bottom:0;border:3px solid #2fd5c7;content:'';}
.itemList li img{width:100%;height:182px;}
.itemList li .gradient{position:absolute;left:0;right:0;bottom:0;padding:5px 10px 0;height:47px;background:#000;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;text-align:left;color:#fff;}
.itemList li .result-word{color:#ef5c16;}
.itemList li.itemDetail{display:none;position:relative;margin-top:20px;padding:0 0 0 305px;width:563px;height:303px;background:#fff;border:1px solid #e2e2e2;}
.itemList li.itemDetail a,
.itemList li.itemDetail a:after{position:static;border:0 none;}
.itemList li.itemDetail img{position:absolute;left:70px;top:22px;width:195px;height:260px;}
.itemList li.nodata{padding:120px 0 0;width:870px;height:180px;text-align:center;font-size:18px;}
.itemList li.nodata small{display:block;line-height:2.2;font-size:14px;color:#959595;}
.itemDetailInfo{padding:30px 0 0;font-size:14px;color:#959595;}
.itemDetailInfo .title{margin:0 0 14px;letter-spacing:-2px;font-size:24px;color:#0d878d;}
.itemDetailInfo .title small{display:block;margin:8px 0 0;letter-spacing:-1px;font-size:14px;color:#252525;}
.itemDetailInfo .desciption{margin:0 0 35px;}
.itemDetailInfo dl{float:left;width:154px;font-size:12px;}
.itemDetailInfo dl dt,
.itemDetailInfo dl dd{float:left;height:14px;margin:0 0 10px;}
.itemDetailInfo dl dt{width:40%;font-weight:bold;color:#252525;}
.itemDetailInfo dl dd{width:60%;}
.itemDetailInfo table{float:left;width:337px;font-size:12px;}
.itemDetailInfo table th,
.itemDetailInfo table td{height:25px;border:1px solid #e2e2e2;text-align:center;}
.itemDetailInfo table thead th{border-bottom:0 none;color:#0d878d;}
.itemDetailInfo table tbody th{width:85px;text-align:left;text-indent:10px;font-weight:normal;color:#252525;}
.itemDetailInfo table tbody td{min-width:75px;font-weight:normal;}
.iconList li{height:142px;background:#f7f7f7;text-align:center;}
.iconList li img{margin:21px 0 0;width:48px;height:48px;border-radius:2px;}
.iconList li.itemDetail{height:239px;text-align:left;}
.iconList li.itemDetail .image{overflow:hidden;position:absolute;left:71px;top:22px;margin:0;width:187px;height:187px;border:4px solid #252525;}
.iconList li.itemDetail .image img{left:-4px;top:-4px;margin:0;width:195px;height:195px;}
.iconList .itemDetailInfo dl{width:100%;}
.iconList .itemDetailInfo dl dt{width:10%;}
.iconList .itemDetailInfo dl dd{width:90%;}
/* item - costume - 20190802 추가 */
.costumeList{overflow:hidden;margin:-75px 0 -1px;padding:0 0 15px;}
.costumeList li{position:relative;float:left;margin:75px 0 0 50px;width:236px;height:310px;}
.costumeList li:nth-child(3n+1){margin-left:30px;}
.costumeList li:nth-child(3n+1):after{position:absolute;left:-30px;bottom:-15px;width:870px;height:15px;background:#ebebeb;box-shadow:inset 0 0 5px rgba(0,0,0,.15);content:'';}
.costumeList li.new:before{z-index:1;position:absolute;left:0;top:0;width:55px;height:55px;background:url('../images/common/icons.png') no-repeat -14px -225px;content:'';}
.costumeList li.nodata{display:table;width:calc(100% - 60px);height:300px;margin:;padding:0 0 30px;}
.costumeList li.nodata p{display:table-cell;vertical-align:middle;text-align:center;font-size:18px;}
.costumeList li img{width:100%;height:100%;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;}
.costumeList li a{overflow:hidden;display:block;}
.costumeList li a:before{position:absolute;left:100%;top:2px;bottom:0;width:2px;background:#ccc;content:'';}
.costumeList li a:hover *{text-decoration:none;}
.costumeList li a:hover:after{z-index:1;position:absolute;left:0;top:0;right:0;bottom:0;border:3px solid #2fd5c7;content:'';}
.costumeList li a:hover img{transform:scale(1.05);-webkit-transform:scale(1.05);}
.costumeList li a>i{z-index:1;position:absolute;right:10px;top:10px;width:32px;height:33px;background:url('../images/item/ico_costume_grade.png') no-repeat -9999em 0;text-indent:-9999em;}
.costumeList li a i.grade-ps{background-position:0 0;}
.costumeList li a i.grade-ss{background-position:0 -33px;}
.costumeList li a i.grade-s{background-position:0 -66px;}
.costumeList li .gradient{display:table;position:absolute;left:0;right:0;bottom:0;width:calc(100% - 10px);height:40px;line-height:40px;padding:0 0 0 10px;background:rgba(0,0,0,.85);text-align:lfet;color:#a1a1a1;font-size:12px;}
/*.costumeList li .gradient i,
.costumeList li .gradient em{display:table-cell;vertical-align:middle;font-style:normal;}
.costumeList li .gradient i{padding:0 3px 0 9px;color:#fff;}
.costumeList li .gradient i:nth-of-type(1){margin-left:0;}*/
.costumeList li .gradient em{display:table-cell;vertical-align:middle;font-style:normal;padding-left:5px;text-align:left;color:#34b2a7;font-size:12px;}

/* 2차 비밀번호 초기화 - 20170203 add */
.resetPW{padding:45px 0 0;border-top:1px solid #e2e2e2;}
.resetPW h4{padding:0 0 20px;}
.resetPW .resetInfo{margin:0 0 30px;padding:40px 0 0 40px;height:173px;background:url('../images/cs/bg_reset_pw.jpg') 0 0 no-repeat;}
.resetPW .resetInfo p{margin:0 0 16px;line-height:1.5;font-size:13px;color:#363636;}
.resetPW .resetInfo p strong{color:#0d878d;}
.resetProcess{margin:0 0 40px;padding:30px 0 0 80px;height:181px;background:url('../images/cs/ol_reset_preocess.png') 50% 30px no-repeat;border:1px solid #e7e7e7;}
.resetProcess li{position:relative;float:left;margin:0 0 0 35px;padding:75px 0 0;width:151px;height:76px;border-radius:75px;text-align:center;line-height:1.5;font-size:13px;}
.resetProcess li:first-child{margin:0;}
.resetProcess li.row{padding-top:83px;}
.cautionMessage{padding:15px 0 0;height:42px;background:#f7f7f7;text-align:center;}
.cautionMessage p{display:inline;margin:0 10px 0 0;font-size:13px;color:#959595;}
.cautionMessage p i{display:inline-block;margin:0 8px 0 0;width:26px;height:26px;background:url('../images/common/icons.png') -64px -126px;vertical-align:middle;}

/* 서버이전 신청 페이지 - 20180430 add */
.moveServer {width:100%}
.moveServer h4 {padding:0 0 20px;}
.moveServer em {color:#0d878d; font-style:normal;}
.moveServer .moveInfo {margin:0 0 50px;height:107px;background:url('../images/cs/bg_move_server.png') no-repeat 0 0; text-align:center; padding:215px 0 0 0;}
.moveServer .moveInfo a {width:250px;height:63px;text-indent:-10000em;display:inline-block; margin:0 2px;}
.moveServer .moveInfo a.moveServ_enter {background:url('../images/cs/btn_move_enter.png') no-repeat 0 0;}
.moveServer .moveInfo a.moveServ_check {background:url('../images/cs/btn_move_check.png') no-repeat 0 0;}
.moveServer .move_process {margin:0 0 40px;height:202px;background:url('../images/cs/move_server_step.png') no-repeat 0 0;}
.moveServer .move_process ul {padding:138px 0 0 0;}
.moveServer .move_process ul li{position:relative;float:left;margin:0 0 0 25px;width:197px;text-align:center;font-size:13px; color:#696969; line-height:18px;}
.moveServer .move_process ul li:first-child{margin:0;}
.moveServer .move_preChk {margin:0 0 50px; position:relative; border:1px solid #e3e3e3; width:868px;}
.moveServer .move_preChk h5 {height:42px; padding:22px 0 0 33px; background:#f3f3f3; font-size:15px; color:#555;}
.moveServer .move_preChk h5:before {content:''; display:inline-block; width:18px;height:18px; background:url('../images/cs/move_bullet.png') no-repeat 0 0; vertical-align:middle; margin:-3px 7px 0 0;}
.moveServer .move_preChk ul li {border-top:1px solid #dcdcdc; font-size:14px; color:#444; line-height:18px;height:36px; padding:18px 0 0 32px;}
.moveServer .move_preChk ul li:before {content:''; display:inline-block; width:19px;height:19px; background:url('../images/cs/move_bullet.png') no-repeat -20px 0; vertical-align:middle; margin:-3px 9px 0 0;}
.moveServer .move_preChk ul li:first-child {border-top:none;}
.moveServer .move_preChk .my_moveChk {position:absolute; top:-45px; right:0px;}
.moveServer .move_preChk .my_moveChk a {display:block;width:220px;height:25px; background:url('../images/cs/btn_serv_chk.png') no-repeat 0 0; text-indent:-100000em;}
.moveServer .move_notice {margin:0 0 50px; position:relative; border:1px solid #e3e3e3; width:868px;}
.moveServer .move_notice h5 {height:42px; padding:22px 0 0 33px; background:#f3f3f3; font-size:15px; color:#555;}
.moveServer .move_notice h5:before {content:''; display:inline-block; width:18px;height:18px; background:url('../images/cs/move_bullet.png') no-repeat 0 0; vertical-align:middle; margin:-3px 7px 0 0;}
.moveServer .move_notice ul {padding:38px 30px 20px; width:808px;}
.moveServer .move_notice ul li {font-size:14px; color:#444; line-height:22px; margin:0 0 20px 0;}
.moveServer .move_notice ul li span {position:relative; font-size:12px; color:#666; line-height:20px; display:block; padding:0 0 0 30px;}
.moveServer .move_notice ul li span:before {content:''; position:absolute; top:50%; left:20px; width:2px;height:2px;border-radius:4px;background-color:#666;}
.moveServer .move_notice ul li span:first-child {margin:5px 0 0 0;}
.moveServer .move_notice .cau_notice {position:absolute; top:-35px; right:0px;}
.moveServer .move_notice .cau_notice span {position:relative; display:inline-block; margin:0 0 0 20px;}
.moveServer .move_notice .cau_notice span em:before {content:''; position:absolute; top:50%; left:-6px; width:2px;height:2px;border-radius:4px;background-color:#0d878d;}
.moveServer .cautionMessage{padding: 18px 0 0;height: 39px;background:#f7f7f7;text-align:center;}
.moveServer .cautionMessage p{display:inline;margin:0 10px 0 0;font-size: 13px;color:#666;}
.moveServer .cautionMessage p i{display:inline-block;margin: -3px 8px 0 0;width:26px;height:26px;background:url('../images/common/icons.png') -64px -126px;vertical-align:middle;}


/* 쿠폰 테이블 - 20190409 추가 */
.c-table {display:none;}
.c-table.on {display:block;}
table.coupon-table {width:100%;border-top:2px solid #99c9c9;margin-bottom:30px;}
table.coupon-table th, 
table.coupon-table td {padding:17px 0;border:solid #e2e2e2;border-width:0 0 1px ;text-align:center;vertical-align:middle;font-weight:normal;}
table.coupon-table th {padding:19.5px 0; border:solid #99c9c9;border-width:0 0 1px;color:#363636;font-size:15px;}
table.coupon-table td {font-size:14px;color:#959595;}
table.coupon-table td.timeover {color:#d22126;}
table.coupon-table td.used {color:#0d878d;}
table.coupon-table td:nth-child(2),
table.coupon-table td:nth-child(3) {font-size:15px;color:#252525;letter-spacing:-2px;}
table.coupon-table td:nth-child(4) {text-align:left;padding-left:22px;letter-spacing:-0.2px;line-height:1.3em;}
table.coupon-table td a span {padding:6px 8px;background-color:#f2f7f7;border:1px solid #bfd8d8;color:#319ba0;font-weight:bold;}
table.coupon-table td a:hover {text-decoration:none;}
table.coupon-table td a:hover span {background-color:#319ba0;border:1px solid #319ba0;color:#fff;text-decoration:none;}
table.coupon-table .nodata td {padding:150px 0;font-size:18px;color:#252525;}

.coupon-wrap h4 {font-size:18px;color:#252525;font-weight:bold;margin-bottom:5px;}
.coupon-wrap p {font-size:15px;color:#959595;margin-bottom:20px;}
.coupon-wrap {padding:45px 0 0;border-top:1px solid #e2e2e2;}
.coupon-wrap .coupon-input {margin-bottom:40px;}
.coupon-wrap .input-wrap {padding:30px 25px;background-color:#f2f7f7;border:1px solid #bfd8d8;}
.coupon-wrap .input-wrap input {width:698px;height:53px;border:1px solid #bfd8d8;text-align:center;font-size:26px;display:inline-block;vertical-align:middle;line-height:26px;}
.coupon-wrap .input-wrap button {height:55px;border:0;display:inline-block;width:107px;vertical-align:middle;margin-left:4px;background-color:#0d878d;cursor:pointer;}
.coupon-wrap .input-wrap button span {color:#fff;height:100%;}
.coupon-wrap .input-wrap ul {margin-top:10px;padding-left:6px;}
.coupon-wrap .input-wrap ul li {position:relative;font-size:13px;color:#959595;line-height:24px;padding-left:7px;}
.coupon-wrap .input-wrap ul li:before {content:"";display:block;position:absolute;top:11px;left:0;width:2px;height:2px;background:#959595;}

.coupon-wrap .coupon-tab {width:100%;margin-bottom:20px;}
.coupon-wrap .coupon-tab:after {content:"";display:block;clear:both;}
.coupon-wrap .coupon-tab li {display:block;float:left;width:435px;}
.coupon-wrap .coupon-tab li:last-child {margin-left:-1px;}
.coupon-wrap .coupon-tab li a {display:block;width:433px;height:48px;background-color:#f7f7f7;color:#959595;border:1px solid #e2e2e2;text-align:center;line-height:49px;font-size:16px;font-weight:bold;}
.coupon-wrap .coupon-tab li a:hover {text-decoration:none;}
.coupon-wrap .coupon-tab li a.on {background-color:#0d878d;color:#fff;border:1px solid #0d878d;}

.coupon-wrap .cautionMessage {padding:17px 0 0;height:40px;background:#f7f7f7;text-align:center;margin-top:30px;}
.coupon-wrap .cautionMessage p {display:inline;margin:0 250px 0 0;font-size:13px;color:#959595;}
.coupon-wrap .cautionMessage p i {display:inline-block;margin:-1px 8px 0 0;width:26px;height:26px;background:url('../images/common/icons.png') -64px -126px;vertical-align:middle;}

/* 캐릭터(리뉴얼) */
.tabCharacterList {overflow:hidden;margin:-10px 0 40px -10px;}
.tabCharacterList li {float:left;position:relative;width:166px;height:56px;margin:10px 0 0 10px;background:#ebebeb;}/* 20201215 수정 */
.tabCharacterList li a:before {content:'';position:absolute;top:0;right:0;bottom:0;width:100px;background:url('../images/guide/tab_character.png') no-repeat -9999em 0;}
.tabCharacterList li:nth-of-type(1) a:before {background-position:0 0;}
.tabCharacterList li:nth-of-type(2) a:before {background-position:-100px 0;}
.tabCharacterList li:nth-of-type(3) a:before {background-position:-200px 0;}
.tabCharacterList li:nth-of-type(4) a:before {background-position:-300px 0;}
.tabCharacterList li:nth-of-type(5) a:before {background-position:-400px 0;}
.tabCharacterList li:nth-of-type(6) a:before {background-position:-500px 0;}
.tabCharacterList li:nth-of-type(7) a:before {background-position:-600px 0;}
.tabCharacterList li:nth-of-type(8) a:before {background-position:-700px 0;}
.tabCharacterList li:nth-of-type(9) a:before {background-position:-800px 0;}/* 20201215 추가 */
.tabCharacterList li span {display:inline-block;padding:0 0 0 30px;font-size:16px;line-height:56px;color:#959595;}
.tabCharacterList li a {display:block;width:100%;height:100%;}
.tabCharacterList li a:after {content:'';position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #d9d9d9;}
.tabCharacterList li a:hover,
.tabCharacterList li.active a {background:#0d878d;}
.tabCharacterList li a:hover:before,
.tabCharacterList li.active a:before {background-position-y:100%;}
.tabCharacterList li a:hover span,
.tabCharacterList li.active a span {text-decoration:none;color:#d9fdff;}
.tabCharacterList li a:hover:after,
.tabCharacterList li.active a:after {display:none;}
.tabCharacterList li.comingsoon:after {content:'';position:absolute;left:0;top:0;right:0;bottom:0;border:1px solid #d9d9d9;}
.tabGrade {overflow:hidden;padding:40px 0;}
.tabGrade li {float:left;width:300px;height:280px;background-repeat:no-repeat;background-position:-9999em 0;}
.tabGrade li a {display:block;width:270px;height:280px;font-size:0;}/* 20190906 수정 */
.tabGrade li:last-child {width:270px;}
.tabGrade li:nth-of-type(1) {background-position:0 0;}
.tabGrade li:nth-of-type(2) {background-position:-300px 0;}
.tabGrade li:nth-of-type(3) {background-position:-600px 0;}
.tabGrade li:hover,
.tabGrade li.active {background-position-y:100%;}
.character {color:#252525;}
.character * {box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;}
.character h4 {height:94px;line-height:94px;border:solid #ebebeb;border-width:1px 0;font-weight:bold;font-size:28px;}
.character h4 small {vertical-align:4px;letter-spacing:0;font-weight:normal;font-size:16px;color:#7d7d7d;}
.character h5 {margin:0 0 20px;font-size:24px;}
.character dl.personal {float:right;margin-top:-60px;text-align:right;}
.character dl.personal dt,
.character dl.personal dd {display:inline-block;font-size:16px;line-height:1.5;}
.character dl.personal dd {color:#7d7d7d;}
.character dl.personal dt {margin-left:11px;}
.character dl.personal dt:before {content:'ㆍ';}
.character dl.personal dt:after {content:':';margin:0 3px;}
.characterGrade + .characterGrade {display:none;}
.characterGrade>div + div {position:relative;margin:40px 0 0;}
.characterGrade h5 + .description {margin:-10px 0 20px;font-size:14px;color:#7d7d7d;}
.synopsis {position:relative;height:690px}
.synopsis h5 {margin:0 0 40px;}
.synopsis p.title {margin:0 0 15px;font-weight:bold;font-size:20px;}
.synopsis .description {font-size:14px;line-height:22px;color:#7d7d7d;}
.synopsis .description p + p {margin-top:10px;}
.synopsis .description p strong {font-weight:normal;color:#252525;}
.synopsis .btnGuide {position:absolute;right:0;top:0;height:35px;padding:0 10px;}
.synopsis .btnGuide span {font-weight:bold;font-size:14px;line-height:35px;color:#fff;opacity:.7;}
.synopsis .btnGuide span:after {content:'';display:inline-block;width:8px;height:8px;margin:0 0 0 5px;background:url('../images/common/icons.png') no-repeat 0 -240px;vertical-align:1px;}
.synopsis .btnGuide:hover {text-decoration:none;}
.synopsis .btnGuide:hover span {text-decoration:none;opacity:1;}
.weapons h5 {position:absolute;}
.weapons p {position:absolute;left:536px;top:160px;width:334px;text-align:center;font-size:28px;}
.weapons p strong {display:block;margin-top:5px;}
.newSkill ul {margin:-10px 0 0 -10px;}
.newSkill li {float:left;width:430px;height:140px;padding:30px 0 30px 30px;background:#f7f7f7;margin:10px 0 0 10px;}
.newSkill li dl {float:left;padding:0 0 0 10px;}
.newSkill li dl dt {margin:-3px 0 5px;font-weight:bold;font-size:16px;}
.newSkill li dl dt small {font-weight:normal;font-size:16px;color:#7d7d7d;}
.newSkill li dl dd {margin-left:-3px;padding-left:12px;text-indent:-12px;line-height:1.4;font-size:13px;color:#7d7d7d;}
.newSkill li dl dd:before {content:'ㆍ';}
.newSkill li dl dd + dd {margin-top:2px;}/* 20190906 수정 */
.newSkill li .thumb {float:left;position:relative;width:80px;height:80px;border-width:3px;border-style:solid;vertical-align:top;}
.newSkill li .thumb img {width:100%;height:100%;}
.newSkill li .thumb button {position:absolute;right:0;bottom:0;width:32px;height:32px;background:url('../images/common/icons.png') no-repeat -70px -241px;border:0;outline:0;text-indent:-9999em;cursor:pointer;opacity:.8;}
.newSkill li .thumb button:hover {opacity:1;}
.voiceList ul {margin:-10px 0 0 -10px;}
.voiceList li {float:left;display:table;position:relative;width:430px;height:119px;padding:20px 20px 20px 30px;background:#f7f7f7;margin:10px 0 0 10px;}
.voiceList li p {display:table-cell;width:100%;font-size:20px;vertical-align:middle;}
.voiceList li button {width:80px;height:80px;background:#959595;border:0;outline:0;font-size:14px;letter-spacing:0;cursor:pointer;}
.voiceList li button span {color:#fff;opacity:.44;}
.voiceList li button:hover span,
.voiceList li button.active span {opacity:1;}
.voiceList li button:before {content:'';display:block;width:42px;height:32px;margin:7px auto 3px;background:url('../images/common/icons.png') no-repeat -95px -32px;}
.voiceList li button:hover:before,
.voiceList li button.active:before {background-position:-95px 0;}
.grade1 .media,
.grade2 .media {width:400px;height:225px;margin:0 0 40px;background:#000;}
.grade3 .media {width:100%;height:489px;background:#000;}
.grade1 .coming-soon{width:400px;height:225px;line-height:225px;margin:0 0 40px;background:url('../images/guide/bg_media_comingsoon.jpg') no-repeat 0 0;text-indent:-9999em;}/* 20191212 추가 */
.grade3 .coming-soon{width:870px;height:489px;line-height:489px;margin:0 0 40px;background:url('../images/guide/bg_media_comingsoon2.jpg') no-repeat 0 0;text-indent:-9999em;}/* 20200313 추가 */
/* 캐릭터별 컬러 및 배경 설정 */
.haru .color {font-style:normal;color:#f47b19;}
.haru .btnGuide {background:#f47b19;}
.haru .tabGrade li {background-image:url('../images/guide/tab_grade_haru.jpg');}
.haru .grade1 .synopsis {background:url('../images/guide/bg_synopsis_haru1.jpg') no-repeat 0 0;}
.haru .grade2 .synopsis {background:url('../images/guide/bg_synopsis_haru2.jpg') no-repeat 0 0;}
.haru .grade3 .synopsis {background:url('../images/guide/bg_synopsis_haru3.jpg') no-repeat 0 0;}
.haru .thumb {border-color:#f47b19;}
.erwin .color {font-style:normal;color:#1980f4;}
.erwin .btnGuide {background:#1980f4;}
.erwin .tabGrade li {background-image:url('../images/guide/tab_grade_erwin.jpg');}
.erwin .grade1 .synopsis {background:url('../images/guide/bg_synopsis_erwin1.jpg') no-repeat 0 0;}
.erwin .grade2 .synopsis {background:url('../images/guide/bg_synopsis_erwin2.jpg') no-repeat 0 0;}
.erwin .grade3 .synopsis {background:url('../images/guide/bg_synopsis_erwin3.jpg') no-repeat 0 0;}
.erwin .thumb {border-color:#1980f4;}
.lily .color {font-style:normal;color:#f4198a;}
.lily .btnGuide {background:#f4198a;}
.lily .tabGrade li {background-image:url('../images/guide/tab_grade_lily.jpg');}
.lily .grade1 .synopsis {background:url('../images/guide/bg_synopsis_lily1.jpg') no-repeat 0 0;}
.lily .grade2 .synopsis {background:url('../images/guide/bg_synopsis_lily2.jpg') no-repeat 0 0;}
.lily .grade3 .synopsis {background:url('../images/guide/bg_synopsis_lily3.jpg') no-repeat 0 0;}
.lily .thumb {border-color:#f4198a;}
.stella .color {font-style:normal;color:#9019f4;}
.stella .btnGuide {background:#9019f4;}
.stella .tabGrade li {background-image:url('../images/guide/tab_grade_stella.jpg');}
.stella .grade1 .synopsis {background:url('../images/guide/bg_synopsis_stella1.jpg') no-repeat 0 0;}
.stella .grade2 .synopsis {background:url('../images/guide/bg_synopsis_stella2.jpg') no-repeat 0 0;}
.stella .grade3 .synopsis {background:url('../images/guide/bg_synopsis_stella3.jpg') no-repeat 0 0;}
.stella .thumb {border-color:#9019f4;}
.stella .description dt,
.stella .description dd {float:left;line-height:1.5;}
.stella .description dt {display:block;width:154px;color:#9019f4;}
.stella .description dt:nth-of-type(odd) {display:block;width:154px;color:#480d7a;}
.stella .description dd {width:calc(100% - 154px);}
.iris .color {font-style:normal;color:#f44319;}
.iris .btnGuide {background:#f44319;}
.iris .tabGrade li {background-image:url('../images/guide/tab_grade_iris.jpg');}
.iris .grade1 .synopsis {background:url('../images/guide/bg_synopsis_iris1.jpg') no-repeat 0 0;}
.iris .grade2 .synopsis {background:url('../images/guide/bg_synopsis_iris2.jpg') no-repeat 0 0;}
.iris .grade3 .synopsis {background:url('../images/guide/bg_synopsis_iris3.jpg') no-repeat 0 0;}
.iris .thumb {border-color:#f44319;}
.jin .color {font-style:normal;color:#f4b419;}
.jin .btnGuide {background:#f4b419;}
.jin .tabGrade li {background-image:url('../images/guide/tab_grade_jin.jpg');}
.jin .grade1 .synopsis {background:url('../images/guide/bg_synopsis_jin1.jpg') no-repeat 0 0;}
.jin .grade2 .synopsis {background:url('../images/guide/bg_synopsis_jin2.jpg') no-repeat 0 0;}
.jin .grade3 .synopsis {background:url('../images/guide/bg_synopsis_jin3.jpg') no-repeat 0 0;}
.jin .thumb {border-color:#f4b419;}
.chii .color {font-style:normal;color:#f41947;}
.chii .btnGuide {background:#f41947;}
.chii .tabGrade li {background-image:url('../images/guide/tab_grade_chii.jpg');}
.chii .grade1 .synopsis {background:url('../images/guide/bg_synopsis_chii1.jpg') no-repeat 0 0;}
.chii .grade2 .synopsis {background:url('../images/guide/bg_synopsis_chii2.jpg') no-repeat 0 0;}
.chii .grade3 .synopsis {background:url('../images/guide/bg_synopsis_chii3.jpg') no-repeat 0 0;}
.chii .thumb {border-color:#f41947;}
.chii dl.personal {margin-top:-72px;}
/* 20191205 add */
.ephnel .color {font-style:normal;color:#54c287;}
.ephnel .btnGuide {background:#54c287;}
.ephnel .tabGrade li {background-image:url('../images/guide/tab_grade_ephne.jpg'); text-indent:-9999em;}
.ephnel .grade1 .synopsis {background:url('../images/guide/bg_synopsis_ephne1.jpg') no-repeat 0 0;}
.ephnel .grade2 .synopsis {background:url('../images/guide/bg_synopsis_ephne2.jpg') no-repeat 0 0;}
.ephnel .grade3 .synopsis {background:url('../images/guide/bg_synopsis_ephne3.jpg') no-repeat 0 0;}
.ephnel .thumb {border-color:#54c287;}
/* 20201215 add */
.nabilee .color {font-style:normal;color:#f49a19;}
.nabilee .btnGuide {background:#f49a19;}
.nabilee .tabGrade li {background-image:url('../images/guide/tab_grade_nabilee.jpg'); text-indent:-9999em;}
.nabilee .grade1 .synopsis {background:url('../images/guide/bg_synopsis_nabilee1.jpg') no-repeat 0 0;}
.nabilee .grade2 .synopsis {background:url('../images/guide/bg_synopsis_nabilee2.jpg') no-repeat 0 0;}
.nabilee .grade3 .synopsis {background:url('../images/guide/bg_synopsis_nabilee3.jpg') no-repeat 0 0;}
.nabilee .thumb {border-color:#f49a19;}

/* 캐릭터 스킬영상 팝업 */
.popSkillYoutube{z-index:200;display:none;position:fixed;left:50%;top:50%;margin-left:-140px;padding:0 56px 0 0;width:674px;transform:translate(-50%,-50%);}
.popSkillYoutube h2 {height:44px;font-weight:normal;font-size:24px;color:#fff;text-align:center;}
.popSkillYoutube .media{margin:0 0 10px;width:100%;height:378px;background:#000;}
.popSkillYoutube .btnClose{position:absolute;right:0;top:44px;border:1px solid #fff;font-size:0;}
.popSkillYoutube .btnClose:before{content:'';display:block;width:23px;height:23px;margin:10px;background:url('../images/common/buttons.png') no-repeat -67px -170px;}



/* 20200423추가 : 브로치 개선 */
.search-filter{overflow:hidden;margin:-30px 0 30px;padding:25px 0;border:solid #d7d7d7;border-width:0 1px 1px;text-align:center;}
.search-filter *{vertical-align:top;}
.searchMessage{text-align:center;}
.searchMessage p{margin:45px 0 10px;line-height:1.4;letter-spacing:-2px;font-size:18px;color:#252525;}
.searchMessage .image{height:413px;}
.searchMessage .image img{width:100%;height:100%;}
.search-filter{padding:0;}
.search-filter dl{overflow:hidden;margin:-1px 0 0;}
.search-filter dl dt,
.search-filter dl dd{float:left;padding:14px 0 4px;border-top:1px solid #e2e2e2;text-align:left;font-size:14px;color:#959595;}
.search-filter dl dt.nameTit {padding:24px 0 4px;}
.search-filter dl dt{width:19%;text-indent:40px;font-weight:bold;color:#252525;}
.search-filter dl dd{width:81%;}
.search-filter dl dd ul{padding:0 0 0 96px;}
.search-filter dl dd ul li{position:relative;float:left;margin:0 0 10px;width:120px;}
.search-filter dl dd ul li:first-child{margin-left:-96px;width:96px;}
.search-filter dl dd ul li input{position:absolute;top:4px;left:0;margin:0;width:17px;height:17px;opacity:0;cursor:pointer;z-index:5;vertical-align:middle;}
.search-filter dl dd ul li i{float:left;margin:1px 0 0;width:17px;height:17px;background:url('../images/item/ico_radio.png') 0 0 no-repeat;z-index:3;}
.search-filter dl dd ul li label{float:left;margin-left:10px;cursor:pointer;}
.search-filter dl dd ul li input:checked+i{background-position:0 bottom;}
.search-filter dl dd.row ul{width:350px;}
.item-list {margin:0 0 30px;border-bottom:1px solid #e2e2e2;}
.itembox{overflow:hidden;margin:0 0 0px -12px;width:882px;}
.itembox li{position:relative;overflow:hidden;float:left;margin:0 0 20px 12px;width:282px;height:98px;}
.itembox li:first-child{margin-right:-1px;}
.itembox li a{width:100%;height:100%;}
.itembox li a:after {content:"";display:block;clear:both;}
.itembox li a:hover .gradient,
.itembox li a:hover .gradient i,
.itembox li a:hover .gradient em,
.itembox li a:hover .result-word,
.itembox li a.active .gradient,
.itembox li a.active .gradient i,
.itembox li a.active .gradient em,
.itembox li a.active .result-word {text-decoration:none;}
.itembox li a:hover:after,
.itembox li a.active:after{position:absolute;left:0;top:0;right:0;bottom:0;border:3px solid #25b7aa;content:'';}
.itembox li .item-img {width:80px;height:98px;float:left;background-color:#f7f7f7;}
.itembox li img{width:48px;height:48px;border-radius:2px;margin:25px 0 0;}
.itembox li .gradient {width:186px;text-align:left;float:left;padding:30px 0 0 15px;}
.itembox li .gradient i {display:block;font-style:normal; font-size:15px;font-weight:bold; line-height:1em;color:#252525;}
.itembox li .gradient .gradeIcon {display:block;font-style:normal; font-size:14px;padding-top:8px; line-height:1em;}
.itembox li .gradient .gradeIcon.bit {color:#7bd016;}
.itembox li .gradient .gradeIcon.kilo {color:#16a2d0;}
.itembox li .gradient .gradeIcon.mega {color:#d08416;}
.itembox li .gradient .gradeIcon.giga {color:#d0161d;}
.itembox li .gradient .gradeIcon.tera {color:#a916d0;}

.itembox li .result-word{color:#ef5c16;}
.itembox li.itemDetail {display:none;position:relative;padding:0 0 0 345px;width:523px;height:303px;background:#fff;border:1px solid #e2e2e2;}
.itembox li.itemDetail a,
.itembox li.itemDetail a:after{position:static;border:0 none;}
.itembox li.itemDetail img{position:absolute;left:70px;top:22px;width:195px;height:260px;}
.itembox li.nodata{padding:120px 0 0;width:870px;height:180px;text-align:center;font-size:18px;}
.itembox li.nodata span {color:#ef5c16;}
.itembox li.nodata small{display:block;line-height:2.2;font-size:14px;color:#959595;}

.itemDetailInfo{padding:57px 0 0;font-size:14px;color:#959595;}
.itemDetailInfo .title{margin:0 0 10px;letter-spacing:-2px;font-size:24px;color:#252525;}
.itemDetailInfo .title small{display:block;margin:8px 0 0;letter-spacing:-1px;font-size:14px;color:#252525;}
.itemDetailInfo .desciption{margin:0 0 35px;}
.itemDetailInfo .gradeIcon {display:block;font-style:normal; font-size:14px; line-height:1em;margin:0 0 36px;}
.itemDetailInfo .gradeIcon.bit {color:#7bd016;}
.itemDetailInfo .gradeIcon.kilo {color:#16a2d0;}
.itemDetailInfo .gradeIcon.mega {color:#d08416;}
.itemDetailInfo .gradeIcon.giga {color:#d0161d;}
.itemDetailInfo .gradeIcon.tera {color:#a916d0;}
.itemDetailInfo dl{float:left;width:154px;font-size:12px;}
.itemDetailInfo dl dt,
.itemDetailInfo dl dd{float:left;height:14px;margin:0 0 10px;}
.itemDetailInfo dl dt{width:40%;font-weight:bold;color:#252525;}
.itemDetailInfo dl dd{width:60%;}
.itemDetailInfo table{float:left;width:337px;font-size:12px;}
.itemDetailInfo table th,
.itemDetailInfo table td{height:25px;border:1px solid #e2e2e2;text-align:center;}
.itemDetailInfo table thead th{border-bottom:0 none;color:#0d878d;}
.itemDetailInfo table tbody th{width:85px;text-align:left;text-indent:10px;font-weight:normal;color:#252525;}
.itemDetailInfo table tbody td{min-width:75px;font-weight:normal;}

.iconList li{height:98px;background:#fff;text-align:center;}
.itembox li.itemDetail{height:239px;text-align:left;}
.itembox li.itemDetail .image{overflow:hidden;position:absolute;left:140px;top:40px;margin:0;width:160px;height:160px;background:#f2f7f7;border:1px solid #97cace;}
.itembox li.itemDetail .image img{left:0px;top:0px;margin:0;width:48px;height:48px;padding:55px 0 0 56px;}
.itembox .itemDetailInfo dl{width:100%;}
.itembox .itemDetailInfo dl dt{width:10%;}
.itembox .itemDetailInfo dl dd{width:90%;}

.searchName-inbox{overflow:hidden;padding:0 0 12px 0;}
.searchName-inbox *{vertical-align:top;}
.searchName-inbox .inputSearch{margin:0 4px 0 0;width:564px;height:33px;border:1px solid #e2e2e2;text-indent:10px;font-size:13px;}
.searchName.filter dl dd ul li{width:120px;}

.itembox li.itemDetail .gradeTab {position:absolute;top:0px;left:-1px;}
.itembox li.itemDetail .gradeTab span {display:block;width:80px;height:48px;text-align:center;border:1px solid #e2e2e2;margin-top:-1px;}
.itembox li.itemDetail .gradeTab span a {padding-top:16px;width:80px;height:32px;display:block;background-color:#f7f7f7; color:#959595;font-size:14px;}
.itembox li.itemDetail .gradeTab span:hover a {text-decoration:none;background-color:#fff;color:#252525;}
.itembox li.itemDetail .gradeTab span.active  {border-right:none;}
.itembox li.itemDetail .gradeTab span.active a {background-color:#fff;color:#252525;font-weight:bold;}

.set-tab {width:100%; height:50px; display:block; margin:24px 0 0 ;}
.set-tab:after {content:"";display:block;clear:both;}
.set-tab ul {width:300px; height:40px; display:block;margin:0 auto;}
.set-tab ul li {width:148px;height:26px;border:1px solid #d7d7d7;background-color:#fff;padding-top:12px;float:left;}
.set-tab ul li a {display:block;width:100%;height:100%; font-size:14px;color:#959595;}
.set-tab ul li.active {border:1px solid #0d878d;background-color:#0d878d;}
.set-tab ul li.active a {text-decoration:none;color:#fff;}
.set-tab ul li:hover {border:1px solid #0d878d;background-color:#0d878d;}
.set-tab ul li:hover a {text-decoration:none;color:#fff;}

.setEffect dl dd ul li:first-child{margin-left:-120px; width:120px;}
.setEffect .search-filter dl dt,
.setEffect .search-filter dl dd {padding:24px 0 12px;}
.setEffect .search-filter dl dt:nth-child(1),
.setEffect .search-filter dl dd:nth-child(2) {border-top:none;}

.parts-table {position:relative;}
.parts-table .set-name {font-size:24px;text-align:center;height:58px;padding-top:26px;background-color:#f2f7f7;border:1px solid #97cace;}
.parts-table .set-name .gradeIcon {font-style:normal; font-size:14px; line-height:1em; vertical-align:4px;}
.parts-table.bit .set-name .gradeIcon {color:#7bd016;}
.parts-table.kilo .set-name .gradeIcon {color:#16a2d0;}
.parts-table.mega .set-name .gradeIcon {color:#d08416;}
.parts-table.giga .set-name .gradeIcon {color:#d0161d;}
.parts-table.tera .set-name .gradeIcon {color:#a916d0;}

.parts-table .parts-list {position:relative;width:868px;height:500px;background:url('../images/item/silhouette.png') center 87px no-repeat;border:1px solid #97cace;border-top:none;}
.parts-table .parts-list li {position:absolute;}
.parts-table .parts-list li.p-head {top:74px;left:463px;}
.parts-table .parts-list li.p-chest {top:152px;left:363px;}
.parts-table .parts-list li.p-gloves {top:229px;left:463px;}
.parts-table .parts-list li.p-pants {top:312px;left:363px;}
.parts-table .parts-list li.p-shoes {top:383px;left:463px;}
.parts-table .parts-list li .parts-icon {display:block;width:40px;height:40px;background:url('../images/item/parts_set.png') no-repeat;text-indent:-9999px;border:3px solid #97cace;}

.parts-table .parts-list li.p-head .parts-icon {background-position:0px -40px;}
.parts-table .parts-list li.p-chest .parts-icon {background-position:-40px -40px;}
.parts-table .parts-list li.p-gloves .parts-icon {background-position:-80px -40px;}
.parts-table .parts-list li.p-pants .parts-icon {background-position:-120px -40px;}
.parts-table .parts-list li.p-shoes .parts-icon {background-position:-160px -40px;}

.parts-table .parts-list li .parts-wrap {position:absolute;top:-42px;left:67px;width:280px;border:3px solid #cbe4e6;}
.parts-table .parts-list li.p-chest .parts-wrap {position:absolute;top:-42px;left:-308px;}
.parts-table .parts-list li.p-pants .parts-wrap {position:absolute;top:-42px;left:-308px;}
.parts-table .parts-list li .parts-desc .option-tit {height:41px;width:48px;border:1px solid #e3f2f2;text-align:center;color:#a3cccf;}
.parts-table .parts-list li .parts-desc .option-cont {width:226px;padding:0 15px;border:1px solid #e3f2f2;text-align:left;color:rgba(37,37,37,0.5);}
.parts-table .parts-list li a:hover,
.parts-table .parts-list li a:hover * {text-decoration:none !important;transition:all .2s;-webkit-transition:all .2s;}

.parts-table.bit .parts-list li a:hover .parts-icon {border:3px solid #7bd016;}
.parts-table.kilo .parts-list li a:hover .parts-icon {border:3px solid #16a2d0;}
.parts-table.mega .parts-list li a:hover .parts-icon {border:3px solid #d08416;}
.parts-table.giga .parts-list li a:hover .parts-icon {border:3px solid #d0161d;}
.parts-table.tera .parts-list li a:hover .parts-icon {border:3px solid #a916d0;}
.parts-table .parts-list li a:hover .parts-wrap {border:3px solid #97cace;}
.parts-table .parts-list li a:hover .parts-desc .option-tit {color:#0d878d;border:1px solid #c8e6e6;}
.parts-table .parts-list li a:hover .parts-desc .option-cont {color:rgba(37,37,37,1);border:1px solid #c8e6e6;}

.compare-set {position:relative;}
.compare-set .set-list {width:328px;height:505px;border:1px solid #d7d7d7; float:left;}
.compare-set .set-list .list-wrap {overflow-y:scroll;height:504px;}
.compare-set .set-list .list-wrap li {position:relative;width:295px; height:73px; padding:27px 0 0 15px; border-top:1px solid #d7d7d7;}
.compare-set .set-list .list-wrap li:after {content:"";display:block;clear:both;}
.compare-set .set-list .list-wrap li:first-child {border-top:none;}
.compare-set .set-list .list-wrap li .parts-icon {display:block;width:40px;height:40px;float:left;background:url('../images/item/parts.png') no-repeat;text-indent:-9999px;border:3px solid #97cace;}
.compare-set .set-list .list-wrap li .parts-icon.head {background-position:0px 0px;}
.compare-set .set-list .list-wrap li .parts-icon.chest {background-position:-40px 0px;}
.compare-set .set-list .list-wrap li .parts-icon.gloves {background-position:-80px 0px;}
.compare-set .set-list .list-wrap li .parts-icon.pants {background-position:-120px 0px;}
.compare-set .set-list .list-wrap li .parts-icon.shoes {background-position:-160px 0px;}
.compare-set .set-list .list-wrap li.bit .parts-icon{border:3px solid #7bd016;}
.compare-set .set-list .list-wrap li.kilo .parts-icon{border:3px solid #16a2d0;}
.compare-set .set-list .list-wrap li.mega .parts-icon{border:3px solid #d08416;}
.compare-set .set-list .list-wrap li.giga .parts-icon{border:3px solid #d0161d;}
.compare-set .set-list .list-wrap li.tera .parts-icon{border:3px solid #a916d0;}
.compare-set .set-list .list-wrap li .parts-name {display:block;width:164px;height:46px;float:left;margin-left:10px;}
.compare-set .set-list .list-wrap li .parts-name span {display:block; font-size:14px; color:#252525;padding:4px 0 6px 0;letter-spacing:-0.1em;}
.compare-set .set-list .list-wrap li .parts-name .gradeIcon {display:block;font-style:normal; font-size:14px; line-height:1em;}
.compare-set .set-list .list-wrap li.bit .parts-name .gradeIcon {color:#7bd016;}
.compare-set .set-list .list-wrap li.kilo .parts-name .gradeIcon {color:#16a2d0;}
.compare-set .set-list .list-wrap li.mega .parts-name .gradeIcon {color:#d08416;}
.compare-set .set-list .list-wrap li.giga .parts-name .gradeIcon {color:#d0161d;}
.compare-set .set-list .list-wrap li.tera .parts-name .gradeIcon {color:#a916d0;}
.compare-set .set-list .list-wrap li a.add {position:absolute;top:30px;left:237px;display:block;width:58px;height:26px;padding-top:7px;font-size:14px;color:#0d878d;border:1px solid #0d878d;text-align:center;background-color:#fff;}
.compare-set .set-list .list-wrap li a.add.off {color:#959595;border:1px solid #d7d7d7;background-color:#ebebeb;}
.compare-set .set-list .list-wrap li a,
.compare-set .set-list .list-wrap li a * {text-decoration:none !important;transition:all .2s;-webkit-transition:all .2s;}

.compare-set .compare-table {width:529px;height:504px;border:1px solid #97cace; float:right;background-color:#f2f7f7;}
.compare-set .compare-table .parts-icon-wrap {width:270px;height:46px; display:block;margin:20px auto 0;}
.compare-set .compare-table .parts-icon-wrap:after {content:"";display:block;clear:both;}
.compare-set .compare-table .parts-icon-wrap span {display:block;float:left;width:40px;height:40px;background:url('../images/item/parts.png') no-repeat;text-indent:-9999px;border:3px solid #97cace;margin-left:10px;}
.compare-set .compare-table .parts-icon-wrap span:first-child {margin-left:0px;}
.compare-set .compare-table .parts-icon-wrap span.head {background-position:0px 0px;}
.compare-set .compare-table .parts-icon-wrap span.chest {background-position:-40px 0px;}
.compare-set .compare-table .parts-icon-wrap span.gloves {background-position:-80px 0px;}
.compare-set .compare-table .parts-icon-wrap span.pants {background-position:-120px 0px;}
.compare-set .compare-table .parts-icon-wrap span.shoes {background-position:-160px 0px;}
.compare-set .compare-table .parts-icon-wrap span.head.on {background-position:0px -40px;}
.compare-set .compare-table .parts-icon-wrap span.chest.on {background-position:-40px -40px;}
.compare-set .compare-table .parts-icon-wrap span.gloves.on {background-position:-80px -40px;}
.compare-set .compare-table .parts-icon-wrap span.pants.on {background-position:-120px -40px;}
.compare-set .compare-table .parts-icon-wrap span.shoes.on {background-position:-160px -40px;}

.compare-set .compare-table .compare-wrap {position:relative;box-sizing:border-box; width:490px;height:400px;display:block;margin:20px auto 0;background-color:#dfeded;padding:15px;}
.compare-set .compare-table .compare-wrap .bl-box {display:none; position:absolute; top:0px; left:0px;z-index:1; width:490px;height:400px;background-color:rgba(13,135,141,0.9);text-align:center;}
.compare-set .compare-table .compare-wrap .bl-box p {padding-top:160px;font-size:24px;color:#fff;line-height:1.4em;}
.compare-set .compare-table .compare-wrap.blindComp .bl-box {display:block;}

.compare-set .compare-table .compare-wrap .box-desc {position:relative;border:3px solid #97cace; background-color:#fff;}
.compare-set .compare-table .compare-wrap .box-desc:first-child {margin:0 0 14px 0;}
.compare-set .compare-table .compare-wrap .box-desc .btn-refresh {position:absolute;top:10px;right:20px;display:block;width:64px;height:24px;background:url('../images/item/refresh.png') no-repeat; text-indent:-9999px;}
.compare-set .compare-table .compare-wrap .box-desc .compare-item {display:block;font-size:16px;width:434px;height:32px;border-bottom:1px solid #c8e6e6;padding:13px 0 0 20px;letter-spacing:-0.1em;}
.compare-set .compare-table .compare-wrap .box-desc .compare-option {position:relative;}
.compare-set .compare-table .compare-wrap .box-desc .compare-option:after {content:"";display:block;clear:both;}
.box-desc .compare-option .parts-icon {position:absolute;top:39px;left:20px;display:block;width:40px;height:40px;background:url('../images/item/parts_set.png') no-repeat;text-indent:-9999px;border:3px solid #97cace;}
.box-desc .compare-option .parts-icon.head {background-position:0px 0px;}
.box-desc .compare-option .parts-icon.chest {background-position:-40px 0px;}
.box-desc .compare-option .parts-icon.gloves {background-position:-80px 0px;}
.box-desc .compare-option .parts-icon.pants {background-position:-120px 0px;}
.box-desc .compare-option .parts-icon.shoes {background-position:-160px 0px;}

.box-desc.contIn .compare-option .parts-icon.head {background-position:0px -40px;}
.box-desc.contIn .compare-option .parts-icon.chest {background-position:-40px -40px;}
.box-desc.contIn .compare-option .parts-icon.gloves {background-position:-80px -40px;}
.box-desc.contIn .compare-option .parts-icon.pants {background-position:-120px -40px;}
.box-desc.contIn .compare-option .parts-icon.shoes {background-position:-160px -40px;}

.box-desc.contIn.bit .compare-option .parts-icon {border:3px solid #7bd016;}
.box-desc.contIn.kilo .compare-option .parts-icon {border:3px solid #16a2d0;}
.box-desc.contIn.mega .compare-option .parts-icon {border:3px solid #d08416;}
.box-desc.contIn.giga .compare-option .parts-icon {border:3px solid #d0161d;}
.box-desc.contIn.tera .compare-option .parts-icon {border:3px solid #a916d0;}

.box-desc .compare-option .opt-list {width:366px; float:right;border-left:1px solid #c8e6e6;}
.box-desc .compare-option .opt-list li {width:356px;height:26px;border-top:1px solid #c8e6e6;padding:15px 0 0 10px;color:#0d878d;font-size:12px;}
.box-desc .compare-option .opt-list li .op-cont {color:#252525; letter-spacing:-0.12em;padding-left:10px;}
.box-desc .compare-option .opt-list li:first-child {border-top:none;}

.compare-set .compare-table .compare-wrap .box-desc.contIn .compare-item {font-weight:bold;}
.compare-wrap .box-desc .compare-item .gradeIcon {font-style:normal; font-size:14px; line-height:1em; padding:0 0 0 10px;}
.compare-wrap .box-desc.bit .compare-item .gradeIcon {color:#7bd016;}
.compare-wrap .box-desc.kilo .compare-item .gradeIcon {color:#16a2d0;}
.compare-wrap .box-desc.mega .compare-item .gradeIcon {color:#d08416;}
.compare-wrap .box-desc.giga .compare-item .gradeIcon {color:#d0161d;}
.compare-wrap .box-desc.tera .compare-item .gradeIcon {color:#a916d0;}