@charset "utf-8";
@font-face {
    font-family: 'MaplestoryOTFBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* CSS Document */

							.fixed-top.scrolled {
							  background-color: #fff !important;
							  transition: background-color 200ms linear;
							}
							.fixed-top.scrolled a.navbar-brand img {
								height: 66px;
								transition: 0.8s;}
								
      nav{background-color:#fff;}
	  .bg-light-navy {background-color:#eef1f8;}
	   nav {background-image:url(); background-position:left top; background-repeat:no-repeat;}
	  .navbar {padding: .5rem 2.6rem;}
	   .navbar-collapse {background-color:rgba(255,255,255,0);}
	    a.nav-link {font-size:17px; 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); }
	    @media (max-width: 576px) {
			  nav {background-image:none;}
			 .navbar {padding: .5rem .2rem .5rem .1rem;}
			 .fixed-top.scrolled a.navbar-brand img {
								height: 35px;
								transition: 0.8s;}
								 a.navbar-brand img { height:35px;}
			 .navbar-brand {padding-top:0;}
			 .navbar-collapse {background-color:rgba(255,255,255,1);}
		}
		
		.navbar-collapse {
    background-color: rgba(255,255,255,.5);
}
		 /*메인 슬라이드 ===============================================*/
	  /*커러셀 캡션 텍스트---------------------------------------------------------------*/
  .carousel-inner img {
    width: 100%; /* Set width to 100% */
    margin: auto;
  }
   .carousel-caption {text-shadow: 0px 0px 3px #000000;}
   
   .slide-mobile {margin-top:60px;}
   @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;
													 }
									
	  }
	  	/*메인 컨텐츠===============================================*/
	.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;}
    .card-title {font-family: 'MaplestoryOTFBold';}
	/*메인 아이콘===============================================*/
	.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;}
							   }