@charset "utf-8";

html,body{height:100%;overflow-y:hidden;}


.intro_ui{height:100%;background:url(../images/intro/bg.jpg) no-repeat 50% 50%/cover;}
/*.intro_ui:before{opacity:0;content:"";position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;width:50%;height:50%;background:url(../images/intro/bg1.jpg) no-repeat 50% 50%/cover;transition:all .5s ease-in-out;}*/
.intro_ui .box{position:relative;z-index:99;width:100%;height:100%}
.intro_ui h1{opacity:0;z-index:1;position:absolute;top:160px;left:0;right:0;margin:0 auto;width:428px;height:281px;font-size:0;background:url(../images/intro/logo.png) no-repeat 50% 50%/contain;transition:all 0.3s ease-in-out;}
.intro_ui h1.in{opacity:1;transition:all 0.8s ease-in-out;}
.intro_ui nav{position:absolute;left:0;right:0;bottom:0;height:100%;}
.intro_ui nav ul{display:flex;align-items:flex-end;height:100%}
.intro_ui nav li{width:100%;color:rgba(255, 255, 255, .9)}
.intro_ui li:after{opacity:0;content:"";position:fixed;top:0;bottom:0;right:0;left:0;margin:auto;width:50%;height:50%;background:url(../images/intro/bg1.jpg) no-repeat 50% 50%/cover;transition:all .5s ease-in-out;}
.intro_ui li:nth-child(2)::after	{background-image:url(../images/intro/bg2.jpg);}
.intro_ui li:nth-child(3)::after	{background-image:url(../images/intro/bg3.jpg);}
.intro_ui li:nth-child(4)::after	{background-image:url(../images/intro/bg4.jpg);}
.intro_ui li:nth-child(5)::after	{background-image:url(../images/intro/bg5.jpg);}
.intro_ui nav li~li:before{z-index:2;content:"";position:absolute;top:0;width:1px;height:100%;background:rgba(255, 255, 255, .13)}
.intro_ui nav .menu{position:absolute;bottom:-40px;opacity:0;-webkit-transition: opacity .6s, bottom .6s;transition: opacity .6s, bottom .6s}
.intro_ui nav .menu.in{position:relative;opacity:1;bottom:0;z-index:1;transition:all 0.8s ease-in-out;}
.intro_ui nav li:nth-child(2) .menu.in{transition:all 1s ease-in-out;}
.intro_ui nav li:nth-child(3) .menu.in{transition:all 1.1s ease-in-out;}
.intro_ui nav li:nth-child(4) .menu.in{transition:all 1.2s ease-in-out;}
.intro_ui nav li:nth-child(5) .menu.in{transition:all 1.3s ease-in-out;}
.intro_ui nav .menu a{position:relative;display:block;height:345px;padding:20px 0 0 60px;box-sizing:border-box;}
.intro_ui nav .menu a:after{z-index:3;content:"";position:absolute;right:60px;bottom:0;width:86px;height:114px;background:url(../images/intro/img_dec.png) no-repeat 50% 50%/contain;opacity:0;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu a:before{z-index:3;content:"";position:absolute;left:0;bottom:0;width:100%;height:0;background:#e71419;opacity:0;border-radius:0 100px 0 0;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu div{position:relative;z-index:4}
.intro_ui nav .menu i{display:block;font-family:'oswald';font-size:54px;color:rgba(255, 255, 255, .25)}
.intro_ui nav .menu strong{position:relative;display:block;margin-top:5px;line-height:46px;font-family:'oswald';font-size:36px;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu strong:after{content:"";opacity:.6;position:relative;top:-2px;display:inline-block;width:13px;height:13px;margin-left:20px;vertical-align:middle;background:url(../images/intro/ic_plus.png) no-repeat 50% 50%;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu strong:before{opacity:0;content:"";position:absolute;left:0;bottom:-39px;display:inline-block;width:35px;height:8px;vertical-align:middle;background:url(../images/intro/ic_arrow.png) no-repeat 50% 50%/contain;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu span{position:relative;display:block;margin-top:12px;font-size:18px;font-weight:300;transition:all 0.3s ease-in-out;}
.intro_ui nav .menu a:hover:after{opacity:1;}
.intro_ui nav .menu a:hover:before{opacity:.62;height:100%}
.intro_ui nav .menu a:hover strong{top:53px;line-height:22px;font-size:17px;}
.intro_ui nav .menu a:hover strong br{display:none}
.intro_ui nav .menu a:hover span{top:-36px;font-size:34px;font-size:400}
.intro_ui nav .menu a:hover strong:after{opacity:0}
.intro_ui nav .menu a:hover strong:before{opacity:1}

.view{opacity:0;z-index:-1;position:absolute;top:0;width:20%;padding:50px 20px 0 50px;box-sizing:border-box;transition:all .6s ease-in-out;}
.view .en{font-size:19px;font-family:'oswald';}
.view .en:before{content:"";display:block;width:32px;height:42px;margin-bottom:12px;background:url(../images/intro/img_dec.png) no-repeat 50% 50%/contain}
.view .en:after{position:relative;top:-2px;content:"";display:inline-block;width:calc(100% - 199px);height:1px;margin-left:8px;vertical-align:middle;background:#fff}
.intro_ui li:nth-child(2) .en:after{width:calc(100% - 123px);}
.intro_ui li:nth-child(3) .en:after{width:calc(100% - 138px);}
.intro_ui li:nth-child(4) .en:after{width:calc(100% - 146px);}
.intro_ui li:nth-child(5) .en:after{width:calc(100% - 149px);}
.view .tit{font-size:48px;font-weight:200;letter-spacing:-4px;}
.view .txt{line-height:32px;margin-top:30px;margin-right:30px;}
.view .txtg{line-height:32px;margin-top:16px;margin-right:30px;}
.view .txtg p{position:relative;padding-left:18px;}
.view .txtg i{position:absolute;top:8px;left:0;display:inline-block;width:14px;height:14px;line-height:14px;vertical-align:middle;text-align:center;border-radius:4px;color:#2b2827;font-size:12px;font-weight:500;background:#aba9a9}
.view .link{margin-right:30px;margin-top:20px}
.view .link a{position:relative;display:block;height:70px;line-height:70px;padding-left:30px;border:1px solid rgba(255, 255, 255, .3)}
.view .link a~a{margin-top:10px}
.view .link a:before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:#e71e29;transition:all 0.3s ease-in-out;}
.view .link a:after{content:"";z-index:1;position:absolute;top:0;bottom:0;right:30px;margin:auto 0;width:35px;height:8px;opacity:1;background-image:url(../images/intro/ic_arrow.png)}
.view .link span{position:relative;z-index:1;}
.view .link a:hover:before{height:100%;}

.intro_ui li.open .view{opacity:1;z-index:1;}
.intro_ui li.open .menu,.intro_ui.open h1{opacity:0;z-index:-1;}
/*.intro_ui.open:before{width:100%;height:100%;opacity:1;}*/
.intro_ui li.open:after{width:100%;height:100%;opacity:1;}

.view .close{display:none}
.intro h2{position:relative;padding-left:24px;margin:50px 0 26px 0;font-size:21px;font-weight:500}
.intro h2:before,.intro h2:after{content:"";position:absolute;left:0;top:0;bottom:0;margin:auto 0;width:15px;height:3px;background:#e71419}
.intro h2:after{transform:rotate(90deg);}
.list_garo select	{height:50px;line-height:50px;margin-top:5px;}

@media (max-width: 1800px) { 
	.view .link a:after	{display:none;}

}
@media (max-width: 1380px) { 
	.intro_ui nav .menu a{padding-left:20px;height:300px;}
	.intro_ui nav .menu i{font-size:20px}
	.intro_ui nav .menu strong{line-height:32px;font-size:28px}
	.intro_ui nav .menu span{font-size:14px}

	.intro_ui nav .menu a:hover strong{top:53px;line-height:22px;font-size:14px;}
	.intro_ui nav .menu a:hover span{top:-36px;font-size:24px;}
	.intro_ui nav .menu a:after{right:20px;width:46px;height:57px;}

}

@media (max-width: 1080px) { 
	.intro_ui nav .menu a{padding-left:12px}
	.intro_ui nav .menu i{font-size:20px}
	.intro_ui nav .menu strong{line-height:28px;font-size:24px}
	.intro_ui nav .menu span{font-size:12px}

	.intro_ui nav .menu a:hover strong{top:38px;line-height:22px;font-size:12px;}
	.intro_ui nav .menu a:hover span{font-size:22px;}

}

@media (max-width: 1024px) { 
	.intro_ui{display:flex;align-items:center;justify-content:center;background:url(../images/intro/mo_bg.jpg) no-repeat 50% 0/cover}
	.intro_ui li:nth-child(1)::after{background-image:url(../images/intro/mo_bg1.jpg);}
	.intro_ui li:nth-child(2)::after{background-image:url(../images/intro/mo_bg2.jpg);}
	.intro_ui li:nth-child(3)::after{background-image:url(../images/intro/mo_bg3.jpg);}
	.intro_ui li:nth-child(4)::after{background-image:url(../images/intro/mo_bg4.jpg);}
	.intro_ui li:nth-child(5)::after{background-image:url(../images/intro/mo_bg5.jpg);}
	.intro_ui h1{position:relative;top:0;width:296px;height:182px;}
	.intro_ui nav{position:static;margin-top:75px;}
	.intro_ui nav ul{display:block;}
	.intro_ui nav li{position:static;}
	.intro_ui nav li~li:before{display:none}
	.intro_ui nav .menu{margin-bottom:-1px;border:1px solid #ccc1ba}
	.intro_ui nav .menu a{display:flex;align-items:center;width:300px;height:54px;padding:0 0 0 16px}
	.intro_ui nav .menu a:before{border-radius:0}
	.intro_ui nav .menu a:after{display:none}
	.intro_ui nav .menu div{width:100%}
	.intro_ui nav .menu i{display:none}
	.intro_ui nav .menu strong{position:static;display:inline-block;font-size:17px ! important}
	.intro_ui nav .menu strong br{display:none}
	.intro_ui nav .menu strong:after{display:none}
	.intro_ui nav .menu strong:before{top:0;bottom:0;left:auto;right:16px;margin:auto 0;width:26px;height:5px;opacity:1;background-image:url(../images/intro/mo_ic_arrow.png)}
	.intro_ui nav .menu span{position:static;display:inline-block;font-size:11px ! important}
	
	.view .en:before{width:16px;height:21px}
	.view .en{letter-spacing:1px;font-size:11px;}
	.view .tit{font-size:30px}
	.view .txt{margin-top:12px;font-size:12px;line-height:22px}
	.view .txtg{font-size:12px;line-height:22px}
	.view .txtg p~p{margin-top:4px}
	.view .txtg i{top:4px}
	.view .link {margin-right:0;}
	.view .link a{height:54px;line-height:54px;padding-left:20px;}
	.view .link a:after	{right:10px;display:block;}

	.list_garo select {height:45px;line-height:45px;}

	.intro_ui .box{height:auto;width:auto}
	.intro_ui.open .menu{display:none}
	.view{position:fixed;left:0;width:100%;padding:50px 30px 0;}

	.view .close{position:absolute;top:20px;right:20px;display:block;width:37px;height:37px;font-size:0;background:url(../images/intro/close.png) no-repeat 50% 0/cover}

}

@media screen and (max-height:540px) {
  .intro_ui{height:740px}

}