@font-face {
	font-family: "MStiffHeiHK";
	src: url("../font/MStiffHei HK Medium.ttf") format("truetype");
}
@font-face {
	font-family: "PingFangHK-Medium";
	src: url("../font/PingFang-HK-Medium-2.otf") format("otf");
}
@font-face {
	font-family: "PingFangHK-Semibold";
	src: url("../font/PingFang-HK-Semibold-2.otf") format("otf");
}
@font-face {
	font-family: "Verdana";
	src: url("../font/Verdana.ttf") format("truetype");
}
body {
    padding: 0;
    margin: 0;
    font-size: 100%;
    box-sizing: border-box;
	height: 100%;
	font-family: Verdana, PingFangHK-Medium, sans-serif;
	color: #414042;
}
h2 {
	font-family: Verdana, MStiffHeiHK, sans-serif;
	font-weight: normal;
}
a {
	text-decoration: none;
	color: #414042;
	font-weight: normal;
}
img {
	width: 100%;
	border: 0px;
}
/*header*/
.header-top {
    padding-top: 131px;
}
#header {
    position: fixed;
    width: 100%;
}
.header-bar {
    width: 100%;
    background-color: #f7941e;
    height: 30px;	
    box-shadow: 0 0 5px #666;
}
.header-items {
    width: 100%;
    background-color: #fff;
    display: inline-flex;
    height: 100px;
	box-shadow: 0 0 5px #666;
}
.header-bar-right {
    width: 100%;
    float: right;
    padding: 5px;
    color: #fff;
    text-align: right;
	line-height: 5px;
}
.header-menu {
    width: 100%;
    float: right;
    padding: 5px;
    text-align: right;
    line-height: 100px;
	height: 100%;
}

.header-menu a > div{
	color: #f7941e;
	text-decoration: none;
	line-height: normal;
	padding-bottom: 8px;
	border-bottom: 4px solid #fff;
	font-family: Verdana, PingFangHK-Semibold, sans-serif;
	font-weight: bold;
	text-align: center;
}

.header-menu a > div.engtext{
	font-weight: 100;
}

.header-menu a:hover > div{
	border-bottom: 4px solid #f7941e;
}

.header-menu a > div.active {
	color: #bc732f;
	border-bottom: 4px solid #bc732f;
}

.menu-line {
    border-right: 1px solid #fff;
    margin: 3px 5px;
    display: inline-flex;
}

.header-logo {
    float: left;
    color: #f7941e;
    text-align: right;
}
.paint_icon{
    max-width: 18px;
}
.logo-line {
    border-right: 1px solid #e7e7e7;
    margin: 15px 5%;
	width: 1px;
}
.header-area-l, .header-area-r {
    display: inline-flex;
}
.header-area-l {
    width: 30%;
	margin-left: 30px;
}
.header-area-r {
    width: 70%;
}
.header-bar-items {
    line-height: 20px;
}
.header-bar-items .paint_icon{
	height: -webkit-fill-available;
}
.header-bar-items, .header-menu-items, .header-logo, .home-text-l, .home-text-r {
    display: inline-flex;
    vertical-align: middle;
}
.header-bar-items {
    cursor: pointer;
	vertical-align: baseline;
	font-size: 14px;
}
.header-bar-right .header-bar-items:first-child {
    vertical-align: bottom;
}
.logo-size {
	margin: 0 auto;
}
.logo-size img {
	margin-top: 10px;
}

.header-area-l > .header-logo:first-child > .logo-size, .footer-logo > .logo-size > .logo-size {
    max-width: 186px;
}

.header-area-l > .header-logo:first-child > .logo-size img, .footer-logo > .logo-size > .logo-size img{
    /*width: 186px;*/
	max-width: 186px;
}


.logo-size {
    max-width: 168px;
    
}


.header-logo > .logo-size img{
  /*width: 168px;*/
  max-width: 168px;
}
.items-pad-rg {
    padding-right: 2%;
}

.menu-pad-rg {
    margin-right: 3%;
}

.menu-pad-rg.engtext {
    margin-right: 2%;
}

/*.header-bar-right, .footer-copyright {
    font-size: 80%;
}*/

.mobile-menu {
	width: 100%;
}

.mobile-header-bar-items, .mobile-header-bar-items2 {
	font-size: 14px;
}

.mobile-header-bar-items2 {
	display: none;
}

