@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2018-12-01
Modify Date : 2018-12-10
File : /event/landing/newskin
*******************************************/

/* 상단 비주얼 */
.top_banner {background:#ebf2f8; text-align:center;}
.top_banner .top_box {width:1180px; height:209px; margin:0 auto; background:url('/images/event/20180101/design_source_top2.png') no-repeat right top;}
.top_banner ul {height:209px; text-align:left;}
.top_banner .stxt {padding-top:40px; font-size:16px; color:#6c94ba;}
.top_banner .stit {font-size:40px; color:#1e3e5c;}
.top_banner .desc {padding:10px 0 40px; font-size:14px; color:#6c94ba;}

/* 콘텐츠 */
.contents {width:1180px; margin:0 auto; font-size:14px; color:#2c2c2c;}

/* 디자인 기능 배너 */
.skin_banner {margin:40px auto; background: #fff; text-align:center}
.skin_banner ul {margin:0 auto; padding-left:0; *zoom:1;}
.skin_banner ul:after {display:block; clear:both; content:'';}
.skin_banner li {float:left; width:33.3333%; margin-right:-1px; background:#f4f4f4;}
.skin_banner img {vertical-align:top; width:100%; transition:0.3s ease-in-out;}

/* 디자인 소스 찾기 */
.categoryTable {width:100%; margin:0 auto; border-bottom:1px solid #e9e9e9;}
.categoryTable .categoryThead {height:40px; border-top:2px solid #5b626f; text-align:center;}
.categoryTable .categoryTh {width:170px; height:40px; line-height:38px; border-top:1px solid #525966; background:#3c4452; padding-left:27px; text-align:left; font-size:14px; color:#fff; line-height:14px;}
.categoryTable .categoryTd {border-top:1px solid #e9e9e9; background:#f8f9fa; padding:5px 0 5px 27px; font-size:14px; line-height:2.0;}
.categoryTable .categoryTd .categorySelect {float:left; width:150px; font-size:inherit; color:#6e6e6e;}
.searchWrap {padding-top:30px; text-align:center;}
.searchWrap .searchBtn {display:inline-block; width:150px; height:40px; line-height:38px;  border:1px solid #4f5766; background:#616a7b; text-align:center; font-size:14px; color:#fff; text-decoration:none; cursor:pointer;}

/* 디자인 소스 검색결과 */
.searchCategory {position:relative; margin:60px auto 40px; height:50px; border:1px solid #e9e9e9;}
.searchCategory .searchCategoryBox {width:100%;}
.searchCategory .searchCategoryText {float:left; width:70%; line-height:30px; padding:10px 0; text-align:center; font-size:14px; color:#2c2c2c; cursor:pointer;}
.searchCategory .searchCategoryText.l_text {width:15%; border-right:1px solid #e9e9e9;}
.searchCategory .searchCategoryText.r_text {width:15%; border-left:1px solid #e9e9e9;}
.searchCategory .searchCategoryText.l_text img, 
.searchCategory .searchCategoryText.r_text img {vertical-align:middle; margin-bottom:2px;}

/* 디자인 소스 다운로드 */
.contentsListArea {position:relative; width:100%;}
.contentsListArea .contentsTitle {position:relative; padding-bottom:10px; text-align:left; font-size:20px; font-weight:600; color:#414141;}
.contentsListArea .contentsTitle span {font-size:12px; font-weight:normal; color:#919191;}
.contentsListArea .contentsPopup {position:absolute; top:5px; right:0px; cursor:pointer; font-size:14px; color:#898989;}
.contentsList {position:relative; margin-left:-20px;}
.contentsList .contentsListItem, 
.contentsList .contentsListItemOver {float:left; width:280px; height:180px; margin:0 0 20px 20px; border:1px solid #e9e9e9;}
.contentsList .contentsListItemOver {border:1px solid #5da1f1;}
.contentsList .contentsItem {position:relative; margin-bottom:20px;}
.contentsList .itemImg {margin-top:30px; text-align:center;}
.contentsList .itemImg img {width:220px;}
.contentsList .itemDownload {width:280px; height:38px; text-align:center; position:absolute; background-color:#5da1f1; bottom:0px; display:none; cursor:pointer;}
.contentsList .itemDownload img {margin-top:9px;}

/* 읽어주세요 */
.footer_guide {margin-top:30px; background:#414856; padding:30px 0;}
.footer_guide ul {width:1180px; margin:auto;}
.footer_guide li {padding-left:10px; text-indent:-10px; font-size:13px; color:#ccc; line-height:2.0;}
.footer_guide img.footer_bl {margin:7px 0 0 0;}

/* 레이어팝업 */
#bodyHide {position:fixed; top:0; left:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50); opacity:0.5; -moz-opacity:0.5;}
#banner_information { position:absolute; top:0; left:50%; margin-left:-452px; width:905px;}

@media (min-width:0) and (max-width:1024px) {
.top_banner .top_box, .contents, .footer_guide ul {width:auto;}
.contents, .footer_guide ul {margin:0 20px;}
.top_banner ul {padding-left:20px;}
.contentsList .contentsListItem, 
.contentsList .contentsListItemOver {width:31.2%;}
.contentsList .itemDownload {width:100%;}
}
@media (min-width:0) and (max-width:960px) {
.top_banner ul {background:rgba(235,242,248,0.6);}
.searchCategory .searchCategoryText span {display:none;}
.contentsList .contentsListItem, 
.contentsList .contentsListItemOver {width:47%;}
}
@media (min-width:0) and (max-width:680px) {
.top_banner ul {width:100%; background:rgba(235,242,248,1); padding-left:0; text-align:center;} 
.skin_banner li {width:100%; margin:5px 0;}
.contentsList .contentsListItem, 
.contentsList .contentsListItemOver {width:calc(100% - 20px);}
}