@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/*--------------------------------------------------------------
# 기본 
--------------------------------------------------------------*/

body { font-family: 'NanumSquare', sans-serif; font-size:16px;}
ul, li{ list-style:none; margin:0px; padding:0px; }
.clear {  clear:both !important; }
a { transition: 0.5s; text-decoration:none; color:#000;}
a:hover, a:active, a:focus { outline: none; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'NanumSquare', sans-serif; font-weight:normal; }

/* btn */
.btn-primary { background-color:#102e4e !important; border-color: #102e4e !important; }



/* =============================================================== */
/* reset (font-size)
/* =============================================================== 
@media (max-width:576px){html, body{font-size:14px;}}
@media (min-width:577px) and (max-width:768px){html, body{font-size:15px;}}
@media (min-width:769px) and (max-width:1319px){html, body{font-size:16px;}}
@media (min-width:1320px){html, body{font-size:17px;}}

/*
.mainslider > li{ overflow:hidden; position:relative; height:370px;}
.mainslider > li > img{ position:absolute;  }
*/

#shop_main_slide{ margin-bottom:40px; }
.bx-wrapper img{
	max-width:100%;
	display:block;
	margin:0 auto;
	
	}

.bx-controls{display:none; position:absolute; top:340px; left:50%; z-index:999; }
.bx-controls-direction { display:none; }
.bx-pager{}
.bx-pager-item{ float:left;  }
.bx-pager-item a{ display:inline-block; width:20px; height:20px; color:#FFF; text-align:center; font-size:14px; background:#7052ce; }
.bx-pager-item .active { background:#FFCC33;  }
.bx-pager-link{ }
.bx-controls-auto{ display:none;}

.bg_wrap{ background:#f5f5f5; width:100%; }


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
#main-carousel .carousel {
  /*margin-bottom: 1.4rem;*/
}
/* Since positioning the image, we need to help out the caption */
#main-carousel .carousel-caption {
  /*bottom: 3rem;*/
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    z-index: 10;
}

#main-carousel .carousel-caption{ color:#111}
#main-carousel .carousel-caption h1{font-size:2rem; font-weight:bold;}
#main-carousel .carousel-caption p{font-size:16px; font-weight: normal; text-shadow: none;}


@media all and (max-width:576px){
#main-carousel .carousel-caption{}
#main-carousel .carousel-caption h1{font-size: 30px; font-size: 2.308rem;}
#main-carousel .carousel-caption p{font-size:16px; font-size:1.231rem; font-weight: normal; text-shadow: none;}
}

#main-carousel .carousel-indicators{
  margin-bottom:50px;
  margin-bottom:3.125rem;  
}

#main-carousel .carousel-indicators button{
  height:5px;
}

#main-carousel .carousel-inner:before{
    content: "";
    /* opacity: 0.3; 슬라이드 투명  */
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    /* background-color: #000; 슬라이드검정 */
    z-index:1;
}

/* Declare heights because of positioning of img element */
#main-carousel .carousel-item {
  /*height: 32rem;*/
  height:37.500rem;
  overflow:hidden;
}
#main-carousel .carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

#main-carousel .carousel-control-next-icon, 
#main-carousel .carousel-control-prev-icon{
    width: 4rem;
    height: 4rem;
    background-position: 50%;
    transform: translateY(-50%);
}


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */


@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}



      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

.carousel-item {
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}