﻿
body {
    background-color: black;
    margin: 0 auto;
    text-align: center;
}

#above_title{ 
      margin: 0px 0px -38px 0px; /*�Ntitle�W�誺�Ŷ��Y�p*/
}



/*99999999999999999 abovebuttontitle 9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999*/


#abovebuttontitle { /*���w���s����m_޳��*/
    padding: 22px 0px 200px 44px;    
}

    /*ul li a�@�w�n���w��a�h�šA��i�ϥ�link visited hover active�I���Ϥ�*/
#abovebuttontitle ul li a {
    float: left;
    color: #700000; /*�ݶ�J ��X��https://www.hexcolortool.com/?_ga=2.198848879.1317634052.1554176982-339526040.1554176982#700000*/
    font-family: Verdana; /*�i��ܪ��r�����r��Helvetica_Arial_Verdana_sans-serif*/
    font-size: 17px;
    font-weight: bold; /*font-weight:normal�@��ʲӪ���r�Bbold�O����*/
    width: 633px; /*��Ӽ��Ҥ����j*/
    height: 174px; /*���ƭȤӤ�(�Τ��s�b)���ܼ��ҳ����ϰ�|�Q�屼*/
    text-decoration: none; /*�ϱo�W�s�����u����*/    
}


        /*����link visited hover active
https://blog.csdn.net/wumenglu1018/article/details/54603109*/
        /*link �N��a�b���Q�I���H�e�����A*/
        /*visited �N��a�b�D���I���H�᪺���A*/
        /*gif teaching   https://docs.google.com/presentation/d/1EMJ_sFxZ9--3z_l1hxwf-nrAmooO2R_rolqcGLSNdVk/edit#slide=id.gead48e9912_0_57    */
#abovebuttontitle ul li a:link, #abovebuttontitle ul li a:visited {
    background: url(../image_willy/abovebuttontitleAmove.gif);
    background-repeat: no-repeat;
}

        /*hover�N���ƹ��첾����ҤW��ɪ����p*/
#abovebuttontitle ul li a:hover {
    background: url(../image_willy/abovebuttontitleB.png);
    background-repeat: no-repeat;
}


        /*active�N���ƹ����U�ɪ����p*/
#abovebuttontitle ul li a:active {
    background: url(../image_willy/abovebuttontitleC.png);
    background-repeat: no-repeat;
}

/*6666666666666666 abovebuttontitle 6666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666*/

/*777777777�������������������������D�ϰ��������7777777777777777777777777777777777777777777777777777777*/

body #title{  
/*��ܾ�ӧ��㤧�Ϥ��A�åB�Q�νվ㰪�רӽվ����Ϥ�(�ϥ�contain)����j�P�Y�p
http://www.wibibi.com/info.php?tid=CSS3_background-size_%E5%B1%AC%E6%80%A7
margin�վ�Ϥ����k�`�e��[���k�ƭȬO�ѥ~�ة�������]�B
padding�վ�Ϥ�����A�ѩҦb�Ϥ��~�ة�������
*/
/*����O�h�ݥ��Τp�e�a��[�e]�վ㦨980px�A�b��Jheight��css*/
/*�Ȩϥ�contain�o�L�f�tmargin:0px auto�V�|�A�]���I���|�۰��Y��A�M�Ӥ�r�j�p�o���ܰ�
�ϥ�margin:0px auto�ӹF��m���ĪG�~���T�A��������r�ϥ�<br>�H��&nbsp;�binedx.html�����ӽվ��m*/
/*background-size: contain;�[�W��Ϥ�width�H��height�A����ҽվ�weidth&height�Y�i�F��Ϥ��Y��ĪG*/
      width:980px; /*title�I���Ϥ����e*/
      height: 170px; /*title�I���Ϥ�����*/
      background-size: contain; /*�ϥ�contain&�e�����t�X�쥻�Ϥ�����ҽ���(�Ҧp:�쥻��74*97=148*194)�Y�i���Ϥ�������Y��*/
      background-image:url('../image_willy/Above_Background9_2.png');
      background-repeat:no-repeat;      
      background-position: top center;
      border:0px #ccc solid;      /*������ɽu��*/
      margin: 0px auto;  /*������s���������վ�j�p�L�{�����A��Ϥ����o�ͽ���*/
      
}

/*���w���D��m*/
body #title a h1{  
      padding: 45px 0px 0px 130px;
      text-decoration:none; /*�ƹ��|���첾��title�W��ɨå���{���u_޳��*/
}


body #title a h1 #title1{  

      font-family: Arial, Helvetica, sans-serif;
      font-size: 49px; 
      font-style: normal; 
      font-variant: normal;  /*small-caps，這個屬性值會將英文字母變大寫，而且字體縮小; normal 是預設值*/
      font-weight: 900;       
      color: #e9c705;      
}


