@charset "utf-8";

/*============================================================
  bxslider reset
============================================================*/
.bx-wrapper {box-shadow: none; border: 0; margin-bottom: 0; background: transparent;}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {opacity: 1; }





/*============================================================
  common
============================================================*/
/* align */
.left {float: left; }
.right {float: right; }


/* bullet */
.bullet-square-pink {padding-left: 10px; background-image: url("../images/common/bullet_square_pink.png"); background-repeat: no-repeat; background-position: left 8px; }
.bullet-square-blue {padding-left: 10px; background-image: url("../images/common/bullet_square_blue.png"); background-repeat: no-repeat; background-position: left 8px; }

.pac-container {z-index:9999 !important;} /* 구글 주소 검색용 지우지 마세요! */



/*=================================================
  text
=================================================*/
p {margin: 0; padding: 0; }
strong {font-weight: 500; }

.price-sale {margin: 0; text-decoration: line-through; text-decoration-color:#ff0000; color: #ff0000; font-style: normal; }
.price-sale span {color: #777; }

.price-before {margin: 0; text-decoration: line-through; text-decoration-color:#ff0000; color: #ff0000;  }
.price-before span {color: #777;}

/*.price-sale {color: #FF0000; text-decoration:line-through;text-decoration-color:#FF0000; } */

/* align */
.text-left {text-align: left !important; }
.text-center {text-align: center !important; }
.text-right {text-align: right !important; }

.vertical-top {vertical-align: top; }
.vertical-mid {vertical-align: middle; }
.vertical-bottom {vertical-align: bottom; }

/* color */
.font-main-blue {color: #1079f9  !important; }
.font-main-darkblue {color: #2e5d96  !important; }
.font-main-pink {color: #e60e61 !important;}
.font-main-green {color: #bbe150  !important; }

.text-require {margin: 0; padding: 0; color: #e60e61 !important; }
.text-caption-error {margin: 0; padding: 0; color: #e60e61; }
.text-caption-pass {margin: 0; padding: 0; color: #1079f9; }
.text-guide {margin: 0; padding: 0; font-size: 13px; color: #777; }
.text-through {text-decoration: line-through !important ;}


.pre-box {width: 100%; display: block; padding: 0; margin: 0; border: none; border-radius: 0; background-color: transparent; font-family:  'NotoSansVI', 'Roboto', Helvetica, Arial, 'NotoSansKR', dotum,  '돋움', sans-serif; line-height: 1.4; color: #333; word-break: break-all; word-wrap: break-word; white-space: pre-line; -ms-appearance: none; -webkit-appearance: none; appearance: none; -ms-overflow-style: none; }
.pre-box::-webkit-scrollbar,
.pre-box::-ms-scrollbar {appearance: none; }


.label-text {font-weight: 400; color: #444; }

/* text-ellipsis */
.text-ellipsis01 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-ellipsis02 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; height: 3em;}
.text-ellipsis03 {display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; height: 4.5em; }

/* bullet */
.bullet-square-pink {padding-left: 10px; background-image: url("../images/common/bullet_square_pink.png"); background-repeat: no-repeat; background-position: left 8px; }
.bullet-square-blue {padding-left: 10px; background-image: url("../images/common/bullet_square_blue.png"); background-repeat: no-repeat; background-position: left 8px; }



/*============================================================
  page-header
============================================================*/
/* article title 기본 */
.article-header {position: relative; margin: 20px auto 20px; }
.article-header-title {margin: 0; padding: 0; font-size: 20px; font-weight: 400; color: #202020; }
.article-header .btn-group {position: absolute; right: 0; bottom: 1px; }


/* section title 기본 */
.section-header {position: relative; padding-bottom: 10px; border-bottom: 1px solid #c6d0de; }
.section-header-title {margin: 0; padding: 0; font-size: 30px; font-weight: 700; color: #202020; }
.section-header .btn-group {position: absolute; right: 0; bottom: 4px; }


/* section title 로고 불릿 */
.section-header.style02 {margin-bottom: 30px; padding-bottom: 0; border-bottom: 0; text-align: center; }
.section-header.style02 .section-header-title {padding-top: 25px; background-image: url("../images/common/bullet_section_header.png"); background-repeat: no-repeat; background-position: center top;}
.section-header.style02 .btn-group {bottom: 0; }


/* section title 선없음 */
.section-header.style03 {position:relative; margin-bottom: 20px; padding-bottom: 0; border-bottom: 0; text-align: left; }
.section-header.style03 .section-header-title {font-size: 25px; font-weight: 400; }

/* page header 기본 */
.page-header {position: relative; margin: 30px auto 20px; padding: 0 0 10px; width: 100%; border-bottom: 1px solid #bec8d5; }
.page-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.page-header-title {margin:0; font-size: 32px; font-weight: 400; color: #000; letter-spacing: -0.5px; }
.page-header-assist {margin-top: 10px; font-size: 14px; font-weight: 300; color: #444; }
.page-header.borderless {border-bottom: 0; }

/* page header 로고 불릿 */
.page-header.style02 {position: relative;  text-align: center; }
.page-header.style02 .page-header-title {padding-top: 30px; background-image: url("../images/common/bullet_section_header.png"); background-repeat: no-repeat; background-position: center top;}


/* page header counter */
.page-count {font-size: 0.6em; font-style: normal; }

/* page header view button */
.page-viewstyle-group {position: absolute; right: 0; bottom: 8px; }
.page-viewstyle-group .btn-viewstyle {display: inline-block; padding: 8px 10px; background-color: transparent; border: 1px solid #bec8d5; border-radius: 999px; font-size: 12px; line-height: 1; color: #999; text-decoration: none; outline: none; }
.page-viewstyle-group .btn-viewstyle:hover {background-color: #efefef; }
.page-viewstyle-group .btn-viewstyle.on {border-color: #1079f9; color: #1079f9; }

/* page header + button */
.page-header .btn-group {position: absolute; right: 0; bottom: 7px; }



/*============================================================
  tag
============================================================*/
.tag {display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 300; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 999px; cursor: default; user-select: none; }

/* tag color */
.tag-blue {background: #1079f9; color: #fff; }
.tag-darkblue {background: #0d53a9; color: #fff; }
.tag-pink {background: #e60e61; color: #fff; }
.tag-darkgray {background: #55595f; color: #fff; }

/* tag function */
.tag-notice {background-color: #e60e61; border: 1px solid #e60e61; color: #fff; font-size: 12px;  }
.tag-new {display: inline-block;  padding: 0; width: 16px; height: 16px; border-radius: 3px; background-color: #e60e61;  font-size: 12px; line-height: 16px; font-weight: 900;  color: #fff;  text-align: center; }

.tag-show {display: inline-block; margin-top: 5px; margin-left: 5px;  padding: 4px 8px; border: 1px solid #1079f9; border-radius: 12px; font-weight: 400; font-size: 12px; line-height: 1; color: #fff; text-decoration: none; cursor: default; background-color: #1079f9; -moz-box-shadow: 1px 1px 3px 1px grey; -wekit-box-shadow: 1px 1px 3px 1px grey; box-shadow: 1px 1px 3px 1px grey; }
.tag-noshow {display: inline-block; padding: 4px 8px; border: 1px solid #5a5380; border-radius: 12px; font-weight: 400;  font-size: 12px; line-height: 1; color: #fff; text-decoration: none; cursor: default; background-color: #5a5380;  -moz-box-shadow: 1px 1px 3px 1px grey; -webkit-box-shadow: 1px 1px 3px 1px grey;  box-shadow: 1px 1px 3px 1px grey; }



/* 2019-07-30 eunah 수정 */
.tag-style01 {display: inline-block; margin-top: 5px; margin-left: 5px; padding: .1em .5em; min-width: 80px; height: 26px; line-height: 26px; font-size: 12px; font-weight: 400; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; cursor: default; }

/* 주문 단계 */
.tag-step01 {background-color: #0d53a9; }
.tag-step02 {background-color: #e60e61; }
.tag-step03 {background-color: #1079f9; }
.tag-step04 {background-color: #55595f; }


.tag-unlock .icon {display: inline-block; width: 29px; height: 27px; background-image: url("../images/common/icon_opened.png"); background-repeat: no-repeat; background-position: center; background-size: contain; text-align: center; }
.tag-lock .icon {display: inline-block; padding-left: 9px; width: 29px; height: 27px; background-image: url("../images/common/icon_closed.png"); background-repeat: no-repeat; background-position: left center; background-size: contain; text-align: center;}







/*=================================================
  list
=================================================*/
ol, ul, dl, menu, li {margin: 0; padding: 0; vertical-align: middle; list-style: none; }

/*list defualt*/
.list-defult {list-style-position: inside; }
.ol-default {list-style-position: inside; }
.ol-default a {color: #333; }
.ol-default a:hover {text-decoration: underline; }

/* list bullet type: - */
.list-style01 {list-style: none; }
.list-style01 > li {position: relative; padding-left: 10px; }
.list-style01 > li:before {content: "-"; position: absolute; left: 0; display: block;  vertical-align: middle; }

/* list bullet type: ■ */
.list-style02 {list-style: none; margin: 0; padding: 0; }
.list-style02 li {padding-left: 10px; background-image: url("../images/common/bullet_list_01.png"); background-repeat: no-repeat; background-position: left 8px; }

.list-style02.darkmain li {background-image: url("../images/common/bullet_list_02.png");}

/* dl list */
.dl-list {position: relative; margin: 0 0 10px;}
.dl-list dt {position: absolute; left: 0; width: 98px; }
.dl-list dd {position: relative; padding-left: 100px;  }
.dl-list dd .price {font-size: 16px; font-weight: 500; color: #202020; letter-spacing: -.5px; }
.dl-list dd .sale {font-size: 13px; text-decoration: line-through; font-style: normal; }
.dl-list .hash {cursor: default; }

/* dl list bullet type: ■  */
.dl-bullet-square {}
.dl-bullet-square dt {padding-left: 10px; background-image: url("../images/common/bullet_square_blue.png"); background-repeat: no-repeat; background-position: left 8px; }
.dl-bullet-square dd {padding-left: 10px; }

.dl-bullet-square.pink dt {background-image: url("../images/common/bullet_square_pink.png"); }

/* list depth */
ol li .depth,
ul li .depth {text-indent: 20px; }



/*=================================================
  box
=================================================*/
.box {/* background-color: #fff; box-sizing: border-box; -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07); border: 1px solid #eee; */ }

/* .box-gray {display: block; margin: 10px auto; padding: 30px 30px; background-color: #f8f8f8;  border: 1px solid #eee; border-radius: 0; box-sizing: border-box; font-size: 13px; word-break: break-all; word-wrap: break-word; }
 */
.box-guide {position: relative; display: block; margin: 10px auto; padding: 30px 30px; background-color: #f8f8f8; border: 1px solid #eee; border-radius: 3px; box-sizing: border-box; font-size: 13px; word-break: break-all; word-wrap: break-word; }
.box-guide-title {margin: 0 0 15px; font-size: 16px; font-weight: 500; color: #202020;  }


.box-info {position: relative; display: block; margin: 10px auto; padding: 30px 30px; background-color: #f8f8f8; border: 1px solid #eee; border-radius: 3px; box-sizing: border-box; font-size: 13px; word-break: break-all; word-wrap: break-word; }
.box-info dl {margin-bottom: 20px; }
.box-info dl:last-child {margin-bottom: 0; }
.box-info dt {margin-bottom: 0; font-size: 14px; font-weight: 500;  color: #444;  }
.box-info dd {font-size: 14px; color: #333; }
/*
.drop-box {}
.drop-box .drop-list {min-width: 150px; margin: 0; padding: 10px 0; border-radius: 0; border-color: #d5d5d5; }
.drop-box .drop-list li {margin-top: 5px; }
.drop-box .drop-list li:first-child {margin-top: 0; }
.drop-box .drop-list > li > a {padding: 5px 15px; text-decoration: none; }
 */

.no-data {color: #555; padding: 150px 10px; }
.no-data p {margin: 0; text-align: center; color: #555; padding-top: 60px; background-image: url("../images/common/talmo_nodata.png"); background-repeat: no-repeat; background-size: 50px 50px; background-position: center top;}


/*=================================================
  icon
=================================================*/
.icon {display: inline-block; text-decoration: none; font-style: normal; }

.icon-q {width: 32px; height: 43px; display: block; background: url("../images/common/icon_q.gif") no-repeat center center; text-indent: -9999px; }
.icon-a {width: 33px; height: 36px; display: block; background: url("../images/common/icon_a.gif") no-repeat center center; text-indent: -9999px; }

.icon-play-video {display: block; width: 64px; height: 45px; background: url("../images/common/icon_video_play.png") no-repeat center center;}

/* state-matching 매칭 상태를 알려주는 아이콘 */
.state-matching {display: inline-block; padding: 0 8px 0 22px; background-image: url("../images/common/icon_matching.png"); background-repeat: no-repeat; background-position: -1px center; border: 1px solid #999; border-radius: 999px; box-sizing: border-box; font-size: 12px; line-height: 18px; color: #777; }
.state-matching.on {background-image: url("../images/common/icon_matching_on.png"); border-color: #1079f9; color: #1079f9; }



/*=================================================
	button
=================================================*/
a {text-decoration: none; }

.btn {display: inline-block; background-color: #fff; border: 1px solid #d0d0d0; border-radius: 3px;  color: #444; text-align: center; text-decoration: none; outline: none; }
.btn:hover {color: #444; }

.btn-link {font-weight: 400; display: inline-block; text-decoration: none; }

.btn-more-round {padding: 10px 26px; border-radius: 999px; color: #202020; }
.btn-more-round:hover {background-color: #efefef; }
.btn-more-round span {padding-right: 16px; background-image: url("../images/common/btn_more.png"); background-repeat: no-repeat; background-position: right center;}

.btn-more-round.btn-blue-line {}
.btn-more-round.btn-blue-line:hover {background-color: #fff; }
.btn-more-round.btn-blue-line span {padding-right: 16px; background-image: url("../images/common/btn_more_blue.png"); background-repeat: no-repeat; background-position: right center; background-size: 6px 11px; }


.btn-link-round {padding: 10px 26px; border-radius: 999px; color: #202020; }
.btn-link-round:hover {background-color: #efefef; }
.btn-link-round span {padding-right: 16px; background-image: url("../images/common/btn_link.png"); background-repeat: no-repeat; background-position: right center; background-size: 6px 10px; }

.btn-link-round.btn-blue-line {}
.btn-link-round.btn-blue-line:hover {background-color: #fff; }
.btn-link-round.btn-blue-line span {padding-right: 16px; background-image: url("../images/common/btn_link_blue.png"); background-repeat: no-repeat; background-position: right center; background-size: 6px 11px; }


.btn-more-text {padding: 0; background-color: transparent; border: 0; border-radius: 0; padding-right: 20px; background-image: url("../images/common/btn_more_02.png"); background-repeat: no-repeat; background-position: right center; }

.btn-blue,
.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus {background-color: #1079f9; border-color: #1079f9; color: #fff; }

.btn-darkblue,
.btn-darkblue:hover,
.btn-darkblue:active,
.btn-darkblue:focus {background-color: #0d53a9; border-color: #0d53a9; color: #fff; }

.btn-darkblue-line,
.btn-darkblue-line:hover,
.btn-darkblue-line:active,
.btn-darkblue-line:focus {border-color: #0d53a9; color: #0d53a9; }

.btn-blue-line,
.btn-blue-line:hover,
.btn-blue-line:active,
.btn-blue-line:focus {border-color: #1079f9; color: #1079f9; }

.btn-pink,
.btn-pink:hover,
.btn-pink:active,
.btn-pink:focus {background-color: #e60e61; border-color: #e60e61; color: #fff; }

.btn-pink-line,
.btn-pink-line:hover,
.btn-pink-line:active,
.btn-pink-line:focus {border-color: #e60e61; color: #e60e61; }

.btn-green,
.btn-green:hover,
.btn-green:active,
.btn-green:focus {background-color: #bbe150; border-color: #bbe150; color: #fff; }

.btn-green-line,
.btn-green-line:hover,
.btn-green-line:active,
.btn-green-line:focus {border-color: #bbe150; color: #bbe150; }

.btn-darkgray {border: 1px solid #55595f; background-color: #55595f; color: #fff; }
.btn-darkgray:hover { color: #fff; }

/* btn-size */
.btn-small {min-width: 60px; padding: 5px 10px; font-size: 12px; }
.btn-medium {min-width: 100px; padding: 8px 12px; }
.btn-large {width: 280px !important;; padding: 12px 12px;}
.btn-full {width: 100% !important; display: block; }

.btn-cancel {border-color: #1079f9; background-color: #fff; color: #1079f9; }
.btn-cancel:hover {color: #1079f9; }
.btn-save {border-color: #1079f9;  background-color: #1079f9; color: #fff; }
.btn-save:hover {color: #fff;  }

.btn-save.disabled,
.btn-save[disabled],
fieldset[disabled] .btn-save {
  cursor: not-allowed;
	background-color: #ddd; border-color: #ddd; color: #aaa;
}

.btn-cursor-default {cursor: default; }


/* .btn-group02:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.btn-group02 .btn {float: left; }
.btn-group02 .btn + .btn {float: right; } */

.btn-bottom-group {text-align: center; }
.btn-bottom-group:after {content: ""; clear: both; display: block; height: 0 ;visibility: hidden; }
.btn-bottom-group .btn {min-width: 250px; height: 60px; padding: 0 20px; box-sizing: border-box; font-size: 16px; line-height: 58px; font-weight: 400; letter-spacing: 3px; }
.btn-bottom-group .btn + .btn {margin-left: 10px; }


.btn-range-group {}
.btn-range-group:after {content: ""; clear: both; display: block; height: 0 ;visibility: hidden; }
.btn-range {float: left; height: 40px; padding: 0 15px; background-color: #fff; border: 1px solid #d0d0d0; border-left: 0; color: #444; text-align: center; text-decoration: none; outline: none; }
.btn-range:first-child {border-left: 1px solid #d0d0d0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.btn-range:last-child {border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.btn-range:hover {background: #eee; }
.btn-range.active {background: #e60e61; color: #fff; }

.btn-zzim-video {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-zzim-video:hover,
.btn-zzim-video.active {color: #e60e61; }
.btn-zzim-video .icon-video {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/common/btn_zzim_video.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-zzim-video:hover .icon-video,
.btn-zzim-video.active .icon-video {background-position: -40px 0px; }

.btn-prodia-info {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-prodia-info:hover,
.btn-prodia-info.active {color: #e60e61; }
.btn-prodia-info .icon-info {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/common/btn_video_info.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-prodia-info:hover .icon-info,
.btn-prodia-info.active .icon-info {background-position: -40px 0px; }

.btn-zzim-product {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;}
.btn-zzim-product:hover,
.btn-zzim-product.active {color: #e60e61; }
.btn-zzim-product .icon-heart {display: block; width: 30px; height: 30px; margin: 0 auto 3px; background-image: url("../images/common/btn_zzim_heart.png"); background-repeat: no-repeat; background-position: 0 0; }
.btn-zzim-product:hover .icon-heart,
.btn-zzim-product.active .icon-heart {background-position: -40px 0px; }

.btn-connected {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;}
.btn-connected:hover,
.btn-connected.active {color: #e60e61; }
.btn-connected .icon-product {display: block; width: 30px; height: 30px; margin: 0 auto 3px; background-image: url("../images/sub/btn_connected.png"); background-repeat: no-repeat; background-position: 0 0; }
.btn-connected:hover .icon-product,
.btn-connected.active .icon-product {background-position: -40px 0px; }

.btn-nodata {margin-top: 30px; width: 200px; height: 50px; padding: 0; background: #1079f9; border-color: #1079f9; font-size: 15px; line-height: 50px; color: #fff; }
.btn-nodata:hover,
.btn-nodata:focus {color: #fff; }

.btn-modify {display: inline-block; width: 30px; height: 30px; background-color: transparent; background-image: url("../images/common/icon_edit.png"); background-repeat: no-repeat; background-position: center; background-size: contain; border: 0; vertical-align: middle; outline: none; }


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

/* btn-group02 페이지 하단부분에 사용 */
.btn-group02 {text-align: center; margin: 25px auto; }
.btn-group02:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.btn-group02 .btn {width: 200px; height: 50px; padding: 0 12px; box-sizing: border-box; line-height: 50px; }
.btn-group02 .btn + .btn {margin-left: 10px; }

.btn-group02 .btn-cancle {border: 1px solid #7460de; background-color: #fff;  font-size: 14px; font-weight: 500; color: #7460de; }
.btn-group02 .btn-save {border: 1px solid #7460de; background-color: #7460de; font-size: 14px; font-weight: 500; color: #fff; }

/* btn-group03 버튼 3개일때 */
/* .btn-group03 {}
.btn-group03:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.btn-group03 .btn {float: left; }
.btn-group03 .btn-list {border: 1px solid #7460de; background-color: #fff;  font-size: 14px; font-weight: 500; color: #7460de; }
.btn-group03 .btn-reset {border: 1px solid #7460de; background-color: #fff;  font-size: 14px; font-weight: 500; color: #7460de; }
.btn-group03 .btn-save {border: 1px solid #7460de; background-color: #7460de; font-size: 14px; font-weight: 500; color: #fff; } */

/* btn-purchase-group 장바구니 + 구매하기 */
.btn-puchase-group .btn {width: calc(50% - 5px); height: 45px; border-radius: 3px; clear: none; }
.btn-puchase-group .btn-cart {float: left; border: 1px solid #1079f9; background-color: #fff;  font-size: 14px; font-weight: 500; color: #1079f9; }
.btn-puchase-group .btn-cart:hover,
.btn-puchase-group .btn-cart:focus,
.btn-puchase-group .btn-cart:active {color: #1079f9; }
.btn-puchase-group .btn-buy {float: right; border: 1px solid #1079f9; background-color: #1079f9; font-size: 14px; font-weight: 500; color: #fff; }
.btn-puchase-group .btn-buy:hover,
.btn-puchase-group .btn-buy:focus,
.btn-puchase-group .btn-buy:acitve {color: #1079f9; }


/* 관심상품, 관심영상 */
.btn-zzim {padding: 3px 10px; font-size: 12px; }
.btn-zzim .icon {vertical-align: bottom; margin-right: 7px; }
.btn-zzim.active {background-color: #1079f9; font-weight: 500; }
.btn-zzim.active .icon-product {background-image: url("../images/common/icon_product_on.png");}
.btn-zzim.active .icon-movie {background-image: url("../images/common/icon_movie_on.png");}

.btn-movie {padding: 0; background-color: transparent; background-image: url("../images/common/btn_movie.png"); background-repeat: no-repeat; background-position: center top; }
.btn-zzim.btn-movie:hover,
.btn-zzim.btn-movie.active {background-image: url("../images/common/btn_movie_on.png"); background-repeat: no-repeat; background-position: center top; color: #1079f9; }

.btn-product {padding: 0; background-color: transparent; background-image: url("../images/common/btn_product.png"); background-repeat: no-repeat; background-position: center top;}
.btn-zzim.btn-product:hover,
.btn-zzim.btn-product.active {background-image: url("../images/common/btn_product_on.png"); color: #1079f9; }


.btn-info {padding: 0; background-color: transparent; background-image: url("../images/common/btn_info.png"); background-repeat: no-repeat; background-position: center top; border: 0; }
.btn-info:hover {background-image: url("../images/common/btn_info_on.png"); background-repeat: no-repeat; background-position: center top; color: #1079f9; }


/* 공유하기
.btn-share {padding: 0; background-color: transparent; background-image: url("../images/common/btn_share.png"); background-repeat: no-repeat; background-position: center top; }
.btn-share:hover,
.btn-share:focus {background-image: url("../images/common/btn_share_on.png"); color: #7460de; }
*/

.btn-zzim-video {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-zzim-video:hover,
.btn-zzim-video.active {color: #e60e61; }
.btn-zzim-video .icon-video {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/sub/btn_zzim_video.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-zzim-video:hover .icon-video,
.btn-zzim-video.acitve .icon-video {background-position: -40px 0px; }

.btn-zzim-product {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;}
.btn-zzim-product:hover,
.btn-zzim-product.active {color: #e60e61; }
.btn-zzim-product .icon-heart {display: block; width: 30px; height: 30px; margin: 0 auto 3px; background-image: url("../images/sub/btn_zzim_heart.png"); background-repeat: no-repeat; background-position: 0 0; }
.btn-zzim-product:hover .icon-heart,
.btn-zzim-product.acitve .icon-heart {background-position: -40px 0px; }

.btn-prodia-info {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-prodia-info:hover,
.btn-prodia-info.active {color: #e60e61; }
.btn-prodia-info .icon-info {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/sub/btn_video_info.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-prodia-info:hover .icon-info,
.btn-prodia-info.acitve .icon-info {background-position: -40px 0px; }

.btn-prodia-share {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-prodia-share:hover,
.btn-prodia-share.active {color: #e60e61; }
.btn-prodia-share .icon-share {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/sub/btn_share.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-prodia-share:hover .icon-share,
.btn-prodia-share.acitve .icon-share {background-position: -40px 0px; }

.btn-prodia-seller {padding: 0; border: 0; background-color: transparent; font-size: 12px; color: #777; text-align: center;  }
.btn-prodia-seller .icon-seller {display: block; width: 30px; height: 30px; margin: 0 auto 3px; padding: 0; border: 0; background-color: transparent; background-image: url("../images/sub/btn_seller.png"); background-repeat: no-repeat; background-position: 0 0; font-size: 12px; color: #777; text-align: center; }
.btn-prodia-seller:hover,
.btn-prodia-seller.active {color: #e60e61; }
.btn-prodia-seller:hover .icon-seller {background-position: -40px 0px; }
.btn-prodia-seller.active .icon-seller {background-position: -40px 0px; }




/* 더보기
------------------------------------------------*/
.btn-more {width: 400px; height: 40px; margin: 0 auto; padding: 0; background: #fff; border: 2px solid #e3e3e3; color: #777; box-sizing: border-box; line-height: 38px; }
.btn-more .icon {margin-left: 7px; }
.btn-more:hover,
.btn-more:focus,
.btn-more.focus {color: #777; }

/* 텍스트 */
.btn-more02 {display:inline-block; font-size: 12px; line-height: 16px; color: #333; text-decoration: none; cursor: pointer;}
.btn-more02 .icon {margin-right: 5px; vertical-align: middle; margin-top: -1px; }
.btn-more02:hover,
.btn-more02:focus {text-decoration: underline; }

/* 바로가기 버튼 > */
.btn-goto {display: inline-block; padding-right: 10px;  font-size: 13px; line-height: 16px; color: #777; font-weight: 400; background-image: url("../images/common/btn_more_03.png"); background-repeat: no-repeat; background-position: right center; }
.btn-goto:hover {text-decoration: underline; }

.btn-delete {display: inline-block; padding: 0 0; margin: 0;  width: 24px; height: 24px; background: url("../images/common/btn_delete.png") no-repeat center; vertical-align: middle; box-sizing: border-box; }




/* btn-top-wrapper
------------------------------------------------*/

/* detail 에서 사용 */
.btn-top-wrapper {position: fixed; right: 50px; bottom: 230px; z-index: 900; width: 40px; height: 40px; }
.btn-top-wrapper .btn-top {display: block; width: 40px; height: 40px; background-image: url("../images/common/btn_top_off.png"); background-repeat: no-repeat; background-position: left top; }
.btn-top-wrapper .btn-top:hover,
.btn-top-wrapper .btn-top:focus {background-image: url("../images/common/btn_top_on.png"); }

/* btn-arrow-wrapper  */
.btn-arrow-wrapper {position: fixed; right: 50px; bottom: 280px; z-index: 900;  }

.btn-top-default {display: block; width: 40px; height: 40px; background-image: url("../images/common/btn_top_off.png"); background-repeat: no-repeat; background-position: left top; }
.btn-top-default:hover {background-image: url("../images/common/btn_top_on.png"); }

.btn-bottom-default {display: block; width: 40px; height: 40px; margin-top: 2px; background-image: url("../images/common/btn_down_off.png"); background-repeat: no-repeat; background-position: left top; }
.btn-bottom-default:hover {background-image: url("../images/common/btn_down_on.png"); }



/* btn-profile
------------------------------------------------*/
.btn-profile {background: #fff; border: 1px solid #e4e5e6; }
.btn-profile .icon {margin-left: 6px; height: 13px; background-position: 0 4px; }


/* btn-link */
.btn-link {color: #777; text-decoration: none; font-size: 13px; font-weight: 400; }
.btn-link:hover,
.btn-link:focus {color: #1079f9; }




/* quantity counter
------------------------------------------------*/
.quantity-count {}
.quantity-count:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.quantity-count .btn-quantity {float: left; width: 24px; height: 24px; background: #fff; border: 1px solid #d5d5d5; outline: 0; }
.quantity-count .btn-quantity:hover {background-color: #efefef;  }
.quantity-count .input-quantity {float: left; width: 30px; height: 24px; border: 1px solid #d5d5d5; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; box-sizing: border-box; text-align: center; background: #fff !important; font-family: "NotoSansVI", "NotoSansKR"; font-size: 12px; line-height: 1.2em; color: #333; outline: none; }
.quantity-count .btn-minus {border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.quantity-count .btn-plus {border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

.quantity-count .input-quantity:-internal-autofill-previewed {background-color: #fff !important; color: #333 !important; }
.quantity-count .input-quantity:-internal-autofill-selected {background-color: #fff !important; color: #333 !important; }

.quantity-count .input-quantity:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }
.quantity-count .input-quantity:-webkit-autofill:hover {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }
.quantity-count .input-quantity:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }
.quantity-count .input-quantity:-webkit-autofill:active {-webkit-box-shadow: 0 0 0px 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }
.quantity-count .input-quantity:focus {border-color: #d5d5d5; }

/*=================================================
  form
=================================================*/
.input-text {display: inline-block; width: 100%; height: 40px; margin: 0; padding: 0 10px; border: 1px solid #d0d0d0; -webkit-border-radius: 3px; border-radius: 3px; box-shadow: none;  box-sizing: border-box; background-color: #fff; font-size: 13px; color: #202020; vertical-align: middle; -webkit-appearance: none; appearance: none; resize: none; outline: none; }

/* input autofill reset */
input:-internal-autofill-previewed {background-color: #fff !important; color: #333 !important;}
input:-internal-autofill-selected {background-color: #fff !important; color: #333 !important;}
textarea:-internal-autofill-previewed {background-color: #fff !important; color: #333 !important;}
textarea:-internal-autofill-selected {background-color: #fff !important; color: #333 !important;}
select:-internal-autofill-previewed {background-color: #fff !important; color: #333 !important;}
select:-internal-autofill-selected {background-color: #fff !important; color: #333 !important;}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}
input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}

/* input placeholder */
input::-webkit-input-placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }
input::-moz-placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }
input::-ms-input-placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }
input:-ms-input-placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }
input:-moz-placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }
input::placeholder  {color: #aaa !important; font-weight: 400 !important; font-style: italic !important; }




.input-text.disabled {background: #e5e5e5; cursor: not-allowed; }
.input-text:disabled {background: #e5e5e5; cursor: not-allowed; }

.input-text.readonly {border: 1px solid #d5d5d5; color: #777; background: #e5e5e5; cursor: default; }
.input-text:read-only {border: 1px solid #d5d5d5; color: #777; background: #e5e5e5; cursor: default; }

.input-text:focus {border-color: #1079f9; }
.input-text.readonly:focus {border-color: #d5d5d5; }
.input-text:read-only:focus {border-color: #d5d5d5;  }

/* input-text  size */
.input-small {width: 100px  !important; }
.input-medium {width: 300px  !important; }
.input-large {width: 500px !important; }


/* input-group (input + btn )
-------------------------------------------- */
.input-group {width: 100%; }
.input-group:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-group .input-text {float: left; width: 250px; }
.input-group .btn {float: left; min-width: 110px; margin-left: 10px; padding: 0 15px; height: 40px; line-height: 38px;  }

.input-group-col03:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
.input-group-col03 .input-text {float: left; width: 120px; margin-left: 7px; }
.input-group-col03 .input-text:first-child {margin-left: 0; }



/* 완 icheck & iradio
-------------------------------------------- */
.radio,
.checkbox {margin: 0; }

.radio label,
.checkbox label {min-height: 18px; padding-left: 0; vertical-align: middle; font-size: 13px; color: #555; font-weight: 400; }

.icheckbox + label,
.iradio + label {padding-left: 5px; font-weight: 400; }

.checkbox .icheck {margin-left: 30px; }
.checkbox .icheck:first-child {margin-left: 0; font-size: 300; }

.radiobox .iradio {margin-left: 30px; }
.radiobox .iradio:first-child {margin-left: 0;  font-weight: 300;  }


/* 완 select */
select {padding: 0 30px 0 10px; height: 40px; margin: 0; background-color: #fff;  background-image: url("../images/common/icon_selectbox.png"); background-repeat: no-repeat; background-position: right 10px  center; border: 1px solid #d0d0d0; border-radius: 3px; box-shadow: none; box-sizing: border-box; font-size: 13px; line-height: 1.2; color: #202020; vertical-align: middle;  -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none;  }
select::-ms-expand {display: none; }
select:focus {outline: none; }

/* 완 search-wrapper  */
.search-wrapper {}
.search-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.search-wrapper .search-type {float: left; min-width: 80px; height: 34px; /*padding: 0 7px; */ margin-right: 5px; }
.search-wrapper .input-search {float: left; width: 180px; height: 34px; margin: 0; padding: 0 7px; border-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: none; box-sizing: border-box; border: 1px solid #d0d0d0;  background-color: #fff; font-size: 13px; color: #202020; vertical-align: middle; -webkit-appearance: none; appearance: none; resize: none; outline: none; }
.search-wrapper .btn-search {float: left; min-width: 50px; height: 34px; background-color: #2e5d96; background-image: url("../images/common/icon_search.png"); background-repeat: no-repeat; background-position: center center; background-size: 18px 18px;  border-color: #2e5d96; border-top-left-radius: 0; border-bottom-left-radius: 0; color: #fff; font-weight: 300;}




/* 아이디 중복확인
.input-group.input-idcheck {width: 100%; }
.input-group.input-idcheck:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-group.input-idcheck .input-text {float: left; width: 250px; }
.input-group.input-idcheck .btn {float: left; margin-left: 10px; width: 100px; height: 40px; }*/


/* 휴대폰 인증
.input-group.input-phcheck {width: 100%; }
.input-group.input-phcheck.input-confirm {margin-top: 10px; }
.input-group.input-phcheck:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-group.input-phcheck .input-text {float: left; width: 330px; }
.input-group.input-phcheck .btn {float: left; margin-left: 10px; width: 110px; height: 40px; }*/


/* * 우편번호 검색
.input-group.input-address {width: 100%; }
.input-group.input-address:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-group.input-address .input-text {float: left; width: 500px; }
.input-group.input-address .btn {float: left; padding: 0 12px ; margin-left: 10px; height: 40px; line-height: 38px; } */


/* 영상 url  */
.input-url:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-url .input-text {float: left; width: 500px; }
.input-url .btn-cheurl {float: left; padding: 0 12px ; margin-left: 10px; height: 40px; line-height: 38px; }

/* 파일첨부 */
.input-file:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.input-file .file-name {float: left; padding: 0 10px; width: 500px; height: 40px; border: 1px solid #d0d0d0; border-radius: 3px; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: 13px; color: #555; vertical-align: middle; }
.input-file .btn-file {float: left; margin: 0; width: 150px; height: 40px; padding: 0; background-color: #fff; border: 1px solid #d0d0d0; border-left: 0; border-radius: 3px; border-top-left-radius: 0; border-bottom-left-radius: 0;  font-size: 13px; line-height: 38px; color: #555; font-weight: 400; box-sizing: border-box; cursor: pointer; text-align: center; }
.input-file .btn-file:hover {background-color: #efefef; }
.input-file input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.btn-file-delete {padding: 0; margin-left: 7px; width: 30px; height: 40px; border: 0; background-color: #fff; background-image: url("../images/common/btn_file_delete.gif"); background-repeat: no-repeat; background-position: center center; vertical-align: middle; box-sizing: border-box; cursor: pointer; }


/* 파일첨부 뷰 */
.file-view {display: block; float: none; clear: both; margin-top:  10px; }
.file-view:after {content: ""; clear:both; display: block; height: 0; visibility: hidden; }
.file-view-thumb {float: left; width: 110px; height: 110px; border: 1px solid #eee; background-color: #f8f8f8; overflow: hidden; }
.file-view-thumb img {width: 100%; height: 100%; }
.file-view .btn-file-delete {float: left;  margin-left: 0; background-position: left  2px; }

/* datepicker
------------------------------------------------*/
.input-date {display: inline-block; width: 180px; height: 40px; margin: 0; padding: 0 7px; border: 1px solid #d0d0d0; border-radius: 3px; box-sizing: border-box; background-color: #fff;  font-size: 13px; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; resize: none; outline: 0; cursor: pointer; }
  .input-date.disabled {border: 1px solid #d0d0d0; background-color: #e5e5e5; cursor: not-allowed; }
  .input-date.readonly {border: 1px solid #d0d0d0; background-color: #fff; cursor: default; }
  .swung-dash {margin: 0 15px; }

.datepicker {display: inline-block; }
  .datepicker .ui-datepicker-trigger {display: inline-block; overflow: visible; width: 21px; height: 20px; margin: 0 0 0 10px ; border: 0; background: url("../images/common/btn_datepicker.png") no-repeat center center; font-size: 0; vertical-align: middle; text-align: center; }
  .ui-datepicker {font:inherit; font-style: 14px; }
  .ui-datepicker table,
  .ui-datepicker input,
  .ui-datepicker select,
  .ui-datepicker textarea,
  .ui-datepicker button {font: inherit; font-weight: normal; }
  .ui-widget-header .ui-icon {background-image: url("../images/common/ui-icons_777777_256x240.png"); }


/* 완 textarea
------------------------------------------------*/
textarea {display: block; width: 100%; min-height: 200px; margin: 0; padding: 10px 10px; border: 1px solid #d0d0d0; border-radius: 3px; box-sizing: border-box; background-color: #fff; font-size: 14px; vertical-align: top; -webkit-appearance: none; appearance: none; outline: none; resize:  none; }
textarea:focus  {border-color: #1079f9; }

/* input placeholder */
textarea::-webkit-input-placeholder  {color: #aaa !important; font-size: 14px !important; font-weight: 400 !important; font-style: italic !important; }
textarea::-moz-placeholder  {color: #aaa !important; font-size: 14px !important;  font-weight: 400 !important; font-style: italic !important; }
textarea::-ms-input-placeholder  {color: #aaa !important; font-size: 14px !important; font-weight: 400 !important; font-style: italic !important; }
textarea:-ms-input-placeholder  {color: #aaa !important; font-size: 14px !important; font-weight: 400 !important; font-style: italic !important; }
textarea:-moz-placeholder  {color: #aaa !important; font-size: 14px !important;  font-weight: 400 !important; font-style: italic !important; }
textarea::placeholder  {color: #aaa !important; font-size: 14px !important;  font-weight: 400 !important; font-style: italic !important; }






/*=================================================
	table
=================================================*/
table {width: 100%; padding: 0; border: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; word-break: break-all; background-image: none; }
caption {visibility: hidden; width: 0; height: 0; padding: 0; }
caption.visible {width: 100%; display: table-caption; caption-side: top; margin-bottom: 15px; min-height: 20px; font-size: 20px; font-weight: 400; color: #202020; white-space: nowrap; visibility: visible; }

.table-title {margin-top: 0; margin-bottom: 10px; font-size: 20px; font-weight: 400; color: #202020; }
.table-title-assist {font-weight: 300; line-height: 20px; margin-bottom: 15px; }

th,
td {padding: 15px 10px; text-align: left; border-top: 1px solid #e3e4e5; border-right: 1px solid #e3e4e5; border-bottom: 1px solid #e3e4e5; border-left: 1px solid #e3e4e5; font-size: 14px; color: #333; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: normal; vertical-align: middle; }
th {font-weight: 500; color: #444; }

table img {max-width: 100%; }

thead th,
thead td,
tbody th,
tfoot th {background-color: #f1f1f1; }

.table-borderless th,
.table-borderless td {border: 0; }

/* table-header
------------------------------------------------*/
.table-header {position: relative; margin-top: 30px; }
.table-count {padding: 0; margin: 0; color: #777; }
.table-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.table-header .table-count {float: left; padding-top: 15px; }
.table-header .search-wrapper {float: right; }

/* table-bottom
------------------------------------------------*/
.table-bottom {position: relative; margin: 20px auto 100px; min-height: 40px;  text-align: center; }
.table-bottom:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.table-bottom .pagination + .btn-group { }
.table-bottom .btn-group {position: absolute; right: 0; top: -2px;}
.table-bottom > .btn {width: 200px; padding: 12px 12px; }
.table-bottom > .btn + .btn {margin-left: 10px; }


/* table-defualt 기본 테이블
------------------------------------------------*/
.table-default01 { }
.table-default01 th,
.table-default01 td {padding: 13px 10px; border-right: 1px solid #e3e4e5; border-bottom: 1px solid #e3e4e5; font-size: 14px;text-align: left; vertical-align: top; }
.table-default01 th {font-weight: 400; color: #222; background-color: #f1f1f1;  }
.table-default01 tr:first-child th,
.table-default01 tr:first-child td {border-top: 1px solid #e3e4e5;}
.table-default01 th:first-child,
.table-default01 td:first-child {border-left: 1px solid #e3e4e5; }


/* table-defualt02 기본 테이블 가로형
------------------------------------------------*/
.table-default02 {width: 100%; margin: 10px auto; }
.table-default02 th,
.table-default02 td {padding: 15px 10px; border-bottom: 1px solid #e3e4e5; background: #fff; font-size: 14px; color: #777; text-align: left; }
.table-default02 th {font-weight: 400; color: #222; background-color: #f1f1f1; }
.table-default02 tr:first-child th,
.table-default02 tr:first-child td {border-top: 1px solid #e3e4e5; }
.table-default02 + .table-default02 {margin-top: 50px; }


/* 완 table-info 테이블 인포 가로형 테이블
-----------------------------------------------------*/
.table-info {margin-bottom: 40px; }/*
.table-info:last-of-type {margin-bottom: 0; } */
.table-info th,
.table-info td {border-left: 0; border-right: 0; font-size: 13px; padding: 10px 10px; }
.table-info th {font-weight: 400; }


/* 완 table-list 기본 테이블 리스트
-----------------------------------------------------*/
.table-list {margin: 10px auto; background-color: #fff; border-top: 1px solid #d0d0d0; }
.table-list th,
.table-list td {border-left: 0; border-right: 0; padding: 15px 10px; text-align: center; font-size: 15px; }

.table-list thead tr:first-child th,
.table-list thead tr:first-child td {border-top: 0;  }
.table-list thead th,
.table-list thead td {background-color: #fff; }

.table-list + .page-bottom {margin-top: 30px; }
.table-list .td-title {text-align: left; }
.table-list tr.no-data td {background: #efefef; padding: 150px 10px; text-align: center; }
.table-list .td-check label {display: block; }



/* .table-list-header {position: relative; margin-bottom: 10px; }
.table-list-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden;}
.table-list-count {float: left; padding: 0; padding-top: 15px; margin: 0; color: #666; font-size: 13px;}

.table-list01 {margin: 10px auto; background: #fff; border-top: 2px solid #777; }
.table-list01 th,
.table-list01 td {padding: 13px 10px; border-bottom: 1px solid #e4e5e6; text-align: center; }
.table-list01 th {font-weight: 400; color: #222; }
.table-list01 td {font-weight: 300; color: #444; }
.table-list01 .title {text-align: left; font-size: 14px; }
 */


/* 완 table-form 폼테이블
-----------------------------------------------------*/
.table-form table {border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
.table-form th,
.table-form td {background-color: #fff; vertical-align: middle; }

.table-form tr:first-child th,
.table-form tr:first-child td {padding-top: 30px; }
.table-form tr:last-child th,
.table-form tr:last-child td {padding-bottom: 30px; }

.table-form th,
.table-form th label,
.table-form th span,
.table-form th p {font-weight: 400; margin: 0; }

.table-form .text-caption-error,
.table-form .text-caption-pass,
.table-form .text-guide {margin-top: 8px; }

.table-form td label:hover {color: #1079f9; }
.table-form .checkbox {margin-top: 8px;}





/* 완 조회 검색 */
.table-inquiry-group {position: relative; width: 100%; margin-bottom: 80px; }
.table-inquiry {padding: 20px 30px; border: 1px solid #ddd; background-color: #f1f1f1;}
.table-inquiry table {  }
.table-inquiry-group .table-inquiry + .btn-group {margin-top: 15px; }

.inquiry-container {position: relative; width: 100%; margin-bottom: 80px; }
.inquiry-wrapper {padding: 30px 30px; background-color: #f2f2f2; border: 1px solid #e3e4e5; border-radius: 3px; }
.inquiry-wrapper dl {margin-top: 30px; }
.inquiry-wrapper dl:first-child {margin-top: 0; }
.inquiry-wrapper dl dt {margin-bottom: 10px; font-size: 16px; font-weight: 400; color: #444; }
.inquiry-wrapper dl dt .label-title {font-size: 16px; font-weight: 400; color: #444; }
.inquiry-wrapper dl dd {padding-left: 0; }
.inquiry-btn-group {margin-top: 30px; }


/*=================================================
	완 accordion
=================================================*/
.accordion-list .accordion-title {padding-right: 100px; background-image: url("../images/common/icon_accordion_down.png"); background-repeat: no-repeat; background-position: right 30px top 20px; }
.accordion-list:hover .accordion-title {background-image: url("../images/common/icon_accordion_down_on.png");}
.accordion-list .accordion-title.active {background-image: url("../images/common/icon_accordion_up.png"); }
.accordion-content {display: none;}





/*=================================================
	완 page-bottom
=================================================*/
.page-bottom {position: relative; margin: 55px auto 110px; text-align: center; }
.page-bottom:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.page-bottom .pagination + .btn-group {position: absolute; right: 0; top: -2px; }

.pagination {margin: 0; }
.pagination:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.pagination > li > a,
.pagination > li > span {color: #777; font-weight: 300; }

.pagination > li > a:hover,
.pagination > li span:hover {color: #777; text-decoration: none; }

.pagination > li > .page-arrow {width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; }

.pagination > li .page-first {background-image: url("../images/common/page_first.png"); }
.pagination > li .page-prev {background-image: url("../images/common/page_prev.png"); }
.pagination > li .page-next {background-image: url("../images/common/page_next.png"); }
.pagination > li .page-last {background-image: url("../images/common/page_last.png"); }

.pagination > li.active > a,
.pagination > li.active > span {background-color: #1079f9; color: #fff; }

/* page more button */
.btn-page-more {display: block; width: 350px; height: 45px; margin: 0 auto; background-color: transparent; border: 1px solid #ddd; border-radius: 999px; color: #555; box-sizing: border-box; outline: 0; }
.btn-page-more:hover {background-color: #eee; }
.btn-page-more span {padding-left: 16px; background-image: url("../images/common/btn_more_02.png"); background-repeat: no-repeat; background-position: left center; }






/*============================================================
  완 sort
============================================================*/
.sort-wrapper {position: relative; }
.sort-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.sort {float: right; margin: 0; margin-bottom: 10px; }
.sort li {position: relative; float: left; padding-left: 11px; margin-left: 10px; }
.sort li:before {content: ""; position: absolute; top: 50%; left: 0; display: block; margin-top: -5px; width: 1px; height: 11px; background-color: #bec8d5; }
.sort li:first-child {margin-left: 0; padding-left: 0; }
.sort li:first-child:before {content: ""; width: 0; height: 0; background: none; }
.sort li button,
.sort li a {display: inline-block; background-color: transparent; border: none; margin: 0; padding: 0; font-size: 13px; line-height: 1; font-weight: 300; text-decoration: none; color: #999; }
.sort li:hover button,
.sort li:hover a {text-decoration: underline; }
.sort li button.active,
.sort li a.active {padding-left: 12px; color: #e60e61; font-weight: 400; background-image: url("../images/common/icon_sort.png"); background-repeat: no-repeat; background-position: left center; }
.sort.blue li a.active {color: #1079f9; background-image: url("../images/common/icon_sort_blue.png"); }





/*=================================================
	tabs
=================================================*/
.tabs {list-style: none; }
.tabs:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.tabs > li {float: left; margin: 0; text-align: center; }
.tabs > li > a {border-radius: 0; border: 0; box-sizing: border-box; text-decoration: none; cursor: pointer; }

.tab-content {display: none; position: relative; width: 100%; padding: 25px 0 60px; }
.tab-content img {max-width: 100%; }


.tab-style01 {width: 100%; height: 47px; margin: 0; border-bottom: 0; border-bottom: 2px solid #2e5d96; background-color: #fff; list-style: none; -webkit-overflow-scrolling: touch;}
.tab-style01 > li {width: 25%; }
.tab-style01 > li > a {display: inline-block; width: 100%; height: 45px; margin: 0; padding: 0 10px;   background-color: #fff; font-size: 13px; color: #777; line-height: 45px; letter-spacing: -1px; }
.tab-style01 > li.active > a,
.tab-style01 > li.active > a:hover,
.tab-style01 > li.active > a:focus {color: #fff; font-weight: 400; background-color: #2e5d96; border: 0;}

.tab-style02 {width: 100%; display: table; border-left: 1px solid #e4e5e6; }
.tab-style02 > li {width: 20%; margin-top: -1px; border: 1px solid #e4e5e6; border-left: 0; }
.tab-style02 > li > a {display: block; width: 100%; padding: 15px 10px; margin: 0; background-color: #fff; color: #777; font-size: 14px; }
.tab-style02 > li.active > a,
.tab-style02 > li.active > a:hover,
.tab-style02 > li.active > a:focus {color: #fff; font-weight: 400; background-color: #2e5d96; }





/* nav-tabs
  - navigation 역할을 하는 tab
------------------------------------------------*/
.tab-navigation {width: 100%; height: 47px; margin: 0; border-bottom: 0; border-bottom: 2px solid ##2e5d96; background-color: #fff; list-style: none; -webkit-overflow-scrolling : touch; }
.tab-navigation:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.tab-navigation > li {float: left; width: 25%; margin: 0; text-align: center; }
.tab-navigation > li > a {display: inline-block; width: 100%; height: 45px; margin: 0; padding: 0 10px; box-sizing: border-box; border-radius: 0; border: 0; background-color: #fff; font-size: 14px; color: #777; text-decoration: none; line-height: 45px; cursor: pointer; }
.tab-navigation > li > a:hover {border: 0; }
.tab-navigation > li.active > a,
.tab-navigation > li.active > a:hover,
.tab-navigation > li.active > a:focus {color: #fff; font-weight: 400; cursor: default; background-color: #5a5380; border: 0; }
.tab-navigation + .tab-content {position: relative; width: 100%; padding: 30px 0; overflow: hidden;  }
.tab-navigation + .tab-content img {width: 100%; }





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

.range-tabs {float: left; }
.range-tabs:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.range-tabs li {float: left; min-width: 60px; height: 40px; padding: 0 15px; background-color: #fff; border: 1px solid #d0d0d0; border-left: 0; line-height: 38px; text-align: center; text-decoration: none; outline: none; cursor: pointer; }
.range-tabs li:first-child {border-left: 1px solid #d0d0d0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.range-tabs li:last-child {border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.range-tabs li:hover {background: #efefef; }
.range-tabs li.active {background: #1079f9; border-top-color: #1079f9; border-bottom-color: #1079f9; }
.range-tabs li a {color: #444; }
.range-tabs li.active a {color: #fff; }

.range-wrapper .range-select {float: right; min-width: 110px; }





/*=================================================
  tab-qna
=================================================*/
.tab-qna li {width: 20%; border-radius: 1px solid #343536; border-left: 0; text-align: center; cursor: pointer; }



/*=================================================
  card
=================================================*/
.card-wrapper {list-style: none; margin: 0; padding: 0; }
.card-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.card-wrapper .card {float: left; }

.card {position: relative; margin-left: 25px; margin-bottom: 15px; }
.card .card-thumb {display: block; width: 100%; overflow: hidden; }
.card .card-thumb img {width: 100%; height: 100%; transition: all .2s ease-in-out; display: block; }
.card:hover .card-thumb img {transform: scale(1.1);}
.card .card-title {position: relative; margin-top: 7px; }
.card .card-bottom .card-view-count {display: block; font-size: 12px; color: #777; }
.card .drop-box {position: absolute; right: 0; top: 0; /*opacity: 0;*/ }
/*.card:hover .drop-box {opacity: 1; }*/
.main .card-wrapper .card .state {margin-top: 5px; }
.card .bj {font-size: 12px; color: #777; font-weight: 300; }
/* .card .card-bottom {position: absolute; bottom: 5px; }
 */

/* 영상 card */
/*  .card01 {position: relative; width: 220px; height: 220px; }
 .card01 .card-thumb {width: 220px; height: 124px; display: block; }
 .card01 .title {width: calc(100% - 24px); height: 28px; margin-bottom: 5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 14px; font-size: 13px; color: #444; text-decoration: none; } */


.card02 {position: relative; width: 220px; height: 294px; margin-bottom: 20px; }
.card02 .card-thumb {position: relative; width: 220px; height: 220px; display: block; overflow: hidden; cursor: pointer;}
.card02 .card-thumb:before {content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.03); z-index: 3; }
.card02 .card-title .title {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #444; text-decoration: none; }
.card02 .card-bottom {width: 100%; }
.card02 .price {position: absolute;  bottom: 0; right: 0; }
.card02 .price p {display: block; margin: 0; text-align: right;  }
.card02 .price .price-sale {font-size: 12px; color: #777; text-decoration: line-through; }
.card02 .price .price-current {font-size: 16px; line-height: 1; color: #333; }


.card03 {position: relative; height: 109px; margin: 0; padding: 0; padding-left: 3px; box-sizing: border-box; }
.card03 .hover-effect {position: absolute; z-index: 100; left: 0; top: 0; width: 3px; height: 100%; background-color: #7460de; opacity: 0; transition: all .1s ease-in-out; }
.card03:hover .hover-effect {opacity: 1; }
.card03 .card-inner {width: 100%; }
.card03 .card-inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.card03 .card-thumb {float: left; width: 196px; height: 109px; overflow: hidden; }
.card03 .card-thumb > a {display: block; width: 196px; height: 109px; }
.card03 .card-info {float: right; position: relative; width: calc(100% - 196px); height: 109px; padding: 10px 10px; box-sizing: border-box; }
.card03 .card-title .title {margin-bottom: 10px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 16px; height: 32px; color: #444; text-decoration: none; }
.card03 .drop-box {position: absolute; right: 0; top: 0; }
.card03 .card-bottom {position: absolute; left: 10px; bottom: 10px; }
.card03 .card-bottom .view {margin: 0; padding: 0; font-size: 12px; color: #777; font-weight: 300; white-space: nowrap; }


.card04 {position: relative; float: left; width: 269px; margin-left:25px; margin-bottom: 30px; background: #fff; box-sizing: border-box; border: 1px solid #e4e5e6; border-radius: 3px; }
.card04 .card-header {position: relative; height: 65px; padding: 10px 10px 10px 65px; box-sizing: border-box; }
.card04 .bj-img {position: absolute; left: 10px; top: 10px; width: 45px; height: 45px; border-radius: 50%; overflow: hidden; }
.card04 .bj-img img {width: 100%; height: 100%; }
.card04 .card-header .btn-link {display: block; margin-top: 10px; color: #363636; font-size: 16px; font-weight: 500; }
.card04 .card-header .btn-link:hover {text-decoration: none; }
.card04:hover .card-thumb img {transform: scale(1);}
.card04 .card-thumb {height: 150px; }
.card04 .card-thumb img {height: 100%; }
.card04 .card-info {height: 170px; padding: 10px 10px; font-size: 13px; color: #777; }
.card04 .card-info .pre-box {height: 100%;  -ms-overflow-style: none; cursor: default; }
.card04 .card-info .pre-box::-webkit-scrollbar {display: none; }
.card04 .card-info .pre-box:hover::-webkit-scrollbar {display: block; width: 6px; background-color: #eee; }
.card04 .card-info .pre-box:hover::-webkit-scrollbar-thumb {background-color: #7460de; }
.card04 .card-bottom {width: 100%; border-top: 1px solid #e4e5e6; text-align: center; }


.tab-card  {list-style: none; margin: 0 auto; }
.card05 {position: relative; width: 100%; min-height: 109px; float: none;  margin: 15px 0 0 0; padding: 0; padding-left: 5px; box-sizing: border-box;  }
.card05:first-child {margin-top: 0; }
.card05 .hover-effect {position: absolute; z-index: 100; left: 0; top: 0; width: 5px; height: 100%; background-color: #7460de; opacity: 0; transition: all .1s ease-in-out; }
.card05:hover .hover-effect {opacity: 1; }
.card05 .card-inner {width: 100%; }
.card05 .card-inner:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.card05 .card-thumb {float: left; width: 196px; height: 109px; }
.card05 .card-thumb > a {display: block; width: 196px; height: 109px; }
.card05 .card-info {float: right; position: relative; width: calc(100% - 196px); min-height: 109px; padding: 0 10px; box-sizing: border-box; }
.card05 .card-title {margin-top: 0; }
.card05 .card-title .title {margin: 0; display: block; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; font-size: 16px; font-weight: 400; color: #333; text-decoration: none;  }
.card05 .card-util {font-size: 13px; color: #444; font-weight: 300;  margin: 0; margin-bottom: 5px; }
.card05 .card-util .bj,
.card05 .card-util .view,
.card05 .card-util span,
.card05 .card-util em {color: #444; font-size: 13px; font-weight: 300;  font-style: normal; font-size: 13px; }

.card05 .card-bottom {position: static; }
.card05 .bar {display: inline-block; width: 1px; height: 10px; margin: 0 3px;  background-color: #999;  vertical-align: baseline; }

.hash-wrapper a,
.hash-wrapper span {margin-left: 8px; color: #555; line-height: 14px; text-decoration: none; }
.hash-wrapper a:first-child,
.hash-wrapper span:first-child {margin-left: 0; }

/* .hash-wrapper {padding: 10px 15px; border-radius: 3px; background-color: #e9f0f8; }
.hash-wrapper .hash {padding-top: 0; color: #555; line-height: 14px; text-decoration: none; } */
.hash {display: inline-block; padding-top: 5px; line-height: 16px; color: #777; font-size: 12px; font-weight: 300;  text-decoration: none; cursor: pointer;}
.hash.no-event {cursor: default; }





/*============================================================
  완 agree-container
============================================================*/
.agree-container {position: relative; margin: 0 auto; }
.agree-container-title {font-size: 20px; font-weight: 500; }

.agree-wrapper {margin-top: 20px; }
.agree-wrapper:first-child {margin-top: 0; }

.agree-allcheck-box {padding: 20px 15px; margin-bottom: 55px; border: 1px solid #d0d0d0; border-radius: 3px; background-color: #fff; }

.agree-container .label-text {padding-left: 10px; font-size: 16px; color: #333; line-height: 16px; font-weight: 400; vertical-align: middle; }
.agree-container .label-text:hover {color: #1079f9; }

.agree-box {display: block; width: 100%; height: 200px; padding: 10px 10px; margin: 10px 0 30px; overflow: hidden; overflow-y: scroll; border: 1px solid #d0d0d0; border-radius: 3px; background-color: #fff; white-space: normal; word-break: break-all; font-size: 13px; color: #555; }



/*============================================================
  완 spinner
============================================================*/
.spinner {position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; display: none; width: 80px; height: 80px; border: 9px solid #eee; border-top: 10px solid #1079f9; border-radius: 100%; margin: auto; animation: spinner 0.8s infinite linear; }

@keyframes spinner {
  from {
    transform: rotate(0deg);
  } to {
    transform: rotate(360deg);
  }
}


/*============================================================
  form-wrapper form 영역
============================================================*/
.form-header {position: relative; margin: 0 auto; }
.form-header-title {margin-top: 0; margin-bottom: 10px; font-size: 24px; font-weight: 400; color: #202020; }
.form-header .btn-group {position: absolute; top: 0; right: 0; }

.form-wrapper {position: relative; margin-bottom: 80px; padding: 0; }
.form-wrapper:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.form-wrapper.alone {margin-bottom: 0; }
.form-wrapper .form-guide {margin-bottom: 10px; }
.form-wrapper:last-of-type {margin-bottom: 0; }
.form-wrapper:last-child {margin-bottom: 0; }
.form-wrapper dl {padding: 0 30px; margin-top: 30px; }
.form-wrapper dl:first-of-type {border-top: 1px solid #e3e4e5; padding-top: 30px; margin-top: 0; }
.form-wrapper dl:last-of-type {border-bottom: 1px solid #e3e4e5; padding-bottom: 30px; }

.form-wrapper dl .radiobox  {margin-top: 15px; }

.form-wrapper dl dt {margin-bottom: 8px; font-size: 16px; font-weight: 400; color: #444; }
.form-wrapper dl > dt >* {margin: 0; font-weight:  400; }

.form-wrapper dl dt .label-title {font-size: 16px; font-weight: 400; color: #444; }
.form-wrapper dl dd {padding: 0 10px; }
.form-wrapper dl dd .checkbox {margin-top: 8px; }
.form-wrapper dl dd .text-guide,
.form-wrapper dl dd .text-caption-error,
.form-wrapper dl dd .text-caption-pass {margin-top: 8px; }
.form-wrapper dl dd .label-text {color: #444; }
.form-wrapper dl dd .label-text:hover {color: #1079f9; }
.form-wrapper dl dd .label-no-hover:hover {color: #444; }
.form-wrapper dl dd .convert-pay {width: 300px; margin-top: 5px; margin-left: 33px; color: #666; text-align: right; }

.form-wrapper .checkbox .text-guide {padding-left: 22px; margin-top:0; }
.form-wrapper .radiobox + select {margin-top: 5px; }


/* form-wrapper 주소입력 */
.form-address dd  input {margin-top: 10px; }
.form-address dd .input-group input  {margin-top: 0; }


/* form-wrapper small inner*/
.form-small dl {padding: 0 80px; }
.form-small select {width: 100%; }

/* form-wrapper dl width: 50%*/
.form-wrapper-table {border-top: 1px solid #e3e4e5; border-bottom: 1px solid #e3e4e5; }
.form-wrapper-table dl {}
.form-wrapper-table dl:after {content: ""; clear: both; display: block; height: 0; visibility: hiden; }
.form-wrapper-table dl:first-of-type {border-top: 0;}
.form-wrapper-table dl:last-of-type {border-bottom: 0;}
.form-wrapper-table dl dt {float: left;  width: 250px;}
.form-wrapper-table dl dd {float: left; margin-left: 10px; }