.decreasetext, .decreasetext, .increasetext {
    /*vertical-align: text-bottom;
    vertical-align: bottom;*/
	vertical-align: baseline;
}

.decreasetext {
    font-size: 10px;
    padding-right: 25%;
}

.resettext {
    font-size: 12px;
}

.increasetext {
    font-size: 14px;
    padding-left: 25%;
}
.menu-icon-area{
	display: none;
}

/*footer*/
#footer {
}

.footer-bg {
    border-top: 7px solid #f7941e;
    width: 100%;
    background-color: #414042;
    padding: 21px 30px;
    overflow: hidden;
}

.footer-l, .footer-r {
    width: 49%;
    display: inline-flex;
}

.footer-l {
    float: left;
}

.footer-r {
    float: right;
}

.footer-logo {
    /*padding: 3% 0% 0% 3%;*/
}

.footer-copyright {
    width: 100%;
    float: right;
    /*padding: 3% 3% 0% 0%;*/
    color: #fff;
    text-align: right;
}

.footer-line {
    border-right: 1px solid #fff;
    margin: 0px 10px;
    display: inline-flex;
    height: 10px;
}

.footer-text-line{
	padding-bottom: 3px;
}
.footer-text-line > a{
	color: #fff;
}

.footer-text-line:last-child{
	padding-bottom: 0px;
}

.footer-text a.fa {
	margin-right: 10px;
}

a.fa.fa-home {
    margin-right: 0px;
}

/*home box*/
.grid-container, .grid-container-mid {
    display: grid;
	display:-ms-grid;
    /*line-height: 0px;*/
}
.grid-container {
    /*grid-template-columns: 33.33% 33.33% 33.33%;*/
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: repeat(3, 1fr);
}
.box-one,.box-two,.box-three {
	-ms-grid-row: 1;
	grid-row-start: 1; 
    grid-row-end: 2;
}
.box-four, .grid-container-mid-text {
	-ms-grid-row: 2;
	grid-row-start: 2; 
    grid-row-end: 3;
}
.box-five, .box-six, .box-seven {
	-ms-grid-row: 3;
	grid-row-start: 3; 
    grid-row-end: 4;
}

.box-one {
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2; 	
}
.box-two {
	-ms-grid-column: 2;	 
    grid-column-start: 2;
	grid-column-end: 3;
}
.box-three {
	-ms-grid-column: 3;		 
    grid-column-start: 3;
	grid-column-end: 4;	
}
.box-four {
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2;	
}
.grid-container-mid-text { 
	-ms-grid-column: 2;
	-ms-grid-column-span: 4;	
    grid-column-start: 2;
	grid-column-end: 4;	
}
.box-five { 
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2;	
}
.box-six {
	-ms-grid-column: 2;	
    grid-column-start: 2;
	grid-column-end: 3;; 
}
.box-seven {
	-ms-grid-column: 3;	
    grid-column-start: 3;
	grid-column-end: 4; 
}
.grid-container-mid {
	-ms-grid-columns: 33.33% auto;
    grid-template-columns: 33.33% auto;
}
.grid-container-mid-text {
    line-height: normal;
    text-align: center;
    position: relative;
}
.grid-logo {
    position: relative;
    top: 50%; /* 3 */
    transform: translate(0, -50%);
    line-height: normal;
    width: 100%;
    /*text-align: center;
    position: relative;
    display: inline-flex;*/
}
.grid-container > div, .grid-container-mid > div {
    background-repeat: no-repeat;
    background-size: cover;
}
.grid-container > div, .grid-container-mid > div, video {
    height: 18.5vw;
    position: relative;
}


.box-one {
    background: url(../images/OP/home_1.jpg);
}
.box-two {
    background: url(../images/OP/home_2.jpg);
}
.box-three {
    background: url(../images/OP/home_3.jpg);
}
.box-four_en {
    background: url(../en/images/OP/home_4en.jpg);
}
.box-four_tc {
    background: url(../tc/images/OP/home_4tc.jpg);
}
.box-four_sc {
    background: url(../sc/images/OP/home_4sc.jpg);
}
.box-five {
    background: url(../images/OP/home_5.jpg);
}
.box-six {
    background: url(../images/OP/home_6.jpg);
}
.box-seven {
    background: url(../images/OP/home_7.jpg);
}
.img-size {
    width: 100%;
}
.home-logo {
    max-width: 300px;
	height: 100%;
}
.home-text-r {
    color: #f7941e;
    margin-left: 5%;
	padding-top: 35px;
}
video {
    width: 100%;
	background-color: #000;
	/*height: auto;*/
}

