/* ^^^^^^^^^^^^^^^^^ TABLE ^^^^^^^^^^^^^^^^ */
table.two-cols > tbody > tr > th{ width: 50%; }

/* ^^^^^^^^^^^^^^^^^ CLEAR ^^^^^^^^^^^^^^^^ */
.panel-cnt:after,
.panel-cnt > div:after,
[class$=cols-panel]:after,
[class$=cols-panel] > div:after,
#smooth-knowledge:after,
#subsidiaries-list:after,
#subsidiaries-list div:after,
#contact-us > div:after,
[class*=puzzle]:after,
#cg-policy-list:after,
#cg-policy-list:before,
[class*=accordion]:after,
[class*=accordion]:before,
[class^=swith-tab]:after,
.news-list-table > article > .list:after,
[class*=two-cols]:after,
[class*=four-cols]:after,
[class*="accordion"] > section > article:after,
[id$=news-read]:after,
[id$=news-read] > header:after,
#home-news [id^="bx-"] > header:after,
.stock-price > div:after,
#home-news [id^=bx-] > article:after{
	content: "";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}

/* ^^^^^^^^^^^^^^^^^ GRID ^^^^^^^^^^^^^^^^ */
.wp-fz-12{ width: 1170px; }
.wp-fz-11{ width: 1070px; }
.wp-fz-10{ width: 970px;  }
.wp-fz-09{ width: 871px; }
.wp-fz-08{ width: 772px; }
.wp-fz-07{ width: 673px; }
.wp-fz-06{ width: 574px; }
.wp-fz-05{ width: 475px; }
.wp-fz-04{ width: 376px; }
.wp-fz-03{ width: 277px; }
.wp-fz-02{ width: 178px; }
.wp-fz-01{ width: 79px; }

.wp-rect-12{ width: 1148px; height: 574px; }

.wp-sq-06{ width: 574px; height: 574px; }
.wp-sq-03{ width: 287px; height: 287px; }

.np-fz-12{ width: 1170px; }
.np-fz-11{ width: 1072.5px; }
.np-fz-10{ width: 975px;  }
.np-fz-09{ width: 877.5px; }
.np-fz-08{ width: 780px; }
.np-fz-07{ width: 682.5px; }
.np-fz-06{ width: 585px; }
.np-fz-05{ width: 487.5px; }
.np-fz-04{ width: 390px; }
.np-fz-03{ width: 292.5px; }
.np-fz-02{ width: 195px; }
.np-fz-01{ width: 97.5px; }

.inner-fz-08{ width: 755px; }
.custom-fz-03{ width: 362px; }

/* ^^^^^^^^^^^^^^^^^ ACC ^^^^^^^^^^^^^^^^^^ */
.column-2d{ 
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
       -moz-column-count: 2; /* Firefox */
            column-count: 2; 
	-webkit-column-width: 50%;
       -moz-column-width: 50%;
            column-width: 50%;
}
.column-2d h4{ padding: 0px; margin: 0px; }

