@charset 'UTF-8';

.securosys{
	padding: 35px 0;
	background: url('../image/bg01.png') top center no-repeat;
}
.securosys .box{
	padding-bottom: 25px;
}
.securosys .box .box_info{
	background: #FFFFFF;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 120px;
	margin-bottom: 61px;
}
.securosys .box .box_info .title{
	margin-right: 70px;
}
.securosys .box .box_info .text{
	font-weight: 500;
	max-width: 496px;
	width: 100%;
	font-size: 1.8rem;
	word-break: break-word;
}
.securosys .box .box_info .text span{
	font-weight: bold;
}
.securosys .box .bg_box02{
	display: flex;
	justify-content: center;
	padding: 0 15px;
}
.securosys .box .bg_box02 .article{
	max-width: 240px;
	width: 100%;
	margin-right: 20px;
}
.securosys .box .bg_box02 .article:last-child{
	margin-right: 0;
}
.securosys .box .bg_box02 .article .img{
	max-width: 95px;
	width: 100%;
	margin: 10px auto;
}
.securosys .box .bg_box02 .article .title{
	font-size: 2.0rem;
	font-weight: bold;
	text-align: center;
	color: #FFFFFF;
	word-break: break-word;
	margin-bottom: 10px;
}
.securosys .box .bg_box02 .article .text{
	color: #FFFFFF;
	text-align: center;
	font-size: 1.6rem;
	word-break: break-word;
	font-weight: 500;
}
/* .securosys */
.usesing{
	background: url('../image/bg02.png') top center no-repeat;
	background-size: cover;
}
.usesing .bg_box{
	padding: 50px 0 130px;
}
.usesing .bg_box .box01{
	display: flex;
	position: relative;
}
.usesing .bg_box .box01 .box_left{
	max-width: 711px;
	width: 100%;
	position: relative;
	z-index: 1
}
.usesing .bg_box .bg_title{
	font-size: 2.0rem;
	font-weight: bold;
	background: #E4F6FE;
	border: 1px solid #3CA6EC;
	border-radius: 5px;
	display: inline-block;
	overflow: hidden;
	padding: 5px 7px 5px 6px;
	margin-bottom: 15px;
}
.usesing .bg_box .box01 .box_left .title{
	background: #FFFFFF;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 18px 20px;
	border-radius: 10px;
	margin-bottom: 15px;
	word-break: break-word;
}
.usesing .bg_box .box01 .box_left .img{
	display: flex;
	position: relative;
}
.usesing .bg_box .box01 .box_left .img .img_left{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
}
.usesing .bg_box .box01 .box_left .img .img_left img{
	max-width: 304px;
	width: 100%;
}
.usesing .bg_box .box01 .box_left .img .img_right{
	position: absolute;
	right: 0;
	top: 0;
	width: 515px;
	height: 383px;
}
.usesing .bg_box .box01 .box_right{
	position: absolute;
	left: calc(50% + 120px);
	top: -87px;
	margin-right: -120px;
}
.usesing .box_info{
	/* max-width: 1201px; */
	width: 100%;
	margin: 0 auto;
	padding-bottom: 78px;
}
.usesing .box_info .bg_title{
	font-weight: bold;
	font-size: 2.8rem;
	line-height: 1.2;
	background: #FFFFFF;
	position: relative;
	display: inline-block;
	padding: 20px 20px 19px 40px;
	margin-left: 50px;
	margin-bottom: 30px;
	text-transform: uppercase;
	border-radius: 5px;
	position: relative;
}
.usesing .box_info .bg_title::before{
	content: '';
	position: absolute;
	background: url('../image/index_07.png') no-repeat;
	left: -50px;
	top: 50%;
	width: 85px;
	height: 86px;
	transform: translate(0 , -50%);
}
.usesing .box_info .bg_title::after{
	content: '';
	position: absolute;
	border-bottom: 3px solid hsl(210deg 100% 40% / 39%);
	bottom: 20px;
	width: 90%;
	height: 4px;
	left: calc(50% + 13px);
	transform: translate(-50% , 13px);
}
.usesing .box_info .box{
	display: flex;
	flex-wrap: wrap;
}
.usesing .box_info .box div{
	margin-right: 20px;
	position: relative;
	margin-bottom: 20px;
	padding: 0 0 0;
}
.usesing .box_info .box div:first-child{
	max-width: 62.39%;
	width: 100%;
}
.usesing .box_info .box div:nth-child(2){
	max-width: 36%;
	width: 100%;
	margin-right: 0;
}
.usesing .box_info .box div{
	max-width: 23.796%;
	width: 100%;
}
.usesing .box_info .box div:last-child{
	margin-right: 0;
}
.usesing .box_info .box div .title{
	position: absolute;
	bottom: -3px;
	background: #FFFFFF;
	border-left: 5px solid #3E67CB; 
	padding: 12px 5px 12px 48px;
	font-size: 1.6rem;
	font-weight: bold;
	width: 100%;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	word-break: break-word;

}
.usesing .box_info .box div:first-child .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon03.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
.usesing .box_info .box div:nth-child(2) .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon04.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
.usesing .box_info .box div:nth-child(3) .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon05.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
.usesing .box_info .box div:nth-child(4) .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon06.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
.usesing .box_info .box div:nth-child(5) .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon07.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
.usesing .box_info .box div:last-child .title::before{
	content: '';
	position: absolute;
	background: url('../image/icon08.png') no-repeat;
	left: 15px;
	top: 15px;
	width: 22px;
	height: 24px;
}
/* usesing */

/* footer */
.footer{}
.footer .box{}

.login_form {
    /* display: flex;
    flex-direction: column; */
    max-width: 358px;
    width: 100%;
}
.login_form .font{
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 10px;
}
.login_form input{
    height: 32px;
    width: 358px;
    padding: 0 5px;
    outline: none;
    font-size: 1.6rem;
    line-height: 1.3;
    border: 1px solid snow;
    background: #FFFFFF;
    font-weight: 500;
    border-radius: 6px;
    margin-bottom: 15px;
}
.login_form button{
    font-size: 1.6rem;
    line-height: 1;
    color: #0066CC;
    outline: none;
    cursor: pointer;
    width: 86px;
    border-radius: 8px;
    padding: 14px 0;
    font-weight: 500;
    background: #FFFFFF;
    border: none;
    float: right;

}
.login_form button:hover{
    opacity: 0.8;
    transition: .3s;
}
.login_form #email_error , .login_form #password_error{
    font-size: 1.6rem;
    line-height: 1.33;
    margin: 5px 0 10px;
    color: #c62828;
    background: rgba(255, 0, 0, 0.1);
    text-align: center;
    width: 362px;
    display: none;
}
/* .login_form */