header {
  z-index: 999;
}
.select2-container .select2-container--default .select2-container--open {
width: auto !important;
z-index: 1;
}
.product_btn_div{
  width: 100%;
display: flex;
font-size: 14px;
justify-content: center;
text-align: center;
}
.product_btn{
  background:#000;
  color:#fff;
  padding: 5px 10px;
  margin: 5px;
}

input[type=radio] {
display: none;
}
.header_logo_txt {
font-family: "minion-pro", serif;
font-weight: normal;
font-size: 13px;
color: #fff;
}
label[for=menu-open] {
display: flex;
flex-direction: column;
padding: 10px;
position: fixed;
padding-top: 33px;
padding-left: 30px;
z-index: 10;
cursor: pointer;
}
label[for=menu-open] span {
margin-bottom: 7px;
height: 3px;
background: #fff;
width: 37px;
border-radius: 0px;
}

.menu {
font-family: "Open Sans", sans-serif;
}

.menu-close {
display: flex;
flex-direction: column;
padding: 10px;
cursor: pointer;
}
.menu-close span {
margin-bottom: 8px;
height: 2px;
background: #FF028D;
width: 30px;
border-radius: 3px;
}
.menu-close span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.menu-close span:nth-child(2) {
transform: rotate(-45deg);
}

.overlay {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0);
position: fixed;
z-index: -10;
left: 0;
transform: translateY(0%);
transition: 0.2s ease-in;
}

#menu-open ~ label ~ .side-menu {
display: flex;
position: fixed;
top: 0;
height: 100%;
transform: translateX(-100%);
width: 250px;
background: #fff;
transition: 0.2s linear;
z-index: 10;
color:#000;
padding-top: 3em;
padding-left: 30px;
padding-right: 30px;
}

#menu-open:checked ~ .overlay {
z-index: 10;
background: rgba(0, 0, 0, 0.4);
}

#menu-open:checked ~ label ~ .side-menu {
transform: translateX(0%);
/*  box-shadow: 0 1px 5px #333; */
padding-top: 3em;
padding-left: 30px;
padding-right: 70px;
min-height: 789px;
}

.side-menu {
flex-direction: column;
}
.side-menu nav {
display: flex;
flex-direction: row;
width: 100%;
}
.side-menu nav a {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 13px 10px;
font-size: 18px;
}
.side-menu nav a ul:hover {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
}
.side-menu nav a ul li:hover {
list-style-type: none;
height: 70px;
display: flex;
}
.side-menu nav a ul li a {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
text-decoration: none;
}
.side-menu nav a ul li a:hover {
background-color: #2980b9;
}

.head {
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 45vh;
background: #27ae60;
}
.head h1 {
font-size: 3em;
color: #FFF;
}
.head h2 {
color: #FFF;
}

.content {
width: 60%;
margin: 0 auto;
text-align: justify;
}
.content p:nth-child(1) img {
float: left;
margin: 20px 10px 10px 0;
}
.content p:nth-child(2) img {
float: right;
margin: 10px 0px 10px 10px;
}
.content p:nth-child(3) img {
float: left;
margin: 10px 10px 10px 0;
}
nav a {
width:100%;
}
.depth_menu ul li a{
color: #000;
}

.depth_menu ul:hover > li a{
color: #c8c8c8;
transition: all .2s; 
}

.depth_menu ul li:hover > a {
color: #000;
transition: all .2s; 
}


.depth_menu ul {
list-style-type: none;
top: calc(15% - 1px);
position: fixed;
left: 82px;
margin: 0;
}
.depth_menu ul ul{
display: none;
visibility: hidden;
list-style-type: none;
flex-direction: column;
position: fixed;
left: 71%;
top: 0;
background: #fff;
padding-top: 146px;
align-items: left;
min-width: 200px;
height: 100%;
transition: all .6s;
}

.depth_menu ul > li:hover > ul{
display: flex;
visibility: visible;
transition: all .6s;
}
.depth_menu ul > li:hover > .depth_menu ul > li:hover  {
width: 400px;
}

.depth_menu ul li > ul li a{
  color: #000 !important;
}

.depth_menu ul li > ul:hover > li a{
  color: #c8c8c8 !important;
}

.depth_menu ul li > ul li a:hover{
  color: #FF028D !important;
}


.menu_top_sec {
display: flex;
}
.nav_close_sec {
display: flex;
width:50px;
}
.menu_logo {
z-index: 10;
}
.menu_logo img {
width: 86%;
margin-left: 10px;
margin-top: 9px;
z-index: 9999;
}
.nav_bottom {
top: 553px;
position: fixed;
padding-left: 53px;
}

