

/*--------------------------------------------------------------*/
/*  Article, Layout
/*--------------------------------------------------------------*/

/*article*/
.article{display: flex;flex-wrap: wrap;justify-content: center;margin:20px auto 70px auto;min-width:320px;}
.article-header{box-sizing: border-box;margin:20px auto 50px auto;width:80%;padding:0 0;}
.article-hr{display:block;border:none;width:100%;height:35px;background:url(../images/page-hr.png);}
.article-title{margin:0;font-weight:normal;font-size: 1.8em;color:#333;}
.article-title span{font-size:1.7rem;color:#333;}
.article-subtitle{margin-bottom:10px;font-weight:normal;font-size: 1.7rem;color:#333;}
.article-content{box-sizing: border-box;margin:0 auto;width:95%;padding:0 0;font-size: 1.2rem;line-height:2rem;text-align: justify; text-justify: inter-ideograph;}
.article-content h2{margin-bottom: 30px;color:#333;font-size: 1.5em;font-weight: 800;}
.article-content h2 span{display: inline-block;border-bottom: 3px solid var(--color2);padding-bottom: 4px}
.article-content h3{color:#333;font-size:1.5rem}
.article-content hr{display:block;border:none;width:100%;height:35px;background:url(../images/page-hr.png);}
.article-content img{width: 100%;}
.article-content .article-p:last-child{margin-bottom:0;}
.article-content .fa-external-link{color:#333;}
.article-content-googlemap{margin-top: 36px;border-radius: 12px;border: 1px solid rgba(0,0,0,.1);width: 100%;height: 400px;}
.article-content-tab{display: flex;justify-content: center;align-items: center;margin:60px 0 40px 0;padding:0;list-style:none;color:#999;font-size:1rem;}
.act-item{margin:0 16px;font-size:1.1rem;font-weight: bold;cursor: pointer;}
.act-item.active{border-bottom: 3px solid var(--article-nav)}
.article-info{display: flex;flex-wrap:wrap;align-items:center;margin-top: 10px;margin-bottom: 20px;}
.article-info{color:#999;font-size:.9rem;}
.article-info div{margin-right: 20px;}

/*--------------------------------------------------------------*/
/*  login
/*--------------------------------------------------------------*/

.login{margin:0 auto;border-radius: 16px!important;background: var(--color2)!important;}
.login-join{margin-top:10px;}
.login-password{position: relative;}
.login-password-show{position: absolute;top:calc(50% - 5px);right:10px;transform: translateY(-50%);cursor:pointer;}
.login-captcha {align-items: stretch;margin-bottom: 30px;}
.login-captcha .excaptcha{margin-left: 5px;}
.login-captcha-input {width:50%;max-width:100px;}

/*ui*/
.ui-input{display:inline-block;box-sizing:border-box;border-radius:4px;border:1px solid #ddd;outline:none;padding:10px 16px;background:#fff;font-size:1.2rem;}
.ui-input.disabled{background:var(--color2)!important;}
.ui-select{display:inline-block;box-sizing:border-box;border-radius:4px;border:1px solid #ddd;outline:none;padding:10px 16px;background:#fff;font-size:1.2rem;}
.ui-option-first{color: #999;}
.ui-option-disabled{color: #999; text-decoration:line-through}
.ui-link{text-decoration: none;color:#666;}
.ui-link:hover{text-decoration: underline;color:var(--text-primary);}
.ui-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content: center;border:none;border-radius:24px;padding:8px 20px;background:var(--color1);color:#fff;font-size:1.2rem;font-weight: bold;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn:hover{background:var(--color1-hover);}
.ui-btn .fa{margin-left: 6px;border-radius: 50%;width:18px;height: 18px;line-height: 18px;background:#fff;text-align: center;font-size:.7rem;color: var(--color1);transition: .2s}
.ui-btn-secondary{box-sizing:border-box;display:inline-block;border:none;border-radius:3px;padding:8px 20px;background:var(--btn-secondary);color:#fff;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn-secondary:hover{background:var(--btn-secondary-hover);}
.ui-btn-white{display:inline-flex;align-items:center;justify-content: center;border:none;border-radius: 20px;padding: 6px 16px;color:#777;text-decoration: none;font-size: 1rem;line-height: 1.4rem;white-space: nowrap;background: #fff;transition: 0.2s;curson:pointer}
.ui-btn-white:hover{text-decoration: none;color:#fff;background: var(--color1)}
.ui-btn-white:hover .fa{margin-left: 12px;text-decoration: none;color:var(--color1);background: #fff}
.ui-btn-white span{font-weight: bold;}
.ui-btn-white .fa{margin-left: 6px;border-radius: 50%;width:18px;height: 18px;line-height: 18px;background:#777;text-align: center;font-size:.7rem;color: #fff;transition: .2s}
.ui-btn.disabled{background:#ccc;}
.ui-btn-light{box-sizing:border-box;display:inline-block;border:none;border:2px solid #aaa;border-radius:24px;padding:6px 16px;background:#fff;color:#999;font-size:1.2rem;text-decoration: none;cursor:pointer;transition: .2s}
.ui-btn-light:hover{background:#aaa;color:#fff;}
.ui-btn-gray{box-sizing:border-box;display:inline-block;border:none;border-radius:24px;padding:8px 20px;background:#ccc;color:#fff;font-size:20px;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-btn-gray:hover{background:#999;}
.ui-btn-info{border: 1px solid rgba(0,0,0,0.2);padding:7px 25px;border-radius:30px;color:#333;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-info-white{border: 1px solid rgba(255,255,255,.2);padding:7px 25px;border-radius:30px;color:#fff;font-size: 1.1em;text-decoration: none;transition: 0.2s}
.ui-btn-info-white:hover{border:1px solid #25a5d7;background: #25a5d7;color: #fff}
.ui-btn-favorite{border:none;border-radius: 4px;margin-right: -4px;;padding:4px 4px;color: #999;background: none;font-size: 1.2rem;cursor:pointer}
.ui-btn-favorite.active:after{content:"\f004";color: var(--color1)}
.ui-btn-favorite:after{content:"\f08a";font-family:"FontAwesome";}
.ui-btn-favorite:hover:after{color: var(--color1)}
.ui-btn-border{box-sizing:border-box;display:inline-block;border:2px solid var(--color1);border-radius:24px;padding:8px 20px;font-size:1.2rem;font-weight: bold;text-decoration: none;cursor:pointer;transition: .2s;}
.ui-file{padding:10px;border:1px dashed #ccc}

@media screen and (max-width: 768px) {
  .ui-btn-shine{padding:10px 24px;font-size:1rem;}
}

@media screen and (max-width: 640px) {
  .ui-btn{padding:6px 16px;font-size:1.1rem}
}

/*form*/
.ui-form{display: flex;justify-content: space-between;flex-wrap: wrap;margin:0;padding:0;list-style:none}
.ui-form-item{}
.ui-form-title{margin-bottom:18px;width:100%;padding:10px;text-align:center;background: var(--ui-form-title);color:#fff;}
.ui-form .ui-form-control{;width:100%}
.ui-form .ui-label{display:block;margin-bottom:5px;color:#999;font-size:16px;}
.ui-form .half{width: calc(50% - 8px);}
.ui-form .warning{color:#f3ea00;}
.ui-form hr{margin-bottom:16px;}
.ui-form-foot{margin-top:20px}
.ui-form-control{display:flex;flex-wrap:wrap;align-items: center;margin-bottom: 10px}
.ui-form-control .ui-input,.ui-form-control .ui-select{width:100%;}

@media screen and (max-width: 480px) {
  .ui-form .half{width:100%;}
  .ui-form-control {margin-bottom:10px;}
  .ui-form-control .ui-input{margin-bottom:10px;}
  .ui-form-control .ui-input:last-child{margin-bottom:0;}
  .ui-form-control .ui-input,.form-control .ui-select{width:100%;}
}


/*popup*/
.popup{box-sizing:border-box;width:60%;max-width:600px;min-width:300px;border-radius:0px;background:#fff;}
.popup-container{padding:40px 30px;}
.popup-header{padding:0px 30px 30px 30px;text-align: center}
.popup-footer{padding:20px 0;background:#eee;text-align: center}
.popup-title{margin:0;color:#005dc7;font-size:24px;vertical-align: middle}
.popup-title img{vertical-align: middle}
.popup-close{position:absolute;top:20px;right:20px;color:#bbb;font-size:20px;}

@media screen and (max-width: 1024px) {
  .popup{width:70%;}
}

@media screen and (max-width: 768px) {
  .popup{width:80%;}
}

@media screen and (max-width: 480px) {
  .popup{width:100%;height:100%;}
}


/*clear*/
.clear-left{clear:left;}
.clear-right{clear:right;}
.clear-both{clear:both;width:100%}
.clear-fix{clear:both;}
.clear-fix:after{content:".";clear:both;display:block;font-size:0;height:0;line-height:0;visibility: hidden;}