.box-video .thevideo {
    display: none;
    z-index: 1;
    width: 100%;
	height: auto;
}
.box-video:hover .thevideo {
    display: block;
}

.box-video .overlay {
    position: absolute;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(247, 148, 30, 0.6); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 2;
}

.overlay .text34 {
	font-family: Verdana, MStiffHeiHK, sans-serif;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.overlay{
	display: none;
}
.show .overlay{
	display: block;
}

.arrow-box{
	max-width: 30px;
    padding: 7px 5px;
    border: 2px solid #fff;
    display: block;
    margin: 18px auto auto auto;
}

.title-box-area {
    position: fixed;
    left: 0;
    width: 100%;
}

.title-box {
    background-color: #f7bb00;
    width: 20%;
}

.desktop-mode {
	display:block;
}

.mobile-mode {
	display:none;
}

/*other*/
.hide {
    display:none;
}

.show {
    display:block!important;
}

/*Text version*/
.must-hide {
	display:none!important;
}

.hide-bg {
    background-image: none!important;
}

.unset-color {
    background-color: unset!important;
	color: #000!important;
}
.resize-box {
    height: 100px!important;
}

.resize-grid {
    width: 100%!important;
	padding: 5px 0!important;
	margin: 0!important;
	min-height: unset!important;
}

.change-grid {
	display: grid!important;
}

.order1 {
	order: 1;
}

.order2 {
	order: 2;
}

.order3 {
	order: 3;
}

.menu-br {
	display: block;
}

.reset-text {
	left: 0%!important;
	transform: unset!important;
	text-align: left!important;
	margin-left: 0%;
}

.tw_video-resize {
    max-width: 88%!important;
}



/*highlight in 20 years*/
.high20_page_banner{
	background-image: url(../images/OP/highlights_banner.jpg) no-repeat!important;
}

.side_box {
	width: 25%;
  	/*padding: 50px 0px 57px 0px;*/
	padding: 35px 0px;
}

.side_con_top {
	margin-top: 100px;
}
.side_con_l, .side_con_l_img{
	width: 94%;
	max-height: 55vh;
    min-height: 250px;
}
.side_con_l {
  	padding: 50px 0 50px 0;
}

.side_con_l_img {
  	padding: 50px 0 0 0;
}

.side_con_l_img .long_box-text-r_img {
		padding-bottom: 50px;
}

.yellow_bg{
	background-color: #f7bb00;
}

.dark_yellow_bg{
	background-color: #BC732F;
}

.orange_bg{
	background-color: #f75f1e;
}
.logo_bg, .logo_bg.sc-ver{
	background: url(../images/OP/logo_section_bg.jpg);
	background-repeat: no-repeat;
    background-position: left top;
    background-size: 100%;
	background-color: #f58020;
}

.icon_list {
	width: 75%;
	margin-top: 100px;
  	padding-top: 50px;
	padding-right: 6%;
}

.icon_list-first {
	margin-top: 0;
}

.page_left {
	float: left;
}

.page_right {
	float: right;
}
.box-text-r, .long_box-text-l, .long_box-text-r, .long_box-text-r_img {
	color: #fff;
}

.box-text-r {
	width: 60%;
    margin: 0% 10% 0% 30%;
}

.long_box-text-l, .long_box-text-r, .long_box-text-r_img {
	width: 48%;
}

.date_text {
	padding-top: 14px;
	font-style: italic;
}

.long_box-text-l {
    margin: 0% 50% 0% 8%;
}

.long_box-text-r {
	margin: 0% 59.4% 0% 1.6%;
}
.long_box-text-r_img {
	/*margin: 0% 59.4% 0% 1.6%;*/
	margin: 0% 2% 0% 1.6%;
}

.top_w_img {
	margin-top: 150px;
}

.img-box-r {
    width: 40%;
    margin: 0 6.4% 0 auto;
}

.box-img {
    position: relative;
	bottom: 100px;
}

.long_box-text-l .line,.long_box-text-r_img .line, .box-text-r .line {
	margin-top: 29px;
    margin-bottom: 23px;
	width: 30px;
	border: solid 1px #fff;
}

.icon-box-container {
	display: grid;
	display:-ms-grid;
	-ms-grid-columns: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;
}

.icon-size{
	max-width: 160px;
}

.icon-box{
	height: 250px;
	margin: auto;
	text-align: center;
}

/*popup window*/
/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  padding-top: 10vh; /* Location of the box */
  left: 0;
  top: 0;
  visibility: hidden;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

.modal.is-visible {
    visibility: visible;
}

.modal-overlay {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s;
  transition: visibility 0s linear 0.3s, opacity 0.3s;
}

.modal-transition {
  -webkit-transition: all 0.3s 0.12s;
  transition: all 0.3s 0.12s;
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  opacity: 0;
}

.modal.is-visible .modal-overlay {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.modal.is-visible .modal-transition {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.modal > .modal-overlay > h2 {
	text-align: center;
	color: #f7941e;
	padding-bottom: 31px;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 60px;
  border: 1px solid #888;
  width: 75%;
}

/* The Close Button */
.close {
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  padding: 0px 10px;
  background-color: #f7941e;
}

.close:hover,
.close:focus {
  //color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close_box{
	position: fixed;
    right: 11.5%;
    top: 14%;
}

.popup-icon{
	margin: auto;
	text-align: center;
	padding-bottom: 42px;
}


/* related link */
.link_tab-container {
	padding: 0 60px;
}
.tab-link {
    padding: 26px 10% 26px 50px;
	border-top: solid 1px #000;
	background: url(../images/OP/arrow_orange.png) no-repeat 95% 50%;
	background-size: 16px;
}

.link_tab-container > a:last-child > .tab-link {
  border-bottom: solid 1px #000;
}

/*chairman*/
.small-text-orange {
	color: #bc732f;
	font-size: 0.8rem;
}
.link_tab-container > p {
		padding-top: 40px;
}

div.header-menu .mobile-header-bar-right {
	display:none;
}

/*youtube video*/
.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/*dialogie*/
.milestone-bg {
	background-image: url(../images/OP/snippets_bg.jpg);
	background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
	background-color: #f58020;
	padding: 50px 15px;
	width: 100%;
	height: 250px;
	display: inline-flex;
    vertical-align: middle;
}
.brown-btn {
	background: url(../images/OP/arrow_white.png) no-repeat 72% 50%;
    background-color: #bc732f;
    color: #fff;
    background-size: 15px;
    width: 70%;
    text-align: center;
    padding: 17px 30px;
	margin: auto;
}

.milestone-bg .page_left {
	width: 50%;
	text-align: center;
	padding-top: 5%;
	}
.milestone-bg .page_right {
	width: 50%;
	}
.milestone-bg .page_right > .snippets_log {
	max-width: 270px;
	margin: auto;
}

#fun_num.tw_video {
    padding-top: 0%;
}
#fun_num.tw_video > .dialogue_box {
	overflow: hidden;
}

#fun_num_img > img {
	padding-bottom: 50px;
}
#fun_num_img > img:last-child {
	padding-bottom: 0px;
}
.reset-index {
	z-index: 3;
}
.tw_title.reset-index {
	padding-top: 1%;
}

