@charset 'utf-8';

.visual-wrap, section { margin: 0 auto; max-width: 1800px;}

main p { margin: 0; word-break: keep-all;}
main section { position: relative;  padding: 100px 10px 0; max-width: 1800px;}
main section h2 { font-size: 18px; font-weight: 500; color: #015a9c;  }
main section h2+p { padding: 25px 0 45px; font-size: 45px; font-weight: 500; color: #333; line-height: 1.2; }
main ul {padding: 0; margin: 0;}
main ul li {list-style: none;}


@media (max-width:1199px){
    main section { padding: 90px 0px 0; }
    
}
@media (max-width:991px){
    main section { padding: 80px 0px 0; }
    main section h2+p { font-size: 40px; }
}
@media (max-width:768px){
    main section { padding: 70px 0px 0; }
    main section h2+p { padding: 18px 0 35px;  font-size: 30px; }
}
@media (max-width:576px){
    main section { padding: 60px 0px 0; }
    main section h2+p { font-size: 28px;}
}
@media (max-width:480px){
    main section { padding: 50px 0px 0; }
    main section h2+p {  padding: 15px 0 35px; font-size: 26px;}
}


.notice { overflow: hidden; position: relative;}
.notice:after {content:''; display: block; position: absolute; right: 0; top: 5%; width: 511px; height: 511px; background: url('/data/main/rotate_txt.png') no-repeat center / contain; animation:rotate 90s infinite linear both}
.notice .at-container { position: relative; z-index: 2;}
.notice a.more { display: block; position: relative; margin: 50px auto 10px; width: 120px; height: 26px; font-size: 18px; line-height: 26px; color: #333; box-sizing: content-box;}
.notice a.more:before { content:''; display: block; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 0; height: 2px; background: #333;  transition: .2s;}
.notice a.more:after { content:'+'; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 26px; height: 26px; background: #333; color: #fff; border-radius: 50%; }
.notice a.more:hover:before { width: 120%; }
.notice a.more:hover:after { background: #062d53; }
.notice svg { position: absolute; top: -20%; right: -8%; height: 870px;}    
.notice svg text { font-size: 28px; font-weight: 500;  fill: #eee; letter-spacing:-0.05em; }

@keyframes rotate {
    0% { transform:rotate(0)}    
    100% { transform:rotate(360deg)}
}
  


@media (max-width:1500px){
    .notice svg { right: -15%; height: 800px; }
}
@media (max-width:1199px){
    
    .notice a.more  { margin: 80px auto 0; }
    .notice svg { display: none;}
}
@media (max-width:991px){
    .notice a.more  { margin: 65px auto 0; }
}
@media (max-width:768px){
    .notice a.more  { margin: 50px auto 0; }
}
@media (max-width:576px){
    .notice a.more  { margin: 45px auto 0; }
    .notice:after { display: none;}
}
@media (max-width:480px){
    .notice a.more  { margin: 30px auto 0; }
}

.business { padding-left: 0; padding-right: 0;}
.business h3 { font-size: 45px; font-weight: 500; color: #fff; line-height: 1; }
.business h3+p {padding: 25px 0 30px; font-size: 18px; font-weight: 300; color: #fff; }


.business .bus { padding: 8.3333%; width:50%; background: url('/data/main/bg_bus.jpg') no-repeat center /cover;}
.business .bus ul { display: flex; padding: 15px 0 0; flex-wrap: wrap; margin: -5px; }
.business .bus ul li {  margin: 5px; width: 160px; height: 160px; ;}

.business .bus ul li a { display: flex; justify-content: center; align-items: center; padding: 0 5px; height: 100%; text-align: center; word-break: keep-all; color: #fff;  border:1px solid #fff; transition: .2s;}
.business .bus ul li a:hover { background: rgba(0,0,0,.5);}
.business .bus ul li a:hover { background: rgba(0,0,0,.5);}

.business .box { width: 50%; flex-direction: column; }
.business .box .it, 
.business .box .service { flex:auto; padding: 11.1111% 7.7777%; background-repeat: no-repeat; background-position: center; background-size: cover;}
.business .box .it {  background-image: url('/data/main/bg_it.jpg') ;}
.business .box .service { background-image: url('/data/main/bg_service.jpg') ;}
.business .box a { display: flex; justify-content: center; align-items: center; width: 220px; height: 50px; background: #eee; color: #333; border-radius: 25px; transition: .3s;}
.business .box a:hover { background: #ccc;}

.business .box .it h3,
.business .box .it h3 + p { color: #333;}
@media (min-width:992px){
    .business .bus ul li:nth-of-type(2) {margin-right: 150px;}
}
@media (max-width:1500px){
    .business .bus { padding: 8.3333% 4%; }
}
@media (max-width:1199px){
    .business .bus ul li { width: 132px; height: 132px; }
}
@media (max-width:991px){
    .business h3 { font-size: 42px;}
    .business .wrap { flex-direction: column;}
    .business .wrap .bus { padding: 60px 40px; width: 100%;}
    .business .wrap .box { flex-direction: row; width: 100%; }
    .business .bus ul li { flex:1 }
    .business .box .it, 
    .business .box .service {  padding: 60px 40px; width: 50%;}
}
@media (max-width:768px){
    .business h3 { font-size: 32px;}
    .business .box a { width: 160px;  height: 44px; border-radius: 22px;} 
    .business .wrap .bus { padding: 60px 30px; }
    .business .box .it, 
    .business .box .service {  padding: 60px 30px; }
}
@media (max-width:576px){
    .business h3 { font-size: 30px;}
    .business h3+p { padding: 15px 0 20px; font-size: 15px;} 
    .business .wrap .bus { padding: 50px 25px; }
    .business .wrap .box { flex-direction: column; }
    .business .box .it, 
    .business .box .service { padding: 50px 25px; width: 100%;}
}
@media (max-width:480px){    
    .business .wrap .bus { padding: 40px 15px;}
    .business .wrap .bus ul { justify-content: space-between;}
    .business .wrap .bus ul li { flex:auto; }
    .business .wrap .box { flex-direction: column; }
    .business .wrap .box a { margin: 0 0 0 auto; }
    .business .box .it { background-position: left center;}
    .business .box .it, 
    .business .box .service { padding: 40px 15px; width: 100%;}
}

.contact { padding-left: 0; padding-right: 0; max-width: 100%;}
.contact .link { margin: 0 -15px;}
.contact .link a { display: flex; justify-content:center; align-items: center; flex:1; position: relative; margin: 0 15px; height: 120px; background: #f8f8f8; font-size: 24px; color: #111; font-weight: 400; transition: .1s;}
.contact .link a:hover { background: #0a294c; color: #fff; }

.contact .link a:before { content:''; padding: 0 20px 0 0; height: 30px; background-position: left center; background-repeat: no-repeat; background-size: contain; box-sizing: content-box;}
.contact .link a:nth-of-type(1):before { width: 23px; background-image: url('/data/main/ico_location.png');}
.contact .link a:nth-of-type(2):before { width: 30px; background-image: url('/data/main/ico_contact.png');}
.contact .link a:nth-of-type(3):before { width: 38px; background-image: url('/data/main/ico_remote.png');}
.contact .link a:nth-of-type(1):hover:before { width: 23px; background-image: url('/data/main/ico_location_hover.png');}
.contact .link a:nth-of-type(2):hover:before { width: 30px; background-image: url('/data/main/ico_contact_hover.png');}
.contact .link a:nth-of-type(3):hover:before { width: 38px; background-image: url('/data/main/ico_remote_hover.png');}

/* .contact .bg { margin: -60px 0 0; height: 300px; background: url('/data/main/bg_location.jpg') no-repeat center / cover;;} */
.contact .bg { margin: -60px 0 0; height: 300px; background: url('/data/main/bg_location3.jpg') no-repeat ; background-attachment: fixed;;}


@media (max-width:991px){
    .contact .link { margin: 0 -10px;}
    .contact .link a { margin: 0 10px; height: 110px;}
    .contact .bg { margin: -55px 0 0; height: 280px; }
}
@media (max-width:768px){   
    .contact .link a { font-size: 22px; height: 100px; }
    .contact .bg { margin: -50px 0 0; height: 200px; }
}
@media (max-width:576px){   
    .contact .link { margin: 0 -5px;}
    .contact .link a { margin: 0 5px; height: 100px; font-size: 20px;}    
    .contact .link a:before { padding: 0 10px 0 0; height: 26px;}
    .contact .bg { margin: -50px 0 0; height: 180px; }
}
@media (max-width:480px){       
    .contact .link a { flex-direction: column; font-size: 18px;}    
    .contact .link a:before { padding: 0; margin: 0 0 10px; height: 24px;}
}