/**********************************************************
 sub_head
***********************************************************/
.banner { position: relative; z-index: 2; }
.sub-banner { width: 100%; height: 440px; background-color: transparent; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden; }
.sub-banner-bg { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-animation: bannerAni 1.5s both; animation: bannerAni 1.5s both; }

@-webkit-keyframes bannerAni {
 0% { -webkit-transform: scale(1.4); transform: scale(1.4); }

 100% { -webkit-transform: scale(1); transform: scale(1); }
 }

@keyframes bannerAni {
 0% { -webkit-transform: scale(1.4); transform: scale(1.4); }

 100% { -webkit-transform: scale(1); transform: scale(1); }
 }

@-webkit-keyframes fade {
 0% { opacity: 0}

 100% { opacity: 1}
 }

@keyframes fade {
 0% { opacity: 0}

 100% { opacity: 1}
 }

@-webkit-keyframes fadeUp {
 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px)}

 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
 }

@keyframes fadeUp {
 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px)}

 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)}
 }

.sub-img,
.sub-img-title { margin-top: 46px; -webkit-animation: fadeUp 0.5s linear both; animation: fadeUp 0.5s linear both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.sub-img { max-width: 80%; margin-bottom: 20px; }
.sub-img-title { padding: 20px; text-align: center; text-transform: uppercase; font-size: 72px; font-weight: bold; }
.sub-banner-title { z-index: 2; line-height: 1.7; text-align: center; word-break: keep-all; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--text-base); -webkit-animation: fadeUp 0.5s linear both; animation: fadeUp 0.5s linear both; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.sub-banner-title>img { margin-left: 5px; width: 36px; }
.sub-location { width: 100%; height: 86px; background-color: #fff; border-bottom: 1px solid #efefef; -webkit-animation: fade 0.5s linear both; animation: fade 0.5s linear both; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.sub-location-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; }
.sub-location-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; height: 100%; border-left: 1px solid #efefef; }
.sub-location-item:last-of-type { border-right: 1px solid #efefef; }
.sub-location-link { position: relative; font-size: 20px; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 600; }
.sub-location-link>img { width: 41px; }
.sub-location-link:hover,
.sub-location-link.active { color: var(--main-color); font-weight: 600; }
.sub-location-link::after { content: ''; position: absolute; bottom: 0; left: 0; display: inline-block; width: 100%; height: 2px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform: scaleX(0); transform: scaleX(0); background: var(--main-color); -webkit-transform-origin: right; transform-origin: right; }
.sub-location-link:hover::after,
.sub-location-link.active::after { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; }
.sub-content { overflow: hidden; -webkit-animation: fade 0.5s linear both; animation: fade 0.5s linear both; -webkit-animation-delay: 1s; animation-delay: 1s; }

/* mo */
.sub-location.mobile { display: none; }

/* top */
.top-btn { color: #fff; font-size: var(--text-md); font-weight: bold; position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 52px; height: 52px; background-color: var(--main-color); border-radius: 50%; bottom: 60px; right: 60px; z-index: 6; }
.top-btn:hover { -webkit-animation: topBtn infinite 1s; animation: topBtn infinite 1s; }

@-webkit-keyframes topBtn { 0%, 75% { bottom: 60px; }

 15%, 45% { bottom: 55px; }

 30%, 60% { bottom: 65px; }
 }

@keyframes topBtn { 0%, 75% { bottom: 60px; }

 15%, 45% { bottom: 55px; }

 30%, 60% { bottom: 65px; }
 }

/**********************************************************
 responsive
***********************************************************/
@media screen and (max-width: 1023px){
 .sub-img-title { padding: 0 20px; font-size: 48px; }
 .sub-location { display: none; }

 /* mo */
 .sub-location.mobile { display: -webkit-box; display: -ms-flexbox; display: flex; height: 50px; }
 .sub-location.mobile>div { cursor: pointer; position: relative; width: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 2px solid transparent; }
 .sub-location.mobile>div:first-of-type { border-right: 1px solid #efefef; }
 .sub-location.mobile>div.active { color: var(--main-color); border-bottom-color: var(--main-color); }
 .sub-location.mobile>div>p { text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; padding: 10px; cursor: pointer; font-weight:bold; }
 .sub-title-grip { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 800; color: var(--main-color); }
 .sub-location.mobile>div>p img { width: 38px; margin-bottom: 2px; }
 .sub-location.mobile>div>p::after { color: #818186; content: '\f107'; font-family: fontawesome; font-size: 18px; font-weight: bold; margin-right: 10px; }
 .sub-location.mobile>div.active>p::after { color: var(--main-color); }
 .sub-location.mobile>div>ul { position: absolute; -webkit-box-shadow: 0px 0px 10px #ccc; box-shadow: 0px 0px 10px #ccc; width: 100%; left: 0; top: 50px; background: #fff; }
 .sub-location.mobile>div>ul>li>a { display: block; padding: 10px; font-size: var(--font-sm); font-weight:bold; }
 .sub-location.mobile>div>ul>li>a img { width: 35px; vertical-align: baseline; }
 .top-btn { bottom: 20px; right: 20px; }
 .top-btn:hover { -webkit-animation: none; animation: none; }
 }

@media screen and (max-width: 639px){
 .sub-banner { height: 336px; }
 .sub-img, .sub-img-title { margin-top: 23px; }
 }

@media screen and (max-width: 480px) {
 .sub-location.mobile>div>p img,
 .sub-location.mobile>div>ul>li>a img { width: 29px; }
 .sub-img-title { font-size: 32px; }
 .sub-banner-title { font-size: 12px; padding: 0 10px; }
 .sub-location.mobile>div>p { font-size: 12px; }
 .sub-location.mobile>div>p::after { font-size: 14px; margin-right: 5px; }
 }