/*new title*/
.tw_title, .tw_des {
	margin: 0 auto 0;    
    padding: 5% 0% 0% 0%;
    margin-bottom: -5%;
    position: relative;
    height: 100%;
}
.tw_des {
	max-width: 70%;
}
.title_list {
	width: 94%;
    padding: 0;
    overflow: hidden;
}
.title_list .title_text {
    width: 100%;
    padding: 0 2% 0 8%;
}
.title_text .text34{
	font-family: Verdana, MStiffHeiHK, sans-serif;
	color: #414042;
}
.title_text .line{
	border: solid 1px #414042;
}
.title_text h2 {
	z-index: 2; 
}
/*photo gallery*/
.gallery_row {
  

}
.gallery_column {
  display: grid;
  display:-ms-grid;
  /*-ms-grid-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(3, 1fr);
  /*grid-column-gap: 10px;
  grid-row-gap: 10px;*/
  grid-gap: 14px;
}

.pr_gallery_column {
  display: grid;
  display:-ms-grid;
  /*-ms-grid-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(2, 1fr);
  /*grid-column-gap: 10px;
  grid-row-gap: 10px;*/
  grid-gap: 14px;
}

div.gallery_column img {
  width: 100%;
  max-width: 20vw;
}
div.pr_gallery_column img {
  width: 100%;
  max-width: 48vw;
}
.animation-element {
	opacity: 0;
	position: relative;
	padding-top: 10px;
}
.animation-element:first-child {
	padding-top: 0px;
}
/*animation element*/
.animation-element {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
.animation-element:first-child {
  opacity: 1;
  -moz-transition: unset;
  -webkit-transition: unset;
  -o-transition: unset;
  transition: unset;
  -moz-transform: unset;
  -webkit-transform: unset;
  -o-transform: unset;
  -ms-transform: unset;
  transform: unset;
}

.animation-element.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}



	
@media only screen and (min-width: 1440px) {
	.grid-container {
		max-width: 1440px;
		margin: auto;
		padding-bottom: 10vw;
	}
	.grid-container > div, .grid-container-mid > div, video {
		height: 270px;
	}
	.side_con_l, .side_con_l_img{
		min-height: 40vh;
	}
}

