@charset "utf-8";

.department-box.dept-margin {margin-top: 15px;}
.department-box {position: relative; margin-top: 80px;}
.department-box ul {display: flex; flex-wrap:wrap; margin:0 -20px;}
.department-box li {width:25%; padding:0 20px; margin-bottom: 20px; min-height:110px;}
.department-box li .box {border:1px solid #ccc; position: relative; min-height:110px; display: flex; align-items: center; }
.department-box li a { padding:0 30px;display: flex; justify-content: center; flex-direction: column; min-height:170px; width: 100%; height: 100%;}
.department-box strong {display: inline-block; font-size: 19px; font-family: 'HG Medium'; color:#000; position: relative; line-height:1.5; padding-left:30px; word-break: break-all; margin-bottom: 5px;}
.department-box .a {padding:0 30px; min-height:170px; width:100%;display: flex; justify-content: center; flex-direction: column;}
.department-box .a > strong {padding-left: 0 !important;}
.department-box a > strong {align-self:start; padding-left:0 !important;}
.department-box a > strong span {background: linear-gradient(to bottom, transparent 97%, #00B6AD 0) left center no-repeat; background-size:0; transition: background-size .5s;}
.department-box a > strong span::after {content:''; display: inline-block; background:url('../../images/sub/dept/icon-blank.png') no-repeat right center;  margin-left: 25px; width: 11px; height: 11px;}
.department-box strong::before {content:''; width:0%; height:1px; background:#00B6AD; position: absolute; left: 0; bottom:0; transition: width .3s;}
.department-box .tel {line-height: 30px; margin-top: 20px; font-family: 'HG Regular'; font-size: 15px; color:#555}
.department-box .tel span {display: inline-block; font-family: 'HG Medium';font-size: 15px;color: #000;position: relative;padding-left: 40px;padding-right: 14px;margin-right: 15px; }
.department-box .tel span::after {content: '';width: 1px;height: 9px;background: #ccc;position: absolute;right: 0;top: 50%;margin-top: -4px;}
.department-box .tel span::before {content: '';width: 30px;height: 30px;background: #F0FFFE url('../../images/sub/dept/icon-tel2.png') no-repeat center;border-radius: 50%;position: absolute;left: 0; filter: grayscale(1) contrast(0.8); transition:transform .3s;}
.department-box .box a:hover {box-shadow:0px 0px 20px rgba(0,182,173,0.1);}
.department-box a:hover::after {content:''; border:2px solid #00B6AD; position: absolute; top:-1px;; left:-1px; right:-1px; bottom:-1px;}
.department-box a:hover strong {color: #00B6AD;}
.department-box a:hover strong span {background-size:100% auto;}
.department-box a:hover > strong span::after {background:url('../../images/sub/dept/icon-blank-on.png') no-repeat right center;}
.department-box a:hover .tel span::before {filter: grayscale(0) contrast(1);}

@media screen and (max-width:1300px) {
    .department-box {margin-top: 50px;}
    .department-box li {width:33.3333%;}
    .department-box li a {min-height: 140px;}
}
@media screen and (max-width:1000px) {
    .department-box ul {margin:0 -10px;}
    .department-box li {padding:0 10px;}
    .department-box strong {padding-left:15px;}
    .department-box li .a  {padding:0 15px; min-height:150px;}
    .department-box li a {padding:0 15px; min-height:130px;}
    .department-box strong {font-size: 17px;}
}
@media screen and (max-width:850px) {
    .department-box li {width:50%;}
}
@media screen and (max-width:600px) {
    .department-box {margin-top: 30px;}
    .department-box li {width:100%;}
    .department-box li a {min-height:110px;}
}


.dept-list-wrap {position: relative; margin-top: 80px;}
.dept-list-wrap .box-list {display: flex; flex-wrap:wrap; margin:0 -20px;}
.dept-list-wrap .box-list > li {width:50%; padding:0 20px; margin-bottom: 30px;}
.dept-list-wrap .li-frame {border:5px solid #eee; border-radius:5px; padding:30px 35px 25px 35px; height: 100%; background:url('../../images/sub/dept/obj-bg.png') no-repeat right -73px bottom -8px;}
.dept-list-wrap .title {display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; margin-bottom: 25px;}
.dept-list-wrap .title strong {font-size: 24px; line-height: 1; color:#333; font-family: 'SBA Medium';}
.dept-list-wrap .list1 > ul {display: flex; flex-wrap:wrap; margin:0 -10px;}
.dept-list-wrap .list1 > ul > li {width:50%; display: flex; justify-content: space-between; align-items: center; padding:0 10px; margin-bottom: 5px;}
.dept-list-wrap .list1 .box {position: relative; padding-left:15px; font-size: 0;}
.dept-list-wrap .list1 .box::before {content:''; width: 6px; height:6px; background:#c8c8c8; border-radius:50%; position: absolute; left:0; top:50%; margin-top:-3px;}
.dept-list-wrap .list1 em {display: inline-block; font-size: 16px; color: #555; position: relative;}
.dept-list-wrap .list1 span {font-size: 14px; display: inline-block; color:#888; padding-left:12px; margin-left:14px; position: relative;}
.dept-list-wrap .list1 span::after {content:''; width:2px; height:9px; background:#ccc; position: absolute; left:0; top:6px;}
.dept-list-wrap .service-link {display: inline-block;width: 40px; height: 40px; border-radius: 3px; background-color: #999999; background-repeat: no-repeat; background-position: center center; background-image: url(/sites/guide/images/guide/home_icon.png); text-indent: -9999px;}
.dept-list-wrap .service-link:hover{background-color: #0066b5;}
.dept-list-wrap .list2 {position: relative;font-size: 0;}
.dept-list-wrap .tel {font-size: 15px; color:#000; position: relative; display: inline-block; padding-right:14px; margin-right:12px; padding-left:40px;  line-height: 30px;}
.dept-list-wrap .tel::before {content:''; width:30px; height:30px; background:#eee url(../../images/sub/dept/icon-tel.png) no-repeat center; position: absolute; left:0; top:0; border-radius:50%;}
.dept-list-wrap .tel::after {content:''; width:2px; height:9px; background:#ccc; position: absolute; right:0; top:11px;}
.dept-list-wrap .list2 span {display: inline-block; font-size: 15px; color:#555;}

@media screen and (max-width: 1500px) {
    .dept-list-wrap .list1 > ul > li {width:100%;}
}
@media screen and (max-width: 1200px) {    
    .dept-list-wrap {margin-top:50px;}
    .dept-list-wrap .li-frame {padding: 20px 25px 15px 25px;}
    .dept-list-wrap .title strong {font-size: 20px;}
    .dept-list-wrap .box-list {margin:0 -10px;}
    .dept-list-wrap .box-list > li {padding:0 10px;}
}
@media screen and (max-width: 768px) {
    .dept-list-wrap {margin-top: 30px;}
    .dept-list-wrap .li-frame {min-height:auto; padding:15px 25px;}
    .dept-list-wrap .title {margin-bottom:20px;}
    .dept-list-wrap .box-list > li {width:100%; margin-bottom: 20px;}
    .dept-list-wrap .list1 em {font-size: 15px;}
    .dept-list-wrap .list1 em::after {top:7px;}
}