/*------------------------------------------------------------------------------

main css

------------------------------------------------------------------------------*/
body{
	background: #001630 url(images/balloonIndex_w_bg.jpg) repeat-x center bottom;
	font-size: 19px;
	line-height: 1.2em;
	color: #ffffff;
	}
div img {
	max-width: 100%;
	height: auto;
	}
#container{
	width: 100%;
	/*overflow: hidden;*/
	display: block;
	}
#tent{
	z-index: 10;
	left: auto;
	right: auto;
	height: 600px;
	}
#wrap{
	position: relative;
	max-width: 100%;
	margin: auto;
	}
@media (max-width: 998px) {
#container{
	max-width: 100%;
	min-height: 600px;
	background: url(../images/balloonIndex.jpg) no-repeat center top;
	/*-moz-background-size: cover;*/
	/*background-size: cover;*/
	}
#tent{
	margin: auto;
	display: block;
	max-width: 100%;
	background: url(../images/tent.png) no-repeat center top;
	-moz-background-size: cover;
	background-size: cover;
	}}
@media (min-width: 999px) {
	#container{
	/*max-width: 1260px;*/
	background: url(../images/balloonIndex.jpg) no-repeat center top;
	display: block;
	margin: auto;
	}
	#tent{
	/*max-width: 1260px;*/
	background: url(../images/tent.png) no-repeat center top;
	display: block;
	margin: auto;
	}}

/*--------------------------------------------------------------
sub page css
frame260show
--------------------------------------------------------------*/
h2{
	clear: both;
	margin: 20px 0 0 0;
	text-align: center;
	color: #fff;
	font-weight: bolder;
/*	-webkit-text-fill-color: #fff;
	-webkit-text-stroke-color: #013571;
	-webkit-text-stroke-width: 1.00px;*/
	font: 250% "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
}

#subpage ul.all-img li.title-bg{
	background-color: purple;
	height: 250px;
	border: 5px solid purple;
}

#subpage ul.all-img li.title-bg h3{
	margin: 0;
	text-align: center;
	color: #ccc;
	font-weight: bolder;
	font: 125% "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
}
#frame260tutor #subpage .bg_part h3,
#magictutor .magictutor h3.title{
	clear: both;
	margin: 10% 0 2% 0;
	text-align: center;
	color: #000000;
	font-weight: bolder;
	font: 200% "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	border-bottom: 1px dashed #666;
	padding: 0.5% 0;
}

#large .large h3.title,
h3{
	clear: both;
	margin: 10% 0 2% 0;
	text-align: center;
	color: #ccc;
	font-weight: bolder;
	font: 200% "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	border-bottom: 1px dashed #ccc;
	padding: 0.5% 0;
}
.MDTM h4.title,
h4{
	clear: both;
	margin: 10% 0 2% 0;
	text-align: center;
	color: #999;
	font-weight: bolder;
	font: 180% "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	border-bottom: 1px dashed #666;
	padding: 0.5% 0;
}
#subpage{
	clear: both;
	width: 100%;
	display: block;
	}
#subpage .page{
	clear: both;
	width: 80%;
	font-size: 100%;
	display: block;
	margin: auto;
	color: #fff;
	line-height: 1.5em;
	text-align: center;
	}
#subpage .page table{
	width: 100%;
	}
#subpage .page table tr td{
	text-align: left;
	font-size: 100%;
	color: #fff;
	vertical-align: top;
	}
#subpage .page table tr td ul li{
	margin: 0;
	}
#subpage .page a{
	color: #09c;
	text-decoration: none;
	}
#subpage .page a:hover{
	color: #09c;
	text-decoration: underline;
	}
#subpage .page .img-bg{
	background-color: #fff;
	}
#subpage .page img{
	max-width: 100%;
	margin: 1%;
	}
#subpage .page table tbody tr td .txt_sml{
	font-size: 12px;
	}
#subpage .page blockquote{
	margin: 0 0 0 2em;
}

.tb_bg_color{
	background-color: #FFF;
}

.#subpage .page hr{

	clear: both;
	margin: 10% 0 2% 0;
	width: 90%;
	line-height: 1px;
	}