@media only screen and (max-width: 1440px) {
	.grid-container {
		padding-bottom: 0;
	}
	footer {
		position: relative!important;
	}
	div.gallery_column img {
		max-width: 28vw;
	}
}

@media only screen and (max-width: 1175px) {
	.menu-pad-rg {
		margin-right: 2%;
	}
	.menu-pad-rg.engtext {
		margin-right: 5px;
	}
}
/*tablat*/
@media only screen and (max-width: 1024px) {
	
	/*home-body*/
	.home-text-r {
		padding-top: 1%;
	}
	.grid-container {
		-ms-grid-columns: 1fr 1fr;
		grid-template-columns: repeat(2, 1fr);
	}
/*home page order old version*/
/*.box-three, .box-two {
	grid-row-start: 1; 
    grid-row-end: 2;
}
.box-one, .box-four {
	grid-row-start: 2; 
    grid-row-end: 3;
}
.grid-container-mid-text, .box-five {
	grid-row-start: 3; 
    grid-row-end: 4;
}
.box-six, .box-seven {
	grid-row-start: 4; 
    grid-row-end: 5;
}

.box-one { 
    grid-column-start: 1;
	grid-column-end: 2; 	
}
.box-two { 
    grid-column-start: 2;
	grid-column-end: 3;
}
.box-three { 
    grid-column-start: 1;
	grid-column-end: 2;	
}
.box-four { 
    grid-column-start: 2;
	grid-column-end: 3;
}
.grid-container-mid-text { 
    grid-column-start: 1;
	grid-column-end: 2;		
}
.box-five { 
    grid-column-start: 2;
	grid-column-end: 3;	
}
.box-six { 
     grid-column-start: 1;
	grid-column-end: 2;	
}
.box-seven { 
    grid-column-start: 2;
	grid-column-end: 3;
}*/

.box-one, .box-three {
	-ms-grid-row: 1;
	grid-row-start: 1; 
    grid-row-end: 2;
}
.box-two, .box-five {
	-ms-grid-row: 2;
	grid-row-start: 2; 
    grid-row-end: 3;
}
.grid-container-mid-text, .box-six {
	-ms-grid-row: 3;
	grid-row-start: 3; 
    grid-row-end: 4;
}
.box-four, .box-seven {
	-ms-grid-row: 4;
	grid-row-start: 4; 
    grid-row-end: 5;
}

.box-one {
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2; 	
}
.box-two {
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2; 
}
.box-three {
	-ms-grid-column: 2;	
    grid-column-start: 2;
	grid-column-end: 3;	
}
.box-four {
	-ms-grid-column: 1;	
    grid-column-start: 1;
	grid-column-end: 2; 
}
.grid-container-mid-text {
	-ms-grid-column: 1;
	-ms-grid-column-span: 1;	
    grid-column-start: 1;
	grid-column-end: 2;		
}
.box-five {
	-ms-grid-column: 2;	
    grid-column-start: 2;
	grid-column-end: 3;
}
.box-six {
	-ms-grid-column: 2;	
    grid-column-start: 2;
	grid-column-end: 3;
}
.box-seven { 
	-ms-grid-column: 2;
    grid-column-start: 2;
	grid-column-end: 3;
}
.overlay {
		display: block;
	}
.grid-container .grid-container-mid-text{
		height: 100%;
}
.box-video .thevideo {
	display:none!important;
}
.home-logo {
    max-width: 200px;
    /*margin: 0% 3% 0% 3%;*/
}
.grid-container > div, .grid-container-mid > div, video {
		height: 27.67vw;
	}
	.side_con_l, .side_con_l_img{
		max-height: 600px;
		min-height: 200px;
	}
	/*20years*/
	.milestone-bg .page_left, .milestone-bg .page_right {
		width: 100%;
    padding-top: 0px;
	}
	.snippets_log .box-img {
		bottom: 0px;
		padding-top: 10px;
	}
	.milestone-bg {
		height: unset;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap-reverse;
	}
	.milestone-bg .snippets_log {
		padding-bottom: 10px;
	}
	/*menu icon*/
	div.header-menu .header-menu-items, .header-bar, .logo-line, .header-area-l div:nth-child(3) {
		display: none;
	}
	.header-menu {
		width: 100%;
		position: absolute;
		top: 100px;
		left: 0;
		text-align: left;
		background: rgba(247, 148, 30, 0.9);
		padding: 0;
		line-height: normal;
		height: auto;
		overflow-y: auto;
	}
	.fix_menu {
		position: fixed;
		height: 100%;
		padding-bottom:100px;
	}
	.header-menu a > div, .header-menu a > div.active {
		color: #fff;
		text-align: left;
		border-bottom: solid 1px #fff;
	}
	.header-menu .header-menu-items{
		padding: 5% 5%;
	}
	.header-menu .header-menu-items, .header-menu a:hover > div{
		border-bottom: solid 1px #fff;
		background: url(../images/OP/arrow_white.png) no-repeat 95% 50%;
		background-size: 17px;
	}
	.menu-pad-rg {
		margin-right: 0;
	}
	.menu-icon-area{
		display: block;
		width: 100%;
		height: 100%;
	}
	.menu-icon {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		width: 100px;
		height: 100%;
		border-left: solid 1px #e7e7e7;
		padding: 30px 0;
	}
	.menu-br {
		display: none;
	}
	.mobile-menu, .header-items {
	    /*overflow: hidden;*/		
		width: 100%;
	}
	.header-items {
		position: fixed;
	}
	.mobile_scroll {
		overflow-y: hidden;
	}
	.grid-container, .grid-container-page {
		padding-top: 100px;
	}
	.mobile-menu{
		position: unset;
	}
	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 5px;
		background-color: #333;
		margin: 6px auto;
		transition: 0.4s;
	}
	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}

	.change .bar2 {opacity: 0;}

	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-8px, -8px);
		transform: rotate(45deg) translate(-8px, -8px);
	}
	header, header > div, .header-area-r > div, .mobile-menu, .header-menu, .header-items, .header-menu > a > div{
		z-index: 5;
	}
	.grid-container, .grid-container > div {
		z-index: 0;
	}
	.mobile-header-bar-right {
		color: #fff;
		width: 100%;
		line-height: 100%;
	}
	.mobile-menu-row {
		width: 100%;
	}
	.mobile-header-bar-items{
	    width: 150px;
	}
	.mobile-header-bar-items2{
	    width: 15%;
	}
	.mobile-menu-row, .mobile-header-bar-items, .mobile-header-bar-items2 div, .mobile-header-bar-items2 {
		display: inline-block;
		line-height: 100%;
	}
	.mobile-header-bar-right .mobile-menu-row:first-child {
		padding: 7% 5% 2% 5%;
	}
	.mobile-header-bar-right .mobile-menu-row {
		padding: 2% 5% 7% 5%;
	}
	.menu-line {
		border-right: 0px;
	}
	.decreasetext{
		padding-right: 5px;
	}
	.increasetext {
		padding-left: 5px;
	}
	.mobile-header-bar-items .lang_en, .mobile-header-bar-items .lang_tc, .mobile-header-bar-items .lang_sc {
		display: inline-flex;
	}
	div.gallery_column img, div.pr_gallery_column img {
		max-width: 100vw;
	}
}

