@import url('common.css');



/* 메인비주얼 */
#visual{position:relative; width:100%; height:var(--vh); background:#000; overflow:hidden;}
#visual .visual_in{position:relative; width:100%; height:100%;}
#visual .visual_in .roll{position:absolute; left:0; top:0; width:100%; height:var(--vh);}
#visual .visual_in .roll .v_txt{text-align:center; position:absolute; left:50%; transform:translateX(-50%); bottom:130px; text-align:center; z-index:9999;}
#visual .visual_in .roll .v_txt h2{font-size:var(--fs70); font-weight:700; font-family:var(--eng); line-height: 120%;  color:var(--white); transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both;}
#visual .visual_in .roll .v_txt .fs16 {padding:10px 0 0; color:var(--white); transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.6s; animation-fill-mode:both;}
#visual .visual_in .roll .v_txt .fs16.en, #visual .visual_in .roll .v_txt .fs16.cn {display:none;} 
#visual .visual_in .roll .v_bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual .visual_in .roll .v_bg:before{content:''; display: block; width:100%; height:100%; background:rgba(0,0,0,.28); position:absolute; left:0; top:0;  z-index:8;}
#visual .visual_in .roll .v_bg:after{content:''; display: block; width:100%; height:25%; position:absolute; left:0; bottom:0; background: linear-gradient(360deg, #000 0%, rgba(0, 0, 0, 0.00) 100%); opacity:0.5; z-index:9;}
#visual .scrollDown{display:inline-block; position:absolute; left:50%; bottom:45px; z-index:9999; margin-left: -58px; transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.9s; animation-fill-mode:both;}
#visual .scrollDown a{display:inline-block; font-size:12px; font-weight:500; color:rgba(255,255,255,.47); transition:all .3s linear; line-height:120%; font-family:var(--eng);}
#visual .scrollDown a:hover{color:var(--white);}
#visual .scrollDown svg{display:inline-block; vertical-align:middle; margin:-2px 8px 0 0; width: 20px;}
#visual .slick-dots{font-size:0; position:absolute; left:50%; bottom:300px; transform:translateX(-50%); z-index:9999; opacity:0; animation:opacity 1.0s 0.3s; animation-fill-mode:both;}
#visual .slick-dots li{display:inline-block; vertical-align:top; margin:0 12px 0 0; width:34px; height:7px; background:url('/img/slick_dots.jpg') no-repeat center/100% auto; transition:all .3s linear; cursor:pointer; opacity: 0.3;}
#visual .slick-dots li:last-child{margin:0;}
#visual .slick-dots li.slick-active{background:url('/img/slick_dots_on.jpg') no-repeat center/100% auto; opacity:1;}
#visual .slick-dots li button{padding:0; border:0; font-size:0; background:none; outline:none;}

#visual .visual_in .roll.action .v_bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}

@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}
@keyframes opacity {
	0% { opacity:0; }
	100% { opacity:1; }
}


/* #contents{display: none;} */


/* 슬로건 */
#about{padding:150px 0 150px; position: relative; z-index: 2; background:var(--white); overflow: hidden;}
#about .about_in{max-width:860px;}
#about .about_in .fs64{opacity:0;}
#about .about_in .align_L{text-align:left; transform:translateX(130px); transition:all 0.6s 0.3s linear;}
#about .about_in .align_R{text-align:right; transform:translateX(-130px); transition:all 0.6s 0.7s linear;}
#about .about_in.aos-animate .fs64{opacity:1; transform:translateX(0);}



/* 글로벌 */
#spigen{overflow: hidden; position: relative;}
#spigen .spigen_in{ position:relative; overflow:hidden;}
#spigen .spigen_bg {height:var(--vh); width:1330px; position:absolute; top:0; left:0; z-index: -1; text-align:center; padding-top:1%; box-sizing:border-box;}
#spigen .spigen_bg img{max-width:100%;}
#spigen .spigen_list{}
#spigen .spigen_list dl{display:flex; flex-wrap:nowrap; align-items: center; justify-content: flex-start;}
#spigen .spigen_list dl dt{position:relative; z-index:10; width:582px; order:1; height:var(--vh); display:flex; flex-wrap:wrap; align-items:center; transform:translateY(70px); opacity:0; transition:all 1s ease;}
#spigen .spigen_list dl.action dt {transform:translateY(0); opacity:1; transition-delay:0.2s; transition:all 1s ease;}
#spigen .spigen_list dl dd{height:var(--vh); order:2; width: 768px; transition:all 0.3s ease; opacity:0; visibility:hidden; display: flex; flex-direction: column; justify-content: center;}
#spigen .spigen_list dl .fs70{font-weight: 300; letter-spacing: -3.84px; width: 675px;}
#spigen .spigen_list dl .fs70 b{font-weight: 700; letter-spacing:inherit;}
#spigen .spigen_list dl .stxt{padding: 25px 0 0;}
#spigen .spigen_list dl .stxt img {}
#spigen .spigen_list dl img {max-width:100%;}

