@import url(common.css);

main#content{padding-bottom: 0;}
main{letter-spacing: -1px;display: block;min-height: calc(100vh - 80px);position: relative;overflow: hidden;}
/*main:before{content: '';width: 100%;height: 100%;background: url(../images/main/main_line.png)center top no-repeat;position: absolute;left: 0;top:100vh;}*/
main section{display: flex;flex-wrap: wrap;padding-top: 190px;}

.visual{height: 100vh;position: relative;overflow: hidden;background-size: cover;}
.visual_title{text-align: center;color:#fff;font-weight: 200;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: flex;flex-wrap: wrap;width: 100%;justify-content: center;z-index: 1;flex-direction: column;padding: 0 50px;}
.visual_title span{display: block;text-wrap: balance;}
.visual_title .title01{font-size: 62px;overflow: hidden;letter-spacing: -3px;}
.visual_title .title01 br{display: none;}
.visual_title .title02{font-size: 20px;font-weight: 300;letter-spacing: 2px;margin-top: 50px;overflow: hidden;line-height: 1.5;}
.visual_title .title02 br{display: none;}

.visual.on{background: #1e284f;}
.visual video{position: absolute;left: 0;top:-30px;width: 100%;object-fit: cover;transition: opacity .8s;}
.visual.on video{opacity: 0;}
.visual:after{content: '';width: 100%;height: 100%;background: url(../images/main/main_visual.jpg) center top no-repeat;position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);background-size: cover;}
.visual.on .visual_title .title01{animation: main_text 0.4s ease-in-out;animation-fill-mode: forwards;animation-delay: 1s;}
.visual.on .visual_title .title02{animation: main_text 0.4s ease-in-out;animation-fill-mode: forwards;animation-delay: 1.3s;}

@keyframes main_text {
    from {
        top: 20px;
    }
    to {
        opacity: 1;top: 0;
    }
    
}

.titleM{font-size: 60px;font-weight: 200;letter-spacing: -3px;position: relative;margin-top: 45px;margin-bottom: 85px;}
.titleM em{font-weight: 500;}
.titleM:before{content: attr(data-name);font-size: 18px;color:#0f3e8b;font-weight: 400;position: absolute;left: 4px;top:-40px;letter-spacing: 0;font-style: italic;letter-spacing: 1.5px;}
.titleM.t_center:before{left: 50%;transform: translateX(-50%);}
main .main_btn{display: inline-block;}

.company{background: url(../images/main/line_bg01.png)center top no-repeat;}
.company .box{display: flex;justify-content: space-between;}
.company .box .imgArea{width:700px;height: 500px;overflow: hidden;}
.company .box .textArea{width: calc(100% - 700px);height: 500px;position: relative;padding-right: 120px;display: flex;align-items: center;justify-content: flex-end;}
.company .box .textArea .line{width: 100%;height: 1px;display: inline-block;position: absolute;top: 50%;z-index: 5;}
.company .box .textArea .line span{background:#e5e5e5;height: 1px;display: block;}
.company .box .textArea .num{position: absolute;top:50%;margin-top: -50px;font-size: 82px;font-weight: 600;color:#ebedf2;font-style: italic;letter-spacing: -6px;z-index: 5;}
.company .box .textArea .textInner{display: flex;flex-wrap: wrap;justify-content: flex-end;margin-top: -42px;}
.company .box .textArea .textInner span{display: block;overflow: hidden;width: 100%;position: relative;}
.company .box .textArea .textInner .title{font-size: 50px;font-weight: 600;}
.company .box .textArea .textInner .title span{padding-top: 42px;}
.company .box .textArea .textInner .title span:after{content: attr(data-name);font-size: 18px;color:#969696;font-weight: 400;position: absolute;top:0;letter-spacing: 0;font-style: italic;letter-spacing: 1.5px;}
.company .box .textArea .textInner .text{font-size: 18px;font-weight: 400;line-height: 1.6;margin-top: 52px;}

.company .left .textArea .num{left: 0;}
.company .left .textArea .textInner{text-align: right;}
.company .left .textArea .textInner .title span:after{right:0;}
.company .right .textArea{justify-content: flex-start;}
.company .right .textArea .num{right: 0;}
.company .right .textArea .textInner{text-align: left;}
.company .right .textArea .textInner .title span:after{left:0}
.company .product01 .imgArea{background: url(../images/main/product01.jpg)center no-repeat;background-size: cover;}
.company .product01 .textArea .line{width: calc(100% - 83px);left: 83px;}
.company .product02{margin-top: 50px;}
.company .product02 .textArea{height: 390px;padding-right: 0;padding-left: 120px;}
.company .product02 .imgArea{background: url(../images/main/product02.jpg)center no-repeat;background-size: cover;height: 390px;}
.company .product02 .textArea .line{width: calc(100% - 78px);right: 78px;transform: rotate(180deg);}
.company .product03{margin-top: 100px;}
.company .product03 .textArea{height: 530px;width: calc(100% - 650px);}
.company .product03 .imgArea{background: url(../images/main/product03.jpg)center no-repeat;background-size: cover;height: 530px;width:650px}
.company .product03 .textArea .line{width: calc(100% - 85px);left: 85px;}

.business{background: url(../images/main/line_bg02.png)center top no-repeat;}
.solution_box, .solution, .solution_slide, .solution_box .left, .solution_box .right{height: 960px;}
.solution_box{background: #1a1e24 url(../images/main/line_bg02_black.png)left 95px top no-repeat;width: 100%;overflow: hidden;position: relative;}
.solution_box .wrap{position: relative;}
.solution{display: none;position: absolute;left: 0;top:0;width: 100%;z-index: 5;padding-right: 803px;}
.solution.open{display: block;z-index: 10;}
.solution_tab{position: absolute;left: 0;top: 114px;width: 100%;}
.solution_tab .tab_mobile{display: none;}
.tabM, .tabB{position: absolute;display: flex;z-index: 15;}
.tabM button, .tabB button{font-size: 16px;color: #b1b2b3;position: relative;font-weight: 400;transition: .5s;}
.tabM{margin-left: -30px;top: 0;}
.tabM li{padding: 0 30px;position: relative;}
.tabM li:after{content: '';width: 1px;height: 16px;background-color: #76787c;position: absolute;right:0;top:22px}
.tabM li:last-child:after{display: none;}
.tabM li:before{content: '';width: 5px;height: 5px;border-radius: 50%;background-color: #00d7ff;position: absolute;left: 50%;top:15px;opacity: 0;transition: .3s;}
.tabM .on:before{opacity:1;animation: top1 0.7s ease-in-out;animation-fill-mode: forwards}
.tabM button{overflow: hidden;margin-top: 21px;}
.tabM .on button{font-weight: 500;color:#00d7ff;}

@keyframes top1 {
    0% {
        top:15px;
    }
    50% {
        top:0px;
    }
    100% {
        top:5px;
    }
}

.tabM button span{position: relative;transition: transform 0.4s;transform-origin: 100% 0%;display: block;}
.tabM button span:before{content: attr(data-name);position: absolute;top: 100%;width: 100%;left: 0;}
.tabM .on button span{transform:translateY(-100%);transform-origin: 0% 0%;}

.tabB{bottom: 81px;align-items: flex-end;height: 62px;padding-right: 803px;width: 100%;}
.tabB li{margin-right: 20px;position: relative;width: calc((100%/4) - 20px);cursor: pointer;}
.tabB li:before{content: '';width:34px;height:32px;position: absolute;left: 50%;top:-6px;background-position: center bottom;background-repeat: no-repeat;margin-left: -17px;opacity: 0;transition: .4s;}
.tabB li:last-child{margin-right: 0;}
.tabB button{font-size:15px;padding-bottom: 20px;width: 100%;border-bottom:1px solid #b1b2b3;text-align: center;background-color: #1a1e24;}
.tabB button:before{content: '';width: 100%;height: 2px;background-color: #00d7ff;position: absolute;bottom: -1px;left: 0;right: 0;transform: scaleX(0);transition: .4s;}
.tabB .on button{font-weight: 500;color:#00d7ff;}
.tabB .on button:before{transform: scaleX(1);}

.tabB li.on:before{opacity: 1;animation: top2 0.7s ease-in-out;animation-fill-mode: forwards}

@keyframes top2 {
    0% {
        top:0;
    }
    50% {
        top:-55px;
    }
    100% {
        top:-45px;
    }
}

.tabB li[data-tab="network01"]:before{background-image: url(../images/main/solution_icon01_01.png);/*width:30px;height:32px;*/}
.tabB li[data-tab="network02"]:before{background-image: url(../images/main/solution_icon01_02.png);/*width:22px;height:32px;*/}

.tabB li[data-tab="security01"]:before{background-image: url(../images/main/solution_icon02_01.png);/*width:23px;height:30px;*/}
.tabB li[data-tab="security02"]:before{background-image: url(../images/main/solution_icon02_02.png);/*width:27px;height:28px;*/}
.tabB li[data-tab="security03"]:before{background-image: url(../images/main/solution_icon02_03.png);/*width:31px;height:27px;*/}
.tabB li[data-tab="security04"]:before{background-image: url(../images/main/solution_icon02_04.png);/*width:25px;height:30px;*/}

.tabB li[data-tab="management01"]:before{background-image: url(../images/main/solution_icon03_01.png);/*width:27px;height:32px;*/}
.tabB li[data-tab="management02"]:before{background-image: url(../images/main/solution_icon03_02.png);/*width:30px;height:30px;*/}
.tabB li[data-tab="management03"]:before{background-image: url(../images/main/solution_icon03_03.png);/*width:31px;height:31px;*/}
.tabB li[data-tab="management04"]:before{background-image: url(../images/main/solution_icon03_04.png);/*width:34px;height:31px;*/}

.tabB li[data-tab="analysis01"]:before{background-image: url(../images/main/solution_icon04_01.png);/*width:35px;height:29px;*/}
.tabB li[data-tab="analysis02"]:before{background-image: url(../images/main/solution_icon04_02.png);/*width:29px;height:27px;*/}

.tabB li[data-tab="data01"]:before{background-image: url(../images/main/solution_icon05_01.png);/*width:30px;height:25px;*/}
.tabB li[data-tab="data02"]:before{background-image: url(../images/main/solution_icon05_02.png);/*width:30px;height:27px;*/}

.solution_slide{position: relative;z-index: 10;}
.solution_slide .title{font-size: 62px;font-weight: 600;margin-bottom: 60px;letter-spacing: -2px;color:#fff}
.solution_slide .title span{font-size: 24px;font-weight: 400;display: block;}
.solution_slide .text{font-size: 18px;font-weight: 300;color: #dfdfdf;line-height: 1.8;margin-bottom: 90px;}
.solution_slide .main_btn{text-align: left;display: inline-block;}
.solution_slide li{position: absolute;left: 0;top:260px;display: none;}
.solution_box .right{width: 48%;position: absolute;right:0;top:0}

.solution_img, .solution_img>li{opacity: 0;transition: 1s;position: absolute;right: 0;top:0;z-index: 5;width: 100%;height: 100%;overflow: hidden;}
.solution_img.open, .solution_img>li.open{opacity: 1;}

.solution.show{display:block;animation: show_left 0.7s ease-in-out;animation-fill-mode: forwards;z-index: 6;}
.solution_img.show{opacity:1;animation: show_right 0.7s ease-in-out;animation-fill-mode: forwards;z-index: 6;}

.solution_img .network01{background:url(../images/main/solution01.jpg)center no-repeat;background-size: cover;}
.solution_img .security01{background:url(../images/main/solution02.jpg)center no-repeat;background-size: cover;}
.solution_img .research01{background:url(../images/main/solution03.jpg)center no-repeat;background-size: cover;}
.solution_img .management01{background:url(../images/main/solution04.jpg)center no-repeat;background-size: cover;}
.solution_img .analysis01{background:url(../images/main/solution05.jpg)center no-repeat;background-size: cover;}

.solution_img .solution_img01{background:url(../images/main/solution_01_new.jpg)center no-repeat;background-size: cover;}
.solution_img .solution_img02{background:url(../images/main/solution_02_new.jpg)center no-repeat;background-size: cover;}
.solution_img .solution_img03{background:url(../images/main/solution_03_new.jpg)center no-repeat;background-size: cover;}
.solution_img .solution_img04{background:url(../images/main/solution_04_new.jpg)center no-repeat;background-size: cover;}
.solution_img .solution_img05{background:url(../images/main/solution_05_new.jpg)center no-repeat;background-size: cover;}

@keyframes show_left {
    0% {
        left:-100%;
    }
    100% {
        left:0;
    }
}

@keyframes show_right {
    0% {
        right:-100%;
    }
    100% {
        right:0;
    }
}

.customer{background: url(../images/main/line_bg03.png)left 95px top no-repeat;}
.notice{display: flex;margin-bottom: 100px;}
.notice li{margin-right: 30px;border: 1px solid #e5e5e5;width: calc(33% - 15px);box-shadow: 11px 11px 10px rgba(0,0,0,0.08);transition: .4s;position: relative;overflow: hidden;}
.notice li:last-child{margin-right: 0;}
.notice li .inner{display: block;padding: 37px 40px 40px;}
.notice li a{display: block;padding: 37px 40px 40px;}
.notice .item{display: flex;justify-content: space-between;}
.notice .item .item01{font-size: 18px;color:#0090ff;font-weight: 600;letter-spacing: 0;}
.notice .item .item02{font-size:14px;font-weight: 400;margin-top: 3px;}
.notice .title{font-size: 22px;font-weight: 600;-webkit-line-clamp:2;line-height: 1.5;margin: 32px 0 29px 0;height: 66px;}
.notice .text{line-height: 1.8;height: 81px;}
.notice .date{font-size: 14px;color:#717171;margin-top: 33px;}

.notice .line{position: absolute;background-color: #0090ff;transition: .4s;}
.notice .line01{left: 0;top: 0;width: 0;height: 1px;}
.notice .line02{right:0;bottom:0;width: 1px;height: 0;}
.notice .line03{right: 0;bottom: 0;width: 0;height: 1px;}
.notice .line04{left:0;top:0;width: 1px;height: 0;}

.notice li:hover{box-shadow: 11px 11px 10px rgba(0,0,0,0.15);}
.notice li:hover .title{color:#0f3e8b}

.notice li:hover .line01, .notice li:hover .line03{width: 100%;}
.notice li:hover .line02, .notice li:hover .line04{height: 100%;}

.partner{background: url(../images/main/partner_bg.jpg)center top no-repeat;padding: 50px 0 98px 0;margin-top: 190px;position: relative;background-size: cover;z-index: 1;}
.partner .titleM{color:#fff;font-size: 26px;font-weight: 200;line-height: 1.9;letter-spacing: -1px;}
.partner .ask_btn{display: block;width: 100%;max-width: 354px;height: 104px;line-height: 104px;background: #e7e8eb;font-size: 40px;font-weight: 600;color: #1c2055;text-align: center;box-shadow: 15px 20px 0 rgba(0,0,0,0.3);padding: 0 100px;transition: all .4s;margin-top: -20px;}
.partner .ask_btn:hover{background: #0090ff;color: #e7e8eb;}


aside{position: fixed;right:45px;top:50%;z-index: 10;transform: translateY(-50%);}
aside li{position: relative;overflow: hidden;margin-bottom: 15px;}
aside li:last-child{margin-bottom:0}
aside .bullet{width: 8px;height: 8px;margin:2px;border-radius: 50%;background:rgba(147,147,147,.5);display: block;}
aside a{display: none;font-size: 12px;position: relative;color: #939393;writing-mode: tb-rl;padding-top: 7px;letter-spacing: 1px;}
aside.black a{color:#343434}

aside .now .bullet{background: #0954b6;}
aside .now a, aside .hover a{color: #0189ef;font-weight: 500;display: inline-block;}