
/* contact_page */
#contact_page {margin-top: 4em;background: white;box-shadow: 0 0 0.8em 0 rgba(2, 2, 2, .16);display: flex;flex-wrap: wrap;justify-content: space-between;align-items: stretch;}
#contact_page .bg_info{background-color:#efefef}

/* form_box */
.form_box.large_item { padding: 0; }
.form_box .form_item label {color: #000;font-size: 17px;display: flex;align-content: center;align-items: center;}
.form_box .form_item label span{color:#dc3545;font-size:16px;vertical-align:unset;margin-left: 3px;}
.form_box .form_item input{height:48px;line-height:35px}
.form_box .flex_style{display:flex;flex-wrap:wrap;align-items:center;gap:20px 10px;margin:30px}
.form_box .flex_style label.large{margin-right:1em;width:7em}
.form_box .flex_style >input,.form_box .flex_style >font{width:100%}
.form_box .flex_style >font input{    background: rgba(var(--gray-rgb), .2);}
.form_box .flex_style .groud{overflow:hidden;display:flex;align-items:center;background-color:white;background-clip:padding-box;border:1px solid var(--g_200);border-radius:.2em}
.form_box .flex_style .groud >input{width:1%;flex:1 1 auto;border:0}
.form_box .flex_style .groud >button{padding:.5em;width:10em;background:var(--red);text-align:center;color:white}
.form_box .flex_style .remarks span.words{width:100%;display:flex;justify-content:flex-end;align-items:center;font-size:.9em;color:var(--g_600)}
.form_box .flex_style .remarks span.words b{margin:0 .2em;font-size:1em}
.form_box .sex_box { padding: .3em 0; width: 100%; display: flex; align-items: center; }
.form_box .sex_box >span { margin-right: 1em; }
.form_box .sex_box >span input, .form_box .agree_box input {margin-right: .2em;height: auto;width: auto;}
.form_box .address_box { width: 100%; display: grid; grid-template-columns: 8em 8em 1fr; grid-gap: .6em 1em; align-items: center; }
.form_box .calendar { position: absolute; width: 1em; height: 1em; top: 51%; right: 1em; fill: var(--g_500); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.form_box .check_box font { display: flex; align-items: center; }
.form_box .check_box font input { width: 1%; flex: 1 1 auto; }
.form_box .check_box font img { margin-left: .5em; cursor: pointer; }
.form_box .send_box {display: flex;justify-content: end;align-items: center;width: 100%;}
.form_box .large_item.send_box { flex-direction: column; justify-content: center; }
.form_box .send_btn { padding: .4em .5em; width: 10em; background: var(--primary); display: block; text-align: center; color: white; cursor: pointer; }
.form_box .send_btn.large_btn { width: 100%; }
.form_box .agree_box { margin-bottom: .2em; display: flex; align-items: center; }
.form_box .agree_box label[for="IsAgree"] { margin-left: .3em; width: 1%; flex: 1 1 auto; line-height: 1; }

/* member_page */
#member_page {margin: 2em auto 0;width: 640px;border: 1px var(--g_100) solid;background-color: #fff;border-radius: 40px;padding: 60px;}
#member_page .login_btns {display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 1em;border-bottom: 1px #b4b4b4 solid;}
#member_page .login_btns a { margin-bottom: -1px; padding: .5em 1em; border-bottom: 2px transparent solid; text-align: center; font-size: 1.1em; }
#member_page .login_btns a.acion { border-color: var(--primary); }
#member_page .other_btns .join { margin: 1em 0 .5em; display: flex; justify-content: center; align-items: baseline; }
#member_page .other_btns .join * {font-size: 1.1em;}
#member_page .other_btns .join a {margin-left: .4em;padding: .2em;display: block;border-bottom: 1px var(--info) solid;line-height: 1;color: #dc3545;}
#member_page .other_btns .askpass { text-align: center; }
#member_page .other_btns .askpass a {font-weight: 400;color: #dc3545;}


.form_box .more_btn{display:flex;justify-content:space-between;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;flex-direction:column;width:100%;max-width:110px;background-color:var(--secondary);border:1px solid var(--secondary);border-radius:100px;line-height:25px;letter-spacing:0.03rem;padding:14px 29px;overflow:hidden;font-family:"Tenor Sans",serif;color:#363636;}
.form_box .more_btn img{width:20px;height:20px;object-fit:contain}
.form_box .more_btn:hover{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
.form_box .more_btn .more{width:40px;height:40px;border-radius:50%;background-color:var(--secondary);display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:10px;z-index: 10;}
.form_box .more_btn .more::before{content:"";position:absolute;width:8px;height:8px;border-left:1px solid #363636;border-bottom:1px solid #363636;right:0px;top:50%;left:-5px;margin:auto;-webkit-transform:translateY(-50%) rotate(225deg);transform:translateY(-50%) rotate(225deg)}
.form_box .more_btn:after{content:"";position:absolute;right:0;top:0;z-index: 0;width:0;height:100%;background-color:var(--primary);-webkit-transition:all 0.5s 0s ease;transition:all 0.5s 0s ease}
.form_box .more_btn:hover:after{width:100%;left:0;right:auto}
.form_box .more_btn:hover font{color:#fff;z-index: 10;font-weight: 400;}


#register_page .registerList{display:flex;align-items:flex-start;justify-content:center;gap:20px 20px}
#register_page .registerList .item{vertical-align:top;background-color:#fff;border:1px solid #0000002d;border-radius:7px;flex:0 0 auto;width:33.33333333%}
#register_page .registerList .item .Img{padding:20px 0;text-align:center;background:#2b832b;border-radius:7px 7px 0 0}
#register_page .registerList .Txt{margin:1.8rem 1rem;border-bottom:1px solid #f4f4f4;height:250px}
#register_page .registerList .Txt .title{text-align:center;font-size:1.875rem;display:flex;flex-direction:column;align-items:center;font-weight:500;line-height:0.5;margin-bottom:10px}
#register_page .registerList .Txt .title font{vertical-align:baseline;font-size:2.5rem}
#register_page .registerList p{font-size:1.25rem;text-align:center;line-height:150%}
#register_page .registerList p font{color:#036eb8;vertical-align:baseline;font-weight:500;font-size:1.5625rem;line-height:150%}
#register_page .registerList .item .btnBox{margin:1.8rem 1rem}
#register_page .registerList .item .btnBox a{padding:0 40px;color:var(--white);background-color:var(--primary);font-size:1.25rem;text-transform:uppercase;display:inline-flex;align-items:center;position:relative;border:1px solid hsl(0deg 0% 48.8% / 30%);line-height:50px;border-radius:90px;justify-content:center}
#register_page .registerList .item:last-child .Img,#register_page .registerList .item:last-child .btnBox a{background:#00a99d}
.form_box .flex_style label img{
    width: 20px;
    height: 20px;
}

@media screen and (max-width: 1160px){
    #register_page .registerList .item{width:45%}
}

@media screen and (max-width: 980px) and (min-width: 641px){
	.contact_information { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.5em 1em; align-items: center; }
	.contact_information .title { grid-column: 1/3; }
}
@media screen and (max-width: 768px){
    #register_page .registerList{display:flex;flex-direction:column}
	#register_page .registerList .item{width:auto}
	#register_page .registerList .Txt .title{font-size:1.3rem}
	#register_page .registerList .Txt .title font{font-size:2rem}
	#register_page .registerList p{font-size:1rem}
	#register_page .registerList p font{font-size:1.2rem}
	#register_page .registerList .Txt{height:220px}
	#register_page .registerList .item .btnBox a{padding:0 30px;font-size:1rem}
    #member_page{
    width: 80%;
    padding: 30px;
}
    .form_box .flex_style{
    margin: 30px 0;
}
}
@media screen and (max-width: 640px){
	.form_box {padding: 0;}
	.form_box .address_box { grid-template-columns: repeat(2, 1fr); grid-template-areas: "city area" "inp inp"; }
	.form_box .address_box .address_inp { grid-area: inp; }

}
@media screen and (min-width: 551px){
	.form_box .flex_style label {padding: .5em 0;width: 10em;}
	.form_box .flex_style >input , .form_box .flex_style >font { width: 1%; flex: 1 1 auto; }
}
