html {
      scroll-behavior: smooth;
}
.artwork_container{
      display: flex;
}

.artwork_container.found{
      background-color: rgba(0,163,202,0.05)!important;
      color:#00a3ca!important;
}
.artworkspec_all a{
      color: #007bff;
      text-decoration:none!important;
}
.artworkspec_all a:hover{
      color: blue;
      transform: scale(1.05);
      text-decoration:none!important;
}
.artwork_container .left{
     width: 85%;
}
@media screen and (min-width:320px) and (max-width:1324px) {
      .artwork_container .left{
            width: 70%;
       }
}
.artwork_container .art_box {
      padding: 10px;
      border: 1px solid white;
      font-family: 'Roboto',sans-serif;
      font-size: 14px;
}
.artwork_container-box1{
      background-color: lightgray;
}
.artwork_container-box2{
      background-color: #f0f0f0;
}
.artwork_container .right{
      width: 15%;
}
.artwork_container .right i{
      padding-right: 5px;
}
@media screen and (min-width:320px) and (max-width:1324px) {
      .artwork_container .right{
            width: 30%;
      }
}

.artwork_bigTitle{
      background-color: rgb(136, 137, 138);
      font-weight: 600;
      padding: 10px;
      color: white;
      border: 2px solid rgb(221, 220, 220);
      text-align: center;
      text-transform: uppercase;
}
.box-news {
      background-color: #F53DA5;
      border: solid 2px #F12699;
      border-radius: 4px;
      color: yellow;
      font-size: 12px;
      text-align: center;
      letter-spacing: 2px;
      vertical-align: middle;
      padding: 2px;
      box-shadow:4px 4px 2px rgb(151, 152, 153);
      width: 44px;
      top: 10px;
      height: 24px;
      left: 0px;
      opacity: 0.8;
      margin-left: 10px;
      -webkit-animation-name: box-news; 
      -webkit-animation-duration: 4s;
      animation: box-news 2s infinite;
}
.box-news-site{
      display: flex;
} 
/* Standard syntax */
@keyframes box-news {
      from {background-color: rgb(247, 144, 202);}
      to {background-color: rgb(231, 3, 155);}
}
.step_title {
      text-align: center;
      font-size: 36px;
      margin-bottom: 10px;
}
.step_title label {
      color: #00a3ca;
      text-transform: uppercase;
      font-weight: bolder;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .step_title {
      font-size: 24px;
      margin-bottom: 0px;
      }
}
.step_part{
      display:flex;
}
.step_part>div{
      width: 50%;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .step_part{
            display:block;
      }
      .step_part>div{
            width: 100%;
            margin-top: 10px;
      }
}
.step_part .willBox{
      padding-right: 10px;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .step_part .willBox{
            padding-right: 0px;
      }
}
.step_part .willBox .tick-box_title{
      font-size: 18px;
      padding:10px;
      background-color: green;
      text-align: center;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
}
.step_part .willBox  .tick-box_des{
      padding:20px;
      background-color: green;
      color: green;
      border-bottom: 2px solid green;
      background-color: white;
      height: 80%;
}
.step_part .wontBox{
      padding-left: 10px;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .step_part .wontBox{
            padding-left: 0px;
      }
}
.step_part .wontBox .tick-box_des{
      padding:20px;
      background-color: red;
      color: red;
      border-bottom: 2px solid red;
      background-color: white;
      height: 80%;
}
.step_part .wontBox .tick-box_title{
      font-size: 18px;
      padding:10px;
      background-color: red;
      text-align: center;
      text-transform: uppercase;
      font-weight: 400;
      color: white;
}
.File_step {
      display: flex;
}
.File_step>div {
      width: 25%;
      margin-right: 10px;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .File_step {
            display: block;
      }
      .File_step>div {
            width: 100%;
            margin-right: 0px;
            margin-top: 10px;
      }
}
.File_step img{
      width: 100%;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .File_step img{
            width: 60%;
      }
}
.File_step .StepPart_Title {
      background-color: #00a3ca;
      color: white;
      padding: 10px;
      text-align: center;
      font-size: 16px;
      height: 25%;
}
@media screen and (min-width:320px) and (max-width:1024px) {
      .File_step .StepPart_Title {
      font-size: 14px;
      }
}