/*�ƹ�����W�s���W�~��ܩ��u
    http://www.webtech.tw/info.php?tid=%E6%BB%91%E9%BC%A0%E7%A7%BB%E5%88%B0%E8%B6%85%E9%80%A3%E7%B5%90%E4%B8%8A%E6%89%8D%E9%A1%AF%E7%A4%BA%E8%B6%85%E9%80%A3%E7%B5%90%E5%BA%95%E7%B7%9A%E7%9A%84%E8%A8%AD%E8%A8%88%E8%AA%9E%E6%B3%95
*/
/*hover�N���ƹ��첾��title�W��ɪ����p*/
body #title a h1 #title1:hover{        
      text-decoration:underline;
}


#titleaboveweilunliangbackground {
    width: 600px; /*title�I���Ϥ����e*/
    
    background-size: contain; /*�ϥ�contain&�e�����t�X�쥻�Ϥ�����ҽ���(�Ҧp:�쥻��74*97=148*194)�Y�i���Ϥ�������Y��*/
    background-image: url('../image_willy/above_weilunliang.png');
    background-repeat: no-repeat;
    background-position: top center;
    border: 0px #ccc solid; /*������ɽu��*/
    margin: 0px 0px 70px 50px;
    padding: 30px 0px 70px 50px;
}


/*777777777���������������D�ϰ��������������7777777777777777777777777777777777777777777777777777777*/

#above_Button_Willy{ 
      margin: 0px 0px 0px 0px; /*�Nabove_Button_Willy�W�誺�Ŷ��Y�p*/
}

/*777777777�����������������������������s�H�ζW�s����������7777777777777777777777777777777777777777777777777777777*/
#Button_Background_Willy {    /*���w[���s���I��]�Ҧs�b���d��A�åB�\�W�I��*/
    width: 980px; /*���w�@�Ӧs�b���d��A�ϱo�����������\�b���ϰ�_޳��*/
    height: 33px;
    margin: 0px auto; /*�b�s���������Y�񪺹L�{���Ϥ����A�ä��|�������*/
    background-image:url('../image_willy/middle_Background9.png');
    background-repeat:repeat-y;				
    background-position:center;     
}

#Button_Willy {    /*���w���s����m_޳��*/
    padding: 0px 0px 0px 144px;

}


/*9999999 20200503 float:left; problem 99999999999999999999*/
#Button_Willy ul li{
float:left;  /*←解決float:left;問題(使得Button從左到右水平排列的因素)*/
position: relative;
height: 66px; /*���ƭȤӤ�(�Τ��s�b)���ܼ��ҳ����ϰ�|�Q�屼*/
}	
/*6666666 20200503 66666666666666666666*/

/*ul li a�@�w�n���w��a�h�šA��i�ϥ�link visited hover active�I���Ϥ�*/
#Button_Willy ul li a {
float:left;  /*使得Button從左到右水平排列的因素*/
position: relative;
color:#100000; /*�ݶ�J ��X��https://www.hexcolortool.com/?_ga=2.198848879.1317634052.1554176982-339526040.1554176982#700000*/
font-family:Verdana; /*�i��ܪ��r�����r��Helvetica_Arial_Verdana_sans-serif*/
font-size: 17px; 
font-weight: bold; /*font-weight:normal�@��ʲӪ���r�Bbold�O����*/
width: 140px; /*��Ӽ��Ҥ����j*/
height: 56px; /*���ƭȤӤ�(�Τ��s�b)���ܼ��ҳ����ϰ�|�Q�屼*/
text-decoration: none; /*�ϱo�W�s�����u����*/
padding: 5px 0px 0px 14px; /*��r����Ҥ�����m*/
}	

/*9999999999999999999999 未被選擇的主標籤 99999999999999999999999999999999999*/
/* ����link visited hover active99999999999999999999999999999999999
https://blog.csdn.net/wumenglu1018/article/details/54603109*/
/*link �N��a�b���Q�I���H�e�����A*/
/*visited �N��a�b�D���I���H�᪺���A*/
#Button_Willy ul li a:link, #Button_Willy ul li a:visited { 
background:  url(../image_willy/label_light_blue.png) ;
background-repeat:no-repeat;
}

/*hover�N���ƹ��첾����ҤW��ɪ����p*/
#Button_Willy ul li a:hover {    
background:  url(../image_willy/label_dark_blue.png);
background-repeat:no-repeat;
}	


