@charset "UTF-8";


@media screen and (min-width:769px){
	#whats header .innerbox .linkbox a.fusion::after{
  		transform: scale(1, 1);
	}
	
	#whats header{
		background-color:rgba(0,0,0,0.5);
	}
	
	#whats .aboutbottombtn{
		display: none;
	}
	
	#whats .mainarea{
		width:100%;
		padding:200px 0 0 0;
	}
	
	#whats .mainarea .maintl{
		color:#fff;
		font-size:10rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 45px 0;
	}
	
	#whats .mainarea .subtl{
		color:#fff;
		font-size:1.6rem;
		text-align: center;
		line-height: 3.2rem;
		margin:0 0 25px 0;
	}
	
	#whats .phbox{
		padding:30px 0 0 0;
	}
	
	#whats .phbox.box2{
		padding:0 0 0 0;
	}
	
	#whats .technologycont{
		padding:180px 0 60px;
	}
	
	#whats .technologycont.box2{
		background:#fff;
	}
	
	#whats .technologycont.box3{
		background:#dfddda;
	}
	
	#whats .technologycont.bg{
		background:url("../images/technology/tec-img3.png") no-repeat;
		background-size:100%;
		background-position: left 50% bottom 0;
		padding: 0 0 700px;
	}
	
	#whats .technologycont .innerbox{
		max-width: 1120px;
        width: 80%;
		margin:0 auto;
	}
	
	#whats .technologycont .innerbox .mtl{
		text-align: center;
		font-size:5rem;
		line-height: 1;
		color:#fff;
		font-weight: 600;
		margin:0 0 65px 0;
	}
	
	#whats .technologycont .innerbox .subtl{
		text-align: center;
		font-size:3rem;
		line-height: 5.2rem;
		color:#fff;
		margin:0 0 65px 0;
		font-weight: normal;
	}
	
	#whats .technologycont .innerbox .subtl.box2{
		text-align: center;
		font-size:3rem;
		line-height: 5.2rem;
		color:#000;
		margin:0 0 25px 0;
		font-weight: normal;
	}
	
	#whats .technologycont .innerbox .mtl.box2{
		color:#000;
	}
	
	#whats .technologycont .innerbox .list{
		display: flex;
		justify-content: space-between;
		margin:0 0 100px 0;
	}
	
	#whats .technologycont .innerbox .list .box{
		width:calc((100% - 180px) / 4);
		opacity: 0;
		transition: all 0.5s;
	}
	
	#whats .technologycont .innerbox .list .box.active{
		opacity: 1;
	}
	
	#whats .technologycont .innerbox .list .box .ill{
		margin:0 0 40px 0;
	}
	
	#whats .technologycont .innerbox .list .box .tx{
		font-size:1.8rem;
		line-height: 2.6rem;
		color:#fff;
		text-align: center;
	}
	
	#whats .technologycont .innerbox .mtx{
		font-size:2rem;
		line-height:5rem;
		color:#fff;
		text-align: center;
		padding:0 0 30px 0;
		font-weight: 500;
	}
	
	#whats .technologycont .innerbox .mtx.box2{
		color:#000;
	}
	
	#whats .technologycont .listcont{
		width:100%;
		display: flex;
		padding:50px 0 120px 0;
		color:#000;
		justify-content: space-between;
	}
	
	#whats .technologycont .listcont .box{
		width:calc((100% - 100px) / 3);
		position: relative;
	}
	
	#whats .technologycont .listcont .box::after{
		content: "";
		width:calc(100% + 50px);
		border-bottom:1px solid #fff;
		position: absolute;
		top:60px;
		left:50%;
		z-index:1;
		transform: scaleX(0);
	}
	
	#whats .technologycont .listcont .box::after{
		content: "";
		width:calc(100% + 50px);
		border-bottom:1px solid #566575;
		position: absolute;
		top:165px;
		left:50%;
		z-index:1;
		transform: scaleX(0);
	}
	
	#whats .technologycont .listcont.active .box::after{
		animation-name: borderscale;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleX(0);
		transform-origin: left top;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2)::after{
		animation-name: borderscale;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleX(0);
		transform-origin: left top;
	}
	
	#whats .technologycont .listcont .box:last-child::after{
		display: none;
	}
	
	#whats .technologycont .listcont .box .listmtl{
		width:330px;
		height:330px;
		border-radius: 50%;
		background:#dbdee0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 auto;
		position: relative;
		z-index:2;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box .listmtl{
		animation-name: listscale;
		animation-delay: 0s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .listmtl{
		animation-name: listscale;
		animation-delay: 1s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .listmtl{
		animation-name: listscale;
		animation-delay: 2s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont .box .listmtl .inbox{
		font-size:2rem;
		line-height: 2.1rem;
		font-weight: 600;
		text-align: center;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 2.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont .box .listmtl .inbox span{
		font-weight: normal;
	}
	
	#whats .technologycont .listcont .box .ltxcont{
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box .ltxcont{
		animation-name: listtx;
		animation-delay: 1s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .ltxcont{
		animation-name: listtx;
		animation-delay: 2s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .ltxcont{
		animation-name: listtx;
		animation-delay: 3s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont .box .ltl{
		font-weight: 600;
		font-size:1.8rem;
		line-height: 2.8rem;
		padding:45px 0 15px 0;
	}
	
	#whats .technologycont .listcont .box .ltx{
		font-size:1.8rem;
		line-height: 2.6rem;
		padding:25px 0 0 0;
		text-align: center;
		font-weight: 400;
	}
	
	#whats .technologycont .numcontainer{
		width:1120px;
		margin:0 auto;
	}
	
	#whats .technologycont .numcontainer .numcont{
		padding:0 0 170px 0;
		position: relative;
	}
	
	#whats .technologycont .numcontainer .numcont:last-child{
		padding:0 0 0 0;
	}
	
	#whats .technologycont .numcontainer .numcont::after{
		content: "";
		height:100px;
		border-right:1px solid #000;
		position: absolute;
		display: block;
		bottom:35px;
		left:50%;
		transform: scaleY(0);
		transform-origin: top;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#whats .technologycont .numcontainer .numcont.active::after{
		transform: scaleY(1);
	}
	
	#whats .technologycont .numcontainer .numcont:last-child::after{
		display: none;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width:900px;
		margin:0 auto;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .num{
		height:100px;
		width:180px;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .num img{
		height:100%;
		width:auto;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .tl{
		font-size:3rem;
		line-height: 4.2rem;
		width:calc(100% - 180px);
	}
	
	#whats .technologycont .numcontainer .numcont .phbox{
		margin:10px 0 50px 0;
		padding:0;
	}
	
	#whats .technologycont .numcontainer .numcont .tx{
		font-size:1.6rem;
		line-height: 2.8rem;
		width:900px;
		margin:0 auto;
	}
	
	#whats .technologycont .numcontainer .numcont .tx span{
		font-size:1.8rem;
		line-height: 2.8rem;
		margin:0 0 20px 0;
		display: block;
		font-weight: 600;
	}
	
	#whats .technologycont .archivebtn{
		width:300px;
		display: block;
		margin:0 auto;
		background:#dfddda;
		padding:20px 0;
		font-weight: bold;
		text-align: center;
		transition: all 0.2s;
	}
	
	#whats .technologycont .archivebtn:hover{
		opacity: 0.7;
	}
}