.File_step .StepPart_Title label {
      font-size: 24px;
      text-transform: uppercase;
      font-weight: bolder;
      display: block;
}
@media screen and (min-width:320px) and (max-width:1024px) {
      .File_step .StepPart_Title label {
      font-size: 20px;
      }
}
.File_step .StepPart_des {
      padding: 20px;
      border: 2px solid #00a3ca;
      height: 80%;
      font-size: 12px;
      text-align: center;
}
.File_step .StepPart_des label{
      display: block;
}
@media screen and (min-width:320px) and (max-width:1024px) {
      .File_step .StepPart_Title label {
      font-size: 20px;
      }
}
.mainbar_left-artSpec {
      position: relative;
      width: 100%;
      position: -webkit-sticky;
      position: sticky;
      transform: translateX(1%);
      top: 70px; 
      height:  580px;
      overflow-y: auto;
      
}
@media screen and (min-width:768px) and (max-width:1024px) {
      .mainbar_left-artSpec  {
            top: 8%;
      }
}
@media screen and (min-width:320px) and (max-width:767px) {
      .mainbar_left-artSpec  {
      display: none;
      }
}
.mainbar_left-artSpec a{
      display: inline-block;
      background-color: grey;
      border-bottom: 1px solid white;
      color: #FFFFFF!important;
      text-align: left;
      padding-left: 10px;
      padding-top:4px;
      padding-bottom: 4px;
      width: 100%;
      transition: all 0.5s;
      cursor: pointer;
      border-radius: 0%;
      margin: 0px;
      border-top: none;
      text-decoration-line: none;
      font-family: 'Roboto',sans-serif;
      font-size: 0.708rem;
      font-weight: 400;
}
.mainbar_left-artSpec a{
      text-decoration: none!important;
}
.mainbar_left-artSpec .active{
      background-color:#f0f0f0!important;
      color:#333!important;
}

.mainbar_left-artSpec a:hover{
      background-color: darkgrey;
      text-decoration: none!important;
}

@media screen and (min-width:768px) and (max-width:1024px) {
      .mainbar_left-artSpec a{
            font-size: 12px;
      }
}
.mainbar_left-artSpec a:hover{
      background-color: darkgrey;
}

.artSpec_box{
      display: flex;
}
.artSpec_box>div{
      width: 100px;
      padding-right: 0px;
      padding-top: 0px;
}
.artSpec_box .artspec_container1{
      flex-grow: 2;
      
}
.artSpec_box .artspec_container2{
      flex-grow: 8;
      border:1px solid #e2e2e2;
      padding:5px 10px;
}

@media screen and (min-width:320px) and (max-width:767px) {
      .artSpec_box .artspec_container2{
            padding:0px 2px;
      }
}
.artSpec_box .left{
      flex-grow: 1;
}
.artSpec_box .right{
      flex-grow: 5;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .artSpec_box{
            display: block;
            margin-left:-15px;
            margin-right:-15px;
      }
      .artSpec_box>div{
            width: 100%;
            padding-right: 0px;
            padding-top: 0px;
      }
      .artSpec_box .mainleft{
            flex-grow: 0;
      }
      .artSpec_box .mainright{
            flex-grow: 5;
      }
}
.artspec_jump{
      margin-bottom: 3rem;
}
.mainbar_left1-bigtitle{
      font-size: 16px;
      font-weight: 600;
      padding-left: 10px;
      padding-top: 3px;
      padding-bottom: 3px;
      color: white;
      background-color: #4E4E4E;
    }
@media screen and (min-width:320px) and (max-width:767px) {
      .mainbar_left1-bigtitle {
      font-size: 14px;
      }
}

