@charset "utf-8";
/* CSS Document */

.innbanner{ max-width:1300px; margin:auto; margin-top:138px; padding-bottom:40px; }
.banner{ width:100%; position:relative; padding-bottom:46%; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.banner iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }


.down_an{ position: absolute; top: 410px; left: 20px; z-index: 10;}
.down_an .border{ width: 28px; height: 42px; border-radius: 14px; border: 1px solid #333; position: relative;}
.down_an .border span{ width: 3px; height: 10px; background-color: #333; border-radius: 1px; position: absolute; top: 10px; left: 0; right: 0; margin: auto; animation: down 2s infinite; opacity: 0;}
.down_an .word{ font-size: 13px; color: #333; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; padding-top: 8px; margin: auto;}
@keyframes down{ 0%{opacity: 0; top: 10px;} 15%{opacity: 1; top: 10px;} 60%{opacity: 1; top: 20px;} 75%{opacity: 0; top: 20px;} 100%{opacity: 0; top: 20px;}}

.left_image{ position:fixed; top: 410px; left: 10px; z-index: 10;}


.project_menu{ width: 19px; position: fixed; top: 50%; right: 25px; transform: translateY(-50%); z-index: 10;}
.project_menu .title{ font-size: 14px; color: #333; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}
.project_menu .opm{ width: 15px; height: 15px; background-color: #fff; border: 1px solid #333; display: inline-block; position: relative; margin-top: 10px; cursor: pointer;}
.project_menu .opm span{ width: 9px; height: 9px; background-color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: .2s;}
.project_menu .opm.focus span{ background-color: #ea5a59; transition: .2s;}


.block01{ background:#ffdfee; }
.block01 .mar{ max-width:1300px; margin:auto; padding:100px 10px; position:relative; }
.block01 .mar:before{ content:""; display:block; width:113px; height:70px; background-image:url(../images/index/nimgs.png); background-repeat:no-repeat; background-position:center; position:absolute; bottom:0; right:10px; }
.block01 .mar .newsbox{ display:flex; width:100%; }
.block01 .mar .newsbox .nimgs{ width:50%; padding-right:30px; }
.block01 .mar .newsbox .nimgs img{ width:100%; }
.block01 .mar .newsbox .ntext{ width:50%; padding-left:30px; }
.block01 .mar .newsbox .ntext .title{ margin:0 0 20px 0; display:flex; justify-content:space-between; align-items:flex-end; }
.block01 .mar .newsbox .ntext .title .h1{ font-size:46px; color:#333; font-weight:bold; padding-left:55px; background-image:url(../images/index/icon_01.png); background-repeat:no-repeat; background-position:center left; background-size:44px; line-height:42px; letter-spacing: 3px; }
.block01 .mar .newsbox .ntext .title .mores{ font-size:18px; color:#000; }
.block01 .mar .newsbox .ntext .lists{ display:block; padding:0 0 15px 0; margin:0 0 15px 0; border-bottom:1px dashed #d68faf; }
.block01 .mar .newsbox .ntext .lists:last-child{ border:none; }
.block01 .mar .newsbox .ntext .lists .h1{ font-size:22px; margin:0 0 5px 0; color:#000; }
.block01 .mar .newsbox .ntext .lists .ps{ font-size:16px; color:#000; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; }
.block01 .mar .newsbox .ntext .lists .date{ margin:0 0 7px 0; display:flex; align-items:center; }
.block01 .mar .newsbox .ntext .lists .date .sort{ line-height:25px; font-size:16px; color:#fff; padding:0 5px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; background:#09c9c7; display:inline-block; vertical-align:middle; }
.block01 .mar .newsbox .ntext .lists .date .sort.bg_blue{ background:#09c9c7; }
.block01 .mar .newsbox .ntext .lists .date .sort.bg_red{ background:#ea5a59; }
.block01 .mar .newsbox .ntext .lists .date .sort.bg_pink{ background:#e585ab; }
.block01 .mar .newsbox .ntext .lists .date .nus{ font-size:14px; padding:0 5px; color:#000; }

.block02{ padding:0px 0px 80px 0px; }
.block02 .mar{ max-width:1300px; margin:auto; }
.block02 .mar .title{ margin:0 0 20px 0; display:flex; justify-content:space-between; align-items:flex-end; }
.block02 .mar .title .h1{ font-size:46px; color:#333; font-weight:bold; padding-left:55px; background-image:url(../images/layout/icon_love_red.svg); background-repeat:no-repeat; background-position:center left; background-size:44px; line-height:42px; letter-spacing: 3px; }
.block02 .mar .title .mores{ display:flex; align-items:center; }
.block02 .mar .title .mores .span_txt{ display:block; font-size:18px; color:#000; padding:0 0 0 5px; }
.block02 .mar .title .mores .span_add{ display:block; background:#ea5a59; width:18px; height:18px; line-height:19px; text-align:center; font-size:18px; color:#fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.block02 .mar .planbox{ margin-left:-30px; display:flex; padding:20px 0 0 0; }
.block02 .mar .planbox .plangrid{ width:33.3334%; padding:0 0 0 30px; display:flex; }
.block02 .mar .planbox .plangrid .pbg{ width:100%; }
.block02 .mar .planbox .plangrid .pbg .pimg{ display:block; width:100%; padding-bottom:72%; background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.block02 .mar .planbox .plangrid .pbg .ptext{ padding:20px 0; }
.block02 .mar .planbox .plangrid .pbg .ptext .h2{ font-size:24px; color:#333; margin:0 0 10px 0; font-weight:bold; line-height:1.4; }
.block02 .mar .planbox .plangrid .pbg .ptext .ps{ font-size:16px; color:#888; line-height:1.6; margin-bottom:25px; }
.block02 .mar .planbox .plangrid .pbg .ptext .loadbar{ width:100%; height:12px; background:#fad2e5; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; margin:10px 0 5px 0; position:relative; overflow:hidden; }
.block02 .mar .planbox .plangrid .pbg .ptext .loadbar span{ position:absolute; top:0; left:0; height:12px; display:block; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px;
background: rgb(229,133,171);
background: -moz-linear-gradient(left,  rgba(229,133,171,1) 0%, rgba(234,90,89,1) 100%);
background: -webkit-linear-gradient(left,  rgba(229,133,171,1) 0%,rgba(234,90,89,1) 100%);
background: linear-gradient(to right,  rgba(229,133,171,1) 0%,rgba(234,90,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e585ab', endColorstr='#ea5a59',GradientType=1 ); }

.block02 .mar .planbox .plangrid .pbg .ptext .txt{ font-size:18px; color:#000; padding:10px 0; }
.block02 .mar .planbox .plangrid .pbg .ptext .txt span{ color:#e85252; font-size:18px; }
.block02 .mar .planbox .plangrid .pbg .pbtns{ padding:5px 0 0 0; }
.block02 .mar .planbox .plangrid .pbg .pbtns .alink{ display:inline-block; line-height:40px; font-size:16px; color:#fff; padding:0 10px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; background:#26a8d8; min-width:132px; text-align:center; }

.block03{ background:#fff; padding:0 0 80px 0; }
.block03 .mar{ max-width:1300px; margin:auto; padding:0 10px; }
.block03 .mar .title{ margin:0 0 20px 0; display:flex; justify-content:space-between; align-items:flex-end; }
.block03 .mar .title .h1{ font-size:46px; color:#333; font-weight:bold; padding-left:55px; background-image:url(../images/layout/icon_story.svg); background-repeat:no-repeat; background-position:center left; background-size:44px; line-height:42px; letter-spacing: 3px; }
.block03 .mar .title .h1 h1{ font-size:46px; color:#333; font-weight:bold; letter-spacing: 3px; line-height:42px; }
.block03 .mar .title .mores{ display:flex; align-items:center; }
.block03 .mar .title .mores .span_txt{ display:block; font-size:18px; color:#000; padding:0 0 0 5px; }
.block03 .mar .title .mores .span_add{ display:block; background:#e7853e; width:18px; height:18px; line-height:19px; text-align:center; font-size:18px; color:#fff; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; }
.block03 .mar .title.news .h1{ background-image:url(../images/layout/icon_news.svg); }
.block03 .mar .title.news .span_add{ background:#e585ab; }
.block03 .mar .title.mov .h1{ background-image:url(../images/layout/icon_mov.svg); }
.block03 .mar .title.mov .span_add{ background:#8cc420; }

.block03 .mar .probox{ margin-left:-30px; display:flex; padding:20px 0 0 0; }
.block03 .mar .probox .progrid{ width:25%; padding:0 0 0 30px; }
.block03 .mar .probox .progrid .pbg{ width:100%; display:block; }
.block03 .mar .probox .progrid .proimg{ width:100%; padding-bottom:100%; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; margin:0 0 15px 0; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
.block03 .mar .probox .progrid .date{ font-size:15px; color:#888; margin:0 0 10px 0; }
.block03 .mar .probox .progrid .h2{ font-size:22px; color:#333; margin:0 0 10px 0; font-weight:bold; line-height: 1.4; }
.block03 .mar .probox .progrid .txt{ font-size:16px; color:#888; line-height:1.8; }
.block03 .mar .probox .progrid .probtn{ margin:10px 0 0 0; }
.block03 .mar .probox .progrid .probtn .btn{ display: inline-block; line-height: 40px; font-size: 16px; color: #fff; padding: 0 10px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background: #26a8d8; min-width: 132px; text-align: center; }

.block03 .mar .rangebox{ display:flex; }
.block03 .mar .rangebox .r_abox{ width:75%; padding-right:30px; padding-top:20px; }
.block03 .mar .rangebox .r_bbox{ width:25%; display:flex; }

.block03 .mar .rangebox .r_abox .progrid{ width:33.33334%; }

.block03 .mar .newbox{ width:100%; background:#faf7eb; padding:20px; text-align: right; border-radius:10px;}
.block03 .mar .newbox .title{ display:block; }
.block03 .mar .newbox .title .mores{ display:inline-flex; }
.block03 .mar .newbox .title .h1{ text-align:left; margin-bottom:25px; }
.block03 .mar .newbox .newmov{ width:100%; padding-bottom:100%; position:relative; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; overflow:hidden; }
.block03 .mar .newbox .newmov iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }
.block03 .mar .newbox .ntitle{ padding:15px 0 0 0; font-size:22px; font-weight:bold; color:#333; text-align:left; line-height: 1.4; }
.block03 .mar .newbox .nranges{ display:flex; flex-wrap:wrap; }


/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1280px){
.block02 .mar .planbox .plangrid .pbg:hover .pbtns .alink{ background-color:#e585ab; }	
	
.block03 .mar .probox .progrid .pbg:hover .probtn .btn{ background-color:#e585ab; }

}


/*================================●●●●●●●●●●●●電腦●●●●●●●●●●●●================================*/
@media screen and (max-width:1280px){
.down_an{ left:10px; }
.project_menu{ right:10px; }

.innbanner{ margin-top:100px; }

.block01 .mar{ padding: 60px 20px 80px 20px; }
.block01 .mar .newsbox .nimgs{ padding:0 15px 0 0; }
.block01 .mar .newsbox .ntext{ padding:0 0 0 15px; }

.block02{ padding:0 0 40px 0; }
.block02 .mar{ padding:0 20px; }
.block02 .mar .planbox{ margin-left:-20px; }
.block02 .mar .planbox .plangrid{ padding:0 0 0 20px; }

.block03{ padding:0 0 40px 0; }
.block03 .mar{ padding:0 20px; }
.block03 .mar .probox{ flex-wrap:wrap; margin-left: -20px; }
.block03 .mar .probox .progrid{ padding: 0 0 30px 20px; }

.block03 .mar .rangebox{ display:block; }
.block03 .mar .rangebox .r_abox{ width:100%; padding:0 0 20px 0; }
.block03 .mar .rangebox .r_bbox{ width:100%; padding:0; }

.block03 .mar .newbox .nranges{ flex-wrap:nowrap; align-items:center; }
.block03 .mar .newbox .newmov{ width:50%; padding-bottom:50%; }
.block03 .mar .newbox .ntitle{ flex:1; padding:0 0 0 25px; }

.block03 .mar .newbox .title{ display:flex; }
.block03 .mar .newbox .title .mores{ display:flex; }
.block03 .mar .newbox .title .h1{ margin:0; }
}


/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.down_an{ top: 400px; left: 7px; }
.down_an .border{ width: 24px; }
.down_an .word{ font-size: 12px; }

.block03 .mar .probox .progrid{ width:50%; }

.block03 .mar .rangebox{ display:block; }
.block03 .mar .rangebox .r_abox{ width:100%; padding:0 0 20px 0; }
.block03 .mar .rangebox .r_bbox{ width:100%; padding:0; }

.block03 .mar .newbox .nranges{ flex-wrap:no-wrap; align-items:center; }
.block03 .mar .newbox .newmov{ width:50%; padding-bottom:50%; }
.block03 .mar .newbox .ntitle{ flex:1; padding:0 0 0 25px; }

.block03 .mar .newbox .title{ display:flex; }
.block03 .mar .newbox .title .mores{ display:flex; }
.block03 .mar .newbox .title .h1{ margin:0; }

}


/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.down_an { display: none; }
.left_image{ top:auto; bottom:10px;}

.project_menu{ display:none; }

.innbanner { margin-top:70px; }

.block01 .mar{ padding:40px 20px 80px 20px;  }
.block01 .mar .newsbox{ display:block; }
.block01 .mar .newsbox .nimgs{ width:auto; padding:0; }
.block01 .mar .newsbox .ntext{ padding:20px 0 0 0; width:auto; }
.block01 .mar .newsbox .ntext .title .h1{ font-size:36px; }

.block02{ padding:0 0 40px 0; }
.block02 .mar{ padding:0 20px; }
.block02 .mar .planbox{ display:block; padding:0; }
.block02 .mar .planbox .plangrid{ width:100%; padding:0 0 30px 20px; }
.block02 .mar .planbox .plangrid:last-child{ padding-bottom:0; }
.block02 .mar .planbox .plangrid .pbg .ptext .txt{ font-size:16px; }
.block02 .mar .planbox .plangrid .pbg .ptext .txt span{ font-size:16px; }
.block02 .mar .title .h1{ font-size: 30px; background-size: 30px; padding-left: 35px; letter-spacing: 0; }
.block02 .mar .title .mores{ margin-bottom:10px; }
.block02 .mar .title .mores .span_txt{ font-size:14px; }

.block03{ padding:0 0 40px 0; }
.block03 .mar .probox{ padding:0; }
.block03 .mar .probox .progrid{ width:100%; }
.block03 .mar .title .h1{ font-size: 30px; background-size: 30px; padding-left: 35px; letter-spacing: 0; }
.block03 .mar .title .h1 h1{ font-size: 30px; letter-spacing: 0; }
.block03 .mar .title .mores{ margin-bottom:10px; }
.block03 .mar .title .mores .span_txt{ font-size:14px; }

.block03 .mar .rangebox .r_abox .progrid{ width:100%; }

.block03 .mar .rangebox{ display:block; }
.block03 .mar .rangebox .r_abox{ width:100%; padding:0 0 20px 0; }
.block03 .mar .rangebox .r_bbox{ width:100%; padding:0; }

.block03 .mar .newbox .title{ display:flex; }
.block03 .mar .newbox .title .mores{ display:flex; }
.block03 .mar .newbox .title .h1{ margin:0; }

.block03 .mar .newbox .nranges{ flex-wrap:wrap; }
.block03 .mar .newbox .newmov{ width:100%; padding-bottom:100%; }
.block03 .mar .newbox .ntitle{ padding:10px 0 0 0; }

}