body {min-width: 1900px;}

header {padding:0 50px;line-height:80px;font-size:20px;min-width:1900px;position:fixed;top:0;left:0;width:100%;color:#fff;transition:0.5s;z-index:999;}
header:hover {background:#fff;color:#333;}
header.on {background:#fff;color:#333;}

header h1 {float:left;width:400px;}
header h1>a {display:block;background:url(../img/logo.png) no-repeat left center;text-indent:-9999px;transition:0.5s;}
header:hover h1>a {background:url(../img/logo_on.png) no-repeat left center;}
header.on h1>a {background:url(../img/logo_on.png) no-repeat left center;}
header nav {float:left;width:1100px}
header nav>ul {float:right;}
header nav>ul>li {float:left;}
header nav>ul>li>a {display:block;padding:0 30px;}
header nav>ul>li>a:hover {color:#0f97dd;}
header .search-form {float:right;}
header .search-form:hover {color:#0f97dd;}

#visual {min-width:1900px;position:relative;}
.main-slider figure {height:860px;color:#fff;position:relative;background-position:center center;
    background-size:100% auto;transition:4s;}
.main-slider .sitem01 {background-image:url(../img/img_visual1.jpg)}
.main-slider .sitem02 {background-image:url(../img/img_visual2.jpg)}
.main-slider .sitem03 {background-image:url(../img/img_visual3.jpg)}
.main-slider figure.on {background-size:110% auto;}


.main-slider figure .text {position:absolute;top:400px;left:50%;transform:translateX(-50%);width:1400px;}

.main-slider figure .text h3 {font-size:80px;font-weight:700;margin-bottom:20px;letter-spacing:-0.025em;word-spacing:-0.05em;transform:translateY(50px);opacity:0;}
.main-slider figure.on h3 {transform:translateY(0);opacity:1;transition:0.5s;}

.main-slider figure .text p {font-size:18px;font-weight:300;margin-bottom:40px;transform:translateY(50px);opacity:0;}
.main-slider figure.on .text p {transform:translateY(0);opacity:1;transition:0.5s 0.5s;}
.main-slider figure .text a {display:block;width:150px;line-height:30px;border:1px solid rgba(255,255,255,0.3);border-radius:15px;text-align:center;transform:translateY(50px);opacity:0;}
.main-slider figure.on .text a {transform:translateY(0);opacity:1;transition:0.5s 1s;}
.main-slider figure .text a:hover {background:#0f97dd;border:1px solid #0f97dd;transition:none;}

.main-slider .slick-dots {position:absolute;top:640px;left:50%;transform:translateX(-50%);width:1400px;}
.main-slider .slick-dots button {display:none;}
.main-slider .slick-dots li {display:inline-block;width:100px;height:3px;background:#fff;margin-right:0.5rem;position:relative;}
.main-slider .slick-dots li:after {content:"";display:block;width:0;height:100%;background:#0f97dd;position:absolute;top:0;left:0;}
.main-slider .slick-dots li.slick-active:after {width:100%;transition:4s;}

.main-sarch {position: absolute;top:750px;left:50%;transform: translateX(-50%);width:1400px;border-radius:10px;overflow: hidden;z-index: 555;}
.main-sarch h3 {font-size:24px;color: #000;margin-bottom:20px;}
.main-sarch form {border-bottom:2px solid#333;}
.main-sarch input[type="search"] {border:none;padding:20px;}
.main-sarch button {float: right;padding: 10PX;}
.main-sarch i {font-size: 40px;}
.main-sarch>div {float: left;width: 50%;padding:50px 100px;}
.main-sarch .left {background: #fff;}
.main-sarch .right {background: #0f97dd;color: #fff;}
.main-sarch .right h3 {color: #fff;}
.main-sarch input {width: 400px;}
.main-sarch .right input[type="search"] {background: transparent;}
.main-sarch .right input[type="search"]::placeholder {color: #fff;}
.main-sarch .right form {border:1px solid#fff;border-radius:5px;}

.section {padding:100px 0;}
.section>h2 {text-align: center;font-size: 40px;font-weight: 700;margin-bottom: 20px;}
.section>h2:after {content:"";display: block;width: 0;height: 3px;background:#0f97dd;margin: 10px auto;transition: 0.5s;}
.section.on>h2:after {width: 100px;}
.section>p {text-align: center;margin-bottom: 30px;}
#solution {padding:200px 0;background: #f2f2f2;position: relative;overflow: hidden;}
#solution:after {content: "";display: block;width: 1300px;height: 1300px;border:1px solid rgba(15, 151, 221,0.5);border-radius: 50%;position: absolute;top:250px;left: -200px;}
#solution figure {float: left;width: 50%;overflow: hidden;;position: relative;z-index: 333;opacity: 0;transition: 0.6s;}
#solution.on figure {opacity: 1;}
#solution figure:nth-child(1) {transform: translateY(0px);}
#solution.on figure:nth-child(1) {transform: translateY(100px);}
#solution figure:nth-child(2) {transform: translateX(200px);}
#solution.on figure:nth-child(2) {transform: translateX(0px);}
#solution figure:nth-child(3) {transform: translateX(-200px);}
#solution.on figure:nth-child(3) {transform: translateX(0px);transform: translateY(100px);}
#solution figure:nth-child(4) {transform: translateY(-200px);}
#solution.on figure:nth-child(4) {transform: translateY(0px);}
#solution figure:after {content: "";display: block;width: 100%;height: 100%;background:linear-gradient(-45deg, transparent 30%, rgba(15, 151, 221, 0.5));position: absolute;top: 0;opacity: 0;transition: 0.5s;}
#solution figure:hover:after {opacity: 1;} 
#solution figure .text {position: absolute;top:240px;left: 0;color: #fff;padding:0 40px;transition: 0.5s;z-index: 999;}
#solution figure:hover .text {top:140px}
#solution figure img {transition: 0.5s;}
#solution figure:hover img {transform: scale(1.3);}
#solution figure .text h3 {font-size: 30px;font-weight: 700;line-height: 50px;margin-bottom:40px;}
#solution figure .text h3:after {content: "";display: block;width: 40px;height: 2px;background: #fff;margin-top: 20px;transition: 0.5s;}
#solution figure:hover .text h3:after {width: 100%;}
#solution figure .text strong {font-size: 16px;font-weight: 300;line-height: 24px;}

#specialty {background: #d1e0e5;}
#specialty .specialty-slider figure {height: 370px;position: relative;}
#specialty .specialty-slider figure .case {height: 250px;width: 570px;position: absolute;top:50%;left: 0;transform: translateY(-50%);border:3px solid transparent;transition: 0.5s;}
#specialty .specialty-slider figure:hover .case {height: 370px;width: 570px;;border:3px solid#fff;}
#specialty .specialty-slider .item01 .case {background: url(../img/img_spec1.jpg) no-repeat center center/cover;}
#specialty .specialty-slider .item02 .case {background: url(../img/img_spec2.jpg) no-repeat center center/cover;}
#specialty .specialty-slider .item03 .case {background: url(../img/img_spec3.jpg) no-repeat center center/cover;}
#specialty .specialty-slider .item04 .case {background: url(../img/img_spec5.jpg) no-repeat center center/cover;}
#specialty .specialty-slider .item05 .case {background: url(../img/img_spec4.jpg) no-repeat center center/cover;}
#specialty .specialty-slider .text {position: absolute;top:50px;left:50px;color: #fff;}
#specialty .specialty-slider .text h3 {font-size: 30px;font-weight: 700;line-height: 50px;}
#specialty .specialty-slider .text strong {display: block;line-height:24px;margin-top:10px;}
#specialty .specialty-slider .text a {display: block;padding: 20px 0;}
#specialty .specialty-slider .text span {display:inline-block;width:0;height: 16px;overflow: hidden;transition: 0.5s;}
#specialty .specialty-slider figure:hover span {width: 100px;}


#digital {height:480px;}
#digital .container {width: 100%;}
#digital .left {float:left;height:480px;width: 1060px;background-image:url(../img/img_service_showroom.jpg);background-size: 100%;background-position:center center;color: #fff;position: relative;transition: 0.5s;}
#digital .right {float:left;height:480px;width:calc(100% - 1060px);}
#digital .left .text {position: absolute;top:240px;left: 0;color: #fff;padding:0 40px;transition: 0.5s;z-index: 999;}
#digital .left:hover .text {top:140px}
#digital .left img {transition: 0.5s;}
#digital .left:hover img {transform: scale(1.3);}
#digital .left .text h3 {font-size: 30px;font-weight: 700;line-height: 50px;margin-bottom:40px;}
#digital .left .text h3:after {content: "";display: block;width: 40px;height: 2px;background: #fff;margin-top: 20px;transition: 0.5s;}
#digital .left:hover .text h3:after {width: 100%;}
#digital .left .text strong {font-size: 16px;font-weight: 300;line-height: 24px;}
#digital .left .text a {display: block;padding: 20px 0;}
#digital .left .text span {display:inline-block;width:0;height: 16px;overflow: hidden;transition: 0.5s;}
#digital .left:hover span {width: 100px;}
#digital .left:hover {background-size: 120%;}

#digital .right {padding:80px 60px;background: #f2f2f2;}
#digital .right h3 {font-size: 30px;font-weight: 700;line-height: 50px;}
#digital .right h3 a {font-size: 16px;font-weight: 400;display: block;width:150px;line-height: 30px;border: 1px solid rgba(0,0,0,0.3);border-radius:12px;text-align: center;float: right;transition: 0.3s;}
#digital .right h3 a:hover {border: 1px solid #0f97dd;background: #0f97dd;color: #fff;}

#digital .right ul>li {line-height: 70px;border-bottom:1px solid#ddd;}
#digital .right ul>li>a {display:block;}
#digital .right ul>li>a>small {float: right;}


#service {text-align: center;font-size:0;}
#service a {display: inline-block;padding:0 60px;}
#service strong {display: block;font-size:18px;padding-top: 20px;}
#service a:hover {color: #0f97dd;}
#service a:after {content:"";display:block;width:1px;height: 30px;background:#ddd;position: absolute;top:50%;right: 0;;transform: translateY(-50%);}
#service a:last-child:after {display: none;}


footer {background: #f2f2f2;line-height: 60px;}
footer .container>dl {float: left;}
footer .container>dl>dt, footer .container>dl>dd {float: left;}
footer .container>dl>dt {color: #0f97dd;}
footer .container>dl a {padding-right: 40px;}
footer .container>form {float:right;}
footer .container>h2 {float:left;}
footer .container>div {float:right;line-height: 20px;font-size: 14px;padding:20px 0 50px 0;}
footer address {border-top: 1px solid#ddd;}

.xi-arrow-top {display: none;position: fixed;bottom: 100px;right: 100px;font-size: 30px;padding:10px;background: #0f97dd;color: #fff;border-radius: 50%;z-index: 999;}

#popup {display:none;position:fixed;top:300px;left:300px;width:300px;height:300px;background:#fff;padding:50px 0 20px 0;text-align: center;border: 5px solid orangered;cursor: pointer;;z-index:1000;}
#popup h2 {font-size: 24px;font-weight:700;margin-bottom:20px;}
#popup p {line-height: 1.5;margin-bottom:25px;font-weight:500;}
#popup span {margin-left:10px;}