@charset "utf-8";
/* CSS Document */
/*Body Start*/
html{padding:0px; margin:0; font-size: 10px;}
body{position: relative; font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang", "STHeiti", sans-serif, serif; font-size: 1.8rem; line-height: 160%; color: #333; }
body.index{background: url(../images/vision_bg.png) no-repeat top center #00AD92; background-size: contain;}
body.page{background: url(../images/page_bg.png) no-repeat top center; background-size:contain;}

/*Vision*/
body.index section.vision{ position:relative; height:61vw; background:url("../images/section_bg_y.png") no-repeat center bottom; background-size: contain;}
body.index section.vision .vision_box{ position: absolute; top:160; left: 0;}
body.index section.vision .headline{  margin: 0 auto; width:959px; height:741px; background:url("../images/headline.png") no-repeat; background-size: contain;}
body.page section.vision{ height:450px; }

/*Text*/
.word_break{word-break:break-all;word-wrap:break-word;display:block;}
a{ text-decoration:none; color:#666; cursor:pointer;}

.color_01,section .remark{ color: #ea7b73;}
.color_02{ color: #D76347;}


/*Body*/
a.btn_apply{ z-index:999; position:absolute; right:0.5vw; top:6vw; display:inline-block; background:url(../images/btn_apply.png) no-repeat; width:59px; height:392px;}
a.btn_apply:hover{ background:url(../images/btn_apply_c.png) no-repeat;}
a.btn_top{ z-index:999; position:fixed; right:1vw; bottom:1vw; display:block; background:url(../images/btn_top.png) no-repeat; width:50px; height:67px;}
a.btn_top:hover{background:url(../images/btn_top_c.png) no-repeat;}

/*Header*/
header { z-index: 99; position: relative; width: 100%; top: 0px; left: 0px;}

header .logo a{ z-index: 999; position: absolute;left: 45px; top: 30px; display: block; background:url("../images/logo.svg") no-repeat; background-size: contain; width:7.96vw; min-width:95px; max-width:153px;  height: 6vw; min-height: 80px; max-height: 114px; margin: 0 10px 0 0;}


nav {position: absolute; right: 0px; top: 50px; z-index: 999; display: flex; flex-flow:row wrap;justify-content: center;align-items: center;}

nav .pc_menu div { display: inline-block; font-size: 2.2rem; font-weight: 700; padding-right: 35px;}

header div a{color:#ea7b73; line-height: 180%;}
header div a:hover{color:#38a5de;}

nav .nav01 .snav{ display:none; position:absolute; top:30px; left:-35px; background:#fff; padding:0 15px; border-radius: 15px;}
nav .nav01:hover .snav{display:inline-block;}

nav .nav01 .snav li{ margin:0px; text-align:center;}
nav .nav01 .snav li a{ font-size:18px; font-weight:bold; text-align:center; color:#666666; display:block; background:none #fff; padding:10px 0; border-top:1px solid #dddddd;}
nav .nav01 .snav li:first-child a{ border-top:0px;}
nav .nav01 .snav li a:hover{ color:#38a5de;}

header .phone_menu{ position: fixed; top: 0px; right:0px; width: 100%; padding: 80px 0 0 0; background: #0e8e72; display:none;}
header .phone_menu div{ display:block; width: 100%; text-align: center; border-top: 0px #39bbca solid; padding: 12px 0;}
header .phone_menu div a{ color: #f1bc2f; font-size: 2.4rem; font-weight:bold; display:block; width: 100%; line-height: 200%; }
header .phone_menu div li a{ font-size: 1.6rem; line-height: 200%; }


/*Burger Menu*/
.burger-box{ display: none; cursor:pointer; width: 25px; height: 25px; }
.burger{
  width: 100%;
  height: 3px;
  border-radius:3px;
  background-color: #ea7b73;
  position: relative;
  top: 12px;
  
  transition:background-color .01s .5s;
}
 .burger::before{
    content:"";
    width: 100%;
    height: 3px;
    border-radius:3px;
    background-color: #ea7b73;
    position: absolute;
    top: -9px;
  }
  .burger::after{
    content:"";
    width: 100%;
    height: 3px;
    border-radius:3px;
    background-color: #ea7b73;
    position: absolute;
    bottom: -9px;
  }

.burger-box.active .burger{
  background-color: transparent;
  transition:background-color .01s .2s;
}
.burger-box.close .burger::before{
    animation: backturn1 .4s .2s ease-in-out reverse both,
               backmoveDown .3s .55s ease-in  reverse both;          
}
.burger-box.active .burger::before{
    animation:moveDown .3s ease-in forwards,
              turn1 .4s .2s ease-in forwards;
}

.burger-box.close .burger::after{
    animation: backturn2 .45s .1s ease-in reverse both,
               backmoveUp .3s .55s ease-in  reverse both;          
}
.burger-box.active .burger::after{
    animation:moveUp .3s ease-in forwards ,
              turn2 .4s .2s ease-in forwards;
}

@keyframes moveDown{ 
  0%{top: 9px;}
  100%{top:0;}
}
@keyframes backmoveDown{
  0%{top: -9px;}
  100%{top:0;}
}

@keyframes moveUp{
  0%{bottom: -9px;}
  100%{bottom:0;}
}
@keyframes backmoveUp{
  0%{bottom: -9px;}
  100%{bottom:0;}
}

@keyframes turn1{
  0%{transform:rotate(0deg);}
  90%{transform:rotate(50deg);}
  100%{transform:rotate(45deg);}
}
@keyframes backturn1{
  0%{transform:rotate(0deg);}
  90%{transform:rotate(50deg);}
  100%{transform:rotate(45deg);}
}

@keyframes turn2{
  0%{transform:rotate(0deg);}
  90%{transform:rotate(145deg);}
  100%{transform:rotate(135deg);}
}
@keyframes backturn2{
  0%{transform:rotate(0deg);}
  90%{transform:rotate(145deg);}
  100%{transform:rotate(135deg);}
}
/*Main*/
/*Content*/
body.index main section .box{ position: relative; max-width:1200px; padding:60px 30px 140px 30px; margin: 0 auto;}
body.page main section .box{ position: relative; max-width:1200px; padding: 60px 30px 100px; margin: 0 auto;}
main section .anchor{position: absolute; top: 0px; left: 0;}
main section .flex_box{ display: flex; flex-flow:row wrap; justify_content: space_between; }
section h1{ margin: 0 0 5rem; text-align: center;}
section h1 div{ display: inline-block;}
section h2{ font-size: 3.6rem; font-weight: 700; margin: 0 0 4rem; text-align: center;}
section h3{ font-size: 2.4rem; font-weight: 700; margin: 0 0 1rem;}
section p,section ul{ letter-spacing: 1px; line-height: 200%; color: #666;}
section .super{ vertical-align:super; font-size: 0.8rem;}
section .remark{font-size: 1.6rem; }
section .img img{width:100%;}
section ul.decimal{ line-height:200%; list-style:decimal;}
section ul.decimal li{ margin:0 0 0 20px;}
section .table{ border-top: 3px solid #666666; margin: 0 0 60px;}
section .table .row{ width: 100%; border-bottom: 2px dashed #dadada; padding: 2rem 0 1.5rem; display: flex; flex-flow:row wrap; grid-gap: 4%}
section .table .row .title{ width: 21%; color:#333; margin: 0 0 0.5rem; font-weight: bold; }
section .table .row .data{ width: 75%; flex-grow:1; color:#666;}
section .table .row h3{ margin: 0;}

/*Topic*/
main section.topic{ background:url("../images/section_bg_y2.png") repeat-x center bottom #f1bc2f; background-size:contain; }

main section.topic h2{ font-size: 4.8rem; color: #fff;margin: 0 0 6rem;}
main section.topic p{ display: block; color: #fdf3e6; max-width: 800px; margin: 0 auto 2rem; font-weight: 600; line-height: 160%;}

/*Program*/
main section.program{ background:url("../images/section_bg_r.png") no-repeat center bottom #fdf3e6; background-size:contain; }
main section.program .program_list{ width:100%; max-width:1100px; background: #fff; border-radius: 50px; margin:0 auto;}
main section.program .program_list ul{padding:40px 60px;}
main section.program .program_list li{ border-bottom:2px dashed #dadada; padding:0 5px;}
main section.program .program_list li:last-child{ border-bottom:0px;}
main section.program .program_list .hd{ position: relative; color:#f1bc2f; padding:25px 0 0px;}
main section.program .program_list .hd .flex_box{ background:url(../images/list_icon_yellow.png) no-repeat left 11px; padding:0 0 0 30px; font-size: 2.4rem; font-weight: 700; margin: 0 0 1rem;}
main section.program .program_list .hd .date{ width:40%; max-width:330px;}
main section.program .program_list .hd .event{ color:#666;flex-grow:1;}
main section.program .program_list .hd .more{ justify-content:flex-end;}
main section.program .program_list a.btn_more{ display: inline-block; background:url(../images/list_more.png) no-repeat center center; width: 18px; height: 40px;}
main section.program .program_list a.btn_more:hover{ background:url(../images/list_more_hover.png) no-repeat center center;}
main section.program .program_list .ft{ display: none; padding:0 0 30px 30px;}

/*Object*/
main section.object{ background:url("../images/section_bg_f.png") repeat-x center bottom #f9d6ce; background-size:contain;}
main section.object .data{ padding: 170px 0 0 0; font-size:2.2rem;}
main section.object .data ul{  font-weight:bold;}
main section.object .data li{ padding: 0 0 20px;}

/*Standard*/
main section.standard{ background:url("../images/section_bg_r.png") repeat-x center bottom #fff; background-size:contain;}
main section.standard h3{ text-align: center; margin: 0 0 22px;}

/*Reward*/
main section.reward{ background:url("../images/section_bg_y2.png") repeat-x center bottom #f9d6ce; background-size:contain;}
main section.reward .data{ }
main section.reward .data .part{ margin: 0 0 40px;}
main section.reward h3{ font-size: 2.2rem; background:url(../images/list_icon.png) no-repeat left center; padding:0 0 0 30px;}
main section.reward ul{  margin: 0 0 0 30px;}

/*Apply Step*/
main section.apply_step{ background:url("../images/section_bg_f.png") repeat-x center bottom #fdf3e6; background-size:contain;}
main section.apply_step h3{ text-align: center; margin: 0 0 22px;}
main section.apply_step a{ text-decoration:underline; color:#2F6EB9;}

/*Explain*/
main section.explain{ background:url("../images/section_bg_gr.png") repeat-x center bottom #fff; background-size:contain;}
main section.explain ul{ max-width:900px; margin:0 auto;}
main section.explain li{ border-top:2px dashed #dadada; background:url(../images/list_icon.png) no-repeat left 40px; padding:30px 0 30px 30px;}

/*Footer*/
footer{ text-align:center; background:#f1f4f5; padding:60px 20px; color: #666;}
footer .hd{ }
footer .hd a.btn{ display:inline-block; color:#fff; font-size: 2.4rem; font-weight:700;  padding:10px 20px;  border-radius: 50px; margin:0 0 30px 20px;}
footer .hd a.read_site{background:#68b58e;}
footer .hd a.read_site:hover{ background:#F5B637;}
footer .hd a.read_fb{background:#4a66ad;}
footer .hd a.read_fb:hover{ background:#F5B637;}
footer .mid{ margin: 0 0 30px;}
footer .mid div{ margin:0 0 15px;}
footer .mid .copyright{ font-weight: 700;}
footer .mid a.email{ text-decoration:underline; margin:0 7px 0 0;}
footer .ft{display: flex; flex-flow:row wrap; justify-content: center; align-items: center; gap: 30px;}
footer .ft .rela_logo{ display: flex; flex-flow:row wrap; justify-content: center; align-items: center; }
footer .ft .rela_logo_02{ display: flex; flex-flow:row wrap; justify-content: center; align-items: center; }
footer .ft .rela_logo span,footer .ft .rela_logo_02 span{ padding: 10px 20px 10px 0;}
footer .ft .rela_logo span.title,footer .ft .rela_logo_02 span.title{ padding: 10px 10px 10px 0;}

/*PAGE*/
/*Prefer*/
section.prefer{background:url("../images/section_bg_g.png") repeat-x center bottom; background-size:contain;}
section.prefer .nice_writer{ border-radius:30px; padding:50px; background:#ffe1da; margin-bottom:40px; text-align: center;}
section.prefer .nice_writer p{ font-size:2.4rem;}
section.prefer .nice_writer .blod{ color:#FE747F; font-weight: 500; }
section.prefer .nice_writer .blod a{ color:#FE747F; text-decoration: underline;}
section.prefer h2{ width:151px; margin:0 auto 35px;}
section .tab_grade{ width:100%; max-width: 600px; margin:0 auto 35px;}
section .tab_grade div{ width: 50%; text-align: center; font-size: 2.4rem; font-weight: 700; }
section .tab_grade div a{ display: inline-block; color: #333; width: 100%; line-height: 40px; border:1px #dadada solid; border-width:0 0 0 1px;}
section .tab_grade div.tab02 a{ border-width:0 1px 0 1px;}
section .tab_grade div a:hover,section .tab_grade div a.active{ color: #ca6449;}

section.prefer .judge{ width: 100%; max-width: 1080px; margin:0 auto ; gap:5%;}
section.prefer .judge div{ color:#999; text-align:center; width: 30%; max-width: 330px; margin: 0 auto 20px;}
section.prefer .judge div a{ display:inline-block; width:100%; height:330px; margin: 0 0 15px; background-size: contain !important;}
section.prefer .judge .judge01 a{ background:url(../images/review_j01.png) no-repeat center center;}
section.prefer .judge .judge02 a{ background:url(../images/review_j02.png) no-repeat center center;}
section.prefer .judge .judge03 a{ background:url(../images/review_j03.png) no-repeat center center;}
section.prefer .judge .judge04 a{ background:url(../images/review_j04.png) no-repeat center center;}
section.prefer .judge .judge05 a{ background:url(../images/review_j05.png) no-repeat center center;}
section.prefer .judge .judge06 a{ background:url(../images/review_j06.png) no-repeat center center;}
section.prefer .judge div a:hover{ opacity: 0.7;}
section.prefer .judge div h3{ font-size: 2.2rem;}


/*Activity*/
section.activity{ background:url("../images/section_bg_f.png") repeat-x center bottom #eef8e9; background-size:contain;}
section.activity .intro{ max-width: 910px; margin:0 auto 40px; background: #fff; padding: 50px 60px; border-radius: 50px;}
section.activity .intro .title {text-align: center;}
section.activity .intro .title h3{ display: inline-block; color: #68b58e; font-size: 4rem; font-weight: 500;  line-height:100%; background:url(../images/icon_fb.png) no-repeat left center; padding:0 0 0 50px; margin: 0 0 35px; }
section.activity .intro .intro_hd{ font-weight: 500; margin: 0 0 25px;}
section.activity .intro .intro_ft ul{}
section.activity .intro .intro_ft ul li{ border-bottom:2px dashed #dadada; background:url(../images/list_icon.png) no-repeat left 20px; padding:10px 0 10px 30px;}
section.activity .intro .intro_ft ul li:last-child{ border:0px;}
section.activity .works_list{ width: 100%; max-width: 1080px; margin:0 auto ; gap:4%;}
section.activity .works_list .work{ width:30.6%; max-width:330px; margin: 0 0 45px; background: #fff; border-radius: 20px;}
section.activity .work .data{ padding:40px;}
section.activity .work .data .img{ line-height:0px; margin:0 0 15px;}
section.activity .work .data .img a{ display:inline-block; height: 180px; background:no-repeat left top;}
section.activity .work .data .img a:hover{opacity:0.6;}
section.activity .work .text{ font-size: 1.6rem; line-height:1.8rem; height:1.8rem; margin: 0 0 15px;}
section.activity .work .school{ padding: 0 10px 0 0; }
section.activity .work .line{ display: inline-block; width: 1px; height:15px; background: #dadada; margin: 0px 10px 0 0;}
section.activity .work h3{ color:#68b58e; margin: 0 0 20px}
section .fb_box{display: flex; flex-flow:row wrap; justify_content: space_between; gap:7px;}
section .fb_box button.vote-btn{ background: url("../images/icon_like.png") no-repeat 10px center #1877F2; margin: 0; height: 28px; line-height: 28px; padding: 0 10px 0 30px; border: none;outline: none; color: #fff;cursor: pointer;border-radius: 4px;}
section .fb_box button.vote-btn:hover{ background-color: #428EF2;}
section .fb_box button.vote-btn.like { background: url("../images/icon_liked.png") no-repeat 10px center #F5B00E; border: 0; color: #fff;}
section .fb_box button.vote-btn::after { position: relative; content: attr(data-like); margin-left: 5px; }
section .fb_box .fb_like{ line-height: 0px;}

section.activity .work .data_01 .img a{ background-image:url(../images/J01.png); background-size:cover;}
section.activity .work .data_02 .img a{ background-image:url(../images/J02.png); background-size:cover;}
section.activity .work .data_03 .img a{ background-image:url(../images/J03.png); background-size:cover;}
section.activity .work .data_04 .img a{ background-image:url(../images/J04.png); background-size:cover;}
section.activity .work .data_05 .img a{ background-image:url(../images/J05.png); background-size:cover;}
section.activity .work .data_06 .img a{ background-image:url(../images/J06.png); background-size:cover;}
section.activity .work .data_07 .img a{ background-image:url(../images/J07.png); background-size:cover;}
section.activity .work .data_08 .img a{ background-image:url(../images/J08.png); background-size:cover;}
section.activity .work .data_09 .img a{ background-image:url(../images/J09.png); background-size:cover;}
section.activity .work .data_10 .img a{ background-image:url(../images/J10.png); background-size:cover;}
section.activity .work .data_11 .img a{ background-image:url(../images/J11.png); background-size:cover;}
section.activity .work .data_12 .img a{ background-image:url(../images/J12.png); background-size:cover;}
section.activity .work .data_13 .img a{ background-image:url(../images/J13.png); background-size:cover;}
section.activity .work .data_14 .img a{ background-image:url(../images/J14.png); background-size:cover;}
section.activity .work .data_15 .img a{ background-image:url(../images/J15.png); background-size:cover;}
section.activity .work .data_16 .img a{ background-image:url(../images/J16.png); background-size:cover;}

section.activity .senior .work .data_01 .img a{ background-image:url(../images/H01.png); background-size:cover;}
section.activity .senior .work .data_02 .img a{ background-image:url(../images/H02.png); background-size:cover;}
section.activity .senior .work .data_03 .img a{ background-image:url(../images/H03.png); background-size:cover;}
section.activity .senior .work .data_04 .img a{ background-image:url(../images/H04.png); background-size:cover;}
section.activity .senior .work .data_05 .img a{ background-image:url(../images/H05.png); background-size:cover;}
section.activity .senior .work .data_06 .img a{ background-image:url(../images/H06.png); background-size:cover;}
section.activity .senior .work .data_07 .img a{ background-image:url(../images/H07.png); background-size:cover;}
section.activity .senior .work .data_08 .img a{ background-image:url(../images/H08.png); background-size:cover;}
section.activity .senior .work .data_09 .img a{ background-image:url(../images/H09.png); background-size:cover;}
section.activity .senior .work .data_10 .img a{ background-image:url(../images/H10.png); background-size:cover;}
section.activity .senior .work .data_11 .img a{ background-image:url(../images/H11.png); background-size:cover;}
section.activity .senior .work .data_12 .img a{ background-image:url(../images/H12.png); background-size:cover;}
section.activity .senior .work .data_13 .img a{ background-image:url(../images/H13.png); background-size:cover;}
section.activity .senior .work .data_14 .img a{ background-image:url(../images/H14.png); background-size:cover;}
section.activity .senior .work .data_15 .img a{ background-image:url(../images/H15.png); background-size:cover;}
section.activity .senior .work .data_16 .img a{ background-image:url(../images/H16.png); background-size:cover;}

/*Modal*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7 ); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 2% auto 0; /* 15% from the top and centered */
    padding: 5px 20px 15px;
    border: 1px solid #888;
}

.modal_1 .modal-content{width: 22vw; min-width: 300px; max-width: 450px;}
.modal_2 .modal-content{width: 45vw; min-width: 300px; max-width: 900px;}

.modal .hd{padding: 0 0 15px;border-bottom: 2px dashed #dadada;}
.modal .bd{ padding: 20px 0;}
.modal .bd .text{ padding:20px;}
.modal h3{ color:#2686D1; line-height: 120%; text-align: center;}
.modal h3 span{ font-size: 0.7rem;}
.modal .img{ margin: 0 auto;}
.modal .img img{ width:100%; max-width: 425px; }
.modal .text h4{ color:#2686D1;font-size:1.2rem; font-weight: bold;}
.modal .text .title{ display: inline-block; font-size:0.8rem; margin: 0 0 10px;}
.modal .text p{ font-size:0.8rem; color: #747474;}


.modal .ft{ padding: 25px 0 0 0; text-align: center;}
.modal .ft span {
    display: inline-block;
    background: url("../images/btn_close.png") no-repeat; width:26px; height: 26px;
}

.modal .ft span:hover,
.modal .ft span:focus {
    text-decoration: none;
    cursor: pointer;
    opacity: 0.5;
}

/*Study*/
section.study{ background:url("../images/section_bg_f.png") no-repeat center bottom; background-size:contain; }
section.study h2{line-height:140%;}
section.study iframe{ width:100%; height:2600px;}

/*WORK_INTRO*/
body.page main section.work_intro .box{ position: relative; max-width:900px; padding: 60px 30px 100px; margin: 0 auto;}
section.work_intro .class{ font-size: 1.4rem; font-weight: 500; color:#ca6449; display:inline-block; border:1px solid #ca6449; line-height:100%; padding:5px; margin:0 0 15px; border-radius: 7px;}
section.work_intro .writer_data{ margin:0 0 20px;}
section.work_intro .writer_data .title{ color: #4BB78B;margin: 0px 10px 0 0;}
section.work_intro .writer_data .school{ padding: 0 10px 0 0; }
section.work_intro .writer_data .line{ display: inline-block; width: 1px; height:15px; background: #dadada; margin: 0px 10px 0 0;}
section.work_intro h2{ text-align: left; margin: 0 0 50px 0;}
section.work_intro iframe.issuu{ width:100%; aspect-ratio: 3 / 2; margin:0 0 35px;}
section.work_intro .data .hd{ position: relative; margin:0 0 5px;}
section.work_intro .data .hd h3{ display:inline-block; }
section.work_intro .data .hd .fb_box{ position: absolute; right: 0; top: 0px;}
section.work_intro .data .bd{ margin:0 0 30px;}
section.work_intro .data .ft{ border-radius:30px; padding:35px 50px; background:#FDF3DE; margin-bottom:40px;}
section.work_intro .data .ft h4{ font-size: 2rem; color:#e0ae23; font-weight:bold; margin-bottom:5px;}
section.work_intro .data .ft p{ color:#e0ae23; margin:0 0 5px 0;}
section.work_intro .fb_message{ width: 100%; max-width:900px;}

/*Privacy*/
section.privacy p{ margin:0 0 30px;}
section ul.decimal{ margin:0 0 30px 30px;;}