@charset "utf-8";
/* CSS Document */
.loyalsund2 h2{text-align:center; color:#392758; font-size:280%; font-weight:500; letter-spacing: 1px;}
h2.dtit{font-size:200%; font-weight:500; text-align:center; position:relative;}
h2.dtit::after{content:""; width:2em; height:3px; background:#2d2559; display:block; position:absolute; left:calc(50% - 1em); bottom:-20px;}
.loyalsund3, .loyalsund4, .loyalsund8, .syisdnews{background:#f8f8f7;}
.loyalsund4 .page, .loyalsund7 .page{width:80%; max-width:80%;}
@media screen and (max-width:1720px){/*desktop*/
.loyalsund4 .page, .loyalsund7 .page{width:100%; max-width:100%;}
}

.loyalsund3 p, .loyalsund6 p{font-size:20px; line-height:180%; margin-top:1.5em; font-weight:300;}
.loyalsund5{background:url("../images/dbg.jpg") no-repeat; background-attachment:fixed; background-size:cover; color:#fff;}
.loyalsund5 .page{ height:200px; display:flex; align-items: center;}
.loyalsund5 h2{text-align:center; font-size:280%; font-weight:500; letter-spacing: 1px;}
.loyalsund3, .loyalsund6{padding-top:70px;}
.loyalsund4, .loyalsund7{position:relative; z-index: 2; padding-bottom:100px;}
.loyalsund8,.loyalsund9{padding:100px 0;}
.loyalsund8 .page{padding:0 50px;}
.loyalsund9{background:url("../images/dabout-bg.png") no-repeat right center; background-size:30%;}
.loyalsund9 .page{max-width:1450px; width:1450px;}
.loyalsund9 td:first-of-type{text-align:center;}
.loyalsund9 td:last-of-type{padding:5%;}
.loyalsund9 p{font-weight:300;}
.loyalsund9 .more{margin-top:3em;}
.loyalsund9 .more a{display:inline-block; border:1px solid #000; color:#000; padding:0px 2em;}
.abouttable{width:100%;}
.abouttable td{width:50%;}
.abouttable h2{font-size:200%; color:#3d3d3d; line-height:160%;}
.abouttable td p{ font-size:16px; letter-spacing:1px; line-height:200%;}

.syisdnews{padding:80px 0;}
.syisdnews .page{padding:0 30px;}
.syisdnews .list{width:50%; float:left; padding:30px 15px;}
.syisdnews .list .frm{padding:0; border-bottom:2px solid #2d2559;}
.syisdnews .list section{padding:10px; color:#000; float:left;}
/*machine*/
.machine{display:flex; justify-content: center}

.machine > div{text-align:center; cursor: pointer;}
.machine .bar{display:block; width:100%; height:18px; background:#fdae48; position:relative; z-index:-1;}
.machine .dot{display:block; position:absolute; width:20px; height:20px; border-radius:100%; background:#fff; border:3px solid #fdae48; left:calc(50% - 10px);}
.machine .dot::after{content:""; width:54px; height:20px; background:url("../WebFiles/9ecdab22-a4d9-4876-a4c8-169ff0a76576.png") no-repeat; display:block; position:absolute; left:50%; top:-5px; transform:translateX(-50%); z-index:-1;}
.machine > div:hover .dot{background:#fdae48;}
.machine .subject{text-align:center;}
.machine h3{font-weight:300; font-size:12px; display:inline-block; width:5em; height:5em; border-radius:100%; background:#fff; color:#fdae48; padding:0; position:relative; margin-top:40px; box-shadow:-5px 5px 5px rgba(0,0,0,0.2); transition:.3s;}
.machine > div:hover h3{transform:scale(1.1,1.1);}
.machine h3 span{display:inline-block; vertical-align:middle; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%;}
.machine h3::before{content:""; width:2px; height:40px; display:block; position:absolute; top:-40px; left:calc(50% - 1px); background:#fdae48; z-index: -1;}
.machine h3::after{content:""; width:5em; height:5em; border-radius:100%; border:5px solid #fdae48; position:absolute; left:-5px; top:-5px; display:block;}
.machine > div:nth-of-type(2){animation-delay: .3s;}
.machine > div:nth-of-type(3){animation-delay: .6s;}
.machine > div:nth-of-type(4){animation-delay: .9s;}
.machine > div:nth-of-type(5){animation-delay: 1.2s;}
.machine > div:nth-of-type(6){animation-delay: 1.5s;}
.machine > div:nth-of-type(7){animation-delay: 1.8s;}
.machine > div:nth-of-type(8){animation-delay: 2.1s;}
.machine > div:nth-of-type(9){animation-delay: 2.4s;}
.machine > div:nth-of-type(10){animation-delay: 2.7s;}
.machine > div:nth-of-type(11){animation-delay: 3s;}
.machine div.s1.slick-current .dot{background:#fdae48;}
.machine > div:nth-of-type(2):hover .dot,.machine div.s2.slick-current .dot{background:#f37e5f;}
.machine > div:nth-of-type(3):hover .dot,.machine div.s3.slick-current .dot{background:#bb7c79;}
.machine > div:nth-of-type(4):hover .dot,.machine div.s4.slick-current .dot{background:#9fc150;}
.machine > div:nth-of-type(5):hover .dot,.machine div.s5.slick-current .dot{background:#48a5d9;}
.machine > div:nth-of-type(6):hover .dot,.machine div.s6.slick-current .dot{background:#46abba;}
.machine > div:nth-of-type(7):hover .dot,.machine div.s7.slick-current .dot{background:#e44d30;}
.machine > div:nth-of-type(8):hover .dot,.machine div.s8.slick-current .dot{background:#4a657e;}
.machine > div:nth-of-type(9):hover .dot,.machine div.s9.slick-current .dot{background:#443663;}
.machine > div:nth-of-type(10):hover .dot,.machine div.s10.slick-current .dot{background:#e44d30;}
.machine > div:nth-of-type(11):hover .dot,.machine div.s11.slick-current .dot{background:#37a241;}
.machine div.s2.slick-current h3{transform:scale(1.1,1.1);}

.machine div.s2 .bar{background:linear-gradient(90deg,#fdae48 50%,#f37e5f 50%);}
.machine div.s2 h3{color:#f37e5f;}
.machine div.s2 .dot{border:3px solid #f37e5f;}
.machine div.s2 h3::before{background:#f37e5f;}
.machine div.s2 h3::after{border:5px solid #f37e5f;}

.machine div.s3 .bar{background:linear-gradient(90deg,#f37e5f 50%,#bb7c79 50%);}
.machine div.s3 h3{color:#bb7c79;}
.machine div.s3 .dot{border:3px solid #bb7c79;}
.machine div.s3 h3::before{background:#bb7c79;}
.machine div.s3 h3::after{border:5px solid #bb7c79;}

.machine div.s4 .bar{background:linear-gradient(90deg,#bb7c79 50%,#9fc150 50%);}
.machine div.s4 h3{color:#9fc150;}
.machine div.s4 .dot{border:3px solid #9fc150;}
.machine div.s4 h3::before{background:#9fc150;}
.machine div.s4 h3::after{border:5px solid #9fc150;}

.machine div.s5 .bar{background:linear-gradient(90deg,#9fc150 50%,#48a5d9 50%);}
.machine div.s5 h3{color:#48a5d9;}
.machine div.s5 .dot{border:3px solid #48a5d9;}
.machine div.s5 h3::before{background:#48a5d9;}
.machine div.s5 h3::after{border:5px solid #48a5d9;}

.machine div.s6 .bar{background:linear-gradient(90deg,#48a5d9 50%,#46abba 50%);}
.machine div.s6 h3{color:#46abba;}
.machine div.s6 .dot{border:3px solid #46abba;}
.machine div.s6 h3::before{background:#46abba;}
.machine div.s6 h3::after{border:5px solid #46abba;}

.machine div.s7 .bar{background:linear-gradient(90deg,#46abba 50%,#e44d30 50%);}
.machine div.s7 h3{color:#e44d30;}
.machine div.s7 .dot{border:3px solid #e44d30;}
.machine div.s7 h3::before{background:#e44d30;}
.machine div.s7 h3::after{border:5px solid #e44d30;}

.machine div.s8 .bar{background:linear-gradient(90deg,#e44d30 50%,#4a657e 50%);}
.machine div.s8 h3{color:#4a657e;}
.machine div.s8 .dot{border:3px solid #4a657e;}
.machine div.s8 h3::before{background:#4a657e;}
.machine div.s8 h3::after{border:5px solid #4a657e;}

.machine div.s9 .bar{background:linear-gradient(90deg,#4a657e 50%,#443663 50%);}
.machine div.s9 h3{color:#443663;}
.machine div.s9 .dot{border:3px solid #443663;}
.machine div.s9 h3::before{background:#443663;}
.machine div.s9 h3::after{border:5px solid #443663;}

.machine div.s10 .bar{background:linear-gradient(90deg,#443663 50%,#e44d30 50%);}
.machine div.s10 h3{color:#e44d30;}
.machine div.s10 .dot{border:3px solid #e44d30;}
.machine div.s10 h3::before{background:#e44d30;}
.machine div.s10 h3::after{border:5px solid #e44d30;}

.machine div.s11 .bar{background:linear-gradient(90deg,#e44d30 50%,#37a241 50%);}
.machine div.s11 h3{color:#37a241;}
.machine div.s11 .dot{border:3px solid #37a241;}
.machine div.s11 h3::before{background:#37a241;}
.machine div.s11 h3::after{border:5px solid #37a241;}
.machine div.s12 .bar{background:linear-gradient(90deg,#37a241 50%,#fdae48 50%);}
@media screen and (max-width:1400px){/*desktop*/
.machine{flex-wrap:wrap; justify-content: center;}
}
/*A0202 style*/
.A0202 .page{max-width:960px;}
.A0202 .list{border-bottom:1px solid #ccc;}
.A0202 .list .frm{padding:0;}
/*Contact4*/
.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%;}
@media screen and (max-width:1515px){/*desktop*/
.loyalsund9 .page,.loyalsund4 .page, .loyalsund7 .page{max-width:100%; width:100%;}

}
@media screen and (max-width:1286px){/*desktop*/
.loyalsund2 h2,.loyalsund5 h2,.abouttable h2{font-size:210%;}

}
@media screen and (max-width:960px){/*desktop-small pad*/
.loyalsund2 h2,.loyalsund5 h2,.abouttable h2{font-size:180%;}	
.abouttable td{display:block; width:100%; clear:both;}
.loyalsund8,.loyalsund9{padding:50px 0;}
}
@media screen and (max-width:767px){/*phone*/
.syisdnews .list{width:100%; }
}