/*active�N���ƹ����U�ɪ����p*/
#Button_Willy ul li a:active {    
    background:  url(../image_willy/label_spuerdark_blue.png);
    background-repeat:no-repeat;
}
/*66666666666666666666666666666666 未被選擇的主標籤 6666666666666666666666666666666666*/



/*9999999999999999999999 已被選擇的主標籤 99999999999999999999999999999999999*/
/* ����link visited hover active99999999999999999999999999999999999
https://blog.csdn.net/wumenglu1018/article/details/54603109*/
/*link �N��a�b���Q�I���H�e�����A*/
/*visited �N��a�b�D���I���H�᪺���A*/
#Button_Willy ul li #SelectedButton_Willy:link, #Button_Willy ul li #SelectedButton_Willy:visited { 
    background:  url(../image_willy/label_selectblue.png) ;
    background-repeat:no-repeat;
    }
    
    /*hover�N���ƹ��첾����ҤW��ɪ����p*/
#Button_Willy ul li #SelectedButton_Willy:hover {    
    background:  url(../image_willy/label_aftertouchingblue.png);
    background-repeat:no-repeat;
    }	
    
    
    /*active�N���ƹ����U�ɪ����p*/
#Button_Willy ul li #SelectedButton_Willy:active {    
        background:  url(../image_willy/label_spuerdark_blue.png);
        background-repeat:no-repeat;
    }
/*66666666666666666666666666666666 已被選擇的主標籤 6666666666666666666666666666666666*/
    

/*9999999999999999999  SubButton  999999999999999999999999999999*/

#SubButton_Willy { /*���w���s����m_޳��*/
    padding: 0px 0px 0px 122px;
}

/*99999999 解決float:left;問題 9999999999999999999*/
    #SubButton_Willy ul li {
        float: left; /*←解決float:left;問題(使得Button從左到右水平排列的因素)*/
        position: relative;
        height: 56px; /*���ƭȤӤ�(�Τ��s�b)���ܼ��ҳ����ϰ�|�Q�屼*/
    }
/*66666666 解決float:left;問題 666666666666666666666666666666666666666*/

    /*ul li a�@�w�n���w��a�h�šA��i�ϥ�link visited hover active�I���Ϥ�*/
    #SubButton_Willy ul li a {
        float: left; /*使得Button從左到右水平排列的因素*/
        color: #700000; /*�ݶ�J ��X��https://www.hexcolortool.com/?_ga=2.198848879.1317634052.1554176982-339526040.1554176982#700000*/
        font-family: Verdana; /*�i��ܪ��r�����r��Helvetica_Arial_Verdana_sans-serif*/
        font-size: 17px;
        font-weight: bold; /*font-weight:normal�@��ʲӪ���r�Bbold�O����*/
        width: 140px; /*��Ӽ��Ҥ����j*/
        height: 56px; /*���ƭȤӤ�(�Τ��s�b)���ܼ��ҳ����ϰ�|�Q�屼*/
        text-decoration: none; /*�ϱo�W�s�����u����*/
        padding: 5px 0px 0px 14px; /*��r����Ҥ�����m*/
    }


/*9999999999999999999999 未被選擇的副標籤 99999999999999999999999999999999999*/
        /*����link visited hover active
https://blog.csdn.net/wumenglu1018/article/details/54603109*/
        /*link �N��a�b���Q�I���H�e�����A*/
        /*visited �N��a�b�D���I���H�᪺���A*/
        #SubButton_Willy ul li a:link, #SubButton_Willy ul li a:visited {
            background: url(../image_willy/label_oriange.png);
            background-repeat: no-repeat;
        }

        /*hover�N���ƹ��첾����ҤW��ɪ����p*/
        #SubButton_Willy ul li a:hover {
            background: url(../image_willy/label_pink.png);
            background-repeat: no-repeat;
        }


        /*active�N���ƹ����U�ɪ����p*/
        #SubButton_Willy ul li a:active {
            background: url(../image_willy/label_dark_oriange.png);
            background-repeat: no-repeat;
        }

/*66666666666666666666666666 未被選擇的副標籤 666666666666666666666666666666666*/
        

/*9999999999999999999999 已被選擇的副標籤 99999999999999999999999999999999999*/
        /*����link visited hover active
https://blog.csdn.net/wumenglu1018/article/details/54603109*/
        /*link �N��a�b���Q�I���H�e�����A*/
        /*visited �N��a�b�D���I���H�᪺���A*/
        #SubButton_Willy ul li #SelectedSubButton:link, #SubButton_Willy ul li #SelectedSubButton:visited {
            background: url(../image_willy/label_selectred.png);
            background-repeat: no-repeat;
        }

        /*hover�N���ƹ��첾����ҤW��ɪ����p*/
        #SubButton_Willy ul li #SelectedSubButton:hover {
            background: url(../image_willy/label_aftertouchingred.png);
            background-repeat: no-repeat;
        }


        /*active�N���ƹ����U�ɪ����p*/
        #SubButton_Willy ul li #SelectedSubButton:active {
            background: url(../image_willy/label_dark_oriange.png);
            background-repeat: no-repeat;
        }

