@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
:root{
    --main:#5f477b;
    --white:#ffffff;
    --bluepur:#756093;
    --lightpur:#e0d3f4;
    --purplered:#a30059;
    --lightgray:#f9f9f9;
    --skyblue:#f2f0ff;
}
*{padding:0; margin:0; box-sizing: border-box; line-height: 1.5; text-decoration: none; }
html{height:100%;}
body{ font-family: 'arial','微軟正黑體'; height:100%; }

            h1{font-size:52px}
            h2{font-size:36px}
            h3{font-size:27px}
            h4{font-size:24px}
            h5{font-size:18px}
            h6{font-size:15px}

            #header{display:flex; flex-direction: column; width: 100%; padding:0%;position: fixed; top:0; left:0; z-index: 1; background: var(--white);}
            #header .menuArea{ display: flex; flex-direction: row; justify-content: flex-start; align-items:stretch; padding:10px 5% 10px; gap:20px}
            #header .menuArea .logoArea .mobile_hamburger{display:none;}
            #header .menuArea .logoArea .mobile_language_area{display:none;}
            #header .menuArea > .logoArea{display: inline-block; flex:1 1 45%; }
            #header .menuArea > .logoArea >.logo img{width: 100%; max-width: 360px;}
            #header .menuArea .subMenuArea{display:inline-flex; flex:1 1 55%; flex-direction: column; }
            #header .menuArea .subMenuArea > .subMenu{display:flex; flex-direction: row; justify-content: flex-end;gap:15px; }
            #header .menuArea .subMenuArea > .subMenu a{font-size:19px; color:var(--main);}
            #header .menuArea .subMenuArea > .subMenu a:hover{color:var(--purplered)}
            #header .menuArea .subMenuArea > .subMenu a.iconimg{min-width: 30px; max-width: 30px ; height:30px; position: relative; overflow: hidden;}
            #header .menuArea .subMenuArea > .subMenu a.iconimg > img{width:100%; position: absolute;top:0;}
            #header .menuArea .subMenuArea > .subMenu a.iconimg:hover > img{top:-100%;}
            #header .menuArea .subMenuArea > .subMenu a.language{background:var(--main); color:var(--white); font-size:17px; padding:0 10px; border-radius: 5px;; display:inline-flex; justify-content: center; align-items: center; height:30px }
            #header .menuArea .subMenuArea > .subMenu a.language:hover{background: var(--purplered);}
            #header .menuArea .subMenuArea > .sloganArea{text-align: right; margin-top: 15px;}
            #header .menuArea .subMenuArea > .sloganArea img{width: 100%;max-width:500px;}
            select[name=change_language_item]{font-size:17px; font-weight: 500;padding:3px; background:var(--main); color:var(--white); border-radius: 5px;border:0; outline: 0;}

            nav.mainMenuArea{ display: block; background: var(--main);}
            nav.mainMenuArea ul.mainArea{ display: flex; list-style: none; flex-direction: row; justify-content: flex-end; align-items: stretch; padding: 0 5%; gap:1% }
            nav.mainMenuArea ul.mainArea > li{ padding:0px 0px;position: relative;}
            nav.mainMenuArea ul.mainArea > li:has(ul)::before{content: ">"; font-family: "Poppins", sans-serif; font-weight: 400; font-size:21px; color:#fff; position: absolute; left:82%;top:50%; transform: translate(0,-50%); padding:5px 5px; cursor: pointer; transition: all .2s linear; }
            nav.mainMenuArea ul.mainArea > li:has(ul):hover::before{transform:translate(0,-55%) rotate(90deg);}
            nav.mainMenuArea ul.mainArea > li > a{ display:inline-block; font-size:21px; color:var(--white);line-height: 2.2; padding:0 40px; white-space: nowrap;}
            nav.mainMenuArea ul.mainArea > li:hover{background: var(--bluepur);}
            nav.mainMenuArea ul.mainArea > li > ul{ display:flex; flex-direction: column; align-items: center; min-width: 100%; position: absolute; top:100%;left:50%; transform: translate(-50%, 0%); list-style: none; padding:0px;opacity: 0; visibility: hidden; animation: .2s linear forwards; z-index: -1; }
            nav.mainMenuArea ul.mainArea > li > ul > li{display:block; width: 100%;}
            nav.mainMenuArea ul.mainArea > li > ul > li > a{ display:block; width: 100%; white-space: nowrap; text-align: center; font-size:18px; line-height:2; padding:10px 15px;background: #fff; border-bottom: 1px #eee solid;color:#333;}
            nav.mainMenuArea ul.mainArea > li > ul > li > a:hover{background: var(--lightpur); color:var(--purplered);}

            nav.mainMenuArea .mobile_subMenuArea{display:none}
            
            /*desk animation*/
		    @keyframes vvv{
			0%{visibility: visible;top:100%; opacity: 0; }
			100%{opacity:1; top:100%; visibility: visible;  }
		    }
		    @keyframes hhh{
			0%{opacity: 1;visibility: visible; }
			100%{opacity:0; visibility: hidden;}
		    }

            @media screen and (max-width:1280px){
                h1{font-size:42px}
                h2{font-size:34px}
                h3{font-size:29px}
                h4{font-size:24px}
                h5{font-size:18px}
                h6{font-size:15px}
                .sloganArea img{width: 100%;max-width:480px;}
                nav.mainMenuArea ul.mainArea{gap: 0;}
                nav.mainMenuArea ul.mainArea > li > a{ padding: 0 30px 0 15px}
                nav.mainMenuArea ul.mainArea > li:has(ul)::before{ font-size:21px}
            }

            @media screen and (max-width:1179px){
                #header .menuArea .subMenuArea{display:none}
                nav.mainMenuArea{position: fixed; width: 100%; z-index: 1; overflow-y: auto; background: var(--lightpur);left:-100%; visibility: hidden; opacity: 0; height:100%; transition: all .3s linear; }
                nav.mainMenuArea ul.mainArea{flex-direction: column; padding:0 ;  }
                nav.mainMenuArea ul.mainArea > li{padding:0%; text-align: center;  }
                nav.mainMenuArea ul.mainArea > li:hover{opacity: 1; visibility: visible;display:block;z-index: 1; background: var(--lightpur); color:var(--main) }
                nav.mainMenuArea ul.mainArea > li:hover a{color:var(--main)}
                nav.mainMenuArea ul.mainArea > li.hover{background: var(--main); color:var(--white)}
                nav.mainMenuArea ul.mainArea > li.hover a{color:var(--white)}
                nav.mainMenuArea ul.mainArea > li > ul{position: relative; padding: 0; height: 0; opacity: 1; visibility: visible; overflow-y:hidden; transition: height .2s linear; }
                nav.mainMenuArea ul.mainArea > li:has(ul)::before{left:85%;top:25px; padding:10px 15px; transform: translate(0,-50%);color:var(--main)}
                nav.mainMenuArea ul.mainArea > li:has(ul):hover::before{transform:translate(0,-50%) rotate(0deg);opacity: 1; visibility: visible;color:var(--main)}
                nav.mainMenuArea ul.mainArea > li:has(ul).hover::before{transform:translate(0,-55%) rotate(90deg);opacity: 1; visibility: visible;color:var(--white);}
                nav.mainMenuArea ul.mainArea > li > a{padding:0;width: 220px;color:var(--main)}
                nav.mainMenuArea ul.mainArea > li.hover > ul{background: var(--white);z-index: 1;}
                nav.mainMenuArea ul.mainArea > li.hover > ul > li > a{background: var(--white); color: var(--main);}
                nav.mainMenuArea ul.mainArea > li > ul > li{ background: var(--white);}
                nav.mainMenuArea ul.mainArea > li > ul > li > a{background: var(--white);}

                nav.mainMenuArea .mobile_subMenuArea{display:block; margin-top:30px}
                nav.mainMenuArea .mobile_subMenuArea .subMenu{display:flex; flex-direction: column;padding:0 5%; gap:30px}
                nav.mainMenuArea .mobile_subMenuArea .subMenu .contact{display:flex; flex-direction: row; justify-content:center; gap:10px  } 
                nav.mainMenuArea .mobile_subMenuArea .subMenu .contact a{ width: 150px; text-align: center; color:var(--main); line-height: 2; border:1px var(--main) solid; font-size:18px;}
                nav.mainMenuArea .mobile_subMenuArea .subMenu .share{ display:flex; flex-direction: row; justify-content: center; gap:20px}
                nav.mainMenuArea .mobile_subMenuArea .subMenu .share a{ display:inline-block; width:60px; height:60px; overflow: hidden;}
                nav.mainMenuArea .mobile_subMenuArea .sloganArea{width: 100%; text-align: center; padding:0 8%; margin:30px 0}
                #header .menuArea .logoArea{flex:1 1 100%; display:flex; flex-direction: row; align-items: center;gap:5%}
                #header .menuArea .logoArea > .logo{ flex:1 1 100%; display:inline-block;}
                #header .menuArea .logoArea > .logo img{width: 100%; max-width: 350px;}
                #header .menuArea .logoArea .mobile_hamburger{ flex:1 0 50px; display:inline-flex;position: relative; width: 50px; height:50px; flex-direction: column; border:0px var(--main) solid; border-radius: 9px; cursor: pointer;}
                #header .menuArea .logoArea .mobile_hamburger span:nth-child(1){transition: all .2s linear; display:inline-block; width:80%; height:3px; background: var(--main); top: 25%; left:50%; transform: translate(-50%,-50%); position: absolute;}
                #header .menuArea .logoArea .mobile_hamburger span:nth-child(2){transition: all .2s linear; display:inline-block; width:80%; height:3px; background: var(--main); top: 50%; left:50%; transform: translate(-50%,-50%); position: absolute;}
                #header .menuArea .logoArea .mobile_hamburger span:nth-child(3){transition: all .2s linear; display:inline-block; width:80%; height:3px; background: var(--main); top: 75%; left:50%; transform: translate(-50%,-50%); position: absolute;}
                #header .menuArea .logoArea .mobile_language_area{flex:1 0 50px;display:inline-block;}
                #header .menuArea .logoArea .mobile_language_area a.mobile_language{background:var(--main); color:var(--white); font-size:17px; padding:0 10px; border-radius: 5px; display:inline-flex; justify-content: center; align-items: center; height:30px}
                #header .menuArea .logoArea .mobile_language_area a.mobile_language:hover{background: var(--purplered);}
                

                #header .menuArea .logoArea .mobile_hamburger.hover span:nth-child(1){ transition: all .2s linear; background: var(--purplered); top:50%; transform: translate(-50%,-50%) rotate(45deg); }
                #header .menuArea .logoArea .mobile_hamburger.hover span:nth-child(2){ transition: all .2s linear; background: var(--purplered); left:0; opacity: 0; transform: translate(-50%,-50%) ; }
                #header .menuArea .logoArea .mobile_hamburger.hover span:nth-child(3){ transition: all .2s linear; background: var(--purplered); top:50%; transform: translate(-50%,-50%) rotate(-45deg); }
                
            }

            @media screen and (max-width:1179px){
                h1{font-size:38px}
                h2{font-size:33px}
                h3{font-size:29px}
                h4{font-size:24px}
                h5{font-size:18px}
                h6{font-size:15px}
                
            }

            @media screen and (max-width:600px){
                h1{font-size:33px}
                h2{font-size:27px}
                h3{font-size:24px}
                h4{font-size:21px}
                h5{font-size:18px}
                h6{font-size:15px}
                #header .menuArea .logoArea .mobile_hamburger{ flex:1 0 40px; width: 40px; height:40px;}
            }