/*body *
	{
	
		font-family: "微軟正黑體";
	
	}
	
	body
	{
	
		 margin: 0px;
		 background-position: bottom;
		 background-image: url('../myImg/login/login.jpg'); 
		 background-size: cover;
	
	}*/
	
	login[box=login] 
	{
	
		 display: flex; 
		 flex-direction: column; 
		 justify-content: center; 
		 align-items: center;
		 height: 100%;
		 color: black;
	
	}

	login[box=window]
	{
	
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 width: 50%; 
		 border-radius: 20px;
		 border: 2px solid #d4cfc5;
		 background-color: #F7F3EB;
		 box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.5);
	
	}
	
	login[box=title]
	{
	
		  margin-top: 50px;
		  display: block; 
		  text-align: center;
		  font-size: 28px;
		  font-weight: bold;
	
	}

	form[option=login], form[option=register]
	{
	
		 display: flex; 
		 flex-direction: column; 
		 margin: 50px 0px;
		 width: 80%;
	
	}
	
	login[box=inputIcon]
	{
	
		  margin: 10px 0px;
		  display: flex; 
		  align-items: center;
		  justify-content: flex-start;
		  margin-bottom: 10px;
	
	}

	div[name=radioContent]
	{
		
		display: flex;
		flex-direction: column;
		
	}

	register[box=input]
	{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10px;
		
	}

	/*login[pos=bottom], register[pos=bottom]
	{
	
		  margin-top: 50px;
	
	}*/
	
		
	img
	{
		
		margin-right: 10px;	
		
	}
	
	input[pos=login], input[pos=register], select
	{
		
		 padding: 0px 10px;
		 width: 100%;		
		 height: 35px; 
		 font-size: 18px;
		 border-radius: 20px;
		 border: none;
	
	}

	login[option=login], login[option=register], login[option=forget]
	{
	
		 width: 100%;	
		 padding: 12px; 
		 font-size: 20px;
		 font-weight: bold;
		 text-align: center; 
		 letter-spacing: 2;
		 border-radius: 30px; 
		 background-color: #5081A2;
		 color: white;
		 cursor: pointer;
	
	}
	
	login[option=login]:hover, login[option=register]:hover, login[option=forget]:hover
	{
		
		 background-color: #A6A6A6;

	}

	login[box=error], register[box=error]
	{
	
		display: none;
		text-align: center;	
		font-size: 20px;
		font-weight: bold;
		color: #D13B56;
		
	}
	
	login[box=userInfo]
	{
		
		 position: absolute; 
		 bottom: 0px; 
		 left: 10px;
		
	}
	
	login[box=FunctionColumn]
	{
		
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 10px;
		font-weight: 500;
		
	}
	
	input[type=radio]
	{
		
		cursor: pointer;
		
	}
	
	login[box=function]
	{
		
		cursor: pointer;
		
	}
	
	login[box=function]:hover
	{
		
		font-weight: bold;
		color: red;
		
	}

	p[name=items]
	{
		
		margin: 0px;
		font-size: 20px;
		font-weight: bold;
		white-space: nowrap;
		
	}

	p[class=necessary]:before
	{
	
		content: "*";
		margin-right: 2px;
		font-size: 18px;
		font-weight: bold;
		color: #D13B56;
	
	}
	
	p[class=unnecessary]:before
	{
	
		content: "*";
		margin-right: 2px;
		font-size: 18px;
		font-weight: bold;
		color: rgba(0, 0, 0, 0);
	
	}
	
	[box=error]
	{
		
		margin: 10px 0px;
		
	}
	
	loading
	{
	
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		z-index: 9999999;
		overflow-y: hidden;
	
	}

	loading p
	{
	
		font-size: 20px;
		font-weight: bold;
		color: black;
	
	}
	
	/*驗證*/
	input[name=random]
	{
		
		width: 120px;
		
	}
	
	div[name=random]
	{
		
		margin: 0px 20px;
		padding: 0px 10px;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		border: 2px solid black;
		
	}
	
	input
	{
		
		border: 1px solid #e0e0e0 !important;
		
	}
	
	div[class=autoContent]
	{
		
		display: flex;

	}
	
	div[class=autoContent] div
	{
		
		margin: 0px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	div[class=autoContent] div label
	{
		
		margin: 2px 0px 0px 5px;
		
	}

	/*前往驗證*/
	p[use=sendCheck]
	{
		
		display: none;
		margin-left: 5px;
		padding: 5px 10px;
		font-size: 16px;
		white-space: nowrap;
		border-radius: 30px; 
		background-color: #5081A2;
		color: white;
		cursor: pointer;
		
	}
	
	p[use=sendCheck]:hover
	{
		
		background-color: #A6A6A6;
		
	}
	
	login.unaction
	{
		
		background-color: #A6A6A6;
		
	}

	p[name=back]
	{
		
		width: 100%;
		text-align: center;
		font-size: 20px;
		color: #5081A2;
		cursor: pointer;
		
	}
	
	p[name=back]:hover
	{
		
		color: #A6A6A6;
		
	}
	
	div[name=passwordContent]
	{

		width: 100%; 
		display: flex; 
		position: relative;
		
	}

	div[name=eye]
	{
		
		position: absolute;
		margin-right: 10px;
		margin-top: 5px;
		right: 0px;
		font-family: "fontAwesome";
		color: black;
		cursor: pointer;
		
	}
	
	div[name=eye]:hover
	{
		
		color: #A6A6A6;
		
	}

	
/* 針對 RWD 做調整 */
@media screen and (max-width: 768px) {

    /* 讓 login[box=login] 直排 */
    login[box=login] {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: auto;
    }

    /* 讓 login[box=window] 變成直排 */
    login[box=window] {
        width: 90%; 
        margin: 0 auto;
    }

    /* login[box=title] 的調整 */
    login[box=title] {
        font-size: 24px;  /* 文字大小稍微調整 */
    }

    /* form 調整為直排 */
    form[option=login], form[option=register] {
        width: 90%;
    }

    /* 讓 inputIcon 變為直排 */
    login[box=inputIcon] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 讓 radioContent 變為直排 */
    div[name=radioContent] {
        flex-direction: column;
    }

    /* 讓 input 欄位填滿 */
    input[pos=login], input[pos=register], select {
        width: 100%;
    }

    /* 按鈕調整 */
    login[option=login], login[option=register], login[option=forget] {
        width: 100%;
        padding: 15px;
    }

    /* login[box=error] 顯示與否 */
    login[box=error], register[box=error] {
        display: block;
    }

    /* 讓 img 圖片不會影響排版 */
    img {
        margin-right: 0px;
    }

    /* p[name=items] 設定 */
    p[name=items] {
        font-size: 18px;
    }

    /* 讓驗證欄位適應大小 */
    input[name=random], div[name=random] {
        width: 100%;
        margin-bottom: 20px;
    }

    /* 讓 input 範圍適應 */
    input {
        width: 100%;
    }
	
		/*驗證*/
	input[name=random]
	{
		
		width: 120px;
		
	}
	
	div[name=random]
	{
		
		margin: 0px;
		padding: 0px;

	}
	
}