/*66666666666666666666666666 已被選擇的副標籤 666666666666666666666666666666666*/
        

/*6666666666666666666  SubButton  666666666666666666666666666666*/

/*�ϱo������ꪺ���Ү���*/
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

/*777777777�������������������s�H�ζW�s����������������7777777777777777777777777777777777777777777777777777777*/


#pencil_willy{ 
      width:980px; /*title�I���Ϥ����e*/
      height: 50px; /*title�I���Ϥ�����*/
      background-size: contain; /*�ϥ�contain&�e�����t�X�쥻�Ϥ�����ҽ���(�Ҧp:�쥻��74*97=148*194)�Y�i���Ϥ�������Y��*/
      background-image:url('../image_willy/pencil1.png');
      margin: 0px auto;
}


#above_content_willy{ /*�վ�I���P�W��]�������Z_޳��*/
    margin: 0px 0px -19px 0px;
}

#below_content_willy{ /*�վ�I���P�W��]�������Z_޳��*/
    margin: 0px 0px -4px 0px;
}

/*777777777�������������������������e������������7777777777777777777777777777777777777777777777777777777*/
#content_background_willy{ /*���ƭI���A��w�e��*/
      margin: 0px auto;
      width:980px;      
      background-image:url('../image_willy/middle_Background9.png');
      background-repeat:repeat-y;				
      background-position:center;      
}



    #content_background_willy h3 { /*�����D*/
        padding: 0px 100px 0px 100px;
        font-family: Verdana;
        font-size: 17px;
        color: gray;
        text-align: left;
    }

#adjust_subtitle_and_word{
    margin: 0px 0px -7px 0px;
}

#content_word { /*���e�d��*/
    font-family: Arial;
    /*margin: 0px auto;*/  /*    https://docs.google.com/presentation/d/132eyOayeWJZXPE4-tEtGK5kOrrdOPG-_oGynyO8XvTU/edit#slide=id.gdcd437ef3c_0_15     */
    /*width: 780px;*/
	margin: 0px 100px 0px 100px;
    text-align: left;
    line-height: 1.5 ;  
    /*How to Double-Space Text :       https://www.thesitewizard.com/css/double-space-and-line-spacing.shtml        */
}




/*hover�N���ƹ��첾��content_word(����)�W�s���W��ɪ����p*/
#content_word a font:hover{        
      text-decoration:underline;
}


/*777777777���������������e������������������7777777777777777777777777777777777777777777777777777777*/

#below_Background{
    width:980px;      
    height:100px;
    background-size: contain;
    margin:0px auto;
    background-image:url('../image_willy/below_Background9_4.png');
}


#btnpasswordwilly{
    width:200px;      
    
}



/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup {
    position:absolute;
    z-index:200; /* aaaalways on top*/
    
    margin-left: -200px;
    margin-top: 16px;
    width: 250px;
    
  /*background-color: #777;*/
  
    
  text-align: left;
    font-size: 11pt!important;
    line-height: 150%;
    padding: 14px!important;
    color: #eeeeee !important;
    font-family: tahoma, verdana, arial, sans-serif !important;
    font-weight: normal!important;
    border: 11px groove #333333 !important;
    /*  https://www.w3schools.com/css/css_border.asp  */
    background-image: url(./bg-pup.png)!important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px;
    }
  
    #jump_out_pup_willy:hover{        
      text-decoration:underline;
  }
    
  /*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/
  
  
  

/*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   99999999999999999999999999999999999999999999999999999999999*/
#pup_willyup {
    position: absolute;
    z-index:200; /* aaaalways on top*/
    
    margin-left: -280px;
    margin-top: -210px;
    width: 250px;
    
  /*background-color: #777;*/
  
    
  text-align: left;
    font-size: 11pt!important;
    line-height: 150%;
    padding: 14px!important;
    color: #eeeeee !important;
    font-family: tahoma, verdana, arial, sans-serif !important;
    font-weight: normal!important;
    border: 11px groove #333333 !important;
    /*  https://www.w3schools.com/css/css_border.asp  */
    background-image: url(./bg-pup.png)!important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 22px;
    }
  
    #jump_out_pup_willy_willyup:hover{        
      text-decoration:underline;
  }
    
  /*滑鼠游標挪動到聯結上方，自動出現彈跳視窗.用我   666666666666666666666666666666666666666666666666666666666666*/
  
  