#spigen .spigen_list dl.action dd {transition:all 0.3s ease; visibility:visible; opacity:1;}
#spigen .spigen_list dl.action.none dd {opacity:0; visibility:hidden;}

#spigen .spigen_list dl.dep_1 dd {z-index:1;}
#spigen .spigen_list dl.dep_2 dd {z-index:2;}
#spigen .spigen_list dl.dep_3 dd {z-index:3;}
#spigen .spigen_list dl.dep_4 dd {z-index:4;}
#spigen .spigen_list dl.dep_4.action.none dd {visibility:visible !important; opacity:1 !important;}

#spigen .spigen_list dl dd.fixed {position:fixed; top:0; right:calc((100% - 1350px) / 2);}
#spigen .spigen_bg.fixed {position:fixed; top:0; left:calc((100% - 1350px) / 2);}
#spigen .spigen_bg.abs {position:absolute; top:auto; bottom:0;}





/* 배너 */
#video_banner{position:relative; width:100%; height:100vh; overflow:hidden; display:flex; align-items:center;}
#video_banner .video{position: absolute; top: 0; left: 50%; transform:translateX(-50%); width: 0; height: 100vh; pointer-events: none; overflow: hidden; transition:all 1s 0.3s linear;}
#video_banner.aos-animate .video{width: 100%;}
#video_banner .video:after{content:''; display: block; width:100%; height:100%; background:rgba(0,0,0,.28); position:absolute; left:0; top:0; z-index:2;}
#video_banner .video iframe{width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#video_banner .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center;  transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out; z-index: -1;}
#video_banner.action .bg{-ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
#video_banner .video_banner_in{text-align:center; position:relative; z-index:9;}
#video_banner .video_banner01_in{transform:translateY(100px); opacity: 0; transition:all 1s 1.5s linear;}
#video_banner.aos-animate .video_banner01_in{transform:translateY(0); opacity: 1;}
#video_banner .video_banner_in .fs64{margin-top:65px;}
#video_banner .video_banner_in .stxt{padding:25px 0 0; color:rgba(255,255,255,.7);}
#video_banner .video_banner_in .btnArea{padding:50px 0 0;}
#video_banner h3 {font-weight:bold;}


/* 글로벌 네트워크 */
#network{padding: 0px 0 16px;position:relative;z-index: 2;background:var(--white);} 
#network .network_bg{position:relative; box-sizing:border-box; text-align:right; padding:0 80px;}
#network .network_bg .network_bg_in{position: relative;}
#network .network_bg .network_bg_in img{max-width:100%;}
#network .network_bg .network_bg_in .bg{position: relative; z-index: -1;}
#network .network_bg .network_bg_in .bg .networkBg_w{position: absolute; right: 0; top:0;}
#network .network_bg .network_eff{position: absolute; right: 0; top:0; width: 100%;}
#network .network_bg .network_eff .nation{opacity: 0; transition:all 0.8s linear;}
#network .network_bg .network_eff.aos-animate .nation{opacity: 1;}
#network .network_bg .network_eff.aos-animate .nation02{transition-delay:.3s;}
#network .network_bg .network_eff.aos-animate .nation03{transition-delay:.9s;}
#network .network_bg .network_eff.aos-animate .nation04{transition-delay:1.5s;}
#network .network_bg .network_eff.aos-animate .nation05{transition-delay:2.1s;}
#network .network_bg .network_eff.aos-animate .nation06{transition-delay:2.7s;}
#network .network_bg .network_eff.aos-animate .nation07{transition-delay:3.3s;}
#network .network_bg .network_eff.aos-animate .nation08{transition-delay:3.9s;}
#network .network_bg .nation{position:absolute; right:0; top:0;}
#network .network_bg .nation.nation01{z-index: 9;}
#network .network_in {position: absolute;left:50%;bottom: 150px;transform:translateX(-50%);z-index:9;}
#network .network_in .lineTit{font-size:200px; font-weight:900; font-family:var(--eng); line-height:100%; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--black); opacity: 0.1; color:var(--white);}
#network .network_in .fs64{line-height:115%;letter-spacing: -3.84px;margin-top: -15px;margin-bottom: 25px;}
#network .network_in .fs64 b{line-height:inherit; letter-spacing:inherit;}
#network .network_in .stxt{padding:25px 0 0;}
#network .network_in .btnArea{padding:50px 0 0;}