#subpage ul.all-img{
	clear: both;
	/*max-width: 1260px;*/
	width: 100%;
	margin: auto;
	display: block;
	/*border:1px green solid;*/

}
#subpage ul.all-img li{
	float: left;
	/*max-width: 400px;*/
	width: auto;
	margin: 1%;
	display: block;
	overflow: hidden;
	border: 5px solid #FFF;
	/*border:1px pink solid;*/
	}

#subpage ul.all-img li img{
	width: auto;
	/*max-height: 100%;*/
	height: 200px;
	margin: 0;
	padding: 0;
}

@media (max-width: 680px) {
#subpage ul.all-img{
	clear: both;
	width: 96%;
	margin: auto;
	display: block;
	/*border:1px green solid;*/
	}
#subpage ul.all-img li{
	float: left;
	width: 100%;
	margin: 2% auto;
	display: block;
	overflow: hidden;
	}
#subpage ul.all-img li img{
	width: 100%;
	height: auto;
	}}

/*------------------------------------------------------------------
IBAC
--------------------------------------------------------------------*/


@media (max-width: 320px) {
#IBAC #subpage .page table tbody tr td img{
	min-width: 100%;
}}
@media (max-width: 480px) {
#IBAC #subpage .page table tbody tr td img{
	min-width: 100px;
}}
@media (min-width: 481px) {
#IBAC #subpage .page table tbody tr td img{
	min-width: 130px;
}}

#IBAC #subpage .page table tbody tr td strong{
	clear: right;
	display: block;
}
#IBAC #subpage .page table tbody tr td ul
{
	clear: right;
	display: block;
	list-style: disc inside;
	margin-left: 3%;
}
#IBAC #subpage .page table tbody tr td ol
{
	clear: right;
	list-style: decimal inside;
	margin-left: 3%;
}
#IBAC #subpage .page table tbody tr td ul li{
	word-wrap: break-word;
    word-break: normal;
    word-break:break-all;
}
#IBAC #subpage .page table tbody tr td .ibacTB{
	overflow: hidden;
	width: 100%;
	display: block;
}
#IBAC #subpage .page table tbody tr td .ibacTB .ibacTB_l{
	float: left;
	width: 40%;
	display: block;
}
#IBAC #subpage .page table tbody tr td .ibacTB .ibacTB_r{
	float: right;
	width: 55%;
	display: block;
}
@media (max-width: 680px) {
#IBAC #subpage .page table tbody tr td .ibacTB .ibacTB_r,
#IBAC #subpage .page table tbody tr td .ibacTB .ibacTB_l{
	clear: both;
	width: 100%;
	display: block;
}}

@media (max-width: 780px) {
#IBAC #subpage table.accessory,
#IBAC #subpage table.accessory tbody tr td img{
	min-width: 100%;
	width: 100%;
}}

/*
IBAC.htm#Modeling designer training materials >> .MDTM > 造型設計師訓練教材
IBAC.htm#Decorating
*/

.magictutor,
.MDTM,
.subpage_decorating{
	text-align: left;
}
.magictutor ol,
.MDTM ol,
.subpage_decorating ol,
.magictutor ul,
.MDTM ul,
.subpage_decorating ul{
	margin: 0 0 0 2em;
}
.magictutor ul li,
.MDTM ul li,
.subpage_decorating ul li{
	list-style-type: disc;
}

#frame260tutor #subpage .bg_part .page h4{
	color: #333333;
	font-weight: bolder;
	font-family: "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
}
.magictutor h1,
.magictutor h2,
.magictutor h3,
.magictutor h4,
.magictutor h5,
.magictutor h6
{
	/*clear: both;*/
	/*margin: 10% 0 2% 0;*/
	/*text-align: center;*/
	color: #333333;
	font-weight: bolder;
	font-family: "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	/*border-bottom: 1px dashed #666;*/
	border: none;
	/*padding: 0.5% 0;*/
}
.MDTM h1,
.MDTM h2,
.MDTM h3,
.MDTM h4,
.MDTM h5,
.MDTM h6
{
	/*clear: both;*/
	/*margin: 10% 0 2% 0;*/
	/*text-align: center;*/
	color: #999;
	font-weight: bolder;
	font-family: "微軟正黑體", Arial, Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	/*border-bottom: 1px dashed #666;*/
	border: none;
	/*padding: 0.5% 0;*/
}