[class*=accordion] > section{ border: 2px solid #fff; }
[class*=accordion] > section > header{ background: #f7f7f7; display: block; }
[class*=accordion] > section > header > h3{ margin: 0px; padding: 0px; }
[class*=accordion-list] > section > header > h3 > a{ display: block; padding: 20px; font-weight: bold; background: url(../images/icon/arr-right-green.png) no-repeat 98% 50%; }
[class*=accordion-list] > section.active > header > h3 > a{  background: url(../images/icon/arr-down-green.png) no-repeat 98% 50%;}
[class*=accordion] > section > article{ border-top: 2px solid #8bc63f; border-bottom: 2px solid #f3f9eb; padding: 20px; display: none; background-color: #f3f9eb; }
[class*=accordion] > section > article table{ width: 100%;  }
[class*=accordion] > section > article table tr th{ text-align: left; border-top: 2px solid #f7f7f7; border-bottom: 2px solid #cacaca; padding: 10px 0; }
[class*=accordion] > section > article table tr td{ padding: 10px 0; border-bottom: 1px solid #cacaca; }

[class*=accordion-like] > section{ border: 1px solid #e6e6e6; }
[class*=accordion-like] > section > header > h3{ margin: 0 20px; padding: 20px 0; font-weight: bold; }
[class*=accordion-like] > section > article{ background-color: #fff; }

/* ^^^^^^^^^^^^^^^^^ PANEL ^^^^^^^^^^^^^^^^ */
.panel-cnt{ width: 100%; }
.panel-cnt > .cnt-left{ float: left; }
.panel-cnt > .cnt-right{ float: right; }

[class*=panel-download] > div > div{ height: auto; }
[class*=panel-download] > div > div > figure{ position: relative; }
[class*=panel-download] > div > div > figure > figcaption{ position: absolute; bottom: 0px; padding: 0 20px;  width: calc(100% - 40px); }
[class*=panel-download] > div > div > figure > figcaption h3{ width: 100%; display: block; border-top: 3px solid #8bc63f; color: #8bc63f; font-weight: bold; padding: 15px 0 0 0; color:#fff; }
[class*=panel-download] > div > div > div{ padding: 20px; background-color: #fbfbfb; }

/*TAB*/
[class^=swith-tab]{ margin: 0px; padding: 40px 0; list-style: none; }
[class^=swith-tab] > li{ display: block; float: left; }
[class^=swith-tab] > li > a{ display: block; text-align: center; color: #8bc63f; padding: 15px 0; border: 1px solid #eeeeee; } 
[class^=swith-tab] > li > a:hover,
[class^=swith-tab] > li.active > a{ color: #fff; background-color: #8bc63f; } 
[class^=swith-tab].two-tab > li{ width: 50%; }

aside.contact-side{  }
aside.contact-side > p{  }
aside.contact-side > div{ padding: 0 15px; border-left: 3px solid #8bc63f; }
aside.contact-side > div > p{}
aside.contact-side > div > p i{ color: #8bc63f; }
aside.contact-side > div > p a{ color: #393939!important; font-weight: bold; }

/* ^^^^^^^^^^^^^^^^^ COLUMN ^^^^^^^^^^^^^^^^ */
/* 2C */
.two-cols-panel{  }
[class*=two-cols] > [class*=half]{ width: 50%; }
[class*=two-cols] > [class*=half-left]{ float: left; }
[class*=two-cols] > [class*=half-right]{ float: right; }
[class*=two-cols] > [class^=wp-fz]{ float: left; }
[class*=two-cols] > [class^=wp-fz]:first-child{ margin-right: 20px; }

/* 3C */
[class*=three-cols]:first-child{ margin: 20px 0; }
[class*=three-cols] > div{ float: left; margin: 0 0 20px 20px; }
[class*=three-cols] > div > div{ width: calc(100% - 2px); border: 1px solid #e2e2e2; border-bottom: 2px solid #cacacb; }
[class*=three-cols] > div > div > figure > img{ width: 100%; }
[class*=three-cols] > div > div > div{ width: calc(100% - 40px); padding: 0 20px; }
[class*=three-cols] > div:first-child,
[class*=three-cols] > div:nth-child(3n+1){ margin: 0 0 20px 0; }

/* 4C */
[class*=four-cols]:first-child{ margin: 20px 0; }
[class*=four-cols] > div{ float: left; margin: 0 0 20px 20px; }
[class*=four-cols] > div:first-child,
[class*=four-cols] > div:nth-child(4n+1){ margin: 0 0 20px 0; }
[class*=four-cols-panel-highlight] > div:nth-child(4n){ margin: 0 20px 20px 20px; }
[class*=four-cols-panel-highlight] > div:nth-child(8){ margin: 0 20px 20px 0px; }

[class*=no-border] > div > div{ width: 100%; border: 0px!important; position: relative; }
[class*=no-border] > div > div > span.line{ width: 46px; height: 5px; display: block; position: absolute; top: -20px; left: 0px; background-color: #7ec42f; }

.text-red {
    color: #cd2626;
}

/* ^^^^^^^^^^^^^^^^^ BUSINESS BAR ^^^^^^^^^^^^^^^^ */
#business-bar{ width: 1170px; margin: 0 auto; }
#business-bar > p{ margin: 0px; padding: 15px 0; text-align: center; background: url(../images/bg/bg-bottom-main-business.png) no-repeat center bottom; }
#business-bar > div{  }
#business-bar > div > ul{ height: 115px; margin: 0px; padding: 0px; list-style: none; text-align: center; border-bottom: 1px solid #dadada;  }
#business-bar > div > ul > li{ display: inline-block; padding: 0 0 5px 0; }
#business-bar > div > ul > li:hover,
#business-bar > div > ul > li.active{ background: url(../images/icon/arr-down.png) no-repeat center bottom; }
#business-bar > div > ul > li > a{ overflow: hidden; height: 115px; display: inline-block; }

.logo-slider{ overflow: hidden; clear: both; }
.logo-slider > div{ height: 135px; position: absolute; overflow-x: hidden; bottom: 10px; }
.logo-slider > div a{ display: block; float: left; border: 1px solid #f3f3f3; margin: 0px 0 7px 7px; }

/* ==================== HOME ====================== */
.noscroll{ overflow: hidden!important; }
.rotate-screen{ position: fixed; width: 100%!important; height: 100%!important; background: #fff; z-index: 1000; display: none; overflow: hidden!important; top: 0; }
.rotate-screen-inner{ width: 100%; text-align: center; font-size: 90px; top: 25%; position: absolute; }
.rotate-screen-inner i{ font-size: 120px; }
.rotate-screen-inner h4{ margin: 0px; padding: 80px 0; }

/* BANNER */
#content-home [id^=home].section{ background-size: cover; width: 100%; height: 100%; }
#content-home [id^=home-banner]{ height: 100%; position: relative; overflow: hidden; }
#content-home [id^=home-banner] ol{ z-index: 2; }
#content-home [id^=home-banner] ol li{ padding: 0 5px; }
#content-home [id^=home-banner] ul.slides li img{ width: 100%; }
#content-home [id^=home-news]{ background: url(../images/bg/bg-home-section-news.jpg) no-repeat center center; background-size:cover; text-align: center;  }
#content-home [id^=home-business]{  position: relative; overflow: hidden; }

/* NEWS */
#home-news > article > div > header{ width: 1170px; margin: 0 auto; text-align: center; }
#home-news > article > div > header > h2 > span{ color: #7fb42e; }
#home-news > article > p{ width: 100%; position: absolute; bottom: 5%; margin: 0px; padding: 0px; left: 0; }
#home-news h2{ line-height: 36px; }
#home-news .two-cols-panel{ z-index: 1; position: absolute; text-align: left; margin: -12px 0 0 0; top: 12%; }
#home-news #bx-updated{ background-color: #669539; }
#home-news #bx-privilege{ background-color: #8cc540; }
#home-news [id^=bx-]{ height: 392px; }
#home-news [id^=bx-] > header{ margin: 20px; border-bottom: 2px solid #fff; }
#home-news [id^=bx-] > header > h2{ color: #fff; float: left; margin: 0px; }
#home-news [id^=bx-] > header > a{ float: right; color: #fff; }
#home-news [id^=bx-] > header > a i:before{ font-size: 25px; }
#home-news [id^=bx-] > article{ margin: 0 20px;}
#home-news [id^=bx-] > article .bx-grid{ margin: 0 10px;}
#home-news [id^=bx-] > article .bx-grid > div{ width: 252px; float: left; }
#home-news [id^=bx-] > article .bx-grid > div:first-child{ margin: 0 20px 0 0; }
#home-news [id^=bx-] > article .bx-grid > div > div{ height: 290px; }
#home-news [id^=bx-] > article .bx-grid > div > div > a{ background-color: #fff; }
#home-news [id^=bx-] > article .bx-grid > div > div > a:hover{ background-color: #E8F4D9; }
#home-news .flex-active-slide img{ width: 100%; }
#home-news .flex-control-nav{ position: relative; padding: 8px 0px!important; }
#home-news .flex-control-nav > li > a{ background: none; border: 2px solid #fff; box-shadow: 0px 0px 0 #fff inset; }
#home-news .flex-control-nav > li > a:hover,
#home-news .flex-control-nav > li > a.flex-active{ background: #fff; }


/* Z Accordion */
#content-home .slider-accordion { height: 100px; width:100%; margin: 0 auto 0 auto; top: 1px; position: absolute; z-index: 0; }
#content-home .slider-accordion li{ position: relative; box-shadow: 20px 20px 20px 20px #000; }
#content-home .slider-accordion li > img{ width: 100%; position: relative; }
#content-home .slider-accordion li > span{ display: block; width: 100%; height: 100%; position: absolute; top: 0px; z-index: 1; }
#content-home .slider-accordion li > div{ position: absolute; top: 0px; margin: 0 auto; background-color: #fff; width: 100%; text-align: left; display: block!important; }

#content-home .slider-accordion li > div > div{ position: relative; width: 100%; padding: 24px 0; }
#content-home .slider-accordion li > div > div > a{ color: #7ec02a; display: block; position: absolute; top: 196px; width: calc(100% - 40px); border-top: 1px solid #f3f3f3; padding: 7px 0; margin: 0 20px; z-index: 2; } 
#content-home .slider-accordion li > div > div > a i{ padding: 0 10px; }
#content-home .slider-accordion li.slide-closed > span{ 
	background: rgba(255, 255, 255, 0.6);
	filter: blur(10px);
   -webkit-filter: blur(10px);
   -moz-filter: blur(10px);
   filter: url('blur.svg#blur'); /* for Firefox */
}
#content-home .slider-accordion li.slide-closed > span::before{
	display: block;
    width: 100%;
    height: 100%;
    content: ' ';
    opacity: 0.4;
}
#content-home .slider-accordion li.slide-closed > div{ height: 100px; }
#content-home .slider-accordion li.slide-closed > div > div{ text-align: left; padding: 24px 0 24px 10px; }
#content-home .slider-accordion li.slide-closed > div > div > a{ display: none; }
#content-home .slider-accordion li.slide-closed .logo-slider{ opacity: 0; }

#content-home .slider-accordion li.slide-open > div{ height: 240px; }
#content-home .slider-accordion li.slide-open > div > div{ text-align: center; }
#content-home .slider-accordion li.slide-open > div > div > a{ display: block; }
#content-home .slider-accordion li.slide-open .logo-slider{ opacity: 1; }

.slider-accordion li .logo-slider{ height: 110px; width: 555px; overflow: hidden; clear: both; position: relative; z-index: 5; margin: 0px auto; }
.slider-accordion li .logo-slider div{ width: 100%; height: 110px; position: absolute; overflow-x: hidden; top: 0px; }
.slider-accordion li .logo-slider div a{ display: inline-block; float: none; border: 0; margin: 0px 0 7px 7px; }
.slider-accordion .logo-slider .scrollableArea{ min-width: 100%; overflow: hidden; }
#shopping-logo .scrollableArea{ min-width: 855px; overflow: hidden; }
/*
.slider-accordion .slide-open > img{ opacity: 1; }
.slider-accordion .slide-closed > img{ opacity: 0.2; }
*/

/* IR */
#content-home [id^=home-investor]{ background: url(../images/bg/bg-home-section-investor.jpg) no-repeat; }
#content-home [id^=home-investor] > article > p{ width: 100%; position: absolute; bottom: 350px; margin: 0px; padding: 0px; left: 0; }
.stock-price{ width: 100%; position: absolute; bottom: 360px; margin: 0px; padding: 0px; left: 0; height: 100px; display: block; z-index: 1; }
.stock-price > div{ position: relative; margin: 0 auto; background: url(../images/bg/bg-overlay-green-light.png); color: #506d2c; }
.stock-price > div > div{ height: 48px; display: block; float: left; margin: 20px 0; padding: 10px 20px; text-align: center; border-right: 1px solid #81b03f; border-left: 1px solid #bbde7f; font-size: 19px; }
.stock-price > div > div > span{ display: block; color: #fff; font-weight: bold; font-size: 30px; }
.stock-price > div > div > time{ display: block; font-size: 19px!important; }
.stock-price > div > div:first-child{ border-left: 0px; }
.stock-price > div > div:last-child{ border-right: 0px; }
#hm-symbols{ width: 90px; }
#hm-lastdone{ width: 119px; }
#hm-change{ width: 205px; }
#hm-volume{ width: 185px; }
#hm-value{ width: 180px; }
#hm-stockupdated{ width: 125px; text-align: left; }
.fp-slidesNav li a.active span{ background-color: #444; }

/* ======================== ABOUT =========================== */
.gray-box,
#smooth-knowledge{ margin: 25px auto; padding: 20px 40px; background-color: #f7f7f7; border-left: 1px solid #ededee; border-right: 1px solid #ededee; border-bottom: 1px solid #cacacb; max-width: 1118px;  }
#smooth-knowledge #smooth-logo{ display: block; width: 100%; height: 64px; background: url(../images/smooth/logo-smooth.png) no-repeat; margin: 0px; padding: 0 0 30px 0; border-bottom: 1px solid #dfdfdf; }
#smooth-knowledge table{ width: 100%; padding: 0px; margin: 0px; border-spacing: 0; border-collapse: separate; }
#smooth-knowledge table tr td{ padding: 0 20px 20px 20px; border-top: 1px solid #fff; border-left: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;  }
#smooth-knowledge table tr td:first-child{ width: 230px; text-align: center; border-right: 1px solid #fff; padding: 0px; border-left: 0px; }
#smooth-knowledge table tr:last-child td{ border-bottom: 0px; }

/* BOARD */
[id*=board-list]{ padding: 20px 0; }
[id*=board-list] > div{ }
[id*=board-list] > div figure{ position: relative;  }
[id*=board-list] > div figure img{ width: 100%; }
[id*=board-list] > div figure figcaption{ border: 1px solid #ededee; height: 140px; margin-top: -6px; padding: 20px;}
[id*=board-list] > div figure figcaption h3{ margin: 0px; padding: 0px; color: #8bc63f; font-weight: bold; }
[id*=board-list] > div figure figcaption p{ margin: 0px; padding: 0px; }
[id*=board-list] > div figure a:hover figcaption{ height: 131px; border-bottom: 10px solid #8bc63f; }
[id*=board-list] > div > div > article{ display: none; }

[id*=board-popup] figure{ padding: 20px; }
[id*=board-popup] figure figcaption{ height: 140px; margin-top: -6px; padding: 20px 0;}
[id*=board-popup] figure figcaption h3{ margin: 0px; padding: 0px; color: #8bc63f; font-weight: bold; }
[id*=board-popup] figure figcaption p{ margin: 0px; padding: 0px; }
[id*=board-popup] section div > aside{ float: left; }
[id*=board-popup] section div > article{ float: right; }
[id*=board-popup] section div > article .nano-content{ padding: 0 35px 0 0; }


.toc-exp{}
.toc-exp tr th{ text-align: left; color: #8bc63f; padding-bottom: 20px; }
.toc-exp tr td{ padding: 0 20px 0 0; vertical-align: top; }
.toc-exp tr td:first-child{ width: 150px; }
.toc-exp tr td:nth-child(2){ width: 200px; } 

/* MILESTONE */
#milestone-present{ top: -100px; position: relative; margin-bottom: -30px; }
#milestone-present > [class^=wp-fz]:first-child{ margin-right: 17px; }
.milestone-acc[class*="three-cols"] > div > div{ border: 0px!important; }
#cd-timeline{ height: 960px; }
#milestone-02{ top: -470px; }
#milestone-02 .cd-separate{ top: 380px; }
#milestone-03{ top: -635px; }
#milestone-03 .cd-separate{  }

/* NATURE */
#nature-biz > div > div{ height: 450px; position: relative; border: 0px; }
#nature-biz > div > div > figure{ position: relative; }
#nature-biz > div > div > figure > img{ width: 100%; }
#nature-biz > div > div > figure > figcaption{ position: absolute; bottom: 0px; padding: 0 20px;  width: calc(100% - 40px); }
#nature-biz > div > div > figure > figcaption h3{ width: 100%; display: block; border-top: 3px solid #8bc63f; color: #8bc63f; font-weight: bold; padding: 15px 0 0 0; color:#fff; }
#nature-biz > div > div > div{ position: absolute; top: 78px; color: #FFF; background: url(../images/bg/bg-overlay-green.png); width: calc(100% - 40px); height: calc(100% - 79px); display: none; }
#nature-biz > div > div > div a{ color: #fff; }
#nature-biz > div > div > div ul{ padding: 20px 20px !important; position: absolute; bottom: 60px; }
#nature-biz > div > div > div ul li{ padding: 3px 0px!important; }
#nature-biz > div > div:hover > div{ display: block; }
#nature-biz > div > div:hover > figure > figcaption{ z-index: 2;  }
#nature-biz > div > div:hover > figure > figcaption h3{ border-top: 3px solid #fff;  }

#nature-biz-bottom{ padding: 40px 0 0 0; }
#nature-biz-bottom > header{ background-color: #e8f4d9; }
#nature-biz-bottom > header > h4{ color: #4a4a49!important; font-size: 16px; font-weight: normal; margin: 0px!important; padding: 20px 0!important; text-align: center; }
#nature-biz-bottom > article{ background-color: #f6f6f6; padding: 20px; border-top: 1px solid #fff; }
#nature-biz-bottom > article h4{ margin-top: 0px!important; }
#nature-biz-bottom > article > div:first-child{ float: left; border-right: 1px solid #fff; }
#nature-biz-bottom > article > div{ float: right; width: 48%; height: 350px; }

/* SUBSIDIARY */
#subsidiaries-list > div { clear: both; position: relative; margin: 50px 0 0 0; box-shadow: 2px 2px 2px #ededed; height: 374px; border-top: 1px solid #ededed; }
#subsidiaries-list > div > div{ float: right; }
#subsidiaries-list > div > div:first-child{ float: left; position: relative; }
#subsidiaries-list > div > div:first-child > h2{ width: calc(100% - 50px); margin: 10px 25px; padding: 10px 0px; position: absolute; bottom: 0; color: #fff; border-top: 3px solid #8dc63f; font-weight: bold; }
#subsidiaries-list > div > div > div >  ul{ float: left; width: 33%; }
#subsidiaries-list > div > div ul > li{ font-weight: bold; } 
#subsidiaries-list .logo-slider .scrollableArea{ width: 850px!important; }

/* AWARDS */
#awards-certificate > div{ float: left; position: relative; }
#awards-certificate > div > div { width: calc(100% - 2px); border: 1px solid #e2e2e2; height: 283px; border-bottom: 2px solid #cacacb; }
#awards-certificate > div > div > figure{ height: 180px; overflow: hidden; border-bottom: 1px solid #e2e2e2; }
#awards-certificate > div > div > figure > figcaption{ position: absolute; top: 150px; padding: 20px; }
#awards-certificate > div > div > figure > figcaption > h2{ font-weight: bold; }
#awards-certificate > div > div > figure > figcaption > p{ margin: 0px; }
#awards-certificate > div:first-child > div{ height: 590px; }
#awards-certificate > div:first-child > div > figure{ height: 590px; }
#awards-certificate > div:first-child > div > figure > figcaption{ position: relative; top: 0; padding: 0 20px; }
#awards-certificate > div > div > figure > img{ width: 100%; }

/* ==================================== BUSINESS ============================== */
.biz-logo{ float: right; margin: 20px 10px 20px 0; }
.biz-logo > img{ width: 90px; }
.biz-grid{ clear: both; margin: 20px 0; min-height: 600px; }
.biz-grid > div{ padding: 0 11px; }
.biz-grid > div > div{ display: block; float: left; }
.biz-grid > div > div > a{ position: relative; display: block; }
.biz-grid > div > div > a > span{ position: absolute; width: calc(50% - 60px); display: block; padding: 20px 30px; background-color: #56565a; color: #fff; z-index: 1; }
.biz-grid > div > div > a > span[class*=-top]{ top: 0; }
.biz-grid > div > div > a > span[class*=-left]{ left: 0; }
.biz-grid > div > div > a > span[class*=-bottom]{ bottom: 0; }
.biz-grid > div > div > a > span[class*=-right]{ right: 0; }
.biz-grid > div > div > a:hover > span{ background-color: #8ac73f; color: #fff; }

.biz-grid > div > div > a > h3{ position: absolute; top: 45%; width: calc(100% - 40px); padding: 0 20px; text-align: center; line-height: 36px; z-index: 1; display: none; }
.biz-grid > div > div > a:hover > h3{ display: none; color: #434343; }

[class*=puzzle]{ display: block; position: relative; }
[class*=puzzle] > div{ float: left; }

div[class*=top-left]{ background-position: left top!important; }
div[class*=top-right]{ background-position: right top!important; }
div[class*=bottom-left]{ background-position: left bottom!important; }
div[class*=bottom-right]{ background-position: right bottom!important; }

.biz-grid > div > div > a > div{ background-repeat: no-repeat; }
.biz-grid > div > div > a:hover > div{ background-repeat: no-repeat; }

.bu-gallery{ padding: 20px 0; }
.bu-gallery .flex-active-slide img{ width: 100%; }
.bu-gallery .flex-control-nav{ position: relative; padding: 10px 0px!important; }
.bu-gallery .flex-control-nav > li{ width: 67px; height: 67px; display: block; float: left; margin: 0 25px 25px 0; }
.bu-gallery .flex-control-nav > li > a{ border: 7px solid #cacaca; display: block; width: 30px; height: 30px; border-radius: 0; font-weight: bold; padding: 30px 0 0 30px; color: #cacaca; }
.bu-gallery .flex-control-nav > li > a:hover,
.bu-gallery .flex-control-nav > li > a.flex-active{ border: 7px solid #8ac73f; color: #8ac73f; }

.bu-gallery .flex-control-nav > li > a,
.bu-gallery .flex-control-nav > li > a:hover,
.bu-gallery .flex-control-nav > li > a.flex-active{ background: none; text-indent: 0; box-shadow: none; }

.bu-location{ border-top: 3px solid #8ac73f; margin: 30px 0; padding: 10px 0; }
.bu-location h4{ font-weight: bold; color: #4a4a49!important; }
.bu-location [class*=default-btn]{ float: left; margin: 10px 10px 0 0; }

/* ===================================== CG =============================== */

.bx-cols-number{}
.bx-cols-number > div{ background-color: #f8f8f8; position: relative; height: 390px; }
.bx-cols-number > div > div{ padding: 80px 20px 20px 20px; }
.bx-cols-number > div > div > span{ position: absolute; left: 0; top: 0px; width: 75px; height: 75px; text-align: center; line-height: 75px; color: #8bc63f; background-color: #fff; font-weight: bold; }
.bx-cols-number > div > div > p{ clear: both; line-height: 28px; }

#cg-policy-list{ padding: 20px 0; }
#cg-policy-list > div{ position: relative; float: left; width: 230px; height: 222px; display: block; }
#cg-policy-list > div > div{ width: 172px; height: 162px; padding: 30px; display: block; color: #fff; line-height: 30px; position: absolute; right: 0px; top: 0px; }
#cg-policy-list > div > div > span{ display: block; line-height: 52px; font-weight: bold; }
#cg-policy-list > div > div.bx-green{ background-color: #8bc63f; }
#cg-policy-list > div > div.bx-gray{ background-color: #717174; }
#cg-policy-list > div#list-01{ width: 460px; height: 448px; background: url(../images/content/cg/policy-01.jpg) no-repeat; margin: 0 7px 5px 0; }
#cg-policy-list > div#list-02{ margin: 0 5px 5px 0; }
#cg-policy-list > div#list-03{ margin: 0px 6px 5px 0px; }
#cg-policy-list > div#list-04{ margin: 0px 6px 5px 0px; }
#cg-policy-list > div#list-05{ }
#cg-policy-list > div.list-none{ width: 468px; background: url(../images/content/cg/policy-none.jpg) no-repeat left; margin: 0 0px 5px 0; }

#cg-stakeholders > div{ position: relative; }
#cg-stakeholders > div > div { width: calc(100% - 40px); border: 0px; position: absolute; top: 0; padding: 0px 20px; }
#cg-stakeholders > div > div p i{ color: #8bc63f; }
#cg-stakeholders > div > div p i:after,
#cg-stakeholders > div > div p i:before{  font-size: 24px; vertical-align: middle; }

/* ==================================== NEWS ============================== */
/* NEWS GRID */
.filter-bar{ clear: both; margin: 15px 0px; height: 45px; }
.filter-bar > div{ float: right; }
.filter-bar > div > span{ float: left; line-height: 45px; display: block; padding: 0 20px; }
.filter-bar > div > div{ float: left; height: 20px; margin: 7px 0; }
.filter-bar > div > div .dd-select{ width: 137px; height: 30px; line-height: 30px; background: #fff!important; border: 1px solid #dbdbdb; }
.filter-bar > div > div .dd-selected{ padding: 0px; text-align: center; }
.filter-bar > div > div .dd-selected label{ width: calc(100% - 1px); display: block; border-right: 0; text-align: center; }
.filter-bar > div > div .dd-options{ margin-top: 0; border-radius: 2px; border: 0px; }
.filter-bar > div > div .dd-options li{ height: 30px; border: 1px solid #dbdbdb; padding: 0px; border-top: 0px; }
.filter-bar > div > div .dd-options li a{ height: 30px; line-height: 30px; padding: 0; text-align: center; border: 0px; }
.filter-bar > div > div .dd-pointer { border-color: #8bc63f transparent transparent; }

.bx-grid{}
.bx-grid > div{ }
.bx-grid > div > div{ width: calc(100% - 2px); border: 1px solid #e2e2e2; height: 305px; border-bottom: 2px solid #cacacb; overflow: hidden; }
.bx-grid > div > div > figure{ height: 170px; border-bottom: 1px solid #e2e2e2; overflow: hidden; }
.bx-grid > div > div > figure > img{ width: 100%; }
.bx-grid > div > div > a{ display: block; min-height: 135px; }
.bx-grid > div > div > a:hover{ background-color: #e8f4d9; } 
.bx-grid > div > div time{ display: block; padding: 10px 20px; font-weight: bold; color: #717076!important; }
.bx-grid > div > div h4{ padding: 0px 20px!important; margin: 0px!important; font-weight: normal; color: #717076!important; }

/* NEWS LIST */

.news-list-table > header{ border: 1px solid #d7d7d7; }
.news-list-table > header > div{ float: left; display: block; background-color: #8ac73e; padding: 20px 5px;text-indent: 40px; color: #fff; border-right: 1px solid #fff; }
.news-list-table > header > div + div{ border-right: 1px solid #8ac73e; }
.news-list-table > article{ border: 1px solid #d7d7d7; }
.news-list-table > article > .list{ display: block; border-bottom: 1px solid #d7d7d7; background-color: #f8f8f8; }
.news-list-table > article > .list > time{ float: left; padding: 20px 5px;text-indent: 40px; border-right: 0; }
.news-list-table > article > .list > h4{ float: left; padding: 20px 5px!important; margin: 0px!important; border-left: 1px solid #ededed; background-color: #fff; }
.news-list-table > article > .list > h4 > a{ margin: 0 20px; display: block; }
.news-list-table > article > .list:hover time{  }
.news-list-table > article > .list:hover h4{ background-color: #f0f9e4; }

/* READ NEWS */
[id$=news-read]{ padding: 40px 0; }
[id$=news-read] > time{ color: #8bc63f; padding: 0 20px; font-weight: bold; }
[id$=news-read] > header{ padding: 0 20px 20px 20px; border-bottom: 2px solid #8bc63f; }
[id$=news-read] > header > h2{ float: left; color: #515151!important; font-weight: normal!important; margin: 10px 0; }
[id$=news-read] > header > a{ float: right; }
[id$=news-read] > article{ clear: both; float: left; margin: 0 0 0 20px; }
[id$=activities-news-read] > article{ clear: both; float: left; margin: 0 20px; }
[id$=activities-news-read] > article figure{ margin: 20px 0; }
[id$=activities-news-read] > article figure > img{ float: left; display: block; margin: 10px 10px 0px 0;  }
[id$=news-read] > aside{ float: right; margin: 0px; padding: 20px 0; margin: 0 20px 0 0; }
[id$=news-read] > aside > img{ width: 100%; }

/* COMPANY VIDEO */
#company-video > div{ float: left; position: relative; }
#company-video > div > div { width: calc(100% - 2px); border: 1px solid #e2e2e2; height: 149px; border-bottom: 2px solid #cacacb; }
#company-video > div > div > figure{ display: none; }
#company-video > div > div > div{ width: calc(100% - 40px); padding: 0 20px; position: absolute; bottom: 0; color: #fff; }
#company-video > div > div > div > div{ height: 50px; }
#company-video > div > div span{ float: left; width: 50px; height: 50px; display: block; background-color: #eeeeee; line-height: 51px; text-align: center; border-radius: 3px; color: #8bc63f; }
#company-video > div > div a:hover span{ background-color: #8bc63f; color: #fff; }
#company-video > div > div h3{ float: left; width: calc(100% - 90px); height: 50px; margin: 0px; padding: 0px 20px; }
#company-video > div > div a h3{ color: #3e3e3e; }
#company-video > div > div > div > time{ width: 100%; padding: 20px 0; display: block; border-top: 3px solid #8bc63f; margin: 28px 0 0 0; color: #8bc63f; font-weight: bold; }

#company-video > div:first-child > div{ height: 490px; }
#company-video > div:first-child > div > figure{ height: 490px; display: block; }
#company-video > div:first-child > div > div{ width: calc(100% - 56px); padding: 0 28px; }
#company-video > div:first-child > div a h3 { color: #fff; line-height: 50px; }
#company-video > div > div > figure > img{ width: 100%; }

/* CSR */
#csr-policy > div > div{ height: 558px; }
#csr-policy > div > div > figure{ position: relative; }
#csr-policy > div > div > figure > figcaption{ position: absolute; bottom: 0px; padding: 0 20px;  width: calc(100% - 40px); }
#csr-policy > div > div > figure > figcaption h3{ width: 100%; display: block; border-top: 3px solid #8bc63f; color: #8bc63f; font-weight: bold; padding: 15px 0 0 0; color:#fff; }

/* CONTACT */

#mbk-map > #graphic-map{ display: none; text-align: center; }
#contact-us > div{ margin: 30px auto; auto; width: calc(100% - 2px); border: 1px solid #ededee; }
#contact-us > div:first-child{ position: relative;  }
#contact-us > div:first-child > h4{ padding: 0 30px; }
#contact-us > div:first-child > div{ padding: 0 30px 30px 30px;}
#contact-us > div:first-child > div i{ color: #8bc63f; }
#contact-us > div:first-child > a{ position: absolute; right: 30px; top: 45px; overflow: hidden; }
#contact-us > div:first-child > #mbk-map{ padding: 0px; }

#contact-us > div > form > table{ width: 100%; background-color: #f7f7f7; }
#contact-us > div > form > table > tbody > tr > th{ background-color: #8bc63f; color: #fff; padding: 20px 30px; text-align: left; }
#contact-us > div > form > table > tbody > tr:nth-child(2) > td{ padding: 20px 55px 10px 55px; }
#contact-us > div > form > table > tbody > tr > td{ width: calc(100% - 201px); padding: 10px 55px; }
#contact-us > div > form > table > tbody > tr > td:first-child{ width: 201px; padding: 10px 0 10px 55px; }
#contact-us > div > form > table > tbody > tr > td > input{ width: 100%; }
#contact-us > div > form > table > tbody > tr > td > textarea{ width: 100%; max-width: 800px; max-height: 70px;}
#contact-us > div > form > table > tbody > tr > td > button{ float: left; margin: 10px 10px 20px 0; }