@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);



body {
    /* set margin to 0 and overflow to hidden, to go fullscreen */
    margin: 0; width:100%; height:100%;
    overflow: hidden;
    font-family: "Noto Sans KR", sans-serif;
    -webkit-overflow-scrolling:touch;
}

html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em; font-family: "Noto Sans KR", sans-serif;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ul {margin:0;padding:0; list-style:none;}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle}
input, button {margin:0;padding:0;font-family: "Noto Sans KR", sans-serif; font-size:1em}
button {cursor:pointer}
textarea, select {font-family: "Noto Sans KR", sans-serif; font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a:link, a:visited, a:hover, a:focus, a:active {color:#333333;text-decoration:none; font-weight:normal;}

input {
   -webkit-appearance: none;
   -webkit-border-radius: 0;
}

#main_bg_wrap {position:fixed; top:0; left:0; width:100%; height:100%; z-index:-9999; }
#main_bg {position:fixed; top:0; left:0; width:100%; height:100%; background:url(../images/main_bg.jpg) center center; background-size:cover; z-index:-10;}
#main_bg2 {position:fixed; top:0; left:0;  width:100%; height:100%; background:url(../images/main_bg2.png) center center; background-size:cover; z-index:-9;}

#orbit {position:absolute; width:100%; height:100%; top:0; left:0px; z-index:-5; display:block;} 
#orbit canvas{ margin:0 auto;}
#loading {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000; display:block; background:#000; color:#fff; }
#loading_img {position:absolute; bottom:48%; margin-left:50%; left:-50px; width:100px; height:0px; background: url(../images/loading_logo.png) center bottom no-repeat; }
#loading_text {position:absolute; top:52%; left:0; width:100%; height:50px; font-size:20px; text-align:center;}

#loading_sub {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10001; display:none; background:rgba(0,0,0,0.5); color:#fff; text-align:center;}


svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  transform-origin: center;
  transform: rotate(90deg);
  stroke-linecap: round;
}
.rotate {
  animation: rotate 1.4s linear infinite;
  transform-origin: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading_sub img {top:48%; width:90px; position:absolute; margin-left:50%; left:-45px;}

#mobile_menubg{display:none;}

#top_banner {position:absolute; top:0px; left:0; width:100%; height:150px; z-index:9999; background:#fff; display:block;}
#top_banner_wrap {position:relative; margin:0 auto; width:950px; height:150px;}
#top_banner_list {position:relative; margin:0 auto; width:100%; height:150px;  text-align: center; display:block;}
.top_banner_image {position:relative; margin:0 auto; width:100%; height:150px; background-position:center center; background-size:cover; display:block;}
#top_banner_image1 {background-image:url(../images/banner_1.jpg);}
#top_banner_image2 {background-image:url(../images/banner_2.jpg);}
#top_banner_image3 {background-image:url(../images/banner_3.jpg);}
#top_banner_image4 {background-image:url(../images/banner_4.jpg);}


.bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}

.bx-pager .bx-default-pager {display:none;}
.bx-wrapper .bx-prev {
  left: -50px;
  background: url('../images/btn_prev.jpg') no-repeat ;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: -50px;
  background: url('../images/btn_next.jpg') no-repeat ;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 38%;
  margin-top: -13px;
  outline: 0;
  width: 26px;
  height: 46px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}

.bx-pager {display:none;}


#top_banner_btn {position:absolute; bottom:-36px; width:70px; margin-left:50%; left:-44px;height:36px; cursor:pointer; z-index: 100;}
#top_banner_btn_img {cursor:pointer;}

#top_banner_menu {position:absolute; bottom: -50px; right:3%; text-align:right; font-size:18px; color:#fff; font-weight:bold;}
#top_banner_menu li {display:inline-block; margin-left:10px;}
#top_banner_menu a{color:#fff;}

#side_btn {position:absolute; top:47%; height:70px; width:38px; left:0; cursor:pointer; z-index: 101; display:block;}


#side_btn_m_img {display:none; cursor:pointer;}
#side_btn_m_close {display:none; cursor:pointer;}

#side_menu {position:absolute; top:20%; left:70px; width:100px; font-size:16px; line-height:36px;  z-index:11;}
#side_menu1  {color:#fff;  z-index:1;}
#side_menu1 a {color:#fff;  z-index:1;}


#main_logo {position:absolute; bottom:20%; left:-195px; margin-left:50%; width:390px; height:106px; z-index:1;}
#honor {position:absolute; right: 2.5%; width: 150px; height: 160px; top: 50%; margin-top: -50px; text-align:center;}
#honor img {width:100px;}
#honor_text{position:relative; margin:0px auto;text-align:center;}
#honor_text{position:relative; margin:10px auto; color:#ffea00; font-size:14px; text-align:center;}

#footer {position:absolute; bottom:0px; left:0px; width:100%; height:140px; z-index:11;}
#footer a {color: #fff;}
#footer_copy {position:absolute; left:70px; bottom:20%;  width:auto; font-size:12px; line-height:16px;}
#footer_copy1 {margin-top:12px; position:relative;    margin-bottom: 4px;}
#footer_copy1 li {float:left; margin-right:13px; }
#footer_copy1:after {display:block;visibility:hidden;clear:both;content:""}
#footer_copy span { font-size:12px; line-height:16px; color:#fff;}

#footer_menu {position:absolute; right:70px; bottom:20%; width: auto; font-size:16px;}
#footer_menu1 {position:relative; text-align:right;}
#footer_menu1 li {float:left; margin-left:20px;}
#footer_menu1:after {display:block;visibility:hidden;clear:both;content:""}

#bg_menu {position:absolute; width:100%; height:100%; z-index:100000; top:0; left:0; display:none; opacity:0;}

#bg_menu_back {position: absolute; background: #000000; width:0%; height: 100%;}

#bg_menu_logo {position:absolute; width:300px; height:70px; left:7%; top:47%;  opacity:0; }
#bg_menu_border {position:absolute; width:0%; height:1px; background:#6e6e6e; top:51%; left:27%; opacity:0;}

#bg_menu_close {position:absolute; width:36px; height:70px; right:0; top:47%; cursor:pointer;  opacity:0;}

#bg_menu_wrap {position:absolute; width: auto; right: 15%; height:auto; max-height:60%; top:33%;  opacity:0; z-index:12; }
.bg_menu_nav_dep1 {position:relative; transform: translateZ(20px);}
.bg_nav_dep1:after {display:block;visibility:hidden;clear:both;content:""}
.bg_nav_dep1_li {float:left; width:100px; margin-right:55px;}
.bg_nav_dep1_li p{font-size:26px; color:#fff; margin-bottom:40px;}
.bg_nav_dep2 {position:relative;}
.bg_nav_dep2_li a{font-size:16px; line-height:38px; color:#fff;}
.bg_nav_dep2_li.hover  a{color:#666;}

.mobile {display:none;}


#main_frame_div {width:100%; height:100%; overflow:hidden; z-index:50; position:absolute; top:0; left:0; display:none;-webkit-overflow-scrolling:touch;}
#main_frame {width:100%; height:100%; overflow:hidden; z-index:50; position:absolute; top:0; left:0; border:0; opacity:0;}


/* ��Ʈ�� ������ �߰� */
#intropage {width:100%; height:100%; overflow:hidden; z-index:10; position:absolute; top:0; left:0; background:url(../images/intro/intro_bg.jpg) center center; display:none; opacity:0;}

#intro_line_bg {width:100%; height:341px; position:absolute; top: 265px; left:0; background:url(../images/intro/intro_line.png) center center;}
#intro_bg_point {width:142px; height:91px;  bottom:0; margin-left:50%; left:-71px; position:absolute;}
#intro_page1 {width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0; display:none;}
#intro_page2 {width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0; display:none;}
#intro_page3 {width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0; display:none;}

.intro_title {position:absolute; height:90px; margin-left:50%; left:-250px; width:500px; top:125px;}
.intro_title1 {font-size:30px; color:#fff; font-weight:500; text-align:center; height:30px; line-height:30px; width:500px; }
.intro_title2 {font-size:60px;  font-weight:500; text-align:center; height:60px; line-height:60px; width:500px; }
#intro_title12 {color:#b793db;}
#intro_title22 {color:#ffcc4f;}
#intro_title32 {color:#5abeff;}

.intro_icon_wrap {width:124px; height: 175px; position:absolute; cursor:pointer;  opacity:0;}

.intro_icon_wrap .intro_icon{position:absolute; left:0; top:0; z-index:1; visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; }
.intro_icon_wrap.hover .intro_icon {visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; }

.intro_dot {position:absolute; left:48px; bottom:28px; z-index:0; }
.intro_icon_title {width:124px; height:28px; line-height:28px; color:#fff; font-size:22px; font-weight:500; bottom:0; text-align:center; position:absolute;}
.intro_main_img {width:362px; height:427px; bottom: 20px; position:absolute; margin-left:50%; left:-181px; opacity:0;}


#intro_icon11_wrap {top:389px; margin-left:50%; left:-338px;}
#intro_icon12_wrap {top:298px; margin-left:50%; left:-208px;}
#intro_icon13_wrap {top:255px; margin-left:50%; left:-62px;}
#intro_icon14_wrap {top:298px; margin-left:50%; left:88px;}
#intro_icon15_wrap {top:389px; margin-left:50%; left:214px;}

#intro_icon21_wrap {top:389px; margin-left:50%; left:-338px;}
#intro_icon22_wrap {top:264px; margin-left:50%; left:-164px;}
#intro_icon23_wrap {top:264px; margin-left:50%; left:39px;}
#intro_icon24_wrap {top:389px; margin-left:50%; left:214px;}

#intro_icon31_wrap {top:389px; margin-left:50%; left:-338px;}
#intro_icon32_wrap {top:255px; margin-left:50%; left:-62px;}
#intro_icon33_wrap {top:389px; margin-left:50%; left:214px;}

/* ��Ʈ�������� �߰� �� */


@media screen and (max-width: 1024px) and (min-width:769px) {
  #side_menu {left:3%;}
#honor {position:absolute; right: 2.5%; width: 150px; height: 160px; top: 50%; margin-top: -50px; text-align:center;}
#honor img {width:100px;}
#honor_text{position:relative; margin:0px auto;text-align:center;}
#honor_text{position:relative; margin:10px auto; color:#ffea00; font-size:14px; text-align:center;}
#top_banner_wrap {position:relative; margin:0 auto; width:100%; height:150px;}


  #footer {position:absolute; bottom:0px; left:0px; width:100%; height:140px;}
  #footer_copy {left:3%;}
  #footer_menu {right:3%;}
  .bg_nav_dep1_li.mobile {display:none;}
  
  #bg_menu_border {position:absolute; width:0%; height:0px;}
  #bg_menu_logo { position: absolute; width: 300px; height: 70px; left: 4%; top: 47%; opacity: 0;}
  #bg_menu_wrap {position:absolute; width: auto; right: 4%; height:auto; max-height:60%; top:40%;   transform-style: preserve-3d;  opacity:0; }
  .bg_menu_nav_dep1 {position:relative; transform: translateZ(20px);}
  .bg_nav_dep1:after {display:block;visibility:hidden;clear:both;content:""}
  .bg_nav_dep1_li {float:left; width:100px; margin-right:33px;}
  .bg_nav_dep1_li p{font-size:26px; color:#fff; margin-bottom:40px;}
  .bg_nav_dep2 {position:relative;}
  .bg_nav_dep2_li a{font-size:16px; line-height:38px; color:#fff;}
  .bg_nav_dep2_li.hover  a{color:#666;}
  .mobile {display:none;}
    
  #side_btn_m_img {display:none;}
  #side_btn_m_close {display:none;}

#main_frame_div {background-size: cover !important;}
}

@media screen and (max-width: 768px) and (min-width:416px) {
  #main_logo { bottom:10%;}
  #main_logo img{width:95%; margin:0 auto;}
  #top_banner {position:absolute; top:0px; left:0; width:100%; height:90px; z-index:9999; background:#fff; display:block;}
#top_banner_wrap {position:relative; margin:0 auto; width:100%; height:90px;}


  #top_banner_list {position:relative; margin:0 auto; width:100%; height:90px;  text-align: center; display:block;}

  .top_banner_image {position:relative; margin:0 auto; width:100%; height:90px; background-position:center center; background-size:cover; display:block;}
  #top_banner_image1 {background-image:url(../images/banner_m1.jpg) !important;}
#top_banner_image2 {background-image:url(../images/banner_m2.jpg) !important;}
#top_banner_image3 {background-image:url(../images/banner_m3.jpg) !important;}
#top_banner_image4 {background-image:url(../images/banner_m4.jpg) !important;}
  
#honor {position:absolute; right: 2.5%; width: 150px; height: 160px; top: 50%; margin-top: -50px; text-align:center;}
#honor img {width:100px;}
#honor_text{position:relative; margin:0px auto;text-align:center;}
#honor_text{position:relative; margin:10px auto; color:#ffea00; font-size:14px; text-align:center;}
  #side_menu {display:none;}
  #footer {height:auto;}
  #footer_copy {left:3%; bootm:1%; right: 3%;}
  #footer_copy img {display:none;}
  #footer_copy span:before {display:block;visibility:hidden;clear:both;content:"</br>"}
  #footer_copy span {margin: 0 auto 10px; display: block; text-align: center;}
  #footer_copy1 {display:none;}
  #footer_menu {display:none;}

  #bg_menu_logo {position:absolute; width:45%; height:auto; left:initial; margin-left:initail; right:4%; top:2%;  opacity:0; }
  #bg_menu_logo img {width:100%;}
  #bg_menu_border {position:absolute; width:0%; height:0px;}
  #bg_menu_close {position:absolute; width:36px; height:70px; right:0; top:47%; cursor:pointer;  opacity:0;}
  #bg_menu_wrap {position:absolute; width: 100%; right: 0%;  height:auto; max-height:80%; top:  13%;   transform-style: preserve-3d;  opacity:0;font-weight:300;}
  #bg_menu_nav_dep1 {position:relative; transform: translateZ(20px); margin:0 5%; width:90%;height:auto;}
  #bg_menu_nav_dep1:after {display:block;visibility:hidden;clear:both;content:""}
  
  #bg_menu_nav2_dep1 {position:relative; transform: translateZ(20px); margin:0 5%; width:90%;height:auto;}
  #bg_menu_nav2_dep1:after {display:block;visibility:hidden;clear:both;content:""}
  
  
  .bg_nav_dep1_li.mobile {display:block;}
  .bg_nav_dep1_li { width:30%; margin-bottom:20px; margin-right:5%; float:left;}
  .bg_nav_dep1_li.last { margin-right:0;}
  .bg_nav_dep1_li p{font-size:22px; color:#fff; margin-bottom:20px;  }
  .bg_nav_dep1_li:after {display:block;visibility:hidden;clear:both;content:""}
  .bg_nav_dep2 {position:relative; display:block; margin:0 auto; width:100%; outside none; }
  .bg_nav_dep2:after {display:block;visibility:hidden;clear:both;content:""}
  .bg_nav_dep2_li {margin:0 0 8px;}
  .bg_nav_dep2_li a{font-size:16px; line-height:30px; color:#fff;font-weight:300;}
  .bg_nav_dep2_li.hover  a{color:#666;}
  
  
  .bg_nav_dep2_li.honor a {color:#ffea00; font-size:20px;}
  
  .bg_menu_border2 {position:relative; width:90%; height:1px; background: #333; margin: 10px 5% 30px; display:block;}

  .mobile{display:block;}
  #side_btn_m_img {display:none;}
  #side_btn_m_close {display:none;}

#main_frame_div {background-size: cover !important;}
}

@media screen and (max-width: 415px){
.mobile {display:block;}
#main_logo {width:70%; left:-35%; bottom:13%;}
#main_logo img{width:95%; margin:0 auto;}


#mobile_menubg{position:absolute; top:0; left:0; width:100%; height:65px; display:none; background:rgba(0, 0, 0, 0.6); z-index:-999999; border-bottom:1px solid #797979;}

#top_banner {position:absolute; top:0px; left:0; width:100%; height:80px; z-index:9999; background:#fff; display:block;}
#top_banner_list {position:relative; margin:0 auto; width:100% !important; height:80px;  text-align: center; display:block;}
#top_banner_wrap {position:relative; margin:0 auto; width:100%; height:80px;}

.top_banner_image {position:relative; margin:0 auto; width:100% !important; height:78px; background-position:center center; background-size:cover; display:block; }
#top_banner_image1 {background-image:url(../images/banner_m1.jpg) !important;}
#top_banner_image2 {background-image:url(../images/banner_m2.jpg) !important;}
#top_banner_image3 {background-image:url(../images/banner_m3.jpg) !important;}
#top_banner_image4 {background-image:url(../images/banner_m4.jpg) !important;}

#top_banner_btn { cursor: pointer; bottom:-58px; right:4px; width:56px; height:56px; margin-left: initial; left: initial;}

#honor {display:none;}
#side_menu {display:none;}
#footer {height:auto;}
#footer_copy {left:3%; bootm:1%; right: 3%;}
#footer_copy img {display:none;}
#footer_copy span:before {display:block;visibility:hidden;clear:both;content:"</br>"}
#footer_copy span {margin: 0 auto 10px; display: block; text-align: center;}
#footer_copy1 {display:none;}
#footer_menu {display:none;}

#bg_menu_logo {position:absolute; width:45%; height:auto; left:initial; margin-left:initail; right:4%; top:2%;  opacity:0; }
#bg_menu_logo img {width:100%;}
#bg_menu_border {position:absolute; width:0%; height:0px;}
#bg_menu_close {position:absolute; width:36px; height:70px; right:0; top:47%; cursor:pointer;  opacity:0;}
#bg_menu_wrap {position:absolute; width: 100%; right: 0%;  height:auto; max-height:80%; top:  13%;   transform-style: preserve-3d;  opacity:0;font-weight:300; }
#bg_menu_nav_dep1 {position:relative; transform: translateZ(20px); margin:0 5%; width:90%;height:auto;}
#bg_menu_nav_dep1:after {display:block;visibility:hidden;clear:both;content:""}

#bg_menu_nav2_dep1 {position:relative; transform: translateZ(20px); margin:0 5%; width:90%;height:auto;}
#bg_menu_nav2_dep1:after {display:block;visibility:hidden;clear:both;content:""}


.bg_nav_dep1_li.mobile {display:block;}
.bg_nav_dep1_li { width: 27%; margin: 0 1.75% 15px; float:left;}

.bg_nav_dep1_li.first{margin-left:6%;}
 .bg_nav_dep1_li.last {margin-right:6%;}

#bg_menu_nav2_dep1 .bg_nav_dep1_li{ width:initial;}

.bg_nav_dep1_li p{font-size:20px; color:#fff; margin-bottom:10px;  }
.bg_nav_dep1_li:after {display:block;visibility:hidden;clear:both;content:""}
.bg_nav_dep2 {position:relative; display:block; margin:0 auto; width:100%; outside none; }
.bg_nav_dep2:after {display:block;visibility:hidden;clear:both;content:""}
.bg_nav_dep2_li {margin:0 0;}
.bg_nav_dep2_li a{font-size:15px; line-height:30px; color:#fff; font-weight:300;}
.bg_nav_dep2_li.hover  a{color:#666;}

.bg_nav_dep2_li.honor a {color:#ffea00; font-size:20px;}

.bg_menu_border2 {position:relative; width:90%; height:1px; background: #333; margin: 10px 5% 25px; display:block;}

#side_btn_m_img {display:block;  cursor: pointer; }
#side_btn_m_close {display:block;  cursor: pointer; }


#side_btn_img {display:none;  cursor: pointer; }
#side_btn_close {display:none;  cursor: pointer; }

#side_btn { position: absolute; top: 0%; height: 65px; width: 69px; left: 0%; cursor: pointer; }
#bg_menu_close { position: absolute; top: 0%; height: 65px; width: 69px; left: 0%; cursor: pointer; }

#top_banner_menu {display:none;}
#main_frame_div {background-size: cover !important;}
}