@media only screen and (max-width: 840px) {
	.menu-pad-rg {
		margin-right: 1%;
	}

}

/*tablet*/
@media only screen and (max-width: 768px) {

	/*mobile version*/
	.side_con_l, .side_con_l_img {
		max-height: unset;
		min-height: unset;
	}
	.side_con_l_img {
		padding: 50px 0;
	}
	.top_w_img {
		margin-top: 70px;
	}
	.long_box-text-r_img.page_left, .img-box-r.page_right {
		float: none;
	}
	.long_box-text-l, .long_box-text-r, .long_box-text-r_img, .img-box-r {
		width: 89%;
	}
	.long_box-text-l, .long_box-text-r_img, .img-box-r {
		margin: 0% 6%;
	}
	.box-img {
		bottom: 0px;
	}
	.brown-btn {
		width: 80%;
	}
	.tw_title, .tw_des {
		padding: 15% 0% 0% 0%;
		margin-bottom: -13%;
	}
	.home-text-r {
		margin-left: 0%;
	}
	/*photogallery*/
	.gallery_column {
		grid-template-columns: repeat(2, 1fr);
		
	}
	div.gallery_column img, div.pr_gallery_column img {
		max-width: 100vw;
	}
	/*high20year*/
	.logo_bg {
		background: url(../images/mobile/logo_section_bg_mobile.jpg);
		background-position: top;
		background-size: cover;
		background-color: #f58020;
	}
	.side_con_l {
		padding: 50% 0 50px 0;
	}

}