.nav_bottom_item a{
font-size: 18px;
color: #000;
padding: 5px 5px;
line-height: 38px;
}
.nav_bottom_item img {
width: 25px;
padding-top: 15px;
}

.header_item {
width: 100%;
display: flex;
padding-top: 20px;
padding-bottom: 20px;
font-size: 16px;
position: fixed;
transition: all .0s;
z-index: 9;

}
.header_item a{
color: #fff;
padding: 5px 8px;
}
.header_item a:hover {
color:#FF028D;
}
.search-box:hover {
color:#FF028D;
}
.header_item_left {
align-self: center;
width: 35%;
left: 76px;
display: flex;
align-items: center;
position: relative;
}
.header_lang {
width: 100%;
}
.header_item_center {
text-align: center;
width: 100%;
padding-left: 33px;
}
.header_item_center img{
width: 250px;
}
.header_item_right {
text-align: right;
align-self: center;
width: 35%;
padding-right: 30px;
}

.search-container {
width: 40px;
height: 40px;
margin: 0;
z-index: 3;
}
.search_icon {
font-size: 20px;
}

.search-box {
transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
width: 40px;
height: 37px;
border: none;
cursor: pointer;
background: transparent;
}
.search-box + label .search-icon {
color: black;
}
.search-box:hover {
color: #FF028D;
}
.search-box:hover + label .search-icon {
color: black;
}
.search-box:focus {
transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s, border 0.6s;
border: none;
outline: none;
box-shadow: none;
padding-left: 15px;
cursor: text;
width: 200px;
border-radius: auto;
background: #fff;
color: black;
border: 1px solid #000;
height:30px;
margin-top:3px;
margin-left: 5px;
}
.search-box:focus + label .search-icon {
color: transparent;
}
.search-box:not(:focus) {
text-indent: -5000px;
}

#search-submit {
position: relative;
left: -5000px;
}

.search-icon {
position: relative;
left: 10px;
color: white;
cursor: pointer;
font-size: 20px;
top: -28px;
}

.dropdown{
position : relative;
display : inline-block;
cursor: pointer;
color: #fff;
}
.dropdown:hover {
color:#FF028D;
}
.dropdown-content{
display : none;
position : absolute;
z-index : 1; /*다른 요소들보다 앞에 배치*/
transition: all .2s;
}

.dropdown-content a{
display : block;
color: #000 !important;
width: 100%;
}

.dropdown-content a:hover {
color:#FF028D !important;
transition: all .2s;
}

.dropdown:hover .dropdown-content {
display: block;
color: #000 !important;
width: 130px;
padding: 0px 10px 15px 10px;
font-family: "Open Sans", sans-serif;
font-size: 13px;
transition: all .2s;

}

#goog-gt-tt {
display: none;
}

.translation-links{
/*background-color: #f5f5f5;*/
width: 100%;
list-style: none;
z-index:999;
position: relative;
padding: 10px;
display: block;
left: -19px;
}

.translation-links li{
/*padding: 5px;*/
box-sizing: border-box;
float: left;
width: 100%;
background-color: #fff;
padding: 5px 15px;
}
.translation-links span{
float: left;
color: #000;
}
.translation-links .flag{
display: inline-block;
width: 30px;
height: 20px;
margin-right: 8px;
}

/* spain */
.es {
background: url('./images/flag/ES.gif');
width: 100%;
height: 66.666666666667%;
background-size: 100% 100%;
}

/* italy */
.it {
 background: url('./images/flag/IT.gif');
width: 100%;
height: 66.666666666667%;
background-size: 100% 100%;
}

/* france */
.fr {
 background: url('./images/flag/FR.gif');
width: 100%;
height: 66.666666666667%;
background-size: 100% 100%;
}

/* japan */
.ja {
 background: url('./images/flag/JP.gif');
width: 100%;
height: 66.666666666667%;
background-size: 100% 100%;
}

/* germany */
.de {
background: url('./images/flag/DE.gif');
width: 100%;
height: 60%;
background-size: 100% 100%;
}
/* china */
.zh-CN {
background: url('./images/flag/CN.gif');
width: 100%;
height: 66.666666666667%;
background-size: 100% 100%;
}

