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


* {margin:0px; padding:0px;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;900&family=Noto+Serif+TC:wght@700display=swap');
/* font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif; */


body, html {position:relative; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:300; color:#4f4f4f; overflow-x:hidden; background:#E1DCD5;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cen1400 {display:block; width:100%; max-width:1400px; margin:auto; position:relative;}
.cen1080 {display:block; width:90%; max-width:1080px; margin:auto; position:relative;}

#head {position:relative; border-bottom:1px solid #4f4f4f;}
#head .cen1400 {display:flex; flex-wrap:nowrap; justify-content:space-between;}
#head .a {width:25%; max-width:170px; height:auto;}
#head .b {width:50%; max-width:387px; height:auto;}

#from_kate {position:relative; background-color:#ccc7c1; margin-top:3px; border-top:1px solid #4f4f4f; overflow:hidden;}

#from_kate .cen1400 {padding:50px 0px; display:flex; flex-wrap:nowrap; background-image:url(../images/Kate_bg.jpg); background-position:right top; background-size:auto 100%; background-repeat:no-repeat;}

#from_kate .dialog {background:#f4f0ea; position:relative;}

#from_kate .headline {display:flex; position:relative;}
#from_kate .headline .line {width:25%; background:#625d57; position:relative;}
#from_kate .headline .line::after {display:block; content:''; width:100%; height:2px; background:#f4f0ea; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0;}
#from_kate .headline p {font-size:40px; color:#50ff8a; font-style:italic; background:#625d57;}

#from_kate .talkabout {display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;}
#from_kate .talkabout .intro {transform:rotate(270deg) translate(0px,0px); margin:50px;}
#from_kate .talkabout .text {margin:30px 30px 30px 0px; font-size:18px; line-height:30px; text-align:justify;}
.highlighting {background:#625d57; color:#50ff8a;}

#from_kate .k_k {margin-left:15px; margin-right:11%;}
#from_kate .k_k .arrow {margin-top:15px; margin-left:-15px;}

.work_section {margin:100px auto;}

.sec_title {padding:30px 0px; border-bottom:1px solid #4f4f4f; position:relative; z-index:1;}
.sec_title .cen1080 {display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-end;}
.sec_title img {margin-right:20px;}
.sec_title h1 {font-size:40px; line-height:55px; font-family: 'Noto Serif TC', serif; font-weight:700;}

.work_content {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; margin:30px auto; position:relative; z-index:1;}
.work_img {width:55%; max-width:587px; position:relative;}
.work_img img {width:100%;}
.work_space {width:3%;}
.work_analyze {display:flex; flex-wrap:wrap; width:42%; border-left:1px solid #4f4f4f; border-right:1px solid #4f4f4f;}

.logoicon {position:relative; width:100%;}
.logoicon .brand_logo {display:block; margin:auto; width:100%; max-width:440px; height:auto;}
.logoicon .do_icon {display:block; margin:auto; width:60%; max-width:230px; height:auto;}

.objective {width:100%; align-self:flex-end; box-sizing:border-box; padding:15px; border-top:1px solid #4f4f4f;}
.objective p {font-size:20px; line-height:30px;}
.objective p.ob_text {font-weight:500;}

.anly_rt {border-right:0px;}
.anly_lt {border-left:0px;}

.work_info {display:flex; justify-content:space-around;}
.work_info p {display:inline-block; font-size:15px;}
.work_info p.blank {padding:0px 15px; margin-left:5px; border-bottom:1px solid #4f4f4f;}

.work_section article p {font-size:22px; line-height:40px; letter-spacing:1px; text-align:justify;}
.work_section article p.h2 {font-size:30px; line-height:50px; letter-spacing:1px; text-align:justify; font-weight:500;}
.work_section article small {font-size:15px;}

.mor {color:#4f4f4f; background:#50ff8a; border-bottom:1px solid #4f4f4f;}

#video a {display:block; width:100%; height:912px; background:url(../images/video_1920.jpg) center no-repeat;}
#video a img {display:none;}

#from_nana {background:#f4f0ea; position:relative;}
#from_nana .cen1400 {display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:flex-start; background:url(../images/nana_bg.jpg) left top no-repeat; background-size:auto 100%;}

.nana_nana {width:20%; max-width:151px; position:relative; margin:60px 15px 60px 0px;}
.nana_nana .nanaa {width:100%;}
.nana_nana .nana_arrow {position:absolute; right:-15px; top:165px;}

.nana_say {width:65%; background:#e4dfd9; margin:60px 0px;}
.nana_headline {background:#999591; display:flex; flex-wrap:nowrap; justify-content:space-between; position:relative;}
.nana_headline .title {font-size:30px; color:white; padding:10px; font-style:italic; background:#999591; position:relative; z-index:1;}
.nana_headline::after {position:absolute; display:block; content:''; width:100%; height:2px; background:#e4dfd9; z-index:0; bottom:15px;}
.nana_headline .name {font-size:16px; color:white; align-self:flex-end; background:#999591; position:relative; z-index:1; padding:10px;}
.mid_line {position:relative;}
.mid_line::after {display:block; content:''; height:24px; width:50%; background:#e4dfd9; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

.talk p {font-size:18px; line-height:30px; padding:20px; text-align:justify;}

.feedback {align-self:center;}
.feedback p {transform:rotate(270deg) translate(0px,0px); margin:50px;}

.ft_tp_border {display:block; height:3px; border-top:1px solid #4f4f4f; border-bottom:1px solid #4f4f4f;}


footer {position:relative; background:#78736e; padding:50px 0px;}
footer .cen1080 {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-end;}
footer .our {width:80%; margin-right:5%;}
footer .our img {width:100%; max-width:782px; margin-bottom:20px;}
footer .qrcode {width:15%; position:relative;}
footer .qrcode img {width:100%;}
footer p {font-size:18px; line-height:30px; color:#e1dcd6; text-align:justify;}


.bg_icon {position:absolute; z-index:0;}
.bg_1 {right:0px; top:0px;}
.bg_2 {left:-200px; top:250px;}
.bg_3 {right:-30px; bottom:150px;}
.bg_4 {left:-140px; top:250px;}
.bg_5 {right:-50px; bottom:60px;}
.bg_6 {left:-100px; top:300px;}
.bg_7 {right:-50px; bottom:250px;}
.bg_8 {left:-50px; top:200px;}
.bg_9 {left:-150px; bottom:100px;}
.bg_10 {right:-50px; bottom:0px;}
.bg_11 {right:-30px; top:250px;}
.bg_12 {left:-200px; bottom:120px;}
.bg_13 {left:-100px; top:250px;}
.bg_14 {right:-50px; bottom:120px;}




@media (max-width: 1400px) {
    #video a {height:auto; background:none;}
    #video a img {display:block; width:100%; height:auto;}
}



@media (max-width: 768px) {

    #from_kate .cen1400 {padding:30px 0px; background-image:none;}

    #from_kate .dialog {width:75%;}
    #from_kate .k_k {width:20%; margin-left:5px; margin-right:0px;}
    #from_kate .k_k .head_kk {width:100%; height:auto;}

    #from_kate .headline .line {width:10%;}
    #from_kate .headline p {font-size:22px;}
    #from_kate .talkabout .intro {display:none;}
    #from_kate .talkabout .text {margin:15px; font-size:16px; line-height:26px;}

    #from_kate .k_k .arrow {width:35px; margin-top:5px;}

    .sec_title .cen1080 {flex-wrap:wrap; justify-content:center;}
    .sec_title img {width:40%; margin-bottom:30px;}
    .sec_title h1 {font-size:30px; line-height:40px; text-align:center;}

    .work_content {flex-wrap:wrap;}
    .work_img {width:100%;}
    .work_space {width:100%; height:20px;}
    .work_analyze {width:100%;}

    .anly_rt {border-right:1px solid #4f4f4f;}
    .anly_lt {border-left:1px solid #4f4f4f;}

    .work_info p {display:block; text-align:center; font-size:12px;}
    .work_section article p {font-size:18px; line-height:30px;}

    #from_nana .cen1400 {background:none;}
    .feedback {position:absolute; top:10px; right:10px;}
    .feedback p {transform:none; margin:0px;}

    .nana_nana {margin:50px 5px 50px 0px;}
    .nana_nana .nana_arrow {display:none;}
    .nana_say {width:75%; margin:50px 0px;}

    .nana_headline {flex-wrap:wrap;}
    .nana_headline .title {font-size:22px;}
    .talk p {font-size:16px; line-height:26px; padding:10px;}

    footer .cen1080 {flex-wrap:wrap; justify-content:center;}
    footer .our {width:100%; margin-right:0px;}
    footer .qrcode {width:30%; margin-top:20px;}
    footer p {font-size:15px; line-height:26px;}

    .bg_1 {width:20%;}
    .bg_3 {width:30%; bottom:-100px;}
    .bg_5 {display:none;}
    .bg_8 {top:0px;}
    .bg_9 {display:none;}
    .bg_10 {width:35%; bottom:-100px;}
    .bg_12 {width:30%; bottom:-120px;}
    .bg_13 {display:none;}
    .bg_14 {bottom:-80px;}
    

}