@charset "utf-8";
/* COMMON */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0 }
body, input, textarea, select, button, table, h1, h2, h3, h4, h5 { font-family:Meiryo,Tahoma,'MS PGothic',arial,sans-serif;  line-height: normal }
body { position: relative; color: #333; -webkit-text-size-adjust: none; background-color: #fff; }
body, button, input, select, td, textarea, th { font-size: 14px; font-family:Meiryo,Tahoma,'MS PGothic',arial,sans-serif; color: #333 }
table { border-collapse: collapse }
img, fieldset { border: 0 }
ul, ol { list-style: none }
em, address { font-style: normal }
a { color: inherit; text-decoration: none }
.tbl {display:table}
.tbl > * {display:table-cell}
.pdb_5 {padding-bottom:5px}
.pdb_10 {padding-bottom:10px}
.pdb_15 {padding-bottom:15px}
.pdb_20 {padding-bottom:20px;}
.pdt_5 {padding-top:5px}
.pdt_10 {padding-top:10px}
.pdr_5 {padding-right:10px;}
.mgb_10 {margin-bottom:10px}
.mgb_15{margin-bottom:15px}
.divide { clear: both; width: 100%; background-color: #ebebeb; height: 8px; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; }
.divb {display:block;}

#jpWrap { position:relative;}

/* 메뉴 */
.jpMenu { position:absolute; top:45px; left:0; width:100%; background-color:#fff; border:4px solid #ff87b7; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index:9999}
.jpMenu tr { height:60px; border:1px solid #eee;}
.jpMenu tr:last-child { border:none}
.jpMenu td { font-weight:bold; text-align:center; vertical-align:middle; width:33.3%; height:60px; border-right:1px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:}
.jpMenu td:last-child { border:none}
.jpMenu td a { display: block; width:100%; height:100%; padding-top:18px; color:#ff87b7; font-size:15px; letter-spacing:-0.05em;}

/*헤더*/
.jpHeader { width: 100%; height: 45px; position: relative; border-bottom:2px solid #ff87b7 }
.jpHeader .btnLeftMenu { position: absolute; display: block; overflow: hidden; left: 0; top: 0; }
.jpHeader .btnLeftMenu img { width: 40px; height: 45px; }
.jpHeader .btnSearch { position: absolute; display: block; right: 0; top: 0; height:45px;}
.jpHeader .btnSearch span { position:relative; display:block;}
.jpHeader .btnSearch img { height: 100%;}
.jpHeader .logo {  text-align: center; height:45px; }
.jpHeader .logo img { height: 100%;}

/* 메인 탑기사 */
.contents .topAtc { position: relative; width: 100%; height:240px; overflow:hidden }
.contents .topAtc img { width: 100%; }
.contents .topAtc .topic { position:absolute; top:0; left:0; background-color:#ff87b7; color:#fff; font-weight:bold; padding:0 5px 2px 5px; font-size:20px;}
.contents .topAtc .transBg { position: absolute; bottom: 0; width: 96%; padding:2%; font-size: 20px; font-weight:bold; color: #fff; text-align: center; line-height: 1; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.64)), color-stop(51%, rgba(0,0,0,0.65)), color-stop(100%, rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.64) 50%, rgba(0,0,0,0.65) 51%, rgba(0,0,0,0.65) 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0 ); /* IE6-9 */
}

/* 탑기사 페이징 */
.topAtcNumWrap {position:relative;}
.topAtcNumWrap ul { display: table; margin:10px auto 0 auto }
.topAtcNumWrap ul li { display: table-cell; padding: 0 2px 0 2px; vertical-align: middle }
.topAtcNumWrap .topAtcNum { display: inline-block; overflow: hidden; width: 6px; height: 6px; border-radius: 3px; text-indent: 10px; background-color: #c8c8c8; vertical-align:middle }
.topAtcNumWrap .pgOn { background-color: #ff87b7 }
.topAtcNumWrap .tSwBtn { display: inline-block; padding: 0 2px 0 2px; vertical-align:middle }
.topAtcNumWrap .tSwBtn img { width: 26px; vertical-align:middle }

/* 리스트 */
.atcList { width:94%; margin:20px auto 20px auto;}
.atcList dt { font-size:22px; font-weight:bold; color:#ff87b7; padding-bottom:8px; letter-spacing:-0.03em}
.tMore { float:right; font-size:18px; font-weight:normal; color:#888; margin-top:3px}
.atcList dd { padding-bottom:10px;}
.scThumbAtc { display:table; width:100%}
.scThumbAtc .mSImg { display:table-cell; vertical-align:middle;}
.scThumbAtc .mSImg a { display:block; width:110px; height:80px; overflow:hidden; border:1px solid #ddd;}
.scThumbAtc .mSImg img { display:block; width: 100%; }
.scThumbAtc .mSTxt {display:table-cell; padding-left:10px; font-size: 18px; line-height: 1.2em; letter-spacing:-1px; vertical-align:middle; color:#333}
.scThumbAtc .mSNum {display:table-cell; vertical-align:middle; width:25px; font-weight:bold; font-size:22px; color:#ff87b7}

.atcList2 { width:94%; margin:20px auto 0 auto;}
.atcList2:after { content: ""; display: block; clear: both }
.atcList2 dt { font-size:22px; font-weight:bold; color:#ff87b7; padding-bottom:8px; letter-spacing:-0.03em}
.atcList2 dd { position:relative; float: left; width: 48.5%; text-align: center; margin-right: 3%; margin-bottom:15px; }
.atcList2 dd:nth-child(odd) { margin-right:0;}
.atcList2 dd span { display: block; }
.atcList2 dd .popThumb { display:block; width: 100%; margin: 0 auto; height:120px; overflow:hidden; border: 1px solid #ddd }
.atcList2 dd .popThumb img { display:block; width:100%;}
.atcList2 dd .thumbTitle { font-size: 15px; width: 100%; text-align: center; margin: 0 auto; line-height: 1.2; margin-top: 3px; overflow: hidden; color:#333; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word;  height: 2.3em; letter-spacing:-0.03em}

.atcList3 { width: 100%; clear: both; }
.atcList3:after { content: ""; display: block; clear: both }
.atcList3 dt { font-size:22px; font-weight:bold; color:#ff87b7; padding:20px 3% 8px 3%; letter-spacing:-0.03em}
.atcList3 dd { border-top: 1px solid #eaeaea }
.atcList3 dd:first-child { border-top: none }
.atcList3 dd a { display: block; width: 94%; padding:.63em 3% .52em 3%; color: #333; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; letter-spacing:-1px; }
.atcList3 dd a strong { color:#ff87b7}

/* 클릭스타워즈 랭킹 */
.csList {display:table;}
.csList .rkNum {display:table-cell; vertical-align:middle; padding-right:10px;}
.csList .rkNum span {color: #fff;  padding: 3px 7px;  border-radius: 8px;  font-size: 20px; font-weight:bold;}
.csList .rkNum .rk1 {background: #f34d71;}
.csList .rkNum .rk2 {background: #32e1ff;}
.csList .rkNum .rk3 {background: #a4d150;}
.csList .abThumb {display:table-cell; vertical-align:middle; padding-right:10px;}
.csList .abThumb img {width: 78px; height: 78px; border:1px solid #d1d1d1; border-radius: 100px;}
.csList .csSong {display:table-cell; vertical-align:middle;}
.csList .csSong a { font-size:16px; color:#5e5e5e; letter-spacing:-0.03em}
.csList .csSong a span { font-size:20px; font-weight:bold; color:#333; display:block;}

/* 페이징 */
.paging2 {text-align:center; padding-bottom:20px;}
.paging2 a {display:inline-block; width:30px; height:30px; line-height:31px; text-align:center;  -webkit-border-radius:3px; color:#666; font-size:18px; margin:0 2px;}
.paging2 a.on {color:#ff87b7; }

/* 리드면 */
.mRead { width:100%;}
.mRead .rdTop { width:94%; margin:20px auto 10px auto; }
.mRead .rdCa { float:left; font-size:22px; font-weight:bold; color:#ff87b7; letter-spacing:-0.03em}
.mRead .rdDate { float:right; font-size:16px; font-weight:normal; color:#888; padding-top:10px; letter-spacing:-0.03em}
.mRead .rdTitle { clear:both; width:100%; padding-top:3px;}
.mRead .rdTitle h2 { font-size:24px; font-weight:bold; color:#333; letter-spacing:-0.03em}
.mArticle { width:94%; margin:0 auto; font-size:1.2em;;}
.mArticle .atcImg { width:106.3%; margin-bottom:15px; margin-left:-3.15%;}
.mArticle .atcImg img {width:100%;}
.mArticle .atcImg span { display:block; width:96%; text-align:center; margin:5px auto 0 auto; font-size:13px; color:#888; line-height:1.2}
.mArticle p {width:100%; padding-bottom:25px; /*font-size:1.1em;*/ font-size:17px; color:#333; line-height:1.55em; }
.mArticle .rdMore { display:block; width:200px; height:50px; margin:20px auto; border-radius:10px; background-color:#fff; border:2px solid #ff87b7; color:#ff87b7; text-align:center; font-size:20px; }
.rdTag { width:94%; margin:0 auto; color:#888; font-size:17px; color:#ff87b7}
.rdTag a { display:inline-block; border:1px solid #ff87b7; border-radius:20px; padding:5px 6px; margin-bottom:8px; line-height:100%;}

/* 공유버튼 */
.pShareBtn { width:270px; margin:0 auto; padding:30px 0 15px 0;}
.pShareBtn:after {content:""; display:block; clear:both}
.pShareBtn li { float:left; width:60px; margin:0 10px 20px 0;}
.pShareBtn li:last-child { margin-right:0;}
.pShareBtn li a { display:block; width:60px; text-align:center; padding-top:64px;} 
.pShareBtn li .twitter { background:url(http://img.tf.co.kr/ss/2018/starwars/mawards/s_icn_twitter.png) no-repeat 0 0; background-size:100%} 
.pShareBtn li .facebook { background:url(http://img.tf.co.kr/ss/2018/starwars/mawards/s_icn_facebook.png) no-repeat 0 0; background-size:100%} 
.pShareBtn li .line { background:url(http://img.tf.co.kr/ss/2018/starwars/mawards/s_icn_line.png) no-repeat 0 0; background-size:100%} 
.pShareBtn li .kakao { background:url(http://img.tf.co.kr/ss/2018/starwars/mawards/s_icn_kakao.png) no-repeat 0 0; background-size:100%; } 

.mReply {width:94%; margin:0 auto;}

/* 검색 */
.jpSearch { position:relative; width:100%; height:40px; border-bottom:1px solid #ddd; background-color:#f4f4f4;}
.jpSearch button { position:absolute; top:6px; right:6px; width:40px; height:28px; border-radius:6px; border:1px solid #999; background-color:#fff; }
.jpSearch input {position:absolute; top:6px; left:8px; border:none; background:transparent; height:28px; width:80%; font-size:18px;}
.jpSearch input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #aeaeae; opacity: 1; /* Firefox */}
.jpSearch input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #aeaeae;}
.jpSearch input::-ms-input-placeholder { /* Microsoft Edge */ color: #aeaeae;}

/* Footer */
.jpFooter { border-top: 1px solid #ddd; padding:12px 0 15px 0 }
.jpFooter ul { display: table; margin: 0 auto }
.jpFooter ul li { display: table-cell; padding: 0 2px 0 2px }
.jpFooter ul li button { padding:2px 10px 0 10px; height: 30px; border: 1px solid #999; border-radius: 15px; background-color: #fff; color: #999; font-size: 14px; line-height: 100%; }
.jpFooter span { display: block; text-align: center; color: #999; font-size: 13px; line-height: 1.2; padding-top: 8px; }


/* Tablet & Desktop Device */
@media all and (min-width:768px) {
#jpWrap { width: 640px; margin: 0 auto }
}