.magictutor h1,
.MDTM h1
{font-size: 180%;}
.magictutor h2,
.MDTM h2
{font-size: 160%;}
.magictutor h3,
.MDTM h3
{font-size: 140%;}
.magictutor h4,
.MDTM h4
{font-size: 120%;}
.magictutor h5,
.MDTM h5
{font-size: 110%;}
.magictutor h6,
.MDTM h6
{font-size: 100%;}

/*
.subpage_decorating,
.MDTM{font-size: 19px;}
*/

/*--------------------------------------------------------------

sub menu css

--------------------------------------------------------------*/
#frame260tutor ul.submenu{
	width: 100%;
}
ul.submenu {
	clear: both;
	max-width: 80%;
	margin: auto;
	display: table;
	text-align: center;
	list-style: none;
}

ul.submenu li {
	float: left;
	height: 19px;
	padding: 10px;
	margin: 1%;
	font-size: 19px;
	text-align: center;
	border-radius: 100px;
	text-align: center;
	white-space: nowrap;
	line-height: 1em;
}
@media (min-width: 681px) {
#contact ul.submenu li,
#large ul.submenu li,
#frame260tutor ul.submenu li,
#decor ul.submenu li,
#IBAC ul.submenu li,
ul.submenu li{
	/*min-width: 14%;*/
	/*min-width: 11%;*/
	min-width: 12.2%;
	}
#magictutor ul.submenu li{
		min-width: 19.6%;
		}}
@media (max-width: 680px) {
#contact ul.submenu li,
#large ul.submenu li,
#magictutor ul.submenu li,
#decor ul.submenu li,
#IBAC ul.submenu li,
#frame260tutor ul.submenu li,
ul.submenu li {
	min-width: 27%;	/* 3欄 */
	}}
@media (max-width: 580px) {
#contact ul.submenu li,
#large ul.submenu li,
#decor ul.submenu li,
#frame260tutor ul.submenu li,
ul.submenu li {
	min-width: 41%;
	}
#IBAC ul.submenu li,
#magictutor ul.submenu li{
	width: 90%;
	}}
@media (max-width: 380px) {
#contact ul.submenu li,
#large ul.submenu li,
#magictutor ul.submenu li,
#decor ul.submenu li,
#IBAC ul.submenu li,
#frame260tutor ul.submenu li,
ul.submenu li {
	width: 90%;
	margin: auto;
	}
#contact ul.submenu li,
#large ul.submenu li,
#magictutor ul.submenu li,
#decor ul.submenu li,
#IBAC ul.submenu li,
#frame260tutor ul.submenu li,
ul.submenu li {
	width: 90%;
	margin: auto;
	}}
ul.submenu li {
box-shadow: rgba(0, 0, 128, 0.4) 0px 0px 6px;
-webkit-box-shadow: rgba(0, 0, 128, 0.4) 0px 0px 6px;
-ms-box-shadow: rgba(0, 0, 128, 0.4) 0px 0px 6px;
-o-box-shadow: rgba(0, 0, 128, 0.4) 0px 0px 6px;
}
#frame260tutor ul.submenu li{
	color: #fff;
	background-color: #1099bd;
}

#IBAC ul.submenu li{
	color: #fff;
	background-color: #f8191a;
}

#decor ul.submenu li{
	color: #fff;
	background-color: #991dd5;
}
#magictutor ul.submenu li{
	color: #fff;
	background-color: #ea5a01;
}
#large ul.submenu li{
	color: #fff;
	background-color: #d9ba00;
}
#contact ul.submenu li{
	color: #fff;
	background-color: #FF9F00;
}
#contact ul.submenu li a,
ul.submenu li a{
	color: #fff;
	text-decoration: none;
}
#contact ul.submenu li:hover,
#large ul.submenu li:hover,
#magictutor ul.submenu li:hover,
#decor ul.submenu li:hover,
#IBAC ul.submenu li:hover,
#frame260tutor ul.submenu li:hover
{
	background-color: #fff;
}

