@charset "UTF-8";

.searchbox_wrapper {
  margin:0 auto;
  border:0px;
}

.searchbox_area {
  display:flex;
}

.categorybox_select{
  display: inline-block;
  position: relative;
}


.categorybox_select:after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: solid #196e15;
  border-width: 3px 3px 0 0;
  position: absolute;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: calc(50% - 20px);
  right: 18px;
  pointer-events: none;
}

.categorybox{
  width:300px;
  height: 76px;
  padding: 10px 40px 10px 20px;
  border: 3px solid #ddd;
  border-radius: 0;
  background: #fff;
  font-size: 1.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  color: #2b2b2b;
}

.searchbox_inputarea{
  width: 706px;
  max-width: 100%;
  margin: 0 auto 15px;
  position: relative;
}

.searchbox_input{
  margin-left:10px;
  width:580px;
  calc(100% - 6px);
  padding: 20px 56px 17px 28px;
  border: 3px solid #ff5800;
  display: block;
  font-size: 1.8rem;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.searchbox_button{
  width: 71px;
  height: calc(100% - 4px);
  background: url(/resource/common/img/icon-search-input-white.svg) no-repeat 50%/27px,#ff5800;
  border: none;
  position: absolute;
  top: 2px;
  right: 2px;
  -webkit-transition: .4s;
  transition: .4s;cursor: pointer;
  text-indent: -9999px;
}

@media (max-width: 767px) {
  .searchbox_wrapper {
    padding: 16px 21px;
    height:200px;
    border:0px;
    background:transparent;
    margin-top:-20px;
    margin-bottom:-40px;
  }
  
  .searchbox_area>* {
    width: 100%;
  }
  
  .searchbox_area {
    width: 700px;
    height:180px;
    max-width: 100%;
    margin: 0 auto 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  
  .categorybox_select{
    width: 100%;
    display: inline-block;
    position: relative;
  }
  
  .categorybox_select:after {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    border: solid #196e15;
    border-width: 3px 3px 0 0;
    position: absolute;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
    top: calc(80%);
    right: 18px;
    pointer-events: none;
  }
  
  .categorybox{
    width: 100%;
    height:50px;
    font-size:1.1rem;
    margin-bottom:-30px;
  }
  
  .searchbox_inputarea{
    width: 706px;
    max-width: 100%;
    margin: 0 auto 15px;
    position: relative;
  }
  
  .searchbox_input{
    margin-left:0px;
    width:100%;
    calc(100% - 6px);
    padding: 20px 56px 17px 21px;
    border: 3px solid #ff5800;
    display: block;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:50px;
    font-size:1.1rem;
  }
  
  .searchbox_button{
    width: 46px;
    height: calc(100% - 4px);
    background-size: 23px;
    top: 2px;
    right: 2px;
  }
  
  .searchbox_button:hover{
    opacity: .6;
  }
}

.uksgst_results	{
  padding:0px; 
  border:1px solid WindowFrame; 
  background-color:Window; 
  overflow:hidden; 
  z-index:9999;
}

.uksgst_results ul{
  width:100%; 
  list-style-position:outside; 
  list-style:none; 
  padding:0; 
  margin:0; 
  text-align:left;
}

.uksgst_results iframe{
  display:none;
  display/**/:block; 
  position:absolute; 
  top:0; 
  left:0; 
  z-index:-1; 
  filter:mask(); 
  width:3000px; 
  height:3000px; 
}

.uksgst_results li{
  margin:0px; 
  padding:2px 5px; 
  cursor:pointer; 
  display:block; 
  width:100%; 
  font:menu; 
  font-size:12px; 
  overflow:hidden;
  text-align:left; 
}

.uksgst_over{
  background-color:Highlight; 
  color:HighlightText;
}

.word_lists{
  width:116%;
  margin-left:-8%;
}

.word_lists > li{
  width: 18%;
  margin: 0 0 20px;
}

@media (max-width: 768px) {
  #search section {
    padding: 5vw 0 8vw;
  }
  
  .word_lists{
    width:100%;
    margin-left:0px;
  }

  .word_lists > li {
    width: 48%;
    margin: 0 0 3vw;
  }
  .word_lists::after,
  .word_lists::before {
    width: 48%;
  }
}

.sub_conductor > a.sub_btn.arrow_right:before{
  color: black !important;
}