@charset "utf-8";


/* =================================
*		사이트 공통 반응형 디자인
*		2021-01-15 작성
================================== */

/*
  ##Device = Low Resolution Tablets, Mobiles
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {



}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

/* =======================================================
	아이템
========================================================*/
.item-container ul {margin-left: -20px; }
.item-container li {width: calc(25% - 20px); margin-left: 20px;}

.item-close .text {font-size: 24px; }

.item-open .text {font-size: 24px;}
.item-open .date {margin-top: -34px; padding: 4px 10px; }

/* =======================================================
  상품 product
========================================================*/
.product-container ul {margin-left: -20px; }
.product-container li {width: calc(25% - 20px); margin-left: 20px;}

}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

/* =======================================================
	아이템
========================================================*/
.item-container ul {margin-left: -15px; }
.item-container li {width: calc(25% - 15px); margin-left: 15px; }
.item-container li:nth-child(even) {margin-left: 15px; }

.item-close .text {font-size: 24px; }

.item-open .text {font-size: 24px; }
.item-open .date {margin-top: -34px; padding: 4px 10px; }

/* =======================================================
  상품 product
========================================================*/
.product-container ul {margin-left: -15px; }
.product-container li {width: calc(25% - 15px); margin-left: 15px; }
.product-container li:nth-child(even) {margin-left: 15px; }



}




/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

}



/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}


