@charset "UTF-8";
@import url("common.css");

body {}
/* #wrap{background: url(../img/bg-login.png) no-repeat; width: 100%; height: 100vh; background-size: cover;} */
#wrap{width: 100%; height: 84vh;}
#header_wrap{display: flex; background-color: #1877f2; width: 100%; height: 8vh;}
#footer_wrap{background-color: #e0e0e0; width: 100%; height: 8vh; align-content: center; text-align: center;}
.login_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 80rem; padding-left: 3rem; padding-right: 3rem;  border: 3px solid #e0e0e0; box-shadow:0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%); border-radius: 5px;}
.main_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 60rem; padding-left: 3rem; padding-right: 3rem;  border: 3px solid #e0e0e0; box-shadow:0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%); border-radius: 5px;}
.logo{display: flex; padding: 1%;}
.logo img{width: 100%;}
.logo_text{font-size: 2rem; font-weight: 400; align-content: center; color: #fff;}
.login_lan{display: flex; text-align: center; border-bottom: 1px solid #e2e2e2; margin-top: 2.5rem;}
/* .login_lan li{display: inline-block;} */
.login_lan li{flex: 1 1 0;}
.login_lan li a{display: inline-block; font-size: 1.8rem; color: #cfcdcd; line-height: 1.67; font-weight: 500; cursor: pointer;}
/* .login_lan li:nth-child(2) a{margin-left: 2.2rem;} */
.login_lan li a.on{font-size: 2rem; color: #1877f2; padding: 0 1.1rem .3rem; position: relative;}
.login_lan li a.on::after{display: block; content: ""; position: absolute; border-bottom: 2px solid #1877f2; width: 5rem; left: 50%; bottom: 0; transform: translateX(-50%);}

.footer_ul{}
.footer_ul li{font-weight: 300;font-size: 1.4rem;}

.login_con h3{font-size: 3.2rem; font-weight: 500; margin: 3rem 0 3.5rem; text-align: center;}
.login_con h3.main{font-size: 2.5rem; font-weight: 500; margin: 3rem 0 3.5rem; text-align: center;}
.col1{color: #d48146; font-weight: 600;}
.col2{color: #c75034; font-weight: 600;}
.col3{color: #e0aa49; font-weight: 600;}
.login_con.active{display: block;}

.input_box input{width: 100%;  padding: 1.2rem 3rem 1.4rem 3rem; border-radius: 0.3rem; border: solid 1px #ccc; background-color: #fff; font-size: 1.6rem;}
.input_box input:nth-child(2){margin-top: 1.4rem;}
.input_box input::placeholder{color: #ccc;}
.login_con .set_id{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 2rem 0 3.3rem; font-size: 1.6rem;}
.set_id .keepid_box{font-size: 1.8rem; color: #333; font-weight: 500; margin-top: -0.2rem;}
.set_id .membership{color: #333; font-weight: 400;}
.set_id .membership a:nth-child(n+2){margin-left: 1.9rem;}
.set_id .keepid_box input[type="checkbox"]{display: none;}
.set_id .keepid_box input[type="checkbox"] + label::before{display: inline-block; content: ""; width: 2rem; height: 2rem; background: url(../img/ico_login_un_check.png) no-repeat 0 0; background-size: 2rem; padding-right: 1rem; vertical-align: middle;  margin-top: -0.3rem;}
.set_id .keepid_box input[type="checkbox"]:checked + label::before{background: url(../img/ico_login_check.png) no-repeat 0 0; background-size: 2rem; background-size: 2rem;}

.login_bt button{display: block; width: 100%; background: #1877f2; text-align: center; color: #fff; font-size: 2rem; font-weight: 500; padding: 1.4rem 0; border-radius: .3rem; cursor: pointer;}
.lock_bt{display: flex; justify-content: space-between; margin: 2rem 0 4.2rem;}
.lock_bt a{display: block; width: calc((100% - 1rem)/2); background: #e7e7e7;  padding: 1.3rem 0 1.2rem 0; text-align: center; color: #555; font-size: 1.8rem;  border-radius: 3px; transition: all .5s; font-weight: 400;}
/* .lock_bt img{width: 48%;} */

.service{display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 2.7rem;}
.service li a{font-size: 1.5rem; color: #999; font-weight: 400;}
.service li a:hover{border-bottom: 1px solid #999;}
.service li:nth-child(1):after{display: inline-block; content: ""; width: 1px; height: 1.4rem; background: #999; margin: 0 2.2rem; vertical-align: middle;}
/* .service li:nth-child(2):after{display: inline-block; content: ""; width: 1px; height: 1.4rem; background: #999; margin: 0 2.2rem; vertical-align: middle;} */

.service2{display: flex; justify-content: center; flex-wrap: wrap; padding-bottom: 2.7rem;}
.service2 li a{font-size: 1.5rem; color: #999; font-weight: 400;}
.service2 li a:hover{border-bottom: 1px solid #999;}
.service2 li:nth-child(1):after{display: inline-block; content: ""; width: 1px; height: 1.4rem; background: #999; margin: 0 2.2rem; vertical-align: middle;}


.social_bt{margin: 2rem 0 4.2rem;}
.social_bt img{width: 10%; vertical-align: middle; margin-left: -2rem;}
.social_bt button{display: block; width: 100%; margin: 0 0 1.5rem 0; font-size: 1.6rem; font-weight: bold; border-radius: .3rem; cursor: pointer;}
.social_bt button.link{display: block; width: 100%; margin: 0 0 1.5rem 0; font-size: 1.6rem; font-weight: bold; border-radius: .3rem; cursor: pointer; height: 5.5rem;}

/*modal_table*/
.modal_table{width: 100%; table-layout: fixed; border-collapse: collapse;}
.modal_table caption{overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0;}
.modal_table th{font-size: 1.8rem; color: #555; text-align: left; font-weight: normal;}
.modal_table th.ver-t{vertical-align: top;}
.modal_table th.ver-t label{padding-top: 1.1rem; display: block;}
.modal_table td{font-size: 1.6rem;}
.modal_table tr:nth-child(n+2) th,
.modal_table tr:nth-child(n+2) td{padding-top: 1.4rem;}
.modal_table td input::placeholder{color: #ccc;}

@media screen and (max-width: 1024px){
	#wrap{width: 100%; height: 88vh;}
	#header_wrap{display: flex; background-color: #1877f2; width: 100%; height: 6vh;}
	#footer_wrap{background-color: #e0e0e0; width: 100%; height: 6vh; align-content: center; text-align: center;}
	.login_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 50rem; padding-left: 3rem; padding-right: 3rem;  border: 1px solid #e0e0e0; box-shadow:0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%);}
	.main_box{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 50rem; padding-left: 3rem; padding-right: 3rem;  border: 1px solid #e0e0e0; box-shadow:0 1.5rem 1.5rem -1.5rem rgb(0 0 0 / 20%);}
	.logo{display: flex; padding: 1rem; width: 15%; height: auto;}
	.logo_text{font-size: 1.5rem; font-weight: 400; align-content: center; color: #fff;}
	
	.footer_ul li{font-weight: 300;font-size: 1rem;}
}

@media screen and (max-width: 768px){
	body{background: none;}
	#wrap{background: none;}
	.login_box{width: 100%; top: 0; transform: translate(-50%, 0); background: #fff; max-height: 100vh; overflow-y: auto; border: none; box-shadow: none;}
	.main_box{width: 100%; top: 0; transform: translate(-50%, 0); background: #fff; max-height: 100vh; overflow-y: auto; border: none; box-shadow: none;}
    .logo{width: 15rem; padding-top: 4.2rem;}
    .login_lan{margin-top: 2.3rem;}
    .login_lan li:nth-child(2) a{margin-left: 1.4rem;}
    .login_lan li a{font-size: 1.6rem;}
    .login_lan li a.on{font-size: 2rem; font-weight: 600; }
    .login_con h3{font-size: 2.4rem; font-weight: 500; margin: 4.2rem 0 2.6rem;}
    .col1{font-weight: 500;}
    .col2{font-weight: 500;}
    .col3{font-weight: 500;}

    .input_box input{padding: 1.1rem 1.5rem; font-size: 1.4rem;}
    .input_box input:nth-child(2){margin-top: 1rem;}

    .login_con .set_id{ font-size: 1.2rem; margin: 2rem 0 2.5rem;}
    .set_id .keepid_box{font-size: 1.4rem;}
    .set_id .membership a{letter-spacing: -1px;}
    .set_id .membership a:nth-child(n+2){margin-left: 1.2rem;}
    .set_id .keepid_box input[type="checkbox"] + label::before{width: 1.5rem; height: 1.5rem; background-size: 1.5rem; padding-right: .5rem;}
    .set_id .keepid_box input[type="checkbox"]:checked + label::before{background-size: 1.5rem; background-size: 1.5rem;}

    .login_bt button{ font-size: 1.6rem; padding: 1.4rem 0; border-radius: 0; font-weight: 600;}
    .lock_bt{margin: 2.5rem 0 5.5rem;}
    .lock_bt a{font-size: 1.4rem; border-radius: 0;}

    .service{padding-bottom: 3.6rem;}
    .service li a{font-size: 1.2rem;}
    .service li:nth-child(1):after{height: .7rem; margin: 0 2rem;}
    
	.social_bt img{width: 15%; vertical-align: middle; margin-left: -2rem;}
	
	/*modal_table*/
    .modal_table th{font-size: 1.4rem; font-weight: 500;}
    .modal_table td{font-size: 1.2rem;}
    
    .footer_ul li{font-weight: 300;font-size: 1.2rem;}
    
}