@import url('/fonts/icomoon/style.css');
/* reset */
*{ margin:0; padding:0; font-size:10px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; outline:none; font-display:swap; }
html,body{ font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Open Sans','Arial',sans-serif; overscroll-behavior:none; }
html{ -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body{ margin:0; -webkit-overflow-scrolling:touch; text-align:center; }
:before,:after{ font-family:'icomoon',sans-serif; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary,div,a{ display:block; box-sizing:border-box; position:relative;}
a{ background:transparent; text-decoration:none; color:inherit; cursor:pointer; line-height:1em; display:inline-block; font-size:inherit;}
a:active{ outline:0; }
b,strong{ font-weight:bold; }
dfn{ font-style:normal; }
picture,img{ border:0; vertical-align:middle; line-height:0; font-size:0; width:100%; height:auto; }
input,textarea,button,select,option{ border:0; margin:0; outline:none; padding:0; font-size:inherit; font-family:'Noto Sans TC','Microsoft JhengHei','Apple LiGothic Medium','Open Sans','Arial',sans-serif; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none; appearance:none; }
label,span{ font-size:inherit; }
textarea{ resize: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; }
table{ border-collapse:collapse; border-spacing:0; }
td,th{ padding:0; }
h1,h2,h3,h4,h5,h6,p,figure,form,blockquote{ margin:0; font-weight:normal; line-height:1em; margin-bottom:0;}
p,td,th,a,span,strong,b{ font-size:inherit; line-height:1.6em; }
ul,ol,li,dl,dd{ margin:0; padding:0; font-size:inherit;}
ul,ol{ list-style:none; box-sizing:border-box; }

.container-full ,.container{ padding:0 15px; width:100%; margin:0 auto; position:relative; }
.loading{ width:100vw; height:100%; min-height:100vh; position:fixed; left:0; top:0; background-color:#F0ECE3; z-index:100; display:flex; justify-content:center; align-items:center;}
.loading img{ width:260px; }

body{ color:#222; }
body,
nav{ background-color:#F0EBE2; background-image:url(/images/bg_cloud.svg),url(/images/bg.jpg); background-position:121% -1%,0% 0%; background-repeat:no-repeat, repeat; background-size:44% auto,auto; transition:all .7s ease-in;} body{ position:relative; width:100%; max-width:100%; overflow-x:hidden; height:100vh; height:calc(var(--vh, 1vh) * 100);}
nav{ overscroll-behavior:contain; /*阻止滚动父元素*/ }
h2{ font-size:clamp(3rem, 7.6vw, 3.6rem); font-weight:600; color:#0B8649; margin-bottom:.6em; line-height:1.5; }
h2:before{ content:'\e903'; margin-right:6px; color:#FF9933; }
h2.white{ color:#fff; }
p{ font-size:clamp(1.6rem, 4.1vw, 1.8rem); }
a.underline{ text-decoration:underline; transition:all .4s ease-in; }
a.underline:hover{ opacity:.7; }
section .images_block img{ height:auto; }
.slick-slider .slick-slide{ opacity:.25; transition:opacity .8s ease-out; }
.slick-slider .slick-slide.slick-active{ opacity:1; }
.slick-slider ul.slick-dots{ display:flex; justify-content:center; font-size:1.5rem; gap:12px; margin-top:18px; }
.slick-slider ul.slick-dots li{ font-size:0; }
.slick-slider ul.slick-dots button{ font-size:0; background:#fff; width:1.5rem; height:1.5rem; border-radius:50%; cursor:pointer; }
.slick-slider ul.slick-dots .slick-active button{ background:#FF717C;  }
.btn{ cursor:pointer; }
.btn.plus:after{ content:'\e906'; }
.btn.arrow:after{ content:'\e904'; }
.btn.arrow.prev:after{ content:'\e90b';}
.btn.pdf:after{ content:'\e90d'; }
.btn.shadow{ box-shadow:0 4px #22222280; transition:all .3s ease-in; }
.btn.radius{ border-radius:2em; font-size:clamp(1.4rem, 3.5vw, 1.6rem); padding:.5em 1.4em;}
.btn.radius.white{ background:#ffffffb3; transition:all .5s ease-out;}
.btn.radius.red{ background:#FF717C; color:#fff;  }
.btn.top{ line-height:1; } 
.btn.top:before{ content:'\e907'; }
.textEn{ font-family:'Open Sans','Arial',sans-serif; }
.news_list{ margin-bottom:40px; }
.news_list figure{ position:relative; background:#fff; border-radius:10px; padding:16px; margin:0 10px; }
.news_list figure a{ width:100%; }
.news_list figure .images_block{ position:relative; border-radius:10px; overflow:hidden; margin-bottom:12px; width:100%; padding-top:74.8%; }
.news_list figure .images_block img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } 
.news_list figure figcaption{ text-align:left; overflow:hidden; }
.news_list figure figcaption .tags{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.8em; align-items:center; font-size:clamp(1.4rem, 3.5vw, 1.6rem); font-weight:600;}
.news_list figure figcaption .tags .date{ color:#5FBC8E; padding:0; background:transparent; }
.news_list figure figcaption .tags .types{ display:flex; flex-wrap:wrap; gap:4px; }
.news_list figure figcaption .tags .types li{ font-size:inherit; padding:.6em 1.5em; background:#FFE836; border-radius:1.5em;  }
.news_list figure figcaption h3{ font-size:clamp(1.8rem, 4.6vw, 2rem); font-weight:600; line-height:1.4; margin-bottom:.4em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; }
.news_list figure figcaption p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; min-height:3.2em; }
.news_list figure.pin_new:after{ content:'NEW'; position:absolute; top:0; left:0; transform:translateY(-25%);  font-size:1.8rem; background:#FF717C; color:#fff; padding:.4em 1.2em; border-radius:2em; display:inline-block; box-shadow:0 3px 6px 0 #00000029; line-height:1; }
.news_list.diy_list figure figcaption .tags .date{ color:#C69B0E; }
.news_list.cinema_list figure figcaption .tags .date{ color:#FFB366; }
.movie_list{ display:flex; flex-direction:column; gap:20px; margin-bottom:24px; }
.movie_list figure{ background:#fff; border-radius:10px; padding:16px; margin:0 10px; }
.movie_list figure .images_block{ border-radius:10px; overflow:hidden; margin-bottom:12px; }
.movie_list figure figcaption{ text-align:left; overflow:hidden; }
.movie_list figure figcaption .tags{ display:flex; justify-content:space-between; margin-bottom:.7em;}
.movie_list figure figcaption .tags .date{ font-size:clamp(1.4rem, 3.5vw, 1.6rem); color:#FFB366; font-weight:600;  }
.movie_list figure figcaption p{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.kv_top{ position:relative; height:300px; display:flex; justify-content:center; align-items:center;} 
.kv_top picture,
.kv_top img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.kv_top h1{ position:absolute; top:10%; left:50%; transform:translate(-50%,-0%); font-size:clamp(3rem, 7.6vw, 4rem); color:#2C9460; font-weight:600; }
.kv_bottom{ width:100%; height:80px; } 
.kv_bottom img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.breadcrumbs{ background:#5FBC8E; }
.breadcrumbs ul{ display:flex; width:100%; max-width:1100px; padding:10px 0; margin:0 auto;}
.breadcrumbs li{ font-size:1.6rem; color:#fff; line-height:1; }
.breadcrumbs li a{ line-height:1; transition:.4s ease-in; }
.breadcrumbs li a:hover{ color:#ffe837;  }
.breadcrumbs li + li:before{ content:'\e904'; font-size:.8em; margin:0 .4em;  }
.search_bar{ margin-top:30px; display:flex; justify-content:space-between; gap:10px; }
.search_bar select,
.search_bar input,
.search_bar button{ font-size:clamp(1.6rem, 4.1vw, 1.8rem); border-radius:10px; padding:.4em 1em; width:100%;  }
.search_bar select{ cursor:pointer; }
.search_bar .select_style{ flex:1 2 125px; position:relative; font-size:clamp(1.6rem, 4.1vw, 1.8rem);}
.search_bar .select_style:after{ content:'\e90a'; position:absolute; top:50%; right:0; pointer-events:none; font-size:.6em; transform:translate(-0.5em, -50%); }
.search_bar .input_style{ flex:2 2 auto; }
.search_bar .input_style .search_icon{ position:absolute; right:0; width:2.5em; padding:0.4em 0; background:transparent; color:#ff707c; cursor:pointer;} 
.page_control{ padding-bottom:8px; }
.page_control,.page_control .page_num{ display:flex; justify-content:center; align-items:center; gap:10px; }
.page_control a{ font-size:clamp(1.6rem, 4.1vw, 1.8rem); color:#222; border-radius:2em; min-width:2.5em; height:2.5em; line-height:2.5em; background:#fff; text-align:center; }
.page_control a.btn.arrow:after{ font-size:.7em; }
.page_control a.active { background:#FF707C; color:#fff; }
.page_control a.disable { background:#BFBFBF; color:#fff; pointer-events:none; }
.page_control a.btn.back{ padding:0 1.5em; background:#ff727c; color:#fff; }
.share_box{ position:absolute; top:0; right:16px; width:100%; height:100%; pointer-events:none; z-index:89; } 
.share_link{ display:flex; justify-content:flex-end; gap:16px; margin:22px 0 8px; position:sticky; top:16px; right:0;}
.share_link li a{ pointer-events:auto; background:#fff; border-radius:2em; line-height:1; font-size:2rem; width:2em; height:2em; display:flex; align-items:center; justify-content:center; }
.share_link li a:before{ content:''; font-size:inherit; width:1em; display:inline-block; color:#fff;}
.share_link li a:hover:before{ color:#fff; transition:color .4s ease-in; }
.share_link li.copy a,.share_link li.copy a:hover{ background:#FF717C;}
.share_link li.line a,.share_link li.line a:hover{ background:#07CB42;}
.share_link li.fb a,.share_link li.fb a:hover{ background:#0866FF; }
.share_link li.copy a:before{ content:'\e90c'; }
.share_link li.line a:before{ content:'\e902'; }
.share_link li.fb a:before{ content:'\e900'; }
.detail .recommend,
.detail .info,
.detail .edit_area{ width:100%; max-width:900px;  }
.detail .edit_area{ background:#fff; padding:24px 16px; border-radius:20px; text-align:left; font-family:'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Open Sans', 'Arial', sans-serif!important;}
.detail .edit_area p,
.detail .edit_area span,
.detail .edit_area strong,
.detail .edit_area ul,
.detail .edit_area ol,
.detail .edit_area li{ font-family:'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Open Sans', 'Arial', sans-serif!important;}
.detail .edit_area ul,
.detail .edit_area ol{ margin-left:1.4em; }
.detail .edit_area img{ width:auto; max-width:100% !important; height:auto !important; }
.detail .recommend{ margin-bottom:40px;  margin:0 auto 48px; }
.detail .recommend_list{ display:flex; flex-direction:column; align-items:stretch; font-size:clamp(1.6rem, 4.1vw, 1.8rem); text-align:left; border-top:dotted 3px #fff;}
.detail .recommend_list li{ border-bottom:dotted 3px #fff; transition:background .6s ease-out; }
.detail .recommend_list li:hover{ background:#ffffff80; color:#FF717C; }
.detail .recommend_list a{ width:100%; line-height:1.6; padding:.6em 1.4em; }
.detail .info{ margin:0 auto; padding-top:69px;}
.detail .info figure figcaption{ text-align:left; overflow:hidden; }
.detail .info figure figcaption .tags{ display:flex; justify-content:flex-start; margin-bottom:1em; align-items:center; font-size:clamp(1.4rem, 3.5vw, 1.6rem); font-weight:600; gap:1em;} 
.detail .info figure figcaption .tags .date{ color:#5FBC8E; padding:0; background:transparent; }
.detail .info figure figcaption .tags .types{ display:flex; flex-wrap:wrap; gap:4px; }
.detail .info figure figcaption .tags .types li{ font-size:inherit; padding:.8em 1.5em; background:#FFE836; border-radius:1.5em;  }
.detail .info figure figcaption h3{ font-size:clamp(2.5rem, 6.4vw, 3rem); font-weight:600; line-height:1.4; margin-bottom:1em; }
.detail .info figure figcaption p{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; }
.detail .info .images_block{ border-radius:20px; overflow:hidden; }
.detail .info .images_block img{ width:100%; height:auto; }
.detail .edit_area{ margin:24px auto 48px; }
.detail .edit_area p{ font-size:16px; }

header{ position:relative; z-index:90; }
header .header-container{ width:100%; padding:20px; display:flex; justify-content:space-between; align-items:center;  }
header .logo{ width:125px; position:relative; z-index:5;}
header .socialMedia{ display:flex; justify-content:center; gap:48px; }
header .socialMedia li a:before{ content:''; font-size:clamp(2.4rem, 7.6vw, 3rem); width:1em; display:inline-block; }
header .socialMedia li.line a:before{ content:'\e902'; }
header .socialMedia li.fb a:before{ content:'\e900'; }
header .socialMedia li.ig a:before{ content:'\e901'; }
header .navToggle{ width:36px; height:36px; position:relative; z-index:5;}
header .navToggle span ,header .navToggle span:before ,header .navToggle span:after{ display:block; width:100%; background:#FF9933; height:2px; border-radius:2px;}
header .navToggle span{ position:relative; top:50%; transition:background .3s .4s;}
header .navToggle span:before ,header .navToggle span:after{ content:''; position:absolute; }
header .navToggle span:before{ top:-1em;  transition:transform .1s .3s ,top .3s .7s;}
header .navToggle span:after{ bottom:-1em; transition:transform .1s .3s ,bottom .3s .7s;}
header nav{ position:fixed; top:0; left:0; width:100%; height:100vh; height:calc(var(--vh, 1vh) * 100); opacity:0; pointer-events:none; }
header nav .mainMenu{ margin:110px 20px 60px; border-bottom:solid 1px #FFF; color:#383838; font-size:1.6rem; text-align:left;  }
header nav .mainMenu a.btn:after{ position:absolute; right:20px;}
header nav .mainMenu a.btn.arrow:after{ color:#FF9933; }
header nav .mainMenu a.btn.plus:after{ color:#5FBC8E; }
header nav .mainMenu > li > a{ width:100%; padding:.6em 20px; border-top:solid 1px #FFF;}
header nav .mainMenu > li > a:before{ content:'\e903'; margin-right:6px; color:#FF9933; }
header nav .mainMenu li .subMenu{ font-size:inherit; height:0; overflow:clip; }
header nav .mainMenu li.active .subMenu{ height:auto; } 
header nav .mainMenu .subMenu li{ background:#ffffffc9; }
header nav .mainMenu .subMenu li > a{ padding:.6em 20px .6em 40px; width:100%; }
header nav .mainMenu .subMenu li { margin-bottom:1px; }
header .navCheck:checked + label.navToggle span{ background:none; transition:background .3s;}
header .navCheck:checked + label.navToggle span:before{ top:0; transform:rotate(45deg); transition:top .2s .1s,transform .2s .4s;}
header .navCheck:checked + label.navToggle span:after{ bottom:0; transform:rotate(-45deg); transition:bottom .2s .1s,transform .2s .4s;}
header .navCheck:checked + label + nav{ opacity:1; pointer-events:auto; }
header nav .mainMenu > li,
header nav .mainMenu li .subMenu li{ transition:all .4s ease-out; opacity:0; transform:translateY(-8px);}
header .navCheck:checked + label + nav .mainMenu > li,
header nav .mainMenu li.active .subMenu li{ opacity:1; transform:translateY(0);} 
header .navCheck:checked + label + nav .mainMenu > li:nth-of-type(2),
header nav .mainMenu li.active .subMenu li:nth-of-type(2){ transition-delay:.2s; } 
header .navCheck:checked + label + nav .mainMenu > li:nth-of-type(3),
header nav .mainMenu li.active .subMenu li:nth-of-type(3){ transition-delay:.4s; } 
header .navCheck:checked + label + nav .mainMenu > li:nth-of-type(4),
header nav .mainMenu li.active .subMenu li:nth-of-type(4){ transition-delay:.6s; } 
header .navCheck:checked + label + nav .mainMenu > li:nth-of-type(5),
header nav .mainMenu li.active .subMenu li:nth-of-type(5){ transition-delay:.8s; } 
footer{ background:url(/images/bg_footer.jpg); }
footer .footer-container{ width:100%; padding:20px;  }
footer .logo{ width:clamp(156px, 40vw, 188px); }
footer .btn_group{ display:flex; flex-direction:column; gap:20px; margin-bottom:24px; }
footer .btn_group ul{ display:flex; gap:10px; align-items:flex-start; }
footer .text_block{ font-size:clamp(1.4rem, 3.5vw, 1.6rem); text-align:left; }
footer .text_block li{ margin-bottom:1em; }
footer .text_block a + a{ margin-left:3em; }
footer .btn.top{ background:#FF717C; font-size:clamp(2.1rem, 5.3vw, 2.9rem); padding:0.4em; border-radius:10px 0 0 10px; color:#fff; position:fixed; right:0; bottom:216px;  }

.index{ background:url(../images/index/bg_index_cloud.svg) no-repeat -23px 123px; background-size:30%; }
.index .sp_banner{ margin-bottom:24px; }
.index .sp_banner .slick-list{ border-radius:20px; overflow:hidden; }
.index .about_box{ background:url(/images/index/bg_about.png) no-repeat bottom center; background-size:100% auto; padding-bottom:48vw; margin-bottom:-26vw; } 
.index .about_box .text_block{ text-align:left; }
.index .bg_earth{ background:url(/images/index/bg_earth.png) no-repeat top center; background-size:100% auto; padding-top:25vw;}
.index .bg_earth:after{ content:''; display:block; width:100%; padding-top:73%; background:url(/images/index/bg_earth_after.png) no-repeat bottom; center; background-size:100% auto; pointer-events:none; }
.index .plan .text_block{ width:80%; margin:24px auto; display:flex; flex-direction:column; gap:48px; }
.index .plan h3{ font-size:clamp(2rem, 5.1vw, 2.4rem); background:#FF9933; color:#fff; font-weight:600; padding:.4em .8em; border-radius:2em; display:inline-block; margin-bottom:16px; }
.index .plan p b{ font-weight:600; }
.index .plan p strong{ font-weight:600; color:#FFE836; }
.index .plan .num_group{ display:flex; color:#FFE836; font-size:clamp(10rem, 5vw, 12rem);  font-family:'Open Sans','Arial',sans-serif; line-height:1; justify-content:center; align-items:baseline;} 
.index .plan .num_group span{ line-height:1.2; } 
.index .plan .num_group .middle{ font-size:.7em; transform:translateY(-0.08em);}
.index .plan .num_group .small{ font-size:.3em; }
.index .news_box h2{ font-family:'Open Sans','Arial',sans-serif; }
.index .bg_movie{ background:url(/images/index/bg_movie.png) no-repeat top center; background-size:cover; padding-top:45vw; margin-top:48px; pointer-events:none; }
.index .bg_movie:after{ content:''; display:block; width:100%; padding-top:52%; background:url(/images/index/bg_movie_after.png) no-repeat center 1px; background-size:100.5% auto; pointer-events:none; }
.index .movie_box{ pointer-events:auto; }

.diy .news_box,
.news .news_box,
.cinema .news_box{ margin:20px auto 40px; }
.diy .news_list.diy_list,
.news .news_list,
.cinema .news_list.cinema_list{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.diy .news_list.diy_list figure,
.news .news_list figure,
.cinema .news_list.cinema_list figure{ margin:0; width:100%; max-width:512px; }
.diy .news_list.diy_list figure .images_block,
.news .news_list figure .images_block,
.cinema .news_list.cinema_list figure .images_block{ width:100%; }
.diy .news_list.diy_list figure .images_block img,
.news .news_list figure .images_block img,
.cinema .news_list.cinema_list figure .images_block img{ position:absolute; height:100%; }
.diy .news_list.diy_list figure p{ -webkit-line-clamp:7; }
.diy.detail .info figure figcaption .tags .date{ color:#C69B0E; }
.news .kv_top img{ object-position:50% 0%; }
.news .news_list figure p{ -webkit-line-clamp:2; }
.cinema .kv_top img{ object-position:47% 50%; }
.cinema .news_list.cinema_list figure p{ -webkit-line-clamp:2; }
.cinema .news_box .text_block{ text-align:left; margin:4em 0 3.5em;}

.legal .kv_top{ height:auto; }
.legal .kv_top h1{ position:relative; top:unset; left:unset; transform:translate(0,0); padding:1em 16px; line-height:1.2; }
.legal .legal_list{ counter-reset:section; list-style:cjk-ideographic; text-align:left; margin:40px auto 80px; font-size:1.8rem; line-height:1.6; color:#222;}
.legal .legal_list h3{ color:#2C9460; font-size:2.4rem; font-weight:500; margin:1.2em 0 .4em; }
.legal .legal_list h3:before{ counter-increment:section; content:counter(section, cjk-ideographic) "、";}
.legal .legal_list p{ font-size:inherit; margin-bottom:.6em; }
.legal .legal_list ol{ font-size:inherit; list-style:decimal; margin-left:1.4em;  }
.legal .legal_list ul{ font-size:inherit; list-style:disc; margin-left:1.3em;  }
.legal .legal_list a.underline{ color:#FF717C; }

.foundation .main section{ margin-bottom:60px; }
.foundation .text_block p{ text-align:left; margin-bottom:1em; }
.foundation .mission{ padding-top:48px; }
.foundation .mission .images_block{ display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:24px; }
.foundation .mission .images_block img{ border-radius:20px; width:75%; /*max-width:350px;*/ margin:0 12px;}
.foundation .aspects .images_block img{ max-width:536px; }
.foundation .org img,
.foundation .director img{ max-width:940px; }
.foundation .funds ul{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; } 
.foundation .funds ul li{ background:#fff; border:solid 3px #5FBC8E; border-radius:20px; padding:20px 16px 16px; width:270px}
.foundation .funds ul li h3{ font-size:clamp(2.2rem, 5.6vw, 2.4rem); color:#FF9933; margin-bottom:.7em; font-weight:bold; }
.foundation .funds ul li hr{ border:none; border-top:solid 1px #5FBC8E; }
.foundation .funds ul li p{ font-size:clamp(1.6rem, 4.1vw, 1.8rem); color:#FF717C; }
.foundation .funds ul li p strong{ font-size:2.2em; font-weight:bold; margin:0 .2em;}
.foundation .download .download_list{ display:flex; flex-wrap:wrap; gap:16px;}
.foundation .download .download_list a{ width:100%; display:flex; justify-content:space-between; padding:.7em 1.4em;font-size:clamp(1.6rem, 4.1vw, 1.8rem); }
.foundation .download .download_list a h4{ font-size:inherit; font-weight:bold;}
.foundation .download .download_list a h4 span{ color:#5FBC8E; }
.foundation .download .download_list a h4 span:after{ content:'|'; padding:0 .5em; }
.foundation .download .download_list a.pdf:after{ color:#FF717C; font-size:2em; }

.supervisor .main section{ padding-top:48px; margin-bottom:60px;  }
.supervisor h3{ color:#FF9933; font-size:clamp(2.2rem, 5.6vw, 2.4rem); font-weight:600; line-height:1.4; text-align:left; padding:1.2em 0 .8em;}
.supervisor .images_block img{ border-radius:20px; max-width:100%; height:auto; }
.supervisor .about{ gap:16px; display:flex; flex-direction:column;}
.supervisor .about p{ text-align:left; }
.supervisor .about p strong{ color:#5ebc8e; }
.supervisor .event figure{ display:flex; flex-direction:column; }
.supervisor .event figure h3{ color:#FF717C;  border-bottom:solid 1px;  text-align:center; padding:.4em 0; margin-bottom:.5em;}
.supervisor .event figure .images_block img{ border-radius:20px; max-width:100%; height:auto; border:solid 15px #fff; }
.supervisor .event figcaption{ position:relative; max-width:360px; margin:36px auto 8px; }
.supervisor .event figcaption .balloon{ position:absolute; top:0; left:0; width:100%; height:100%;}
.supervisor .event figcaption .balloon img{ width:100%; }
.supervisor .event figcaption .balloon li{ position:absolute; }
.supervisor .event figcaption .balloon li:nth-of-type(1){ width:60px; top:-30px; left:62%; }
.supervisor .event figcaption .balloon li:nth-of-type(2){ width:40px; top:30px; left:76%; } 
.supervisor .event figcaption .balloon li:nth-of-type(3){ width:60px; bottom:23px; left:12%; } 
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(1){ width:76px; left:15%; top:-23px; } 
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(2){ width:47px; top:30px; left:79%; } 
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(3){ width:50px; left:66%; } 
.supervisor .event figcaption .text_block{ position:absolute; top:50%; left:50%; width:220px; transform:translate(-50%, -60%); }
.supervisor .event figure:nth-of-type(2) figcaption .text_block{ width:240px;  }
.supervisor .event .step_list{ display:flex; flex-wrap:wrap; gap:30px; margin-bottom:36px; }
.supervisor .event .step_list > li{ background:#FEF7CB; padding:16px; border-radius:20px; width:535px; text-align:left; font-size:clamp(1.6rem, 4.1vw, 1.8rem); margin:0 auto; }
.supervisor .event .step_list img{ border-radius:20px; max-width:100%; height:auto; margin-bottom:10px; }
.supervisor .event .step_list h4{ font-size:clamp(1.8rem, 4.6vw, 2rem); color:#5FBC8E; font-weight:600; margin-bottom:8px; }
.supervisor .event .step_list > li ul{ list-style:disc; margin-left:1.4em; }
.supervisor .note{ border-radius:20px; background:#ffffff80; font-size:clamp(1.6rem, 4.1vw, 1.8rem); padding:30px 20px; text-align:left; }
.supervisor .note ul{ list-style:disc; margin-left:1.4em;  }

.open_cares .kv_bottom img{ object-position:50% 0%; }
.open_cares .main{ padding-top:48px; margin-bottom:36px; }
.open_cares figure{ display:flex; flex-direction:column; gap:30px; }
.open_cares figure img{ border-radius:20px; max-width:600px; height:auto; }
.open_cares figure figcaption{ text-align:left; }
.open_cares h3{ color:#FF9933; font-size:clamp(2.2rem, 5.6vw, 2.4rem); font-weight:600; line-height:1.4; text-align:left; margin:1em 0 .3em; }

.youngman .kv_bottom img{ object-position:75% 100%; }
.youngman .main{ padding-top:48px; margin-bottom:36px; }
.youngman h2{ font-size:clamp(2.4rem, 7vw, 3.6rem); }
.youngman h3{ color:#FF9933; font-size:clamp(2.2rem, 5.6vw, 2.4rem); font-weight:600; line-height:1.4; text-align:left; margin:1em 0 .3em; }
.youngman .text_block{ text-align:left; margin-bottom:30px; }
.youngman .text_block p{ margin-bottom:30px; }
.youngman .images_block{ display:flex; gap:30px; flex-direction:column; margin-bottom:30px; order:1;} 
.youngman .images_block img{ border-radius:20px; max-width:100%; height:auto; }
.youngman section{ display:flex; flex-direction:column;}

.youngman .text_block.first{ order:0; }
.youngman .text_block,
.youngman .images_block{ order:1; }

.reading .main{ padding-top:48px; margin-bottom:36px; }
.reading .main img{ border-radius:20px; max-width:100%; height:auto; }
.reading h3{ color:#FF9933; font-size:clamp(2.2rem, 5.6vw, 2.4rem); font-weight:600; line-height:1.4; margin:0 0 .3em; }
.reading h3 span{ display:inline-block; }
.reading figure{ margin:36px auto; }
.reading figcaption{ margin-bottom:24px; }
.reading figcaption p{ text-align:left; margin-bottom:.8em; }

.health .kv_bottom img{ object-position:80% 50%; }
.health .main{ margin-bottom:36px; }
.health .main img{ border-radius:20px; max-width:100%; height:auto; }
.health figure{ margin:36px auto; }
.health figcaption{ margin-bottom:24px; }
.health figcaption p{ text-align:left; margin-bottom:.8em; }
.health figure .pic{ max-width: 534px; display: flex; flex-direction: column; }
.health figure .pic img{ width: 100%; margin-bottom: 20px; }

.error{ display:flex; flex-direction:column; } 
.error .main{ flex:2 2 auto; display:flex; justify-content:center; align-items:center;}
.error h3{ color:#FF717C; font-size:clamp(2.2rem, 5.6vw, 2.4rem); line-height:1.4; }



/* 手機優先 ---------------------------------------------------------------------------------------------------------*/
/* 直式 */
@media (orientation:portrait){ }
/* 橫式 */
@media (orientation:landscape){ 
.index{ background-position:15% 344px; }
.index .about_box{ background-image:url(/images/index/bg_about_pc.png); height:40vw; padding-bottom:26vw;  } 

}

/* applies to x-small devices (landscape phones, less than 375px)  */
@media (min-width:375px) { }

/* applies to small devices (landscape phones, less than 768px) */
@media (min-width:767.98px) { }

/* lg applies to medium devices (tablets, less than 992px) */
@media (min-width:991.98px){
.btn.shadow:hover{ transform:translateY(3px); box-shadow:0 1px #22222280; }
.slick-slider ul.slick-dots{ gap:1.5rem; }
.news_list figure{ border-radius:20px; }
.news_list figure .images_block{ border-radius:20px; }
.news_list figure a .images_block img{ transition:all 1.6s ease-in-out; }
.news_list figure a:hover .images_block img{ transform:scale(1.1); }
.news_list figure figcaption{ margin-top:16px; }
.news_list figure.pin_new a{ display:flex; align-items:center; gap:30px; }
.news_list figure.pin_new a .images_block{ flex:1 0 505px; padding-top:370px; }
.news_list figure.pin_new a figcaption{ flex:1 1 auto; margin-top:0; }
.news_list figure.pin_new figcaption .tags{ justify-content:flex-start; gap:10px; }
.news_list figure.pin_new:after{ right:0; left:unset; transform:translate(-10px, 10px); }
.movie_list{ flex-direction:row;  }
.movie_list figure{ border-radius:20px; flex:1; }
.movie_list figure .images_block{ border-radius:20px; }
.movie_list figure a .images_block img{ transition:all 1.6s ease-in-out; }
.movie_list figure a:hover .images_block img{ transform:scale(1.1); }
.breadcrumbs ul{ padding:15px 0; }
.kv_bottom{ height:150px; } 
.search_bar{ justify-content:flex-end; gap:16px; }
.search_bar .select_style{ flex:0 1 146px; }
.search_bar .input_style{ flex:0 2 300px; }
.share_link{ flex-direction:column; align-items:flex-end; flex-direction:column; align-items:flex-end; } 
.share_link li a:before{ color:#222;}
.share_link li.copy a,
.share_link li.line a,
.share_link li.fb a{ background:#fff; }
.detail .info{ margin-top:42px; padding-top:0;}
.kv_top h1{ top:50%; transform:translate(-50%,-150%);  }


body{ background-position:101% -6%,0% 0%; background-size:306px auto,auto; }
header .header-container{ flex-direction:row; justify-content:space-between; align-items:center; padding:20px 40px;}
header .logo{ width:156px; position:relative; z-index:5;}
header .mainMenu,
header .socialMedia{ display:flex; }
header .navCheck,
header .navToggle{ position:absolute; opacity:0; pointer-events:none;}
header .socialMedia{ gap:36px; }
header nav{ position:relative; height:auto; opacity:1; display:flex; flex-direction:row; justify-content:center; align-items:center; pointer-events:auto; background:transparent; }
header nav .mainMenu,header nav .mainMenu > li > a{ margin:auto; border:none; }
header nav .mainMenu > li,
header nav .mainMenu li .subMenu li{ opacity:1; transform:unset; position:relative; }
header nav .mainMenu a.btn.arrow:after,
header nav .mainMenu a.btn.plus:after{ display:none; }
header nav .mainMenu > li > a{ padding:1.5em .5em; }
header nav .mainMenu > li > a,
header nav .mainMenu > li > a:before{ transition:color .4s ease-out; }
header nav .mainMenu > li > a:before{ color:#fff; }
header nav .mainMenu > li:hover > a,
header nav .mainMenu > li:hover > a:before{ color:#FF9933; }
header nav .mainMenu li:hover a.btn.plus + .subMenu{ height:auto; opacity:1;}
header nav .mainMenu .subMenu{ position:relative; position:absolute; width:100%; top:3.5em; left:50%; height:auto; opacity:0; min-width:12em; transform:translateX(-50%); }
header nav .mainMenu li .subMenu li{ transition:background .3s ease-out; }
header nav .mainMenu .subMenu li > a{ padding:.6em; text-align:center; width:100%; }
header nav .mainMenu .subMenu li:hover{ background:#FF9933; color:#fff; }
footer .footer-container{ padding:20px 80px; }
footer .btn_group{ flex-direction:row; justify-content:space-between; align-items:center; }
footer .btn_group .btn.radius.white{ background:transparent; border:solid 1px #222; }
footer .btn_group .btn.radius.white:hover{ background:#ffffffb3; border-color:#ffffffb3; }
footer .text_block{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; }
footer .links_group{ text-align:right; }
footer .btn.top{ bottom:110px; }

.index .sp_banner{ margin-bottom:80px; }
.index .bg_earth{ background-image:url(/images/index/bg_earth_pc.png); padding-top:9vw; }
.index .bg_earth:after{ background-image:url(/images/index/bg_earth_after_pc.png); padding-top:36%; }
.index .plan .text_block{ width:100%; flex-direction:row; justify-content:center; gap:30px; margin-bottom:-160px;}
.index .plan .text_block li{ width:280px;  }
.index .plan .text_block li:nth-of-type(2){ margin-top:12px; }
.index .bg_movie{ background-image:url(/images/index/bg_movie_pc.png); margin-top:-42px; padding-top:17vw; }
.index .bg_movie:after{ background-image:url(/images/index/bg_movie_after_pc.png); padding-top:18%; margin-top:-40px; }
.index .about_box br{ display:none; }

.main h2:before{ display:inline-block; font-size:.6em; transform:translateY(-.2em); }

.diy .news_list.diy_list,
.news .news_list,
.cinema .news_list.cinema_list{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:stretch; gap:36px 30px; }
.diy .news_list.diy_list figure.pin_new,
.news .news_list figure.pin_new,
.cinema .news_list.cinema_list figure.pin_new{ flex:0 0 100%; max-width:unset; }
/*.diy .news_list.diy_list figure .images_block img,
.news .news_list figure .images_block img,
.cinema .news_list.cinema_list figure .images_block img{ object-fit:scale-down; }*/
.diy .news_list.diy_list figure{ flex:1 1 calc(100% / 2 - 15px); max-width:535px; }
.diy .news_list.diy_list figure p{ -webkit-line-clamp:5; }
.news .kv_top h1{ top:50%; transform:translate(-60%,-150%); } 
.news .news_list figure{ flex:1 1 calc(100% / 3 - 16px); max-width:346px; }
.cinema .news_list.cinema_list figure{ flex:1 1 calc(100% / 2 - 15px); max-width:535px; }
.cinema .kv_bottom img{ object-fit:scale-down; }

.foundation .main section{ margin-bottom:80px; }
.foundation .kv_bottom img{ object-fit:scale-down; }
/*.foundation .mission .images_block img{ width:calc(100% / 3 - 16px);  }*/
.foundation .aspects{ display:flex; align-items:center; gap:32px; } 
.foundation .aspects .images_block{ flex:1 0 536px; }
.foundation .aspects .images_block img{ max-width:536px; }
.foundation .funds .text_block p{ text-align:center; }
.foundation .funds ul{ flex-direction:row; }
.foundation .download .download_list{ gap:24px 20px;}
.foundation .download .download_list a{ width:calc(50% - 10px);  }

.supervisor .kv_bottom img{ object-fit:scale-down; }
.supervisor .main section{ flex-direction:row; }
.supervisor .about h2{ text-align:left; }
.supervisor .about .images_block{ flex:1 0 600px; }
.supervisor .event figure{ flex-direction:row; align-items:flex-start; }
.supervisor .event figcaption{ flex:0 0 360px;  }
.supervisor .event figure:nth-of-type(odd){ flex-direction:row-reverse;  }
.supervisor .event figure:nth-of-type(odd) figcaption{ margin-left:-40px; }
.supervisor .event figure:nth-of-type(even) figcaption{ margin-right:-40px; }
.supervisor .event .step_list > li{ width:calc(100% / 2 - 15px); }
.supervisor .event figcaption .balloon li:nth-of-type(3){ bottom:-76px; left:62%; }
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(1){ left:25%; top:-36px; } 
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(2){ top:unset; bottom:30px; left:18%; }
.supervisor .event figure:nth-of-type(2) figcaption .balloon li:nth-of-type(3){ left:9%; } 

.open_cares figure{ flex-direction:row; align-items:flex-start; }

.youngman .kv_bottom img{ object-fit:scale-down; object-position:50% 100%;}
.youngman section{ display:block; }
.youngman .images_block{ float:right; width:450px; margin-left:30px; }
.youngman .main:after{ content:''; display:block; width:100%; height:30px; }
.youngman .text_block{ margin-bottom:60px; }
.youngman .text_block p{ margin-bottom:1.2em; }

.reading h3{ text-align:left; }
.reading figure{ display:flex; gap:30px; align-items:flex-start; }
.reading figure figcaption, .reading figure img{ width:calc(50% - 16px); }

.health figure{ display:flex; gap:30px; align-items:flex-start; margin:40px auto; }
.health figure:nth-of-type(odd){ flex-direction:row-reverse; }
.health figure figcaption, .health figure img{ width:calc(50% - 16px); }
.health h2{ text-align:left; }
.health figcaption p{ margin-left:1.2em; }

}
/* xl applies to large devices (desktops, less than 1200px) */
@media (min-width:1199.98px) { 
.container-full ,.container{ padding:0 32px; max-width:1164px; }
header nav .mainMenu > li > a{ padding:1.5em; }

.index .bg_movie{ padding-top:17vw; /*padding-bottom:15.5vw;*/  }
.supervisor .about{ gap:40px; }
/*.supervisor .about p{ margin-left:1.4em; }*/

}

/* xxl applies to x-large devices (large desktops, less than 1400px) */
@media (min-width:1399.98px) { }

/* XX-Large devices (larger desktops, 1400px and up)  */
@media (min-width:1400px) { }