@charset "utf-8";@font-face {font-family: "IonIcons"; src: url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format(".style3 truetype"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("//code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,button,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,div,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embe d,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0; padding: 0; border: 0; vertical-align: baseline; font-size: 10px; font-weight: normal; color: #525252; word-break: break-word; text-decoration: none; letter-spacing: 1px; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Microsoft YaHei", "微软雅黑", "SimHei", "黑体", sans-serif;}li {list-style: none;}button,input {appearance: none; -webkit-appearance: none; -ms-aappearance: none; -moz-appearance: none; border: 0px; outline: 0; padding: 0; margin: 0;}input[type=checkbox] {display: none;}input[type=text],input[type=number],input[type=password],input[type=mailadress]{cursor: text;}label,button,a,input[type=checkbox],input[type=radio]{cursor: pointer;}::placeholder {font-size: 12px !important; color: #aaa !important;}@media screen and (max-width: 500px) {::placeholder {font-size: 15px !important; color: #aaa !important;}}::-ms-input-placeholder {font-size: 12px !important; color: #aaa !important;}:-ms-input-placeholder {font-size: 12px !important; color: #aaa !important;}body {scrollbar-arrow-color: #aaa; scrollbar-face-color: #aaa; scrollbar-track-color: #f8f8f8;}.loader {display: block; margin: auto;}.loader span {width: 1em; height: 1em; display: inline-block; margin-left: 3px; background-color: #aab2ff; border-radius: 10px; -webkit-animation: blinkAnime1 0.6s infinite alternate; -moz-animation: blinkAnime1 0.6s infinite alternate; -ms-animation: blinkAnime1 0.6s infinite alternate; -o-animation: blinkAnime1 0.6s infinite alternate; animation: blinkAnime1 0.6s infinite alternate; cursor: default;}.loader span:nth-child(2) {animation-delay: 0.3s;}.loader span:last-child {animation-delay: 0.6s;}@keyframes blinkAnime1 {0% {opacity: 1;} 100% {opacity: 0.2;}}@charset "utf-8";.login-wrap {min-width: 748px; padding: 0 10px; max-width: 100vw; height: 100vh; display: grid; display: -ms-grid; align-items: center; grid-template-rows: 60px 1fr auto; -ms-grid-rows: 60px 1fr auto; -ms-grid-columns: 100%; background-image: url("../pages/login/themes/images/login-bg.jpg"); background-color: #525252; background-position: 50% 0%; background-repeat: no-repeat; background-size: cover; z-index: 0; overflow-x: hidden;}_:-ms-lang(x),.login-wrap {min-height: 927px;}.login-wrap span {color: #f8f8f8;}header {display: flex; align-items: center; grid-row: 1; -ms-grid-row: 1; -ms-grid-column: 1;}header span {font-size: 1.2em;}.porters-logo {margin-left: -20px; padding-left: 80px; padding-top: 20px; padding-bottom: 10px; background: url("../pages/login/themes/images/logo.png") no-repeat left; background-size: 90px;}.login-wrap main {grid-row: 2; -ms-grid-row: 2; -ms-grid-column: 1; width: 100%;}_:-ms-lang(x),.login-wrap main {display: inline-block; height: auto; padding-top: 10%;}.login-input {margin: 60px auto 20px; width: 390px;}.login-input li input {margin: 10px 0; font-size: 12px;}.system-error-wrap {position: relative;}.system-error {position: absolute; left: 50%; margin-left: -195px; top: -70px; width: 375px; display: block; padding: 10px; background: rgba(255, 96, 82, 0.95); border-radius: 10px; box-shadow: 0px 5px 10px 0 rgba(255, 96, 82, 0.5);}.system-error-wrap input {background: #ccc !important; border-color: #ccc !important;}.login-input input {padding: 10px 2%; border: 2px solid #fff; border-radius: 30px; width: 96%; height:16px; text-indent: 10px; color: #525252;}.login-input input:hover {border: #aab2ff 2px solid; background: #EEF1FF;}.login-input input:focus {border: #aab2ff 2px solid; background: #fff;}@media screen and (min-width: 500px) {.input-error {position: relative;}}.input-error input,.input-error input:hover,.input-error input:focus {border: 2px #ff6052 solid;}.input-error input:focus .tooltip {display: none !important;}.input-error input:hover {background: #FFF1EF;}@media screen and (min-width: 500px) {.tooltip {position: absolute; left: 103%; top: 50%; margin-top: -10px; display: block; color: #fff; min-width: 400px;} .tooltip span {word-break: normal; border: 2px #ff6052 solid; padding: 10px 3%; background: rgba(255, 96, 82, 0.92); border-radius: 20px; box-shadow: 0px 5px 10px 0 rgba(255, 96, 82, 0.5); height: 100%; width: 100%; min-width: 400px;} .tooltip::before {content: " "; position: absolute; top: 50%; left: -11px; margin-top: -6px; border-width: 6px; border-style: solid; border-color: transparent rgba(255, 96, 82, 0.92) transparent transparent;}}.tooltip a,.system-error a {text-decoration: underline; word-break: keep-all; color: #fff;}.tooltip a:hover,.system-error a:hover {opacity: 0.7;}.password {display: inline-block; margin-top: 10px; float: right; clear: both;}.password span {display: block; text-align: right; font-size: 1em !important; letter-spacing: 1px !important;}.link {text-align: center; width: auto; display: table; margin: auto;}.link:hover span {text-shadow: 0px 2px 20px #AAB2FF; color: #9CA6FF;}.link span {font-size: 1.2em; color: #aab2ff; cursor: pointer; letter-spacing: 2px; display: table; margin: auto;}.login-input li button {padding: 12px 50px; display: block; border-radius: 30px; max-width: 160px; background: #aab2ff; font-size: 1.4em; font-weight: bold; color: #f8f8f8; margin: 10px auto;}.login-input li button:hover {box-shadow: 0px 0px 20px 0 rgba(170, 178, 255, 0.5); background: #9CA6FF;}.login-input li button:active{background: #eee;color: #525252; box-shadow: 0px 0px 0px 0 rgba(170, 178, 255, 0);}.proviso {display: block; margin: 30px auto 20px; text-align: left; position: relative; padding-left: 30px;}.proviso::before {position: absolute; left: 0; top: 50%; margin-top: -10px; width: 21px; height: 21px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; font-size: 1.4em; content: "!"; color: #525252; line-height: 1.7em; letter-spacing: 0; font-weight: bold; text-align: center;}.banner {width: 580px; height: 236px; margin: 20px auto; object-fit: fill; object-position: center; border-radius: 20px; overflow: hidden; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);}.banner iframe {width: 100%; height: 100%;}footer {grid-row: 3; -ms-grid-row: 3; -ms-grid-column: 1;}footer span {color: #ccc !important;}.browser {float: left;}.copyright {float: right;}@media screen and (min-width: 500px) and (max-width: 1024px) {.tooltip {left: 0; position: absolute; margin-top: 0; top: 105%; width: auto; z-index: 999;} .tooltip span {width: auto; text-align: center;} .tooltip::before {content: " "; position: absolute; left: 50px; top: -120%; border-width: 6px; border-style: solid; border-color: transparent transparent rgba(255, 96, 82, 0.92) transparent;} footer span {} footer {text-align: center;} footer span {width: 100%; margin: 10px auto;}}@media screen and (min-width: 500px) {.porters-Qr {margin: 16px; padding-left: 90px; background: url(./images/QRCode.png) no-repeat left; background-size: 90px;} .mobile-Qr-name {font-size: 14px;} .mobile-Qr-message span {color: black;} .mobile-Qr-message button {padding: 12px 0px !important; display: block !important; border-radius: 30px !important; max-width: 160px !important; background: #aab2ff !important; font-size: 12px !important; font-weight: bold !important; color: #f8f8f8 !important; margin: 0 0 0 auto !important; width: 55% !important;} .browser-message-mobile {display: none;}}@media screen and (max-width: 500px) {.mobile-Qr-message {display: none;} header span {font-size: 15px;} .login-wrap {min-width: 100% !important; width: 100%; padding: 0; max-width: 100vw; height: 100vh; display: grid; display: -ms-grid; grid-template-rows: 60px 1fr auto; -ms-grid-rows: 60px 1fr auto; -ms-grid-columns: 100%; background-image: url("../pages/login/themes/images/login-bg.jpg"); background-color: #525252; background-position: 50% 0%; background-repeat: no-repeat; background-size: cover; z-index: 0; overflow-x: hidden; overflow-y: scroll;} ::-webkit-scrollbar {display: none;} .porters-logo {margin-left: 0; padding-left: 80px; padding-top: 20px; background: url("../pages/login/themes/images/logo.png") no-repeat left; font-size: 15px; margin-top: 16px; background-size: 90px;} .login-wrap main {grid-row: 2; -ms-grid-row: 2; -ms-grid-column: 1; width: 100%;} .login-input {padding: 60px 24px 0px 24px; position: relative; width: 100%; box-sizing: border-box; margin: 0px;} .login-input li input {margin: 8px 0; font-size: 15px; box-sizing: border-box;} .login-input li div {width: 100%; box-sizing: border-box;} .login-input input {padding: 25px 0 25px 15px; border: 2px solid #fff; border-radius: 100px; width: 100%; text-indent: 10px; color: black;} .tooltip {position: absolute; margin: 300px auto 0 auto; padding: 0 24px 0 24px; color: #fff; box-sizing: border-box; width: 100% !important; text-align: center; min-width: auto; left: 0; top: 0;} .tooltip span {box-sizing: border-box; border: 4px #D80000 solid; padding: 13px 0; background: #D80000; border-radius: 40px; box-shadow: 0px 5px 10px 0 rgba(255, 96, 82, 0.5); font-size: 13px; text-align: center; display: inline-block; width: 100%;} .tooltip::before {display: none;} .password span {display: block; text-align: right; font-size: 15px !important; letter-spacing: 1px !important;} .link span {font-size: 15px; color: #aab2ff; cursor: pointer; letter-spacing: 2px; display: table; margin: auto;} .login-input li button {padding: 12px 50px; display: block; border-radius: 100px; max-width: 100%; background: #aab2ff; font-size: 15px; font-weight: bold; color: #f8f8f8; margin: 16px auto;} .proviso {display: block; margin: 100px auto 16px; text-align: left; position: relative; font-size: 10px; padding-left: 40px;} .proviso::before {position: absolute; left: 0; top: 50%; margin-top: -10px; width: 21px; height: 21px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; font-size: 1.4em; font-size: 1.6em; content: "!"; color: #525252; line-height: 1.5em; letter-spacing: 0; font-weight: bold; text-align: center;} .input-error input, .input-error input:hover, .input-error input:focus {border: 2px #D80000 solid;} .banner {width: 90%; height: 180px; margin: 20px auto; object-fit: fill; object-position: center; border-radius: 30px; overflow: hidden; box-shadow: 0 0 20px 0 rgb(0 0 0 / 60%); display: none;} footer {grid-row: 3; -ms-grid-row: 3; -ms-grid-column: 1; margin-left: 5%; margin-right: 5%; display: flex; flex-flow: column;} .browser {font-size: 10px; text-align: center;} .browser-message {display: none;} .copyright {font-size: 10px; text-align: center; margin-top: 16px;}}.loader-wrap {width: 100%; height: 100%; display: flex; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.6); position: absolute; z-index: 999;}.loader {top: 50%; left: 50%; margin-top: -0.75em; margin-left: -3.1em; position: absolute; text-align: center;}.loader span {width: 1.5em; height: 1.5em; display: inline-block; margin-left: 0.6em; background-color: #aab2ff; border-radius: 10px; -webkit-animation: blinkAnime1 0.6s infinite alternate; -moz-animation: blinkAnime1 0.6s infinite alternate; -ms-animation: blinkAnime1 0.6s infinite alternate; -o-animation: blinkAnime1 0.6s infinite alternate; animation: blinkAnime1 0.6s infinite alternate; cursor: default;}div.loader span:nth-child(2) {animation-delay: 0.3s;}div.loader span:last-child {animation-delay: 0.6s;}@keyframes blinkAnime1 {0% {opacity: 1;} 100% {opacity: 0.2;}}::-webkit-scrollbar {width: 10px !important; height: 10px !important;}::-webkit-scrollbar-track {background: transparent !important; z-index: 999 !important;}::-webkit-scrollbar-thumb {background-color: #f8f8f8 !important; border-radius: 50px !important; z-index: 999 !important;}