.main_sub_menu {
  padding: 10px 10px !important;
  }
  
  .main_sub_menu {
    padding: 10px 10px !important;
    }
    .mobile_right {
      display: none;
    }


    .search-form {
      position: absolute;
      top: 1px;
      left: 5px;
      z-index: 10;
    }
    
    .search-field {
      background-color: transparent;
      background-position: 5px center;
      background-repeat: no-repeat;
      background-size: 24px 24px;
      border: none;
      cursor: pointer;
      height: 25px;
      margin: -9px 0 0 10px;
      padding: 5px 5px 5px 5px;
      position: absolute;
      -webkit-transition: width 400ms ease, background 400ms ease;
      transition:         width 400ms ease, background 400ms ease;
      width: 0;
      left: -10px;
      border: 0 !important;
    }
    
    .search-field:focus {
      background-color: #fff;
      cursor: text;
      outline: 0;
      width: 200px;
      z-index: 10;
      border-radius: 0;
      border: 1px solid #c8c8c8 !important;
    }
    
    .search-submit {
      display: none;
    }
    .search_item {
      display: flex;
      width: 0;
    }
    .search-icon-1 {
        position: relative;
        color: #fff;
        cursor: pointer;
        font-size: 20px;
    }
    .mobile_left {
      padding-left: 40px;
    }
/* 태블릿 */
@media all and (min-width:479px) and (max-width:1050px) {
label[for=menu-open] {
display: flex;
flex-direction: column;
padding: 10px;
position: fixed;
padding-top: 20px;
padding-left: 10px;
z-index: 10;
cursor: pointer;
}

label[for=menu-open] span {
margin-bottom: 6px;
height: 3px;
width: 36px;
}
#menu-open ~ label ~ .side-menu {
width: 36%;
}

.head h1 {
font-size: 2em;
}

.content {
width: 80%;
}

.search-container {
left: 50px;
position: relative;
}

.header_item {
width: 100%;
display: block;
padding-top: 10px;
font-size: 18px;
position: fixed;
font-size: 15px;
}
.header_item a{
padding: 5px 5px;
}
.header_item_left {
width: 100%;
left: 0;
display: flex;
align-items: center;
}

.header_item_center {
text-align: center;
width: 100%;
margin-top: 7px;
padding-left: unset;
}
.header_item_center img{
width: 200px;
}
.header_item_right {
display: none;
}

.dropdown:hover .dropdown-content {
  left: -7px;
}

.header_lang {
  position: absolute;
  padding-left: 83px;
  width: -webkit-fill-available;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

.search-form {
  position: relative;
  top: 12px;
  left: 76px;
}

.mobile_right {
  display: flex;
  width: auto;
  justify-content: flex-end;
  padding-right: 8px;
}

}
/* 모바일 */
@media all and (max-width:479px) {
label[for=menu-open] {
display: flex;
flex-direction: column;
padding: 10px;
position: fixed;
padding-top: 20px;
padding-left: 14px;
z-index: 10;
cursor: pointer;
}
.menu_logo img {
width: 200px;
}
label[for=menu-open] span {
margin-bottom: 6px;
height: 3px;
width: 28px;
}
#menu-open ~ label ~ .side-menu {
width: 100%;
}

.head h1 {
font-size: 2em;
}

.content {
width: 80%;
}

.search-container {
left: 43px;
position: relative;
}
.header_logo_txt {
font-size: 12px;
}

.header_item {
width: 100%;
display: block;
padding-top: 10px;
font-size: 18px;
position: fixed;
font-size: 15px;
}
.header_item a{
padding: 5px 5px;
}
.header_item_left {
width: 100%;
left: 0;
display: flex;
align-items: center;
}
.header_lang { 
  position: absolute;
  padding-left: 94px;
  width: -webkit-fill-available;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
  }
.header_item_center {
text-align: center;
width: 100%;
margin-top: 13px;
padding-left: unset;
}
.header_item_center img{
width: 220px;
}
.header_item_right {
display: none;
}
.side-menu nav a {
font-size: 19px;
}
.depth_menu ul {
left: 82px;
}

.depth_menu ul ul {
  left: 50%;
  top: -21px;
}

.nav_bottom_item a {
font-size: 19px;
}

.nav_bottom {
padding-left: 58px;
}

.dropdown:hover .dropdown-content {
  left: -7px;
}
.mobile_right {
  display: flex;
  align-self: center;
  width: auto;
  margin-top: -3px;
  justify-content: flex-end;
  padding-right: 8px;
}

.search-form {
	position: relative;
  top: 11px;
  left: 57px;
}
.mobile_left {
  padding-left: 0px;
  margin-top: -3px;
  align-self: center;
}
}
