/*! Bootstrap v4.0.0 (https://getbootstrap.com) Copyright 2011-2018 The Bootstrap Authors Copyright 2011-2018 Twitter, Inc. Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */
.login .jumbovisual { background-image: url(../img/main_visual_logedin.jpg); -webkit-background-size: 140% auto; background-size: 140% auto; }

@media (min-width: 768px) { .login .jumbovisual { -webkit-background-size: cover; background-size: cover; } }

.jumbovisual::before { background-color: rgba(0, 0, 0, 0.5); }

.logged-in .jumbovisual::before { background-color: transparent; }

.jumbovisual-txt { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; width: 50%; }

@media (min-width: 576px) { .jumbovisual-txt { width: 33.66667%; } }

.jumbovisual-arrow { position: absolute; bottom: 1%; max-width: 70px; width: 8.5396%; height: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

@media (min-width: 576px) { .jumbovisual-arrow { bottom: 3%; width: 5.75%; } }

@media (min-width: 768px) { .jumbovisual-arrow { bottom: 1%; } }

@media (min-width: 992px) { .jumbovisual-arrow { bottom: 2%; } }

@media (min-width: 1200px) { .jumbovisual-arrow { bottom: 4%; } }

.hnky-header-login { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.9); max-width: 58.6rem; padding: 2.0rem 3.0rem; margin: 0 auto; text-align: center; }

.loged-in .hnky-header-login { display: none; }

@media (min-width: 576px) { .hnky-header-login { padding: 4.0rem 6.0rem; } }

.hnky-header-login .ttl { font-size: 1.2rem; line-height: 1; }

.hnky-header-login .ttl > img { width: 26.27986%; height: auto; }

.hnky-header-login .txt { font-size: 1.1rem; line-height: 1.76923; margin-top: 1.4rem; font-weight: bold; }

@media (min-width: 576px) { .hnky-header-login .txt { margin-top: 2.5rem; font-size: 1.3rem; } }

.hnky-header-login .btn-round { width: 85%; }

@media (min-width: 576px) { .hnky-header-login .btn-round { width: 52.94118%; } }

.col-left { position: relative; width: 100%; min-height: 1px; padding-right: 29px; padding-left: 29px; }

@media (min-width: 768px) { .col-left { -webkit-box-flex: 0; -webkit-flex: 0 0 53.29545%; -ms-flex: 0 0 53.29545%; flex: 0 0 53.29545%; max-width: 53.29545%; } }

.col-right { position: relative; width: 100%; min-height: 1px; padding-right: 29px; padding-left: 29px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

@media (min-width: 768px) { .col-right { -webkit-box-flex: 0; -webkit-flex: 0 0 46.70455%; -ms-flex: 0 0 46.70455%; flex: 0 0 46.70455%; max-width: 46.70455%; } }

.content-detail { margin-top: 4.0rem; }

.content-search-img, .content-catalog-img { display: block; max-width: 100%; margin-left: auto; margin-right: auto; height: auto; padding-bottom: 2.6rem; }

@media (min-width: 768px) { .content-search-img { margin-right: -3.7rem; padding-bottom: 0; } }

@media (min-width: 768px) { .content-catalog-img { margin-right: -4.0rem; padding-bottom: 0; } }

.login .modal-content { padding-bottom: 4.3rem; }

.login .modal-header { padding-top: 2.4rem; padding-left: 2.9rem; padding-right: 2.9rem; border-bottom: none; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.login .modal-title { font-size: 1.4rem; color: #ea5e00; width: 100%; text-align: center; }

@media (min-width: 576px) { .login .modal-title { font-size: 1.8rem; } }

.login .modal-body { padding: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }

@media (min-width: 768px) { .login .modal-body::before { content: ''; display: block; position: absolute; width: 0; height: 96%; top: 50%; left: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-left: 1px dotted #979797; background-color: #dfdfdf; } }

.login .modal-col { position: relative; width: 100%; min-height: 1px; padding-right: 29px; padding-left: 29px; }

@media (min-width: 576px) { .login .modal-col { padding-right: 58px; padding-left: 58px; } }

@media (min-width: 768px) { .login .modal-col { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } }

.login .modal-body2 { position: relative; width: 100%; min-height: 1px; padding-right: 29px; padding-left: 29px; margin-left: auto; margin-right: auto; }

@media (min-width: 576px) { .login .modal-body2 { padding-right: 58px; padding-left: 58px; } }

@media (min-width: 768px) { .login .modal-body2 { max-width: 49.42857%; padding-right: 0; padding-left: 0; } }

.login-form { color: #4d4d4d; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

.login-form .ttl { font-size: 1.6rem; line-height: 1.75; }

.login-form .lead { font-size: 1.4rem; line-height: 1.57143; margin-bottom: 1.4rem; }

.login-form .input { margin-top: 0.7rem; position: relative; }

.login-form .input input { color: #808080; display: block; width: 100%; padding: 0.9rem; font-size: 1.4rem; line-height: 1.5; background-color: #f2f2f2; -webkit-background-clip: padding-box; background-clip: padding-box; border: none; border-radius: 0.5rem; -webkit-box-shadow: none; box-shadow: none; }

.login-form .input input:focus { outline: 0; }

.login-form .input.input-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

.login-form .input.input-grid input { /*-webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0;*/ -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; width: 0; }

.login-form .input.input-grid input:nth-of-type(1) { margin-right: 3px; }

.login-form .input.input-grid input:last-child { margin-left: 3px; }

.login-form .input.input-required { margin-top: 2.4rem; }

.login-form .input.input-required .required { background-color: #fe0000; color: white; display: block; font-size: 0.71429em; line-height: 1.5; position: absolute; white-space: nowrap; padding: 0 3px; left: 0; bottom: 100%; margin-bottom: .3rem; }

@media (min-width: 768px) { .login-form .input.input-required .required { left: auto; bottom: auto; margin-bottom: 0; margin-right: 7px; right: 100%; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } }

.login-form .privacy { width: 100%; border: 2px solid #ccc; border-radius: 6px; margin-top: 2.0rem; padding: 7px 7px 10px; font-size: 1.1rem; line-height: 1.54545; }

@media (min-width: 768px) { .login-form .privacy { width: 156.97674%; margin-left: -28.48837%; margin-right: -28.48837%; } }

.login-form .txtlink, .login-form .checkbox { line-height: 1.25; font-size: 1.2rem; }

.login-form .txtlink label, .login-form .checkbox label { text-decoration: underline; }

.login-form .txtlink input[type=checkbox], .login-form .checkbox input[type=checkbox] { margin-right: 8px; outline: none; }

.login-form .txtlink .checkbox-txt, .login-form .checkbox .checkbox-txt { margin-left: 0.6rem; }

.login-form .txtlink a, .login-form .txtlink span, .login-form .checkbox a, .login-form .checkbox span { display: inline-block; color: #4d4d4d; border-bottom: 1px solid; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }

.login-form .txtlink a:hover, .login-form .txtlink span:hover, .login-form .checkbox a:hover, .login-form .checkbox span:hover { opacity: 0.65; text-decoration: none; }

.login-form label { margin-bottom: 0; }

@media (min-width: 768px) { .login-form .btn-block { width: 67.63006%; margin-left: auto; margin-right: auto; } }