/*
  ##Device = Laptops, Desktops common
  ##Screen = B/w 1024px to
*/
@media (min-width: 1024px)  {

/* =======================================================
	페이지 공통 영역
========================================================*/
/* page-header */
.page-bottom .btn-full {width: 300px !important; margin: 0 auto; }
.page-bottom .btn-group {width: 610px; margin: 0 auto; }
.page-bottom .btn-group .btn-half {float: left; width: 300px !important;}
.page-bottom .btn-group .btn-half + .btn-half {margin-left: 10px; }



/* =======================================================
	tab-nav
========================================================*/
/* tab-nav */
.tab-nav li {margin-right: 10px; }

/* tab-nav03 */
.tab-nav03 {position: relative; }
.tab-nav03:after {content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 1px; background-color: #36458d; }

.tab-nav03 ul {display: block;  }
.tab-nav03 ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.tab-nav03 li {float: left; display: inline-block; width: 200px; }
.tab-nav03 li + li {margin-left: -1px; background: none; }

.tab-nav03 li > a,
.tab-nav03 li > button {position: relative; z-index: 1; display: inline-block; width: 100%; height: 50px; padding: 0 10px; border: 1px solid #ddd;  font-size: 16px; line-height: 50px; }

.tab-nav03 li.current > a,
.tab-nav03 li.current > button {z-index: 3; border-color: #36458d; border-bottom-color: #fff; background-color: #fff; }

.btn-full {width: 300px; margin: 0 auto; }



/* =======================================================
	폼 form
========================================================*/
.textarea {height: 400px; }






/* =======================================================
	휴대폰 인증번호 box-certification
========================================================*/
.box-certification .btn-certification {}
.box-certification .input-btn-group .input-text {width: calc(100% - 134px); }
.box-certification .input-btn-group .btn {width: 130px; }
.box-certification .input-btn-group + .text-guide {margin-top: 5px; }


/* =======================================================
	폼요소
========================================================*/
.form-container {}
.form-container .form-guide {padding: 0;}

.form-header {margin-bottom: 10px; padding: 0; }
.form-wrapper {display: table; padding: 0; margin: 0; border-collapse: collapse; border-spacing: 0; word-break: break-all; white-space: nowrap; table-layout: fixed; width: 100%; border-top: 1px solid #ddd; border-bottom: 1px solid #e0e0e0; }


.form-dl {display: table-row; }
.form-dl:after {content: ""; display: none; }

.form-dl dt,
.form-dl dd {display: table-cell; padding: 20px 20px; border-top: 1px solid #e0e0e0; vertical-align: middle; box-sizing:border-box;}

.form-dl dt {width: 25%; background-color: #f5f5f5; text-align: right; }
.form-dl dd {width:75%;}

form + .page-bottom ,
.form-container ~ .page-bottom {padding: 20px 0; }


.form-dl .input-title {display: block; font-size: 14px; color: #000;}
.form-dl .input-text {width: 500px; }
.form-dl .input-text + .text-guide {}
.form-dl .input-text + .check-group {margin-top: 5px; }


.input-btn-group .input-text {width: 366px; }

.form-dl .selectbox {width: 500px; }


/* input-email-group */
.input-email-group {}
.input-email-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.input-email-group .text-guide {display: block; float: none; clear: both; padding-top: 5px; }

.input-email-group .input-text {width: 155px; margin-bottom: 0; }
.input-email-group .email02 {width: 200px; }

.input-email-group .selectbox {float: left; width: 122px; margin: 0; margin-left: 5px; }
.input-email-group + .check-group {margin-top: 10px; }


/* input-birth-group */
.input-birth-group {}
.input-birth-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.input-birth-group > label {position: relative; display: inline-block; float: left; width: calc((100% - 20px) / 3); height: 45px; font-weight: 400; color: #444; }
.input-birth-group > label + label {margin-left: 10px; }

.input-birth-group .input-text {width: 150px; }


/* input-message-group */
.input-message-group select {width: 500px; }

.upload-wrapper li {width: 100px; height: 100px; }


/* =======================================================
	조회/검색
========================================================*/
.criteria-wrapper {border-width: 1px 1px 1px 1px; padding: 40px 40px; box-sizing: border-box;}
.criteria-wrapper .title {font-size: 16px; }



/* =======================================================
	기간 .range-wrapper
========================================================*/
.range-wrapper {}
.range-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }


/* tab형 */
.range-tab {display: inline-block; width: auto; border: 0; }
.range-tab:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.range-tab ul {display: inline-block; border: 1px solid #ccc; }
.range-tab ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.range-tab li {float: left; display: inline-block; width: 80px; }
.range-tab li:hover button {background-color: #f2f2f2; color: #666; }


.range-wrapper > * + * {margin-top: 0; float: left; }



/* =======================================================
	페이지네이션
========================================================*/
.pagination-wrapper .btn-load {width: 25%; margin: 40px auto 0; }







/* =======================================================
  상품 product //2021-03-24 mine추가
========================================================*/
.product-container {}

.product-container ul {}
.product-container ul:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.product-container li {float: left; margin-bottom: 0; }


.product {box-shadow: 0 3px 10px 4px rgba(5, 5, 5, 0.08); }

.product .product-image {position: relative; background-color: #f7f7f7; background-repeat: no-repeat; background-position: center; background-size: cover; }

/* soldout */
.product .soldout-text span {position: absolute; top: 50%; margin: 0 auto; margin-top: -46px; display: block; width: 100%; font-size: 32px; text-align: center; font-weight: 900; color: #fff; }


/* 상품 소개 */
.product-info {padding: 15px 10px; }
.product-info .title {font-size: 16px; margin-bottom: 10px; font-weight: 400; color: #000; }
.product-info .text {font-size: 14px; line-height: 18px; height: 36px; }


/* 하단 util 그룹  */
.product-util > button {height: 40px; padding: 0 8px; box-sizing: border-box; font-size: 13px; text-align: center; color: #666; }
.product-util > button span {display: inline-block; background-repeat: no-repeat; background-position: left center; vertical-align: middle; line-height: 40px; }
.product-util > button:hover {background-color: #f8f8f8; }
.product-util > button:hover span {color: #36458d; }



/* 공유하기 버튼*/
.product-util .product-site {float: left; width: 100%; height: 40px; font-size: 13px; line-height: 40px; }
.product-util .product-site span {padding-left: 23px; background-image: url("/AppData/images/site/icon/icon_share02.png");  background-size: 17px 16px; background-repeat: no-repeat; }
.product-util .product-site:hover span {background-image: url("/AppData/images/site/icon/icon_share02_on.png"); color: #36458d; }

.product-util .product-join + .product-site {width: 50%; }


/* hover */
.product:hover {box-shadow: 0 6px 10px 8px rgba(7, 7, 7, 0.12); cursor: pointer;}



}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1024px to 1099px
*/


@media (min-width: 1024px) and (max-width: 1099px) and (hover:hover) {

.fm--main .container-inner {width: 100%; margin: 0 auto; }
.fm--inner {width: 100%; }

/* =======================================================
	아이템
========================================================*/
.item-container ul {margin-left: -15px; }

.item-container ul li {width: calc(25% - 15px); margin-left: 15px; }
.item-container li:nth-child(even) {margin-left: 15px; }

.item .item-image {width: 100%; position: relative; }

/* =======================================================
  상품 product
========================================================*/
.product-container ul {margin-left: -15px; }

.product-container ul li {width: calc(25% - 15px); margin-left: 15px; }
.product-container li:nth-child(even) {margin-left: 15px; }

.product .product-image {width: 100%; position: relative; }

}



/*
  ##Device = Desktops
  ##Screen = B/w 1200px to
*/
@media (min-width: 1200px) {
/* =======================================================
	아이템
========================================================*/
.item-container ul {margin-left: -20px; }

.item-container li {width: 260px; margin-left: 20px; }
.item-container li:nth-child(even) {margin-left: 20px; }

.item .item-image {}

/* =======================================================
  상품 product
========================================================*/
.product-container ul {margin-left: -20px; }

.product-container li {width: 260px; margin-left: 20px; }
.product-container li:nth-child(even) {margin-left: 20px; }

.product .product-image {width: 260px; height: 260px; max-height: 260px; }

}

@media(max-width:690px){
  .field-list > li { width: 100%; }
/*  .item .item-image  {width: 100%; height: 260px; padding-top: 0; }*/
  .item .item-info {width: 100%; box-sizing: border-box;  }
  .item-util { right:20px; top:20px; }
}

/*@media(max-width:425px) { 
  .item .item-image { width: 140px; height: 187px; }
  .item .item-info { width: calc(100% - 140px);  }
  .item-util { left: 90px; }
}
*/