body { position: relative; font-size: 0; background: #000; }
.wrap_intro { position: relative; font-size: 0; width:100%; height:100%; margin:0; padding:0; overflow:hidden;}
video,
iframe{ position: relative; z-index: 0; width: 90%; margin:0 5%; height: 100vh; object-fit: cover; opacity:0.4;}
.mobileView video,
.mobileView iframe { position: relative; z-index: 0; width: 100%; margin:0; height: 80vh;  opacity:0.4;}
.header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; padding: 40px 150px; box-sizing:border-box; }
.header .inner { display: flex; justify-content: space-between; }
.header .inner .headerLink { display: flex; justify-content: flex-end;align-items: center; gap:5px; }
.header .inner .headerLink > a { display: inline-block; padding: 10px 15px; background: #fff; color: #00adee; font-size: 14px; border-radius:30px; }
.header .inner .headerLink > a span {display:inline-block;}
.header .inner .headerLink > a:is(:first-of-type) {  transition: .3s; background: #00adee; color: #fff;}

.btn-box{padding:10px 40px 0 0;text-align:center;}
.btn-box .txt{position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); line-height:1.4; font-size:14px; text-align:center; color:#fff;font-weight:500}
.btn-box .more-btn{display:flex;position:relative;width:100px;height:100px;padding:0 0 2px 2px;border-radius:50%; line-height:1;color:#fff;background:#00adee;}
.btn-box .more-btn > span:nth-child(2){animation-delay:0.5s}
.btn-box .more-btn > span:nth-child(3){animation-delay:1s}
.btn-box .more-btn > span{position:absolute;left:0;top:0px;opacity:0;margin:0;width:100%;height:100%;border:1px solid rgba(0, 173, 238, 0.5);border-radius:50%;animation:active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite}
.btn-box .more-btn > i{margin:auto;font-size:29px;transition:transform 0.4s}
.btn-box .more-btn:hover > i{transform:rotate(270deg)}
.btn-box .more-btn > img {width:11px; height:11px;}
@keyframes active-circle{0%{-webkit-transform:scale(1);transform:scale(1);opacity:0.5}50%{opacity:1.0}100%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}


.header .inner .headerLink > a img { vertical-align: middle; margin-left: 5px; }
.header .inner .headerLink > div { }

.familySite { position: relative; }
.familySite .btn_familySite {
    display: block;
    position: relative;
    font-size: 14px;
    width: 175px;
    height: 36px;
    line-height: 1em;
    margin: 0;
    padding: 0px 55px 0px 20px;
    text-align: left;
	border-radius:30px;
	background:#000 url("/images/new/arrow/arrow_bot_st1_w.png") no-repeat 90% center;
    color: #fff;
}
.familySite.on .btn_familySite { border-radius:20px 20px 0 0; background:#000 url("/images/new/arrow/arrow_top_st1_w.png") no-repeat 90% center;}
.familySite .familySite_layer {
    display: none;
    position: absolute;
    top: 36px;
    width: 175px;
	border-width:0px 1px 1px 1px;
    z-index: 1001;
	outline:none;
	color:#fff;	
    box-sizing:border-box;
    border-radius:0 0 10px 10px;
    padding: 5px 0 15px;
	background:#000;
}
.familySite.on .familySite_layer { display: block; }
.familySite .familySite_layer dd a {
    display: block !important;
    font-size: 14px !important;
    padding: 6px 20px !important;
	color:#fff;
}

.intro_top_title {position: absolute; z-index: 1; top: 21%; left: 8%; font-size: 75px; color: #00adee; font-weight:700;}
.intro_top_title span { display:block; font-size:12px; color: #fff; margin-top:4px;}

.intro_title { position: absolute; z-index: 1; top: 40%; left: 8%;}
.intro_title h2 {color: #fff; font-size: 75px;}
.intro_title h3 {color: #fff; font-size: 75px; margin-bottom: 40px;}
.intro_title h4 {color: #fff; font-size: 30px; font-weight: 500;}

div.typing-txt{
	display: none;
}
.typing h2:after,
.typing h3:after,
.typing h4:after{  
	visibility: hidden;
	content:"";	
	height:50px;
	width:1px;
	margin-left:10px;
	display: inline-block; 
	animation-name: cursor; 
	animation-duration: 0.5s; 
	animation-iteration-count: infinite; 
} 
.typing h4:after{  
	height:20px;
} 
.typing h2.active:after,
.typing h3.active:after,
.typing h4.active:after{visibility: visible;}

@keyframes cursor{ 
	0%{border-right: 1px solid #fff} 
	50%{border-right: 1px solid #333} 
	100%{border-right: 1px solid #fff} 
}

#footer_group .footer .footerTerms .footerInfo .footerCopyright > div:last-child,
.footerFamilySite {display:none;}
@media screen and (max-width:1860px){
	.header {padding:40px;}
}
@media screen and (max-width:1480px){

	.intro_top_title {top: 20%; left: 5%; font-size: 55px;}
	.intro_top_title span { font-size:11px;}

	.intro_title { top: 35%; left: 5%;}
	.intro_title h2 {font-size: 55px;}
	.intro_title h3 {font-size: 55px; margin-bottom: 30px;}
	.intro_title h4 {font-size: 24px;}
	
	.typing h2:after,
	.typing h3:after,
	.typing h4:after{  
		height:40px;
	} 
	.typing h4:after{  
		height:16px;
	}
}
@media screen and (max-width:1048px){
	.header {padding:24px}
	.header .inner { flex-direction: column; gap:24px;}
	.header .inner > div {width:100%; text-align:center;}
	.header .inner .headerLink {flex-direction: column;  align-items: flex-end; margin-top:-40px; gap:14px;}
	.btn-box { padding-bottom:40px;}
}
@media screen and (max-width:1024px){
	
	video,
	iframe{ width: 100%; margin:0;}
	
	.typing h2.PcView {display:none;}
	
}
@media screen and (max-width:760px){	

	.header {padding:24px 16px;}
	.header .inner {position:relative; z-index:2;}
	/*.header .inner > div { text-align:left;}*/
	
	/*.btn-box {margin-top:50px; padding-right:15px;}
	
	.header .inner .headerLink > div{position:absolute; right:0; top:10px;}
	.btn-box .more-btn > span { animation:active-circle 1.5s cubic-bezier(0.5, 0.5, 0.66, 1) infinite; }*/
	
	.intro_top_title {top: 20%; left: 3%; font-size: 45px;}
	.intro_top_title span { font-size:10px;}

	.intro_title { top: 32%; left: 3%;}
	.intro_title h2 {font-size: 45px;}
	.intro_title h3 {font-size: 45px; margin-bottom: 20px;}
	.intro_title h4 {font-size: 20px;}
		
	.typing h2:after,
	.typing h3:after,
	.typing h4:after{  
		height:34px;
	} 
	.typing h4:after{  
		height:15px;
	} 
}
@media screen and (max-width:560px){
	.header .headerLogo img {max-width:200px;}
	.familySite {display:none;}
	.familySite .btn_familySite {width:140px; font-size:12px; background-size:12px;}
	.familySite.on .btn_familySite {background-size:12px;}
	.familySite .familySite_layer {width:140px;}
	.familySite .familySite_layer dd a {width:130px;font-size:12px !important; padding: 6px 10px !important;}
	
	.btn-box {padding:0; padding-top:20px}
	.btn-box .more-btn,
	.btn-box .more-btn > span {width:70px; height:70px; }
	.btn-box .txt {font-size:12px; }
	.header .inner .headerLink > a {width:70px; height:70px; border-radius:50%; padding:0; text-align:center; font-size:12px; display:flex; align-items: center; justify-content: center; align-content: center; flex-direction: column;}
	.header .inner .headerLink > a img {display:none;}
		
	
	.intro_top_title {top: 23%; left: 3%; font-size: 25px;}
	.intro_top_title span { font-size:6px;}
	
	.intro_title { top: 35%; left: 3%;}
	.intro_title h2 {font-size: 25px; }
	.intro_title h3 {font-size: 22px; margin-bottom: 25px; }
	.intro_title h4 {font-size: 16px;}
	
	.typing h2:after,
	.typing h3:after,
	.typing h4:after{  
		height:18px;
	} 
	.typing h4:after{  
		height:12px;
	} 
}
@media screen and (max-width:390px){
	.header .headerLogo img {max-width:180px;}
	.header .inner .headerLink > div{top:5px;}
}