/* Custom Style */
.section1, .section3 { background: #f5f5f5; }
.section3 .formmail-table { background: transparent; }
.section-title { position: relative; margin: -10px 0 35px; text-align: center; font-size: 42px; font-weight: 200; }
.section-title + p { margin-top: 15px; text-align: center; font-size: 17px; }
.main-board-title { margin-bottom: 10px; line-height: 30px; font-size: 25px; }
.main-board-title a { display: block; background: url('/child/img/icon/main-board-title.png') no-repeat right 1px center; }

@media (max-width: 1024px){
    .section-title { line-height: 18px; font-size: 23px; }
    .section-title + p { line-height: 16px; font-size: 15px; }
    .main-board-title { font-size: 20px; background-size: auto 30px; }
}
@media (max-width: 768px){
    .section-title { line-height: 15px; font-size: 20px; }
    .main-board-title { font-size: 18px; background-size: auto 25px; }
}




/* COMMON */
section { padding: 100px 0; }


/* Visual */
.visual { position: relative; }
.visual-slide { display: none; }
.visual-slide.slick-initialized { display: block; }
.visual-slide .slick-prev { left: 100px; width: 60px; height: 60px; background: url('/child/img/visual/prev.png') no-repeat center; opacity: .5; }
.visual-slide .slick-next { right: 100px; width: 60px; height: 60px; background: url('/child/img/visual/next.png') no-repeat center; opacity: .5; }
.visual-slide .slick-dots { bottom: 35%; }
.visual-slide .slick-dots li.slick-active button { width: 30px; height: 8px; background: rgba(255,255,255,1); border-radius: 4px; }
.visual-slide .slick-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); }
._v { height: 860px; }
._v .centre { position: relative; z-index: 2; }
.v-bg { position: absolute; top: 0; left: 0; width: 110%; height: 100%; z-index: 1;
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
}
._v.on .v-bg{
    -webkit-transition: linear 6s;
    -o-transition: linear 6s;
    transition: linear 6s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
._v.bg-on .v-bg{
    -webkit-transition: linear 6s;
    -o-transition: linear 6s;
    transition: linear 6s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
.v1 { background: url('/child/img/visual/v2.png') no-repeat center / cover; }
.v2 { background: url('/child/img/visual/v1.png') no-repeat center / cover; }
._v h3 { line-height: 120%; font-size: 60px; font-weight: 200; color: rgba(255,255,255,1);
    -webkit-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
}
._v.on h3 {
    -webkit-transition: ease-in-out .87s .35s;
    -o-transition: ease-in-out .87s .35s;
    transition: ease-in-out .87s .35s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
}
._v h3 strong { position: relative; display: inline-block; }
._v h3 strong:after { content: ''; position: absolute; display: block; left: 0; right: 0; bottom: -10px; width: 100%; border-bottom: 2px solid #fff; }
._v h3 strong.color-brown:after { border-color: #634f42; }


/* Scroll Icon */
.scroll-icon { z-index: 100; position: absolute; bottom: 7%; right: 0; left: 0; margin: auto; width: 50px; text-align: center; }
.scroll-icon__title { display: block; margin-bottom: 10px; line-height: 1; font-size: 12px; color: #fff; font-weight: 700; }
.scroll-icon__mouse { display: block; position: relative; margin: auto; width: 22px; height: 30px; background: url('/child/img/visual/scroll-mouse.png') center no-repeat; }
.scroll-icon__mouse::before { content: ''; position: absolute; top: 30px; right: 0; left: 0; margin: auto; width: 11px; height: 6px; background: url('/child/img/visual/scroll-arrow.png'); animation: scroll 1s linear infinite; }
@keyframes scroll {
    from { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
    to { -webkit-transform: translateY(15px); transform: translateY(15px); opacity: 0; }
}
@media(max-width:1024px){

}
@media(max-width:768px){
    .scroll-icon { bottom: 10%; }
	.scroll-icon__title { margin-bottom: 7px; font-size: 10px; }
    .scroll-icon__mouse { width: 22px; height: 30px; }
    .scroll-icon__mouse::before { top: 30px; }
}


/* Section */



/* Main Board */
.main-board-wrap:after { content: ''; display: block; clear: both; }
.main-board-left { float: left; padding-right: 50px; width: 50%; }
.main-board-right { float: left; padding-left: 50px; width: 50%; }
.bbs-main-table { width: 100%; border-top: 2px solid #000; }
.bbs-main-table tr { border-bottom: 1px solid #e5e5e5; }
.bbs-main-table tr th { padding: 15px; }
.bbs-main-table tr th a { display: block; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow:ellipsis; }
.bbs-main-table tr td { padding: 15px; }
.bbs-main-slide { padding-bottom: 10px; }
.bbs-main-slide .slick-dots { bottom: 0; }
.bbs-main-slide .slick-dots li { width: 12px; height: 12px; background: rgba(0,0,0,.25); border-radius: 50%; }
.bbs-main-slide .slick-dots li.slick-active { background: rgba(0,0,0,.7); }
._bbs { padding: 7px; }
.main-bbs-photo { overflow: hidden; display: block; position: relative; height: 170px; background: #F5F5F5; }
.main-bbs-photo img { position: absolute; left: 0; top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.main-bbs-title { display: block; margin: 15px 0; font-size: 18px; font-weight: 500; }

@media (max-width: 1024px){
    section { padding: 50px 0; }

    .visual-slide .slick-dots { bottom: 35%; }
    .visual-slide .slick-dots li.slick-active { width: 20px; height: 8px; }
    .visual-slide .slick-dots li.slick-active button { width: 20px; height: 8px; }
    .visual-slide .slick-dots li { width: 8px; height: 8px; }
    .visual-slide .slick-prev,
    .visual-slide .slick-next { display: none; }

    ._v { height: 670px; }
    ._v .text-wrap { padding-bottom: 50px; }
    ._v h3 { line-height: 40px; font-size: 36px; }
    ._v h3 span { display: block; margin-top: 10px; }
    ._v h3 strong:after { bottom: -5px; }

    .main-bbs-title,
    .bbs-main-table tr th,
    .bbs-main-table tr td { font-size: 15px; }
}

@media (max-width: 768px){
    ._v { height: 670px; }
    ._v h3 .title-medium8 { font-size: 24px; }
    ._v h3 .title-large { font-size: 32px; }
    ._v h3 .title-small8 { font-size: 20px; }
    .v-bg { width: 120%;
        -webkit-transform: translateX(-70px);
        -ms-transform: translateX(-70px);
        transform: translateX(-70px);
    }

    .main-board-left { padding: 10px 0; width: 100%; }
    .main-board-right { padding: 10px 0; width: 100%; }

    .main-bbs-title,
    .bbs-main-table tr th,
    .bbs-main-table tr td { font-size: 14px; }
    .bbs-main-table tr th a { max-width: 180px; }
}

section h4 { margin-bottom: 24px; text-align: center; line-height: 1; }
section h4 + p { margin-bottom: 60px; text-align: center; }

@media(max-width:1024px){
    section h4 { margin-bottom: 16px; }
    section h4 + p { margin-bottom: 30px; text-align: center; }

}
@media(max-width:768px){

}

/* section2 */

.main-product ul li { padding: 0 25px; text-align: center; }
.main-product ul li h5 { margin-top: 24px; line-height: 1.3; }
.main-product ul li .img { overflow: hidden; border-radius: 50%; font-size: 0; }
.main-product ul li img {-webkit-transition: all ease-in-out .15s; transition: all ease-in-out .15s; }
.main-product ul li:hover img {
    -webkit-transition: all ease-in-out .17s; transition: all ease-in-out .15s;
    -webkit-transform: scale(1.2); transform: scale(1.2); opacity: .7;}

@media(min-width:1025px){
    .main-product ul { display: flex; margin-top: 60px; }
    .main-product ul li:first-child { padding-left: 0; }
    .main-product ul li:last-child { padding-right: 0; }
}
@media(max-width:1024px){
    .main-product ul { margin: auto; }
    .main-product ul::after { content: ''; display: block; clear: both; }
    .main-product ul li { float: left; width: 50%; margin-bottom: 50px; }
    .main-product ul li h5 { margin-top: 16px; }

}
@media(max-width:768px){

}

/* section3 */
.brand-wrap { position: relative; }
.brand-btn-wrap { position: absolute; width: 100%; top: 56px; bottom: 0; left: 0; margin: auto; }
.brand-btn-wrap button {
    width: 50px; height: 50px;
    background-repeat: no-repeat; background-position: center;
    border: 1px solid #e5e5e5; border-radius: 50%;
}
.brand-btn-wrap button:first-child { margin-left: 0; }
.brand-prev { position: absolute; left:-80px; background-image: url('/child/img/main/client/client-arrow-prev.png'); }
.brand-next { position: absolute; right:-80px; background-image: url('/child/img/main/client/client-arrow-next.png'); }

.brand-list::after { content: ''; display: block; clear: both; }
.brand-list > div { float: left; padding: 5px 5px 5px 0; }

._bd { display: flex; }
._bd a { display: flex; }
._bd img { margin: auto; }

@media(min-width:1025px){
    .brand-list > div:nth-child(5),
    .brand-list > div:last-child { padding-right: 0px; }
}

@media (max-width: 1024px){
    .brand-wrap { padding: 0 0 30px; }
    .brand-btn-wrap { display: block; top: auto; bottom: 20px; right: 0; width: 118px;
        -webkit-transform: scale(.8, .8);
        -ms-transform: scale(.8, .8);
        transform: scale(.8, .8);
    }
    .brand { padding-left: 15px; padding-right: 15px; }
}
@media (max-width: 768px){
    .brand-list > div  { width: 50%; padding: 0; }
    ._bd { padding: 5px; }
    ._bd img { width: 85%; }
}


/* gallery bbs main: first full type */
.bbs-main-gallery { margin-top: 18px; }
.bbs-main-box > li { padding: 14px; }
._mg { overflow: hidden; display: block; position: relative; width: 100%; padding-top: calc(230 / 280 * 100%); text-align: center; background-repeat: no-repeat; background-position: center; background-size: cover; }
/* ._bm img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
} */
._mgchild:before { z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
._mtitle { z-index: 2; position: absolute; top: 52px; left: 0; width: 100%; padding: 15px; line-height: 27px; font-size: 19px; color: #fff; }
._minfo { z-index: 2; position: absolute; bottom: 20px; left: 0; width: 100%; font-size: 15px; color: rgba(255,255,255,.5); }
._minfo > span { display: inline-block; position: relative; vertical-align: top; padding: 0 8px; }
._minfo > span:first-child:before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 1px; height: 13px; background: rgba(255,255,255,.5); }
._mgchild:hover:before { background: rgba(238, 93, 24, 0.8); }

.first-bbs-main { padding: 0 !important; width: 100%; }
._mgfirst { overflow: visible; position: relative; width: 100%; padding-top: calc(475 / 585 * 100%); }
._mgfirst:before { content: ''; position: absolute; top: 30px; right: -95px; width: 120px; height: 2px; background: rgba(238, 93, 24, 0.4); }
._first-l { display: inline-block; vertical-align: top; padding: 14px; width: 50%; }
._first-r { display: inline-block; vertical-align: top; padding: 14px 14px 14px 54px; width: 50%; }
._first-title { display: block; margin: 68px 0 20px; line-height: 44px; font-size: 37px; }
._first-context { overflow: hidden; display: block; line-height: 24px; color: #666666; }
._first-info { display: block; margin-top: 70px; font-size: 15px; color: #999999; }
._first-info > span { display: inline-block; position: relative; vertical-align: top; padding: 0 8px; }
._first-info > span:first-child:before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; width: 1px; height: 13px; background: #e5e5e5; }

@media (max-width: 1024px){
    ._first-l { padding: 7px 0; width: 100%; }
    ._first-r { padding: 14px 0; width: 100%; }
    .bbs-main-box { padding: 7px 0; }
    .bbs-main-box > li { padding: 7px; }
    ._first-title { margin-top: 0; line-height: 38px; font-size: 30px; }
    ._first-context { font-size: 15px; }
    ._first-info { margin: 35px 0; font-size: 14px; }
    ._mgfirst:before { content: none; }
}
@media (max-width: 768px){
    ._first-title { margin-top: 0; line-height: 28px; font-size: 24px; }
    ._first-context { font-size: 14px; }
    ._first-info { margin: 35px 0; font-size: 13px; }
}