/* Visual */
.visual{overflow:hidden; height:768px; background:#fff; padding-left:70px; position: relative;}

.visual .swiper-container{
    height: 100%; position: relative;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
.visual .swiper-wrapper { height:100%; }
.visual .swiper-slide { overflow:hidden; height:100%;}
.visual .swiper-slide .background{
    height: 768px;
    transition-property: transform;
    transition-timing-function: linear;
    transition-delay: 1s;
    transition-duration: 0s;
    transform: scale(1.1);
}

.visual .swiper-slide.swiper-slide-active .background {
    transition-delay: 0s;
    transition-duration: 3s;
    transform: scale(1);
}

.visual .background--1 { background: url('/child/img/main/v1.jpg') no-repeat center / cover; }
.visual .background--2 { background: url('/child/img/main/v2.jpg') no-repeat center / cover; }
.visual .background--3 { background: url('/child/img/main/v3.jpg') no-repeat center / cover; }
.visual .swiper-container-initialized { opacity: 1; }
.swiper.swiper-container-initialized,
.swiper.swiper-container-initialized .swiper-pagination{
 -webkit-transform: none; transform: none; opacity: 1;
}


.visual .context {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center;
    -webkit-box-pack: center; -ms-flex-pack: center;
    z-index: 2; position: absolute;
    top: 180px; left: 240px; right: 0; opacity:0;
    transition:all 1s ease 0.6s;
    max-width: 1230px; padding-right:50px;
}

.visual .context h1 {transition:all 0.8s ease 0.3s; position: relative; top:40px; margin-bottom:30px;}
.visual .context p {transition:top 1s ease 0.5s; position: relative; top:40px; opacity:0;}
.visual .swiper-slide-active .context {opacity:1;}
.visual .swiper-slide-active .context  h1 {top:0;}
.visual .swiper-slide-active .context p {top:0; opacity:1;}


.visual .swiper-control{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; -webkit-box-pack: center;
    -ms-flex-pack: center; justify-content: center; z-index: 99; position: absolute;
    top: 470px; left: 310px; right: 0; transition: all 1s ease 0.6s;
    max-width: 1200px; width: 100%;
    height: 4px;
    color: #fff;

}
.visual .swiper-pagination{height: 4px;}
.visual .swiper-pagination.swiper-pagination-bullets {

    z-index: 2; position: absolute; bottom:0px; width:auto; text-align: center; font-size: 0;

}
.visual .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 3px; width:60px; height: 100%; background: #3c3c3c; border-radius:0px;
    -webkit-transition: all ease .2s; transition: all ease .2s; opacity:1; position: relative;
}

.visual .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet::before {
    content:''; display: block; position: absolute; top:0; left: 0; width:0; background-color:#fff; height:100%;
    animation: progressOut linear 500ms;/*500*/
    animation-fill-mode: forwards;
}

.visual .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active::before{
    animation: progressIn linear 2800ms;/*2800*/
    animation-fill-mode: forwards;
}

@keyframes progressOut {
    0%{opacity: 1;}
    100%{opacity:0;}
}
@keyframes progressIn {
    0%{width:0;}
    100%{width:100%;}
}


@media (max-width:1200px) {

}

@media (max-width:1024px) {

    .visual {height:668px;}

    .visual .context {left:80px;}
    .visual .swiper-control {left:150px;}
    /* .visual .context {left:100px; max-width:640px;}
    .visual .swiper-control {left:170px;} */

}

@media (max-width:768px) {

    .visual {height:458px;}
    .visual .context {top:80px; left:50px;}
    .visual .swiper-control {top:340px; left:120px;}
    /* .visual .context {top:80px; left:50px; max-width:500px;}
    .visual .swiper-control {top:330px; left:120px;} */

}

@media (max-width:600px) {

    .visual {height:388px;}
    .visual {padding-left:0px;}
    .visual .context {top:60px; left:30px;}
    .visual .swiper-control {left:30px;}
    /* .visual .context {max-width:340px; left: 20px;}
    .visual .swiper-control {left:20px; top:300px;} */


}


.scroll-roling {

    position: absolute; width:20px;
    z-index: 99; left:30px; bottom:20px;
}

.scroll-roling span {position:absolute; right:-14px; top:-50px; transform: rotate(-90deg); font-size:1.4rem;}

.scroll-roling .roling-line {
    position: relative; height:100px; width:1px;
    background-color:#dcdcdc; margin:0 auto;
}

.scroll-roling .roling-line i {

    position: absolute; width:100%; height:0; background-color:#cd152c;
    animation:iline 4s linear; animation-iteration-count: infinite; animation-fill-mode:both;

}

.scroll-roling .roling-line em {

    background-color: #cd152c; width:7px; height:7px; border-radius:50%;
    position: absolute; left:50%; transform: translate(-50%,0); margin-left:1px;
    animation: roundline 4s linear .1s; animation-iteration-count: infinite; animation-fill-mode:both;

}

@keyframes iline {

    0% {height:0; opacity: 1;}
    33%  {height:100%; opacity:0.75;}
    67% {height:100%; opacity:0.5;}
    100% { opacity:0; height:100%;}

}

@keyframes roundline {

    0% {transform: translate(-50%,0); opacity:1;}
    33% {transform: translate(-50%,100px); opacity:0.75;}
    67% {transform: translate(-50%,100px); opacity:0.5;}
    100% {transform: translate(-50%,100px); opacity:0;}

}

@media (max-width:600px) {

    .scroll-roling  {display: none;}

}


/*section--visual*/
.section--visual {position: relative;}


/*main common*/
.main-title {font-size:4.8rem; line-height:1.4;}
.sub-text {font-size:1.8rem;}

@media (max-width:768px) {

    .main-title {font-size:4rem;}
    .sub-text {font-size:1.6rem;}

}

@media (max-width:600px) {

}

@media (max-width:480px) {

    .main-title {font-size:3rem;}
    .sub-text {font-size:1.4rem;}

}


/*section--processd*/
.section--processd {padding:160px 0px;}
.section--processd .main-title {margin-bottom:50px;}
.section--processd .processd-list ul {display: flex; flex-wrap: wrap; margin-left:-15px; margin-right: -15px; margin-top: -60px;}
.section--processd .processd-list ul li.processd-list__box {flex:1 33.3333%; padding:60px 15px 0px;}
.section--processd .processd-box {height:100%; position: relative;}
.section--processd .processd-img {
    display:block; background-position:center; background-size: cover;
    width:100%; background-repeat:no-repeat;
    padding-top:calc(240/350*100%);
}

.section--processd .processd-title {font-size: 3.2rem; line-height:1; padding:20px 0px; border-bottom:1px solid #dadada;}
.section--processd .processd-text {font-size: 1.8rem; color:#595959; padding-top: 10px;}
.section--processd .processd-list ul li.processd-list__box .processd-banner {
    position: relative; display:block; width:100%; padding-top:calc(520/410*100%);
}
.section--processd .processd-list ul li.processd-list__box .processd-banner::after{

    content:'';
    width:100%; height:100%;
    position: absolute; z-index: -1;
    background-color:#ddd;
    display: block; left:15px; top:15px;


}
.section--processd .processd-banner__txt {position: absolute; width:100%; height:100%; top:0; right:0; padding:10%; display: flex; justify-content: space-between; flex-direction:column; z-index:1;}
.section--processd .processd-banner__txt .processd-logo {background:url('/child/img/sub/about/about-logo.png') no-repeat center; max-width:122px; height: 28px; width:100%; display: block; margin-left: auto;}
.section--processd .processd-banner__txt p {font-size:3.2rem; line-height:1.4;}

.section--processd .processd-list ul li.processd-list__box .processd-banner__img {
    position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    display:block; width:100%; height:100%; background-repeat:no-repeat; background-size: cover; background-position: center;
    transition: all 0.3s ease;
}


@media (max-width:1024px){
    .section--processd {padding:100px 0px;}
    .section--processd .processd-list ul li.processd-list__box .processd-banner::after {display: none;}
    .section--processd .processd-banner__txt p {font-size:2.8rem;}

}

@media (max-width:768px) {


    .section--processd {padding:60px 0px;}
    .section--processd .main-title {margin-bottom:30px;}
    .section--processd .processd-list ul {margin-top: -40px; margin-left: -15px; margin-right: -15px;}
    .section--processd .processd-list ul li.processd-list__box {flex:1 50%; padding:40px 15px 0px;}

    .section--processd .processd-title {font-size:2.4rem; padding:15px 0px;}
    .section--processd .processd-text {font-size:1.6rem;}

    .section--processd .processd-banner__txt p {font-size:2rem;}

}

@media (max-width:480px){

    .section--processd .main-title {margin-bottom:20px;}
    .section--processd .processd-title {font-size:2rem;}
    .section--processd .processd-text {font-size:1.4rem;}
    .section--processd .processd-list ul li.processd-list__box {flex:1 100%; padding:40px 15px 0px;}

}


/*section--customers*/
.section--customers {position: relative; padding-top:160px;}
.section--customers .main-container::after {
    content: ''; position: absolute; width:100vw; max-height:600px;  height:100%;
    display: block; background:url('/child/img/main/customers-bg.png') no-repeat center;
    top:0; left:0; right:0; z-index:-2;

}
.section--customers .custromer-header {display: flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px;}
.section--customers .custromer-header .sub-title {font-size:2.2rem;}
.section--customers .custromer-header .custromer-header__title {width:46%;}
.section--customers .custromer-header .custromer-header__subtext {width:54%;}
.section--customers .custromer-body {background-color: #fff; padding:30px 50px; box-shadow:0px 2px 8px rgba(25,25,25,.2); display: flex; justify-content: space-between; align-items: center;}
.section--customers .custromer-body ul {margin-top: -10px; margin-bottom: -10px; width:50%;}
.section--customers .custromer-body li {font-size:1.8rem; padding:10px 0px; display: flex; color:#1c1c1c;}
.section--customers .custromer-body li span {display: block;}
.section--customers .custromer-body li span.max-w30 {max-width:30px; width:100%; margin-right:10px;}
.section--customers .custromer-body img {display:block;}


@media (max-width:1200px) {

    .section--customers .custromer-header .custromer-header__title {width:50%;}
    .section--customers .custromer-header .custromer-header__subtext {width:50%;}

}

@media (max-width:1024px) {

    .section--customers {padding-top:100px;}
    .section--customers .custromer-header {flex-wrap: wrap; margin-bottom:40px;}
    .section--customers .custromer-header .custromer-header__title {width:100%;}
    .section--customers .custromer-header .custromer-header__title .main-title {margin-bottom:20px;}
    .section--customers .custromer-header .custromer-header__subtext {width:100%;}
    .section--customers .custromer-body {padding:30px 30px;}


}

@media (max-width:768px) {

    .section--customers {padding-top:60px;}
    .section--customers .custromer-body {flex-wrap: wrap;}
    .section--customers .custromer-body ul {width:100%; margin-bottom:20px;}
    .section--customers .custromer-body li {font-size:1.6rem; padding:5px 0px;}

}

@media (max-width:480px) {

    .section--customers .custromer-body li {font-size:1.4rem;}
    .section--customers .custromer-body li span.max-w30 {margin-right:0px;}

}


/*section--guide*/
.section--guide {padding:160px 0px;}
.section--guide .main-container {display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.section--guide .main-container img {display: block;}
.section--guide .guide-box {padding-top:70px; position: relative; width:42%;}
.section--guide .guide-img {position: absolute; bottom:25px; left:0; right:0;}
.section--guide .guide-img img {filter:drop-shadow(-8px 15px 15px rgba(0,0,0,.4)); margin:0 auto;}
.section--guide .guide-text {padding:80px 0px 0px 80px; width:58%;}
.section--guide .guide-title {font-size:3.2rem; color:#111; line-height:1.5; }
.section--guide .guide-button {margin-top:30px; border:1px solid #c60b22; color:#c60b22; max-width:230px; width:100%; padding:14px; font-size:1.8rem; font-weight:500; transition:all 0.3s ease;}

@media (min-width:1201px) {

    .section--guide .guide-button:hover {color:#fff; background-color:#c60b22;}

}

@media (max-width:1200px) {

    .section--guide .main-container > div {width:50%;}
    .section--guide .guide-text {padding:100px 0px 0px 30px;}
    .section--guide .guide-title {font-size:2.8rem;}

}

@media (max-width:1024px) {

    .section--guide {padding:100px 0px;}
    .section--guide .guide-text {padding:70px 0px 0px 30px;}
    .section--guide .guide-title {font-size:2.6rem;}
    .section--guide .guide-button {max-width:200px;}

}

@media (max-width:768px) {

    .section--guide {padding:60px 0px; margin:50px 0px;}
    .section--guide .main-container > div {width:100%;}
    .section--guide .guide-img {padding-left:60px;}
    .section--guide .guide-img img {margin:inherit;}
    .section--guide .guide-text {padding:50px 0px 0px;}
    .section--guide .guide-title {font-size:2rem;}


}

@media (max-width:600px){

    .section--guide .guide-img {padding:0 30px;}
    .section--guide .guide-img img {margin:0 auto;}

}

@media (max-width:480px) {

    .section--guide .guide-title {font-size:2rem;}

}



/*section--location*/
.section--location {position: relative;}
.section--location .container {position: relative;}
.section--location .location {overflow:hidden; width:100vw; position: relative; left:50%; transform: translateX(-50%);}
.section--location .location-map {width:100vw; height:470px;}
.section--location .location-box {
    position: absolute; right: 15px; top:0;
}
.section--location .location-txt {
    background-color:#d60821;
    width:460px; height:470px;
    padding:80px 40px 0px;
    position: relative;z-index: 1;
}
.section--location .location-txt::before {
    content:''; display: block;
    position: absolute; right:0px;
    width:477px; height:26px; top:-26px;
    background:url('/child/img/main/location-line.png') no-repeat center;
}

.section--location .loaction-title {font-size:3.2rem; margin-bottom:20px;}
.section--location .location-list {margin-top: -30px; margin-bottom: -30px;}
.section--location .location-list ul { padding:30px 0px;}
.section--location .location-list ul li {display: flex;}
.section--location .location-list ul li .list-title {display: flex;}
.section--location .location-list ul li .list-title span {width:80px; padding:0px 10px; display: block;}
.section--location .location-list ul.loaction-list-top {border-bottom:1px solid #ff2d47;}
.section--location .location-list ul.loaction-list-top li {color:#fff;}
.section--location .location-list ul.loaction-list-bottom li {color:#f3dadd;}

.section--location .location-list ul li .list-title i.pin-icon {background:url('/child/img/main/pin-icon.png') no-repeat center; width:14px; height:18px; margin-top:4px;}
.section--location .location-list ul li .list-title i.tel-icon {background:url('/child/img/main/tel-icon.png') no-repeat center; width:12px; height:12px; margin-top:8px;}
.section--location .location-list ul li .list-title i.fax-icon {background:url('/child/img/main/fax-icon.png') no-repeat center; width:16px; height:13px;margin-top:8px;}
.section--location .location-list ul li .list-title i.form-icon {background:url('/child/img/main/form-icon.png') no-repeat center; width:12px; height:16px;margin-top:8px;}



@media (max-width:1200px){


}


@media (max-width:1024px){

    .section.section--location.on {



    }

}

@media (max-width:1024px){

    .section--location .location-txt {width:405px;}
    .section--location .location-txt::before {width:420px;  background-size:420px auto; top:-24px;}
    .section--location .loaction-title {font-size:2.6rem;}

}

@media (max-width:768px){
    .section--location .container {display:flex; flex-direction: column-reverse;}
    .section--location .location-txt::before {display:none;}
    .section--location .location-box {position: relative; right:0px;}
    .section--location .location-txt {width:100vw; left:50%; transform: translateX(-50%); padding:30px 20px 0px; height:330px;}
    .section--location .loaction-title {font-size:2rem;}
    .section--location .location-list ul li {font-size:1.4rem;}

}

@media (max-width:480px){


}