@media screen and (max-width:768px){
	#whats header{
		background-color:rgba(0,0,0,0.5);
	}
	
	#whats .aboutbottombtn{
		display: none;
	}
	
	#whats .mainarea{
		width:100%;
		padding:100px 10% 0;
		box-sizing: border-box;
	}
	
	#whats .mainarea .maintl{
		color:#fff;
		font-size:3.6rem;
		font-weight: 900;
		text-align: center;
		line-height: 1;
		margin:0 0 35px 0;
	}
	
	#whats .mainarea .subtl{
		color:#fff;
		font-size:1.2rem;
		text-align: left;
		line-height: 2.4rem;
		margin:0 0 25px 0;
	}
	
	#whats .phbox{
		margin:30px 0 0 0;
		width:100%;
		padding-top:60%;
		position: relative;
	}
	
	#whats .phbox img{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
	#whats .phbox.box2{
		padding-top:60%;
		margin:0 0 0 0;
	}
	
	#whats .technologycont{
		padding:60px 0;
	}
	
	#whats .technologycont.box2{
		background:#fff;
	}
	
	#whats .technologycont.box3{
		background:#dfddda;
	}
	
	#whats .technologycont.bg{
		background:url("../images/technology/tec-img3.png") no-repeat;
		background-size:100%;
		background-position: left 50% bottom 0;
		padding: 0 0 120px;
	}
	
	#whats .technologycont .innerbox{
		width:90%;
		margin:0 auto;
	}
	
	#whats .technologycont .innerbox .mtl{
		text-align: center;
		font-size:2.6rem;
		line-height: 1;
		color:#fff;
		font-weight: 600;
		margin:0 0 30px 0;
	}
	
	#whats .technologycont .innerbox .subtl{
		text-align: center;
		font-size:2rem;
		line-height: 3rem;
		color:#fff;
		margin:0 0 30px 0;
		font-weight: normal;
	}
	
	#whats .technologycont .innerbox .subtl.box2{
		text-align: center;
		font-size:1.8rem;
		line-height: 3.4rem;
		color:#000;
		margin:0 0 15px 0;
		font-weight: normal;
	}
	
	#whats .technologycont .innerbox .mtl.box2{
		color:#000;
	}
	
	#whats .technologycont .innerbox .list{
		display: flex;
		width:90%;
		margin:0 auto 10px;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	#whats .technologycont .innerbox .list .box{
		width:calc((100% - 30px) / 2);
		opacity: 0;
		transition: all 0.5s;
		padding:0 0 50px 0;
	}
	
	#whats .technologycont .innerbox .list .box.active{
		opacity: 1;
	}
	
	#whats .technologycont .innerbox .list .box .ill{
		margin:0 0 20px 0;
	}
	
	#whats .technologycont .innerbox .list .box .tx{
		font-size:1.4rem;
		line-height: 2rem;
		color:#fff;
		text-align: center;
	}
	
	#whats .technologycont .innerbox .mtx{
		font-size:1.4rem;
		line-height:3.4rem;
		color:#fff;
		text-align: center;
		padding:0 0 30px 0;
	}
	
	#whats .technologycont .innerbox .mtx.tc{
		text-align: center;
	}
	
	#whats .technologycont .innerbox .mtx.box2{
		color:#000;
	}
	
	#whats .technologycont .listcont{
		width:100%;
		display: flex;
		padding:40px 0 60px 0;
		flex-wrap: wrap;
		color:#000;
		justify-content: center
	}
	
	#whats .technologycont .listcont .box{
		width:80%;
		position: relative;
		padding:0 0 100px 0;
	}
	
	#whats .technologycont .listcont .box:last-child{
		width:80%;
		position: relative;
		padding:0 0 0 0;
	}
	
	#whats .technologycont .listcont .box::after{
		content: "";
		height:70px;
		border-right:1px solid #000;
		position: absolute;
		display: block;
		bottom:15px;
		left:50%;
		transform: scaleY(0);
		transform-origin: top;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#whats .technologycont .listcont .box:last-child::after{
		display: none;
	}
	
	#whats .technologycont .listcon.active .box::after{
		transform: scaleY(1);
	}
	
	#whats .technologycont .listcont.active .box::after{
		animation-name: borderscale2;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleY(0);
		transform-origin: left top;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2)::after{
		animation-name: borderscale2;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		transform:scaleY(0);
		transform-origin: left top;
	}
	
	#whats .technologycont .listcont .box .numcont:last-child::after{
		display: none;
	}
	
	#whats .technologycont .listcont .box .listmtl{
		width:200px;
		height:200px;
		border-radius: 50%;
		background:#dbdee0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 auto;
		position: relative;
		z-index:2;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box .listmtl{
		animation-name: listscale;
		animation-delay: 0s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .listmtl{
		animation-name: listscale;
		animation-delay: 1s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .listmtl{
		animation-name: listscale;
		animation-delay: 2s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		transform:scale(0.2);
	}
	
	#whats .technologycont .listcont .box .listmtl .inbox{
		font-size:2rem;
		line-height: 2.1rem;
		font-weight: 600;
		text-align: center;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .listmtl .inbox{
		animation-name: listmtl;
		animation-delay: 2.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont .box .listmtl .inbox span{
		font-weight: normal;
	}
	
	#whats .technologycont .listcont .box .ltxcont{
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box .ltxcont{
		animation-name: listtx;
		animation-delay: 0.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(2) .ltxcont{
		animation-name: listtx;
		animation-delay: 1.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont.active .box:nth-child(3) .ltxcont{
		animation-name: listtx;
		animation-delay: 2.5s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	
	#whats .technologycont .listcont .box .ltl{
		font-weight: 600;
		font-size:1.8rem;
		line-height: 2.8rem;
		padding:45px 0 15px 0;
	}
	
	#whats .technologycont .listcont .box .ltx{
		font-size:1.4rem;
		line-height: 2rem;
		padding:15px 0 0 0;
		text-align: center;
		font-weight: 400;
	}
	
	#whats .technologycont .numcontainer{
		width:90%;
		margin:0 auto;
	}
	
	#whats .technologycont .numcontainer .numcont{
		padding:0 0 100px 0;
		position: relative;
	}
	
	#whats .technologycont .numcontainer .numcont:last-child{
		padding:0 0 0 0;
	}
	
	#whats .technologycont .numcontainer .numcont::after{
		content: "";
		height:70px;
		border-right:1px solid #000;
		position: absolute;
		display: block;
		bottom:15px;
		left:50%;
		transform: scaleY(0);
		transform-origin: top;
		transition: all 0.5s;
		transition-delay: 1s;
	}
	
	#whats .technologycont .numcontainer .numcont.active::after{
		transform: scaleY(1);
	}
	
	#whats .technologycont .numcontainer .numcont:last-child::after{
		display: none;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .num{
		height:60px;
		width:100px;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .num img{
		height:100%;
		width:auto;
	}
	
	#whats .technologycont .numcontainer .numcont .numtl .tl{
		font-size:2rem;
		line-height: 3rem;
		width:calc(100% - 100px);
	}
	
	#whats .technologycont .numcontainer .numcont .phbox{
		margin:10px 0 20px 0;
	}
	
	#whats .technologycont .numcontainer .numcont .tx{
		font-size:1.2rem;
		line-height: 2.4rem;
	}
	
	#whats .technologycont .numcontainer .numcont .tx span{
		font-size:1.4rem;
		line-height: 2.4rem;
		font-weight: 600;
		margin:0 0 20px 0;
		display: block;
	}
	
	#whats .technologycont .archivebtn{
		width:250px;
		display: block;
		margin:0 auto;
		background:#dfddda;
		padding:15px 0;
		font-weight: bold;
		text-align: center;
		transition: all 0.2s;
	}
}

@keyframes listtx {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listmtl {
    0% {
        opacity:0%;
    }
    100% {
        opacity:100%;
    }
}

@keyframes listscale {
    0% {
        transform:scale(0.2);
    }
    100% {
       transform:scale(1);
    }
}

@keyframes borderscale {
    0% {
        transform:scaleX(0);
    }
    100% {
       transform:scaleX(1);
    }
}

@keyframes borderscale2 {
    0% {
        transform:scaleY(0);
    }
    100% {
       transform:scaleY(1);
    }
}

@keyframes scanime {
    75% {
        top:-50%;
    }
    100% {
        top:100%;
    }
}