@charset "utf-8";

/* layout */
.main_wrap{position:relative; text-align:center;}
.w_inner{position:relative; max-width:1200px; margin:0 auto; padding:0 50px; overflow:hidden;}
section{position:relative; padding:60px 0;}
div[class*=grid]{overflow:hidden;}
.grid_con{position:relative; box-sizing:border-box;}
.grid3 .grid_con{float:left; width:calc((100% - 100px)/3); margin-right:50px;}
.grid3 .grid_con:nth-child(3n){margin-right:0;}
.grid4 .grid_con{float:left; width:calc((100% - 150px)/4); margin-right:50px;}
.grid4 .grid_con:nth-child(4n){margin-right:0;}
.square{position:relative; overflow:hidden;}
.square::after{content:''; display:block; padding-bottom:100%;}

/* default ui */
h2{position:relative; padding:24px 0; font-size:36px; font-weight:900;}
h3{font-size:24px; padding:10px 0;}
.pd0{padding:0;}
.des{font-size:24px;}
.fwb{font-weight:bold;}
.head_title::after {content:''; display:block; position:absolute; left:calc(50% - 20px); bottom:0; width:40px; height:4px; background-color:#D93838;}
.btn_top{position:fixed; right:24px; bottom:24px; display:inline-block; width:40px; height:40px; background:#fff url(/images/ico_red_arrow.png) no-repeat center center; background-size:20px; border:1px solid #ddd; border-radius:4px; box-shadow:0 0 0 0 #dadcdf, 0 4px 8px 0 rgba(0,0,0,.15); opacity:0; transition:all 0.3s ease-in-out; z-index:50;}
.btn_top.on{opacity:1; transition:all 0.3s ease-in-out;}

/* header */
header{position:sticky; top:0; left:0; width:100%; height:72px; padding:10px 0; overflow:hidden; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.5); background-color:rgba(0,0,0,0.2); z-index:999;}
header .logo a{position:absolute; left:50px; display:inline-block; width:100px; height:50px; background:url(/images/logo_wh.png) no-repeat center center; background-size:contain;}
header .gnb{float:right; overflow:hidden;}
header .gnb li{float:left; padding-left:20px;}
header .gnb li a{display:inline-block; padding:0 10px; font-size:20px; font-weight:700; color:#fff; line-height:50px;}

header.white{background-color:#fff; border-bottom:1px solid #ddd;}
header.white .logo a{background:url(/images/logo.png) no-repeat center center; background-size:contain;}
header.white .gnb li a{color:#000;}

/* swiper */
.swiper-button-next,
.swiper-button-prev{
    color:#D93838;
}

/*
content
*/
/* visual */
.visual{height:80vh; margin-top:-72px; background:url(/images/bg_03.jpg) no-repeat center center; background-size:cover;}
.visual::after{content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0.4);}
.visual .typo{position:absolute; top:calc(50% - 80px); width:100%; color:#fff; z-index:99;}
.visual .typo .slogan{padding:24px 0; font-size:64px; font-weight:900;}


/* product */
.product{background:url(/images/bg_01.jpg) no-repeat center center; background-size:cover;}
.product .w_inner{padding:60px 50px;}
.product .grid_con{height:430px; padding:25px; color:#fff; text-align:left; background-color:#e0e0e0;}
.product .grid_con::before{content:''; position:absolute; left:0; bottom:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.6); opacity:0;}
.product .grid_con .prd_info{position:relative; z-index:99;}

.product .grid_con:nth-of-type(1){background:url(/images/img_pd_01.jpg) no-repeat top right; background-size:cover;}
.product .grid_con:nth-of-type(2){background:url(/images/img_pd_02.jpg) no-repeat center center; background-size:cover;}
.product .grid_con:nth-of-type(3){background:url(/images/img_pd_03.jpg) no-repeat center center; background-size:cover;}

.product .grid_con p{font-size:15px; font-weight:900; color:#ccc;}
.product .grid_con ul{position:relative; padding-top:40px; opacity:0; transition:all 0.3s ease-in-out;}
.product .grid_con ul::before{content:''; position:absolute; top:20px; left:0; width:0; height:4px; background:#D93838;;}
.product .grid_con ul li{font-size:20px; line-height:40px;}
.product .grid_con ul li::before{content:''; display:inline-block; width:6px; height:6px; margin-right:12px; margin-bottom:5px; background:#fff; border-radius:6px;}

.product .grid_con:hover::before{opacity:1;}
.product .grid_con:hover ul{opacity:1;}
.product .grid_con:hover ul::before{width:100%;}

/* case */
.case{background-color:#efefef}
.case .w_inner{padding:80px 50px 40px;}
.case_slide .square img{position:absolute; top:50%; left:50%; height:100%; transform:translate(-50%, -50%);}
.case_slide p{padding:20px 0; font-size:20px; font-weight:700; letter-spacing:-0.04em;}


/* business */
.business{padding:60px 0 0;}
.tab_button{margin:40px 0;}
.tab_item{display:inline-block;}
.tab_item a{position:relative; display:inline-block; margin:0 20px; padding:14px 0; color:#999; font-size:20px; font-weight:900;}
.tab_item.active a{color:#000;}
.tab_item.active a::after{content:''; position:absolute; left:0; bottom:0; display:inline-block; width:100%; height:3px; background:#D93838;}

.tab_content{display:none; min-height:485px;}
.tab_content.active{display:block;}
.tab_content ul{overflow:hidden;}
.tab_content ul li{position:relative; display:inline-block; width:265px; height:100px; margin-top:30px; padding:20px 40px; overflow:hidden; box-sizing:border-box; border:1px solid #ddd;}
.tab_content ul li img{position:absolute; top:50%; left:50%; width:auto; height:58px; transform:translate(-50%, -50%);}
.tab_content ul li.horiz img{width:170px; height:auto;}
.tab_content ul li.vert img{height:45px;}
.tab_container .tab_content:nth-of-type(2),
.tab_container .tab_content:nth-of-type(3){
    padding:0 100px; box-sizing:border-box;
}

.tab_container .tab_content:nth-of-type(3) li{height:auto; padding:0; border:1px solid transparent;}
.tab_container .paper{position:relative; height:390px; padding:14px 0; box-sizing: border-box; border:1px solid #ddd;}
.tab_container .paper img{width:auto; height:100%;}
.tab_container .paper + p{padding:20px 0; font-size:18px; font-weight:900; letter-spacing:-0.04em; word-break:keep-all;}
.tab_container .btn_pdf{display:inline-block; width:16px; height:16px; margin-left:6px; background:url(/images/ico_download.png) no-repeat center center; background-size:contain;}

/* contact */
.map{width:460px; height:auto;}
.contact_con{display:flex; justify-content:center; align-items:flex-end; margin:80px 0 50px;}
.info_item{margin:50px 0 50px 50px; padding-left:70px; font-size:20px; text-align:left;}
.info_item.adress{background:url(/images/ico_adress.png) no-repeat top left; background-size:45px;}
.info_item.number{background:url(/images/ico_contact.png) no-repeat top left; background-size:45px;}

/* footer */
footer .info{padding:12px 0; color:#666; line-height:24px; background-color:#fff; border-top:1px solid #ddd;}
footer .info.info1{padding:24px 0;}
footer .info.info1 img{position:absolute; left:50px; width:100px;}
footer .ft_con span{display: inline-block; word-break:keep-all;}
footer .ft_con span::before{content:''; display:inline-block; width:2px; height:10px; margin:0 6px 0 2px; background:#999;} 
footer .ft_con span:first-child::before{display:none;}

@media screen and (max-width: 1080px) {
    h2{font-size:32px;}
    h3{font-size:20px;}
    .des{font-size:20px; word-break:keep-all;}
    .w_inner{width:100%; padding:0 30px; box-sizing:border-box;}
    .grid4 .grid_con{width:calc((100% - 100px)/3); margin-right:50px;}
    .grid4 .grid_con:nth-child(4n){margin-right:50px;}
    .grid4 .grid_con:nth-child(3n){margin-right:0;}
    .swiper-button-next{right:30px;}
    .swiper-button-prev{left:30px;}

    header{height:62px;}
    header .gnb{visibility:hidden;}
    header .logo a{left:30px; height:40px;}

    .visual .typo{padding:0 30px; box-sizing:border-box;}
    .visual .typo .slogan{font-size:50px;}

    .product .w_inner{padding:60px 30px;}
    .product .grid_con{width:100%; height:284px; padding:15px 25px; margin:0 0 15px 0;}
    .product .grid_con::before{opacity:1;}
    .product .grid_con ul{padding-top:32px; opacity:1;}
    .product .grid_con ul::before{width:100%; height:2px;}    
    .product .grid_con ul li{font-size:16px; line-height:32px;}
    .product .grid_con ul li::before{width:4px; height:4px; margin-bottom:4px;}
    
    .case .w_inner{padding:80px 80px 40px;}
    .case_slide p{font-size:18px;}

    .tab_container .tab_content:nth-of-type(2),
    .tab_container .tab_content:nth-of-type(3){
        padding:0 30px;
    }
    .tab_container .paper img{width:100%; height:auto;}
    .tab_container .paper + p{font-size:16px;}

    .contact_con{flex-direction:column; align-items:center;}
    .info_item{margin:50px 0; font-size:18px;}

    footer .info{padding:10px 0;}
    footer .info.info1{padding:16px 0;}
    footer .info.info1 img{visibility:hidden;}
    
}

@media screen and (max-width: 920px) {
    h2{padding:18px 0; font-size:24px;}
    h3{font-size:16px;}

    .product .grid_con{height:268px;}
    .product .grid_con p{font-size:12px;}
    .product .grid_con ul{padding-top:24px;}
    .product .grid_con ul::before{top:14px;}
    .product .grid_con ul li{font-size:14px;}

    .grid4 .grid_con,
    .tab_container .tab_content:nth-of-type(2) .grid3 .grid_con{
        width:calc((100% - 30px)/2); margin-right:30px;
    }
    .grid4 .grid_con:nth-child(3n),
    .tab_container .tab_content:nth-of-type(2) .grid3 .grid_con:nth-child(3n){
        margin-right:30px;
    }
    .grid4 .grid_con:nth-child(2n),
    .tab_container .tab_content:nth-of-type(2) .grid3 .grid_con:nth-child(2n){
        margin-right:0;
    }
    .tab_container .tab_content:nth-of-type(3) li{margin-top:10px;}
    .tab_container .paper{height:260px; border:0;}
    .tab_container .paper img{position:static; width:auto; height:100%; border:1px solid #ddd; transform:translate(0, 0);}
    .tab_container .paper + p{padding:10px 0; font-size:14px;}
}

@media screen and (max-width: 680px) {
    h2{font-size:20px;}
    .des{font-size:16px;}

    .visual .typo{padding:0 10px;}
    .visual .typo .slogan{font-size:32px;}

    .case .w_inner{padding:40px 50px 0;}
    .swiper-button-prev{left:10px;}
    .swiper-button-next{right:10px;}
    .case_slide p{font-size:14px;}

    .tab_button{margin:24px 0;}
    .tab_item a{margin:0 12px;font-size:16px;}
    .grid4 .grid_con,
    .tab_container .tab_content:nth-of-type(2) .grid3 .grid_con,
    .business .grid3 .grid_con{
        width:100%; margin-right:0;
    }
    .map{width:100%;}
}