@charset "utf-8";

html{height:100%;}
.intro{height:100%; text-align:center;}

/* section1 */
.intro .section1{height:645px; background:#fff url(/Assets/img/intro/intro_bg.png) center bottom no-repeat;}
.intro .section1 h1{position:absolute; top:114px; left:50%; transform:translateX(-50%); width:683px; height:316px; background:url(/Assets/img/intro/logo.gif) 0 0 no-repeat; text-indent:-9999px; opacity:0; transition:all ease 1s;}
.intro .section1.active h1{top:74px; opacity:1;}

/* section2 */
.intro .section2{height:calc(100% - 645px); background-color:#2057d4;}
.intro .section2 .inner{position:relative; top:-165px; width:1200px; margin:0 auto;}
.intro .section2 .inner ul{display:flex; justify-content:center;}
.intro .section2 .inner ul li{position:relative; top:40px; width:540px; opacity:0; transition:all ease 2s;}
.intro .section2.active .inner ul li{top:0; opacity:1;}
.intro .section2 .inner ul li:nth-child(2){margin-left:120px;}
.intro .section2 .inner ul li a{display:block; position:relative; overflow:hidden; height:410px; border:4px solid #000; border-radius:20px; transition:background-color ease .3s;}
.intro .section2 .inner ul li:nth-child(1) a{background:#fff url(/Assets/img/intro/intro_type01.png) center bottom 106px no-repeat;}
.intro .section2 .inner ul li:nth-child(2) a{background:#fff url(/Assets/img/intro/intro_type02.png) center bottom 125px no-repeat;}
.intro .section2 .inner ul li a p{position:absolute; left:0; bottom:0; width:100%; height:125px; background-color:#fff; font-family:"GSB"; font-size:32px; line-height:125px;}
.intro .section2 .inner ul li a p span{position:relative; padding-right:72px;}
.intro .section2 .inner ul li a p span:before{content:""; display:block; position:absolute; top:0; right:0; width:42px; height:28px; background:url(/Assets/img/intro/intro_arr.gif) 0 0 no-repeat; transition:right ease .5s;}
.intro .section2 .inner ul li > p{margin-top:50px; font-family:"NSB"; font-size:24px; color:#90abea;}
.intro .section2 .inner ul li > p span{position:relative; padding-right:20px; margin-right:20px;}
.intro .section2 .inner ul li > p span:before{content:""; display:block; position:absolute; top:50%; right:0; width:1px; height:15px; transform:translateY(-50%); background-color:#90abea;}
.intro .section2 .inner > p{margin-top:80px; font-family:"NS"; font-size:20px; line-height:32px; color:#a6b8e1;}
.intro .section2 .inner ul li:hover a{background-color:#2057d4;}
.intro .section2 .inner ul li:hover a p{color:#2c67eb;}
.intro .section2 .inner ul li:hover > p{color:#fff;}
.intro .section2 .inner ul li:hover a p span:before{right:10px; background-position:0 -28px;}


@media screen and (max-width:1920px){
	
	.intro .section2{height:auto;}
	
}

@media screen and (max-width:1200px){
	
	/* section1 */	
	.intro .section1{height:415px; background-size:100%;}
	.intro .section1 h1{width:483px; height:224px; background-size:100%;}
	
	/* section2 */		
	.intro .section2{height:auto;}
	.intro .section2 .inner{top:0; width:728px; margin:0 auto; padding:20px;}
	.intro .section2 .inner ul li{width:calc((100% / 2) - 10px);}
	.intro .section2 .inner ul li:nth-child(2){margin-left:20px;}
	.intro .section2 .inner ul li a{height:320px; background-size:100% !important;}
	.intro .section2 .inner ul li:nth-child(1) a{background-position:center bottom 92px;}
	.intro .section2 .inner ul li:nth-child(2) a{background-position:center bottom 106px;}
	.intro .section2 .inner ul li a p{height:106px; font-size:28px; height:106px;}
	.intro .section2 .inner ul li a p span{padding-right:60px;}
	.intro .section2 .inner ul li a p span:before{width:32px; height:21px; background-size:100%;}
	.intro .section2 .inner ul li:hover a p span:before{background-position:0 -21px;}
	
}

@media screen and (max-width:768px){
	
	.intro{word-break:keep-all;}
	
	/* section1 */
	.section1{display:none;}	 
	 
	/* section2 */
	.intro .section2{padding:50px 0; box-sizing:border-box;}
	.intro .section2 .inner{width:auto; padding:156px 16px 16px;}
	.intro .section2 .inner:before{content:""; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:250px; height:116px; background:url(/Assets/img/intro/m_logo.png) 0 0 no-repeat; background-size:250px auto;}
	.intro .section2 .inner ul li{width:calc((100% / 2) - 5px);}
	.intro .section2 .inner ul li:nth-child(2){margin-left:10px;}
	.intro .section2 .inner ul li a{height:39vw;}
	.intro .section2 .inner ul li:nth-child(1) a{background-position:center bottom 52px;}
	.intro .section2 .inner ul li:nth-child(2) a{background-position:center bottom 60px;}
	.intro .section2 .inner ul li a p{height:60px; font-size:18px; line-height:60px;}
	.intro .section2 .inner ul li > p{margin-top:25px; font-family:"GSM"; font-size:15px;}
	.intro .section2 .inner ul li > p span{margin-right:10px; padding-right:10px;}
	.intro .section2 .inner ul li > p span:before{top:calc(50% - 1px); height:12px;}
	.intro .section2 .inner > p{margin-top:40px; font-family:"GSL"; font-size:15px; line-height:24px;}
	
}

@media screen and (max-width:480px){
	
	/* section2 */
	.intro .section2{height:100%;}
	.intro .section2 .inner{position:absolute; top:50%; left:0; width:calc(100% - 32px); transform:translateY(-50%); padding:136px 16px 16px;}
	.intro .section2 .inner ul li:nth-child(1) a{background-position:center bottom 37px;}
	.intro .section2 .inner ul li:nth-child(2) a{background-position:center bottom 45px;}
	.intro .section2 .inner ul li a p{height:45px; font-size:15px; line-height:45px;}
	.intro .section2 .inner ul li a p span{padding-right:0;}
	.intro .section2 .inner ul li a p span:before{display:none;}
	.intro .section2 .inner ul li > p span{display:block; margin:0 0 5px; padding:0;}
	.intro .section2 .inner ul li > p span:before{display:none;}
	.intro .section2 .inner > p{font-size:13px; line-height:21px;}
}