* {
  font-family: 'Noto Sans KR', sans-serif;
  list-style: none;
  text-decoration: none;
}
/*common*/
.fontSize15 {
  font-size: 15px;
}
.p-6 {
  padding: 60px;
}
.p-7 {
  padding: 70px;
}
.p-8 {
  padding: 80px;
}
.p-9 {
  padding: 90px;
}
.p-t-15-b-10-10 {
  padding: 15px 130px 5px 130px;
}
hr {
  color: #e6e6e6;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
  height: 2px;
}
/*common End*/
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

.search{
    position: relative;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */
    transition: all 1s;
    width: 20px;
    height: 25px;
    background: black;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid black;
    padding: 5px;
}

.searchText{
    position: absolute;
    top: -5px;
    left: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1em;
    border-radius: 20px;
    padding: 0 20px;
    border: solid 3px #ddd;
}

.fa{
    box-sizing: border-box;
    padding: 2px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50%;
    color: #07051a;
    text-align: center;
    font-size: 1.2em;
    transition: all 1s;
}

.search:hover,
.search:valid{
    width: 200px;
    cursor: pointer;
}
.fa-search{
  font-size:15px; color:#fff;
}
.search:hover > .fa-search{
    color:#000;
}

.search:hover input,
.search:valid input{
    display: block;
}

/* .search:hover .fa,
.search:valid .fa{
    background: #07051a;
    color: white;
} */


.searchLink {
  display: none;
  position: absolute;
  top: 70px;
  bottom:0;
  left: 0;
  right: 0;
  font-size: 20px;
  color: white;
  text-align: center;
  width: 100%;
}

.search:valid a {
  display: block;
}



.main_benner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  font-size: 36px;
  font-weight: 500;
}

/* .main_benner span {
  display: inline-block;
  width: 100%; height: 100px;
  background-color: #fff;
  text-align: center;
  line-height: 70px;
  color: #000;
} */

.main_menu {
  width: 100%;
  /* background-color: #000000; */
  border-top: solid 2px #000;
  border-bottom: double 4px #000;

}

.main_menu > ul{
  /* display: flex;
  height: 35px;
  align-items: center;
  justify-content: center;
  margin: 0 auto; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  flex-wrap: wrap;
  height: auto;
  padding: 10px 0;
}

.main_menu > ul > li{
  margin-right: 15px;
  font-size: 1rem;

}

.main_menu > ul > li > a{
   text-decoration: none;
   color: #000;
}

.mailing {
  padding: 0 20px;

}
.mailingBody {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 35px;
  border-radius: 15px;
  background-color: #424242;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  column-gap: 10px;
}

.clearBoth{
  clear: both;
}
/*새롭게 들어감*/
.openTalkAllList{
  font-size: 12px;
  cursor: pointer;
}
.headerMargin{
  margin-right: 25px;
}

.headerContainer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: #000;
  align-items: center;
}
.headerContent{
  color:#fff;
  padding: 0px;
  margin: 0px;
}
.menuBar{
  display: flex;
  column-gap: 10px;
}
.mobileMenuBar{
  display: none;
}
.menuColor{
  color: #fff;
  text-decoration: none;
}

.menuColor:hover{
  color: #fff;
  text-decoration: none;
}

.line {
  margin: 0.5rem 0;
  color: #000;
  border-top: 2px solid #000;
}
.mobileHeaderContent{
  display: none;
  color:#fff;
  padding: 0px;
  margin: 0px;
}
.mobileBanner{
  display: none;
}
/*모바일 노트북*/
@media (min-width: 1600px) {

}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
##Device = 랩탑, 데스크탑
##Screen = 1025px에서 1280px 사이
*/

@media (max-width: 1280px) {
  /* .mailingBody {
    font-size: 12px;
  } */
}

/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (max-width: 1024px) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
  }
  .products_point::-webkit-scrollbar {display: none;}
}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (max-width: 1024px) and (orientation: landscape) {
  .products_point {
      overflow-x: scroll;
      overflow-y: hidden;
  }
  .products_point::-webkit-scrollbar {display: none;}
}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (max-width: 767px) {

}


@media (max-width: 600px) {
  .headerMargin{
    margin-right: 0px;
  }
  .headerContent{
    margin-right: 50px;
  }
  .menuBar{
    display: none;
  }
  .mobileMenuBar{
    display: block;
  }
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    top:18px;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition-duration: .25s;
  	border-radius: 15px;
  }
  #menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
  	background-color: #000;
  }
  #menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
  	background-color: #000;
  }
  #menu__toggle:checked ~ .menu__box {
    right: 0 !important;
  }
  .login_box {
    position: absolute;
    top: 10px;
    right: 60px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    /* z-index: 9999999; */
  }

  .menu__btn {
    position: absolute;
  	padding: 0;
  	margin: 0;
    top: 20px;
    right: 20px;
  	width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 9999999;
  }

  .menu__btn > span::before {
    content: '';
    top: -8px;
  }
  .menu__btn > span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    z-index: 8888;
  }
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }
}


/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/
@media (max-width: 479px) {
  .webBanner{
    display: none;
  }
  .mobileBanner{
    display: block;
  }
  .headerContent{
    display: none;
  }
  .mobileHeaderContent{
    display: block;
    margin-right: 35px;
  }
  .menuBar{
    display: none;
  }
  .mobileMenuBar{
    display: block;
  }
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    top:18px;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition-duration: .25s;
  	border-radius: 15px;
  }
  #menu__toggle {
    opacity: 0;
  }
  #menu__toggle:checked + .menu__btn > span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked + .menu__btn > span::before {
    top: 0;
    transform: rotate(0deg);
  	background-color: #000;
  }
  #menu__toggle:checked + .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
  	background-color: #000;
  }
  #menu__toggle:checked ~ .menu__box {
    right: 0 !important;
  }
  .login_box {
    position: absolute;
    top: 10px;
    right: 60px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    /* z-index: 9999999; */
  }

  .menu__btn {
    position: absolute;
  	padding: 0;
  	margin: 0;
    top: 20px;
    right: 20px;
  	width: 18px;
    height: 18px;
    cursor: pointer;
    z-index: 9999999;
  }

  .menu__btn > span::before {
    content: '';
    top: -8px;
  }
  .menu__btn > span::after {
    content: '';
    top: 8px;
  }
  .menu__box {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #fff;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    z-index: 8888;
  }
  .menu__item {
    display: block;
    padding: 12px 24px;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    transition-duration: .25s;
  }
  .menu__item:hover {
    background-color: #CFD8DC;
  }
}