@charset "utf-8";
/* CSS Document */
/*2019-10-22 배너관련 css수정 -from HILL */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, form, fieldset, input, legend, header, footer, tr, td { margin:0; padding:0; } /*디폴트 여백제거*/
body {font-family:'notosanskr', sans-serif; min-width:320px; background:#f4f4f4;}
ol, ul, li {list-style:none;}
a {text-decoration:none; cursor:pointer; color:#666;}
button {border:0; text-decoration:none; padding:0; outline:none; cursor:pointer; background:#fff;}
input, textarea, select, label {outline:none; box-sizing:border-box; display:block;}
address {font-style:normal;}
textarea {resize:vertical;}
table {border-collapse:collapse; table-layout:fixed;}
.cf:after{display:block; content:""; clear:both;}
img {vertical-align:bottom;}

input, textarea, button {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}
#search{
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

input:-ms-input-placeholder {color:#ccc !important;}
input::-ms-input-placeholder {color:#ccc;}
input::-webkit-input-placeholder {color:#ccc;}
input:-moz-placeholder {color:#ccc;}
input::-moz-placeholder {color:#ccc;}

textarea:-ms-input-placeholder {color:#ccc !important;}
textarea::-ms-input-placeholder {color:#ccc;}
textarea::-webkit-input-placeholder {color:#ccc;}
textarea:-moz-placeholder {color:#ccc;}
textarea::-moz-placeholder {color:#ccc;}

.swiper-slide{float:left;}

.recommend_coupon{position:relative;background:#fff;padding:4.625rem 0 1.25rem;}
.recommend_coupon .banners{padding:0.9375rem 1.25rem 0 1.25rem;}
.recommend_coupon .banners .banner_list:nth-child(1){margin-left:1.25rem;}
.recommend_coupon .banners .banner_list:last-of-type{margin-right:1.25rem;}
.recommend_coupon .banners .banner_list a{display:block;height:4.375rem;}
.recommend_coupon .banners .swiper-slide{width:4.375rem!important;}
.recommend_coupon .banners .img_wrap{position:absolute;top:50%;left:0;margin:0;width:4.375rem;height:4.375rem;border-radius:2.1875rem;-webkit-transform:translateY(-50%);}
.recommend_coupon .banners .img_wrap img{border-radius:2.1875rem;}
.recommend_coupon .banners .img_wrap:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid rgba(0,0,0, 0.05);border-radius:2.1875rem;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:3;}

/*header 공용*/
header {position:fixed; width:100%; height:52px; background:#fff; z-index:100;}
header .tit {position:absolute; color:#333; font-size:22px; font-weight:bold; top:15px;left:50%; transform:translateX(-50%);}
header .tit2 {position:absolute; color:#333; font-size:22px; font-weight:bold; top:17px; left:50%; transform:translateX(-50%);}
header .back {position:absolute; width:24px; height:24px; top:16px; left:24px;}
header .menu {position:absolute; width:24px; height:24px; top:16px; right:24px;}
header .coupon {position:absolute; padding:4px 6px; top:15px; right:24px; font-size:13px; width:24px; height:24px; background-repeat: no-repeat}


.tab {
	padding-top:52px;
	position: relative;
	width: 100%;
    max-width: 890px;
    height: 57px;
    margin: 0px auto 0;
    border-bottom: 1px solid #e3e3e3;
	transition: opacity .3s;
	background: #fff;
}

.tab ul li a {
	width: 100%;
	height: 32px;
    display: inline-block;
}

.tab ul li .active {
	font-weight: 700;
    color: #222;
	border-bottom: 1px solid #222;
}

.tab ul li a:active {
    font-weight: 700;
    color: #222;
	border-bottom: 1px solid #222;
}

.tab ul li a:hover {
	font-weight: 700;
    color: #222;
	border-bottom: 1px solid #222;
}


.tab ul li :first-child {
	margin-left: 0;
}

.tab ul li {
	height: 49px;
    display: inline-block;
	width: 32%;
    padding-top: 25px;
    text-align: center;
	font-size: 15px;
	font-weight: 800;
}

fieldset {  position: relative;  display: inline-block;  padding: 0 0 0 40px;  background: #fff;  border: none;  border-radius: 5px; width: calc(100% - 40px); } 
#search input, button {  position: relative;  width: 76%;  height: 40px;  padding: 0;  display: inline-block;  float: left; } /* 검색창과 버튼 너비 크기 설정 */
#search input {  color: #666;  z-index: 2;  border: 0 none; background: transparent;}
#search input:focus {  outline: 0 none; } /* 마우스로 클릭 후 입력할 때의 반응에 대한 설정!*/
/*
#search input + button {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}

#search input:focus + button .fa {
  -webkit-transform: translate(0px, 0);
      -ms-transform: translate(0px, 0);
          transform: translate(0px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
		  color: #666;

}*/

#search button {  z-index: 1;  width: 50px;  border: 0 none;  cursor: pointer;  border-radius: 0 5px 5px 0;
    /*
  -webkit-transform: translate(-50px, 0);
      -ms-transform: translate(-50px, 0);
          transform: translate(-50px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;*/
    /* 이상 버튼의 공간에 대한 설정 */
}

.fa-search {  font-size: 1.4rem;  color: #666;  z-index: 13;  top: 25%; 
  -webkit-transform: translate(-190px, 0); 
      -ms-transform: translate(-190px, 0);
          transform: translate(-190px, 0);
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
/* 이상 왼쪽 돋보기 이미지 위치 이동 설정 */
}

 /*jssor slider loading skin spin css*/
 .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
 }

 @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
  }

        /*jssor slider bullet skin 051 css*/
        .jssorb051 .i {position:absolute;cursor:pointer;}
        .jssorb051 .i .b {fill:#fff;fill-opacity:0.5;}
        .jssorb051 .i:hover .b {fill-opacity:.7;}
        .jssorb051 .iav .b {fill-opacity: 1;}
        .jssorb051 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}

#jssor_1 {
	position:relative;
	margin:0 auto;
	top:0px;
	left:0px;
	width:100vw; 
	height: 190px; 
	overflow:hidden;
	visibility:hidden;
}

#jssor_1 .jssorl-009-spin {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;  
	height: 100%;
	text-align:center;
	background-color:rgba(0,0,0,0.7);
}

#jssor_1 .banner_slide {
	cursor:default;
	position:relative;
	top:0px;
	left:0px;
	width:100%; 
	height: 190px;
	overflow:hidden;
}

#one-banner {width: 100%;}
#one-banner .onebanner {width: 100%;}
#one-banner .onebanner img {width: 100%;}


/*list 쿠폰 리스트*/
#list {width:100%; padding:0 0 24px 0; background:#fff;}
#list .category {padding:30px 0 30px 0; overflow-x:scroll;}
#list .category ul {width:calc(72px * 5/*<-브랜드 개수*/ + 10px * 4/*<-브랜드 개수보다 1 작게*/); height:80px; overflow-x:scroll; padding:0 26px;}
#list .category ul li {float:left; padding-right:10px; position:relative;}
#list .category ul li:last-child {padding-right:0;}
#list .category ul li .brand {position:relative; display:block; width:72px; height:72px; background:#f43547/*브랜드 컬러코드*/; border-radius:50%; padding:8px; box-sizing:border-box; z-index:10;}
#list .category ul li .brand img {width:56px; height:56px;}
#list .category ul li .ar {display:none; width:72px; height:10px; position:absolute; bottom:-8px; padding:0 28px; box-sizing:border-box;}
#list .category ul li .ar .tri{width: 0px; height: 0px; border-top:10px solid #be2a2a/*브랜드 화살표 컬러코드*/; border-right:8px solid transparent; border-left:8px solid transparent;}

#list .category_2 {padding:30px 0 30px 0;}
#list .category_2 ul {width: 90%; padding: 0 5%;}
#list .category_2 ul li {width: 32%; height: 30px; float: left;}
#list .category_2 ul li:nth-child(1) {margin-right: 2%; margin-bottom: 2%;}
#list .category_2 ul li:nth-child(2) {margin-right: 2%; margin-bottom: 2%;}
#list .category_2 ul li:nth-child(3) {margin-bottom: 2%;}
#list .category_2 ul li:nth-child(4) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(5) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(6) {margin-bottom: 2%;}
#list .category_2 ul li:nth-child(7) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(8) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(9) {margin-bottom: 2%;}
#list .category_2 ul li:nth-child(10) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(11) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(12) {margin-bottom: 2%;}
#list .category_2 ul li:nth-child(13) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(14) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(15) {margin-bottom: 2%;}
#list .category_2 ul li:nth-child(16) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(17) {margin-right: 2%;margin-bottom: 2%;}
#list .category_2 ul li:nth-child(18) {margin-bottom: 2%;}
#list .category_2 button {width: 100%; height: 100%;; font-size:12px; font-weight: 600; padding: 3px 0px; color:#333; border: 1px solid #999; border-radius: 30px;}
#list .category_2 button:active {color:#fff; background: #f43547; border-radius: 30px; border: none;}
#list .category_2 button.active {color:#fff; background: #f43547; border-radius: 30px; border: none;}

#list .blank {width: 100%; height: 8px; background:#f4f4f4; }

#list .list {padding:40px 32px 40px;}
#list .list .list_tit {font-size:16px; font-weight:bold;}
#list .list ul li {float:left; width:calc(50% - 16px); height:250px; padding-right:32px; padding-bottom:24px; padding-top: 44px; text-align: center; border-bottom: solid 1px #ededed;}
#list .list ul li:nth-child(even) {padding-right:0;}
#list .list ul li img {width:80%; height:auto; border-radius:50%; text-align: center;}
#list .list ul li p {text-align:center;}
#list .list ul li p.sale {font-size:16px; font-weight:bold; color:#f43547; padding-top:16px;}
#list .list ul li p.tit {font-size:13px; padding-top:8px;}

#list .more {width:36px; margin:0 calc(50% - 18px); font-size:12px; color:#999; text-decoration:underline; text-align:center; display:block;}
#list .cscenter {padding:24px 0px 0px;}
#list .cscenter button {width:100%; height:38px; background:none; border:2px solid #c1c6cb; box-sizing:border-box; border-radius:19px; font-size:13px; font-weight:bold; color:#333;}

#list .cscenter {padding:0 32px 40px; width:calc(100% - 64px); height:32px; vertical-align: middle; position: relative;}
#list .cscenter .cs {position:absolute; width:24px; height:26px; top:24px; left:35px;}
#list .cscenter p {color:#333; width: 70%; font-size:14px; float: left;}
#list .cscenter .arrow {float: right; font-size:13px; width:18px; height:18px;}
#list .cscenter li {padding-bottom: 35px;}

#terms_btn {padding: 10px 30px; height: 20px; background: #666;}
#terms_btn p {font-size: 12px; color: #ededed; width: calc(50%); float: left;}
#terms_btn .txt {text-align: right; }



/*detail 쿠폰 상세보기*/
#detail {width:100%; padding:0px 0 80px; background:#fff;}
#detail .product {width:100%; height:auto; box-sizing:border-box; text-align:center; }
#detail .product img {width:100%; height:auto;}
#detail .blank {width: 100%; height: 8px; background: #f4f4f4;}


#detail .text .sec {box-sizing:border-box;}
#detail .text .sec:first-child {padding:30px 14px 8px;}
#detail .text .sec:nth-child(2) {padding:0px 14px 25px;}
#detail .text .sec p {color:#333;}
#detail .text .sec .tit {font-size:14px; padding-bottom:10px; font-weight:bold;}
#detail .text .sec .date {font-size:10px; font-weight:bold;}
#detail .text .sec .store {font-size:12px; color:#999; width:42px; padding:1px 0; float:left;}
#detail .text .sec .brand {font-size:14px; width:calc(100% - 42px); float:left;}
#detail .text .sec .notice {font-size:14px; color: #f43547; padding:20px 14px 16px; border-bottom:1px solid #e8e8e8;}
#detail .text .sec .txt {font-size:12px; line-height:18px; padding:22px 14px; color:#666;}

#detail .text .sec_2 {padding:0px;}
#detail .text .sec_2 .notice {font-size:14px; color: #f43547; padding:20px 14px 16px; border-bottom:1px solid #e8e8e8;}
#detail .text .sec_2 .txt {font-size:12px; line-height:18px; padding:22px 14px; color:#666;}
#detail .text .sec_2 p {color:#333;}

#detail .download {position:fixed; bottom:0; width:100%; height:52px; font-size:14px; color:#fff; background:#f43547;}



/*coupon 쿠폰함*/
#coupon {width:100%; padding:0px 0 20px;}
#coupon .filter {padding:20px; font-size:12px;  height: 100px; background: #fff; margin-bottom: 8px;}
#coupon .filter .note {color: #333; font-size: 16px; margin:10px 0 20px;}
#coupon .filter a {color:#aaa; height:14px;}
#coupon .filter a.on {color:#f43547;}
#coupon .filter .my {padding-right:6px; border-right:1px solid #ccc;}
#coupon .filter .used {padding-left:6px;}

#coupon .nonelist {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:14px; color:#999; display:none;}

#coupon .list {padding:0 0px 8px;}
#coupon .list ul li {position:relative; background:#fff; height:auto; padding:40px 16px; margin-bottom:8px; box-shadow:1px 1px 4px rgba(0,0,0,0.05);}
#coupon .list ul li .mark {position:absolute; top:20px; left:120px; min-width:30px; text-align:center; color:#fff; font-size:8px; padding:1px 2px 2px;}
#coupon .list ul li .mark.on {background:#f43547;}
#coupon .list ul li .mark.off {background:#8b9196;}
#coupon .list ul li .image {position:relative; width:80px; height:80px; border-radius:50%;}
#coupon .list ul li .image>img {width:100%; height:100%; border-radius:50%;}
#coupon .list ul li .image .mask {position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.3); border-radius:50%;}
#coupon .list ul li .image .mask>img {width:24px; height:24px; padding:13px;}
#coupon .list ul li .txt {position:absolute; width:calc(100% - 130px); top:50%; left:120px; transform:translateY(-50%);}
#coupon .list ul li .txt .brand {font-size:12px; padding-top: 7px; padding-bottom:4px; color:#f43547;}
#coupon .list ul li .txt .tit {font-size:14px; line-height:20px; padding-bottom:4px; color:#333;}
#coupon .list ul li .txt .how {font-size:10px; font-weight:bold; line-height:10px; width:46px; float:left; color:#999; border-right:1px solid #ccc; margin-right:10px;}
#coupon .list ul li .txt .date {font-size:10px; line-height:10px; float:left; color:#999;}

#coupon #used {display:none;}



/*coupondetail 쿠폰함 내 쿠폰 상세보기*/
#coupondetail {width:100%; padding-top:0px;}
#coupondetail .product {background:#fff; padding-top:30px; text-align:center; border-bottom:1px solid #ccc;}
#coupondetail .product>img {width:230px; height:230px;}
#coupondetail .product>.tit {font-size:18px; line-height:24px; font-weight:bold; color:#333; padding:15px 22px 15px;}
#coupondetail .product .how {width:52px; font-size:8px; padding:3px 0 1px 0; border:1px solid #ccc; border-radius:9px; margin:0 calc(50% - 26px); color:#999;}
#coupondetail .product ul {padding:15px 22px 20px;}
#coupondetail .product ul li {padding-bottom:6px;}
#coupondetail .product ul li:last-child {padding-bottom:0;}
#coupondetail .product ul p {float:left; text-align:left; font-size:12px;}
#coupondetail .product ul .tit {width:58px; color:#999;}
#coupondetail .product ul .txt {width:calc(100% - 58px); color:#333; font-weight:bold; text-align: right;}
#coupondetail .product .barcode {padding:20px; border-bottom:1px solid #e8e8e8; overflow: hidden;}
#coupondetail .product .barcode img {width:auto; height:54px;}
#coupondetail .product .barcode .number {font-size:12px; font-weight:bold; padding-top:8px;}
#coupondetail .product .barcode .copytxt {font-size:10px; color:#333; font-weight:bold; padding-top:2px;}
#coupondetail .product .barcode .btn {width: 230px; margin: 0 auto;}
#coupondetail .product .barcode .btn .btn_1 {width: 230px; background:#f43547; padding: 10px; color: #fff; font-size: 16px; font-weight: 700;}
#coupondetail .product .barcode .btn .btn_2 {width: 230px; background:#e8e8e8; padding: 10px; color: #999; font-size: 16px; font-weight: 700;}
#coupondetail .notice {background:#fff; margin-top:10px; border-bottom:1px solid #ccc;}
#coupondetail .notice .tit {font-size:14px; color: #f43547; padding:20px 14px 16px; border-bottom:1px solid #e8e8e8;}
#coupondetail .notice .txt {font-size:12px; line-height:18px; padding:22px 14px; color:#666;}

#coupondetail .cscenter {padding:14px 22px 26px;}
#coupondetail .cscenter button {width:100%; height:38px; background:none; border:2px solid #c1c6cb; box-sizing:border-box; border-radius:19px; font-size:13px; font-weight:bold; color:#333;}

.popup {display:none; position:fixed;_position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
.popup .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.3;}
.popup .pop {display:block; position:absolute; top:50%; left:50%;width:300px; height:auto; background:#fff; border-radius:2px; padding:0 20px 30px 20px; border:1px solid #eee; box-sizing:border-box; text-align:center; box-shadow:0 0 6px 2px rgb(0,0,0,0.2);}
.popup .pop .tit {font-size:18px; color:#111; font-weight:bold; padding:10px 0; border-bottom:1px solid #e8e8e8;}
.popup .pop .txt {font-size:16px; color:#333; padding:24px 0 10px 0;}
.popup .pop .txt2 {font-size:16px; color:#333; padding:24px 0 24px 0;}
.popup .pop .number {margin-bottom: 20px; font-size: 16px; font-weight: 700; }
.popup .pop .btn_confirm {width:100%; height:40px; background:#f43547; font-size:14px; color:#fff;}
.popup .pop .btn_confirm_n {width:38%; height:40px; background:#a2a2a2; font-size:14px; color:#fff; margin-right: 4%; float: left;}
.popup .pop .btn_confirm_y {width:58%; height:40px; background:#f43547; font-size:14px; color:#fff;}
.popup .pop .btn_confirm_y_2 {width:100%; height:40px; background:#ffb617; font-size:14px; color:#fff;}
.popup .pop .btn_confirm_y:disabled {width:48%; height:40px; background:gray; font-size:14px; color:#fff;}	

/*cs 고객센터*/
#cs {width:100%; padding:0px 0 20px; margin-bottom: 8px;}
#cs .filter { padding:20px; font-size:12px; width: 100%; height: 115px; background: #fff; margin-bottom: 8px; width: calc(100% - 40px);}
#cs .filter .tit {color: #333; font-size: 18px; font-weight: 700; margin:10px 0 10px; width: calc(100% - 40px);}
#cs .filter .note {color: #333; font-size: 16px; margin:10px 0 20px; width: calc(100% - 40px);}

#cs .csinput {padding:20px; background: #fff; width: 100%; margin-bottom: 8px; width: calc(100% - 40px);}
#cs .csinput li {width: 100%; margin: 20px 0 20px;}
#cs .csinput li label {font-size: 16px; font-weight: 600; padding-bottom: 10px;}
#cs .csinput li select { width: 100%; padding: 8px 8px 8px; font-size: 14px; background: #fff; border: 1px solid #b8b8b8;}
#cs .csinput li input[type="tel"], input[type="email"] { width: 100%; padding: 10px 8px 10px; font-size: 14px; border: 1px solid #b8b8b8;}
#cs .csinput li textarea { width: 100%; height: 150px; overflow-y: scroll; padding: 10px 8px 10px; font-size: 14px; border: 1px solid #b8b8b8; font-family:'notosanskr', sans-serif;}

#cs .check {padding:20px 20px 40px; background: #fff; width: 100%; width: calc(100% - 40px);}
#cs .check input[type="checkbox"] {float: left; }
#cs .check li .checktit {padding-left: 25px; font-size: 14px;}
#cs .check p {color: #999; font-size: 12px;}
#cs .check .note {width: 100%;}
#cs .check li {width: 100%; padding-bottom: 15px; margin: 0px 0 15px; border-bottom: 1px solid #b8b8b8;}

#cs .btn {width: 100%;}
#cs .btn button {width: 50%; height: 60px; font-size: 18px; font-weight: 700; float: left;}
#cs .btn .agree {color: #fff; background: #f43547;}
#cs .btn .back {color: #fff; background: #b8b8b8;}

#cs #used {display:none;}

#sign {
	height: calc(100vh - 52px);
	padding: 52px 20px 0;
	background: #fff;
	position: relative;
}

#sign .join01 {display:block;}
#sign .join02 {display:none;}

#sign img {
	margin: 0 auto;
	width: 80px;
	padding: 80px 0 40px;
}

#sign .tit {
	padding: 60px 0 10px;
	font-size: 20px;
	font-weight: 700;
}

#sign .txt {
	font-size: 12px;
	padding-bottom: 40px;
	font-weight: 500;
}

#sign .sub {
	font-size: 12px;
	font-weight: 700;
}

#sign .sub_2 {
	text-align: center;
	width: 95px;
	font-size: 12px;
	font-weight: 500;
	padding-top: 60px;
	padding-bottom: 3px;
	color: #5da9dd;
	border-bottom: 1px solid #5da9dd;
}
#sign .textbox .timer_2 {
	position: absolute;
	top: 10px;
	right: 20px;
}
#sign .textbox {
	position: relative;
	margin-bottom: 10px;
} 
#sign .textbox label { 
	position: absolute; top: 1px; /* input 요소의 border-top 설정값 만큼 */ 
	left: 1px; /* input 요소의 border-left 설정값 만큼 */ 
	padding: .8em .5em; /* input 요소의 padding 값 만큼 */ 
	color: #999; 
	cursor: text;
	font-size: 15px;
} 
#sign .textbox input[type="tel"], .textbox input[type="password"],.textbox input[type="text"] { 
	width: 100%; /* 원하는 너비 설정 */
	height: auto; /* 높이값 초기화 */ 
	line-height : normal; /* line-height 초기화 */ 
	padding: .8em .5em; /* 원하는 여백 설정, 상하단 여백으로 높이를 조절 */ 
	font-family: inherit; /* 폰트 상속 */ 
	font-size: 14px;
	border: 0px solid #999;
	border-radius: 0; /* iSO 둥근모서리 제거 */ 
	outline-style: none; /* 포커스시 발생하는 효과 제거를 원한다면 */ 
	-webkit-appearance: none; /* 브라우저별 기본 스타일링 제거 */ 
	-moz-appearance: none; 
	appearance: none; 
	border-bottom:1px solid #000;
	float: left;


}

#sign .agree {margin-bottom:10px; padding-top: 60px;}
#sign .agree input[type=checkbox] {display:none;}
#sign .agree input[type=checkbox] + label {display:inline-block; position:relative; font-size:12px;}
#sign .agree input[type=checkbox] + label:before {content:""; display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; vertical-align:middle; border:1px solid #CCC; background-color:#fff; font-size:16px; border-radius:3px; box-sizing:border-box;}
#sign .agree input[type=checkbox]:checked + label:before {content:"\2713"; color:#000; background-color:#fff; border:1px solid #000; text-align:center;}
#sign .agree>a {font-size:12px; padding-top: 4px; color:#ccc; float: right;}

#sign .steps {position:absolute; top:72px; right:20px;}
#sign .steps p {width:12px; height:12px; border-radius:50%; margin-left:3px; background:#ccc; float:left; padding:3px 6px; box-sizing:border-box; font-size:13px; font-weight:bold; color:#fff;}
#sign .steps p.on {background:#000;}
#sign .btn_join {width: 100%; background: #000; border-radius:5px; font-size: 16px; font-weight: 700; color: #fff; padding: 10px; margin-top: 40px;}
#sign .btn_join_2 {width: 100%; background: #000; border-radius:5px; font-size: 16px; font-weight: 700; color: #fff; padding: 10px; margin-top: 40px;}

	
		#sign  .contence {
			width: 100%;
		}
		
		#sign  .contence .title {
			font-size: 20px;
			font-weight: 800;
			margin-bottom: 30px;
			
		}
		
		#sign  .contence_1 {
			margin-top: 10px;
			border-top: solid #666666 2px;
			
			
		}
		
		#sign  .contence_1 .sub_title {
			font-size: 12px;
			line-height: 18px;
			font-weight: 700;
			width: 20%;
			padding-left: 2.5%;
			display: table-cell;
			vertical-align: middle;
			
		}
		
		#sign  .contence_1 .txt {
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			padding-left: 5%;
			width: 70%;
		}
		
		
		#sign  .bylaw {
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			margin-top: 30px;
		}
		
		#sign  .div1 {
			width: 100%;

			border-bottom: solid #666666 1px;
			display: table;
		}
		
		#sign  .div1 li {
			float: left;
			padding-top: 20px;
			padding-bottom: 20px;
		}
		
		@media screen and (min-width: 769px) {
			
			#sign  .contence_1 .sub_title {
			font-size: 16px;
			line-height: 23px;
			font-weight: 700;
			width: 100px;
			padding-left: 30px;
			display: table-cell;
			vertical-align: middle;
			
		}
			#sign  .contence_1 .txt {
			font-size: 14px;
			font-weight: 400;
			line-height: 23px;
			padding-left: 5%;
			width: 70%;
		}


		
		}