@media only screen and (max-width: 640px) {
	/*home-body*/
	.grid-container {
		-ms-grid-columns: 1fr;
		grid-template-columns: unset;
	}
	.box-one,.box-two,.box-three, .box-four, .grid-container-mid-text, .box-five, .box-six, .box-seven {
		-ms-grid-column: 1;	
		grid-column-start: unset;
		grid-column-end: unset; 
		grid-row-start: unset;
		grid-row-end: unset;
	}

.box-one {
    -ms-grid-row: 2;	
}
.box-two {
	-ms-grid-row: 4;
}
.box-three {
    -ms-grid-row: 3;
}
.box-four {
  -ms-grid-row: 7;
}
.grid-container-mid-text {
    -ms-grid-row: 1;	
}
.box-five {
-ms-grid-row: 5;
}
.box-six {
	-ms-grid-row: 6;
}
.box-seven { 
-ms-grid-row: 8;
}
	.grid-container .grid-container-mid-text{
		height: 100%;
	}
	.box-video .hide{
		display: block;
	}
	.box-video {
		margin-bottom: 5px;
	}
	/*home page order old version*/
	/*.grid-container-mid-text {
		order: 1;
	}
	.box-one{
		order: 4;
	}
	.box-two {
		order: 3;
	}
	.box-three {
		order: 2;
	}
	.box-four {
		order: 5;
	}
	.box-five {
		order: 6;
	}
	.box-six {
		order: 7;
	}
	.box-seven {
		order: 8;
	}*/
	
	.grid-container-mid-text {
		order: 1;
	}
	.box-one{
		order: 2;
	}
	.box-two {
		order: 4;
	}
	.box-three {
		order: 3;
	}
	.box-four {
		order: 7;
	}
	.box-five {
		order: 5;
	}
	.box-six {
		order: 6;
	}
	.box-seven {
		order: 8;
	}
	
	.grid-container > div, .grid-container-mid > div, video, .grid-container .grid-container-mid-text {
		height: 56vw;
	}
	.brown-btn {
		width: 100%;
		background: url(../images/OP/arrow_white.png) no-repeat 90% 50%;
		background-color: #bc732f;
		background-size: 15px;
	}
}

@media only screen and (max-width: 425px) {
	/*header*/
	.header-area-l {
		width: 50%;
	}
	.header-area-r {
		width: 50%;
	}
	.logo-size {
		max-width: 160px
	}
	
	/*footer*/
	.footer-l, .footer-r {
		width: 100%;
	}
	.footer-logo, .footer-copyright {
		/*padding: 7% 6% 0 6%;*/
	}
	.footer-copyright {
		text-align: start;
	}
	.grid-container {
		padding-bottom: 22vh;
	}

	/*high20year*/
	.side_box {
		width: 94%;
		padding: 50px 0px;
	}
	.side_con_top {
		margin-top: 70px;
	}
	.box-text-r {
		width: 87%;
		margin: 0% 6%;
	}
	.icon_list {
		width: 100%;
		margin-top: 0;
		padding: 0;
	}
	.link_tab-container {
		padding: 0 6% 70px 6%;
	}
	.tab-link {
		padding: 26px 12% 26px 35px;
	}
	.icon_list.page_right > .link_tab-container{
		margin-top: 70px;
	}
	.desktop-mode {
		display:none;
	}
	.mobile-mode {
		display:block;
	}
	.brown-btn {
		width: 90%;
	}
	.tw_title, .tw_des {
		margin-bottom: 15px;
	}
	.tw_title.reset-index {
		padding-top: 6%;
	}
	/*photogallery*/
	.gallery_column, .pr_gallery_column {
		grid-template-columns: 1fr;
	}
	

}