@charset "utf-8";

.clearfix:after { content: " "; display: block; height: 0; visibility: hidden; clear: both; }

/*---------- Common styles --------------------------------------------------------------------------------*/

.navi a:link,
.navi a:visited,
.navi a:active { text-decoration: none; }
.navi a:hover { text-decoration: underline; }

/*---------- for PC & Tablet (skeleton) --------------------------------------------------------------------------------*/

/*.pc_tablet>.navi { border: 1px solid #dedede; background-color: #f8f8f8; }*/

.pc_tablet>.navi { border: none; background-color:;  color:#ffffff; }
.pc_tablet>.navi .menu_title { display: none; }
.pc_tablet>.navi .menu_opener { margin: 0; padding: 0 1em; float: left; line-height: 1.25em; padding: 1em 3em; font-size: 16px; }
.pc_tablet>.navi .view .menu_opener {}

.pc_tablet>.navi ul { list-style: none; margin: 0; padding-left: 0; }
.pc_tablet>.navi li ul { position: absolute; z-index: 2; top: 100%; left: 0; display: none; list-style: none; margin: 0; min-width: 100%; border-top: 0px solid #dedede; }

.pc_tablet>.navi li ul.pop_up_left { top: 0; right: 100%; left: auto; }

.pc_tablet>.navi li li ul { z-index: 3; top: 0; left: 100%; }

.pc_tablet>.navi li { position: relative; float: left; margin: 0; line-height: 16px; background:; white-space: nowrap; border-width: 0; border-style: solid; border-color: #dedede; cursor: pointer; }


.pc_tablet>.navi li:hover,
.pc_tablet>.navi li:active,
.pc_tablet>.navi li.selected { background: #666666;}
.pc_tablet>.navi li li { float: none; width: 100%; background: #2a2a2a; border-width: 0;  }
.pc_tablet>.navi li li:hover,
.pc_tablet>.navi li li:active { background: #666666; }
.pc_tablet>.navi li li li { background: #2a2a2a; }
.pc_tablet>.navi li li li:hover,
.pc_tablet>.navi li li li:active { background: #666666; }

.pc_tablet>.navi li.view {}

.pc_tablet>.navi li strong,
.pc_tablet>.navi li a,
.pc_tablet>.navi li span { display: block; padding: 1em 1.5em;  color:#ffffff;}

.pc_tablet>.navi li strong { padding-right: 3em; background: url(../images/more_side_rightW.webp) 100% 18px no-repeat; }
.pc_tablet>.navi li li strong,
.pc_tablet>.navi li li a,
.pc_tablet>.navi li li span { padding: 0.44em 1.5em; font-weight: normal; }

.pc_tablet>.navi li li strong { padding-right: 3em; background: url(../images/more_side_rightW.webp) 100% -192px no-repeat; }

/*
.pc_tablet>.navi li:hover>ul,
.pc_tablet>.navi li:active>ul,
.pc_tablet>.navi li li:hover>ul,
.pc_tablet>.navi li li:active>ul { display: block; }
*/

*:first-child+html .pc_tablet>.navi ul { zoom: 1; }
*:first-child+html .pc_tablet>.navi li { vertical-align: bottom; white-space: normal; zoom: 1; }
*:first-child+html .pc_tablet>.navi li strong,
*:first-child+html .pc_tablet>.navi li a,
*:first-child+html .pc_tablet>.navi li span { zoom: 1; }
*:first-child+html .pc_tablet>.navi li ul { width: 15em; zoom: 1; } /* fixed width - ie7 has bug */ 
*:first-child+html .pc_tablet>.navi li li { width: auto; }


/*---------- for iPhone & Android Mobile (skeleton) --------------------------------------------------------------------------------*/

.phone_mobile>.navi { border: 1px solid #000000; background-color: #f8f8f8; }

.phone_mobile>.navi .menu_title { display: block; font-weight:bold; font-size:16px; color:#ffffff; background:#2a2a2a; padding:8px 0; }
.phone_mobile>.navi .menu_opener { margin: 0; padding: 10px 15px; float: none; background: url(../images/more_side_rightW.webp) 100% 18px no-repeat; line-height: 1.75em; font-size: 18px; cursor: pointer; }
.phone_mobile>.navi .view .menu_opener { background: url(../images/more_side_rightW.webp) 100% -385px no-repeat; }

.phone_mobile>.navi ul { list-style: none; display: none; clear: left; margin: 0; padding-left: 0; font-weight:bold;}
.phone_mobile>.navi li ul { position: static; list-style: none; display: none; margin: 0; min-width: 100%; }
.phone_mobile>.navi li li ul { display: block; margin-left: 0; display: none; border-top-width: 0; }

.phone_mobile>.navi li { float: none; position: static; margin: 0; line-height: 1.75em; white-space: normal; background: #f0f0f0; border-width: 1px 0 0 0; border-style: solid; border-color: #dedede; cursor: pointer; }
.phone_mobile>.navi li:hover { background: #f8f8f8; }
.phone_mobile>.navi li li { background: #ebebeb; border-width: 1px 0 0 0; border-color: #d2d2d2; }
.phone_mobile>.navi li li li { background: #dfdfdf; border-color: #c5c5c5; }

.phone_mobile>.navi li.view>strong { background: #f8f8f8 url(../images/more_side_rightW.webp) 100% -387px no-repeat; }
.phone_mobile>.navi li li.view>strong { border-bottom: none; }

.phone_mobile>.navi li strong,
.phone_mobile>.navi li a,
.phone_mobile>.navi li span { display: block; padding: 10px 15px; }
/*
.phone_mobile>.navi li strong a,
.phone_mobile>.navi li strong span { margin: -10px -15px; }
*/
.phone_mobile>.navi li strong { padding-right: 3em; background: url(../images/more_side_rightW.webp) 100% 18px no-repeat; }
.phone_mobile>.navi li li strong { font-weight: bold; background: url(../images/more_side_rightW.webp) 100% 18px no-repeat; }
.phone_mobile>.navi li li a,
.phone_mobile>.navi li li span {}
/*
.phone_mobile>.navi li li strong a,
.phone_mobile>.navi li li strong span {}
*/

*:first-child+html .phone_mobile> .navi ul { zoom: 1; }
*:first-child+html .phone_mobile>.navi li ul { width: auto; zoom: 1; border-style: none; }
*:first-child+html .phone_mobile>.navi li ul {}
*:first-child+html .phone_mobile>.navi li li { width: 100%; zoom: 1;/* ie7 has bug on width */ }




/*---------- for PC & Tablet (theme B) --------------------------------------------------------------------------------*/

.sh_theme_b .pc_tablet>.navi .menu_opener { padding: .5em 40px; background-color: #ffffff; color: #000000; border-width: 0 1px 1px 0; border-style: solid; border-color: #dedede; }

.sh_theme_b .pc_tablet>.navi ul {

}
*:first-child+html .sh_theme_b .pc_tablet>.navi ul { zoom: 1; }

.sh_theme_b .pc_tablet>.navi li ul { left: -1px; margin-right: -1px; }
.sh_theme_b .pc_tablet>.navi li ul.pop_up_left { top: -1px; }
.sh_theme_b .pc_tablet>.navi li li ul { top: -1px; left: 100%; }

.sh_theme_b .pc_tablet>.navi li {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.sh_theme_b .pc_tablet>.navi li strong { padding: .5em 40px .5em 1em; background: url(../images/more_side_rightW.webp) 100% 11px no-repeat; }
.sh_theme_b .pc_tablet>.navi li li strong { padding: .4em 40px .4em 1em; background: url(../images/more_side_rightW.webp) 100% -194px no-repeat; }

.sh_theme_b .pc_tablet>.navi li a,
.sh_theme_b .pc_tablet>.navi li span { padding: .5em 1em; }
/*
.sh_theme_b .pc_tablet>.navi li strong a,
.sh_theme_b .pc_tablet>.navi li strong span { margin: -0.5em -40px -0.5em -1em; }
*/
.sh_theme_b .pc_tablet>.navi li li a { padding: .4em 1em; }
.sh_theme_b .pc_tablet>.navi li li span { padding: .4em 1em; }
/*
.sh_theme_b .pc_tablet>.navi li li strong a,
.sh_theme_b .pc_tablet>.navi li li strong span { margin: -0.4em -40px -0.4em -1em; }
*/


/*----------  for iPhone & Android Mobile (theme B) --------------------------------------------------------------------------------*/

.sh_theme_b .phone_mobile>.navi {
    background-color: #eeeeee;

    behavior: url(https://artcci.com.tw/css/PIE.htc);
}

.sh_theme_b .phone_mobile>.navi .menu_opener { padding: .7em 1em; background: url(../images/more_side_rightW.webp) 100% 12px no-repeat; line-height: 1.2; text-align: center; border: none; cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.sh_theme_b .phone_mobile>.navi .view .menu_opener { background: url(../images/more_side_rightW.webp) 100% -391px no-repeat; }

.sh_theme_b .phone_mobile>.navi ul {

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.sh_theme_b .phone_mobile>.navi>ul {
    border-style: solid;
    border-bottom: 1px;
    border-color: #6a6a6a;
    margin-bottom: 0;
	
}

.sh_theme_b .phone_mobile>.navi li { background: #3a3a3a; color:#ffffff; border-color: #aaaaaa;color:#ffffff }
.sh_theme_b .phone_mobile>.navi li:hover { background: #3a3a3a;color:#ffffff  }
.sh_theme_b .phone_mobile>.navi li li { background: #6a6a6a; border-width: 1px 0 0 0; border-color: #d2d2d2; color:#ffffff }
.sh_theme_b .phone_mobile>.navi li li li { background:#7d7d7d; border-color: #c5c5c5; color:#ffffff }

.sh_theme_b .phone_mobile>.navi li strong { padding: .6em 40px .6em 38px; background: url(../images/more_side_rightW.webp) 100% 15px no-repeat;color:#ffffff  }
.sh_theme_b .phone_mobile>.navi li li strong { padding: .4em 40px .4em 38px; background: url(../images/more_side_rightW.webp) 100% 15px no-repeat;color:#ffffff  }

.sh_theme_b .phone_mobile>.navi li a,
.sh_theme_b .phone_mobile>.navi li span { padding: .6em 1em; color:#ffffff }
/*
.sh_theme_b .phone_mobile>.navi li strong a,
.sh_theme_b .phone_mobile>.navi li strong span { margin: -0.6em -40px -0.6em -1em; }
*/
.sh_theme_b .phone_mobile>.navi li li a { padding: .6em 40px .6em 38px; }
.sh_theme_b .phone_mobile>.navi li li span { padding: .6em 38px; }
/*
.sh_theme_b .phone_mobile>.navi li li strong a,
.sh_theme_b .phone_mobile>.navi li li strong span { padding: -0.6em -40px -0.6em -1em; }
*/

.sh_theme_b .phone_mobile>.navi li.view>strong { background: #3a3a3a url(../images/more_side_rightW.webp) 100% -389px no-repeat; }


/*NOTE CONTROL IE8*/

/*.navi li */
.m2{}
.m3{}


/*##########  MENU4 #########################*/

ol.m5{
	list-style:none;
}

ol.m5 li{
	padding:0;
	margin:0;
}

.navi li li li ol.m5 li.m5Ttl{
	cursor:default;
	background-color:#999999;
	border-top:1px solid #333333;
	padding:5px 5px 5px 18px;
}

.navi li li li ol.m5 li a{
	display:block;
	padding:5px 5px 5px 18px;

}


.navi li li ul li.m4 a{
	display:block;
	width:auto;
	background: url(../images/more_side_rightW.webp) 100% 12px no-repeat;
	background-color:#2a2a2a;
	text-decoration:none;
}

.navi li li ul li.m4 a:hover{
	background-color:#666666;
}

.navi li li ul li.m4 a.m4active{
	background-color:#666666;
}


@media screen and (max-width: 560px) {
	
.navi li li li li.m4 a{	
		background-color:#d2d2d2;
		padding:0;
		margin:0;
		background: url(../images/more_side_rightW.webp) 100% 15px no-repeat;
}
	
.navi li li ul li.m4 a.m4active{
	background-color:#2a2a2a;
	background: url(../images/more_side_rightW.webp) 100% -389px no-repeat;
}	
	
	
ol.m5 li{
	padding:10px 0px 10px 0px;
}
	
}