@charset "utf-8";
/* CSS Document */
        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&family=Noto+Sans+TC:wght@400;500&family=Noto+Serif+TC:wght@600;700&display=swap');
    
        body {
            font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
            margin: 0px;
            padding: 0px;           
        }
        a {
            text-decoration: none;
        }
        a:visited {
            color: black;
        }
        a:link {
            color: black;
        }
        a:active {
            color: black;
        }/*f2e86c*/
        .header {
            z-index: 3;
            position: relative;
            background-color: #f2e86c;
            margin: 0 auto;
            width: 100%;
            height: 100vh;
        }
        .logo {
            z-index: 5;
            position: absolute;
            padding: 1%;
        }
        .logo img{
            width: 100px;
            height: 50px;
        }
        .nursesbanner  {
            z-index: 5;
            margin: 0 15%;
            background-repeat: no-repeat;
            background-image: url(../images/520nursesday.jpg);
            background-size: 70vw auto;
            background-position: center;
            width: 70vw;
            height: 100vh;
        }

           /*position: absolute;
           z-index: 2;
           margin: 0 15%;
           width: 70vw;
           height: 60vh;
           text-align:center;
           font-family: 'Noto Sans TC', sans-serif;
           font-size:59pt;
           padding-top:40vh;
           overflow:hidden;
           -webkit-backface-visibility: hidden;
           -webkit-perspective: 1000;
           -webkit-transform: translate3d(0,0,0);
        }
       .nursesday {
           font-size: 56pt;
           font-weight: 700;
           letter-spacing: 5px;
           display:inline-block;
           overflow:hidden;
           white-space:nowrap;
           font-family: 'Noto Serif TC', serif;
        }
       .iroo {
           display:inline-block;
           overflow:hidden;
           white-space:nowrap;
        }
       .nursesday:first-of-type {
           animation: showup 6s infinite;
        }
       .iroo:first-of-type {
           animation: showup 6s infinite;
        }

       .nursesday:last-of-type {
           width:0px;
           animation: reveal 6s infinite;
        }
       .iroo:last-of-type {
           width:0px;
           animation: reveal 6s infinite;
        }

       .nursesday:last-of-type span {
           margin-left:-470px;
           animation: slidein 6s infinite;
        }
       .iroo:last-of-type span {
           margin-left:-470px;
           animation: slidein 6s infinite;
        }

       @keyframes showup {
           0% {opacity:0;}
           20% {opacity:1;}
           80% {opacity:1;}
           100% {opacity:0;}
        }
       @keyframes slidein {
           0% { margin-left:-800px; }
           20% { margin-left:-800px; }
           35% { margin-left:0px; }
           100% { margin-left:0px; }
        }
       @keyframes reveal {
           0% {opacity:0;width:0px;}
           20% {opacity:1;width:0px;}
           30% {width:470px;}
           80% {opacity:1;}
           100% {opacity:0;width:470px;}
        }
        .nurses{
			font-family: 'Noto Sans TC', sans-serif;
			font-size: 25pt;
        }
        .testimonial{
            z-index: 1;
            position:relative;
            color: white;
			font-size:170pt;
			font-family: 'Dancing Script', cursive; 
			margin: 0 15%;
			width: 70vw;
			height: 60vh;
			text-align:center;
			padding-top:39vh;
			overflow:hidden;
			-webkit-backface-visibility: hidden;
			-webkit-perspective: 1000;
			-webkit-transform: translate3d(0,0,0);
        }*/
        .container {
			margin:0 15%;
        }
		.content {
            margin: 0 auto;
        }
		.nursesvideo{
            z-index: 3;
            position: relative;
            margin: 100px 0;
            padding-top: 25px;
            padding-bottom: 46.25%;
            height: 0;
            overflow: hidden;
        }
		.nursesvideo iframe,.nursesvideo object,.nursesvideo embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
       .foreword {
            position: relative;
            height: auto;
            padding-bottom: 80px; 
            float: left;
            width: 100%;
       }
       .foreword img {
            width: 100%;
            height: auto;
       }
       .forewordr{
            float: right;
            width: 47%;
       }
       .forewordl{
            float: left;
            width: 47%;
       }
       .sequence {
            font-family: 'Noto Serif TC', serif;
            font-size: 19pt;
            font-weight: 600;
            line-height: 40px;
       }
        .quotest {
            line-height: 45px;
            width: 100%;
            left: -30px;
            position: relative;
            padding-top:0px; 
            color: #c5c5c5;
            font-family: 'Noto Serif TC', serif;
            font-size: 40pt;
       }
        .quotesf {
            line-height: 45px;
            text-align: right;
            position: relative;
            right:  -30px; 
            color: #c5c5c5;
            font-family: 'Noto Serif TC', serif;
            font-size: 40pt;
       }
        .slogan {
            font-family: 'Noto Serif TC', serif;
            font-size: 32pt;
            font-weight: 700;
            color: rgb(238, 82,122);
            line-height: 60px;
       }
        .tag {
           font-family: 'Noto Sans TC', sans-serif;
           font-feature-settings: normal;
           font-size: 16pt;
           font-weight: 500; 
           color: rgb( 15, 86,135);
           line-break: auto;
           line-height: 35px; 
        }
        .line {     
            position: relative;
            border-bottom:1px solid black;
            margin: 85% 0 8% 0;
        }
        #line {
            position: relative;
            border-bottom:1px solid black;
            margin: 15% 0 8% 0;
        }
        #tag{
           font-family: 'Noto Sans TC', sans-serif;
           font-feature-settings: normal;
           font-size: 15pt;
           color: rgb( 15, 86,135);
           line-break: auto;
           line-height: 35px; 
        }
        .remarks{
           color: #555;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 14pt;
           font-weight:200; 
        }
        .focus{
            list-style-type: upper-alpha;
           color: #EE527A;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 16pt;
           font-weight:500; 
        }
        .box-wrap {
            float: left;
            height: auto;
            border-top:1px solid black;
            text-align: center;
        }
        .botton {
        }
        .box-wrap .toggle {
            margin: 50px 0 50px 0;
            width: 170px;
            height: 45px;
            font-size: 16px;
            border: 2px solid black;
            background-color: white;
        }
        .box-wrap.box-open .toggle:after {
            content: "CLOSE"
        }
        .box-wrap.box-close .toggle:after {
            content: "READ MORE"
        }

        .box {
            border: 0px solid black;
            display: block;
            width: 100%;
            text-align: left;
            transition: height 0.5s ease;
            overflow: hidden;
            padding: 0 0px 0px 10px;
        }
        .box-close .box {
            height: 0px;
        }

        .box-open .box {
            height: auto;
        }

        .contentboxl{
            float: left;
            width: 47%;
        }
        .contentboxl img{
            width: 100%;
            height: auto;
        }
        .contentboxr{
            float: right;
            width: 47%;
        }
        .contentboxr img{
            width: 100%;
            height: auto;
        }
        #spance {
            float: right;
            width: 47%;
            height: 500px; 
        }
       .digital {
            font-family: 'Noto Serif TC', serif;
            font-size: 45pt;
        }
       .title {
            font-family: 'Noto Serif TC', serif;
            font-size: 28pt;
            font-weight: 600;
            line-height: 85px;
        }
        p{
           list-style-type: none;
           font-family: "GTWalsheimVogue", "Noto Sans CJK TC", "Microsoft JhengHei", "Pingfang TC", sans-serif;
           font-feature-settings: normal;
           line-break: auto;
           font-size: 16pt;
           font-weight: 500;
           line-height: 35px;
           padding: 0 0 5% 0;
        }
       .shop {
           width: 100%;
           height: 100%;
           overflow: hidden;
           text-align: center;
        }
       .item1 {
           float: left;
           width: 43%;
           height: auto;
           overflow: hidden;
        }
       .item2 {
           float: right;
           width: 43%;
           height: auto;
           overflow: hidden;
        }
        .item1 img{ 
           padding: 0 0 10px 0;      
        }
        .item2 img{
           padding: 0 0 10px 0;
        }
       .img{
           width: 100%;
           transition: all 0.2s;
        }
       .img:hover{
           transform: scale(1.1);}
        }
       .itemtitle{
           font-family: 'Noto Sans TC', sans-serif;
           font-weight: 500;
           font-size: 18pt;
        }
        .price{
           font-weight: 300;
           font-size: 13pt;
        }
       #nav{
           color: white;
           margin-top: 0px;
           position: fixed;  /*absolute*/
           top: 50%; 
           right: -95px;  
           background: black;   /*3B5998*/
           padding: 10px 20px;
           border-radius: 90px; 
           -moz-border-radius: 90px;
           -webkit-border-radius: 100px;
        }
       #nav1{
           color: white;
           margin-top: 40px;
           position: fixed;  
           top: 50%; 
           right: -104px;  
           background: black;  /*d22578*/
           padding: 10px 20px;
           border-radius: 90px; 
           -moz-border-radius: 90px;
           -webkit-border-radius: 100px;
        }
       #nav2{
           color: white;
           margin-top: 80px;
           position: fixed; 
           top: 50%; 
           right: -93px;
           background: black;  /*fe0000,ce1a19*/
           padding: 10px 20px;
           border-radius: 90px;
           -moz-border-radius: 90px;
           -webkit-border-radius: 100px;
        }
       #nav3{
           color: white;
           margin-top: 120px;
           position: fixed;
           top: 50%;
           right: -75px;
           background: black; 
           padding: 10px 20px;
           border-radius: 90px;
           -moz-border-radius: 90px;
           -webkit-border-radius: 100px;
        }
       #nav:hover{
           color: white;
           background-color: #3B5998;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 11pt;
           right: -20px;
        }
       #nav a:visited{ 
           color: white;
        }
       #nav a:link {
           color: white;
           text-decoration:none;
        }
       #nav a:active {
           color: white;
        }
       #nav1:hover{  
           color: white;
           background-color: #d22578;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 11pt;
           right: -20px;
        }
       #nav1 a:visited{ 
           color: white;
        }
       #nav1 a:link {
           color: white;
           text-decoration:none;
        }
       #nav1 a:active {
           color: white;
        }
       #nav2:hover{ 
           color: white;
           background-color: #ce1a19;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 11pt;
           right: -20px;
        }
       #nav2 a:visited{ 
           color: white;
        }
       #nav2 a:link {
           color: white;
           text-decoration:none;
        }
       #nav2 a:active {
           color: white;
        }
       #nav3:hover{
           color: white;
           font-family: 'Noto Sans TC', sans-serif;
           font-size: 11pt;
           right: -20px;
        }
       #nav3 a:visited{ 
           color: white;
        }
       #nav3 a:link {
           color: white;
           text-decoration:none;
        }
       #nav3 a:active {
           color: white;
        }
       .fa { 
           color: white;
           text-align: center;
           text-decoration: none;
        }
       .fa:hover { 
           color: white;
           opacity: 0.7;
        }
       .lds-heart {
           display: inline-block;
           position: relative;
           width: 80px;
           height: 80px;
           transform: rotate(45deg);
           transform-origin: 40px 40px;
        }
       .lds-heart div {
           top: 32px;
           left: 32px;
           position: absolute;
           width: 32px;
           height: 32px;
           background: #EE527A;
           animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        }
       .lds-heart div:after,
       .lds-heart div:before {
           content: " ";
           position: absolute;
           display: block;
           width: 32px;
           height: 32px;
           background: #EE527A;
        }
       .lds-heart div:before {
           left: -24px;
           border-radius: 50% 0 0 50%;
        }
       .lds-heart div:after {
           top: -24px;
           border-radius: 50% 50% 0 0;
        }
       @keyframes lds-heart {
           0% {transform: scale(0.95);}
           5% {transform: scale(1.1);}
           39% {transform: scale(0.85);}
           45% {transform: scale(1);}
           60% {transform: scale(0.95);}
           100% {transform: scale(0.9);}
        }
       .footer {
           background-color: black;
           color: white;
           width: 100%;
           padding: 45px 0;
           display: flex;
           position: relative;
           text-align: center;
        }
      .copyright {
          margin: 0 auto;
          font-size: 9pt;
          font-family: 'Noto Sans TC', sans-serif;
          font-weight: 100;
          color: #CCC;
        }
      #back {
          display: none;
          position: fixed;
          bottom: 125px;
          right: 10px;
          z-index: 3;
          font-size: 18px;
          border: none;
          outline: none;
          background-color: black;
          color: white;
          cursor: pointer;
          padding: 10px 10px;
          border-radius: 90px;
        }
      #back:hover {
          background-color: #555;
        }