@charset "utf-8";

html, body, img, input, select, button, textarea{font-family: 'S-Core';}
body{font-size: 1.6rem;}

#mainLogin{min-height: 100vh;height: 100%;padding: 30px 0;width: 100vw;display: flex;justify-content: center;align-items: center;align-content: center;flex-wrap: wrap;}

#mainLogin h1 img{width:100%;display:inline-block;}
#mainLogin .content{max-width: 1400px;width: 100%;margin: 0 auto;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}

#mainLogin .txt_box b{color:var(--main-color);font-weight:500;width: 100%;display: inline-block;word-break: keep-all;}
#mainLogin .txt_box{color: var(--sub-color);width: 100%;text-align: center;}
#mainLogin .txt_box a{font-weight:500;}

#mainLogin h2{font-size:1.8rem;font-weight:500;display: flex;color:var(--main-color);align-items: center;width: 100%;}
#mainLogin .right h2{color:#fff;}

#mainLogin .button{font-size: 1.4rem;font-family: 'S-Core';}
#mainLogin input{width:100%;height:50px;border-radius:5px;background: var(--sub-02-color);font-size: 1.6rem;color: var(--main-color);}

#mainLogin h2::before{content:'';display:block;float: left;margin-right: 5px;}
#mainLogin .left h2::before{background: url('../../img/login/icon_01.png') no-repeat;width: 14px;height: 19px;background-size: 14px 19px;}
#mainLogin .right h2::before{ no-repeat;width: 25.5px;height: 14px;background-size: 25.5px 14px;}

#mainLogin article{max-width: calc(485px + 393px);width: 100%;display: flex;flex-wrap: wrap;}
#mainLogin .left {max-width:485px;width:55%;background: #fff;border-radius: 5px 0 0 5px;}
#mainLogin .left button{border-radius:5px;background:var(--main-color);color:#fff;width:100%;height:50px;line-height: 50px;transition: all 0.3s ease;margin-top: 10px;}
#mainLogin .left button:hover{box-shadow: 0 3px 10px rgb(71 88 141 / 45%);background: #38446c;}

#mainLogin .right {max-width:393px;width:45%;border-radius: 0 5px 5px 0;background:var(--main-color);}
#mainLogin .right img{width:217.5px;margin: 0 auto;}
#mainLogin .right span{color: #afb5c7;text-align: center;width: 100%;font-size: 1.4rem;}
#mainLogin .right a{width:100%;height:50px;color: #e3e7f1;border-radius:5px;border: 1px solid #767c8b;text-align: center;line-height: 48px;transition: all 0.3s ease;}
#mainLogin .right a:hover{background: #212942;}

#mainLogin article > div{display: flex;flex-wrap: wrap;justify-content: center;padding: 30px 45px;position:relative;align-items: center;align-content: space-between;}
#mainLogin article > div::after{content:'';position:absolute;background-size: contain;background-repeat: no-repeat;background-position: bottom;height: 100%;}
#mainLogin .left::after{background-image: url('../../img/login/bg_deco02.svg');width: 142.5px;right: 100%;bottom: 0;border-radius: 0;transform: translate(10px, 0%);}
#mainLogin .right::after{background-image: url('../../img/login/bg_deco01.svg');width: 189.5px;left: 100%;bottom: 0;border-radius: 0;transform: translate(-36px, 0%);}
#mainLogin article .info{min-height: 200px;display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-end;}

#mainLogin .security{width:100%;}
#mainLogin .security .txt {text-align: center;font-size: 1.4rem;line-height: 1.4;background: #fff6fb;border: 1px solid #f23a75;padding: 5px;color: #e32284;border-radius:5px;word-break: keep-all;}
#mainLogin .security ul{width:100%;height: 72px;display: flex;align-items: flex-end;}
#mainLogin .security ul li{float:left;}
#mainLogin .security ul li:nth-child(1){width: 55%;background: #efefef;height: 60px;margin-right: 10px;}
#mainLogin .security ul li:nth-child(2){width: 45%;}
#mainLogin .security button.reply{color:#333;background:none;width: auto;height: 20px;line-height: 1;margin: 0 0 4px 0;display: flex;align-items: center;}
#mainLogin .security button.reply:hover{box-shadow:none;text-decoration:underline;}

@media screen and (max-width:1200px){

    #mainLogin .content{padding: 20px;width: calc(100% - 240px);}
    #mainLogin .right::after{width:150px;z-index: 10;}
    #mainLogin .left::after{width: 110px;z-index: 10;}
    
}

@media screen and (max-width:967px){

   #mainLogin article > div.right, #mainLogin article > div.left{width:100%;max-width: 100%;}
   #mainLogin article{position:relative;}
   #mainLogin .left{position: static;}
    
}

@media screen and (max-width:765px){

   #mainLogin .content{padding: 20px;width: 100%;}

   #mainLogin .txt_box b{margin-bottom: 5px;}
   
   #mainLogin .right::after, #mainLogin .left::after{display:none;}
   #mainLogin article > div{padding: 30px 25px;border-radius:0 !important;}
   
    
}