@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(../fonts/style.css);
/*
  danny 240328
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}





/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; font-size:10px; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; border: none; }




/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; }

html,body{ min-width: 100%; }
/* header */
header{ width: 100%; height: 60px; background: rgba(255, 255, 255, 1); position: fixed; left: 0; top: 0; display: flex; align-items: center; font-size: 1.6rem; line-height: 1.5; color: #1F1F1F; box-sizing: border-box; padding: 0 10px 0 10px; display: flex; justify-content: space-between; z-index: 9999; transition: all .8s cubic-bezier(.23,1,.32,1); box-shadow: 0px 62px 25px hsla(0,0%,55%,.01),0px 35px 21px hsla(0,0%,55%,.03),0px 15px 15px hsla(0,0%,55%,.05),0px 4px 8px hsla(0,0%,55%,.06),0px 0px 0px hsla(0,0%,55%,.06); }
header.hide{ top: -60px; transition: all .8s cubic-bezier(.23,1,.32,1); }
header .col-2{ display: flex; align-items: center; }
header h3{ display: flex; align-items: center; position: relative; margin: 0 20px 0 0; width: 180px; }
header h3 img{ width: 100%; }
header h3.active{ position: fixed; left: 10px; top: 22px; z-index: 9999; }
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.quick-nav{ display: flex; gap: 40px; margin: 0 40px 0 0; display: none; }
.search-box{ width: 15px; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; position: relative; }
.search-box.active{ display: none; }
.search-box a{ transition: all .3s cubic-bezier(.23,1,.32,1);  }
.search-box a:hover{ transform: scale(1.8); }
.search-box a:after{ content: '\e921'; font-size: 2rem; color: #1F1F1F; }
.select-box.language-nav{ width: 80px; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; margin: 0 1px 0 1px; position: relative; vertical-align: middle; font-size: 1.4rem; color: #1F1F1F; }
.select-box.language-nav .line{ width: 1px; height: 15px; background: #1f1f1f; margin: 0 6px 0 6px; }
.select-box.language-nav select{ background: transparent; width: 100%; padding: 0px 10px; font-size: 1.2rem; color: #1F1F1F; line-height: 1.3; border: 0; border-radius: 0; height: 100%; -webkit-appearance: none; box-sizing: border-box; position: absolute; text-align: center;  } 
.select-box.language-nav.active{ display: none; }
.hamburg-box{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; z-index: 9999; transition: all .3s cubic-bezier(.23,1,.32,1);  }
.hamburg-box .line-box{ width: 20px; height: 20px; position: relative; }
.hamburg-box .line{ width: 20px; height: 2px; border-radius: 30px; background: #1F1F1F; position: absolute; transition: all .3s cubic-bezier(.23,1,.32,1); }
.hamburg-box li:nth-child(1){ top: 0; }
.hamburg-box li:nth-child(2){ top: 50%; }
.hamburg-box li:nth-child(3){ top: 100%; }
.hamburg-box.active{ z-index: 9999; position: fixed; right: 10px; top: 20px; }
.hamburg-box.active li:nth-child(1),.hamburg-box.active li:nth-child(1){ top: 50%; transform: rotate(45deg); }
.hamburg-box.active li:nth-child(2),.hamburg-box.active li:nth-child(2){ opacity: 0; }
.hamburg-box.active li:nth-child(3),.hamburg-box.active li:nth-child(3){ top: 50%; transform: rotate(-45deg); }
header .nav-container{ width: 100vw; height: calc( 100vh - 60px ); background: #fff; box-sizing: border-box; padding: 20px 30px 60px 30px; position: fixed; left: 0; top: 60px; z-index: 999; display: none; overflow: auto; }
header .nav-container.active{ display: block; }
.nav-container .nav-box{ width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(1,auto); gap: 0; font-size: 1.6rem; line-height: 1.8; color: #1F1F1F; }
.nav-container .nav-box .tit{ font-weight: bold; margin: 0 0 5px 0; }
.nav-container .nav-box .interval_above{ margin: 30px 0 0 0; }
.nav-container .nav-box .tit{ height: 50px; border: 1px solid #B7B7B7; border-width: 1px 0 1px 0; display: flex; justify-content: space-between; align-items: center; margin: -1px 0 0 0; }
.nav-container .nav-box .tit.noborder{ border-width: 1px 0 0 0; }
.nav-container .nav-box .tit.drop.mobilespace{ margin: 0 0 -1px 0; }
.nav-container .nav-box .tit.drop:after{ content: '\e90b'; }
.nav-container .nav-box .tit.drop.active:after{ content: '\e90a'; }
.nav-container a{ transition: all .8s cubic-bezier(.23,1,.32,1); }
.nav-container a:hover{ color: #f28040; }
.nav-container .nav-box .mobilespace{ margin: 0 0 15px 0; }
.nav-container .subnav-box{ display: none; margin: 15px 0 0 0; }
header .social-nav{ display: none; }

/* idx kv */
.idx-kv{ color: #fff; overflow: hidden; padding: 0 0 0 0; margin: 60px 0 0 0; position: relative; padding: 0 0 260px; }
.idxkv-list{ }
.idxkv-list li a:focus{ outline: none; }
.idxkv-list .pcimg{ display: none;  }
.idxkv-list .mobileimg{ display: block;  }
.idxkv-list .idxkvbg.pcimg{ display: none;  }
.idxkv-list .idxkvbg.mobileimg{ display: block;  }
.idxkv-list li{ width: 100%; aspect-ratio: 390/390; position: relative; }
.idxkv-list .img-box{ width: 100%; height: 100%; overflow: hidden; position: relative;  }
.idxkv-list .img-box img{ width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.idxkv-list .img-box a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idxkv-bottom{ width: 100%; min-height: 280px;position: absolute; bottom: -260px; color: #1f1f1f; background: none;  }
.idxkv-bottom .bg-box{ width: 100%; height: 20px; overflow: hidden; }
.idxkv-bottom .bg-box img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; line-height: 0; }
.idxkv-bottom .bottom-txt{ width: 100%; box-sizing: border-box; padding: 40px 10px 10px 20px; background: #fff; }
.idxkv-tit{ display: flex; align-items: end;  margin: 0 0 10px 0; }
.idxkv-tit .tit{ font-family: "Note Sans TC"; font-weight: 600; font-size: 3.2rem; line-height: 1; margin: 0 10px 0 0; }
.idxkv-tit .subtit{ font-size: 3rem; line-height: 1.2; font-weight: bold; }
.idxkv-txt{ display: flex; flex-direction: column; align-items: center; font-size: 1.8rem; line-height: 1.58; color: #1f1f1f;  }
.idxkv-txt .txt-box{ text-align:left; margin: 0 15px 0 0; }
.idxkv-txt .txt-box .hightlight{ color: #069947; }
.idxkv-txt .txt-box .weightbold{ font-weight: bold; }
.idxkv-txt .more{ width: fit-content; height: 50px; border-radius: 5px; border: 1px solid #E27830; font-size: 1.8rem; color: #E27830; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; transition: all .4s cubic-bezier(.23,1,.32,1); margin: 10px 0 0 0;  }
.idxkv-txt .more:hover{ background: #f28110; color: #fff; }
/* slick */
.idx-kv .dots-list{ display: flex; align-items: center; justify-content: center; height: 50px; width: 100%; position: absolute; bottom: 220px; }
.idx-kv .dots-list .slick-dots{ display: flex; justify-content: end; gap: 20px;  }
.idx-kv .dots-list li{ width: 10px; height: 10px; border-radius: 100%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.idx-kv .dots-list li.slick-active{ background: #069947;  }
.idx-kv .slick-list { overflow: unset; }

/* h3 tit */
h3.idxtit{ font-size: 4rem; line-height: 1.5; font-weight: 300; color: #1F1F1F; text-align: center; margin: 15px 0 15px 0; }
h3.tit{ font-size: 3rem; line-height: 1.5; font-weight: 300; color: #1C8065; text-align: center; margin: 15px auto 20px auto; max-width: 90vw;  }

/* idx bg */
.idxbg{ width: 100%; height: 60px; overflow: hidden; background: none; position: relative;  }
.idxbg img{ width: 180%; height: 100%; object-fit: cover; object-position: right top; }
.idx-news .idxbg{ margin: -30px 0 -10px 0; }
.idx-focus .idxbg{ margin: -30px 0 -30px 0; background: #fff; }
.idx-award .idxbg{ margin: 0 0 -30px 0; }
.footer-bg .idxbg{ margin: -55px 0 0 0; }
.footer-bg img{ width: 100%; }
.footer-bg .idxbg{ margin: -20px 0 0 0; }
footer .idxbg{ margin: -80px 0 0 0; }

/* idx sdgs */
.idx-sdgs { width: var(--marquee-width); height: var(--marquee-height); background: linear-gradient(to bottom, #CAF8F3,#FDFFE0); overflow: hidden; position: relative; max-width:100%; }
.idx-sdgs ul.marquee-content { display: flex; animation: scrolling var(--marquee-animation-duration) linear infinite; padding-top: 45px; position: absolute; z-index: 10; }
.idx-sdgs ul.marquee-content li { width: calc(var(--marquee-element-width) - 50px); display: block;  height: fit-content; background: rgba(255, 255, 255, .8); border-radius:15px 15px 15px 0; padding: 40px 15px 30px 15px; font-size: 1.6rem; line-height: 1.5; position:relative; box-sizing: border-box; margin: 0 25px; transition: all 0.2s ease; }
.idx-sdgs ul.marquee-content li span { font-size: 1.5em; }
.idx-sdgs ul.marquee-content li:after { content: ""; width: 0;; height: 0; border-style: solid; border-width: 25px 25px 0 0; border-color: rgba(255, 255, 255, .8) transparent transparent transparent; left: 0; bottom: -25px; position: absolute; }
.idx-sdgs ul.marquee-content li .tag { width: 100px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius:15px 0 ; color: #fff; position: absolute; top: 0; left: 0; font-size: 1.4rem; }
.idx-sdgs ul.marquee-content li.sdg-e span { color: #069947; }
.idx-sdgs ul.marquee-content li.sdg-e .tag { background: #069947; }
.idx-sdgs ul.marquee-content li.sdg-s span { color: #F28101; }
.idx-sdgs ul.marquee-content li.sdg-s .tag { background: #F28101; }
.idx-sdgs ul.marquee-content li.sdg-g span { color: #E70012; }
.idx-sdgs ul.marquee-content li.sdg-g .tag { background: #E70012; }
.idx-sdgs ul.marquee-content li.Mt40 { margin-top: 40px; }
.idx-sdgs ul.marquee-content li.Mt80 { margin-top: 80px; }
.idx-sdgs ul.marquee-content li:hover { transform: translateY(-10px); }
.idx-sdgs ul.marquee-content:hover { animation-play-state: paused; cursor:pointer;}
:root {
  --marquee-width: 100vw;
  --marquee-height: 460px;
  --marquee-elements-displayed: 1.5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
}
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.idx-sdgs .sdgs-bg { width: 120vw; height: 38%; position: absolute; display:flex ; justify-content: center; left: 10vw;  bottom: -50px;}
.idx-sdgs .sdgs-bg div { width: 100%; height: 100%; }
.idx-sdgs .sdgs-bg img { width: 100%; }

/* idx news */
.idx-news{ box-sizing: border-box; padding: 0px 0 150px 0; position: relative; }
.idxnews-list{ width: 90vw; display: grid; grid-template-columns: repeat(1,1fr); gap: 15px; margin: 0 auto 0 auto; }
.idxnews-list li{ display: flex; flex-direction: column; box-sizing: border-box; margin: 10px 0 0 0; height: auto; position: relative; }
.idxnews-list li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idxnews-list li.color01{ background: #e2f8f0; }
.idxnews-list li.color02{ background: #FFE9D0; }
.idxnews-list li .col-1{ aspect-ratio: 1 / 1; order: 1; }
.idxnews-list li .col-2{ display: flex; flex-direction: column; justify-content: start; order: 2; }
.idxnews-list .img-box{ line-height: 0; overflow: hidden; width: 100%; height: 100%; }
.idxnews-list .img-box img{ width: 100%; height: 100%; object-fit: cover; transition: all 1s cubic-bezier(.23,1,.32,1); }
.idxnews-list .txt-box{ width: 100%; height: 100%; min-height: 120px; font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; display: flex; flex-direction: column; justify-content: start; align-items: flex-start; box-sizing: border-box; padding: 20px 20px 50px 20px; position: relative;   }
.idxnews-list .txt-box p{ transition: all .6s cubic-bezier(.23,1,.32,1); }
.idxnews-list .tit{ font-size: 1.6rem; font-weight: bold; color: #fff; box-sizing: border-box; padding: 0 0 0 20px; display: flex; align-items: center; margin: 0 0 10px 0; width: 100%; height: 40px; flex-shrink: 0; background: linear-gradient(90deg, rgba(219,115,44,1) 0%, rgba(254,233,208,1) 100%); }
.idxnews-list .txt-box a{ position: absolute; right: 20px; bottom: 20px; font-size: 1.2rem; display: flex; align-items: center; transition: all .4s cubic-bezier(.23,1,.32,1); }
.idxnews-list .txt-box a:after{ content: '\e913'; margin: 0 0 0 3px; transition: all .4s cubic-bezier(.23,1,.32,1); position: static; }
.idxnews-list .color01 a{ color: #069947; }
.idxnews-list .color02 a{ color: #DB732C; }

/* idx focus */
.idx-focus{ box-sizing: border-box; padding: 0 0 20px 0; background: #f2e2db; position: relative; }
.idxfocus-box{ width: 90vw; margin: 30px auto 0; position: relative; }
.idxfocus-list{ display: grid; grid-template-columns: repeat(1,1fr); gap: 20px; }
.idxfocus-list li{ box-sizing: border-box; padding: 20px 20px 30px 20px; display: flex; flex-direction: column; align-items: center;  position: relative; border: 1px solid #fff; transition: all .8s cubic-bezier(.23,1,.32,1);  }
.idxfocus-list li:hover{ background: #fff; }
.idxfocus-list .img-box{ width: 100%; aspect-ratio: 1000 / 629; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, .16); }
.idxfocus-list .img-box img{ width: 100%; height: 100%; object-fit: cover; transition: all .8s cubic-bezier(.23,1,.32,1);  }
.idxfocus-list li:hover .img-box img{ transform: scale(1.2); }
.idxfocus-list .txt-box{ font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; text-align: center; margin: 20px 0 0 0; }
.idxfocus-list .txt-box .tit{ font-size: 2rem; font-weight: bold; line-height: 1.5; color: #DB732C; margin: 0 0 5px 0; }
.idxfocus-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idxcolorbg{ width: 90%; position: absolute; left: 50%; top: -100px; transform: translateX(-50%); overflow: hidden;  }
.idxcolorbg img{ width: 100%; }

/* idx award */
.idx-award{ width: 100vw; height:500px; position: relative; background: #c8f0e9; display: flex; flex-direction: column; justify-content: space-between; overflow-x: hidden;   }
.idx-award img{ width: 100%; object-fit: cover;  }
.idx-award .txt-box{ width: 90%; box-sizing: border-box; padding: 0px 0px 0px 0px; font-size: 1.4rem; line-height: 1.5; color: #1F1F1F; position: absolute; left: 20px; top: 70px;  }
.idx-award .tit{ font-size: 3.6rem; line-height: 1.2; font-weight: 300; margin: 5px 0 10px 0;  }
.idx-award .subtit{ font-size: 2rem; line-height: 1.2;  }


/* ---------------------------- kv ---------------------------- */
/* .kv-container{ color: #fff; overflow: hidden; padding: 0 0 0 0; margin: 80px 0 0px 0; position: relative; } */

.kv-container{width: 100%; aspect-ratio: 2560/1000; margin: 80px 0 0 0; position: relative; }
.kv-container .img-box{ width: 100%; height: 100%; overflow: hidden; }
.kv-container .img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: bottom center; }


.kv-container .pcimg{ display: block;  }
.kv-container .mobileimg{ display: none;  }
.kv-container .idxkvbg.pcimg{ display: block;  }
.kv-container .idxkvbg.mobileimg{ display: none;  }
.kv-container li{ width: 100%; aspect-ratio: 2560/1000; max-height: 1000px; position: relative; }
.kv-container li>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* .kv-container .img-box{ width: 100%; height: 100%; overflow: hidden;  }
.kv-container .img-box img{ width: 100%; height: 100%; object-fit: contain; object-position: bottom center; } */
.kv-bottom{ width: 100%; height: auto; position: absolute; bottom: -10px; color: #1f1f1f; background: none;  }
.kv-bottom .bg-box{ width: 100%; height: 20px; overflow: hidden; }
.kv-bottom .bg-box img{ display: block; width: 180%; height: 100%; object-fit: cover; object-position: center top; line-height: 0; }
.kv-bottom .bottom-txt{ width: 100%; max-width: 1200px; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); }


/* ---------------------------- common ---------------------------- */
.common-container{ box-sizing: border-box; padding: 0px 0 30px 0; position: relative; }
/* common-box */
.common-box h5{ display: flex; justify-content: center; align-items: center; font-size: 2.4rem; font-weight: normal; line-height: 1.5; color: #649D47; margin: 0 0 20px 0; }
.common-box h5:before{ content: ''; width: 10px; height: 10px; background: #649D47; margin: 0 20px 0 0; }
.common-box h5:after{ content: ''; width: 10px; height: 10px; background: #649D47; margin: 0 0 0 20px; }
.common-box{ width: 90vw; margin: 20px auto 0; font-size: 1.4rem; line-height: 1.5; color: #000; }
.common-box .tit{ font-size: 2rem; line-height: 1.5; color: #218E67; margin: 0 0 5px 0; }
.common-box .subtit{ font-size: 1.6rem; line-height: 1.5; font-weight: bold; color: #F28101; margin: 0 0 5px 0; }
.common-box .img-box{ margin: 10px 0 20px 0; }
.common-box .img-box img{ width: 100%; border-radius: 10px; }
.common-box .img-box img+img{ margin: 2% 0 0 0; }
.common-box .img-box2 img{ width: 100%; border-radius: 10px; }
.common-box .img-box2 img+img{ margin: 2% 0 0 0; }
.common-box h5:nth-of-type(n+2){ margin: 40px 0 20px 0; }
.common-box .img-box.oneimg img{ width: 100%; border-radius: 0; }
.common-box .img-box.oneimg img{ width: 100%; margin:auto; border-radius: 0; }
.common-box .img-box.oneimg small { color: gray; }
.common-box p a { color: #069947; text-decoration: underline; }


/* ---------------------------- news ---------------------------- */
.news-container{ box-sizing: border-box; padding: 0px 0 80px 0; position: relative; }
.news-container.detail{ padding: 90px 0 50px 0; }
.news-list{ width: 90vw; display: grid; grid-template-columns: repeat(1,1fr); gap: 20px; margin: 0 auto; }
.news-list li{ display: flex; flex-direction: column; box-sizing: border-box; position: relative; }
.news-list li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.news-list li .col-1{ aspect-ratio: 1 / 1; border: 1px solid #B7B7B7;  }
.news-list li .col-2{ display: flex; flex-direction: column; justify-content: start;  }
.news-list .img-box{ line-height: 0; overflow: hidden; width: 100%; height: 100%; }
.news-list .img-box img{ width: 100%; transition: all 1s cubic-bezier(.23,1,.32,1); }
.news-list .txt-box{ width: 100%; height: 100%; font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding: 20px 10px 20px 10px; position: relative;   }
.news-list .txt-box p{ transition: all .6s cubic-bezier(.23,1,.32,1); }
.news-list .tit{ font-size: 1.6rem; font-weight: bold; color: #fff; box-sizing: border-box; padding: 0 0 0 20px; display: flex; align-items: center; margin: 0 0 10px 0; width: 100%; height: 40px; flex-shrink: 0; background: linear-gradient(90deg, rgba(219,115,44,1) 0%, rgba(254,233,208,1) 100%); }
.news-list .txt-box a{ width: 100%; font-size: 1.2rem; display: flex; justify-content: end; align-items: center; transition: all .4s cubic-bezier(.23,1,.32,1); margin: 20px 0 0 0; }
.news-list .txt-box a:after{ content: '\e913'; margin: 0 0 0 3px; transition: all .4s cubic-bezier(.23,1,.32,1); position: static; }
.news-list .txt-box a:hover:after{ animation:arrowani .8s infinite ; }
.news-list a{ color: #069947; }
.news-list a:hover{ color: #DB732C; }
.news-list li:hover .img-box img{ transform: scale(1.2); }
@-webkit-keyframes arrowani{
  0%,100%{  }
  50%{ transform: translateX(5px); }
}
/* gopage */
.go-page{ width: 90vw; display: flex; gap: 10px; justify-content: center; align-items: center; margin: 30px auto 0 auto; }
.go-page.newslist>li{ aspect-ratio: 1/1; width: 40px; border-radius: 5px; font-size: 1.4rem; color: #1f1f1f; transition: all .4s cubic-bezier(.23,1,.32,1); }
.go-page.newslist>li:hover,.go-page.newslist>li.active{ background: #e88643; color: #fff; }
.go-page.newslist>li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.go-page.newslist>li:first-child,.go-page.newslist>li:last-child{ border: 1px solid #F28003; color: #e88643; font-size: 2rem; }
.go-page.newslist>li:first-child:hover,.go-page.newslist>li:last-child:hover{ color: #fff; }
/*  gopage detail */
.go-page.detail{ gap: 10px; }
.go-page.detail>li{ width: fit-content ; height: 40px; border-radius: 5px; font-size: 1.8rem; color: #1f1f1f; transition: all .4s cubic-bezier(.23,1,.32,1); box-sizing: border-box; padding: 0 10px; border: 1px solid #F28003; color: #e88643; display: flex; justify-content: center; align-items: center;  }
.go-page.detail>li:hover{ background: #e88643; color: #fff; }
.go-page.detail>li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.go-page.detail>li:first-child,.go-page.detail>li:last-child{  }
.go-page.detail>li:first-child:before{ content: '\e915'; }
.go-page.detail>li:last-child:after{ content: '\e913'; }
/* detail */
.detail-box{ width: 90vw; margin: 0 auto; font-size: 1.4rem; line-height: 1.5; color: #000; box-sizing: border-box; padding: 0 0px 20px 0px; position: relative; }
.detail-main{ display: flex; flex-direction: column; }
.detail-header{ display: flex; align-items: center; font-size: 1.4rem; line-height: 1.5; margin: 0 0 10px 0;  color: #239068; }
.detail-header .icon{ display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 30px; box-sizing: border-box; padding: 0 10px; margin: 0 10px 0 0; }
.type1 .detail-header{ color: #B7656D; }
.type2 .detail-header{ color: #2E7C50; }
.type3 .detail-header{ color: #6EAD3F; }
.type4 .detail-header{ color: #ED9B40; }
.type5 .detail-header{ color: #FAE27B; }
.type1 .detail-header .icon{ background:#B7656D; color: #fff; }
.type2 .detail-header .icon{ background:#2E7C50; color: #fff; }
.type3 .detail-header .icon{ background:#6EAD3F; color: #fff; }
.type4 .detail-header .icon{ background:#ED9B40; color: #fff; }
.type5 .detail-header .icon{ background:#FAE27B; color: #000; }
.detail-box .tit{ font-size: 1.8rem; line-height: 1.5; font-weight: bold; }
.detail-box .tit:after{ content:'';  display: block; margin: 20px 0 20px; }
.detail-box.type1 .tit:after{ border-bottom: 1px solid #B7656D; }
.detail-box.type2 .tit:after{ border-bottom: 1px solid #2E7C50; }
.detail-box.type3 .tit:after{ border-bottom: 1px solid #6EAD3F; }
.detail-box.type4 .tit:after{ border-bottom: 1px solid #ED9B40; }
.detail-box.type5 .tit:after{ border-bottom: 1px solid #FAE27B; }
.detail-main .col-1{ display: flex; flex-direction: column; line-height: 0; }
.detail-main .col-1 img{ width: 100%; }
.detail-main .col-1 img+img{ margin: 20px 0 20px 0;  }
.detail-main .col-2{ box-sizing: border-box; padding: 0 0 0 0px; flex-grow: 0; }


/* ---------------------------- sdgs ---------------------------- */
/* sdgskv */
.sdgskv-container{width: 100%; aspect-ratio: 2560/1000; margin: 80px 0 0 0; position: relative; }
.sdgskv-container .img-box{ width: 100%; height: 100%; overflow: hidden; }
.sdgskv-container .img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: bottom center; }
.sdgskv-container .kv-tit{ font-size: 2.4rem; line-height: 1.38; color: #fff; text-shadow: 3px 3px 10px rgba(0,0,0,.5); position: absolute; top: 40%; left: 18%; transform: translate(-50%, -50%); text-align: right; }
/* sdgs-box */
.sdgs-container{  }
.sdgs-box{   }
.sdgs-box.box01{ background: #b7656d; }
.sdgs-box.box02{ background: linear-gradient( rgba(254,214,218,1)70%, rgba(254,214,218,.3) 100%);  }
.sustainable .sdgs-box.box01{ background: #2E7C50; }
.sustainable .sdgs-box.box02{ background: linear-gradient( #B6DEB6 70%, #DDE0DD 100%);  }
.earth .sdgs-box.box01{ background: #6EAD3F; }
.earth .sdgs-box.box02{ background: linear-gradient( #EFFFBA 70%, #DCE2C0 100%);  }
.staff .sdgs-box.box01{ background: #ED9B40; }
.staff .sdgs-box.box02{ background: linear-gradient( #FFD2A0 70%, #FFE9D0 100%);  }
.social .sdgs-box.box01{ background: #FAE27B; }
.social .sdgs-box.box02{ background: linear-gradient( #FFF8DB 70%, #FCEEA8 100%);  }
.sdgs-box.box04{ padding: 15px 0 0 0; }
.sdgs-box.box01 .box-main>.tit{ color: #fff; }
.social .sdgs-box.box01 .box-main>.tit{ color: #1F1F1F; }
.sdgs-box.box02 .box-main>.tit{ text-align:center; margin: 60px 0 20px 0; }
.sdgs-box .box-main{ width: 90vw; margin: 0 auto; box-sizing: border-box; padding: 20px 0 20px 0; position: relative;  }
.sdgs-box.box01 .box-main{ padding: 15px 0 60px 0;  }
.sdgs-box.box02 .box-main{ width: 100vw;  }
.sdgs-box .box-main>.tit{ font-size: 3rem; line-height: 1.5; font-weight: 300; color: #1F1F1F; text-align: center; margin: 15px 0 20px 0; }
.sdgs-box .info-txt{ font-size: 1.8rem; line-height: 1.58; color: #fff; margin: 0 0 20px 0; }
.social .sdgs-box .info-txt{ color: #1F1F1F; }
/* data-list */
.sdgs-box .data-list{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(350px, 1fr)); text-align: center; }
.sdgs-box .data-list li{ aspect-ratio: 350/250; background: #fff; font-size: 20px; color: #5a5a5a; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 3px 10px rgba(0,0,0,.4); margin: 0 10px; }
.sdgs-box .data-list .sdgs-icon{ width: 60px; }
.sdgs-box .data-list .sdgs-icon img{ width: 100%; }
.sdgs-box .data-list .data{ font-size: 3rem; margin: 5px 0 10px 0; }
.sdgs-box .data-list .data.data02{ color: #DDA63A; }
.sdgs-box .data-list .data.data03{ color: #4C9F38; }
.sdgs-box .data-list .data.data04{ color: #c5192d; }
.sdgs-box .data-list .data.data08{ color: #a21942; }
.sdgs-box .data-list .data.data11{ color: #FD9D24; } 
.sdgs-box .data-list .data.data12{ color: #BE8B2E; }
.sdgs-box .data-list .data.data13{ color: #3F7E44; }
.sdgs-box .data-list .data.data15{ color: #40ae49; }
.sdgs-box .data-list .hightlight{ font-size: 4.5rem; }
/* column-list */
.sdgs-box .column-list{ display: grid; gap: 40px; grid-template-columns: repeat(auto-fit,minmax(300px, 1fr)); justify-content: center; color: #1f1f1f;  }
.sdgs-box .column-list li{ position: relative; margin: 0 10px;  }
.sdgs-box .column-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.sdgs-box .column-list .img-box{ aspect-ratio: 300/180; overflow: hidden; position: relative; margin: 0 0 20px 0; box-shadow: 2px 2px 10px rgba(0,0,0,.35) ; }
.sdgs-box .column-list .img-box img{ width: 100%; height: 100%; object-fit: cover; }
.sdgs-box .column-list .txt-box{ font-size: 1.6rem; line-height: 1.58;  }
.sdgs-box .column-list .txt_tit{ font-size: 2rem; font-weight: bold; }
/* document-list */
.sdgs-box .document-list{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(325px, 1fr)); justify-content: center; margin: 0 0 40px 0; }
.sdgs-box .document-list>li{ height: 70px; border: 1px solid #FAA94F; display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem; line-height: 1.58; color: #1f1f1f; box-sizing: border-box; padding: 0 15px 0 20px; position: relative; }
.sdgs-box .document-list>li:after{ content: '\e913'; font-size: 2.4rem; color: #faa94f;  }
.sdgs-box .document-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0;  }
.sdgs-box .document-list>li p{ display: flex; align-items: center; }
.sdgs-box .document-list>li span{ font-size: 4rem; color: #faa94f; margin: 0 20px 0 0; }
/* theme-box */
.sdgs-box .theme-box{  display: flex; position: relative;}
.sdgs-box .slider-box{ position: relative; }
.sdgs-box .theme-list li{ display: flex; flex-direction: column; box-sizing: border-box; padding: 0 0 20px 0; position: relative; }
.sdgs-box .theme-list li a{ display: block; width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; z-index: 1; }
.sdgs-box .theme-list .col-1{ z-index: 1; position: relative; }
.sdgs-box .theme-list .col-2{ display: flex; align-items: end; margin: 0 0 -20px -100px; }
.sdgs-box .theme-list .txt-box{ width: 100%; height: auto; background: #b7656d; box-sizing: border-box; padding: 40px 20px 30px 30px; font-size: 1.8rem; line-height: 1.58; color: #fff; margin: -30px 0 0 26%; }
.sdgs-box .theme-list .txt-box .subtit{ font-size: 2.4rem; font-weight: bold;  }
.sdgs-box .theme-list .colorborder{ width: 100px; height: 100px; background: #b7656d; position: absolute; left: 0; top: 0; z-index: -1; }
.sustainable .sdgs-box .theme-list .txt-box{ background: #2E7C50; }
.sustainable .sdgs-box .theme-list .colorborder{ background: #2E7C50; }
.earth .sdgs-box .theme-list .txt-box{ background: #6EAD3F; }
.earth .sdgs-box .theme-list .colorborder{ background: #6EAD3F; }
.staff .sdgs-box .theme-list .txt-box{ background: #ED9B40; }
.staff .sdgs-box .theme-list .colorborder{ background: #ED9B40; }
.social .sdgs-box .theme-list .txt-box{ background: #FAE27B; color:#1f1f1f; }
.social .sdgs-box .theme-list .colorborder{ background: #FAE27B; }
.sdgs-box .theme-list .col-1 img{ width: 95%; margin: 10px 0 0 10px; }
/* .sdgs-box .slider-arrow{ display: flex; justify-content: center; align-items: center; color: #1f1f1f; gap: 10px; position: absolute; right: 0; bottom: 250px; } */
.sdgs-box .slider-arrow{ display: flex; justify-content: center; align-items: center; color: #1f1f1f; gap: 10px; margin: 20px 0 0 0;  }
.sdgs-box .slider-arrow>li{ display: flex; justify-content: center; align-items: center; font-size: 3rem; width: 60px; height: 60px; border-radius: 100%; border: 1px solid #1F1F1F; }
.sdgs-box .bg-box{ line-height: 0; }
.sdgs-box .bg-box img{ width: 100%; }
.sdgs-box.box02 .bg-box{ margin: -150px 0 0 0; }
.sdgs-box.box03 .bg-box{ overflow: hidden; }
.sdgs-box.box03 .bg-box img{ width: 200%; }
/* .sdgs-box.box03 .bg-box{ margin: -80px 0 -380px 0; } */
.sdgs-box.box03 .bg-box{ margin: 0px 0 -200px 0; }
.sdgs-box .bg-city{ display: flex; justify-content: end; box-sizing: border-box; padding: 0 0 0 0; }
.sdgs-box .bg-city img{ width: 100%; }
/* slick dots */
.sdgs-box .dots-list{ position: relative; margin: 20px 0 0 0; }
.sdgs-box .slick-dots{ display: flex; justify-content: center; gap: 10px; }
.sdgs-box .slick-dots li{ width: 16px; height: 16px; border-radius: 100%; background: #B7B7B7; border: 1px solid #fff; text-indent: -9999px; cursor: pointer; }
.sdgs-box .slick-dots li.slick-active{ background: #FCB86C; }

/* footer */
footer{ height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 30px 0 30px 0; color: #1f1f1f; }
.footer-box{ width: 90vw; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
.footer-box h3{ line-height: 0; margin: 0 0 30px 0; }
.footer-box h3 img{ width: 200px; }
.footer-box>.col-1{ width: 100%; font-size: 1.4rem; line-height: 1.58; order: 2; }
.footer-box>.col-2{ width: 100%; order: 1;  }
.footer-box .social-nav{ display: flex; gap: 60px; font-size: 2rem; margin: 0 0 20px 20px; }
.footer-box h5{ font-size: 1.2rem; font-weight: normal; }
.footer-box .nav-box{ width: 100%; display: grid; grid-template-columns: repeat(1,auto); gap: 0; font-size: 1.6rem; line-height: 1.8; color: #1F1F1F; margin: 10px 0 30px 0; }
.footer-box .nav-box .tit{ font-weight: bold; margin: 0 0 5px 0; }
.footer-box .nav-box .interval_above{ margin: 30px 0 0 0; }
.footer-box .nav-box .tit{ height: 50px; border: 1px solid #B7B7B7; border-width: 1px 0 1px 0; display: flex; justify-content: space-between; align-items: center; margin: -1px 0 0 0; }
.footer-box .nav-box .tit.noborder{ border-width: 1px 0 0 0; }
.footer-box .nav-box .tit.drop.mobilespace{ margin: 0 0 -1px 0; }
.footer-box .nav-box .tit.drop:after{ content: '\e90b'; }
.footer-box .nav-box .tit.drop.active:after{ content: '\e90a'; }
.footer-box a{ transition: all .8s cubic-bezier(.23,1,.32,1); }
.footer-box a:hover{ color: #f28040; }
.footer-box .nav-box .mobilespace{ margin: 0 0 15px 0; }
.footer-box .subnav-box{ display: none; margin: 15px 0 0 0; }
/* footer-nav */
.footer-nav{ display: flex; flex-wrap: wrap; margin: 0 0 10px 0;  }
.footer-nav li{ font-size: 1.4rem;}
.footer-nav li a{ transition: all .4s cubic-bezier(.23,1,.32,1); }
.footer-nav li a:hover{ color: #069947; }
.footer-nav li+li:before{ content: "|"; margin: 0 15px; line-height: 10px; }

/* gototop */
.gototop{ display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 5px; background: #449F87; box-shadow: 0 3px 6px rgba(0,0,0,.35) ; font-size: 1.6rem; color: #fff; position: fixed; bottom: 2vw; right: 2vw; cursor: pointer; transition: all .8s cubic-bezier(.23,1,.32,1); z-index: 999;  }
.gototop:after{ content: '\e933';  }
.gototop:hover{ background: #f28040; }

/* 細部設定 */
.W\(100%\) { width: 100%; }
.Ta\(c\) { text-align: center; }
.Fz\(16px\) { font-size: 16px; }
.C\(\#f28110\) { color: #f28110; }
.C\(\#ff717b\) { color: #ff717b; }  

/* font style */
.fontbold{ font-weight: bold; }

/* breadcrumb */
.breadcrumb { width: 90vw; font-size: 1.6rem; color: rgba(0, 0, 0, 0.5);   margin: 20px auto 0; }

.sdgs-box .breadcrumb{ margin: 0 auto 0 auto; color: #fff; padding: 20px 0 0 0; }
.social .breadcrumb{ color: #1F1F1F; }

/* tit */
.txt_tit{ font-size: 1.6rem; line-height: 1.58; font-weight: bold; margin: 0 0 10px 0; }

/* =================================     influence     ================================= */
.influence-box{ width: 100%; margin: 50px auto 0; font-size: 1.4rem; line-height: 1.5;  }
.influence-box>li{ display: flex; flex-direction: column; position: relative; box-sizing: border-box; padding: 0 0 30px 0; }
.influence-box h4{ font-size: 2rem; text-align: center; line-height: 1;  margin: -10px 15px 20px 0; font-weight: normal;   }
.influence-year{ display: flex; align-items: start; }
.influence-list{ width: 100%; list-style: disc; position: relative; }
.influence-list:before{ content: ''; width: 1px; height: calc(100% - 20px); background: #000; position: absolute; left: 0; top: 0; transform: translate(-50%,20px); }
.influence-list:after{ content: ''; width: 12px; height: 12px; background: #000; position: absolute; left: 0px; top: 0; transform: translate(-50%,-20%) rotate(45deg); }
.influence-list li{ position: relative; box-sizing: border-box; padding: 0 0 0 0; margin: 0 0 0 30px;   }
.influence-list li a{ display: block; line-height: 1.58; }
.influence-list li+li{ margin: 10px 0 0 30px; }
.influence .btn_link{ font-size: 2.4rem; line-height: 1.58; box-sizing: border-box; color: #DB732C; position: relative; }

/* color set */
/* 2024 */
.color2024 h4{ color: #F28101; }
.color2024 .influence-list:before{ background: #F28101; }
.color2024 .influence-list:after{ background: #F28101; }
.color2024 .influence-list li:hover{ color: #F28101; }
/* 2023 */
.color2023 h4{ color: #FFC936; }
.color2023 .influence-list:before{ background: #FFC936; }
.color2023 .influence-list:after{ background: #FFC936; }
.color2023 .influence-list li:hover{ color: #FFC936; }
/* 2022 */
.color2022 h4{ color: #069947; }
.color2022 .influence-list:before{ background: #069947; }
.color2022 .influence-list:after{ background: #069947; }
.color2022 .influence-list li:hover{ color: #069947; }
/* 2021 */
.color2021 h4{ color: #d30010; }
.color2021 .influence-list:before{ background: #d30010; }
.color2021 .influence-list:after{ background: #d30010; }
.color2021 .influence-list li:hover{ color: #d30010; }
/* 2020 */
.color2020 h4{ color: #E70012; }
.color2020 .influence-list:before{ background: #E70012; }
.color2020 .influence-list:after{ background: #E70012; }
.color2020 .influence-list li:hover{ color: #E70012; }
/* 2019 */
.color2019 h4{ color: #F75763; }
.color2019 .influence-list:before{ background: #F75763; }
.color2019 .influence-list:after{ background: #F75763; }
.color2019 .influence-list li:hover{ color: #F75763; }
/* 2018 */
.color2018 h4{ color: #F58B82; }
.color2018 .influence-list:before{ background: #F58B82; }
.color2018 .influence-list:after{ background: #F58B82; }
.color2018 .influence-list li:hover{ color: #F58B82; }
/* 2017 */
.color2017 h4{ color: #F28101; }
.color2017 .influence-list:before{ background: #F28101; }
.color2017 .influence-list:after{ background: #F28101; }
.color2017 .influence-list li:hover{ color: #F28101; }
/* 2016 */
.color2016 h4{ color: #FAA94F; }
.color2016 .influence-list:before{ background:#FAA94F; }
.color2016 .influence-list:after{ background:#FAA94F; }
.color2016 .influence-list li:hover{ color:#FAA94F; }
/* 2015 */
.color2015 h4{ color: #FFC936; }
.color2015 .influence-list:before{ background: #FFC936; }
.color2015 .influence-list:after{ background: #FFC936; }
.color2015 .influence-list li:hover{ color: #FFC936; }
/* 2014 */
.color2014 h4{ color: #069947; }
.color2014 .influence-list:before{ background: #069947; }
.color2014 .influence-list:after{ background: #069947; }
.color2014 .influence-list li:hover{ color: #069947; }

/* =================================     employee    ================================= */
.employee .has4col td:first-child{ width: 5%; text-align: center; }


/* =================================     biodiversity     ================================= */
.biodiversity .common-box{ width: 90vw; margin: 0 auto; }
.biodiversity a {color: #069947;text-decoration: underline;}
.biodiversity .subtit{ font-size: 1.8rem; color: #069947; }
.biodiversity .img-box img{ border-radius: 0; }
.biodiversity-container{ background: #fff; box-sizing: border-box; padding: 20px 3vw 30px 3vw; }
.biodiversity-container h3{ font-size: 3rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.biodiversity-container h3 .hightlight{ color: #f28110; }
.biodiversity-box{ width: 100%; max-width: 1200px; margin: 30px auto 0; font-size: 1.4rem; line-height: 1.5; color: #000; }
.biodiversity .preface-box{ margin: 0 auto; text-align: left; font-size: 1.4rem; line-height: 1.5; }
/* .biodiversity .preface-box .tit{ display: flex; align-items: center; font-size: 2.4rem; line-height: 1.5; color: #069947; font-weight: bold; margin: 0 0 20px 0; } */
/* .biodiversity .preface-box .tit:before{ content: ''; width: 5px; height: 40px; background: #069947; margin: 0 10px 0 0; } */
.biodiversity ul.chart1 { width:100%; display: flex; flex-wrap: wrap; list-style-type: none; margin-bottom: -10px;}
.biodiversity ul.chart1 li { width:100%; display: flex; flex-direction: column; align-items: center; border-radius: 20px; margin:0 0 10px 0; }
.biodiversity ul.chart1 li .stit {  width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 17px 17px 0 0; color: #fff; line-height: 1.4; font-weight: bold; }
.biodiversity ul.chart1 li p { padding: 10px; line-height: 1.5; }
.biodiversity ul.chart1 li p span { color: #f28110; }
.biodiversity ul.chart1 li:nth-child(1) { border: 3px solid #5C8632; }
.biodiversity ul.chart1 li:nth-child(1) .stit { background: #5C8632; }
.biodiversity ul.chart1 li:nth-child(2) { border: 3px solid #6D9D3D; }
.biodiversity ul.chart1 li:nth-child(2) .stit { background: #6D9D3D; }
.biodiversity ul.chart1 li:nth-child(3) { border: 3px solid #7FB548; }
.biodiversity ul.chart1 li:nth-child(3) .stit { background: #7FB548; }
.biodiversity ul.chart1 li:nth-child(4) { border: 3px solid #92C75B; }
.biodiversity ul.chart1 li:nth-child(4) .stit { background: #92C75B; }
.biodiversity ul.chart1 li:nth-child(5) { border: 3px solid #A5D870; }
.biodiversity ul.chart1 li:nth-child(5) .stit { background: #A5D870; }
.biodiversity ul.chart2 { width:100%; display: flex; flex-wrap: wrap; list-style-type: none;}
.biodiversity ul.chart2 li { width:calc(100% / 2 - 10px); height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 20px; margin:0 10px 10px 0; position: relative; }
.biodiversity ul.chart2 li p { padding: 10px; line-height: 1.5; text-align: center; color: #fff; font-weight: bold; padding-right: 20px;}
.biodiversity ul.chart2 li:nth-child(1) { background: #CB882D; }
.biodiversity ul.chart2 li:nth-child(2) { background: #E29731; }
.biodiversity ul.chart2 li:nth-child(3) { background: #EFA33C; }
.biodiversity ul.chart2 li:nth-child(4) { background: #EFB13C; }
.biodiversity ul.chart2 li:nth-child(5) { background: #EFBF3C; margin: 0 0 10px; padding-right: 0;}
.biodiversity ul.chart2 li:after { content: ""; width: 15px; height: 60px; display: block; background: url('../images/biodiversity_chart2-arr.svg') no-repeat; position: absolute; right: 5px; }
.biodiversity ul.chart2 li:nth-child(5):after { display:none;}
.biodiversity .hightlight{ color: #F28101; }
.biodiversity table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.biodiversity table tr{ height: 40px; }
.biodiversity table td{ width: 45%; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; padding: 6px; }
.biodiversity table.table-1 thead td { background:#ed2526 ; color: #fff; }
.biodiversity table.table-1 thead td:nth-child(3) { background:#008062 ; }
.biodiversity table.table-1 td:first-child{ width: 10%; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; padding: 10px 15px 10px 15px;}
.biodiversity table.table-3 thead { font-weight: normal; background: #fff; text-align: left; }
.biodiversity table.table-3 td { width: 25%; }
.biodiversity table.table-3 td.title { font-weight: bold; background: #e6e6e6; text-align: center; }
.biodiversity table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.biodiversity table a{ color: #069947; text-decoration: underline; }
.biodiversity table span{ font-weight: bold; color: #f28110; }

/* =================================     effectiveuse     ================================= */
.effectiveuse-nav{ display: flex; flex-wrap: wrap; }
.effectiveuse-nav li {
    width: 48%;
    height: 84px;
    border-radius: 15px;
    border: 1px solid #FFD800;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.4rem;
    color: #f28110;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    transition: all .4s cubic-bezier(.23,1,.32,1);
    box-sizing: border-box;
    padding: 1%;
    /* padding: 10px 5px 10px; */
    margin: 1%;
}
.effectiveuse-nav li p{ line-height: 1.2; }
.effectiveuse-nav li span{ font-size: 5rem; margin: 0  0 10px 0; flex-shrink: 0;  flex-grow: 0; height: 40px; }
.effectiveuse-nav li .p-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60px; }
.effectiveuse-nav li.active,.effectiveuse-nav li:hover{ background: #ffd800; color: #000;  }
.effectiveuse-txt>div{ display: flex; flex-direction: column; align-items: flex-start; width: 100%; border-radius: 15px; border: 1px solid #FFD800; min-height: 120px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 15px 0 0 0;  }
.effectiveuse .note{ color: #7d7d7d; font-size: .85em; }
.effectiveuse .svg{ width: 90%; margin:10px auto 60px auto; }
.effectiveuse .hightlight{ color: #F28101; }
.effectiveuse .subtit{ font-size: 1.8rem; color: #069947; margin: 0 0 20px 0; }
.effectiveuse-txt.twocol-box{ justify-content: space-between; }
.effectiveuse .twocol-box.bottom_line {width: 100%; border-bottom: 2px dotted #ffd900; padding-bottom: 10px; margin-bottom: 10px;}
.effectiveuse-txt .twocol-box .col-1{ max-width: 320px; margin: 0 20px 0 0; }
.effectiveuse-txt .table{ width: 98%; margin: 10px 0 5px 0; }
.effectiveuse-txt .img-box{ margin: 10px 0 10px 0; }
.effectiveuse-txt .twocol-box .col-2 { width: 100%; margin: 0 0 20px 0; }
.effectiveuse table { width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.effectiveuse table tr{ height: 40px; }
.effectiveuse table td{ width: 45%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; padding: 5px; }
.effectiveuse table td:first-child{ width: 10%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0;}
/*.effectiveuse table tbody td:last-child{ text-align: left; box-sizing: border-box; padding: 5px 20px 5px 20px; border: 1px solid #D8D8D8; border-width: 0 1px 1px 1px; }*/
.effectiveuse table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.effectiveuse table a{ color: #069947; text-decoration: underline; }
.effectiveuse table span{ color: #ff0000; }
/*.effectiveuse table tbody tr:nth-child(even){ background: #f8f8f8;  }*/
.common-box #type02 a {
    color: #069947;
    text-decoration: underline;
}

/* =================================     climatechange     ================================= */
.climatechange-nav{ display: flex; }
.climatechange-nav li{ width: 32.5%; height: 60px; border-radius: 15px; border: 1px solid #FFD800; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: #f28110; font-weight: bold; position: relative; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1);  }
.climatechange-nav li+li{ margin: 0 0 0 1.5%; }
.climatechange-nav li span{ font-size: 3rem; margin: 0 5px 0 0;  }
.climatechange-nav li.active,.climatechange-nav li:hover{ background: #ffd800; color: #000;  }
.climatechange-nav li.active:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #FFD800 transparent transparent transparent; position: absolute; bottom: -15px; }
.climatechange-txt>div{ display: flex; flex-direction: column; align-items: flex-start; width: 100%; border-radius: 15px; border: 1px solid #FFD800; min-height: 80px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 15px 0 0 0;  }
.disc-list{ list-style: disc; margin: 0 0 0 25px;}
.disc-list.td{ list-style: disc; margin: 0 0 0 20px; }
.decimal-list{ list-style: decimal; margin: 0 0 0 25px; }
.climatechange .img-box{  width: 100%; margin:10px auto 40px auto; }
.climatechange .img-box.oneimg { flex-wrap: wrap; flex-direction: column; }
.climatechange .img-box.oneimg img{ width: 100%; display: block; margin: 0 auto; }
.climatechange .img-box.pic_type2{  width: fit-content; }
.quoteblock {  width: 82%;margin:50px auto 40px auto; }
.quote-y-pg{
  position: relative;
  width:100%;
  display: block;
  background: #ffd80024;
    border-radius: 1rem;
    padding: 1rem 0;
}
.quote-y {quotes: "[" "]" "‹" "›"; }
q:before {
    content: '';
    font-size: 20rem;
    color: #f4b201;
    float: left;
    position: absolute;
    left: -1.8rem;
    top: -40%;
    z-index: 1;
    /*transform: scaleY(1.2);
    opacity: .8;*/
}
q:after {
    content: '';
    font-size: 20rem;
    color: #f4b201;
    float: right;
    position: absolute;
    right: -1.5rem;
    top: -40%;
    z-index: 1;
}
.climate_result_img {text-align: center; margin:auto; padding:1rem 0;width: 100%;}
.climate_result_img img {width: 100%; border-radius:10px; }
.climate_result_img p{color:gray; font-weight: 500;margin-top:.6rem; letter-spacing: .6px;}
.climate table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; border-collapse:collapse; margin: 0 0 30px 0; }
.climate table tr{ height: 40px; }
.climate table td{ width: auto; text-align: center; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; }
.climate table td{ box-sizing: border-box; padding: 5px; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; }
.climate table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.climate table a{ color: #069947; text-decoration: underline; }

/* =================================     purchase     ================================= */
.purchase .subtit{ font-size: 1.8rem; color: #069947;}
.purchase table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.purchase table tr{ height: 40px; }
.purchase table td{ width: 25%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; padding:10px 5px;}
.purchase table td img{ width: 100%;}
.purchase table td:nth-child(2){ width: 30%; }
.purchase table td:first-child{ width: 15%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; font-weight: bold; }
.purchase table td:last-child{ text-align: center; box-sizing: border-box; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.purchase table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.purchase a{ color: #069947; text-decoration: underline; }
.purchase table tbody tr:nth-child(even){ background: #f8f8f8;  }
.purchase .twocol-box:nth-of-type(odd) .col-1{ order: 1;  }
.purchase .twocol-box:nth-of-type(odd) .col-2{ order: 2;  }
.purchase .twocol-box:nth-of-type(even) .col-1{ order: 2; }
.purchase .twocol-box:nth-of-type(even) .col-2{ order: 1;  }
.purchase.twocol-box .col-2{ margin: 0 0 0 0; }
.purchase .img-box{ margin:15px 0 15px 0; }
.purchase .note{ color: #777; }
.purchase .btn{ font-size: 1.4rem; color: #f28110; border-radius: 50px; border: 1px solid #F28101; text-decoration: none; box-sizing: border-box; padding: 0 20px; height: 50px; line-height: 50px;  margin: 0 0 20px;  }
.purchase .common-box .img-box.oneimg img{ width: 100%; }

/* =================================    commontable     ================================= */
.commontable table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse: collapse; margin: 10px 0 10px 0; }
.commontable table tr{ height: 40px; }
.commontable table td{  border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 10px 15px 10px 15px; }
.commontable table tbody td:last-child{  border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.commontable table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.commontable table a{ color: #069947; text-decoration: underline; }
.commontable table tbody tr:nth-child(even){ background: #f8f8f8;  }
.commontable table thead { font-weight: bold; background: #d3f7da; text-align: center; }
.commontable table tbody tr:nth-child(even){ background: #f8f8f8;  }
.commontable table tbody td:last-child{ border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.commontable .tdcenter td{ text-align: center; }
.commontable td.tdleft {text-align: left; }
.commontable td.tdcenter { text-align: center; }
.commontable .num-list{ list-style-type: decimal; margin: 0 0 0 20px; text-align: left; line-height: 2; }
.commontable .dot-list{ list-style-type: disc; margin: 0 0 0 20px; text-align: left; line-height: 2; }
.commontable .has3col td{ width: 33%;  }
.commontable .has4col td{ width: 25%;  }
.commontable .table-box{ overflow: scroll; }


/* =================================     fiscal     ================================= */
.fiscal .note{ color: gray; font-size: .85em;}


/* =================================     themes     ================================= */
.themes .note{ color: gray; font-size: .85em;}


/* =================================     supply     ================================= */
.supply .subtit{ font-size: 1.8rem; color: #069947  }
.supply .img-box{ margin: 0 0 5px  0; }
.supply .img-box.oneimg img{ width: 100%; display: block; margin: 0 auto; }
.supply .note{ color: #777; }
.supply a{ color: #069947; text-decoration: underline; }

/* =================================     health     ================================= */
.health .subtit{ font-size: 1.8rem; color: #069947;}
.health a{ color: #069947; text-decoration: underline; }
.health .img-box{ margin:15px 0 15px 0; }
.health .img-box.oneimg { margin:15px auto; }
.health .img-box.oneimg img { width:75%; }
.health .img-box.oneimg100 img { width:100%; }
.health .note{ color: #777; font-size: .85em; }

/* =================================     external      ================================= */
.external>a{ width: 100%; }
.external>a img{ width: 100%; }
.external table{ width: 100%; font-size: 1.2rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.external table tr{ height: 40px; }
.external table td{ text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 5px 5px 5px 5px; }
.external table.table01 td{ text-align: center; }
.external table.table01 td:first-child{ text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.external table.table02 td:first-child{ width: 10%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.external table.table02 tbody td{ text-align: left; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.external table.table02 th:first-child,.external table.table02 th:last-child{ width: 15%;  }
.external table.table02 td:first-child,.external table.table02 td:last-child{ width: 15%; text-align: left; }
.external table.table02 th:nth-child(2),.external table.table02 th:nth-child(3){ width: 35%; }
/* .external table.table02 tr td:last-child{ text-align: center; } */
.external table.table02 tr td:last-child{ text-align: left; }
.external table thead { font-weight: bold; background: #d3f7da; text-align: center; }
.external table tbody tr:nth-child(even){ background: #f8f8f8;  }
.external table tbody td:last-child{ border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.external table a{ color: #069947; text-decoration: underline; }
.external .img-box.oneimg {flex-direction: column; /*align-items: center;*/}
.external .img-box.oneimg p{ color: gray; font-weight: 500; margin-top: 0.6rem; letter-spacing: .6px; text-align: center;}
.external .listsquere{ list-style:square; margin: 20px 0 0 25px; }
.external ul { list-style: decimal; margin-left: 1em; } 
.external ul.ul02 { list-style: disc; } 

/* =================================     management      ================================= */
.management>a{ width: 100%; }
.management>a img{ width: 100%; }
.management table{ width: 100%; font-size: 1.2rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.management table tr{ height: 40px; }
.management table td{ text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 5px 5px 5px 5px; }
.management table.table01 td:first-child{ width: 18%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.management table.table01 td:nth-child(3){ text-align: center; }
.management table.table02 td:first-child{ width: 15%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.management table.table01 td:nth-child(2){ width: 64%; text-align: left; }
.management table.table02 td:nth-child(2){ width: 25%; text-align: left; }
.management table.table02 tbody td:nth-child(3){ width: 30%; text-align: left; }
.management table tbody td:last-child{ text-align: left;  border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.management table.table02 tbody td:last-child{ width: 30%;  }
.management table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.management table a{ color: #069947; text-decoration: underline; }
.management table tbody tr:nth-child(even){ background: #f8f8f8;  }
.management .img-box.oneimg {flex-direction: column; }
.management .img-box.oneimg p{ color:gray; font-weight: 500; margin: 0.6rem auto 0; letter-spacing: .6px; text-align: center; }
.management .listsquere{ list-style:square; margin: 20px 0 0 25px; }
.management .pic-note{ color: gray; margin:-30px 0 0 0; font-size: .85em;}
.management .note{ color: gray; font-size: .85em; }

/* =================================     csrpolicy     ================================= */
.csrpolicy{ width: 90vw; margin: 0 auto; }
.csrpolicy .subtit{ font-size: 1.8rem; color: #069947  }
.csrpolicy div.pdfdownload ul li:before { content: ''; display: inline-block; width: 30px; height: 30px; background: url(../images/icon_pdf.png) no-repeat center center / cover; margin-right: 0.5rem; transform: translateY(10px); }
.csrpolicy .pdfdownload{  }
.csrpolicy .pdfdownload ul { text-indent: -4rem;}
.csrpolicy .pdfdownload ul li{margin-bottom:1.8rem; }
.csrpolicy .pdfdownload { width: 86%; margin-left: 4rem;}
.csrpolicy .pdfdownload ul li a{text-indent: initial;}
.csrpolicy .pdfdownload ul li span{display: block;text-indent: initial;font-size:1.4rem;}
.csrpolicy a{ color: #069947; text-decoration: underline; }

/* =================================     subscription    ================================= */
.bt_orange {font-weight:bold; color: #f28110;}
.preface-box{ font-size: 1.6rem; line-height: 1.5; color: #000; text-align: center; margin: 0 0 30px; }
.qrcode-box{ display: flex; flex-direction: column; justify-content: center; width: 90%; margin: 0 auto;  }
.qrcode-box li{ display: flex; align-items: center; flex-direction: column;  /* width: 300px; */ border-radius: 30px; border: 2px solid #D8D8D8; font-size: 2rem; line-height: 1.5; font-weight: 600; box-sizing: border-box; padding: 15px 15px 15px 15px; position: relative; transition: all .4s cubic-bezier(.23,1,.32,1); }
.qrcode-box li:hover{ border-color: #FAA94F;  }
.qrcode-box li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.qrcode-box li+li{ margin: 20px 0 0 0; }
.qrcode-box li img{ display: block; width: 100%; margin: 10px 0 10px 0; }
.qrcode-box .more{ font-size: 1.2rem; line-height: 1.5; color: #faa94f; align-self: flex-end; }
.qrcode-box .more:after{ content: '\e913'; }

/* =================================     csrreports     ================================= */
.csrreports .note{ color: #7d7d7d; }
.csrreports .hightlight{ color: #F28101; }
.csrreports .subtit{ font-size: 1.8rem; color: #069947; margin: 0 0 20px 0; }
.csrreports .twocol-box{}
.csrreports .twocol-box+.twocol-box{ margin: 50px 0 0 0; }
.csrreports .twocol-box .col-1{ width: 60vw; margin: 0 auto; }
.csrreports .twocol-box .col-2{ width: 70vw; margin: 0 auto; }
.csrreports .subtit-box{ display: flex; flex-direction: column; align-items: center; }
.csrreports .download-type a{ text-decoration: none; color: #000; line-height: 1.5; margin-bottom: 0.6rem;}
.csrreports .download-type a:hover{ text-decoration: underline; }
.csrreports .langule{ display: flex; justify-content: space-between; align-items: center; width: 200px; height: 40px; border-radius: 10px; border: 1px solid #FFD800; overflow: hidden; margin: 0 0 15px 0; }
.csrreports .langule li{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; cursor: pointer;  }
.csrreports .langule li.notyet{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; cursor: pointer;  }
.csrreports .langule li.active{ background: #ffd800; }
.csrreports .download-btn{ display: flex; justify-content: center; align-items: center; width: 190px; height: 40px; border-radius: 50px; border: 1px solid #069947; color: #069947; position: relative; margin: 0 auto; }
.csrreports .download-btn p{ width: 70%; text-align: center; }
.csrreports .download-btn span{ font-size: 2rem; }
.csrreports .download-btn a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.csrreports .download-btn+.download-btn{ margin: 10px auto 0 auto; }
.csrreports .twotitle { margin-top: 0;}
.csrreports .old_reports { margin-top: 60px;}
.csrreports .old_reports .title { width: 280px; cursor: pointer; font-size: 2.2rem; font-weight: bold; color: #fff; background: #069947; border-radius: 20px; text-align: center; padding: 5px; margin: 0 auto; box-sizing: border-box; transition:.5s; display: flex; justify-content: center; align-items: center; line-height:1; padding: 10px;}
.csrreports .old_reports .title div { margin-right: 10px; }
.csrreports .old_reports .title small { font-size: .7em; }
.csrreports .old_reports.active .title { width: 100%; border-radius: 20px 20px 0 0 ; transition:.5s;}
.csrreports .old_reports .content { display: none; flex-wrap: wrap; justify-content: space-around; background: #fffef1; padding: 20px; border-radius: 0 0 20px 20px;  }

/* =================================     interactive     ================================= */
.interactive .common-box{ margin: 20px auto 30px; }
.startani{ position: relative; }
.startani .start_clound{ position: absolute; width: 130px; left: 140px; top: 20px; }
.finishani{ position: relative; }
.finishani .finish_fire{ position: absolute; width: auto; left: 30px; top: 0px; opacity: 1; }
.finishani .finish_ball{ position: absolute; width: auto; left: 10px; top: 0px; }
.finishani .finish_star{ position: absolute; width: auto; left: 20px; top: 0px; }
.interactive .interactive-btn{ width: 200px; height: 40px; font-size: 2rem; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 auto; transition: all .1s linear; position: relative; cursor: pointer; }
.interactive .interactive-btn .btn-bg{ width: 100%; height: 100%; position: relative; }
.interactive .interactive-btn .btn-bg:after{ content: ''; width: 100%; height: 100%; border-radius: 50px; background: #33c172; position: absolute; left: 0; top: 0;  transition: all .1s linear; }
.interactive .interactive-btn .btn-bg:before{ content: ''; width: 100%; height: 100%; border-radius: 50px; background: #069947; position: absolute; left: 4px; top: 6px;  transition: all .1s linear; }
.interactive .interactive-btn>span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; transition: all .1s linear; white-space: nowrap; }
.interactive .interactive-btn>span:after{ content: '\e913'; }
.interactive .interactive-btn a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.interactive-qa{ display: flex; }
.interactive-qa .qa-box{ width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.interactive-qa .qa-box>.col-1{ width: 100%; order: 3; }
.interactive-qa .qa-box>.col-1 .pup-info{ width: 100%; }
.interactive-qa .qa-box>.col-1 .pup-info>div{ width: 100%; /* height: 460px; */ position: relative; }
.interactive-qa .qa-box>.col-1 .pup-info>div>img{ width: 100%; }
.interactive-qa .qa-box>.col-1 .txt-box{ position: relative; font-size: 1.3rem; line-height: 1.58; color: #483939; box-sizing: border-box; padding: 30px 20px 30px 20px; border-radius: 30px; margin: 0 0 -30px 0; }
.interactive-qa .qa-box>.col-1 .info-success .txt-box{ background: #fff; border: 2px solid #A6E2C2; }
.interactive-qa .qa-box>.col-1 .info-error .txt-box{ background: #fff; border: 2px solid #A6E2C2; }
.interactive-qa .qa-box>.col-1 .txt-box:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0px; border-color: #A6E2C2 transparent transparent transparent; position: absolute; right: 50px; bottom: -50px; z-index: -1; } 
.interactive-qa .qa-box>.col-1 .info-success .txt-box:after{ border-color: #A6E2C2 transparent transparent transparent; } 
.interactive-qa .qa-box>.col-1 .info-error .txt-box:after{ border-color: #A6E2C2 transparent transparent transparent;} 
.interactive-qa .qa-box>.col-1 .txt-box img{ width: 100%; border-radius: 30px; /*  position: absolute; left: 0; top: 0; z-index: -1; */ }
.interactive-qa .qa-box>.col-1 .people{ /* position: absolute; left: 0; bottom: 0; */ position: relative; }
.interactive-qa .qa-box>.col-1 .tit{ font-size: 1.8rem; line-height: 1.58; color: #483939; font-weight: bold; }
.interactive-qa .qa-box>.col-2{ order: 2; margin: 0 0 20px 0; }
.interactive-qa .q-box{ display: flex; align-items: flex-start; margin: 0 0 10px 0; }
.interactive-qa .q-box .col-1{ display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 60px; height: 50px; background: url(../images/interactive_smallpupbg.svg) no-repeat center top / contain; color: #fff; font-size: 1.6rem; margin: 0 8px 0 0;  }
.interactive-qa .q-box .col-1>span{ font-size: 2rem; }
.interactive-qa .q-box .col-2 { font-size: 1.6rem; line-height: 1.38; color: #069947; font-weight: bold; }
.interactive-qa .a-box{ width: 100%; }
.interactive-qa .a-box>li{ width: 100%; height: 40px; border-radius: 40px; border: 1px solid #D8D8D8; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: #000; cursor: pointer; }
.interactive-qa .a-box>li+li{ margin: 10px 0 0 0; }
.interactive-qa .a-box>li.success{ background: #c3f2d9;  }
.interactive-qa .a-box>li.error{ background: #D8D8D8;  }
.interactive-qa .a-txt{ font-size: 1.8rem; line-height: 1.58; font-weight: bold; text-align: center; display: flex; flex-direction: column; align-items: center; margin: 20px 0 15px 0; }
.interactive-qa .a-txt .success{ color: #f28110; }
.interactive-qa .a-txt .error{ color: #ED2525; }
.interactive-step{ display: flex; justify-content:center; align-items: center; width: 100%;  margin: 0 0 30px 0;  }
.interactive-step li{ display: flex; align-items: center; }
.interactive-step li p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50px; background: #ffe9d0; font-size: 1.2rem; line-height: 1.5; color: #faa94f; transition:all .4s cubic-bezier(.21,1,.23,1);}
.interactive-step li:after{ content: ''; display: block; width: 12px; height: 1px; background: #ffe9d0; }
.interactive-step li:last-child:after{ display: none; }
.interactive-step li.active p{ transform: scale(1.4); background: #f28110; color: #fff; font-weight: bold;  }
.interactive .preface-box{ /* font-size: 1.4rem; */ text-align: center; }
.interactive .preface-box .step-box{ padding: 14px 20px; background-color: #FFF8E8; border-radius: 20px; margin-top: 20px; }
.interactive a{ color: #069947; text-decoration: underline;  }

/* =================================     communication     ================================= */
.communication-container{ background: #fff; box-sizing: border-box; padding: 20px 3vw 30px 3vw; }
.communication-container h3{ font-size: 3rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.communication-container h3 .hightlight{ color: #f28110; }
.communication .preface-box{ width: 100%; margin: 0 auto; text-align: left; font-size: 1.4rem; line-height: 1.8; }
.communication-form{ width: 100%; margin: 30px auto 0; font-size: 1.4rem; line-height: 1.5;  }
.communication-form h4{ font-size: 2rem; line-height: 1.5; color: #f28110; }
/* .form-area{ margin: 0 0 30px; } */
.form-header{ display: flex; align-items: center; width: 100%; height: 40px; background: #069947; font-size: 1.8rem; font-weight: bold; line-height: 1.5; color: #fff; box-sizing: border-box; padding: 0 20px; margin: 10px 0 10px;  }
.form-header-note { color: #069947; margin: 0 0 15px; }
.form-area .tit{ font-size: 1.8rem; line-height: 1.5; font-weight: bold; color: #f28110; margin: 0 0 5px 0; }
.form-area .tit span{ font-size: 1.4rem; color: #ff0013; }
.form-area .tit-sec{ font-size: 1.6rem; line-height: 1.5; font-weight: bold; }
.form-area .note-list{ list-style-type: decimal; margin: 0 0 10px 20px; }
.checkradio-box{ display: flex; flex-wrap: wrap; margin: 10px 0 10px; }
/* columns 4 */
.checkradio-box.item-4columns>li{ position: relative; width: calc( (100% - 10px)/3); height: 90px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-4columns>li+li{ margin: 0 0 10px 5px; }
.checkradio-box.item-4columns>li:nth-child(3n+1){ margin: 0 0 10px 0; }
.checkradio-box.item-4columns>li.other{ width: 100%; }
/* columns 5 */
.checkradio-box.item-5columns>li{ position: relative; width: calc( (100% - 10px)/3); height: 50px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-5columns>li+li{ margin: 0 0 5px 5px; }
.checkradio-box.item-5columns>li:nth-child(3n+1){ margin: 0 0 5px 0; }
.checkradio-box.item-2columns>li{ position: relative; width: calc( (100% - 5px)/2); height: 50px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-2columns>li+li{ margin: 0 0 5px 5px; }
.communication-form input[type=radio]{position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:2; cursor:pointer; font-size: 14px; color: #8b8b8b; }
.communication-form input[type=radio]+ label{ display: flex; align-items: center; }
.communication-form input[type=radio]+ label:before {content:'\e927'; color:#B1B1B1; margin-right:6px;}
.communication-form input[type=radio]:checked + label:before {content:'\e928'; color:#40b236;}
.communication-form textarea{ width: 100%; height: 150px; background: #f7f7f7; margin: 10px 0 20px 0; box-sizing: border-box; padding: 20px 20px 20px 20px; resize: none; }
.communication-form .other{ font-size: 1.4rem; width: 200px; height: 40px; margin: 0 0 0 10px; background: #fff; box-sizing: border-box; padding: 0px 20px 0px 20px; }
.communication-form .verification-box{ display: flex; align-items: center; margin: 10px 0 0 0; }
.communication-form .verification-box input{ width: 140px; height: 40px; font-size: 1.2rem; color: #000; border: 1px solid #B1B1B1; box-sizing: border-box; padding: 0 15px; }
.communication-form .verification-box .verificationcode{ display: flex; align-items: center; margin: 0 10px 0; }
.communication-form .verification-box .btn_reload:after{ content: '\e929'; font-size: 3rem; color: #fcb86c; cursor: pointer; }
.communication-form input[type=button]{ width:200px; height: 50px; border-radius: 30px; background: #f28110; font-size: 2.4rem; color: #fff; display: block; margin: 20px auto 0; }
.communication-step{ display: flex; flex-direction: column; align-items: center; position: fixed; right: 3vw; bottom: 10vw; display: none; z-index: 1000;}
.communication-step li{ display: flex; flex-direction: column; align-items: center; }
.communication-step li p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50px; background: #ffe9d0; font-size: 1.2rem; line-height: 1.5; color: #faa94f; transition:all .4s cubic-bezier(.21,1,.23,1);}
.communication-step li:after{ content: ''; display: block; width: 3px; height: 50px; background: #ffe9d0; }
.communication-step li:last-child:after{ display: none; }
.communication-step li.active p{ transform: scale(1.4); background: #f28110; color: #fff; font-weight: bold;  }
.communication-form .btn-box { display: flex; justify-content: center; }
.communication-form input[type=submit] { width: 200px; height: 50px; border-radius: 30px; background: #f28110; font-size: 2.4rem; color: #fff; display: block; margin: 20px 10px 0; cursor:pointer;}
.communication-form input[type=submit].btn-send { background: #069947;}

/* =================================     aboutus      ================================= */
.aboutus-nav{ display: flex; justify-content: center; margin: 20px 0 20px 0; }
.aboutus-nav li{ display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 15px; height: 40px; font-size: 1.4rem; font-weight: bold; color: #000; border-radius: 5px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); cursor: pointer; }
.aboutus-nav li.active,.aboutus-nav li:hover{ background: #e70012; color: #fff; }
.aboutus-nav li+li{ margin: 0 0 0 10px; }
.aboutus .subtit{ font-size: 1.8rem; color: #649D47; text-align: center; }
.aboutus .video-box{ width: 100%; margin: 20px auto 20px; }
.video-iframe{ width:100%; height:0; padding-bottom:56.25%; position:relative;}
.video-iframe iframe{ width:100%; height:100%; position:absolute; left:0; top:0;}
.aboutus-history{ position: relative }
.aboutus_year-box{ height: 140px; position: relative; }
.aboutus-history .bg{ width: 100%; height: 10px; border-radius: 10px; background: #c3f2d9; position: absolute; bottom: 10px; }
.aboutus-year{ display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; position: absolute; bottom: 6px; box-sizing: border-box; padding: 0 0 0 20px; }
.aboutus-year>li{ display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year>li+li{ margin: 0 0 0 25px; }
.aboutus-year .year{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 1.2rem; line-height: 1.2; color: #069947;  transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year .year .circle{ display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #C3F2D9; background: #fff; margin: 10px 0 0 0;  transition: all .4s cubic-bezier(.23,1,.32,1);  }
.aboutus-year .year .circle span{ width: 10px; height: 10px; border-radius: 100%; background: #069947; transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year>li.active{ margin: 0 0 -5px 25px; }
.aboutus-year>li:first-child.active{ margin: 0 0 -5px 0px; }
.aboutus-year>li.active .year{ color: #f28110; font-size: 1.8rem; }
.aboutus-year>li.active .year .circle{ border: 4px solid #FCB86C; width: 25px; height: 25px;  }
.aboutus-year>li.active .year .circle span{ width: 18px; height: 18px; background:#f28110; }
.aboutus_year-txt{ margin: 30px 0 0 0; }
.aboutus_year-txt .year_txt-box{ display: flex; align-items: flex-start; font-size: 1.3rem; line-height: 1.8;  box-sizing: border-box; padding: 0 0 20px 0;  }
.aboutus_year-txt .year_txt-box+.year_txt-box{ margin: 20px 0 0 0; }
.aboutus_year-txt .year_txt-box:last-child{ border: none; }
.aboutus_year-txt .year{ margin: 0 10px 0 0; color: #069947; font-weight: bold; }
.year_txt-box .txt{ border-left: 1px solid #649D47; box-sizing: border-box; padding: 0 0 0 15px; }
.year_txt-box:nth-child(odd) .year{ color: #e18635; }
.year_txt-box:nth-child(odd) .txt{ border-color: #e18635; }
.aboutus-list{ display: flex; flex-wrap: wrap;  }
.aboutus-list>li{ width: 47%; margin: 0 1.5% 20px 1.5%; background: #f7f7f7; border: 1px solid #D8D8D8; box-sizing: border-box; position: relative; }
.aboutus-list>li>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.aboutus-list .logo-box{ line-height: 0;  position: relative;  }
.aboutus-list .logo-box img{ width: 100% }
.aboutus-list .more-logo{ width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; position: absolute; left: 0; top: 0; }
.aboutus-list .more-logo>a{ width: 40%; line-height: 0; justify-content: center; }
.aboutus-list .txt-box{ font-size: 1.4rem; line-height: 1.5; color: #000; box-sizing: border-box; padding: 10px 10px 10px 10px;  }
.aboutus-list .txt-box .tit01{ font-size: 1.3rem; color: #069947; }
.aboutus-list .txt-box .tit02{ font-size: 1.3rem; color: #F28101; margin: 10px 0 0 0; }
.aboutus table{ width: 100%; border: 1px solid #D8D8D8; border-width: 1px 0 0 1px; border-collapse:collapse; font-size: 1.2rem; line-height: 1.5; }
.aboutus table thead{ background: #e6e6e6; }
.aboutus table tr{ height: 50px; }
.aboutus table td{ border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 0 10px; }
.aboutus table td:nth-child(1){ width: 5%; text-align: center; }
.aboutus table td:nth-child(3){ width: 15%; text-align: center; }
.aboutus table td:nth-child(4){ width: 15%; text-align: center; }
.aboutus table .icon-file-pdf-light{ font-size: 2rem; color: #e70012; }
.aboutus table .hightlight{ color: #F28101; }
.aboutus .profile-list>li{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; border-radius: 10px; border: 1px solid #B7B7B7; box-sizing: border-box; padding: 0 10px 0 10px; margin: 0 0 10px 0;  font-size: 1.3rem;  }
.aboutus .info-box,.aboutus .pdf-box{ display: flex; align-items: center; }
.aboutus .info-box .icon-file-pdf-regular{ color: #649d47; margin: 0 5px 0 0; font-size: 2rem; }
.aboutus .pdf-box { margin: 0 0 0 15px; font-size: 1.1rem;}
.aboutus .pdf-box div{ display: flex; flex-wrap: nowrap; align-items: center; }
.aboutus .pdf-box div:first-child:after{ content: '|'; color: #b7b7b7; margin: 0 5px 0 5px; }
.aboutus .pdf-box a{ color: #db732c; text-decoration: underline; white-space: nowrap; }

/* =================================    privacy      ================================= */
.privacy { padding: 100px 3vw 100px 3vw; min-height: 300px; }
.decimal-list{ list-style: decimal; margin: 20px 0 0 25px; }
dl.list_num { width:100%;}
dt { float: left; width: 2.5rem; word-wrap: normal;}
dd { margin-left: 2.5rem; }
.google-search{ width: 100%; height: 65px; border-radius:50px; border: 1px solid #A6E2C2;  position: relative; box-shadow:2px 6px 0px 0px #A6E2C2;  }
.google-search input{ width: 100%; height: 100%; border: none; background: transparent; position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 0 70px 0 20px; color: #a7a7a7 }
.google-search span{ position: absolute; right: 30px; top: 50%; transform: translate(0,-50%); font-size: 3rem; color: #f28110; font-weight: bold; }

/* =================================     esgfocus     ================================= */
.esgfocus .kv-container{ background: url(../images/esgfocus-kv.png) no-repeat center center/cover; }
.esgfocus-nav{ display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 40px 0; }
.esgfocus-nav li{ height: 50px; font-size: 1.4rem; font-weight: bold; color: #000; border-radius: 50px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); margin: 0 5px 10px 5px; }
.esgfocus-nav li.active,.esgfocus-nav li:hover{ background: #e70012; color: #fff; }
.esgfocus-nav li a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 20px; line-height: 1.2;  }
.esgfocus .imgcenter{ margin:20px auto 20px auto; }
/* .esgfocus .subtit{ font-size: 1.8rem; line-height: 1.5; color: #069947; } */
.esgfocus .subtit{ font-size: 1.8rem; font-weight: normal; line-height: 1.5; color: #E88643; }
.esgfocus .hightlight{ color: #f28110; font-weight: bold; }
.esgfocus .morebig{ font-size: 2rem; }
.esgfocus .notecolor{ color: #777; }
.esgfocus table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.esgfocus table tr{ height: 40px; }
.esgfocus table td:first-child{ width: 20%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.esgfocus table td:last-child{ text-align: center; box-sizing: border-box; padding: 0 20px 0 20px; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.esgfocus table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.esgfocus table a{ color: #069947; text-decoration: underline; }
.esgfocus table tbody tr:nth-child(even){ background: #f8f8f8;  }
.esgfocus table ul{ display: inline-block; list-style: disc; margin: 0 0 0 20px; text-align: left; margin: 10px 0; }
.esgfocus .esgfocus-list ul{display: flex; }
.esgfocus .esgfocus-list ul li img {width:100%; height:auto; border-radius: 10px;}
.esgfocus .esgfocus-list ul{display: flex; flex-direction: column;}
.esgfocus .esgfocus-list ul li{ display: flex; flex-direction: column;}
.esgfocus .esgfocus-list ul li .img-box.imgto70p img{width: 60%; padding: 0 18%;}

/* =================================     stakeholder     ================================= */
.stakeholder .common-box .img-box.oneimg img{ width: 100%; border-radius: 0; }

/* =================================     sdgs     ================================= */
.sdgs .kv-container{ background: url(../images/sdgs-kv.jpg) no-repeat center center/cover; }
.sdgs .common-box .img-box.oneimg img{ width: 60%; margin: 0 auto; border-radius: 0; }
.sdgs *{ box-sizing: border-box; }
/* 自訂義 Dots */
.sdgs .demo-dots .slick-dots { width: 100%; display: flex; justify-content: center; bottom: 0; }
.sdgs .demo-dots .slick-dots li { width: calc(100% / 8); max-width: 100px; height: 100px;  transition: .5s; margin: 0 3px; position: relative; cursor: pointer;}
.sdgs .demo-dots .slick-dots li:nth-child(odd) { animation: up-and-down 2s infinite ease-in-out; }
.sdgs .demo-dots .slick-dots li:nth-child(even) { animation: up-and-down2 2s infinite ease-in-out; }
.sdgs .demo-dots .slick-dots li:hover,
.sdgs .demo-dots .slick-dots li.slick-active { animation-play-state:paused;}
.sdgs .demo-dots .slick-dots li.slick-active:before { content:''; width: 1px; height: 100px; position: absolute; top:40px; left: 50%; animation: draw-line .6s ease-in-out;}
.sdgs .demo-dots .slick-dots li button {display: none;}
.sdgs .demo-dots .slick-dots li:nth-child(1){ background: url('../images/sdgs_icon-02.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(2){ background: url('../images/sdgs_icon-03.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(3){ background: url('../images/sdgs_icon-04.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(4){ background: url('../images/sdgs_icon-08.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(5){ background: url('../images/sdgs_icon-11.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(6){ background: url('../images/sdgs_icon-12.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(7){ background: url('../images/sdgs_icon-13.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(8){ background: url('../images/sdgs_icon-15.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(1):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(1) { background: url('../images/sdgs_icon-02.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(2):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(2) { background: url('../images/sdgs_icon-03.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(3):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(3) { background: url('../images/sdgs_icon-04.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(4):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(4) { background: url('../images/sdgs_icon-08.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(5):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(5) { background: url('../images/sdgs_icon-11.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(6):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(6) { background: url('../images/sdgs_icon-12.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(7):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(7) { background: url('../images/sdgs_icon-13.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li:nth-child(8):hover,
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(8) { background: url('../images/sdgs_icon-15.svg') top left no-repeat; background-size: contain; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(1):before { background: #dea639; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(2):before { background: #4c9f38; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(3):before { background: #c51a2d; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(4):before { background: #a31842; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(5):before { background: #fe9d24; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(6):before { background: #be8b2e; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(7):before { background: #3e7f44; }
.sdgs .demo-dots .slick-dots li.slick-active:nth-child(8):before { background: #3FAE49; }
.sdgs ul.sdgs-slick { width: 100%; position: relative; z-index: 10; background: #fff; }
.sdgs ul.sdgs-slick>li { width: 100%; max-width: 1000px; }
.sdgs ul.sdgs-slick li ol { list-style-type: disc; margin: 0 0 0 22px;}
.sdgs .sdgs-slick_content { width: 100%; display: flex; flex-direction: column; padding:20px;}
.sdgs .sdgs-slick_content.box1 { border: 1px solid #dea639;}
.sdgs .sdgs-slick_content.box2 { border: 1px solid #4c9f38;}
.sdgs .sdgs-slick_content.box3 { border: 1px solid #c51a2d;}
.sdgs .sdgs-slick_content.box4 { border: 1px solid #a31842;}
.sdgs .sdgs-slick_content.box5 { border: 1px solid #fe9d24;}
.sdgs .sdgs-slick_content.box6 { border: 1px solid #be8b2e;}
.sdgs .sdgs-slick_content.box7 { border: 1px solid #3e7f44;}
.sdgs .sdgs-slick_content.box8 { border: 1px solid #3FAE49;}
.sdgs .sdgs-slick_content .subtit { font-size: 2rem;}
.sdgs .sdgs-slick_content.box1 .subtit { color:#dea639;}
.sdgs .sdgs-slick_content.box2 .subtit { color:#4c9f38;}
.sdgs .sdgs-slick_content.box3 .subtit { color:#c51a2d;}
.sdgs .sdgs-slick_content.box4 .subtit { color:#a31842;}
.sdgs .sdgs-slick_content.box5 .subtit { color:#fe9d24;}
.sdgs .sdgs-slick_content.box6 .subtit { color:#be8b2e;}
.sdgs .sdgs-slick_content.box7 .subtit { color:#3e7f44;}
.sdgs .sdgs-slick_content.box8 .subtit { color:#3FAE49;}

@keyframes up-and-down{
    0% {transform:translateY(-10px);}
    50% {transform:translateY(10px);}
    100% {transform:translateY(-10px);}
}
@keyframes up-and-down2{
    0% {transform:translateY(10px);}
    50% {transform:translateY(-10px);}
    100% {transform:translateY(10px);}
}
@keyframes draw-line{
    from { height: 1px;}
    to { height: 100px;}
}

.sdgs-table { overflow: auto; }
.sdgs-table table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; border-collapse:collapse; margin: 0 0 30px 0; }
.sdgs-table table tr{ height: 40px; }
.sdgs-table table td{ width: auto; text-align: center; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; }
.sdgs-table table.table01 tbody td{ text-align: left; }
.sdgs-table table td{ box-sizing: border-box; padding: 5px; border: 1px solid #D8D8D8; border-width: 1px 1px 1px 1px; }
.sdgs-table table thead { font-weight: bold; background: #d3f7da; text-align: center; }
.sdgs-table table a{ color: #069947; text-decoration: underline; }

/* =================================     donate     ================================= */
.kv-slider-container{ width: 100vw; height: 50vw; margin-top: 60px; }
.kv-slider{ height: 100%; position: relative;}
.kv-slider li{  }
.kv-slider .slick-list{ height: 100%; }
.kv-slider .slick-track{ height: 100%; }
/* slick dots */
.kv-slider-container .dots-list{ display: flex; align-items: center; justify-content: center; height: 30px; position: relative; bottom: auto;  }
.kv-slider-container .dots-list .slick-dots{ display: flex; }
.kv-slider-container .dots-list li{ width: 10px; height: 10px; border-radius: 50%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.kv-slider-container .dots-list li.slick-active{ background: #F28101;  }
.kv-slider-container .dots-list li+li{ margin: 0 0 0 15px; }
.donate-nav{ display: flex; justify-content: center; margin: 20px 0 20px 0; }
.donate-nav li{ height: 40px; font-size: 1.4rem; font-weight: bold; color: #000; border-radius: 5px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); }
.donate-nav li.active a,.donate-nav li:hover a{ background: #e70012; color: #fff; }
/* .donate-nav li:last-child{ border-color: #F28101; color: #F28101; } */
/* .donate-nav li.active:last-child,.donate-nav li:last-child:hover{ background: #f28110; color: #fff;  } */
.donate-nav li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 20px; color: #cf2d2c; font-weight: normal; }
.donate-nav li+li{ margin: 0 0 0 10px; }
.donate .kv-slider li.donate-kv_01 { background:url('../images/donate-kv_01.jpg') no-repeat center bottom/cover; }
.donate .kv-slider li.donate-kv_02 { background:url('../images/donate-kv_02.jpg') no-repeat center bottom/cover; }
.donate .kv-slider li.donate-kv_03 { background:url('../images/donate-kv_03.jpg') no-repeat center bottom/cover; }
.donate .kv-slider li a {width: 100%; height: 100%; line-height: 0;}
.donate .mobile{ display: block; }
.donate .threecol-box .mobile{ display: flex; }
.donate .pc{ display: none; }
.donate .subtit{ font-size: 1.8rem; line-height: 1.5; color: #e70012; font-weight: bold; margin: 0 0 15px 0; }
.donate .hightlight-box{  border-radius: 10px; background: #fff0f1;  box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 0 0 30px 0;}
.donate .hightlight-box .hltit{ font-size: 1.8rem; font-weight: bold; }
.donate .hightlight-box .note-list{ list-style-type: decimal; margin: 0 0 0 20px; }
.donate-subnav{ display: flex; flex-wrap: wrap;  }
.donate-subnav li{ /* width: 330px; */ /* width: 100%; */ width: 49%; min-height: 50px; display: flex; justify-content: flex-end; align-items: flex-end; position: relative; margin: 0 .5% 5px .5%; }
.digit .donate-subnav li{ min-height: 90px;  }
.ibon-step .donate-subnav li{ cursor: pointer;  }
.donate-subnav li+li{ /* margin: 5px 0 0 0;  */}
.donate-subnav li>div:first-child{ width: 30px; height: 30px; border-radius: 10px; font-size: 1.8rem; color: #fff; background: #e70012; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; box-shadow: 1px 1px 0px 0px #fff;  }
.donate-subnav li>div:last-child{ width: 97%; min-height: 44px; border-radius: 10px; border: 1px solid #e70012; display: flex; flex-direction: column; justify-content: center; align-self: stretch; margin-top:.5rem; box-sizing: border-box; padding: 5px 5px 5px 30px; font-size: 1.2rem; line-height: 1.4; transition: all .4s cubic-bezier(.23,1,.32,1);  }
.digit .donate-subnav li>div:last-child{ min-height: 84px; }
.ibon-step{ display: flex; flex-direction: column; margin: 0 0 30px 0; }
.ibon-step .col-1{ margin: 0 0 10px 0; }
.ibon-step .col-2{ width: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.ibon-step .donate-subnav li:hover>div:last-child,.ibon-step .donate-subnav li.active>div:last-child { background: #e70012; color: #fff; }
.ibon-slick{ width: 85%; line-height: 0; margin: 0 auto; }
.ibon-slick li img{ width: 100%; }
.ibon-slick-box{ width: 100%; }
/* ibon slick dots */
.ibon-slick-box .dots-list{ display: flex; align-items: center; justify-content: center; height: 30px; position: relative; bottom: auto;  }
.ibon-slick-box .dots-list .slick-dots{ display: flex; }
.ibon-slick-box .dots-list li{ width: 10px; height: 10px; border-radius: 50%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.ibon-slick-box .dots-list li.slick-active{ background: #F28101;  }
.ibon-slick-box .dots-list li+li{ margin: 0 0 0 15px; }
/* ibon slick arrow */
.ibon-slick-box .prev,.ibon-slick-box .next{ display: inline-block; font-size: 2.8rem; font-weight: bold; color: #989898; position: absolute; cursor: pointer; }
.ibon-slick-box .prev{ left: 0; top: 50%; transform: translateY(-50%); } 
.ibon-slick-box .next{ right: 0; top: 50%; transform: translateY(-50%); } 
.twocol-box{ display: flex; flex-direction: column; }
.twocol-box .col-1,.twocol-box .col-2{ width: 100%; }
.twocol-box .col-2{ margin: 20px 0 0 0; }
.threecol-box>div+div{ margin: 20px 0 0 0; }
.donate .twocol-box{ margin: 0 0 30px 0; }
.subtit-header{ display: flex; justify-content: center; align-items: center; height: 40px; border-radius: 10px; background: #fff0f1; font-size: 1.6rem; font-weight: bold; }
.twocol-box .img-box{ border-radius: 10px; overflow: hidden; margin: 0 0 15px 0; line-height: 0; }
.threecol-box .img-box{ border-radius: 10px; overflow: hidden; margin: 0 0 15px 0; line-height: 0; }
.donate .table-header{ height: 50px; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; font-weight: bold; background: #fff0f1; margin: 0 0 5px 0;  }
.donate table{ width: 100%; font-size: 1.2rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 0 0 20px 0; }
.donate table tr{ height: 40px; }
.donate table td{  width: 22%; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 5px 5px 5px 5px; }
.donate table td:first-child{ width: 12%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.donate table td:last-child{ width: 12%; }
.donate table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.donate table a{ color: #069947; text-decoration: underline; }
.donate .img-list{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.donate .img-list li{ width: 27vw; position: relative;  }
.donate .img-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.donate .img-list .img-box{ display: flex; justify-content: center; align-items: center; width: 27vw; height:27vw; border-radius: 50%; border: 1px solid #E70012; margin: 0 0 10px 0; transition: all .4s cubic-bezier(.23,1,.32,1); box-sizing: border-box; }
.donate .img-list .img-box img{ width: 50%;  }
.donate .img-list li:first-child .img-box img,.donate .img-list li:last-child .img-box img{ width: 60%;  }
.donate .img-list li img{ width: 100%;  }
/* .donate .img-list li+li{ margin: 0 0 0 20px; } */
.donate .img-list .txt-box{ display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; margin: 0 0 10px 0; }
.donate .common-box .img-box.oneimg img{ width: 100%; }

/* =================================     csrcommittees     ================================= */
.csrcommittees-container .main-container h3{ font-size: 3rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.csrcommittees-container .main-container h3 .hightlight{ color: #f28110; }
.csrcommittees .preface-box{ margin: 0 auto; text-align: left; font-size: 1.4rem; line-height: 1.8; }
.csrcommittees .preface-box em{ font-size: 1.45rem; margin: 1rem 1rem 4rem 1rem; line-height: 1.7; display: block; color: gray; }
.csrcommittees-box{ width: 100%; margin: 20px auto 0; }
.csrcommittees-box img{ width: 100%; border-radius: 20px; }

/* =================================     targetsandprogress     ================================= */
.targetsandprogress .common-box .img-box.oneimgnomargin{ margin: 10px 0 0px 0;}
.targetsandprogress .common-box .img-box.oneimg img,
.targetsandprogress .common-box .img-box.oneimgnomargin img{ width: 100%; border-radius: 0; }
.targetsandprogress-nav { width: 100%; max-width: 730px; margin: 0 auto 20px auto; display: flex; }
.targetsandprogress-nav li{ width: 32.5%; max-width: 230px; height: 80px; border-radius: 15px; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; font-weight: bold; position: relative; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1); text-align: center; line-height: 1.3; }
.targetsandprogress-nav li:nth-child(1) { border: 2px solid #069947; color: #069947;}
.targetsandprogress-nav li:nth-child(2) { border: 2px solid #F28101; color: #F28101;}
.targetsandprogress-nav li:nth-child(3) { border: 2px solid #E70012; color: #E70012;}
.targetsandprogress-nav li+li{ margin: 0 0 0 1.5%; }
.targetsandprogress-nav li span{ font-size: 3rem; margin: 0 5px 0 0;  }
.targetsandprogress-nav li:nth-child(1).active,.targetsandprogress-nav li:nth-child(1):hover{ background: #069947; color: #fff;  }
.targetsandprogress-nav li:nth-child(2).active,.targetsandprogress-nav li:nth-child(2):hover{ background: #F28101; color: #fff;  }
.targetsandprogress-nav li:nth-child(3).active,.targetsandprogress-nav li:nth-child(3):hover{ background: #E70012; color: #fff;  }
.targetsandprogress-nav li.active:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px;  position: absolute; bottom: -15px; }
.targetsandprogress-nav li:nth-child(1).active:after{ border-color: #069947 transparent transparent transparent; }
.targetsandprogress-nav li:nth-child(2).active:after{ border-color: #F28101 transparent transparent transparent; }
.targetsandprogress-nav li:nth-child(3).active:after{ border-color: #E70012 transparent transparent transparent; }
.targetsandprogress-txt #type02 .tit { color: #F28101; }
.targetsandprogress-txt #type03 .tit { color: #E70012; }

/* =================================     esgfocus     ================================= */
.esgfocus-nav{ display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 40px 0; }
.esgfocus-nav li{ /* width: 45%; */ height: 50px; font-size: 1.4rem; font-weight: bold; color: #000; border-radius: 50px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); margin: 0 5px 10px 5px; }
.esgfocus-nav li.active,.esgfocus-nav li:hover{ background: #e70012; color: #fff; }
.esgfocus-nav li a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 20px; line-height: 1.2;  }
.esgfocus .imgcenter{ margin:20px auto 20px auto; }
/* .esgfocus .subtit{ font-size: 1.8rem; line-height: 1.5; color: #069947; } */
.esgfocus .subtit{ font-size: 1.6rem; line-height: 1.5; color: #E88643; }
.esgfocus .hightlight{ color: #f28110; font-weight: bold; }
.esgfocus .morebig{ font-size: 2rem; }
.esgfocus .notecolor{ color: #777; }
.esgfocus table{ width: 100%; font-size: 1.4rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.esgfocus table tr{ height: 40px; }
.esgfocus table td:first-child{ width: 20%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.esgfocus table td:last-child{ text-align: center; box-sizing: border-box; padding: 0 20px 0 20px; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.esgfocus table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.esgfocus table a{ color: #069947; text-decoration: underline; }
.esgfocus table tbody tr:nth-child(even){ background: #f8f8f8;  }
.esgfocus table ul{ display: inline-block; list-style: disc; margin: 0 0 0 20px; text-align: left; margin: 10px 0; }
.esgfocus .esgfocus-list ul{display: flex; }
.esgfocus .esgfocus-list ul li img { width:100%; height:auto; border-radius: 10px;}
.esgfocus .esgfocus-list ul{display: flex; flex-direction: column;}
.esgfocus .esgfocus-list ul li{ display: flex; flex-direction: column;}
.esgfocus .esgfocus-list ul li .img-box.imgto70p img{width: 60%; padding: 0 18%; }







/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){

    /* idx sdgs */
    :root {
      --marquee-width: 100vw;
      --marquee-height: 540px;
      --marquee-elements-displayed: 3;
      --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
      --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
    }
    .idx-sdgs .sdgs-bg { width: 120vw; height: auto; position: absolute; display:flex ; justify-content: center;  bottom: -50px;}

}





/* $橫的版型 */
@media screen and (orientation:landscape){ 


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%;  }
/* header */
header{ width: 100%; height: 80px; background: rgba(255, 255, 255, 1); position: fixed; left: 0; top: 0; display: flex; align-items: center; font-size: 1.8rem; text-size-adjust: 100%; line-height: 1.5; color: #1F1F1F; white-space: nowrap; box-sizing: border-box; padding: 0 0 0 10px; display: flex; justify-content: space-between; z-index: 9999; transition: all .8s cubic-bezier(.23,1,.32,1); box-shadow: 0px 62px 25px hsla(0,0%,55%,.01),0px 35px 21px hsla(0,0%,55%,.03),0px 15px 15px hsla(0,0%,55%,.05),0px 4px 8px hsla(0,0%,55%,.06),0px 0px 0px hsla(0,0%,55%,.06); }
header.hide{ top: -80px; transition: all .8s cubic-bezier(.23,1,.32,1); }
header .col-2{ display: flex; align-items: center; }
header h3{ display: flex; align-items: center; position: relative; margin: 0 30px 0 0; width: auto; }
header h3.active{ position: fixed; left: 30px; top: 15px; z-index: 9999; }
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
header h3 img{ width: 220px; }
.quick-nav{ display: flex; gap: clamp(20px,3vmin,40px); margin: 0 clamp(20px,3vmin,40px) 0 0; }
.quick-nav li{  transition: all .6s cubic-bezier(.23,1,.32,1); position: relative; }
.quick-nav li:hover{ color: #f28040; }
.quick-nav .drop-nav{ width: fit-content; font-size: 1.8rem; text-size-adjust: 100%; line-height: 1.58; color: #1f1f1f; position: absolute; display: none;  }
.quick-nav .drop-nav>li{ display: flex; flex-direction: column; justify-content: center; align-items: start;  width: 100%; height: 60px; background: #fff; margin: auto 0; transition: all .6s cubic-bezier(.23,1,.32,1); box-sizing: border-box; padding: 0 25px; box-shadow: 0px 8px 6px rgba(0,0,0,.15); }
.quick-nav .drop-nav>li>a{ margin: auto 0; }
.quick-nav .drop-nav>li:after{ content: ''; width: 100%; height: 1px; background: #d8d8d8;  }
.quick-nav .drop-nav>li:last-child:after{ display: none;  }
.quick-nav .drop-nav>li:hover{ background: #e27830; color: #fff; }
.quick-nav .drop-nav>li:hover:after{ display: none; }
.quick-nav .navtit{ height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; }
.quick-nav .navtit>span{ height: 100%; display: flex; align-items: center; }
.quick-nav .navtit:after{ content: ''; display: block; width: 0%; height: 3px; background: #e27830; margin: 0 auto; transition: all .6s cubic-bezier(.23,1,.32,1); }
.quick-nav .navtit:hover:after{ width: 100%; }
.quick-nav .drop_tit.active:after{ width: 100%; }
.quick-nav .navtit>a{ width: 100%; height: 100%; line-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;  }
/* search */
.search-box{ width: 80px; aspect-ratio: 1/1; background: #535353; display: flex; justify-content: center; align-items: center; position: relative; }
.search-box a{ transition: all .3s cubic-bezier(.23,1,.32,1);  }
.search-box a:hover{ transform: scale(1.8); }
.search-box a:after{ content: '\e921'; font-size: 2rem; color: #fff; }
.select-box.language-nav{ width: 80px; aspect-ratio: 1/1; background: #1f1f1f; display: flex; justify-content: center; align-items: center; margin: 0 1px 0 1px; font-size: 1.4rem; color: #fff; position: relative; vertical-align: middle; }
.select-box.language-nav .line{ width: 1px; height: 15px; background: #fff; margin: 0 6px 0 6px; }
.select-box.language-nav select{ background: transparent; width: 100%; padding: 0px 10px; font-size: 1.2rem; color: #fff; line-height: 1.3; border: 0; border-radius: 0; height: 100%; -webkit-appearance: none; box-sizing: border-box; position: absolute; text-align: center;  } 
.hamburg-box{ display: none; }
.hamburg-box .line-box{ width: 20px; height: 20px; position: relative; }
.hamburg-box .line{ width: 20px; height: 2px; border-radius: 30px; background: #fff; position: absolute; transition: all .3s cubic-bezier(.23,1,.32,1); }
.hamburg-box li:nth-child(1){ top: 0; }
.hamburg-box li:nth-child(2){ top: 50%; }
.hamburg-box li:nth-child(3){ top: 100%; }
.hamburg-box.active{ z-index: 9999; position: fixed; right: 0; top: 0; }
.hamburg-box.active li:nth-child(1),.hamburg-box.active li:nth-child(1){ top: 50%; transform: rotate(45deg); }
.hamburg-box.active li:nth-child(2),.hamburg-box.active li:nth-child(2){ opacity: 0; }
.hamburg-box.active li:nth-child(3),.hamburg-box.active li:nth-child(3){ top: 50%; transform: rotate(-45deg); }
header .nav-container{ width: 100vw; height: 100vh; background: #fff; box-sizing: border-box; padding: 180px 30px 200px 30px; position: fixed; left: 0; top: 0; z-index: 999; display: none; }
header .nav-container.active{ display: block; }
.nav-container .nav-box{ width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,auto); gap: clamp(30px, 10%, 70px); font-size: 1.6rem; line-height: 1.8; color: #1F1F1F;   }
.nav-container .nav-box .tit{ font-weight: bold; margin: 0 0 5px 0; height: auto; border: none; }
.nav-container .nav-box .tit.drop:after{ display: none; }
.nav-container .nav-box .interval_above{ margin: 30px 0 0 0; }
.nav-container a{ transition: all .8s cubic-bezier(.23,1,.32,1); }
.nav-container a:hover{ color: #f28040; }
.nav-container .subnav-box{ display: block; margin: 5px 0 0 0; } 
header .social-nav{ display: flex; gap: 30px; font-size: 2rem; margin: 0 20px 0 20px; }

/* idx kv */
.idx-kv{ color: #fff; overflow: hidden; padding: 0 0 0 0; margin: 80px 0 0 0; position: relative; aspect-ratio: 2560/1100; }
.idxkv-list{ }
.idxkv-list li a:focus{ outline: none; }
.idxkv-list .pcimg{ display: block;  }
.idxkv-list .mobileimg{ display: none;  }
.idxkv-list .idxkvbg.pcimg{ display: block;  }
.idxkv-list .idxkvbg.mobileimg{ display: none;  }
/* .idxkv-list li{ width: 100%; aspect-ratio: 2560/900; max-height: 900px; position: relative; } */
.idxkv-list li{ width: 100%; aspect-ratio: 2560/900; max-height: 900px; position: relative; }
.idxkv-list li>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.idxkv-list .img-box{ width: 100%; height: 100%; overflow: hidden; position: relative; }
/* .idxkv-list .img-box img{ width: 100%; height: 100%; object-fit: contain; object-position: bottom center; } */
.idxkv-list .img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.idxkv-bottom{ width: 100%; min-height: auto; position: absolute; bottom: 0; color: #1f1f1f; background: none;  }
.idxkv-bottom .bg-box{ width: 100%; height: 30px; overflow: hidden; }
.idxkv-bottom .bg-box img{ display: block; width: 120%; height: 100%; object-fit: cover; object-position: right top; line-height: 0; }
.idxkv-bottom .bottom-txt{ width: 100%; max-width: 1200px; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0px); background: none; min-height: 140px; display: flex; flex-direction: column; justify-content: center; padding: 40px 10px 30px 20px }
/* .idxkv-tit{ display: flex; align-items: end; position: absolute; left: 40px; top: 40px; } */
.idxkv-tit{ display: flex; align-items: end; margin: 0 0 5px 0; }
.idxkv-tit .tit{ font-family: "Note Sans TC"; font-weight: 600; font-size: clamp(2rem,2vw,3.2rem); margin: 0 10px 0 0; }
.idxkv-tit .subtit{ font-size: clamp(1.8rem,1.8vw,3rem); line-height: 1.2; font-weight: bold; }
/* .idxkv-txt{ display: flex; flex-direction: row; align-items: center; font-size: 1.8rem; line-height: 1.58; color: #1f1f1f; position: absolute; left: 40px; top: 80px; width: 70%; } */
.idxkv-txt{ display: flex; flex-direction: row; align-items: center; font-size: clamp(1.5rem,1.1vw,1.8rem); line-height: 1.58; color: #1f1f1f; width: 70%; }
.idxkv-txt .txt-box{ text-align:left; margin: 0 15px 0 0; }
.idxkv-txt .txt-box .hightlight{ color: #069947; }
.idxkv-txt .txt-box .weightbold{ font-weight: bold; }
.idxkv-txt .more{ width: fit-content; height: 40px; border-radius: 5px; border: 1px solid #E27830; font-size: 1.8rem; color: #E27830; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; margin: 0 0 0 0; transition: all .4s cubic-bezier(.23,1,.32,1); white-space: nowrap; }
.idxkv-txt .more:hover{ background: #f28110; color: #fff; }
/* slick */
.idx-kv .dots-list{ display: flex; align-items: center; justify-content: end; height: 50px; width: 20%; max-width: 1200px; position: absolute; right: 5%; bottom: 20px; transform: translate(-50%, 0);}
.idx-kv .dots-list .slick-dots{ display: flex; justify-content: end; gap: 20px;  }
.idx-kv .dots-list li{ width: 10px; height: 10px; border-radius: 100%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.idx-kv .dots-list li.slick-active{ background: #069947;  }

.slick-list {padding: 0 0 110px;}
.box-main .slick-list {padding: 0 0 30px;}

/* idx sdgs */
:root {
  --marquee-width: 100vw;
  --marquee-height: 540px;
  --marquee-elements-displayed: 5;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
}
.idx-sdgs .sdgs-bg { width: 1364px; height: 520px; position: absolute; display:flex ; justify-content: center;  bottom: -140px;}

/* h3 tit */
h3.idxtit{ font-size: 4rem; line-height: 1.5; font-weight: 300; color: #1F1F1F; text-align: center; margin: 15px 0 15px 0; }
h3.tit{ font-size: 4rem; line-height: 1.5; font-weight: 300; color: #1C8065; text-align: center; margin: 15px auto 40px auto; }

/* idx bg */
.idxbg{ width: 100%; height: 150px; overflow: hidden; background: none; position: relative;  }
.idxbg img{ width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.idx-news .idxbg{ margin: -30px 0 -10px 0; }
.idx-focus .idxbg{ margin: -30px 0 -30px 0; background: #fff; }
.idx-award .idxbg{ margin: -120px 0 -30px 0; }
.footer-bg .idxbg{ margin: -150px 0 0 0; }
footer .idxbg{ margin: -150px 0 0 0; }

/* idx news */
.idx-news{ box-sizing: border-box; padding: 0px 0 250px 0; position: relative; }
.idxnews-list{ width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; margin: 20px auto 0 auto; }
.idxnews-list li{ display: flex; flex-direction: row; box-sizing: border-box; margin: 10px 0 0 0; height: 280px; position: relative; }
.idxnews-list li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idxnews-list li.color01{ background: #e2f8f0; }
.idxnews-list li.color02{ background: #FFE9D0; }
.idxnews-list li .col-1{ aspect-ratio: 1 / 1; order: 1; }
.idxnews-list li .col-2{ aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: start; max-height: 280px; order: 2; }
.idxnews-list .img-box{ line-height: 0; overflow: hidden; width: 100%; height: 100%; }
.idxnews-list .img-box img{ transition: all 1s cubic-bezier(.23,1,.32,1); }
.idxnews-list .txt-box{ width: 100%; height: 100%; font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding: 20px 20px 20px 20px; position: relative;   }
.idxnews-list .txt-box p{ transition: all .6s cubic-bezier(.23,1,.32,1); }
.idxnews-list .tit{ font-size: 1.6rem; font-weight: bold; color: #fff; box-sizing: border-box; padding: 0 0 0 20px; display: flex; align-items: center; margin: 0 0 10px 0; width: 100%; height: 40px; flex-shrink: 0; background: linear-gradient(90deg, rgba(219,115,44,1) 0%, rgba(254,233,208,1) 100%); }
.idxnews-list .txt-box a{ position: absolute; right: 20px; bottom: 20px; font-size: 1.2rem; display: flex; align-items: center; transition: all .4s cubic-bezier(.23,1,.32,1); }
.idxnews-list .txt-box a:after{ content: '\e913'; margin: 0 0 0 3px; transition: all .4s cubic-bezier(.23,1,.32,1); position: static; }
.idxnews-list .txt-box a:hover:after{ animation:arrowani .8s infinite ; }
.idxnews-list .color01 a{ color: #069947; }
.idxnews-list .color02 a{ color: #DB732C; }
.idxnews-list li:hover .txt-box p{ transform: translateY(-20px); }
.idxnews-list li:hover .img-box img{ transform: scale(1.2); }
.idxnews-list li:hover a{ font-size: 1.4em; }
@-webkit-keyframes arrowani{
  0%,100%{  }
  50%{ transform: translateX(5px); }
}

/* idx focus */
.idx-focus{ box-sizing: border-box; padding: 0 0 90px 0; background: linear-gradient( rgba(242,226,219,1) 50%, rgba(249,240,237,1) 100%); position: relative; }
.idxfocus-box{ width: 100%; max-width: 1200px; margin: 30px auto; position: relative; }
.idxfocus-list{ display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.idxfocus-list li{ box-sizing: border-box; padding: 20px 20px 30px 20px; display: flex; flex-direction: column; align-items: center;  position: relative; border: 1px solid #fff; transition: all .8s cubic-bezier(.23,1,.32,1);  }
.idxfocus-list li:hover{ background: #fff; }
.idxfocus-list .img-box{ width: 100%; aspect-ratio: 1000 / 629; overflow: hidden; box-shadow: 0 3px 6px rgba(0, 0, 0, .16); }
.idxfocus-list .img-box img{ width: 100%; height: 100%; object-fit: cover; transition: all .8s cubic-bezier(.23,1,.32,1);  }
.idxfocus-list li:hover .img-box img{ transform: scale(1.2); }
.idxfocus-list .txt-box{ font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; text-align: center; margin: 20px 0 0 0; }
.idxfocus-list .txt-box .tit{ font-size: 2rem; font-weight: bold; line-height: 1.5; color: #DB732C; margin: 0 0 5px 0; }
.idxfocus-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.idxcolorbg{ width: 1200px; position: absolute; left: 50%; top: -190px; transform: translateX(-50%);  }
.idxcolorbg img{ width: 100% }

/* idx award */
.idx-award{ width: 100%; height:900px; position: relative; margin: 0 0 0 0; }
.idx-award>img{ width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.idx-award .txt-box{ max-width: 900px; box-sizing: border-box; padding: 10px 10px 10px 80px; font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; position: absolute; left: 2vw; top: 6%; transition: all .8s cubic-bezier(.23,1,.32,1); }
.idx-award .tit{ font-size: 5rem; line-height: 1.2; font-weight: 300; margin: 5px 0 10px 0;  }
.idx-award .subtit{ font-size: 2.8rem; line-height: 1.2;  }

/* ---------------------------- kv ---------------------------- */
.kv-container .pcimg{ display: block;  }
.kv-container .mobileimg{ display: none;  }
.kv-container{ height: 550px; margin: 80px 0 0 0; position: relative; }
.kv-container .img-box{ width: 100%; height: 100%; overflow: hidden; }
.kv-container .img-box img{ width: 100%; height: 100%; object-fit: cover;  object-position: center center; }
.kv-container .idxkvbg.pcimg{ display: block;  }
.kv-container .idxkvbg.mobileimg{ display: none;  }
.kv-container li{ width: 100%; aspect-ratio: 2560/1000; max-height: 1000px; position: relative; }
.kv-container li>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.kv-bottom{ width: 100%; height: auto; position: absolute; bottom: 0; color: #1f1f1f; background: none;  }
.kv-bottom .bg-box{ width: 100%; height: 45px; overflow: hidden; }
.kv-bottom .bg-box img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: right top; line-height: 0; }
.kv-bottom .bottom-txt{ width: 100%; max-width: 1200px; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); }

/* ---------------------------- common ---------------------------- */
.common-container{ box-sizing: border-box; padding: 0px 0 200px 0; position: relative; }
.common-box h5{ display: flex; justify-content: center; align-items: center; font-size: 3.4rem; line-height: 1.8; color: #649D47; margin: 0 0 30px 0; }
.common-box h5:before{ content: ''; width: 10px; height: 10px; background: #649D47; margin: 0 20px 0 0; }
.common-box h5:after{ content: ''; width: 10px; height: 10px; background: #649D47; margin: 0 0 0 20px; }
.common-box{ width: 100%; max-width: 1100px; margin: 40px auto 0; font-size: 1.8rem; line-height: 1.58; color: #1F1F1F; }
.common-box .tit{ font-size: 2.4rem; line-height: 1.5; color: #218E67; margin: 0 0 5px 0; }
/* .common-box .subtit{ font-size: 1.8rem; line-height: 1.5; font-weight: bold; color: #F28101; margin: 0 0 5px 0; } */
.common-box .subtit{ font-size: 1.8rem; line-height: 1.5; font-weight: normal; color: #F28101; margin: 0 0 5px 0; }
.common-box .img-box{ display: flex; margin: 10px 0 40px 0; }
.common-box .img-box img{ width: 100%; border-radius: 10px; }
.common-box .img-box img+img{ margin: 0 0 0 2%; }
.common-box h5:nth-of-type(n+2){ margin: 80px 0 30px 0; }
.common-box .img-box2{ display: flex; margin: 10px 0 40px 0; }
.common-box .img-box2 img{ width: 30%; border-radius: 10px; }
.common-box .img-box2 img+img{ margin: 0 0 0 2%; }
.common-box .img-box.oneimg img{ width: 75%; margin:auto; border-radius: 0; }

/* ---------------------------- news ---------------------------- */
.news-container{ box-sizing: border-box; padding: 0px 0 200px 0; position: relative; }
.news-container.detail{ padding: 90px 0 200px 0; }
.news-list{ width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(3,1fr); gap: 60px 140px; margin: 0 auto 0 auto; }
.news-list li{ display: flex; flex-direction: column; box-sizing: border-box; position: relative;  }
.news-list li>a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.news-list li .col-1{ aspect-ratio: 1 / 1; border: 1px solid #B7B7B7; }
.news-list li .col-2{ display: flex; flex-direction: column; justify-content: start;  }
.news-list .img-box{ line-height: 0; overflow: hidden; width: 100%; height: 100%; }
.news-list .img-box img{ width: 100%; transition: all 1s cubic-bezier(.23,1,.32,1); }
.news-list .txt-box{ width: 100%; height: 100%; font-size: 1.8rem; line-height: 1.5; color: #1F1F1F; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; padding: 20px 10px 20px 10px; position: relative;   }
.news-list .txt-box p{ transition: all .6s cubic-bezier(.23,1,.32,1); }
.news-list .tit{ font-size: 1.6rem; font-weight: bold; color: #fff; box-sizing: border-box; padding: 0 0 0 20px; display: flex; align-items: center; margin: 0 0 10px 0; width: 100%; height: 40px; flex-shrink: 0; background: linear-gradient(90deg, rgba(219,115,44,1) 0%, rgba(254,233,208,1) 100%); }
.news-list .txt-box a{ width: 100%; font-size: 1.2rem; display: flex; justify-content: end; align-items: center; transition: all .4s cubic-bezier(.23,1,.32,1); margin: 20px 0 0 0; }
.news-list .txt-box a:after{ content: '\e913'; margin: 0 0 0 3px; transition: all .4s cubic-bezier(.23,1,.32,1); position: static; }
.news-list .txt-box a:hover:after{ animation:arrowani .8s infinite ; }
.news-list a{ color: #069947; }
.news-list li:hover .img-box img{ transform: scale(1.2); }
.news-list li:hover a{ color: #DB732C; }
@-webkit-keyframes arrowani{
  0%,100%{  }
  50%{ transform: translateX(5px); }
}
/* gopage newslist */
.go-page{ width: auto; display: flex; gap: 10px; justify-content: center; align-items: center; margin: 50px auto 0 auto; }
.go-page.newslist>li{ aspect-ratio: 1/1; width: 50px; border-radius: 5px; font-size: 1.8rem; color: #1f1f1f; transition: all .4s cubic-bezier(.23,1,.32,1); }
.go-page.newslist>li:hover{ background: #e88643; color: #fff; }
.go-page.newslist>li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.go-page.newslist>li:first-child,.go-page.newslist>li:last-child{ border: 1px solid #F28003; color: #e88643; font-size: 2rem; }
.go-page.newslist>li:first-child:hover,.go-page.newslist>li:last-child:hover{ color: #fff; }
/*  gopage detail */
.go-page.detail{ gap: 30px; }
.go-page.detail>li{ width: fit-content ; height: 50px; border-radius: 5px; font-size: 1.8rem; color: #1f1f1f; transition: all .4s cubic-bezier(.23,1,.32,1); box-sizing: border-box; padding: 0 25px; border: 1px solid #F28003; color: #e88643; display: flex; justify-content: center; align-items: center;  }
.go-page.detail>li:hover{ background: #e88643; color: #fff; }
.go-page.detail>li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.go-page.detail>li:first-child,.go-page.detail>li:last-child{  }
.go-page.detail>li:first-child:before{ content: '\e915'; }
.go-page.detail>li:last-child:after{ content: '\e913'; }
.detail-box{ width: 100%; max-width: 1200px; margin: 0 auto; font-size: 1.6rem; line-height: 1.58; color: #1F1F1F; box-sizing: border-box; padding: 0 20px 20px 20px; position: relative; }
.detail-main{ width: 100%; display: flex; flex-direction: row;  }
.detail-header{ display: flex; align-items: center; font-size: 1.6rem; line-height: 1.5; margin: 0 0 10px 0; color: #239068; }
.detail-header .icon{ display: flex; justify-content: center; align-items: center; border-radius: 30px; height: 40px; box-sizing: border-box; padding: 0 20px; margin: 0 20px 0 0; }
.type1 .detail-header{ color: #B7656D; }
.type2 .detail-header{ color: #2E7C50; }
.type3 .detail-header{ color: #6EAD3F; }
.type4 .detail-header{ color: #ED9B40; }
.type5 .detail-header{ color: #FAE27B; }
.type1 .detail-header .icon{ background:#B7656D; color: #fff; }
.type2 .detail-header .icon{ background:#2E7C50; color: #fff; }
.type3 .detail-header .icon{ background:#6EAD3F; color: #fff; }
.type4 .detail-header .icon{ background:#ED9B40; color: #fff; }
.type5 .detail-header .icon{ background:#FAE27B; color: #000; }
.detail-box .tit{ font-size: 3.6rem; line-height: 1.2; }
.detail-box .tit:after{ content:'';  display: block;  margin: 25px 0 30px; }
.detail-box.type1 .tit:after{ border-bottom: 1px solid #B7656D; }
.detail-box.type2 .tit:after{ border-bottom: 1px solid #2E7C50; }
.detail-box.type3 .tit:after{ border-bottom: 1px solid #6EAD3F; }
.detail-box.type4 .tit:after{ border-bottom: 1px solid #ED9B40; }
.detail-box.type5 .tit:after{ border-bottom: 1px solid #FAE27B; }
.detail-main .col-1{ display: flex; flex-direction: column; line-height: 0; }
.detail-main .col-1 img{ width: 450px; }
.detail-main .col-1 img+img{ margin: 20px 0 20px 0;  }
.detail-main .col-2{ box-sizing: border-box; padding: 0 0 0 50px; flex-grow: 0; width: calc( 100% - 325px); }

/* ---------------------------- sdgs ---------------------------- */
/* sdgskv */
.sdgskv-container{ height: 550px; margin: 80px 0 0 0; position: relative; }
.sdgskv-container .img-box{ width: 100%; height: 100%; overflow: hidden; }
.sdgskv-container .img-box img{ width: 100%; height: 100%; object-fit: cover;  object-position: center center; }
.sdgskv-container .kv-tit{ font-size: 5rem; line-height: 1.38; color: #fff; text-shadow: 3px 3px 10px rgba(0,0,0,.5); position: absolute; top: 40%; left: 18%; transform: translate(-50%, -50%); text-align: right; }
/* sdgs-box */
.sdgs-container{  }
.sdgs-box{   }
.sdgs-box.box01{ background: #b7656d; }
.sdgs-box.box02{ background: linear-gradient( rgba(254,214,218,1)70%, rgba(254,214,218,.3) 100%);  }
.sdgs-box.box04{ padding: 15px 0 150px 0; }
.sdgs-box.box01 .box-main>.tit{ color: #fff; }
.sdgs-box.box02 .box-main>.tit{ text-align:right; margin: 15px 0 -50px 0; }
/* .sdgs-box .box-main{ width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 60px 0 60px 0; position: relative;  } */
/* .sdgs-box .box-main{ width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 60px 0 20px 0; position: relative;  } */
/* .sdgs-box .box-main{ width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 20px 0 20px 0; position: relative;  } */
.sdgs-box .box-main{ width: 100%; max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 20px 0 20px 0; position: relative;  }
.sdgs-box .box-main.column{ padding: 180px 0 20px 0;  }
.sdgs-box.box01 .box-main{ padding: 15px 0 60px 0;  }
.sdgs-box .box-main>.tit{ font-size: 4rem; line-height: 1.5; font-weight: 300; color: #1F1F1F; text-align: center; margin: 10px 0 30px 0; }
.sdgs-box .info-txt{ font-size: 1.8rem; line-height: 1.58; color: #fff; margin: 0 0 20px 0; }
/* data-list */
.sdgs-box .data-list{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(350px, 1fr)); text-align: center; }
.sdgs-box .data-list li{ aspect-ratio: 350/250; background: #fff; font-size: 20px; color: #5a5a5a; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 3px 10px rgba(0,0,0,.4); margin: 0 10px; }
.sdgs-box .data-list .sdgs-icon{ width: 60px; }
.sdgs-box .data-list .sdgs-icon img{ width: 100%; }
.sdgs-box .data-list .data{ font-size: 3rem; color: #a21942; margin: 5px 0 10px 0; }
.sdgs-box .data-list .hightlight{ font-size: 4.5rem; }
/* column-list */
.sdgs-box .column-list{ display: grid; gap: 40px; grid-template-columns: repeat(auto-fit,minmax(300px, 1fr)); justify-content: center; color: #1f1f1f;  }
.sdgs-box .column-list li{ position: relative; margin: 0 10px;  }
.sdgs-box .column-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.sdgs-box .column-list .img-box{ aspect-ratio: 300/180; overflow: hidden; position: relative; margin: 0 0 20px 0; box-shadow: 2px 2px 10px rgba(0,0,0,.35) ; }
.sdgs-box .column-list .img-box img{ width: 100%; height: 100%; object-fit: cover; }
.sdgs-box .column-list .txt-box{ font-size: 1.6rem; line-height: 1.58;  }
.sdgs-box .column-list .txt_tit{ font-size: 2rem; font-weight: bold; }
/* document-list */
.sdgs-box .document-list{ display: grid; gap: 20px; grid-template-columns: repeat(auto-fit,minmax(325px, 1fr)); justify-content: center; margin: 0 0 80px 0; }
.sdgs-box .document-list>li{ height: 70px; border: 1px solid #FAA94F; display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem; line-height: 1.58; color: #1f1f1f; box-sizing: border-box; padding: 0 15px 0 20px; position: relative; }
.sdgs-box .document-list>li:after{ content: '\e913'; font-size: 2.4rem; color: #faa94f;  }
.sdgs-box .document-list>li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0;  }
.sdgs-box .document-list>li p{ display: flex; align-items: center; }
.sdgs-box .document-list>li span{ font-size: 4rem; color: #faa94f; margin: 0 20px 0 0; }
/* theme-box */
.sdgs-box .theme-box{  display: flex; position: relative;}
.sdgs-box .slider-box{ position: relative; }
.sdgs-box .theme-list li{ display: flex; flex-direction: row; box-sizing: border-box; padding: 0 0 20px 0; position: relative; }
.sdgs-box .theme-list li a{ display: block; width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; z-index: 1;  }
.sdgs-box .theme-list .col-1{ z-index: 1; position: relative; }
/* .sdgs-box .theme-list .col-2{ display: flex; align-items: end; margin: 0 0 -20px -100px; } */
.sdgs-box .theme-list .col-2{ display: flex; align-items: end; margin: 0 0 -30px 0px; }
.sdgs-box .theme-list .txt-box{ width: 500px; min-height: 230px; background: #b7656d; box-sizing: border-box; padding: 30px 20px 30px 90px; font-size: 1.8rem; line-height: 1.58; color: #fff; margin: 0 0 0 0; }
.sdgs-box .theme-list .txt-box .subtit{ font-size: 2.4rem; font-weight: bolder;  }
.sdgs-box .theme-list .colorborder{ width: 180px; height: 180px; background: #b7656d; position: absolute; left: 0; top: 0; z-index: -1; }
.sdgs-box .theme-list .col-1 img{ width: 110%; margin: 10px 0 0 10px; }
/* .sdgs-box .slider-arrow{ display: flex; justify-content: center; align-items: center; color: #1f1f1f; gap: 10px; position: absolute; right: 0; bottom: 250px; } */
.sdgs-box .slider-arrow{ display: flex; justify-content: center; align-items: center; color: #1f1f1f; gap: 10px; position: absolute; right: 0; bottom: 320px; }
.sdgs-box .slider-arrow>li{ display: flex; justify-content: center; align-items: center; font-size: 2.4rem; width: 50px; height: 50px; border-radius: 100%; border: 1px solid #1F1F1F; }
.sdgs-box .bg-box{ line-height: 0; }
.sdgs-box .bg-box img{ width: 100%; }
/* .sdgs-box.box02 .bg-box{ margin: -150px 0 0 0; } */
.sdgs-box.box02 .bg-box{ margin: -250px 0 0 0; }
/* .sdgs-box.box03 .bg-box{ margin: -80px 0 -380px 0; } */
/* .sdgs-box.box03 .bg-box{ margin: -120px 0 -380px 0; } */
.sdgs-box.box03 .bg-box{ margin: -60px 0 -380px 0; }
.sdgs-box.box03 .bg-box img{ width: 100%; max-height: 300px; }
.sdgs-box .bg-city{ display: flex; justify-content: end; box-sizing: border-box; padding: 0 20vw 0 0; }
.sdgs-box .bg-city img{ width: 40vw; max-width: 500px; }
/* slick dots */
.sdgs-box .dots-list{ position: relative; margin: 20px 0 0 0; }
.sdgs-box .slick-dots{ display: flex; justify-content: center; gap: 10px; }
.sdgs-box .slick-dots li{ width: 16px; height: 16px; border-radius: 100%; background: #B7B7B7; border: 1px solid #fff; text-indent: -9999px; cursor: pointer; }
.sdgs-box .slick-dots li.slick-active{ background: #FCB86C; }

/* footer */
footer{ height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: content-box; padding: 0 0 0 0; color: #1f1f1f; }
.footer-box{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; }
.footer-box h3{ line-height: 0; margin: 0 0 40px 0; }
.footer-box h3 img{ width: 200px; }
.footer-box>.col-1{ width: clamp(100px, 26.7%, 320px); font-size: 1.4rem; line-height: 1.58; order: 1; }
.footer-box>.col-2{ width: clamp(400px, 60%, 720px); order: 2;   }
.footer-box .nav-box{ display: grid; grid-template-columns: repeat(4,auto); gap: clamp(30px, 10%, 70px); font-size: 1.6rem; line-height: 1.8; color: #1F1F1F;   }
.footer-box .nav-box .tit{ font-weight: bold; margin: 0 0 5px 0; border: none; height: auto; line-height: 1.58; }
.footer-box .nav-box .tit:after{ display: none; }
.footer-box .nav-box .interval_above{ margin: 30px 0 0 0; }
.footer-box .nav-box .interval_below{ margin: 0 0 30px 0; }
.footer-box .subnav-box{ display: block; margin: 5px 0 0 0; } 
.footer-box a{ transition: all .8s cubic-bezier(.23,1,.32,1); white-space: nowrap; line-height: 1.58; }
.footer-box a:hover{ color: #f28040;  }
.footer-box .social-nav{ display: flex; gap: 60px; font-size: 2rem; margin: 0 0 30px 20px; }
.footer-box h5{ font-size: 1.4rem; font-weight: normal; }
/* footer-nav */
.footer-nav{ display: flex; flex-wrap: wrap; margin: 0 0 10px 0;  }
.footer-nav li{ font-size: 1.4rem;}
.footer-nav li a{ transition: all .4s cubic-bezier(.23,1,.32,1); }
.footer-nav li a:hover{ color: #069947; }
.footer-nav li+li:before{ content: "|"; margin: 0 15px; line-height: 10px; }

/* gototop */
.gototop{ display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 5px; background: #449F87; box-shadow: 0 3px 6px rgba(0,0,0,.35) ; font-size: 1.6rem; color: #fff; position: fixed; bottom: 2vw; right: 2vw; cursor: pointer; transition: all .8s cubic-bezier(.23,1,.32,1); z-index: 999;  }
.gototop:after{ content: '\e933';  }
.gototop:hover{ background: #f28040; }

/* 細部設定 */
.W\(100%\) { width: 100%; }
.Ta\(c\) { text-align: center; }
.Fz\(16px\) { font-size: 16px; }
.C\(\#f28110\) { color: #f28110; }
.C\(\#ff717b\) { color: #ff717b; }  

.disc-list{ list-style: disc; margin: 0 0 0 25px; }
.decimal-list { list-style: decimal;  margin: 0 0 0 25px;}

.twocol-box{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

/* breadcrumb */
.breadcrumb { font-size: 1.6rem; color: rgba(0, 0, 0, 0.5);  max-width: 1200px; margin: 20px auto; }

/* tit */
.txt_tit{ font-size: 2rem; line-height: 1.58; font-weight: bold; margin: 0 0 10px 0; }

/* =================================     influence     ================================= */
.influence-box{ width: 100%; max-width: 1200px; margin: 50px auto 0; font-size: 1.6rem; line-height: 1.5;  }
.influence-box>li{ display: flex; flex-direction: column; position: relative; box-sizing: border-box; padding: 0 0 30px 0; }
.influence-box h4{ font-size: 5rem; text-align: center; line-height: 1;  margin: -20px 50px 20px 0; font-weight: normal;   }
.influence-year{ display: flex; align-items: start; }
.influence-list{ width: 100%; list-style: disc; position: relative; }
.influence-list:before{ content: ''; width: 1px; height: calc(100% - 50px); background: #000; position: absolute; left: 0; top: 0; transform: translate(-50%,50px); }
.influence-list:after{ content: ''; width: 24px; height: 24px; background: #000; position: absolute; left: 0px; top: 0; transform: translate(-50%,-20%) rotate(45deg); }
.influence-list li{ position: relative; box-sizing: border-box; padding: 0 0 0 0; margin: 0 0 0 60px;   }
.influence-list li a{ display: block; }
.influence-list li+li{ margin: 10px 0 0 60px; }
.influence .btn_link{ font-size: 2.4rem; line-height: 1.58; box-sizing: border-box; color: #DB732C; position: relative; }

/* color set */
/* 2024 */
.color2024 h4{ color: #F28101; }
.color2024 .influence-list:before{ background: #F28101; }
.color2024 .influence-list:after{ background: #F28101; }
.color2024 .influence-list li:hover{ color: #F28101; }
/* 2023 */
.color2023 h4{ color: #FFC936; }
.color2023 .influence-list:before{ background: #FFC936; }
.color2023 .influence-list:after{ background: #FFC936; }
.color2023 .influence-list li:hover{ color: #FFC936; }
/* 2022 */
.color2022 h4{ color: #069947; }
.color2022 .influence-list:before{ background: #069947; }
.color2022 .influence-list:after{ background: #069947; }
.color2022 .influence-list li:hover{ color: #069947; }
/* 2021 */
.color2021 h4{ color: #d30010; }
.color2021 .influence-list:before{ background: #d30010; }
.color2021 .influence-list:after{ background: #d30010; }
.color2021 .influence-list li:hover{ color: #d30010; }
/* 2020 */
.color2020 h4{ color: #E70012; }
.color2020 .influence-list:before{ background: #E70012; }
.color2020 .influence-list:after{ background: #E70012; }
.color2020 .influence-list li:hover{ color: #E70012; }
/* 2019 */
.color2019 h4{ color: #F75763; }
.color2019 .influence-list:before{ background: #F75763; }
.color2019 .influence-list:after{ background: #F75763; }
.color2019 .influence-list li:hover{ color: #F75763; }
/* 2018 */
.color2018 h4{ color: #F58B82; }
.color2018 .influence-list:before{ background: #F58B82; }
.color2018 .influence-list:after{ background: #F58B82; }
.color2018 .influence-list li:hover{ color: #F58B82; }
/* 2017 */
.color2017 h4{ color: #F28101; }
.color2017 .influence-list:before{ background: #F28101; }
.color2017 .influence-list:after{ background: #F28101; }
.color2017 .influence-list li:hover{ color: #F28101; }
/* 2016 */
.color2016 h4{ color: #FAA94F; }
.color2016 .influence-list:before{ background:#FAA94F; }
.color2016 .influence-list:after{ background:#FAA94F; }
.color2016 .influence-list li:hover{ color:#FAA94F; }
/* 2015 */
.color2015 h4{ color: #FFC936; }
.color2015 .influence-list:before{ background: #FFC936; }
.color2015 .influence-list:after{ background: #FFC936; }
.color2015 .influence-list li:hover{ color: #FFC936; }
/* 2014 */
.color2014 h4{ color: #069947; }
.color2014 .influence-list:before{ background: #069947; }
.color2014 .influence-list:after{ background: #069947; }
.color2014 .influence-list li:hover{ color: #069947; }

/* =================================     biodiversity     ================================= */
.biodiversity .subtit{ font-size: 2.4rem; color: #069947;}
.biodiversity .img-box img{ border-radius: 0; }
.biodiversity-container{ box-sizing: border-box; padding: 20px 0 80px 0; }
.biodiversity-container h3{ font-size: 3.6rem; font-weight: bold; line-height: 1.5; text-align: center; margin: 0 0 20px 0; }
.biodiversity .preface-box{ margin: 0 auto; text-align: left; font-size: 1.6rem; line-height: 1.8; }
/* .biodiversity .preface-box .tit{ display: flex; align-items: center; font-size: 3rem; line-height: 1.8; font-weight: bold; margin: 0 0 30px 0; } */
/* .biodiversity .preface-box .tit:before{ content: ''; width: 10px; height: 70px; margin: 0 20px 0 0; } */
.biodiversity-box{ width: 100%; max-width: 1000px; margin: 50px auto 0; font-size: 1.6rem; line-height: 1.8; color: #000; }
.biodiversity ul.chart1 { width:100%; display: flex; flex-wrap: wrap; list-style-type: none; margin-bottom: -20px;}
.biodiversity ul.chart1 li { width:calc(100% / 3 - 20px); min-height: 180px; display: flex; flex-direction: column; align-items: center; border-radius: 20px; margin:0 20px 20px 0; }
.biodiversity ul.chart1 li:nth-child(3) { margin: 0 0 20px 0; }
.biodiversity ul.chart2 li { width:calc(100% / 5 - 10px); height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 20px; margin:0 10px 10px 0; position: relative; }
.biodiversity .common-box .img-box.oneimg img{ width: 100%; }
.biodiversity td.shorttd{ width: 10%; }

/* =================================     effectiveuse     ================================= */
.effectiveuse-nav{ display: flex; }
.effectiveuse-nav li{ width:23.8%; /*width: 15%; total 6 icons*/ height: 160px; border-radius: 15px; border: 1px solid #FFD800; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; font-size: 2.4rem; color: #f28110; font-weight: bold; position: relative; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1); box-sizing: border-box; padding: 10px 10px 10px; margin: 0 0 0 0;  }
.effectiveuse-nav li p{ line-height: 1.2; }
.effectiveuse-nav li+li{ margin: 0 0 0 1.5%; }
.effectiveuse-nav li span{ font-size: 7.6rem; margin: 0  0 10px 0; flex-shrink: 0;  flex-grow: 0; height: 60px; }
.effectiveuse-nav li .p-box{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60px; }
.effectiveuse-nav li.active,.effectiveuse-nav li:hover{ background: #ffd800; color: #000;  }
.effectiveuse-nav li.active:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #FFD800 transparent transparent transparent; position: absolute; bottom: -15px; }
.effectiveuse-txt>div{ display: flex; flex-direction: column; align-items: flex-start; width: 100%; border-radius: 15px; border: 1px solid #FFD800; min-height: 120px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 15px 0 0 0;  }
.effectiveuse .note{ color: #7d7d7d; }
.effectiveuse .svg{ width: 60%; margin:10px auto 60px auto; }
.effectiveuse .hightlight{ color: #F28101; }
.effectiveuse .subtit{ font-size: 2.4rem; color: #069947; margin: 0 0 20px 0; }
.effectiveuse-txt.twocol-box{ justify-content: space-between; }
.effectiveuse-txt .twocol-box .col-1{ max-width: 320px; margin: 0 20px 0 0; }
.effectiveuse-txt .table{ width: 98%; margin: 10px 0 5px 0; }
.effectiveuse-txt .img-box{ margin: 10px 0 10px 0; }
.effectiveuse-txt .img-box.oneimg { align-self: center; }
.effectiveuse-txt .img-box.w75 { width: 75%; }
.effectiveuse table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.effectiveuse table tr{ height: 40px; }
.effectiveuse table td{ width: 45%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.effectiveuse table td:first-child{ width: 13%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
/*.effectiveuse table tbody td:last-child{ text-align: left; box-sizing: border-box; padding: 5px 20px 5px 20px; border: 1px solid #D8D8D8; border-width: 0 1px 1px 1px; }*/
.effectiveuse table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.effectiveuse table a{ color: #069947; text-decoration: underline; }
.effectiveuse .common-box .img-box.oneimg img{ width: 100%;  }
.effectiveuse .twocol-box .col-1{ width: 520px; }

/* =================================     climatechange     ================================= */
.climatechange-nav{ display: flex; }
.climatechange-nav li{ width: 32.5%; height: 100px; border-radius: 15px; border: 1px solid #FFD800; display: flex; justify-content: center; align-items: center; font-size: 2.4rem; color: #f28110; font-weight: bold; position: relative; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1);  }
.climatechange-nav li+li{ margin: 0 0 0 1.5%; }
.climatechange-nav li span{ font-size: 5rem; margin: 0 10px 0 0;  }
.climatechange-nav li.active,.climatechange-nav li:hover{ background: #ffd800; color: #000;  }
.climatechange-nav li.active:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 15px 0 15px; border-color: #FFD800 transparent transparent transparent; position: absolute; bottom: -15px; }
.climatechange-txt>div{ display: flex; flex-direction: column; align-items: flex-start; width: 100%; border-radius: 15px; border: 1px solid #FFD800; min-height: 120px; box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 15px 0 0 0;  }
.disc-list{ list-style: disc; margin: 0 0 0 25px; }
.circle-list{ list-style: circle; margin: 0 0 0 25px; }
.disc-list.td{ list-style: disc; margin: 0 0 0 20px; }
.decimal-list { list-style: decimal;  margin: 0 0 0 25px;}
dl.list_num { width:100%;}
dt { float: left; width: 3.4rem; word-wrap: normal;}
dd { margin-left: 3.4rem; }
.climatechange .img-box{ width: 100%; margin:10px auto 40px auto; }/*width: 90%;*/
.climatechange .img-box.oneimg img{ width: 75%; display: block; margin: 0 auto; }
.quote-y-pg { width: 87%; margin:10px auto 40px auto; }/*width: 90%;*/
  .quote-y-pg{background: unset;}
q:before {
    content: '[';
    font-size: 20rem;
    left:-1.5rem;
    top: -19%;
    transform:none;
    font-weight:normal;
    opacity:normal;
    transform: scaleY(1.4);
}
q:after {
content: ']';
    font-size: 20rem;
    right: -1.5rem;
    top: -19%;
    transform: scaleY(1.4);
}


/* =================================     purchasee     ================================= */
.purchase .twocol-box .col-1{ width: 520px; }

/* =================================    commontable     ================================= */
.commontable table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse: collapse; margin: 10px 0 10px 0; }
.commontable table tr{ height: 40px; }
.commontable table td{  border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 10px 15px 10px 15px; }
.commontable table tbody td:last-child{  border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.commontable table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.commontable table a{ color: #069947; text-decoration: underline; }
.commontable table tbody tr:nth-child(even){ background: #f8f8f8;  }
.commontable table thead { font-weight: bold; background: #d3f7da; text-align: center; }
.commontable table tbody tr:nth-child(even){ background: #f8f8f8;  }
.commontable table tbody td:last-child{ border: 1px solid #D8D8D8; border-width: 0 0 1px 0;  padding: 10px 15px 10px 15px; }
.commontable .tdcenter td{ text-align: center; }
.commontable .table-box{overflow: hidden; }
.commontable .oneimg{ flex-direction: column; align-items: center; }

/* =================================     supply     ================================= */
.supply .subtit{ font-size: 2.4rem; color: #069947  }
.supply .img-box{ margin: 0 0 5px  0; }
.supply .img-box.oneimg img{ width:75%; display: block; margin: 0 auto; }
.supply .note{ color: #777; }

/* =================================     health     ================================= */
.health .subtit{ font-size: 2.4rem; color: #069947;}

/* =================================     external      ================================= */
.external>a{ width: 100%; }
.external>a img{ width: 100%; }
.external table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.external table tr{ height: 40px; }
.external table td{ padding: 10px 15px; }
.external .common-box .img-box.oneimg img{ width: 75%; margin:auto; border-radius: 0; }

/* =================================     management      ================================= */
.management>a{ width: 100%; }
.management>a img{ width: 100%; }
.management table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.management table tr{ height: 40px; }
.management table td{ text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 10px 15px 10px 15px; }
.management table.table01 td:first-child{ width: 15%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.management table.table02 td:first-child{ width: 15%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.management table.table01 td:nth-child(2){ width: 70%; text-align: left; }
.management table.table02 td:nth-child(2){ width: 25%; text-align: left; }
.management table.table02 tbody td:nth-child(3){ width: 30%; text-align: left; }
.management table tbody td:last-child{ text-align: left;  border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.management table.table02 tbody td:last-child{ width: 30%;  }
.management table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.management table a{ color: #069947; text-decoration: underline; }
.management table tbody tr:nth-child(even){ background: #f8f8f8;  }
.management .common-box .img-box.oneimg img{ width: 75%; margin:auto; border-radius: 0; }
.management .common-box .img-box.oneimg100 img{ width: 100%; margin:auto; border-radius: 0; }

/* =================================     csrpolicy     ================================= */
.csrpolicy .subtit{ font-size: 2.4rem; color: #069947  }
.csrpolicy .pdfdownload {
     margin:auto; 
     transform: translateX(4rem);
}

/* =================================     subscription    ================================= */
.subscription .kv-container{ background: url(../images/subscription-kv@2x.jpg) no-repeat center top/cover; }
.main-container{ background: #fff; box-sizing: border-box; padding: 20px 0 80px 0; }
.main-container h3{ font-size: 3.6rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.main-container h3 .hightlight{ color: #f28110; }
.preface-box{ width: 100%; max-width: 1200px; /* font-size: 2rem; */ font-size: 1.6rem; line-height: 1.5; color: #000; text-align: center; margin: 0 auto 40px; }
.qrcode-box{ display: flex; flex-direction: row; justify-content: center; width: 100%; max-width: 1200px; margin: 0 auto;  }
.qrcode-box li{ display: flex; align-items: center; flex-direction: column;  width: 300px; border-radius: 30px; border: 2px solid #D8D8D8; font-size: 2rem; line-height: 1.5; font-weight: 600; box-sizing: border-box; padding: 15px 15px 15px 15px; position: relative; transition: all .6s cubic-bezier(.23,1,.32,1); }
.qrcode-box li:hover{ border-color: #FAA94F; transform: scale(1.05);  }
.qrcode-box li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.qrcode-box li+li{ margin: 0 0 0 50px; }
.qrcode-box li img{ display: block; width: 100%; margin: 10px 0 10px 0; }
.qrcode-box .more{ font-size: 1.2rem; line-height: 1.5; color: #faa94f; align-self: flex-end; }
.qrcode-box .more:after{ content: '\e913'; }

/* =================================     csrreports     ================================= */
.csrreports .note{ color: #7d7d7d; }
.csrreports .hightlight{ color: #F28101; }
.csrreports .subtit{ font-size: 2.4rem; color: #069947; margin: 0 0 20px 0; }
.csrreports .twocol-box{}
.csrreports .twocol-box+.twocol-box{ margin: 60px 0 0 0; }
.csrreports .twocol-box .col-1{ width: 270px; }
.csrreports .twocol-box .col-2{ width: 680px; position: relative; /* margin: 0 0 0 0; */ }
.csrreports .subtit-box{ display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-start; position: absolute; top: 0; right: 0; }
.csrreports .download-type { width: 460px; }
.csrreports .download-type a{ text-decoration: none; color: #000; }
.csrreports .download-type a:hover{ text-decoration: underline; }
.csrreports .langule{ display: flex; justify-content: space-between; align-items: center; width: 200px; height: 40px; border-radius: 10px; border: 1px solid #FFD800; overflow: hidden; }
.csrreports .langule li{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; cursor: pointer;  }
.csrreports .langule li.notyet{ display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; cursor: pointer;  }
.csrreports .langule li.active{ background: #ffd800; }
.csrreports .download-btn{ display: flex; justify-content: center; align-items: center; width: 190px; height: 40px; border-radius: 50px; border: 1px solid #069947; color: #069947; position: relative; margin: 0 0 0 0; }
.csrreports .download-btn p{ width: 70%; text-align: center; }
.csrreports .download-btn span{ font-size: 2rem; }
.csrreports .download-btn a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.csrreports .download-btn+.download-btn{ margin: 10px 0 0 0; }
.csrreports .old_reports .content { display: none; flex-wrap: wrap; justify-content: space-between; padding: 30px 40px;  }
.csrreports .old_reports .twocol-box { width: calc(50% - 40px); align-items: flex-start; justify-content: flex-start; flex-direction: column; border-bottom: 1px solid #D7D7DB; margin: 0 0 50px; }
.csrreports .old_reports .twocol-box .col-1 { width: 100%; min-height: 240px; }
.csrreports .old_reports .twocol-box .col-2 { width: 100%; }
.csrreports .old_reports .langule { width: 160px; height: 35px; font-size: 1.4rem; margin: 0 0 10px 0;}
.csrreports .old_reports .subtit { width: calc(100% - 182px); font-size: 2rem; margin: 0 0 15px 0; }
.csrreports .old_reports .subtit.w100 { width: 100%; }
.csrreports .old_reports .img-box { width: 160px; opacity: 1; }
.csrreports .old_reports .twocol-box { margin: 0 0 50px 0; padding: 0 0 50px 0;}
.csrreports .old_reports .download-type { font-size: 1.5rem; }
.csrreports .common-box .img-box.oneimg img{ width: 100%; border-radius: 10px; }

/* =================================     interactive     ================================= */
.interactive .common-box{ box-sizing: border-box; padding: 0 0 60px 0; }
.startani{ position: relative; }
.startani .start_clound{ position: absolute; width: auto; left: 300px; top: 50px; }
.finishani{ position: relative; }
.finishani .finish_fire{ position: absolute; width: auto; left: 60px; top: 30px; opacity: 1; }
.finishani .finish_ball{ position: absolute; width: auto; left: 100px; top: 50px; }
.finishani .finish_star{ position: absolute; width: auto; left: 90px; top: 50px; }
.interactive .interactive-btn{ width: 300px; height: 60px; font-size: 2.4rem; font-weight: bold; color: #fff; display: flex; justify-content: center; align-items: center; margin: 0 auto; transition: all .1s linear; position: relative; cursor: pointer; }
.interactive .interactive-btn .btn-bg{ width: 100%; height: 100%; position: relative; }
.interactive .interactive-btn .btn-bg:after{ content: ''; width: 100%; height: 100%; border-radius: 50px; background: #33c172; position: absolute; left: 0; top: 0;  transition: all .1s linear; }
.interactive .interactive-btn .btn-bg:before{ content: ''; width: 100%; height: 100%; border-radius: 50px; background: #069947; position: absolute; left: 4px; top: 6px;  transition: all .1s linear; }
.interactive .interactive-btn>span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; transition: all .1s linear; }
.interactive .interactive-btn>span:after{ content: '\e913'; }
.interactive .interactive-btn:hover .btn-bg:after{ left: 4px; top: 7px; }
.interactive .interactive-btn:hover>span{ transform: translate(-40%,-40%); }
.interactive .interactive-btn a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.interactive-qa{ display: flex; }
.interactive-qa .qa-box{ width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: row;   justify-content: space-between; align-items: flex-start; position: relative; }
.interactive-qa .qa-box>.col-1{ width: 400px; order: 2; }
.interactive-qa .qa-box>.col-1 .pup-info{ width: 400px; }
.interactive-qa .qa-box>.col-1 .pup-info>div{ width: 100%; /* height: 500px; */ position: relative; }
.interactive-qa .qa-box>.col-1 .pup-info>div>img{ width: 100%; }
.interactive-qa .qa-box>.col-1 .txt-box{ position: relative; font-size: 1.5rem; line-height:1.58; color: #483939; box-sizing: border-box; padding: 30px 20px 30px 20px; border-radius: 30px; margin: 0 0 -30px 0; }
.interactive-qa .qa-box>.col-1 .info-success .txt-box{ background: #fff; border: 2px solid #A6E2C2; }
.interactive-qa .qa-box>.col-1 .info-error .txt-box{ background: #fff; border: 2px solid #A6E2C2; }
.interactive-qa .qa-box>.col-1 .txt-box:after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0px; border-color: #A6E2C2 transparent transparent transparent; position: absolute; right: 50px; bottom: -50px; z-index: -1; } 
.interactive-qa .qa-box>.col-1 .info-success .txt-box:after{ border-color: #A6E2C2 transparent transparent transparent; } 
.interactive-qa .qa-box>.col-1 .info-error .txt-box:after{ border-color: #A6E2C2 transparent transparent transparent;} 
.interactive-qa .qa-box>.col-1 .txt-box img{ width: 100%; border-radius: 30px; /* position: absolute; left: 0; top: 0; z-index: -1; */ }
.interactive-qa .qa-box>.col-1 .people{  position: relative; }
.interactive-qa .qa-box>.col-1 .tit{ font-size: 1.8rem; line-height: 1.58; color: #483939; font-weight: bold; }
.interactive-qa .qa-box>.col-2{ order: 3; margin: 0 0 20px 0; }
.interactive-qa .q-box{ display: flex; align-items: flex-start; margin: 0 0 20px 0; width: 550px; }
.interactive-qa .q-box .col-1{ display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 60px; height: 50px; background: url(../images/interactive_smallpupbg.svg) no-repeat center top / contain; color: #fff; font-size: 1.6rem; margin: 0 8px 0 0;  }
.interactive-qa .q-box .col-1>span{ font-size: 2.4rem; }
.interactive-qa .q-box .col-2 { font-size: 2rem; line-height: 1.58; color: #069947; font-weight: bold; }
.interactive-qa .a-box{ width: 550px; }
.interactive-qa .a-box>li{ width: 100%; height: 40px; border-radius: 40px; border: 1px solid #D8D8D8; display: flex; justify-content: center; align-items: center; font-size: 1.8rem; color: #000; cursor: pointer; }
.interactive-qa .a-box>li+li{ margin: 10px 0 0 0; }
.interactive-qa .a-box>li.success{ background: #c3f2d9;  }
.interactive-qa .a-box>li.error{ background: #D8D8D8;  }
.interactive-qa .a-txt{ font-size: 2.4rem; line-height: 1.58; font-weight: bold; text-align: center; display: flex; flex-direction: column; align-items: center; margin: 35px 0 20px 0; }
.interactive-qa .a-txt .success{ color: #f28110; }
.interactive-qa .a-txt .error{ color: #ED2525; }
.interactive-step{ display: flex; flex-direction: column; align-items: center; position: absolute; right: -80px; top:0; width: auto;  }
.interactive-step li{ display: flex; flex-direction: column; align-items: center; }
.interactive-step li p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50px; background: #ffe9d0; font-size: 1.2rem; line-height: 1.5; color: #faa94f; transition:all .4s cubic-bezier(.21,1,.23,1);}
.interactive-step li:after{ content: ''; display: block; width: 3px; height: 30px; background: #ffe9d0; }
.interactive-step li:last-child:after{ display: none; }
.interactive-step li.active p{ transform: scale(1.4); background: #f28110; color: #fff; font-weight: bold;  }

/* =================================     communication     ================================= */
.communication-container{ background: #fff; box-sizing: border-box; padding: 20px 0 80px 0; }
.communication-container h3{ font-size: 3.6rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.communication-container h3 .hightlight{ color: #f28110; }
.communication .preface-box{ margin: 0 auto; text-align: left; font-size: 1.8rem; line-height: 1.8; }
.communication-form{ width: 100%; max-width: 1200px; margin: 50px auto 0; /* font-size: 2rem; */ font-size: 1.6rem; line-height: 1.5;  }
.communication-form h4{ font-size: 3rem; line-height: 1.5; color: #f28110; }
.form-header{ display: flex; align-items: center; width: 100%; height: 40px; background: #069947; font-size: 2.4rem; font-weight: bold; line-height: 1.5; color: #fff; box-sizing: border-box; padding: 0 20px; margin: 20px 0 10px;  }
.form-area .tit{ font-size: 2rem; line-height: 1.5; font-weight: bold; }
.checkradio-box{ display: flex; flex-wrap: wrap; margin: 10px 0; }
/* columns 4 */
.checkradio-box.item-4columns>li{ position: relative; width: calc( (100% - 30px)/4); height: 60px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-4columns>li+li{ margin: 0 0 10px 10px; }
.checkradio-box.item-4columns>li:nth-child(3n+1){ margin: 0 0 10px 10px; }
.checkradio-box.item-4columns>li:nth-child(4n+1){ margin: 0 0 10px 0; }
.checkradio-box.item-4columns>li.other{ width: calc( (100% - 15px)/2); }
/* columns 5 */
.checkradio-box.item-5columns>li{ position: relative; width: calc( (100% - 40px)/5); height: 60px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-5columns>li+li{ margin: 0 0 10px 10px; }
.checkradio-box.item-5columns>li:nth-child(3n+1){ margin: 0 0 10px 10px; }
.checkradio-box.item-5columns>li:nth-child(5n+1){ margin: 0; }
.checkradio-box.item-2columns>li{ position: relative; width: calc( (100% - 10px)/2); height: 60px; background: #f7f7f7; display: flex; align-items: center; box-sizing: border-box; padding: 5px 15px; }
.checkradio-box.item-2columns>li+li{ margin: 0 0 10px 10px; }
.communication-form input[type=radio]{position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:2; cursor:pointer; font-size: 13px; color: #8b8b8b; }
.communication-form input[type=radio]+ label{ display: flex; align-items: center; }
.communication-form input[type=radio]+ label:before {content:'\e927'; color:#B1B1B1; margin-right:1rem;}
.communication-form input[type=radio]:checked + label:before {content:'\e928'; color:#40b236;}
.communication-form textarea{ width: 100%; height: 120px; background: #f7f7f7; margin: 10px 0 20px 0; box-sizing: border-box; padding: 20px; resize: none; }
.communication-form .other{ font-size: 1.6rem; width: 390px; height: 40px; margin: 0 0 0 15px; background: #fff; box-sizing: border-box; padding: 0px 20px 0px 20px; }
.communication-form .verification-box{ display: flex; align-items: center; margin: 10px 0 0 0; }
.communication-form .verification-box input{ width: 270px; height: 40px; font-size: 2rem; color: #000; border: 1px solid #B1B1B1; box-sizing: border-box; padding: 0 15px; }
.communication-form .verification-box .verificationcode{ display: flex; align-items: center; margin: 0 10px 0; }
.communication-form .verification-box .btn_reload:after{ content: '\e929'; font-size: 3rem; color: #fcb86c; cursor: pointer; }
.communication-form input[type=button]{ width:200px; height: 50px; border-radius: 30px; background: #f28110; font-size: 2.4rem; color: #fff; display: block; margin: 40px auto 0; }
.communication-step{ display: flex; flex-direction: column; align-items: center; position: fixed; right: 3vw; display: none; }
.communication-step li{ display: flex; flex-direction: column; align-items: center; }
.communication-step li p{ display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50px; background: #ffe9d0; font-size: 1.2rem; line-height: 1.5; color: #faa94f; transition:all .4s cubic-bezier(.21,1,.23,1);}
.communication-step li:after{ content: ''; display: block; width: 3px; height: 50px; background: #ffe9d0; }
.communication-step li:last-child:after{ display: none; }
.communication-step li.active p{ transform: scale(1.4); background: #f28110; color: #fff; font-weight: bold;  }
.communication-form input[type=submit] { margin: 40px 10px 0;}
.communication-form input[type=button] { margin: 40px 10px 0; cursor: pointer;}
.communication-form h5.form-alert {color: red; font-size: 1.6rem;}
.communication .common-box h5:before,.communication .common-box h5:after{ display: none; }

/* =================================     aboutus      ================================= */
.aboutus-nav{ display: flex; justify-content: center; margin: 40px 0 40px 0; }
.aboutus-nav li{ display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; height: 50px; font-size: 1.8rem; font-weight: bold; color: #000; border-radius: 5px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); cursor: pointer; }
.aboutus-nav li.active,.aboutus-nav li:hover{ background: #e70012; color: #fff; }
.aboutus-nav li+li{ margin: 0 0 0 15px; }
.aboutus .subtit{ font-size: 3.4rem; font-weight: normal; color: #649D47;  text-align:center; }
.aboutus .video-box{ width: 80%; margin: 30px auto 20px; }
.video-iframe{ width:100%; height:0; padding-bottom:56.25%; position:relative;}
.video-iframe iframe{ width:100%; height:100%; position:absolute; left:0; top:0;}
.aboutus-history{ position: relative }
.aboutus_year-box{ height: 140px; position: relative; }
.aboutus-history .bg{ width: 100%; height: 10px; border-radius: 10px; background: #c3f2d9; position: absolute; bottom: 10px; }
.aboutus-year{ display: flex; justify-content: flex-start; align-items: flex-end; width: 100%; position: absolute; bottom: 6px; box-sizing: border-box; padding: 0 0 0 100px; }
.aboutus-year>li{ display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year>li+li{ margin: 0 0 0 100px; }
.aboutus-year .year{ display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 1.8rem; line-height: 1.2; color: #069947;  transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year .year .circle{ display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #C3F2D9; background: #fff; margin: 10px 0 0 0;  transition: all .4s cubic-bezier(.23,1,.32,1);  }
.aboutus-year .year .circle span{ width: 10px; height: 10px; border-radius: 100%; background: #069947; transition: all .4s cubic-bezier(.23,1,.32,1); }
.aboutus-year>li.active{ margin: 0 0 -5px 100px; }
.aboutus-year>li:first-child.active{ margin: 0 0 -5px 0px; }
.aboutus-year>li.active .year{ color: #f28110; font-size: 3rem; }
.aboutus-year>li.active .year .circle{ border: 4px solid #FCB86C; width: 25px; height: 25px;  }
.aboutus-year>li.active .year .circle span{ width: 18px; height: 18px; background:#f28110; }
.aboutus_year-txt{ margin: 30px 0 0 0; }
.aboutus_year-txt .year_txt-box{ display: flex; align-items: flex-start; font-size: 1.6rem; line-height: 2; border-bottom: none; box-sizing: border-box; padding: 0 0 20px 0;  }
.aboutus_year-txt .year_txt-box+.year_txt-box{ margin: 20px 0 0 0; }
.aboutus_year-txt .year_txt-box:last-child{ border: none; }
.aboutus_year-txt .year{ margin: 0 30px 0 0; color: #649D47; font-weight: normal; font-size: 3rem; line-height: 1; }
.year_txt-box .txt{ border-left: 2px solid #649D47; box-sizing: border-box; padding: 0 0 0 20px; }
.year_txt-box:nth-child(odd) .year{ color: #e18635; }
.year_txt-box:nth-child(odd) .txt{ border-color: #e18635; }
.aboutus-list{ display: flex; flex-wrap: wrap;  }
.aboutus-list>li{ width: 17%; margin: 0 1.5% 20px 1.5%; background: #f7f7f7; border: 1px solid #D8D8D8; box-sizing: border-box; position: relative; }
.aboutus-list>li>a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.aboutus-list .logo-box{ line-height: 0; position: relative;  }
.aboutus-list .logo-box img{ width: 100% }
.aboutus-list .more-logo{ width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; position: absolute; left: 0; top: 0; }
.aboutus-list .more-logo>a{ width: 40%; line-height: 0; justify-content: center; }
.aboutus-list .txt-box{ font-size: 1.6rem; line-height: 1.5; color: #000; box-sizing: border-box; padding: 10px 10px 10px 10px;  }
.aboutus-list .txt-box .tit01{ font-size: 1.4rem; color: #069947; }
.aboutus-list .txt-box .tit02{ font-size: 1.4rem; color: #F28101; margin: 10px 0 0 0; }
.aboutus table{ width: 100%; border: 1px solid #D8D8D8; border-width: 1px 0 0 1px; border-collapse:collapse; font-size: 1.6rem; line-height: 1.5; }
.aboutus table thead{ background: #e6e6e6; }
.aboutus table tr{ height: 50px; }
.aboutus table td{ border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 0 10px; }
.aboutus table td:nth-child(1){ width: 10%; text-align: center; }
.aboutus table td:nth-child(3){ width: 10%; text-align: center; }
.aboutus table td:nth-child(4){ width: 10%; text-align: center; }
.aboutus table .icon-file-pdf-light{ font-size: 2rem; color: #e70012; }
.aboutus table .hightlight{ color: #F28101; }
.aboutus .profile-list>li{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; border-radius: 10px; border: 1px solid #B7B7B7; box-sizing: border-box; padding: 0 20px 0 20px; margin: 0 0 10px 0; font-size: inherit ; }
.aboutus .info-box,.aboutus .pdf-box{ display: flex; align-items: center; }
.aboutus .info-box .icon-file-pdf-regular{ color: #649d47; margin: 0 15px 0 0; font-size: 2rem; }
.aboutus .pdf-box{ font-size: inherit ;  }
.aboutus .pdf-box div:first-child:after{ content: '|'; color: #b7b7b7; margin: 0 15px 0 15px; }
.aboutus .pdf-box a{ color: #db732c; text-decoration: underline; }

/* =================================    privacy      ================================= */
.privacy{ padding: 100px 0 80px 0; min-height: 530px; }
.decimal-list{ list-style: decimal; margin: 20px 0 0 25px; }
.decimal-list a{ color: #069947; text-decoration: underline; }
.google-search{ width: 100%; height: 65px; border-radius:50px; border: 1px solid #A6E2C2;  position: relative; box-shadow:2px 6px 0px 0px #A6E2C2;  }
.google-search input{ width: 100%; height: 100%; border: none; background: transparent; position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 0 70px 0 20px; color: #a7a7a7 }
.google-search span{ position: absolute; right: 30px; top: 50%; transform: translate(0,-50%); font-size: 3rem; color: #f28110; font-weight: bold; }

/* =================================     esgfocus     ================================= */
.esgfocus-nav{ display: flex; justify-content: center; margin: 40px 0 40px 0; }
.esgfocus-nav li{ min-width: 122px; height: 64px; font-size: 1.8rem; font-weight: bold; color: #000; border-radius: 50px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); }
.esgfocus-nav li.active,.esgfocus-nav li:hover{ background: #e70012; color: #fff; }
.esgfocus-nav li a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; line-height: 1.2;  }
.esgfocus-nav li+li{ margin: 0 0 0 15px; }
.esgfocus .common-box .img-box { border-radius: 10px; }
.esgfocus .common-box .img-box img{ width: 49%; margin:auto; }
.esgfocus .common-box .img-box.oneimg img{ width: 70%; margin:auto; }
.esgfocus .esgfocus-list ul{ flex-direction:row; }
.esgfocus .esgfocus-list ul li:nth-child(1){padding-right:1rem; width:68%;}
.esgfocus .esgfocus-list ul li:nth-child(2){width:30%;}
.esgfocus .esgfocus-list img { box-sizing: border-box; width: 100%; height: auto; border-radius: 10px; }
.esgfocus .esgfocus-list ul li .img-box.imgto70p img{ width: 300px; margin: auto; padding:0 2rem;}
.esgfocus .imgcenter{ margin:10px auto 40px auto; }
.esgfocus .subtit{ font-size: 2.4rem; line-height: 1.5; color: #069947; }
.esgfocus table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.esgfocus table tr{ height: 40px; }
.esgfocus table td:first-child{ width: 20%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.esgfocus table td:last-child{ text-align: center; box-sizing: border-box; padding: 0 20px 0 20px; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.esgfocus table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.esgfocus table a{ color: #069947; text-decoration: underline; }
.esgfocus table tbody tr:nth-child(even){ background: #f8f8f8;  }
.esgfocus table ul{ display: inline-block; list-style: disc; margin: 0 0 0 20px; text-align: left; margin: 10px 0; }
.esgfocus .s-imgbox.img-box{width:60%; margin:auto;}
.common-box .img-box.s-imgbox img:nth-child(1) {flex-direction: row; width:45%;}
.common-box .img-box.s-imgbox img:nth-child(2) {flex-direction: row; width:55%;}

/* =================================     stakeholder     ================================= */
.stakeholder .common-box .img-box.oneimg img{ width:80%; margin:auto; border-radius: 0; }

/* =================================     sdgs     ================================= */
.sdgs .kv-container{ background: url(../images/sdgs-kv.jpg) no-repeat center center/cover; }
.sdgs .demo-dots .slick-dots { padding-bottom: 60px; }
.sdgs .demo-dots .slick-dots li { margin: 0 15px;}
.sdgs .demo-dots .slick-dots li.slick-active:before {top: 90px;}
.sdgs .sdgs-slick_content { padding: 30px 40px; }
.sdgs .sdgs-slick_content .subtit { font-size: 2.4rem;}
.sdgs-table table{ font-size: 1.6rem; }

/* =================================     donate     ================================= */
.kv-slider-container{ width: 100vw; height: 39.0625vw; max-height: 600px; /* overflow: hidden;  */  margin-top: 0px; }
.kv-slider{ height: 100%; position: relative;}
.kv-slider li{ /* height: 100%; */ }
.kv-slider .slick-list{ height: 100%; }
.kv-slider .slick-track{ height: 100%; }
/* kv slick dots */
.kv-slider-container .dots-list{ display: flex; align-items: center; justify-content: center; height: 50px; position: relative; bottom: auto;  }
.kv-slider-container .dots-list .slick-dots{ display: flex; }
.kv-slider-container .dots-list li{ width: 10px; height: 10px; border-radius: 50%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.kv-slider-container .dots-list li.slick-active{ background: #F28101;  }
.kv-slider-container .dots-list li+li{ margin: 0 0 0 15px; }
.donate-nav{ display: flex; justify-content: center; margin: 40px 0 40px 0; }
.donate-nav li{ height: 50px; font-size: 1.8rem; font-weight: bold; color: #000; border-radius: 5px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); font-weight: normal;  }
.donate-nav li.active a,.donate-nav li:hover a{ background: #e70012; color: #fff; }
/* .donate-nav li:last-child{ border-color: #F28101; color: #F28101; } */
.donate-nav li.active:last-child,.donate-nav li:last-child:hover{ background: #f28110; color: #fff;  }
.donate-nav li a{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; color: #cf2d2c; }
.donate-nav li+li{ margin: 0 0 0 15px; }
.donate .mobile{ display: none; }
.donate .threecol-box .mobile{ display: none; }
.donate .pc{ display: block; }
.donate .subtit{ font-size: 2.4rem; line-height: 1.5; color: #e70012; font-weight: bold; margin: 0 0 20px 0; }
.donate .hightlight-box{  border-radius: 10px; background: #fff0f1;  box-sizing: border-box; padding: 20px 20px 20px 20px; margin: 0 0 30px 0;}
.donate .hightlight-box .hltit{ font-size: 2rem; font-weight: bold; }
.donate .hightlight-box .note-list{ list-style-type: decimal; margin: 0 0 0 20px; }
.donate-subnav{  }
.donate-subnav li{ /* width: 330px; */ width: 100%; min-height: 64px; display: flex; justify-content: flex-end; align-items: flex-end; position: relative; }
.digit .donate-subnav li{ min-height: 60px;  }
.ibon-step .donate-subnav li{ cursor: pointer;  }/*
.donate-subnav li+li{ margin: 10px 0 0 0; }*/
.donate-subnav li{ margin: 10px 0 0 0; }
.donate-subnav li>div:first-child{ width: 50px; height: 50px; border-radius: 10px; font-size: 2.4rem; color: #fff; background: #e70012; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; box-shadow: 1px 1px 0px 0px #fff;  }
.donate-subnav li>div:last-child{ width: 97%; min-height: 54px; border-radius: 10px; border: 1px solid #e70012; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 5px 5px 5px 50px; font-size: 1.6rem; line-height: 1.4; transition: all .4s cubic-bezier(.23,1,.32,1);  }
.donate-subnav.textcenter li>div:last-child{ text-align: center; }
.digit .donate-subnav li>div:last-child{ min-height: 54px; }
.ibon-step{ display: flex; flex-direction: row; margin: 0 0 60px 0;  }
.ibon-step .col-1{ margin: 0 20px 0 0; }
.ibon-step .col-2{ width: calc(100% - 350px); display: flex; flex-shrink: 0; justify-content: center; align-items: center; position: relative; }
.ibon-step .donate-subnav li:hover>div:last-child,.ibon-step .donate-subnav li.active>div:last-child { background: #e70012; color: #fff; }
.ibon-slick{ width: 580px; line-height: 0; }
.ibon-slick li img{ width: 100%; }
/* ibon slick dots */
.ibon-slick-box .dots-list{ display: flex; align-items: center; justify-content: center; height: 50px; position: relative; bottom: auto;  }
.ibon-slick-box .dots-list .slick-dots{ display: flex; }
.ibon-slick-box .dots-list li{ width: 10px; height: 10px; border-radius: 50%; background: #d8d8d8; text-indent: -9999px; cursor: pointer; }
.ibon-slick-box .dots-list li.slick-active{ background: #F28101;  }
.ibon-slick-box .dots-list li+li{ margin: 0 0 0 15px; }
/* ibon slick arrow */
.ibon-slick-box .prev,.ibon-slick-box .next{ display: inline-block; font-size: 3.8rem; font-weight: bold; color: #989898; position: absolute; cursor: pointer; }
.ibon-slick-box .prev{ left: 0; top: 50%; transform: translateY(-50%); } 
.ibon-slick-box .next{ right: 0; top: 50%; transform: translateY(-50%); } 

.twocol-box .col-1,.twocol-box .col-2{ width: 490px; }
.twocol-box .col-2{ margin: 0 0 0 0; }
.donate .twocol-box{ margin: 0 0 50px 0; }
.donate .threecol-box{ display: flex; }
.donate .threecol-box.sixtoeight{ margin: 15px 0 0 0; }
.donate .threecol-box .col-1{ width: 32%; }
.donate .threecol-box .col-2{ width: 32%; }
.donate .threecol-box .col-3{ width: 32%; }
.donate .threecol-box>div+div{ margin: 0 0 0 2%; }
.subtit-header{ display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 10px; background: #fff0f1; font-size: 2rem; font-weight: bold; }
.twocol-box .img-box{ border-radius: 10px; overflow: hidden; margin: 0 0 15px 0; }
.threecol-box .img-box{ border-radius: 10px; overflow: hidden; margin: 0 0 15px 0; }
.donate .table-header{ height: 50px; display: flex; justify-content: center; align-items: center; font-size: 2rem; font-weight: bold; background: #fff0f1; margin: 0 0 5px 0;  }
.donate table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 0 0 30px 0; }
.donate table tr{ height: 40px; }
.donate table td{ border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; box-sizing: border-box; padding: 10px 10px 10px 10px; }
.donate table td:first-child{ width: 10%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.donate table td:last-child{ box-sizing: border-box; padding: 10px 10px 10px 10px; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.donate table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.donate table a{ color: #069947; text-decoration: underline; }
.donate .img-list{ display: flex; flex-wrap: nowrap; }
.donate .img-list li{ display: flex; flex-direction: column;  align-items: center; font-size: 2rem; line-height: 1.5; font-weight: bold; position: relative;  }
.donate .img-list li a{ width: 100%; height: 100%; line-height: 0; position: absolute; left: 0; top: 0; }
.donate .img-list li:hover .img-box{ border: 3px solid #E70012; }
.donate .img-list li:hover .txt-box{ color: #e70012; }
.donate .img-list li a{ width: 100%; line-height: 0; }
.donate .img-list .img-box{ display: flex; justify-content: center; align-items: center; width: 190px; height: 190px; border-radius: 50%; border: 1px solid #E70012; margin: 0 0 10px 0; transition: all .4s cubic-bezier(.23,1,.32,1); box-sizing: border-box; }
.donate .img-list .img-box img{ width: 50%;  }
.donate .img-list li:first-child .img-box img,.donate .img-list li:last-child .img-box img{ width: 60%;  }
.donate .img-list li img{ width: 100%;  }
.donate .img-list li+li{ margin: 0 0 0 20px; }
.donate .img-list .txt-box{ display: flex; flex-direction: column; align-items: center; font-size: 2rem; }

/* =================================     csrcommittees     ================================= */
.csrcommittees .kv-container{ background: url(../images/csrcommittees-kv@2x.jpg) no-repeat center center/cover; }
.csrcommittees-container{ background: #fff; box-sizing: border-box; padding: 20px 0 80px 0; }
.csrcommittees-container h3{ font-size: 3.6rem; font-weight: bold; line-height: 1.5; color: #069947; text-align: center; margin: 0 0 20px 0; }
.csrcommittees-container h3 .hightlight{ color: #f28110; }
.csrcommittees .preface-box{ margin: 0 auto; text-align: left; font-size: 1.6rem; line-height: 1.8; }
.csrcommittees-box{ width: 70%; max-width: 1200px; margin: 50px auto 0; }
.csrcommittees-box img{ width: 100%; }

/* =================================     targetsandprogress     ================================= */
.targetsandprogress .common-box .img-box.oneimgnomargin{ margin: 10px 0 10px 0;}
.targetsandprogress .common-box .img-box.oneimg img,
.targetsandprogress .common-box .img-box.oneimgnomargin img{ width: 100%; border-radius: 0; }
.targetsandprogress .common-box a{ color: #069947; text-decoration: underline; }
.targetsandprogress-nav { width: 90%; margin: 30px auto 30px auto; }
.targetsandprogress-nav li{ height: 100px; font-size: 2.4rem; }

/* =================================     esgfocus     ================================= */
.esgfocus-nav{ display: flex; justify-content: center; margin: 40px 0 40px 0; }
.esgfocus-nav li{ min-width: 122px; height: 64px; font-size: 1.8rem; font-weight: bold; color: #000; border-radius: 50px; border: 1px solid #E70012; transition: all .4s cubic-bezier(.23,1,.32,1); }
.esgfocus-nav li.active,.esgfocus-nav li:hover{ background: #e70012; color: #fff; }
.esgfocus-nav li a{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 30px; line-height: 1.2;  }
.esgfocus-nav li+li{ margin: 0 0 0 15px; }
.esgfocus .common-box .img-box { border-radius: 10px; }
.esgfocus .common-box .img-box img{ width: 49%; margin:auto; border-radius: 10px;  }
.esgfocus .common-box .img-box.oneimg img{ width: 70%; margin:auto; border-radius: 10px; }
.esgfocus .esgfocus-list ul{ flex-direction:row; }
.esgfocus .esgfocus-list ul li:nth-child(1){padding-right:1rem; width:68%;}
.esgfocus .esgfocus-list ul li:nth-child(2){width:30%;}
.esgfocus .esgfocus-list img { box-sizing: border-box; width: 100%; height: auto; border-radius: 10px; }
.esgfocus .esgfocus-list ul li .img-box.imgto70p img{ width: 300px; margin: auto; padding:0 2rem;}
.esgfocus .imgcenter{ margin:10px auto 40px auto; }
/* .esgfocus .subtit{ font-size: 2.4rem; line-height: 1.5; color: #069947; } */
.esgfocus .subtit{ font-size: 2rem; font-weight: normal; line-height: 1.5; color: #E88643; }
.esgfocus table{ width: 100%; font-size: 1.6rem; line-height: 1.5; border: 1px solid #D8D8D8; border-width: 1px 1px 0 1px; border-collapse:collapse; margin: 10px 0 10px 0; }
.esgfocus table tr{ height: 40px; }
.esgfocus table td:first-child{ width: 20%; text-align: center; border: 1px solid #D8D8D8; border-width: 0 1px 1px 0; }
.esgfocus table td:last-child{ text-align: center; box-sizing: border-box; padding: 0 20px 0 20px; border: 1px solid #D8D8D8; border-width: 0 0 1px 0; }
.esgfocus table thead { font-weight: bold; background: #e6e6e6; text-align: center; }
.esgfocus table a{ color: #069947; text-decoration: underline; }
.esgfocus table tbody tr:nth-child(even){ background: #f8f8f8;  }
.esgfocus table ul{ display: inline-block; list-style: disc; margin: 0 0 0 20px; text-align: left; margin: 10px 0; }
.esgfocus .s-imgbox.img-box{width:60%; margin:auto;}
.common-box .img-box.s-imgbox img:nth-child(1) {flex-direction: row; width:45%;}
.common-box .img-box.s-imgbox img:nth-child(2) {flex-direction: row; width:55%;}



}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){

/* header */
header{ font-size: 1.5rem; }
header h3 img{ width: 180px; }
.quick-nav{ gap: 18px; margin: 0 10px 0 0; }
.quick-nav .drop-nav{ font-size: 1.5rem; }
header .social-nav{ gap: 15px; font-size: 1.8rem; margin: 0 10px 0 10px; }

}

@media (resolution: 144dpi), (resolution: 1.5dppx) {


}