@charset 'utf-8';

#main {}
#main article { padding: 100px 0; }
#main article:nth-of-type(even) { background: #f9f9f9;}
#main article h2 { padding: 0 0 20px; text-align: center; font-size: 35px; color: #111; font-weight: 500; line-height: 1;}
#main article h2+p {  color: #333; text-align: center;  word-break: keep-all;}
#main article .wrap { padding: 50px 0;}
#main article a.more { display: block; margin: 0 auto; width: 245px; height: 52px;  text-align: center; color: #fff; line-height: 52px; border-radius: 26px; background: #ed7d31;}
#main p { word-break: keep-all;}
@media (max-width:991px){
    #main article { padding: 90px 0; }
    #main article h2 { font-size: 32px;}
    #main article .wrap { padding: 45px 0;}
}
@media (max-width:768px){
    #main article { padding: 70px 0; }
    #main article h2 { padding: 0 0 15px; font-size: 30px;}
    #main article h2+p { font-size: 17px;}
    #main article .wrap { padding: 40px 0;}
    
}
@media (max-width:576px){
    #main article { padding: 60px 0; }
    #main article .wrap { padding: 35px 0;}
    #main article a.more { width: 210px; height: 42px; font-size: 16px; line-height: 42px;}    
}
@media (max-width:480px){
    #main article { padding: 50px 0; }
    #main article h2 { font-size: 28px;}
    #main article h2+p { font-size: 15px; }
    #main article .wrap { padding: 30px 0;}
}

#main .facilities a.more { background: #131e34; }


#main .business {}
#main .business .wrap {}
#main .business .wrap a { display: block; position: relative; width: 23.23%; border: 1px solid #bbb;  }
#main .business .wrap a h3 { padding: 30px 0 45px; font-size: 22px; line-height: 1; color: #313131; text-align: center; }
#main .business .wrap a .img { border-top: 1px solid #bbb;}
#main .business .wrap a .img img { width: 100%;}
#main .business .wrap a:after { content:''; display: block; position: absolute; left: 50%; top: 85px; transform: translateX(-50%); width: 70px; height: 70px; background-color: #131e34; border-radius: 50%; background-repeat: no-repeat; background-size: auto 40px; background-position: center; transition: all .3s; }
#main .business .wrap a:hover:after { background-color: #ed7d31; animation: shake 1s 1 both cubic-bezier(1,-1.36,1,.56);  }
#main .business .wrap a:nth-of-type(1):after { background-image: url('/data/main/bg_bus1.png');}
#main .business .wrap a:nth-of-type(2):after { background-image: url('/data/main/bg_bus2.png');}
#main .business .wrap a:nth-of-type(3):after { background-image: url('/data/main/bg_bus3.png');}
#main .business .wrap a:nth-of-type(4):after { background-image: url('/data/main/bg_bus4.png');}


#main .business .wrap a h3:after {  display: block; padding: 10px 0 0 ;  font-size: 14px;  color: #aaa; font-weight: 300;} 
#main .business .wrap a:nth-of-type(1) h3:after { content:'C O M P A N Y';}
#main .business .wrap a:nth-of-type(2) h3:after { content:'P R O D U C T S';}
#main .business .wrap a:nth-of-type(3) h3:after { content:'F A C I L I T I E S';}
#main .business .wrap a:nth-of-type(4) h3:after { content:'I N Q U I R Y';} 

@media (max-width:991px){
    #main .business .wrap a { width: 24%; }
}
@media (max-width:768px){
    #main .business .wrap{ flex-wrap: wrap; }
    #main .business .wrap a {  width: 48%; }
    #main .business .wrap a:nth-of-type(-n + 2) { margin-bottom: 20px; }
}

@media (max-width:576px){        
    #main .business .wrap a h3 { padding: 30px 0 35px; font-size: 20px; }
    #main .business .wrap a h3:after { font-size: 12px;}
    #main .business .wrap a:after { top: 77px; width: 60px; height: 60px; background-size: auto 32px;}    
}
@media (max-width:480px){  
    #main .business .wrap a h3 { padding: 25px 0 30px; }
    #main .business .wrap a:nth-of-type(-n + 2) { margin-bottom: 10px; }
    #main .business .wrap a:after { top: 70px; width: 50px; height: 50px; background-size: auto 25px;}
 }


@keyframes shake {
    0% { transform: translateX(-50%) translateY(0) ;}
    20% { transform: translateX(-50%) translateY(5%) ;}
    40% { transform: translateX(-50%) translateY(-5%) ;}
    60% { transform: translateX(-50%) translateY(3%) ;}
    80% { transform: translateX(-50%) translateY(-2%) ;}
    100% { transform: translateX(-50%) translateY(0) ;}
}


#main .customer { }
#main .customer .location, #main .customer .contact, #main .customer .info { background: #fff;  border: 1px solid #e1e1e1; border-left: none; }
#main .customer .location { width: 40%; border-left: 1px solid #e1e1e1;}
#main .customer .custo { padding: 45px 3.4% 50px ;}
#main .customer .custo h3 { padding: 0 0 40px; font-size: 25px; line-height: 1; color: #111; text-align: center; }
#main .customer .contact { width: 30%; }
#main .customer .contact dl {  justify-content: left; padding: 0 0 10px; font-size: 24px;;  }
#main .customer .contact dl dt { width: 105px;  font-weight: 500; color: #555; }
#main .customer .contact dl dd {  font-weight: 500; color: #f0793a; }
#main .customer .contact dl.fax { padding: 0 0 20px;}
#main .customer .contact dl.fax dd { color: #777; }
#main .customer .contact p {padding: 5px 0 0; color: #111; font-weight: 400;  }
#main .customer .info { width: 30%; }
#main .customer .info dl { padding: 0 0 15px;}
#main .customer .info dl dt { padding: 0 0 5px;  font-weight: 500; color: #111;  }
#main .customer .info dl dd {  font-weight: 400; color: #777;}
#main .customer .info p { padding: 5px 0 0; font-weight: 400; color: #f07a39; }


@media (max-width:1300px){
    #main .customer .contact dl { font-size: 22px;}
    #main .customer .contact dl dt { width: 100px;}
}
@media (max-width:1199px){
    #main .customer .flex { flex-wrap: wrap;}
    #main .customer .location { width: 100%;}
    #main .customer .custo {  padding: 45px 3.4%; width: 50%; border-top: none;}
    #main .customer .custo h3 { padding: 0 0 35px; }
    #main .customer .contact { border-left: 1px solid #e1e1e1; } 
    #main .customer .info { }     
}
@media (max-width:768px){
    #main .customer .custo h3 { font-size: 23px;}
    #main .customer .contact dl { font-size: 19px;}
    #main .customer .contact dl dt { width: 90px;}
    #main .customer p { font-size: 17px;}
    #main .customer .info dl dd { font-size: 17px; word-break: keep-all;}
}
@media (max-width:576px){
    #main .customer { font-size: 15px;}
    #main .customer .custo { padding: 40px 3.4%;}
    #main .customer .custo h3 { padding: 0 0 25px; font-size: 20px;}   
    #main .customer .contact dl dt { width: 100%; }    
}
@media (max-width:480px){
    #main .customer .custo { width: 100%; }
    #main .customer .custo h3 { padding: 0 0 25px; font-size: 22px;}   
    #main .customer .contact dl dt { width: 90px; }    
    #main .customer .info { border-left: 1px solid #e1e1e1;}
}