/* main */
/* main */

body{  background: linear-gradient(to bottom, #fbe6f3, #e6f4f7); }

#mainwrap{/*width: 100%; height: 100vh; min-height: 900px; overflow: hidden; overflow-y: auto; position: relative;*/ background: linear-gradient(to bottom, #fbe6f3, #e6f4f7);}

#header{ position: static; left: 0; top: 0;}
.main{ width:100%; height: calc( 100vh + 102px ); min-height: 960px; overflow: hidden; position: relative;}
.main input{ width: 100%; height: 58px; border: 1px solid #dedede; /*color:#d6d6d6*/; font-size: 16px; box-sizing: border-box; padding: 0 20px;}
.main .popup{ opacity: 0; touch-action: none; pointer-events: none; width: 668px; max-width: calc( 100% - 40px ); background: #fff; border-radius: 30px; position: absolute; left:50%; top:50%; transform: translate(-50%, 0); box-sizing: border-box; transition: .3s ease; overflow: hidden; overflow-y: auto;}
.main .popup.active{ opacity: 1; touch-action: auto; pointer-events: auto; transform: translate(-50%, -50%);}

.main .popup .inner{ width: 450px; max-width: calc( 100% - 90px ); height: 100%; overflow: hidden; margin: 0 auto; padding:110px 0 90px; box-sizing: border-box;}
.main .popup .inner::-webkit-scrollbar{ display:none; }
.main .popup .inner h1{ font-size: 30px; font-weight: 700; text-align: center; margin-bottom:94px;}
.main .popup .inner h1.tit2{ margin-bottom: 30px;}
.main .popup .inner .subtit{ margin-bottom: 37px; font-size: 18px; text-align: center;}
.main .popup .inner input{ margin-bottom:21px;}
.main .popup .inner .mainBtn{ font-size: 16px; font-weight: 500; padding:15px 0; text-align: center; color:#fff; box-sizing: border-box;}
.main .popup .inner .moreLoginBtn{ font-size: 16px; color:#000; float: right;}
.main .popup .inner .moreLoginBtn span{ cursor: pointer;}
.main .popup .inner .moreLoginBtn .signBtn{ margin-right: 17px; padding-right: 18px; position: relative;}
.main .popup .inner .moreLoginBtn .signBtn::after{ content: ''; display: inline-block; width: 1px; height: 11px; background: #000; position:absolute; right: 0; top: 50%; transform: translateY(-50%);}

.main .popup .inner .btntype2{ width: calc( 50% - 12px); background: #cacaca; transition: .3s ease; float: left;}
.main .popup .inner .btntype2:hover{ background: #D7098C;}
.main .popup .inner .btntype2.next{ margin-right: 24px;}


/*********** login **************/
.main .popup.login .inner .loginBtn{ width: 100%; background: linear-gradient(to right, #cf0e8d, #0191b2); margin:10px 0 16px; transition: .3s ease;}

.main .popup.pw .credit{ width: calc( 100% - 133px); border-right: none;}
.main .popup.pw .creditBtn{ width: 133px; border: 1px solid #000; color:#000; background: #fff; float: right; transition: .3s ease;}
.main .popup.pw .creditBtn:hover{ background: #000; color:#fff;}



/*********** signUp2 **************/
.main .popup.signUp2{ width: 820px;}
.main .popup.signUp2 .inner{ width: 603px; padding: 37px 0 35px; position: relative;}
.main .popup.signUp2 .inner .backBtn{ position: absolute; left: 0; top: 37px; cursor: pointer;}
.main .popup.signUp2 .tit3{ margin-bottom: 10px; font-size: 30px; font-weight: 700; text-align: center;} 
.main .popup.signUp2 .subtit{ margin-bottom: 23px;} 
.main .popup.signUp2 .write{ width: 100%; overflow: hidden; margin-bottom: 19px;}
.main .popup.signUp2 .write li{ width:100%; height: 60px; box-sizing: border-box; border-bottom:1px solid #d2d2d2; float: left; position: relative; padding-left: 115px;}
/*.main .popup.signUp2 .write li:nth-child(odd)::after{ content: ''; display: block; width: 1px; height: 30px; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); background: #d2d2d2; margin-right: 7px;}*/
.main .popup.signUp2 .write li:nth-child(even){}

.main .popup.signUp2 .write li span{ font-size: 16px; color:#d6d6d6; float: left; line-height: 60px; position: absolute; left:0; top:0;}
.main .popup.signUp2 .write li span:nth-child(even){ left:13px;}
.main .popup.signUp2 .write li input{width: 100%; border:none; margin-bottom: 0; color:#000; padding:0;}
.main .popup.signUp2 .privacy{}
.main .popup.signUp2 .privacy p{font-size: 16px;}
.main .popup.signUp2 .privacy .txtbox{ width: 100%; height: 80px; border: 1px solid #dedede; padding: 8px 15px; box-sizing: border-box; font-size: 14px; color:#808080; overflow-y: scroll; margin:7px 0;}
.main .popup.signUp2 .privacy .agree{ display: block; font-size: 14px; position: relative; padding-left: 20px; margin-bottom: 25px; cursor: pointer;}
.main .popup.signUp2 .privacy .agree::before{ content: ''; display: block; width: 12px; height: 12px; border: 1px solid #dedede; position: absolute; left: 0; top: 4px; line-height: 12px; box-sizing: border-box;}
.main .popup.signUp2 .privacy .agree::after{ content: ''; display: block; width: 4px; height: 4px; background: #D7098C; position: absolute; left: 4px; top: 8px; opacity: 0; transition: .3s ease;}
.main .popup.signUp2 .privacy input:checked + .agree::after{ opacity: 1;}

.main .popup.signUp2 .btnWrap{ display: flex; justify-content: center;}
.main .popup.signUp2 .btntype2{ width: 150px;}



@media ( min-width:1921px){
	.main{ height: 100vh;}
}

@media ( min-width:1025px){
	.main.join{ min-height: auto; height: 1135px;}
}


@media ( max-width:1024px){
	.main{ min-height: 390px; height: calc( 100vh - 226px );}
	.main input{ height: 41px; font-size: 16px; padding:0 15px;}
	.main .popup{ height: 360px; top:0;}
	.main .popup.signUp2{ height: 97%;}
	.main .popup.active{ transform: translate(-50%, 0);}
	.main .popup .inner{ padding: 50px 0 40px; overflow-y: auto;}
	.main .popup .inner h1{font-size: 26px; margin-bottom: 36px;}
	.main .popup .inner input{ margin-bottom: 12px;}
	.main .popup .inner .mainBtn{ padding: 10px 0; font-size: 14px;}
	.main .popup .inner .subtit { margin-bottom: 24px; font-size: 14px;}
	.main .popup .inner .moreLoginBtn{font-size: 14px;}
	.main .popup .inner .moreLoginBtn .signBtn{ margin-right: 3px; padding-right: 8px;}
	.main .popup .inner .moreLoginBtn .signBtn::after{ height: 8px;}
	.main .popup .inner h1.tit2{ margin: -15px 0 7px;}
	.main .popup .inner .btntype2{ margin-top:9px;}

	.main .popup.login .inner .loginBtn{ margin:9px 0 15px;}


	.main .popup.signUp2 .inner{ max-width: calc( 100% - 60px ); padding:54px 0 40px;}
	.main .popup.signUp2 .inner .backBtn{ width: 26px; top:25px;}
	.main .popup.signUp2 .tit3{ font-size: 26px;}
	.main .popup.signUp2 .inner .subtit{margin-bottom: 13px;}
	.main .popup.signUp2 .write li{ width: 100%; height: 55px; padding-left: 87px;}
	.main .popup.signUp2 .write li:nth-child(odd)::after{ display: none;}
	.main .popup.signUp2 .write li span{ line-height: 55px; font-size: 16px;}
	/*.main .popup.signUp2 .write li:last-child{ display: none;}*/
	.main .popup.signUp2 .write li input{ height: 54px; width: 100%;}
	.main .popup.signUp2 .write li .mlh{ line-height: 1.65;}
	.main .popup.signUp2 .privacy p{ font-size: 16px;}
	.main .popup.signUp2 .privacy .txtbox{ height: 200px; padding: 15px; margin:10px 0;}
	.main .popup.signUp2 .privacy .agree{ font-size: 14px; padding-left: 16px;}
	.main .popup.signUp2 .btntype2{ width: 108px;}
}