@charset "utf-8";


/* =======================================================
	item-list
========================================================*/

/* item-list */
.item-list {}
.item-list > ul {width: 100%; }
.item-list ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.item-list > ul > li {position: relative; float: left; width: 48%; margin-left: 4%; margin-bottom: 20px; border-radius: 10px; box-sizing: border-box; box-shadow: 0 3px 10px 4px rgba(10, 10, 10, 0.1); }
.item-list > ul > li:nth-child(odd) {margin-left: 0; }
.item-list > ul > li.nodata {float: none; width: 100%; padding: 100px 0; box-sizing: border-box; text-align: center; color: #6f6f6f; font-size: 16px; }


/* item */
.item {position: relative; }
.item:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.item .item-dimlayer {display: none; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); border-radius:10px 10px 0 0; box-sizing: border-box; color: #fff; overflow: hidden; }

.item .item-image {position: relative; width: 100%; background-color: #f5f5f5; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.item .item-image a {position: relative; z-index: 99; display: block; width: 100%; height: 100%; }
.item .item-image .item-dimlayer {display: none; opacity: 0; }

.item-dimlayer .item-introduction {width: 100%; height: 100%; padding: 20px 20px; box-sizing: border-box; }
.item-dimlayer .item-introduction .title {display: block; margin-bottom: 5px; font-size: 15px; font-weight: 400; color: #efefef; }
.item-dimlayer .item-introduction .text {font-size: 12px; font-weight: 300; color: #efefef; }


.item-info {position: relative; box-sizing: border-box; }
.item-info > a {display: block; width: 100%; padding: 10px 10px 10px; box-sizing: border-box; }

.item-info .title-area {}
.item-info .title-area .brand-name {display: block; margin-bottom: 4px;  font-size: 11px; font-weight: 400; color: #999; }
.item-info .title-area .title {font-size: 13px; margin-bottom: 10px; font-weight: 400; color: #000; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-info .title-area .text {font-size: 11px; font-weight: 400; color: #666; }


/* 하단 util 그룹  */
.item-util {border-top: 1px solid #eee; }
.item-util:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.item-util > button {height: 30px; padding: 0 8px; box-sizing: border-box; font-size: 13px; text-align: center; color: #666; }
.item-util > button span {display: inline-block; background-repeat: no-repeat; background-position: left center; vertical-align: middle; line-height: 30px; }

.item-util .item-share {float: left; width: 100%;  }
.item-util .item-share span {background-image: none; padding: 0; }
.item-util .item-join {float: right; width: 50%; border-left: 1px solid #f0f0f0; }
.item-util .item-join + .item-share {width: 50%; }

/* 공유하기 버튼*/
.item-util .item-share {float: left; width: 100%; }
.item-util .item-share span {padding-left: 23px; background-image: url("/AppData/images/site/icon/icon_share02.png"); background-size: 15px auto; }


/* close */
.item.close .item-close {display: block; text-align: center; }
.item.close .item-close .text {position: absolute; top: 50%; left: 50%; width: 100%; margin-top: -24px; font-size: 24px; color: #aaa; font-weight: 900; transform: translate(-50%, -50%); }


/* open */
.item.open .item-open {display: block; text-align: center; }
.item.open .item-open .text {position: absolute; top: 50%; left: 50%; width: 100%; margin-top: -24px; font-size: 24px; color: #fff; font-weight: 900; transform: translate(-50%, -50%); }
.item.open .item-open-date {position: absolute; top: 50%; left: 50%; display: inline-block; margin-top: -56px; padding: 4px 8px; background-color: #de9e39; border-radius: 5px; box-sizing: border-box; font-size: 12px; transform: translate(-50%, -50%); white-space: nowrap; }




.fm--list .item-list {margin-top: 40px; padding: 0 20px; box-sizing: border-box; }

.fm--panel {padding: 30px 20px; background-color: #fff; box-sizing: border-box; }
.fm--panel:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.fm--panel.gray {background-color: #f5f5f5; }

.search-title {float: left; font-size: 20px; font-weight: 700; width: 60px; line-height: 50px; }

.fm--contents-search {float: left; width: calc(100% - 60px); box-sizing: border-box; }
.fm--contents-search .fm--input-text {float: left; width: calc(100% - 80px); border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0}
.fm--contents-search .fm--btn {float: left; width: 80px; background-color: #000; color: #fff; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; border: 1px solid #000; }




/* =======================================================
*	color
*	포인트 컬러 0173bc
========================================================*/
/* layout 
-----------------------------------------------*/
.header-category-select {border-color: #173a84; }
.fm--footer-floor .copyright {color: #173a84; }

/* common
-----------------------------------------------*/
.fm--pagination a.current {background-color: #173a84; color: #fff; }

.fm--btn-main {border-color: #173a84; background-color: #173a84; color: #fff; }
.fm--btn-main-line {border-color: #173a84; color: #173a84; }

/* board
-----------------------------------------------*/
.fm--answer-wrapper .fm--tag-answer {background-color: #173a84;}


/* member
-----------------------------------------------*/
.fm--login .fm--btn-login {border-color: #173a84; background-color: #173a84; }
.fm--join-welcome .fm--welcome .title {color: #173a84; }
.fm--myinfo-gate .fm--btn-login {border-color: #173a84; background-color: #173a84; }
.fm--myfield-design .fm--type-item.active .fm--type-thumb {border-color: #173a84; }
.fm--myfield-design .fm--type-item .fm--tag-use  {background-color: #173a84; }
.fm--myfield-option .fm--plus-option input:checked ~ label {border-color: #173a84;}

/* popup
-----------------------------------------------*/


.fm--setting-design .fm--type-item.active .fm--type-thumb {border-color: #173a84; }
.fm--setting-finish .fm--box-welcome .fm--welcome-title  {color: #173a84;}