@charset "utf-8";

    *{transition:all 0.5s}

@media all and (min-width:1281px){

    #wrap .pc-only{display:block !important}
    
    #wrap .mo-only{display:none !important}

    #wrap{position: relative;}

    #wrap .wrap{margin:0 auto;width:1200px;max-width:100%;}

    #header{position:fixed;top:0;left:0;z-index:100;width:100%;border-bottom: 1px solid rgba(255,255,255,0.25);transition: all 0.3s;}

    #header .logo{position:absolute;top: 50%;left: 50px;transform: translateY(-50%);}
    
    #header .global{margin:0 auto;width:1200px;max-width:100%;}
    
    #header .global .dp1{display:flex;align-items:center;justify-content: center;transition: all 0.5s;}
    
    #header .global .dp1 .dl1{position: relative;margin:0 20px;}
    
    #header .global .dp1 .dl1 .da1{position:relative;display:flex;padding:0 30px;line-height: 90px;font-size: 20px;color:#fffefe}
    
    #header .global .dp1 .dl1 .da1:hover{color:#498df2}
    
    #header .global .dp1 .dl1 .bg{display:none}
    
    #header .global .dp1 .dl1.active .da1{}
    
    #header .global .dp1 .dl1.active .dp2{margin:-10px 0 0 0;opacity:1;visibility:visible;}
    
    #header .global .dp2{position:absolute;top:100%;left: -20px;right: -20px;margin:-30px 0 0 0;opacity:0;visibility:hidden;transition:all 0.5s;background: rgb(60 124 219 / 90%);padding: 20px;border-radius: 12px;}

    #header .global .dp2 ul{}

    #header .global .dp2 li{}
    
    #header .global .dp2 li +li{}

    #header .global .dp2 li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 50px;font-size: 16px;color: rgba(255,255,255,0.95);}
    
    #header .global .dp2 li a:hover{color:#ffffff}
    
    #header .allmenu{position:absolute;top:0;right:0;}
    
    #header .allmenu #allmenu{display: flex;align-items: center;justify-content: center;width:90px;height:90px;}
    
    #header .allmenu #allmenu i{width:26px;height:20px;background:url("../img/icon_allmenu.png") no-repeat 50% 50% / contain}
    
    #header .category{position:absolute;top:100%;left:0;margin: 1px 0 0 0;width:100%;height:auto;background:rgba(0,0,0,0.5);display: none;}
    
    #header .category h2{}
    
    #header .category .cg1{display: flex;flex-wrap: wrap;padding: 50px 0;}
    
    #header .category .cg1 .cl1{flex: 1;}
    
    #header .category .cg1 .cl1 + .cl1{}
    
    #header .category .cg1 .cl1 .ca1{line-height: 30px;font-size: 20px;font-weight: bold;color: #fff;text-align: center;display: block;}
    
    #header .category .cg2{display: flex;flex-direction:column;padding: 20px 0;align-items: center;text-align: center;}
    
    #header .category .cg2 .cl2{}
    
    #header .category .cg2 .cl2 + .cl2{margin:10px 0 0 0;}
    
    #header .category .cg2 .cl2 .ca2{line-height: 24px;font-size: 16px;font-weight: 300;color: #fff;text-align: center;display: block;opacity: 0.75;}

    #header .category .cg2 .cl2 .ca2:hover{opacity:1;}
    
    #header .category .close{position: absolute;top: 0;right: 0;display: flex;align-items: center;justify-content: center;width: 90px;height: 90px;font-size: 32px;color: #fff;}

    #header.active{background:#ffffff}
    
    #header.active .global .dp1 .dl1 .da1{color:#142642;}
    
    #header.active .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}

    #header.fixed{background:#ffffff;box-shadow:0 0 25px rgb(20 38 66 / 0.05)}

    #header.fixed .global .dp1 .dl1 .da1{color:#142642;}

    #header.fixed .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}
    
    #footer{background: #142642;}

    #footer .wrap{}

    #footer .tnb{border-bottom:1px solid rgba(255,255,255,0.25)}

    #footer .tnb .wrap{display:flex;height:85px;align-items:center;}
    
    #footer .tnb .link{}
    
    #footer .tnb .link a{line-height: 24px;font-size: 18px;color: #fff;margin: 0 16px 0 0;}
    
    #footer .tnb .link a + a{}

    #footer .tnb .family{margin-left:auto;position:relative;border-left: 1px solid rgba(255,255,255,0.25);border-right: 1px solid rgba(255,255,255,0.25);}

    #footer .tnb .family > button{display:flex;padding: 0 30px;width: 240px;height:85px;background:transparent;align-items:center;justify-content:center;font-size:20px;color:#fff;}
    
    #footer .tnb .family > button i{margin-left:auto;width:13px;height:7px;background:url("../img/icon_familysite.png") no-repeat 50% 50% / contain}
    
    #footer .tnb .family > button.active i{transform:rotate(180deg)}
    
    #footer .tnb .family ul{display:none;position:absolute;bottom: 100%;left:0;width:100%;height:auto;margin: 0 0 1px 0;background: #ffffff;border: 1px solid #e0e0e0;}
    
    #footer .tnb .family li{}

    #footer .tnb .family li + li{border-top:1px solid #e0e0e0;}
    
    #footer .tnb .family li a{display:flex;padding:0 16px;height:50px;align-items:center;font-size:16px;}
    
    #footer .tnb .family li a:hover{background:#fafafa}

    #footer .footer{padding:50px 0;}
    
    #footer .footer address{width: 50%}

    #footer .footer address > div{display: flex;flex-wrap: wrap;}

    #footer .footer address p{position: relative;margin: 0 10px 5px 0;line-height: 22px;font-size: 16px;color: #ffffff;}

    #footer .footer address p + p{padding:0 0 0 10px;}
    
    #footer .footer address p + p:before{content:'';position:absolute;top: 6px;left:0;width:1px;height:10px;background:rgba(255,255,255,0.25)}
    
    #footer .footer cite{margin:20px 0 0 0;line-height:20px;font-size:14px;color:rgba(255,255,255,0.5)}

    #container{position: relative;float: none;background: #7b8a89;margin: 0;width: 100%;min-height: 100vh;height: auto;}

    #index{}

    #index .visual{position:relative;height:945px;display:flex;align-items:center;}

    #index .visual:after{content:'';position:absolute;top:0;right:90px;width:1px;height:100%;border-left:1px solid rgba(255,255,255,0.25);z-index: 10;}
    
    #index .visual .wrap{position:relative;z-index:2;}
    
    #index .visual .bg{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;pointer-events: none;}
    
    #index .visual .bg img{display:block;width:100%;height:100%;object-fit:cover;}

    #index .visual .eng{margin: 0 0 20px 0;line-height: 32px;font-size: 24px;font-weight: bold;color: rgba(255,255,255,0.5);}

    #index .visual .tit{line-height: 78px;font-size: 60px;font-weight: bold;color: #ffffff;}

    #index .business{position:relative;padding:140px 0;background:#ffffff;overflow: hidden;}

    #index .business .wrap{display:flex;}

    #index .business .title{width: 400px;margin: 0 45px 0 0;padding: 70px 0;flex-shrink: 0;position: relative;z-index: 3;}

    #index .business .title .eng{position: relative;line-height: 68px;font-size: 50px;font-weight: bold;}

    #index .business .title .eng:before{content:'';position:absolute;bottom:100%;left:0;width:16px;height:16px;background:#498df2;border-radius:16px;}
    
    #index .business .title .tit{line-height: 40px;font-size: 24px;font-weight: 500;color: #000000;}
    
    #index .business .title .ctrl{margin-top:50px;padding-top:50px;display:flex;align-items:center}
    
    #index .business .title .ctrl button{margin:0 18px 0 0;width:74px;height:74px;display:flex;align-items:center;justify-content:center;border-radius:74px;border:1px solid #d3d3d3}
    
    #index .business .title .ctrl button i{width: 15px;height: 25px;}
    
    #index .business .title .ctrl button:hover{border-color:#498df2}
    
    #index .business .title .ctrl .business_slider_prev i{background: url("../img/icon_slider_prev.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_prev:hover i{background: url("../img/icon_slider_prev_hover.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_next i{background:url("../img/icon_slider_next.png") no-repeat 50% 50% / contain}
    
    #index .business .title .ctrl .business_slider_next:hover i{background:url("../img/icon_slider_next_hover.png") no-repeat 50% 50% / contain}

    #index .business .slider{position: relative;z-index: 2;width: calc( 745px + (100vw - 1200px) / 2);overflow: hidden;flex-shrink: 0;}
    
    #index .business .slider .swiper-slide{width: 450px;height: 570px;}
    
    #index .business .slider .swiper-slide a{position: relative;}
    
    #index .business .slider .swiper-slide .num{position:absolute;z-index: 5;bottom: -14px;right:0;line-height: 1;font-size: 130px;font-weight: 900;-webkit-text-stroke: 1px #ffffff;color: transparent;letter-spacing: -5px;}

    #index .business .slider .swiper-slide .img{position: relative;z-index: 4;height:100%;background: #000000;}
    
    #index .business .slider .swiper-slide .img img{display:block;width:100%;height:100%;object-fit:cover;opacity: 0.8;}
    
    #index .business .slider .swiper-slide .con{position: absolute;z-index: 5;top: 0;left: 0;padding: 80px 50px;}
    
    #index .business .slider .swiper-slide .con .eng{line-height: 24px;font-size: 18px;font-weight: 300;color: rgba(255,255,255,0.75);margin: 0 0 12px 0;}
    
    #index .business .slider .swiper-slide .con .tit{line-height: 40px;font-size: 32px;font-weight: bold;color: #FFFFFF;margin: 0 0 24px 0;}
        
    #index .business .slider .swiper-slide .con .txt{line-height: 22px;font-size: 16px;font-weight: 300;color: #ffffff;}
    
    #index .company{position:relative;padding:140px 0;background: url("../img/company_bg.png") no-repeat 50% 50% / cover;}

    #index .company .title{position: relative;z-index: 3;text-align: center;display: flex;flex-direction: column;align-items: center;margin: 0 0 100px;}

    #index .company .title .eng{position: relative;line-height: 68px;font-size: 50px;font-weight: bold;color: #ffffff;}

    #index .company .title .eng:before{content:'';position:absolute;bottom:100%;left:0;width:16px;height:16px;background:#498df2;border-radius:16px;}
                                    
    #index .company .title .tit{line-height: 40px;font-size: 24px;font-weight: 500;color: #ffffff;}
    
    #index .company .content{}
        
    #index .company .content ul{display:flex;align-items: flex-start;}

    #index .company .content li{flex:1;position:relative;}

    #index .company .content li:nth-child(even){margin-top:170px}
    
    #index .company .content li:nth-child(1):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: 85px 0 0 0;transform: rotate(30deg);opacity: 0.75;}

    #index .company .content li:nth-child(2):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: -75px 0 0 0;transform: rotate(-33deg);opacity: 0.75;}

    #index .company .content li:nth-child(3):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: 85px 0 0 0;transform: rotate(30deg);opacity: 0.75;}

    #index .company .content li .circle{flex-direction:column;display:flex;justify-content:center;text-align: center;align-items:center;min-height: 270px;}

    #index .company .content li .circle:before{content:'';position:absolute;width:270px;height:270px;z-index:2;border-radius:270px;background:#ffffff}
    
    #index .company .content li .circle:after{content:'';position:absolute;width: 290px;height: 290px;z-index:1;border-radius: 290px;background:#ffffff;opacity: 0.1;}
    
    #index .company .content li .num{position: relative;z-index: 3;line-height: 1;font-size: 60px;font-weight: 900;color: #498df2;}
    
    #index .company .content li .num em{font-size:50px;text-transform:uppercase}
    
    #index .company .content li .tit{position: relative;z-index: 3;line-height: 1;font-size: 30px;font-weight: 900;color: #000000;margin: 20px 0 10px 0;}

    #index .company .content li .txt{position: relative;z-index: 3;line-height: 1;font-size: 16px;color: #585858;    }
    
    #index .corporate{position:relative;padding:140px 0;background: #c1d0e0;}

    #index .corporate .title{position: relative;z-index: 3;text-align: center;display: flex;flex-direction: column;align-items: center;margin: 0 0 80px;}

    #index .corporate .title .eng{position: relative;line-height: 68px;font-size: 50px;font-weight: bold;color: #000000;}

    #index .corporate .title .eng:before{content:'';position:absolute;bottom:100%;left:0;width:16px;height:16px;background:#498df2;border-radius:16px;}
                                    
    #index .corporate .title .tit{line-height: 40px;font-size: 24px;font-weight: 500;color: #000000;}

    #index .corporate .content{}
    
    #index .corporate .content ul{display:flex;}

    #index .corporate .content li{flex:1;}
    
    #index .corporate .content li + li{margin-left:20px;}

    #index .corporate .content li a{position:relative;display: block;background:#000000}
    
    #index .corporate .content li a > img{display: block;width: 100%;height: 500px;object-fit: cover;}

    #index .corporate .content li a > div{position:absolute;bottom: -40px;left:0;width: 100%;padding: 50px;text-align: center;opacity: 0;visibility: hidden;transition: all 0.5s;}

    #index .corporate .content li a > div strong{line-height: 1;font-size: 36px;font-weight: bold;color: #ffffff;}

    #index .corporate .content li a > div p{margin: 15px 0 0 0;font-size: 24px;font-weight: 500;color: rgba(255,255,255,0.5);}
    
    #index .corporate .content li a:hover > div{bottom:0;opacity:1;visibility:visible}
    
    #index .latest{position:relative;padding:140px 0;background:#ffffff}
    
    #index .latest .wrap{display:flex}

    #index .latest .board{position:relative;flex:1;background: #fcfcfc;border: 1px solid #f0f0f0;}
    
    #index .latest .board .tabs{border-bottom: 1px solid #f0f0f0;padding: 0 20px;}
    
    #index .latest .board .tabs ul{display:flex;align-items:center;height:85px;}
    
    #index .latest .board .tabs li{margin: 0 30px 0 0;}

    #index .latest .board .tabs li a{position:relative;display:flex;align-items:center;height:85px;padding:0 10px;font-size:28px;letter-spacing:-1px;color:#a1a1a1;}

    #index .latest .board .tabs li.active a{color:#000000;font-weight:bold}

    #index .latest .board .tabs li.active a:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:#498df2;}
    
    #index .latest .board .cont{}
    
    #index .latest .board .tab-box{display:none;padding:10px 20px;}
    
    #index .latest .board .tab-box.active{display:block;}
    
    #index .latest .board .tab-box ul{}
    
    #index .latest .board .tab-box li{}
     
    #index .latest .board .tab-box li + li{border-top:1px solid #f0f0f0;}

    #index .latest .board .tab-box li a{display:flex;align-items:center;height: 72px;padding: 0 25px;}
    
    #index .latest .board .tab-box li p{flex:1;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;padding: 0 20px 0 0;font-size: 18px;font-weight: 500;color: #000000;}
    
    #index .latest .board .tab-box li em{flex-shrink:0;font-size: 16px;color: #8b8b8b;}
    
    #index .latest .board .more{position: absolute;top:0;right:0;width: 85px;height: 85px;display: flex;align-items: center;justify-content: center;}
    
    #index .latest .board .more a{height: 40px;width: 40px;display: flex;align-items: center;justify-content: center;padding: 0;}

    #index .latest .board .more a i {display: block;width: 28px;height: 28px;background: url("../img/icon_more_button.png") no-repeat 50% 50% / contain;}

    #index .latest .customer{margin-left:30px;width:345px;background:#498df2;display: flex;flex-direction: column;}
    
    #index .latest .customer .tit{display:flex;align-items:center;height:85px;padding:30px 20px;border-bottom:1px solid rgba(255,255,255,0.25);font-size: 28px;font-weight: bold;color: #ffffff;}
    
    #index .latest .customer .con{padding: 50px 30px 30px;display: flex;flex-direction: column;}
    
    #index .latest .customer .con strong{line-height: 40px;font-size: 32px;font-weight: bold;color: #ffffff;letter-spacing: -1px;margin: 0 0 10px 0;}
    
    #index .latest .customer .con span{line-height: 32px;font-size: 26px;color: #ffffff;letter-spacing: -1px;margin: 0 0 40px 0;}

    #index .latest .customer .con p{line-height: 24px;font-size: 18px;font-weight: 400;color: rgba(255,255,255,0.9);}
    
    #index .latest .customer .act{margin:auto 0 0 0;padding: 30px;display: flex;align-items: center;justify-content: center;}

    #index .latest .customer .act a{flex:1;display:flex;align-items:center;justify-content:center;height:60px;border:1px solid rgba(255,255,255,0.5);font-size:18px;color:rgba(255,255,255,1)}

    #index .latest .customer .act a:hover{background:rgba(255,255,255,0.15)}

    #index .latest .customer .act a + a{margin-left:10px;}

    #index .inquiry{position:relative;padding: 85px 0;background: url("../img/inquiry_bg.png") no-repeat 50% 50% / cover;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
        
    #index .inquiry .tit{display: flex;align-items: center;line-height: 1;font-size: 46px;font-weight: bold;color: #ffffff;letter-spacing: -2px;margin: 0 0 15px 0;}

    #index .inquiry .txt{display: flex;align-items: center;font-size: 22px;font-weight: 500;color: #ffffff;letter-spacing: -2px;margin: 0 0 50px 0;}

    #index .inquiry .act{}

    #index .inquiry .act a{display: flex;align-items: center;justify-content: center;text-align: center;width: 200px;height: 58px;border: 1px solid rgba(255,255,255,0.5);font-size: 18px;color: #fff;}

    #index .inquiry .act a:hover{background:rgba(255,255,255,0.1)}
    
}
@media (max-width:1280px) and (min-width:768px) {
    
    #wrap .pc-only{display:block !important}
    
    #wrap .mo-only{display:none !important}
    
    #wrap{position: relative;}
    
    #wrap .wrap{margin:0 auto;width:1200px;max-width:100%;}
    
    #header{position:fixed;top:0;left:0;z-index:100;width:100%;border-bottom: 1px solid rgba(255,255,255,0.25);transition: all 0.3s;height: 70px;}
    
    #header .logo{position:absolute;top: 50%;left: 20px;transform: translateY(-50%);width: auto;height: 30px;}
    
    #header .logo img{display:block;width: auto;height: 100%;}
    
    #header .global{margin:0 auto;width:1200px;max-width:100%;display: none;}
    
    #header .global .dp1{display:flex;align-items:center;justify-content: center;transition: all 0.5s;}
    
    #header .global .dp1 .dl1{position: relative;margin:0 20px;}
    
    #header .global .dp1 .dl1 .da1{position:relative;display:flex;padding:0 30px;line-height: 90px;font-size: 20px;color:#fffefe}
    
    #header .global .dp1 .dl1 .da1:hover{color:#498df2}
    
    #header .global .dp1 .dl1 .bg{display:none}
    
    #header .global .dp1 .dl1.active .da1{}
    
    #header .global .dp1 .dl1.active .dp2{margin:-10px 0 0 0;opacity:1;visibility:visible;}
    
    #header .global .dp2{position:absolute;top:100%;left: -20px;right: -20px;margin:-30px 0 0 0;opacity:0;visibility:hidden;transition:all 0.5s;background: rgb(60 124 219 / 90%);padding: 20px;border-radius: 12px;}
    
    #header .global .dp2 ul{}
    
    #header .global .dp2 li{}
    
    #header .global .dp2 li +li{}
    
    #header .global .dp2 li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 50px;font-size: 16px;color: rgba(255,255,255,0.95);}
    
    #header .global .dp2 li a:hover{color:#ffffff}
    
    #header .allmenu{position:absolute;top:0;right:0;}
    
    #header .allmenu #allmenu{display: flex;align-items: center;justify-content: center;width: 70px;height: 70px;}
    
    #header .allmenu #allmenu i{width:26px;height:20px;background:url("../img/icon_allmenu.png") no-repeat 50% 50% / contain}
    
    #header .category{position:absolute;top:100%;left:0;margin: 1px 0 0 0;width:100%;height: calc(100vh - 70px);background:rgba(0,0,0,0.5);display: none;overflow-y: auto;}
    
    #header .category h2{}
    
    #header .category .cg1{display: flex;flex-direction: column;padding: 50px 20px;}
    
    #header .category .cg1 .cl1{flex: 1;}
    
    #header .category .cg1 .cl1 + .cl1{margin: 30px 0 0 0;}
    
    #header .category .cg1 .cl1 .ca1{line-height: 30px;font-size: 20px;font-weight: bold;color: #fff;text-align: center;display: block;}
    
    #header .category .cg2{display: flex;flex-direction:column;padding: 20px 0;align-items: center;text-align: center;}
    
    #header .category .cg2 .cl2{}
    
    #header .category .cg2 .cl2 + .cl2{margin:10px 0 0 0;}
    
    #header .category .cg2 .cl2 .ca2{line-height: 24px;font-size: 16px;font-weight: 300;color: #fff;text-align: center;display: block;opacity: 0.75;}
    
    #header .category .cg2 .cl2 .ca2:hover{opacity:1;}
    
    #header .category .close{position: absolute;top: 0;right: 0;display: flex;align-items: center;justify-content: center;width: 70px;height: 70px;font-size: 22px;color: #fff;}
    
    #header.active{background:#ffffff}
    
    #header.active .global .dp1 .dl1 .da1{color:#142642;}
    
    #header.active .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}
    
    #header.fixed{background:#ffffff;box-shadow:0 0 25px rgb(20 38 66 / 0.05)}
    
    #header.fixed .global .dp1 .dl1 .da1{color:#142642;}
    
    #header.fixed .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}
    
    #footer{background: #142642;}
    
    #footer .wrap{}
    
    #footer .tnb{border-bottom:1px solid rgba(255,255,255,0.25)}
    
    #footer .tnb .wrap{display:flex;}
    
    #footer .tnb .link{padding: 20px 20px;display: flex;flex-wrap: wrap;}
    
    #footer .tnb .link a{line-height: 30px;font-size: 15px;color: #fff;margin: 0 10px 0 0;}
    
    #footer .tnb .link a + a{}
    
    #footer .tnb .family{margin-left:auto;position:relative;border-left: 1px solid rgba(255,255,255,0.25);flex-shrink: 0;}
    
    #footer .tnb .family > button{display:flex;padding: 0 20px;width: 230PX;height: 70px;background:transparent;align-items:center;justify-content:center;font-size: 16px;color:#fff;}
    
    #footer .tnb .family > button i{margin-left:auto;width:13px;height:7px;background:url("../img/icon_familysite.png") no-repeat 50% 50% / contain}
    
    #footer .tnb .family > button.active i{transform:rotate(180deg)}
    
    #footer .tnb .family ul{display:none;position:absolute;bottom: 100%;left:0;width:100%;height:auto;margin: 0 0 1px 0;background: #ffffff;border: 1px solid #e0e0e0;}
    
    #footer .tnb .family li{}
    
    #footer .tnb .family li + li{border-top:1px solid #e0e0e0;}
    
    #footer .tnb .family li a{display:flex;padding:0 16px;height:50px;align-items:center;font-size:16px;}
    
    #footer .tnb .family li a:hover{background:#fafafa}
    
    #footer .footer{padding: 30px 20px;}
    
    #footer .footer address{}
    
    #footer .footer address > div{display: flex;flex-wrap: wrap;}
    
    #footer .footer address p{position: relative;margin: 0 10px 5px 0;line-height: 24px;font-size: 16px;color: #ffffff;}
    
    #footer .footer address p + p{padding:0 0 0 10px;}
    
    #footer .footer address p + p:before{content:'';position:absolute;top: 8px;left:0;width:1px;height:10px;background:rgba(255,255,255,0.25)}
    
    #footer .footer cite{display: block;margin: 20px 0 0 0;line-height:20px;font-size: 12px;color:rgba(255,255,255,0.5)}
    
    #container{position: relative;float: none;background: #7b8a89;margin: 0;width: 100%;min-height: 100vh;height: auto;}
    
    #index{}
    
    #index .visual{position:relative;height: 100vh;display:flex;align-items:center;}
    
    #index .visual:after{content:'';position:absolute;top:0;right: 70px;width:1px;height:100%;border-left:1px solid rgba(255,255,255,0.25);z-index: 10;}
    
    #index .visual .wrap{position:relative;z-index:2;padding: 20px;}
    
    #index .visual .bg{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;pointer-events: none;}
    
    #index .visual .bg img{display:block;width:100%;height:100%;object-fit:cover;}
    
    #index .visual .eng{margin: 0 0 20px 0;line-height: 1.4;font-size: 22px;font-weight: bold;color: rgba(255,255,255,0.5);}
    
    #index .visual .tit{line-height: 1.4;font-size: 42px;font-weight: bold;color: #ffffff;}
    
    #index .business{position:relative;padding: 50px 0 50px 20px;background:#ffffff;overflow: hidden;}
    
    #index .business .wrap{
    display: flex;
}
    
   #index .business .title{width: 40%;padding: 70px 0;flex-shrink: 0;position: relative;z-index: 3;}

    #index .business .title .eng{position: relative;line-height: 46px;font-size: 36px;font-weight: bold;margin: 0 0 10px 0;}

    #index .business .title .eng:before{content:'';position:absolute;bottom:100%;left:0;width:16px;height:16px;background:#498df2;border-radius:16px;}
    
    #index .business .title .tit{line-height: 30px;font-size: 18px;font-weight: 500;color: #000000;}
    
    #index .business .title .ctrl{margin-top:50px;padding-top:50px;display:flex;align-items:center}
    
    #index .business .title .ctrl button{margin: 0 10px 0 0;width: 50px;height: 50px;display:flex;align-items:center;justify-content:center;border-radius:74px;border:1px solid #d3d3d3}
    
    #index .business .title .ctrl button i{width: 9px;height: 25px;}
    
    #index .business .title .ctrl button:hover{border-color:#498df2}
    
    #index .business .title .ctrl .business_slider_prev i{background: url("../img/icon_slider_prev.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_prev:hover i{background: url("../img/icon_slider_prev_hover.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_next i{background:url("../img/icon_slider_next.png") no-repeat 50% 50% / contain}
    
    #index .business .title .ctrl .business_slider_next:hover i{background:url("../img/icon_slider_next_hover.png") no-repeat 50% 50% / contain}

    #index .business .slider{position: relative;z-index: 2;width: 60%;overflow: hidden;flex-shrink: 0;}
    
    #index .business .slider .swiper-slide{width: 450px;height: 570px;}
    
    #index .business .slider .swiper-slide a{position: relative;}
    
    #index .business .slider .swiper-slide .num{position:absolute;z-index: 5;bottom: -14px;right:0;line-height: 1;font-size: 130px;font-weight: 900;-webkit-text-stroke: 1px #ffffff;color: transparent;letter-spacing: -5px;}

    #index .business .slider .swiper-slide .img{position: relative;z-index: 4;height:100%;background: #000000;}
    
    #index .business .slider .swiper-slide .img img{display:block;width:100%;height:100%;object-fit:cover;opacity: 0.8;}
    
    #index .business .slider .swiper-slide .con{position: absolute;z-index: 5;top: 0;left: 0;padding: 80px 50px;}
    
    #index .business .slider .swiper-slide .con .eng{line-height: 24px;font-size: 18px;font-weight: 300;color: rgba(255,255,255,0.75);margin: 0 0 12px 0;}
    
    #index .business .slider .swiper-slide .con .tit{line-height: 40px;font-size: 32px;font-weight: bold;color: #FFFFFF;margin: 0 0 24px 0;}
        
    #index .business .slider .swiper-slide .con .txt{line-height: 22px;font-size: 16px;font-weight: 300;color: #ffffff;}
    
    #index .company{position:relative;padding: 50px 20px;background: url("../img/company_bg.png") no-repeat 50% 50% / cover;overflow: hidden;}
    
    #index .company .title{margin: 0 0 30px 0;padding: 16px 0 0 0;flex-shrink: 0;position: relative;z-index: 3;text-align: center;}
    
    #index .company .title .eng{position: relative;line-height: 46px;font-size: 36px;font-weight: bold;color: #ffffff;margin: 0 0 10px 0;}
    
    #index .company .title .eng:before{content:'';position:absolute;bottom:100%;left: 50%;width: 12px;height: 12px;background:#498df2;border-radius:16px;transform: translateX(-50%);}
    
    #index .company .title .tit{line-height: 30px;font-size: 18px;font-weight: 500;color: #ffffff;}
    
    #index .company .content{}
        
    #index .company .content ul{display:flex;align-items: flex-start;}

    #index .company .content li{flex:1;position:relative;}

    #index .company .content li:nth-child(even){margin-top:170px}
    
    #index .company .content li:nth-child(1):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: 85px 0 0 0;transform: rotate(30deg);opacity: 0.75;}

    #index .company .content li:nth-child(2):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: -75px 0 0 0;transform: rotate(-33deg);opacity: 0.75;}

    #index .company .content li:nth-child(3):before{content:'';position:absolute;top:50%;left:50%;width:100%;height:1px;background:#ffffff;margin: 85px 0 0 0;transform: rotate(30deg);opacity: 0.75;}

    #index .company .content li .circle{flex-direction:column;display:flex;justify-content:center;text-align: center;align-items:center;min-height: 25vw;}

    #index .company .content li .circle:before{content:'';position:absolute;width: 25vw;height: 25vw;z-index:2;border-radius:270px;background:#ffffff}
    
    #index .company .content li .circle:after{content:'';position:absolute;width: 27vw;height: 27vw;z-index:1;border-radius: 290px;background:#ffffff;opacity: 0.1;}
    
    #index .company .content li .num{position: relative;z-index: 3;line-height: 1;font-size: 46px;font-weight: 900;color: #498df2;}
    
    #index .company .content li .num em{font-size: 30px;text-transform:uppercase}
    
    #index .company .content li .tit{position: relative;z-index: 3;line-height: 1;font-size: 24px;font-weight: 900;color: #000000;margin: 20px 0 10px 0;}

    #index .company .content li .txt{position: relative;z-index: 3;line-height: 1;font-size: 15px;color: #585858;}

    
    #index .corporate{position:relative;padding: 50px 20px;background: #c1d0e0;}
    
    #index .corporate .title{margin: 0 0 30px 0;padding: 16px 0 0 0;flex-shrink: 0;position: relative;z-index: 3;text-align: center;}
    
    #index .corporate .title .eng{position: relative;line-height: 46px;font-size: 36px;font-weight: bold;margin: 0 0 10px 0;}
    
    #index .corporate .title .eng:before{content:'';position:absolute;bottom:100%;left: 50%;width: 12px;height: 12px;background:#498df2;border-radius:16px;transform: translateX(-50%);}
    
    #index .corporate .title .tit{line-height: 30px;font-size: 18px;font-weight: 500;color: #000000;}
    
    #index .corporate .content{}
    
    #index .corporate .content ul{display:flex;}
    
    #index .corporate .content li{flex:1;}
    
    #index .corporate .content li + li{margin-left: 10px;}
    
    #index .corporate .content li a{position:relative;display: block;background:#000000}
    
    #index .corporate .content li a > img{display: block;width: 100%;height: 38vw;object-fit: cover;opacity: 0.8;}
    
    #index .corporate .content li a > div{position:absolute;bottom: 0;left:0;width: 100%;padding: 20px;text-align: center;transition: all 0.5s;}
    
    #index .corporate .content li a > div strong{line-height: 1;font-size: 24px;font-weight: bold;color: #ffffff;}
    
    #index .corporate .content li a > div p{margin: 15px 0 0 0;font-size: 16px;font-weight: 500;color: rgba(255,255,255,0.5);}
    
    #index .latest{position:relative;padding: 50px 20px;background:#ffffff}
    
    #index .latest .wrap{display:flex;}
    
    #index .latest .board{position:relative;background: #fcfcfc;border: 1px solid #f0f0f0;width: 70%;}
    
    #index .latest .board .tabs{border-bottom: 1px solid #f0f0f0;padding: 0 20px;}
    
    #index .latest .board .tabs ul{display:flex;align-items:center;}
    
    #index .latest .board .tabs li{margin: 0 30px 0 0;}
    
    #index .latest .board .tabs li a{position:relative;display:flex;align-items:center;height: 50px;padding: 0 8px;font-size: 16px;letter-spacing:-1px;color:#a1a1a1;}
    
    #index .latest .board .tabs li.active a{color:#000000;font-weight:bold}
    
    #index .latest .board .tabs li.active a:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:#498df2;}
    
    #index .latest .board .cont{}
    
    #index .latest .board .tab-box{display:none;padding: 10px 0;}
    
    #index .latest .board .tab-box.active{display:block;}
    
    #index .latest .board .tab-box ul{}
    
    #index .latest .board .tab-box li{}
    
    #index .latest .board .tab-box li + li{border-top:1px solid #f0f0f0;}
    
    #index .latest .board .tab-box li a{display:flex;align-items:center;height: 50px;padding: 0 20px;}
    
    #index .latest .board .tab-box li p{flex:1;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;padding: 0 20px 0 0;font-size: 15px;font-weight: 500;color: #000000;}
    
    #index .latest .board .tab-box li em{flex-shrink:0;font-size: 11px;color: #8b8b8b;}
    
    #index .latest .board .more{position: absolute;top:0;right:0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;}
    
    #index .latest .board .more a{height: 40px;width: 40px;display: flex;align-items: center;justify-content: center;padding: 0;}
    
    #index .latest .board .more a i {display: block;width: 18px;height: 18px;background: url("../img/icon_more_button.png") no-repeat 50% 50% / contain;}
    
    #index .latest .customer{margin-left: 20px;background:#498df2;display: flex;flex-direction: column;width: 30%;}
    
    #index .latest .customer .tit{display:flex;align-items:center;height: 50px;padding: 10px 20px;border-bottom:1px solid rgba(255,255,255,0.25);font-size: 16px;font-weight: bold;color: #ffffff;}
    
    #index .latest .customer .con{padding: 20px;display: flex;flex-direction: column;}
    
    #index .latest .customer .con strong{line-height: 40px;font-size: 24px;font-weight: bold;color: #ffffff;letter-spacing: -1px;margin: 0 0 10px 0;}
    
    #index .latest .customer .con span{line-height: 1.4;font-size: 18px;color: #ffffff;letter-spacing: -1px;margin: 0 0 20px 0;}
    
    #index .latest .customer .con p{line-height: 1.4;font-size: 14px;font-weight: 400;color: rgba(255,255,255,0.9);}
    
    #index .latest .customer .act{margin:auto 0 0 0;padding: 20px;display: flex;align-items: center;justify-content: center;}
    
    #index .latest .customer .act a{flex:1;display:flex;align-items:center;justify-content:center;height: 46px;border:1px solid rgba(255,255,255,0.5);font-size: 15px;color:rgba(255,255,255,1)}
    
    #index .latest .customer .act a:hover{background:rgba(255,255,255,0.15)}
    
    #index .latest .customer .act a + a{margin-left:10px;}
    
    #index .inquiry{position:relative;padding: 50px 20px;background: url("../img/inquiry_bg.png") no-repeat 50% 50% / cover;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
    
    #index .inquiry .tit{display: flex;align-items: center;line-height: 36px;font-size: 26px;font-weight: bold;color: #ffffff;letter-spacing: -2px;margin: 0 0 15px 0;}
    
    #index .inquiry .txt{display: flex;align-items: center;font-size: 16px;font-weight: 500;color: #ffffff;letter-spacing: -1px;margin: 0 0 50px 0;}
    
    #index .inquiry .act{}
    
    #index .inquiry .act a{display: flex;align-items: center;justify-content: center;text-align: center;width: 160px;height: 46px;border: 1px solid rgba(255,255,255,0.5);font-size: 15px;color: #fff;}
    
    #index .inquiry .act a:hover{background:rgba(255,255,255,0.1)}

}
@media all and (max-width:767px){

    #wrap .pc-only{display:block !important}
    
    #wrap .mo-only{display:none !important}
    
    #wrap{position: relative;}
    
    #wrap .wrap{margin:0 auto;width:1200px;max-width:100%;}
    
    #header{position:fixed;top:0;left:0;z-index:100;width:100%;border-bottom: 1px solid rgba(255,255,255,0.25);transition: all 0.3s;height: 70px;}
    
    #header .logo{position:absolute;top: 50%;left: 20px;transform: translateY(-50%);width: auto;height: 24px;}
    
    #header .logo img{display:block;width: auto;height: 100%;}
    
    #header .global{margin:0 auto;width:1200px;max-width:100%;display: none;}
    
    #header .global .dp1{display:flex;align-items:center;justify-content: center;transition: all 0.5s;}
    
    #header .global .dp1 .dl1{position: relative;margin:0 20px;}
    
    #header .global .dp1 .dl1 .da1{position:relative;display:flex;padding:0 30px;line-height: 90px;font-size: 20px;color:#fffefe}
    
    #header .global .dp1 .dl1 .da1:hover{color:#498df2}
    
    #header .global .dp1 .dl1 .bg{display:none}
    
    #header .global .dp1 .dl1.active .da1{}
    
    #header .global .dp1 .dl1.active .dp2{margin:-10px 0 0 0;opacity:1;visibility:visible;}
    
    #header .global .dp2{position:absolute;top:100%;left: -20px;right: -20px;margin:-30px 0 0 0;opacity:0;visibility:hidden;transition:all 0.5s;background: rgb(60 124 219 / 90%);padding: 20px;border-radius: 12px;}
    
    #header .global .dp2 ul{}
    
    #header .global .dp2 li{}
    
    #header .global .dp2 li +li{}
    
    #header .global .dp2 li a{display: flex;align-items: center;justify-content: center;text-align: center;line-height: 50px;font-size: 16px;color: rgba(255,255,255,0.95);}
    
    #header .global .dp2 li a:hover{color:#ffffff}
    
    #header .allmenu{position:absolute;top:0;right:0;}
    
    #header .allmenu #allmenu{display: flex;align-items: center;justify-content: center;width: 70px;height: 70px;}
    
    #header .allmenu #allmenu i{width:26px;height:20px;background:url("../img/icon_allmenu.png") no-repeat 50% 50% / contain}
    
    #header .category{position:absolute;top:100%;left:0;margin: 1px 0 0 0;width:100%;height: calc(100vh - 70px);background:rgba(0,0,0,0.5);display: none;overflow-y: auto;}
    
    #header .category h2{}
    
    #header .category .cg1{display: flex;flex-direction: column;padding: 50px 20px;}
    
    #header .category .cg1 .cl1{flex: 1;}
    
    #header .category .cg1 .cl1 + .cl1{margin: 30px 0 0 0;}
    
    #header .category .cg1 .cl1 .ca1{line-height: 30px;font-size: 20px;font-weight: bold;color: #fff;text-align: center;display: block;}
    
    #header .category .cg2{display: flex;flex-direction:column;padding: 20px 0;align-items: center;text-align: center;}
    
    #header .category .cg2 .cl2{}
    
    #header .category .cg2 .cl2 + .cl2{margin:10px 0 0 0;}
    
    #header .category .cg2 .cl2 .ca2{line-height: 24px;font-size: 16px;font-weight: 300;color: #fff;text-align: center;display: block;opacity: 0.75;}
    
    #header .category .cg2 .cl2 .ca2:hover{opacity:1;}
    
    #header .category .close{position: absolute;top: 0;right: 0;display: flex;align-items: center;justify-content: center;width: 70px;height: 70px;font-size: 22px;color: #fff;}
    
    #header.active{background:#ffffff}
    
    #header.active .global .dp1 .dl1 .da1{color:#142642;}
    
    #header.active .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}
    
    #header.fixed{background:#ffffff;box-shadow:0 0 25px rgb(20 38 66 / 0.05)}
    
    #header.fixed .global .dp1 .dl1 .da1{color:#142642;}
    
    #header.fixed .allmenu #allmenu i{background:url("../img/icon_allmenu_on.png") no-repeat 50% 50% / contain}
    
    #footer{background: #142642;}
    
    #footer .wrap{}
    
    #footer .tnb{border-bottom:1px solid rgba(255,255,255,0.25)}
    
    #footer .tnb .wrap{display:flex;flex-direction: column;}
    
    #footer .tnb .link{order: 2;padding: 10px 20px;display: flex;flex-wrap: wrap;}
    
    #footer .tnb .link a{line-height: 30px;font-size: 13px;color: #fff;margin: 0 10px 0 0;}
    
    #footer .tnb .link a + a{}
    
    #footer .tnb .family{margin-left:auto;position:relative;border-bottom: 1px solid rgba(255,255,255,0.25);order: 1;width: 100%;}
    
    #footer .tnb .family > button{display:flex;padding: 0 20px;width: 100%;height: 50px;background:transparent;align-items:center;justify-content:center;font-size: 16px;color:#fff;}
    
    #footer .tnb .family > button i{margin-left:auto;width:13px;height:7px;background:url("../img/icon_familysite.png") no-repeat 50% 50% / contain}
    
    #footer .tnb .family > button.active i{transform:rotate(180deg)}
    
    #footer .tnb .family ul{display:none;position:absolute;bottom: 100%;left:0;width:100%;height:auto;margin: 0 0 1px 0;background: #ffffff;border: 1px solid #e0e0e0;}
    
    #footer .tnb .family li{}
    
    #footer .tnb .family li + li{border-top:1px solid #e0e0e0;}
    
    #footer .tnb .family li a{display:flex;padding:0 16px;height:50px;align-items:center;font-size:16px;}
    
    #footer .tnb .family li a:hover{background:#fafafa}
    
    #footer .footer{padding: 30px 20px;}
    
    #footer .footer address{}
    
    #footer .footer address > div{display: flex;flex-wrap: wrap;}
    
    #footer .footer address p{position: relative;margin: 0 10px 5px 0;line-height: 20px;font-size: 14px;color: #ffffff;}
    
    #footer .footer address p + p{padding:0 0 0 10px;}
    
    #footer .footer address p + p:before{content:'';position:absolute;top: 6px;left:0;width:1px;height:10px;background:rgba(255,255,255,0.25)}
    
    #footer .footer cite{display: block;margin: 20px 0 0 0;line-height:20px;font-size: 12px;color:rgba(255,255,255,0.5)}
    
    #container{position: relative;float: none;background: #7b8a89;margin: 0;width: 100%;min-height: 100vh;height: auto;}
    
    #index{}
    
    #index .visual{position:relative;height: 100vh;display:flex;align-items:center;}
    
    #index .visual:after{content:'';position:absolute;top:0;right: 70px;width:1px;height:100%;border-left:1px solid rgba(255,255,255,0.25);z-index: 10;}
    
    #index .visual .wrap{position:relative;z-index:2;padding: 20px;text-align: center;}
    
    #index .visual .bg{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;pointer-events: none;}
    
    #index .visual .bg img{display:block;width:100%;height:100%;object-fit:cover;}
    
    #index .visual .eng{margin: 0 0 20px 0;line-height: 1.4;font-size: 16px;font-weight: bold;color: rgba(255,255,255,0.5);}
    
    #index .visual .tit{line-height: 1.4;font-size: 30px;font-weight: bold;color: #ffffff;}
    
    #index .business{position:relative;padding: 50px 20px;background:#ffffff;overflow: hidden;}
    
    #index .business .wrap{}
    
    #index .business .title{margin: 0 0 30px 0;padding: 16px 0 0 0;flex-shrink: 0;position: relative;z-index: 3;text-align: center;}
    
    #index .business .title .eng{position: relative;line-height: 1.4;font-size: 28px;font-weight: bold;}
    
    #index .business .title .eng:before{content:'';position:absolute;bottom:100%;left: 50%;width: 12px;height: 12px;background:#498df2;border-radius:16px;transform: translateX(-50%);}
    
    #index .business .title .tit{line-height: 1.4;font-size: 16px;font-weight: 500;color: #000000;}
    
    #index .business .title .ctrl{margin-top: 10px;display: flex;align-items:center}
    
    #index .business .title .ctrl button{width: 42px;height: 42px;display:flex;align-items:center;justify-content:center;border-radius:74px;border:1px solid #d3d3d3}
    
    #index .business .title .ctrl button + button{margin-left:auto}
    
    #index .business .title .ctrl button i{width: 8px;height: 25px;}
    
    #index .business .title .ctrl button:hover{border-color:#498df2}
    
    #index .business .title .ctrl .business_slider_prev i{background: url("../img/icon_slider_prev.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_prev:hover i{background: url("../img/icon_slider_prev_hover.png") no-repeat 50% 50% / contain;}
    
    #index .business .title .ctrl .business_slider_next i{background:url("../img/icon_slider_next.png") no-repeat 50% 50% / contain}
    
    #index .business .title .ctrl .business_slider_next:hover i{background:url("../img/icon_slider_next_hover.png") no-repeat 50% 50% / contain}
    
    #index .business .slider{position: relative;z-index: 2;overflow: hidden;flex-shrink: 0;}
    
    #index .business .slider .swiper-slide{width: 100%;height: 75vh;}
    
    #index .business .slider .swiper-slide a{position: relative;}
    
    #index .business .slider .swiper-slide .num{position:absolute;z-index: 5;bottom: -14px;right:0;line-height: 1;font-size: 130px;font-weight: 900;-webkit-text-stroke: 1px #ffffff;color: transparent;letter-spacing: -5px;}
    
    #index .business .slider .swiper-slide .img{position: relative;z-index: 4;height:100%;background: #000000;}
    
    #index .business .slider .swiper-slide .img img{display:block;width:100%;height:100%;object-fit:cover;opacity: 0.8;}
    
    #index .business .slider .swiper-slide .con{position: absolute;z-index: 5;top: 0;left: 0;padding: 25px;}
    
    #index .business .slider .swiper-slide .con .eng{line-height: 1.4;font-size: 15px;font-weight: 300;color: rgba(255,255,255,0.75);margin: 0 0 12px 0;}
    
    #index .business .slider .swiper-slide .con .tit{line-height: 1.4;font-size: 26px;font-weight: bold;color: #FFFFFF;margin: 0 0 24px 0;}
    
    #index .business .slider .swiper-slide .con .txt{line-height: 22px;font-size: 16px;font-weight: 300;color: #ffffff;}
    
    #index .company{position:relative;padding: 50px 20px;background: url("../img/company_bg.png") no-repeat 50% 50% / cover;overflow: hidden;}
    
    #index .company .title{margin: 0 0 30px 0;padding: 16px 0 0 0;flex-shrink: 0;position: relative;z-index: 3;text-align: center;}
    
    #index .company .title .eng{position: relative;line-height: 1.4;font-size: 28px;font-weight: bold;color: #ffffff;}
    
    #index .company .title .eng:before{content:'';position:absolute;bottom:100%;left: 50%;width: 12px;height: 12px;background:#498df2;border-radius:16px;transform: translateX(-50%);}
    
    #index .company .title .tit{line-height: 1.4;font-size: 16px;font-weight: 500;color: #ffffff;}
    
    #index .company .content{}
    
    #index .company .content ul{display:flex;flex-direction: column;}
    
    #index .company .content li{flex:1;position:relative;}
    
    #index .company .content li + li{margin-top:30px}
    
    #index .company .content li:nth-child(1):before{content:'';position:absolute;top: 80%;left: 50%;margin: 0;width: 1px;height: 50%;background:#ffffff;transform: rotate(45deg);opacity: 0.75;}
    
    #index .company .content li:nth-child(2):before{content: '';position: absolute;top: 80%;left: 50%;margin: 0;width: 1px;height: 50%;background: #ffffff;transform: rotate(135deg);opacity: 0.75;}
    
    #index .company .content li:nth-child(3):before{content:'';position:absolute;top: 80%;left: 50%;margin: 0;width: 1px;height: 50%;background:#ffffff;transform: rotate(45deg);opacity: 0.75;}
    
    #index .company .content li .circle{flex-direction:column;display:flex;justify-content:center;text-align: center;align-items:center;margin: 0 auto;width: 70%;height: 70vw;}
    
    #index .company .content li .circle:before{content:'';position:absolute;width: 70vw;height: 70vw;z-index:2;border-radius:270px;background:#ffffff}
    
    #index .company .content li .circle:after{content:'';position:absolute;width: 75vw;height: 75vw;z-index:1;border-radius: 290px;background:#ffffff;opacity: 0.1;}
    
    #index .company .content li .num{position: relative;z-index: 3;line-height: 1;font-size: 50px;font-weight: 900;color: #498df2;}
    
    #index .company .content li .num em{font-size: 20px;text-transform:uppercase}
    
    #index .company .content li .tit{position: relative;z-index: 3;line-height: 1;font-size: 20px;font-weight: 900;color: #000000;margin: 20px 0 10px 0;}
    
    #index .company .content li .txt{position: relative;z-index: 3;line-height: 1;font-size: 14px;color: #585858;}
    
    #index .corporate{position:relative;padding: 50px 20px;background: #c1d0e0;}
    
    #index .corporate .title{margin: 0 0 30px 0;padding: 16px 0 0 0;flex-shrink: 0;position: relative;z-index: 3;text-align: center;}
    
    #index .corporate .title .eng{position: relative;line-height: 1.4;font-size: 28px;font-weight: bold;}
    
    #index .corporate .title .eng:before{content:'';position:absolute;bottom:100%;left: 50%;width: 12px;height: 12px;background:#498df2;border-radius:16px;transform: translateX(-50%);}
    
    #index .corporate .title .tit{line-height: 1.4;font-size: 16px;font-weight: 500;color: #000000;}
    
    #index .corporate .content{}
    
    #index .corporate .content ul{display:flex;flex-direction: column;}
    
    #index .corporate .content li{flex:1;}
    
    #index .corporate .content li + li{margin-top: 20px;}
    
    #index .corporate .content li a{position:relative;display: block;background:#000000}
    
    #index .corporate .content li a > img{display: block;width: 100%;height: 100vw;object-fit: cover;opacity: 0.8;}
    
    #index .corporate .content li a > div{position:absolute;bottom: 0;left:0;width: 100%;padding: 20px;text-align: center;transition: all 0.5s;}
    
    #index .corporate .content li a > div strong{line-height: 1;font-size: 24px;font-weight: bold;color: #ffffff;}
    
    #index .corporate .content li a > div p{margin: 15px 0 0 0;font-size: 16px;font-weight: 500;color: rgba(255,255,255,0.5);}
    
    #index .latest{position:relative;padding: 50px 20px;background:#ffffff}
    
    #index .latest .wrap{display:flex;flex-direction: column;}
    
    #index .latest .board{position:relative;background: #fcfcfc;border: 1px solid #f0f0f0;}
    
    #index .latest .board .tabs{border-bottom: 1px solid #f0f0f0;padding: 0 20px;}
    
    #index .latest .board .tabs ul{display:flex;align-items:center;}
    
    #index .latest .board .tabs li{margin: 0 30px 0 0;}
    
    #index .latest .board .tabs li a{position:relative;display:flex;align-items:center;height: 50px;padding: 0 8px;font-size: 16px;letter-spacing:-1px;color:#a1a1a1;}
    
    #index .latest .board .tabs li.active a{color:#000000;font-weight:bold}
    
    #index .latest .board .tabs li.active a:before{content:'';position:absolute;bottom:0;left:0;width:100%;height:4px;background:#498df2;}
    
    #index .latest .board .cont{}
    
    #index .latest .board .tab-box{display:none;padding: 10px 0;}
    
    #index .latest .board .tab-box.active{display:block;}
    
    #index .latest .board .tab-box ul{}
    
    #index .latest .board .tab-box li{}
    
    #index .latest .board .tab-box li + li{border-top:1px solid #f0f0f0;}
    
    #index .latest .board .tab-box li a{display:flex;align-items:center;height: 50px;padding: 0 20px;}
    
    #index .latest .board .tab-box li p{flex:1;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;padding: 0 20px 0 0;font-size: 15px;font-weight: 500;color: #000000;}
    
    #index .latest .board .tab-box li em{flex-shrink:0;font-size: 11px;color: #8b8b8b;}
    
    #index .latest .board .more{position: absolute;top:0;right:0;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;}
    
    #index .latest .board .more a{height: 40px;width: 40px;display: flex;align-items: center;justify-content: center;padding: 0;}
    
    #index .latest .board .more a i {display: block;width: 18px;height: 18px;background: url("../img/icon_more_button.png") no-repeat 50% 50% / contain;}
    
    #index .latest .customer{margin-top: 20px;background:#498df2;display: flex;flex-direction: column;}
    
    #index .latest .customer .tit{display:flex;align-items:center;height: 50px;padding: 10px 20px;border-bottom:1px solid rgba(255,255,255,0.25);font-size: 16px;font-weight: bold;color: #ffffff;}
    
    #index .latest .customer .con{padding: 20px;display: flex;flex-direction: column;}
    
    #index .latest .customer .con strong{line-height: 40px;font-size: 24px;font-weight: bold;color: #ffffff;letter-spacing: -1px;margin: 0 0 10px 0;}
    
    #index .latest .customer .con span{line-height: 1.4;font-size: 18px;color: #ffffff;letter-spacing: -1px;margin: 0 0 20px 0;}
    
    #index .latest .customer .con p{line-height: 1.4;font-size: 14px;font-weight: 400;color: rgba(255,255,255,0.9);}
    
    #index .latest .customer .act{margin:auto 0 0 0;padding: 20px;display: flex;align-items: center;justify-content: center;}
    
    #index .latest .customer .act a{flex:1;display:flex;align-items:center;justify-content:center;height: 46px;border:1px solid rgba(255,255,255,0.5);font-size: 15px;color:rgba(255,255,255,1)}
    
    #index .latest .customer .act a:hover{background:rgba(255,255,255,0.15)}
    
    #index .latest .customer .act a + a{margin-left:10px;}
    
    #index .inquiry{position:relative;padding: 50px 20px;background: url("../img/inquiry_bg.png") no-repeat 50% 50% / cover;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
    
    #index .inquiry .tit{display: flex;align-items: center;line-height: 1;font-size: 24px;font-weight: bold;color: #ffffff;letter-spacing: -2px;margin: 0 0 15px 0;}
    
    #index .inquiry .txt{display: flex;align-items: center;font-size: 14px;font-weight: 500;color: #ffffff;letter-spacing: -2px;margin: 0 0 50px 0;}
    
    #index .inquiry .act{}
    
    #index .inquiry .act a{display: flex;align-items: center;justify-content: center;text-align: center;width: 160px;height: 46px;border: 1px solid rgba(255,255,255,0.5);font-size: 15px;color: #fff;}
    
    #index .inquiry .act a:hover{background:rgba(255,255,255,0.1)}

}