@charset "utf-8";
html {
    scroll-behavior: smooth;
}

.inner{max-width: 1680px; margin: 0 auto; position: relative; z-index: 2; width: 100%}

.head_top{position: fixed; z-index: 9998; left: 0; top: 0; width: 100%; transition-duration: .5s}
.head_top.drop{background: rgba(0,0,0,0.8); transition-duration: .5s}


.head_top .inner{position: relative; }
.head_top .top_gnb{}
.head_top .top_gnb ul{display: flex; height: 100px; justify-content: center;
    align-items: center; gap:0px}
.head_top .top_gnb li{width: 120px; text-align: center}
.head_top .top_gnb li a{color: #fff; font-size: 18px; text-align: center}

.top_logo{position: absolute; left: 0; top: 15px}
.right_top{position: absolute; right: 0; top: 40px; display: flex; gap:30px;align-items: center;
    justify-content: flex-end;}
    
    
.lang{position: relative}    
.lang_list{height: 0; visibility: hidden; position: absolute; padding: 0 15px; border-radius: 15px; top: 30px;
    left: 50%;
    transform: translateX(-50%); max-height: 0;  transition-duration: .5s;}
.lang img{cursor: pointer; display: block}
.lang.on .lang_list{max-height: 200px; background: #fff; visibility: visible; transition-duration: .5s; padding: 15px; height: auto }
.lang_list a{display: block; font-size: 16px; color: #222}
.lang_list a + a{margin-top: 5px}


.all_nav_top{position: absolute; top: 0px; width: 100%; background: #111; 
padding-top: 0px; max-height: 0; visibility:hidden; transition-duration: .5s ; height: 0}
.all_nav_list{display: flex; justify-content: center;
    align-items: flex-start; gap:0px; padding: 30px 0; }
.all_nav_list li{width: 120px; text-align: center}
.all_nav_list li a{color: #fff; font-size: 18px; text-align: center; display: block; opacity: 0; transition-duration: .5s}
.all_nav_list li a + a{margin-top: 10px;}

.head_top:hover .all_nav_top{visibility: visible; height: auto; max-height: 1000px; transition-duration: .5s ; padding-top: 100px;}
.head_top:hover .all_nav_list li a{opacity: 1; transition-duration: .5s}

.all_nav{background: #000 url('/theme/basic/img/navlogo.png'); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;
		background-repeat: no-repeat; background-position: right bottom; opacity: 0; visibility: hidden; transition-duration: .5s}
.all_nav.open{opacity: 1; transition-duration: .5s; visibility: visible}
.all_nav .inner{position: relative; }

.all_nav .right_top{z-index: 2}

.all_list{padding-top: 100px; left: -100%; position: relative}
.all_nav.open .all_list{left: 0; transition-duration: 1s}
.all_list li{display: flex; gap:100px; justify-content: flex-start;
    align-items: center;}
.all_list li + li{margin-top: 50px}
.all_list li h2{font-size: 45px; color: #fff; font-weight: 600; width: 170px}
.all_list li .box{display: flex; gap:50px;justify-content: flex-start;
    align-items: center;}
.all_list li .box a{color: #fff; font-size: 25px;}




.main_visual{height: 100vh; overflow: hidden}
.main_slide .slick-slide{position: relative}
.main_slide .text_are{position: absolute; z-index: 2 ; width: 100%; left: 0; top: 0; height: 100%;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; padding-bottom: 60px}

.main_slide .text_are h2{color: #fff; font-size: 60px; font-weight: 800; }
.main_slide .text_are p{margin-top: 25px; font-size: 25px; font-weight: 400; color: #fff}
.main_slide .bg{height: 100vh; overflow: hidden}
.arrowSlider{position: absolute; max-width: 1680px; width: 100%; top: calc(50% + 120px); z-index: 2; left: 50%;
    transform: translateX(-50%); display: flex; gap:30px}
.arrowSlider .prev,
.arrowSlider .next{cursor: pointer}
.slides-numbers{color: #fff; font-size: 16px;}


.main_slide .bg{overflow: hidden; transition-duration: 1s; width: 100vw; height: 100vh;}
.main_slide .bg img{transition-duration: 2s; animation: boom 2s 1 linear; }

@keyframes boom {
    from {
        scale: 1.0;

    }
    to {
        scale: 1.1;
    }
}


.main_slide .slick-current .bg img{scale: 1.1; transition-duration: 2s}

.scroll_down{position: absolute; bottom: 50px;  z-index: 2; text-align: center; width: 20px; height: 30px; 
border: 2px solid #fff; border-radius: 20px; left: 50%;transform: translateX(-50%); opacity: .7}

.scroll_down span{display: block; width: 2px; height: 6px; 
border-radius: 50px; position: absolute; left: 50%;transform: translateX(-50%); background: #fff; top: 5px;animation: mouse 1s infinite linear; }





@keyframes mouse {
    from {
        top: 5px;

    }
    to {
        top: 10px;
    }
}



.main_video{padding: 100px 0; overflow-x: hidden}
.main_title{margin-bottom: 50px}
.main_title p{color: #0057A6; font-size: 20px; font-weight: 500}
.main_title h2{color: #fff; font-size: 40px; font-weight: bold}

.main_video_slide{margin: 0 -20px; }

.main_video_slide .slick-list{overflow: visible}

.main_video_slide .slick-slide{padding: 0 20px; width: 47vw}
.main_video_slide .slick-slide.slick-current{width: 53vw; transition-duration: .5s}
.main_video_slide .thum{position: relative; }
.main_video_slide .thum img{max-width: 100%; width: 100%}
.main_video_slide .thum .play_btn{position: absolute; left: 50%; top: 50%;     transform: translate(-50%, -50%); opacity: 0; width: 70px}
.main_video_slide .thum .play_btn img{width: auto}

.main_video_slide .box{opacity: .5; }
.main_video_slide .slick-slide.slick-current .box{opacity: 1}
.main_video_slide .slick-slide.slick-current .thum .play_btn{opacity: 1}

.main_video_slide p{font-size: 22px; margin-top: 20px; color: #fff}




.main_video .arrowSlider{position: absolute; max-width: 1680px; width: 100%; top: auto; bottom: 0px; justify-content: flex-end;}


.pop-layer .pop-container {
  position: absolute; 
  height: auto;
  max-width: 1000px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.pop-layer .btn-r {
  position: absolute; right: -20px; top: 0
}

.pop-layer {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 10;
}




/**
 *  Progress Bar
 */
.progress {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
  
  background-color: #333;
  background-image: linear-gradient(to right, #0057A6, #0057A6);
  background-repeat: no-repeat;
  background-size: 0 100%;
  
  transition: background-size .4s ease-in-out;

  max-width: 1300px; 
  margin: 80px auto 0; 
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


.news_slide .slick-list{overflow: visible}
.news_slide .slick-slide{opacity: .5}
.news_slide .slick-slide.slick-active{opacity: 1}
.news_slide p{font-size: 22px; margin-top: 20px; color: #fff}

.news_slide .thum img{max-width: 100%}

.partner_slide{padding: 100px 0 0; height: }
.partner_slide .slick-slide{padding: 0 10px}
.partner_slide .slick-slide img{width: 100%}








.foot_are{}
.foot_top{border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px 0}
.foot_top .inner{display: flex; gap:50px}
.foot_top h2{color: #fff; font-size: 16px;}
.foot_top a{color: #fff; font-size: 16px;}
.foot_bottom{padding: 50px 0; }

.foot_bottom ul{display: flex}
.foot_bottom ul li + li{margin-left: 21px;}
.foot_bottom ul li a{color: #858585; font-size: 16px;}

.foot_bottom p{margin-top: 0px; font-size: 16px; color:#858585 }
.foot_bottom p + p{margin-top: 10px}







/**
 *  Sub
 */


.sub_visual{position: relative; height: 77vh}
.sub_visual .sub_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transition-duration: 1s; z-index: -1}
.sub_visual .sub_bg img{transition-duration: 2s; animation: boom 2s 1 linear; }


.sub_visual .visual_txt{text-align: center; display: flex; height: 100%;width: 100%;justify-content: center;
    align-items: center;
    flex-direction: column;}
.sub_visual .visual_txt h2{color: #fff; font-size: 60px; font-weight: 900}
.sub_visual .visual_txt p{margin-top: 20px; font-size: 25px; font-weight: 400; color: #fff}


.loop_txt{ height: 23vh;
  width: 100%;

  overflow: hidden;
  position: relative;}
  
.loop_txt .loop_are{
	display: block;
  width: 200%;
  height: 185px;
  position: absolute;
  overflow: hidden;
  animation: marquee 10s linear infinite;
  top: 15px
}

.loop_txt h1{
	font-size: 150px;
	color: #111;
	text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;
	text-transform: uppercase
}



@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}





.sub{padding: 100px 0}
.sub.nobottm{padding-bottom: 0}

.company{display: flex; gap:80px}
.company .right_txt{color: #fff; flex:1}
.company .right_txt p{font-size: 20px; line-height: 32px; word-break: keep-all}
.company .right_txt p b{color: #0057A6}
.company .right_txt h3{margin-top: 70px; font-size: 24px; line-height: 32px; text-align: right}
.company .right_txt h3 img{display: inline-block; margin-top: 15px}




.company .left_thum{position: relative; width: 670px; padding: 100px}
.company .left_thum span{position: absolute; width: 500px; height: 500px; border: 1px solid #0057A6; border-radius: 500px; z-index: -1}
.company .left_thum span.ani01{left: 50px; top: 0; animation: ani01 1s linear infinite;}
.company .left_thum span.ani02{left: 80px; top: 60px; animation: ani02 2s linear infinite; opacity: .8}
.company .left_thum span.ani03{left: 40px; top: 100px; animation: ani03 1.5s linear infinite; opacity: .5}






@keyframes ani01 {
  0% { left: 50px; }
  50% { left: 80px; }
  100% { left: 50px; }
}

@keyframes ani02 {
  0% { top: 60px; }
  50% { top: 100px; }
  100% { top: 60px; }
}

@keyframes ani03 {
  0% { left: 40px; }
  50% { left: 50px; }
  100% { left: 40px; }
}




.bu_title{text-align: center}
.bu_title h2{color: #fff; font-size: 35px; line-height: 50px; font-weight: 600}
.bu_title p{margin-top: 30px; color: #fff; opacity: .8; font-size: 20px; line-height: 32px;}

.bu_title ul{display: flex; margin-top: 60px; gap:30px; 
align-items: center;
    justify-content: center;}

.bu_title ul li{color: #fff; font-size: 20px; line-height: 32px; position: relative;  display: flex; gap:12px; align-items: center;
    justify-content: flex-start;}
.bu_title ul li b{font-weight: bold}
.bu_title ul li span{opacity: .8; font-weight: 400}

.bu_title ul li:before{content: ''; position: relative; width: 10px; height: 10px; background: #0057A6; border-radius: 10px}


.box_img{background: url('/theme/basic/img/sub/box_img.png'); background-size: cover; width: 0;
 margin: 0 auto; max-width: 0; transition-duration: 1s; border-radius: 0; margin-top: 120px; padding: 150px 20px}

.box_img .in_txt{display: flex; height: 100%;width: 100%;justify-content: center;
    align-items: center;
    flex-direction: column;}
    
.box_img .in_txt h2{font-size: 50px; line-height: 70px; font-weight: 400; color: #fff; text-align: center; opacity: 0; visibility: hidden}    
.box_img .in_txt h2 b{font-weight: bold}
.show .box_img{width: 100%; max-width: 1800px; transition-duration: 2s; border-radius: 40px}

.show .box_img .in_txt h2{visibility: visible; opacity: 1;transition-duration: 2s;}

.flex_bu{display: flex; gap:120px; align-items: flex-start;
    justify-content: flex-start;}


.page {
  	flex:1; 
}



.page-indicator {
    transition:transform 0.3s;
    width: 170px;;
    position: sticky;
    top: 150px;
    left: 0;
}
.page-indicator > ul > li + li{margin-top: 10px}
.page-indicator > ul > li{display: flex; gap:20px;    justify-content: flex-start;
    align-items: center;}
.page-indicator > ul > li a{color: #fff; font-size: 22px; opacity: .6}
.page-indicator > ul > li span{width: 60px; height: 3px; background: #0057A6; opacity: 0}

.page-indicator > ul > li a.active {
    opacity: 1;
    
}

.page-indicator > ul > li a.active + span{opacity: 1}

.page-1{padding-bottom: 80px}
.page-1 h2{color: #fff; font-size: 40px; line-height: 55px; font-weight: 400}


.page-2{padding-top: 80px; padding-bottom: 80px}
.page-3{padding-top: 80px; }

.page_title{margin-bottom: 30px}
.page_title h2{position: relative; color: #fff; font-size: 30px; font-weight: 600}
.page_title h2:before{content: ''; z-index: -1; position: absolute; width: 20px; height: 20px; background: #0057A6; border-radius: 20px; left: -10px; top: -5px}


.dot_list{}
.dot_list.left_p{padding-left: 15px; margin-top: 10px;}
.dot_list li{padding-left: 15px; position: relative; font-size: 20px; line-height: 35px; color: #fff; font-weight: 300}
.dot_list li:before{content: ''; width: 4px; height: 4px; background: #fff; position: absolute; left: 0; top:15px; border-radius: 4px}


.page h3{font-size: 24px; color: #fff; line-height: 40px;}
.page p{color: #fff; font-size: 20px; font-weight: 300; line-height: 35px;}

.page h3 + p{margin-top: 10px;}
.page p + h3{margin-top: 80px;}

.dot_list + p{margin-top: 15px}
.dot_list + h3{margin-top: 80px}

.system{text-align: center}


.researcher_list{display: flex; gap:15px; flex-wrap: wrap;}
.researcher_list .box{border: 1px solid #fff; padding: 20px; display: flex;   flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end; height: 240px; width: calc(25% - 15px)  }
.researcher_list .box h2{display: flex; color: #fff; font-size: 25px; align-items: center;
    justify-content: flex-start; gap:10px}
.researcher_list .box h2 b{font-weight: 600}
.researcher_list .box h2 span{display: inline-block; font-size: 18px; opacity: .8; font-weight: 300}
.researcher_list .box p{margin-top: 20px; color: #fff; font-size: 18px; font-weight: 300; line-height: 32px; word-break: keep-all}


.researcher_list + .page_title{margin-top: 120px;}


.loction_top{height: 110px;}

.map_box{overflow: hidden; border-radius: 40px;}
.map_box iframe, .map_box .root_daum_roughmap{width: 100%; height: 600px}



.location{display: flex; margin-top: 80px; gap:160px}
.location .box{display: flex; gap:25px}
.location .icon{width: 80px; height: 80px; background: #666; border-radius: 80px; display: flex; align-items: center;
    justify-content: center;}

.location_txt h3{font-size: 16px; color: #0057A6; font-weight: 800}
.location_txt p{color: #fff; font-size: 20px; line-height: 35px;}
.location_txt p.bus{font-weight: bold; margin-top: 40px; }
.location_txt p.bus_sub{font-size: 16px; line-height: 25px}


.location .tel{position: relative}
.location .fax{position: relative}

.location .tel:after{content: ''; position: absolute; left: -80px; height: 80%; width: 1px; background: #666; top: 10px}
.location .fax:after{content: ''; position: absolute; left: -80px; height: 80%; width: 1px; background: #666; top: 10px}
.location .box + .box{margin-top: 40px}



@media (max-width: 1680px) {
	
	.top_logo{left: 1rem}
	.right_top{right: 1rem}
	
	.inner{padding: 0 1rem}
	
	.arrowSlider{padding: 0 1rem}
	
	.company .right_txt p{font-size: 18px}
	
	.system img{max-width: 100%}
	
	
}


@media (max-width: 1400px) {
	
	.news_slide{margin: 0 -10px}
	.news_slide .slick-slide{padding: 0 10px}
	
	.researcher_list .box {width: calc(33% - 15px);}
	
	.location {
    display: flex;
    margin-top: 80px;
    gap: 50px;
    flex-wrap: wrap;}
    .location .adress {width: 100%}
	
	.location .tel, .location .fax{width: calc(50% - 25px)}
	
	.location .fax:after,
	.location .tel:after{display: none}
	
}

@media (max-width: 1280px){
	
	.progress {
    height: 6px;
    max-width: 600px;}
    
    .all_nav_top{display: none}
    .head_top .top_gnb{display: none}
    
    
    .all_list li + li {
    margin-top: 20px;}
    
    .all_list li h2 {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    width: 150px;}
    
    .all_list li{gap:50px}
    
    .all_list li .box a{font-size: 20px}
    
    .all_nav {background-size: 300px 300px;}
    
    .all_list li .box{display: block; opacity: 0; height: 0; max-height: 0; transition-duration: .5s; visibility: hidden}
    .all_list li .box a{display: block; }
    .all_list li .box a + a{margin-top: 8px}
	.all_list li h2.open + .box{padding: 20px 0; opacity: 1; height: auto; max-height: 1000px; transition-duration: .5s; visibility: visible}
	
	.all_nav .inner{height: 100%}
	.all_list {
    padding-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; }
	

}

@media (max-width: 1024px){

	.main_slide .bg img{height: 100%}
	.sub_visual .sub_bg img{height: 100%}
	
	.all_list li{display: block; text-align: center}
	.all_list li h2{width: 100%}
	
	
	.company {
    display: flex;
    gap: 50px;
    flex-direction: column;}
    
    .company .left_thum{margin: 0 auto}
    
    .company .right_txt h3{font-size: 22px}
    
    .bu_title ul {
    display: flex;
    margin-top: 60px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;}
    
    .page-indicator{display: none}
    
    
    .pop-layer .pop-container{max-width: 95%}
    
    .pop-layer .btn-r {
    position: absolute;
    right: 0;
    top: -30px;}
	
}


@media (max-width: 768px){
	
	.main_video_slide .slick-slide {
    padding: 0 20px;
    width: auto;
}

.main_video_slide .slick-slide.slick-current {
    width: auto;
}


.bu_title h2{word-break: keep-all}
.page-1 h2{word-break: keep-all}

.researcher_list .box {
    width: calc(50% - 15px);
}

.foot_top .inner{gap:20px}

	
}

@media (max-width: 600px){
	
	body{overflow-x: hidden}
	
	
	.main_slide .text_are h2{font-size: 35px; word-break: keep-all}
	.main_slide .text_are p {
    margin-top: 15px;
    font-size: 18px; word-break: keep-all}
    
    .main_title {
    margin-bottom: 50px;
    text-align: center;}
    
    .main_title p{font-size: 16px;}
    .main_title h2{font-size: 25px}
	.main_video .arrowSlider{display: none}
	
	.main_video_slide p{font-size: 16px; text-align: center}
	.news_slide p{font-size: 16px; text-align: center}
	
	.progress {
    height: 4px;
    max-width: 200px;
    margin: 40px auto 0;}
    
    .foot_top{display: none}
    .foot_bottom{border-top: 1px solid #666}
    
    .foot_bottom p{font-size: 14px; word-break: keep-all}
    
    
    .sub_visual .visual_txt h2{font-size: 35px; word-break: keep-all}
    
    .sub_visual .visual_txt p{
    margin-top: 15px;
    font-size: 18px; word-break: keep-all}



	.company .left_thum {
    position: relative;
    width: auto;
    padding: 50px;}
    
    .company .left_thum img{max-width: 100%}
    
    .company .left_thum span{width: 300px; height: 300px;}
    
    .company .right_txt p {
    font-size: 16px;}
    
    .company .right_txt h3 {
    font-size: 18px;}
    
    .company .right_txt h3 img {
    display: inline-block;
    margin-top: 15px;
    max-width: 180px;}
    
    .bu_title h2{font-size: 30px; line-height: 45px}
    
    .bu_title p{word-break: keep-all; font-size: 20px; line-height: 30px;}
    .bu_title p br{display: none}
    
    .sub_visual .visual_txt{padding: 0 1rem}
    
    .bu_title ul li {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;}
    
    .box_img .in_txt h2 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 400;word-break: keep-all}
    
    .page-1 h2{font-size: 25px; line-height: 35px; word-break: keep-all}
    .page-1 h2 br{display: none}
    
    .page_title h2{font-size: 22px}
    
    .dot_list li{font-size: 16px; word-break: keep-all; line-height: 25px}
    .page h3{font-size: 18px; word-break: keep-all; line-height: 32px}
    .page p{font-size: 16px; word-break: keep-all; line-height: 25px}
    
    .researcher_list .box {
    width: 100%;}
    
    
    .tbl_head01 thead th:nth-child(3){display: none}
    #bo_list .td_name{display: none}
    
    #bo_list .bo_tit a{
    	overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        line-height: 1.2;
/*        height: 4.8em;*/
        text-align: left;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 1 ;
        -webkit-box-orient: vertical;
    }
    
    
    .loction_top {
    height: 50px;}
    

    
    .map_box iframe, .map_box .root_daum_roughmap{
    width: 100%;
    height: 300px !important;}
    
    .root_daum_roughmap .wrap_map {
    position: relative;
    height: 300px !important;
}
    
    
    .location .box {
    display: flex;
    gap: 10px;
    flex-direction: column;}
    
    .location_txt h3{font-size: 14px}
    .location_txt p {
    color: #fff;
    font-size: 16px;
    line-height: 22px;}
    
    .location_txt p.bus_sub {
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px;}
    
    
    .location .icon {
    width: 40px;
    height: 40px;
    background: #666;
    border-radius: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;}
    
    .location .icon img{max-width: 100%}
    
    

}