@charset "utf-8";
/* CSS Document */

							.fixed-top.scrolled {
							  background-color: #fff !important;
							  transition: background-color 200ms linear;
							}
							.fixed-top.scrolled a.navbar-brand img {
								height: 50px;
								transition: 0.8s;}
								
     
	  .bg-light-navy {background-color:#eef1f8;}
	   nav {background-image:url(); background-position:left top; background-repeat:no-repeat;}
	   .navbar {padding: 0.5rem 1.6rem;}
	   .navbar-collapse {background-color:rgba(255,255,255,0);}
	    a.nav-link {font-weight:700; color:#000; text-shadow:0px 0px 0px #fff;}
	   .navbar-expand-lg .navbar-nav .nav-link {
											   padding-right: .7rem;
											   padding-left: .7rem;
											  }
											  .navbar-light .navbar-nav .nav-link { color: rgba(0,0,0,1); }
											  a.navbar-brand {
												                 /* background-image:url(/images/logo.png);
																   background-position:5px center;
																   background-repeat:no-repeat;
																   background-size:50px;
																   padding-left:70px;*/
																   vertical-align: middle;
																   font-size:1.5rem;
																   line-height:auto;
																   }
																  
	    @media (max-width: 778px) {
			  nav {background-image:none;}
			 .navbar {padding: .2rem .2rem .2rem .2rem;}
			 .fixed-top.scrolled a.navbar-brand {
								transition: 0.8s;}
								 a.navbar-brand {
												      /*background-image:url(/images/logo_small.png);
																   background-position:5px center;
																   background-repeat:no-repeat;
																   background-size:30px;
																   padding-left:40px;*/
																  font-size:1.1rem;
																   line-height:1.5;
																   color:#FFF;
																   padding-top:7px;
																   }
								 a.navbar-brand img { height:50px;}


		}
		
		 /*메인 슬라이드 ===============================================*/
	  /*커러셀 캡션 텍스트---------------------------------------------------------------*/
  .carousel-inner img {
    width: 100%; /* Set width to 100% */
    margin: auto;
  }
   .carousel-caption {text-shadow: 0px 0px 3px #000000;}
   
   .slide-mobile {margin-top:40px;}
   @media (min-width: 768px) { 
           .carousel-caption {
			     padding-bottom: 60px;
			}
			.carousel-indicators li {
								  width: 40px;
								  height: 6px;
								  background-color: rgba(255,255,255,.5);
								  border: 0px solid #fff;
								  border-radius: 0px;
							  }
							  
						  .carousel-indicators .active {
							width: 42px;
							height: 8px;
							background-color: rgba(255,255,255,.9);
						}
						.slide-mobile {margin-top:auto;}
						.carousel-caption h3 {margin-bottom:0; font-size:2.6rem; line-height:1.3;}
   }
  @media (max-width: 576px) { 
   .carousel-caption h3 {margin-bottom:0; font-size:1rem; line-height:1.3;}

  }
  
.carousel-indicators li {
								  width: 30px;
								  height: 5px;
								  margin-top:0;
								  background-color: rgba(255,255,255,.5);
								  border: 0px solid #fff;
								  border-radius: 0px;
							  }
							  
  .carousel-indicators .active {
    width: 30px;
    height: 5px;
	margin-top:0;
	background-color: rgba(255,255,255,.9);
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
	     .jssor-area {position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;visibility:hidden;}/*모바일 페이지 index_m.html에는 직접 정의되어 있음.*/
	        /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /*jssor slider bullet skin 032 css*/
        .jssorb032 {position:absolute;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
		
	  @media (max-width: 576px) {
	                            	.jssor-area {top:70px;width:1300px;height:700px;}  
									.mobile-mt {margin-top:50px;}
									 .mobile-boss-text {width:100%;
									                    display:block;
														text-align:center;
														margin: 0;
													    position: absolute;
													    top: 50%;
													    -ms-transform: translateY(-50%);
													    transform: translateY(-50%);
													    font-weight:700;
														font-size:40px;
														color:#000;
														line-height:1.2;
														letter-spacing:-1px;
														text-shadow: 1px 1px 3px #fff;
													 -webkit-text-shadow: 1px 1px 3px #fff;
													 -moz-text-shadow: 1px 1px 3px #fff;
													 -o-text-shadow: 1px 1px 3px #fff;
													 }
									
	  }
/* 3D영상 ----------------------------------------------------*/
#app-container {
          display: flex;
          flex-direction: column;
    
          /* without this positioning, descendent positions may have undefined behvavior in browsers like Safari that need positioning up the entire hierarchy */
          position: relative;
          width: 100% !important;
          height: 100%;
          overflow: hidden;
        }
        main {
          flex: 1 auto;
          position: relative;
          width: 100%;
          background-color: #444;
        }
        #canvas-container {
          position: absolute;
          width: 100%;
		  height: 100%;          
          transition: width 500ms, height 500ms; /* CANVAS_RESIZE_ANIMATION_TIME */
        }
        canvas:focus {
          outline: none;
        }
			        @media screen and (max-width: 1024px) { 
			                                        #app-container {height: 520px;}
													#canvas-container { width: 100%; height: 520px;}
													.embed-responsive { height:520px;}
													}
/*---------------------------------------------------*/
	  	/*메인 컨텐츠===============================================*/
	.bg-color1 {/*background-color:#c3d8ff;*/ min-height:309px; /*margin-right:15px; margin-left:15px; padding-left:0; padding-right:0;*/}
	.bg-color2 {/*background-color:#99b9f4;*/ min-height:309px; /*margin-right:15px; margin-left:15px; padding-left:0; padding-right:0;*/}
	.bg-color1, .bg-color2 {background-color:#fff;}
	.bg-color3 {/* margin-right:15px; margin-left:15px; padding-left:0; padding-right:0; */}
	 .bg-color1 ul, .bg-color2 ul {padding-left:20px;}
	 h6 font{display:inline;}
	  @media (max-width: 768px) {
	  h6 font{display:block;}
	  }

	/*메인 아이콘===============================================*/
	.bg-icon-change:hover {  background-color:#ccc;
							-webkit-transition: background-color 1000ms linear;
							-ms-transition: background-color 1000ms linear;
							 transition: background-color 1000ms linear; /*컬러체인지*/}
							 
							   @media (max-width: 576px) {
								   .bg-color1, .bg-color2 {min-height:auto;}
								   .bg-color1 ul, .bg-color2 ul {padding-left:25px;}
								   .m-h3 {font-size:1.2rem;}
							   }
							   
							   #more {display: none;}
							   

							   .scroll-icon {position:absolute;
							                 top: 50%;
											 margin: -50px 0 0 -50px;
											 display:none;
											 z-index:19999999;
											 }

								 @media (max-width: 1114px) {
								     .scroll-icon {display:none;}
								 

								 }