.tab-row{
      position: -webkit-sticky;
      position: sticky;
      transform: translateX(1%);
      top: 95px; 
      z-index:9;
      width:100%;
      background-color:#fff;
      padding-top:5px;
      padding-bottom:8px;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .tab-row{
            width:98%;
            top: 40px; 
      }
}

.tab-child{
      text-decoration: none;
      cursor: pointer;
      font-weight: 600;
      font-size:1.25rem;
      padding:10px 2px!important;
      color:rgba(0,0,0,0.25)!important;
      border-bottom: 4px solid transparent;
      text-align: left;
      -webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
@media screen and (min-width:320px) and (max-width:767px) {
      .tab-child{
            font-size:1.0rem;
      }
}

.tab-child.small_scale{
      transform: scale(0.95);
      font-size:0.9rem;
      filter: grayscale(100%);
      opacity: .5;
}

.tab-child.active{
      color:#00a3ca!important;
      border-bottom: 4px solid #00a3ca;
}

.col-search{
      position: relative;
}
.col-m-search a{
      color:#00a3ca!important;
      font-size: 1.25rem;
      padding:14px 2px;
      display:block;
}

.col-m-filter a{
      color:#00a3ca!important;
      font-size: 1.25rem;
      padding:14px 2px;
      display:block;
}

.main-search{
      position: absolute;
      top:8px;
      right:8px;
      width:60%;
      border:2px solid rgba(0,0,0,0.10);
      border-radius: 10px;
      padding: 8px 6px;
      -webkit-transition: all .3s;
	-moz-transition: all .3s;
      transition: all .3s;
      background-color:rgba(0,0,0,0.05);
      
}
@media screen and (min-width:320px) and (max-width:767px) {
      .main-search{
            position: relative;
            width:30%;
      }
}

.main-search .close-search{
      padding-top:0px;
      font-size: 1.2rem;
      -webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

.main-search .search-btn, .main-search .search-btn-2{
      padding-top:0px;
      font-size: 1.2rem;
      text-align: center;
      color:rgba(0,0,0,0.25);
}

.main-search .search_bar{
      border:0;
      outline: 0;
      margin:0;
      font-size:0.8rem;
      -webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

.main-search .search_bar input{
      border:0;
      outline: 0;
      background-color: transparent;
      color: #00a3ca;
}


.search_bar input::placeholder{
      color: #00a3ca;
}

.main-search.focus{
      top:4px;
      width: 98%;
      border-color:transparent;
      border-radius: 0;
      border-bottom:4px solid rgba(0,163,202,1.00);
      background-color : transparent;
      
      /*background-color: rgba(0,163,202,0.05);*/
}

@media screen and (min-width:320px) and (max-width:767px) {
      .main-search.focus{
            width:100%;
      }
}

.main-search.focus .close-search{
      color: #00a3ca;
}

.main-search.focus .close-search{
      color: #00a3ca;
}
.main-search.focus  .search-btn-2{
      color: #00a3ca;      
}

  .search_bar .bottom {
      max-width:300px; 
      width:100%;
      top:40px;
      left:50%;
      transform:translate(-50%, 0);
      padding:10px 20px;
      color:#ffffff;
      background-color:#555555;
      font-weight:normal;
      font-size:13px;
      border-radius:8px;
      position:absolute;
      z-index:99999999;
      box-sizing:border-box;
      box-shadow:0 1px 8px rgba(0,0,0,0.5);
      display:none;
  }
  

  
  .search_bar .bottom i {
      position:absolute;
      bottom:100%;
      left:50%;
      margin-left:-12px;
      width:24px;
      height:12px;
      overflow:hidden;
  }
  
  .search_bar .bottom i::after {
      content:'';
      position:absolute;
      width:12px;
      height:12px;
      left:50%;
      transform:translate(-50%,50%) rotate(45deg);
      background-color:#555555;
      box-shadow:0 1px 8px rgba(0,0,0,0.5);
  }

  .col-filter .close_filter{
      color: #00a3ca;
      font-size: 1.25rem;
      padding-top:8px;
      display:block;
  }