/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){




/* 글로벌 */
#spigen{}
#spigen .spigen_in{}
#spigen .spigen_bg {width:100%; padding-top:30%;}
#spigen .spigen_list{}
#spigen .spigen_list dl{}
#spigen .spigen_list dl dt{width:50%; box-sizing:border-box;}
#spigen .spigen_list dl dd{width:50%; box-sizing:border-box;}
/* #spigen .spigen_list dl br{display: none;} */

#spigen .spigen_list dl dd.fixed {right:3%; width:50%;}
#spigen .spigen_bg.fixed {left:3%;}





/* 글로벌 네트워크 */
#network .network_bg{padding:0 20px 0 100px;}
#network .network_in {bottom:150px;}
#network .network_in .lineTit{font-size:180px;}
#network .network_in .stxt{width: 50%;}


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/* 메인비주얼 */
#visual{}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .v_txt{bottom:100px;}
#visual .scrollDown{bottom:30px;}
#visual .scrollDown svg{width: 15px; height:auto;}
#visual .slick-dots{bottom:250px;}
#visual .slick-dots li{margin:0 10px 0 0; width:30px; height:5px;}

/* 슬로건 */
#about{padding:150px 0 100px;}
#about .about_in{max-width:500px;}



/* 글로벌 */
#spigen{}
#spigen .spigen_list dl .stxt{padding: 20px 0 0;}
#spigen .spigen_list dl .fs70{width: 100%;}



/* 배너 */
#video_banner .video_banner_in{}
#video_banner .video_banner_in .stxt{padding:20px 0 0;}
#video_banner .video_banner_in .btnArea{padding:30px 0 0;}

/* 글로벌 네트워크 */
#network{padding:40px 0 100px;} 
#network .network_bg{padding:0 20px 0 150px;}
#network .network_in {bottom:100px;}
#network .network_in .lineTit{font-size:120px;}
#network .network_in .fs64{margin-top:-50px;}
#network .network_in .stxt{padding:20px 0 0;}
#network .network_in .btnArea{padding:30px 0 0;}


}

/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 

/* 글로벌 */
#spigen{padding: 60px 0;}
#spigen .spigen_in{}
#spigen .spigen_bg {display: none;}
#spigen .spigen_list{}
#spigen .spigen_list dl{position:relative !important; flex-wrap:wrap; flex-direction: column-reverse; padding:0 0 60px;}
#spigen .spigen_list dl:last-child{padding:0;}
#spigen .spigen_list dl dt{width:100% !important; box-sizing:border-box; height:auto; justify-content: center; text-align:center; order:2;}
#spigen .spigen_list dl dd{width:100% !important; padding-right:0 !important; box-sizing:border-box; height:auto; padding:0; text-align:center; order:1;}
#spigen .spigen_list dl.action.none dd {opacity:1 !important; visibility:visible !important;}
#spigen .spigen_list dl .stxt{padding: 10px 0 0;}
#spigen .spigen_list dl img{max-width:70%; margin:0 auto;}

#spigen .spigen_list dl dd.fixed {position:relative !important; left:0; width:100% !important;}
#spigen .spigen_bg.fixed {left:0;}


}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* 메인비주얼 */
#visual{}
#visual .visual_in{}
#visual .visual_in .roll{}
#visual .visual_in .roll .v_txt{bottom:80px;}
#visual .visual_in .roll .v_txt h2{}
#visual .visual_in .roll .v_txt .fs16{padding:8px 0 0;}
#visual .scrollDown{bottom:20px;}
#visual .slick-dots{bottom:240px;}
#visual .slick-dots li{margin:0 8px 0 0; width:25px; height:4px;}


/* 슬로건 */
#about{padding:100px 0 80px;}
#about .about_in{max-width:360px;}



/* 배너 */
#video_banner .video_banner_in{}
#video_banner .video_banner_in .stxt{padding:15px 0 0;}
#video_banner .video_banner_in .btnArea{padding:20px 0 0;}


/* 글로벌 네트워크 */
#network{padding:70px 0;} 
#network .network_bg{padding:0 20px;display: none;}
#network .network_in {bottom:auto; left:auto; position:relative; transform:translateX(0); padding:20px 0 0;}
#network .network_in .lineTit{font-size:60px;}
#network .network_in .fs64{margin-top:-20px;}
#network .network_in .fs64 br{display: none;}
#network .network_in .stxt{padding:15px 0 0; width: 100%;}
#network .network_in .btnArea{padding:20px 0 0;}

}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

#about .about_in{max-width:280px;}
#about .about_in .fs64 {font-size:1.6rem}


}