#contact ul.submenu li:hover,
#contact ul.submenu li:hover a,
#contact ul.submenu li:hover a:hover{
	color: #FF9F00;
}
#large ul.submenu li:hover,
#large ul.submenu li:hover a,
#large ul.submenu li:hover a:hover{
	color: #d9ba00;
}
#magictutor ul.submenu li:hover,
#magictutor ul.submenu li:hover a,
#magictutor ul.submenu li:hover a:hover{
	color: #ea5a01;
}
#decor ul.submenu li:hover,
#decor ul.submenu li:hover a,
#decor ul.submenu li:hover a:hover{
	color: #991dd5;
}
#IBAC ul.submenu li:hover,
#IBAC ul.submenu li:hover a,
#IBAC ul.submenu li:hover a:hover{
	color: #f8191a;
}
#frame260tutor ul.submenu li:hover,
#frame260tutor ul.submenu li:hover a,
#frame260tutor ul.submenu li:hover a:hover{
	color: #1099bd;
}


/*--------------------------------------------------------------
subpage 連絡站長 css
--------------------------------------------------------------*/



#contact #subpage .page {
	clear: both;
	/*width: 50%;*/
	/*font-size: 100%;*/
	display: block;
	margin: auto;
	color: #fff;
	line-height: 1.5em;
	text-align: center;
	overflow: hidden;
	}
#contact #subpage .page .aboutMe {
	width: 180px;
	font-size: 100%;
	margin: 0 1%;
	color: #fff;
	line-height: 1.5em;
	text-align: center;
	}
#contact #subpage .page .aboutMe img {
	width: 100%;
	/*border: 1px solid #eeeeee;*/
	}
#contact #subpage .page .contactMe{
	max-width: 100%;
	}
@media (min-width: 1000px) {
#contact #subpage .page {
	max-width: 800px;
}
#contact #subpage .page .aboutMe {
	float: left;
	}
#contact #subpage .page .contactMe {
	float: left;
	margin: 0 0 0 80px;
	width: 50%
	}
.contactMe table{
	float: right;
	max-width: 450px;
	width: 100%;
	}}
@media (min-width: 681px) {
#contact #subpage .page .aboutMe {
	float: left;
	}
#contact #subpage .page .contactMe {
	float: left;
	margin: 0 0 0 10%;
	width: 50%
	}
.contactMe table{
	float: right;
	max-width: 450px;
	width: 100%;
	}}
@media (max-width: 680px) {
#contact #subpage .page .aboutMe {
	clear: both;
	margin: auto;
	}
#contact #subpage .page .contactMe{
	clear: both;
	width: 100%
	}}
.contactMe table{
	max-width: 445px;
	width: 100%;
	}
#contact #subpage .page table tr td p {
	text-align: right;
	}
#contact #subpage .page table tr td p ,
#contact #subpage .page textarea ,
#contact #subpage .page input {
	padding: 5px;
	margin: 1%;
	}
#contact #subpage .page td {
 	word-break:keep-all;
    word-wrap:normal;
	}
#contact #subpage .page textarea ,
#contact #subpage .page input[type="text"],
#contact #subpage .page input[type="email"] {
	width: 100%;
	max-width: 250px;
	min-width: 160px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
	}
#contact #subpage .page textarea,
#contact #subpage .page input{
	font-size: 15px;
	line-height: 1.2em;
	}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.1s 0.1s ease;
  opacity: 0;
}

/*-----------------------------------------------------
background
-----------------------------------------------------*/
#magictutor #subpage .bg_part .page,
#frame260tutor #subpage .bg_part .page{
		color: #111111;
	}
#frame260tutor #subpage .bg_part{
	background: url(../allimg/loons2.gif) repeat left top;
	padding: 0 0 60px 0;
}
#frame260tutor #subpage{
	margin-top: 160px;
}
#magictutor #subpage .bg_part{
	background: url(../allimg/starz.gif) repeat left top;
	margin-top: 30px;
	padding: 0 0 60px 0;
}