@media(max-width:1680px) {
	
    .modal-dialog {
		width: 82%;
		margin: 100px auto;
	}
	
	#pagetitle { background-position: center -70px;}
}

@media(max-width:1440px) {
	
	#pagetitle { background-position: center -50px;}
	
}

@media(max-width:1280px) {
	.rate {
		width: 620px;
		height: 538px;
	}
	
	.mtext {
		font-size: 1.4em;
		line-height: 1.6em;
	}
	
	.market > p { width: 80%;}
    
    .modal-dialog {
        width: 86%;
        margin: 80px auto;
    }
	
	#pagetitle { background-position: center -30px;}

}

@media(max-width:1024px) {
	
	#sign { top:230px;}
	
	#head {	min-height: 320px;}
	#head.carousel .fill { height: 320px;}
	#head.carousel .fill-page {	height: 200px;}
	
	.t1 { background-image: url(../images/d_header1.jpg);}
	.t2 { background-image: url(../images/d_header2.jpg);}
	.t3 { background-image: url(../images/d_header3.jpg);}
	.t4 { background-image: url(../images/d_header4.jpg);}
	.t5 { background-image: url(../images/d_header5.jpg);}
	.t6 { background-image: url(../images/d_header6.jpg);}
	.t7 { background-image: url(../images/d_header7.jpg);}
	.t8 { background-image: url(../images/d_header8.jpg);}
	
	#pagetitle { background-position: center -20px;}
	
	.h-caption h4 > i {	left: 6%;}
	
	.event-title { font-size: 1.5em;}
	
	.event-tab td:first-child > i { display: none;}
	
	.event-tab td > dt > span.online, .event-tab td.speaker-team > span { display: block;}

	.event-tab, .process-tab, .YFspeaker-tab { width: 98%;}
	
	.event-tab td.speaker-team, .event-tab td.speaker-team > span, .process-tab th, .process-tab td:last-child { white-space: nowrap;}
	
	.tax-Tab th, .tax-Tab td { font-size: 1.2em;}

}

@media(max-width:991px) {
    .submenu { display:none;}
    
    .customer-img, .img-related { margin-bottom: 30px;}
	
	.navbar-inverse .navbar-nav > li > a,
	.navbar-inverse .navbar-nav > .open ul > a { font-size: 1.1em;}
	.nav > li > a { padding: 15px 11px;}

	.navbar-nav .dropdown-menu { font-size: 1em;}
	.navbar-nav .dropdown-menu > li > a { padding:6px 10px;}
	
	.btn { padding: 5px 10px;}
	
	#pagetitle { background-position: center top;}
	
	.ptitle { margin-top: 0;}
	.hours { text-align: center;}
	.mtext { font-size: 1.4em;}
    
    .rate {
		width: 560px;
		height: 486px;
	}
	
	.h-caption h4 > i {	left: 24%;}
	
	.h-body > p {font-size: 1.2em;}
	
	.sample::after { top: -32px;}
	
	.media-heading { padding-top: 12px;}
	
	.modal-body { height: 550px;}
	
	.notice-title::before {
		top: 12px;
		left: 15px;
		width: 3px;
		height: 20px;
	}
	
	footer p > span { display: block;}
	
	.top-space { margin-top: 30px;}
	.bottom-space { margin-bottom: 60px;}
	.top-margin { margin-top:15px;}
	
	.event-word { padding-bottom: 130px;}
	.sign-btn { padding: 10px;}
	
	.event-tab td.time > span {
		display: block;
		text-align: center;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}

}

@media(max-width:767px) {
    #logo-bar {
		background:#009be4 url(../images/ltopbar.png) 0 0 no-repeat;
		width:100%;
		height:70px;
	}
    .logo { display:none;}

	.navbar-collapse {
		font-size: 1.3em;
		height: 430px;
		max-height: 600px;
	}
	
	.navbar-collapse .navbar-nav li { padding: 5px;}
	.navbar-header .navbar-toggle .icon-bar { background-color: #333333;}
	.navbar-inverse .navbar-toggle:hover .icon-bar,
	.navbar-inverse .navbar-toggle:focus .icon-bar {background-color:#ffffff;}
	.navbar-inverse .navbar-nav .open .dropdown-menu>li {padding: 3px;}
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color:#333333;}
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
		color:#fff;
		background-color:#333333;
	}
    
	#head {
		min-height:300px;
		padding-top:120px;
	}
	#pagehead {
		min-height:300px;
		padding-top:120px;
	}
	
    .img-portfolio { margin-bottom: 15px;}

	#head.carousel .carousel { height: 60%;}
	
	.navbar-inverse { background:rgba(238, 238, 238,1); }
	
	.navbar-collapse ul {
		text-align: center;
		width:100%;
		padding-bottom:10px;
	}
	.navbar-collapse ul .btn{ max-width:50%; margin:0 auto; }
	
	.rate {
		width: 500px;
		height: 434px;
	}
	
	.h-caption h4 > i {	left: 33%;}
	.highlight { margin-bottom: 60px;}
	.highlight:last-child { margin-bottom: 0;}
	
	.modal-dialog {
		width: 90%;
		min-width: 500px;
		margin: 60px auto;
	}
	
	.save::after, .out::after {
		top: 38px;
		right: 45%;
		font-size: 2.2em;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.out P > span { display: inline-block;}
	
	.mt-logo img {
		width: 60%;
		margin: 0 auto;
	}
	.mt-point > li { 
		width: 25%;
		padding: 6px;
	}
	
	.plat img {
		width: 80%;
		margin-left: 10%;
	}
	
	#interest > i {
		margin: 10px 45%;
		transform: rotate(90deg);
	}
	
	#key {
		width: 80%;
		height: 400px;
	}
	
	.event-word { font-size: 1em;}
	
	.event-tab td > dt > span.offline { display: block;}
	
	footer p {
		font-size: 1em;
		line-height: 1.4em;
	}
}

@media (max-width: 480px) {
	
	#sign { top:210px;}
	.btn-sign {
		letter-spacing: 0.1em;
		padding: 12px 30px;
	}
	
	#logo-bar {
		background:#009be4 url(../images/topbar.png) 0 0 no-repeat;
		width:100%;
		height:64px;
	}
	
	#head, #pagehead {
		min-height: 300px;
		padding-top:115px;
	}
	#head.carousel .fill { height: 300px;}
	
	.t1 { background-image: url(../images/s_header1.jpg);}
	.t2 { background-image: url(../images/s_header2.jpg);}
	.t3 { background-image: url(../images/s_header3.jpg);}
	.t4 { background-image: url(../images/s_header4.jpg);}
	.t5 { background-image: url(../images/s_header5.jpg);}
	.t6 { background-image: url(../images/s_header6.jpg);}
	.t7 { background-image: url(../images/s_header7.jpg);}
	.t8 { background-image: url(../images/s_header8.jpg);}
    
	.mtext { font-size: 1.3em;}
	
    .rate {
		width: 360px;
		height: 313px;
	}
	
	.product-tab, .tax-Tab { margin: 10px auto;}
	.product-tab th, .product-tab td {
		font-size: 1.2em;
		letter-spacing: 0;
	}
	.tax-Tab th, .tax-Tab td {
		padding: 8px;
		font-size: 1em;
		letter-spacing: 0;
	}
	
	.h-caption h4 > i {
		width: 160px;
		height: 80px;
		left: 30%;
		margin-bottom: 60px;
	}
	.h-caption h4 > i::before {
		top: -40px;
		border-left: 80px solid transparent;
		border-right: 80px solid transparent;
	}
	.h-caption h4 > i::after {
		bottom: -40px;
		border-left: 80px solid transparent;
		border-right: 80px solid transparent;
	}
	#square1::before { border-bottom: 40px solid #ffb400;}
	#square1::after {  border-top: 40px solid #ffb400;}
	
	#square2::before { border-bottom: 40px solid #f81a44;}
	#square2::after {  border-top: 40px solid #f81a44;}
	
	#square3::before { border-bottom: 40px solid #73c21f;}
	#square3::after {  border-top: 40px solid #73c21f;}
	
	#square4::before { border-bottom: 40px solid #1292dc;}
	#square4::after {  border-top: 40px solid #1292dc;}

	.modal-dialog {
		min-width: 380px;
		margin: 30px auto;
	}
	.modal-body {
		font-size: 1em;
		height: 460px;
	}
	#gmap {	height:300px;}
	
	.modal-body p {
		line-height: 1.2em;
		margin-bottom: 10px;
	}
	
	.mt-point > li { 
		width: 12.5%;
		padding: 6px;
	}
	
	.maincontent { letter-spacing: 0;}
	.maincontent a { padding: 10px 15px;}
	.mt-download { margin-right: 20px;}
	
	.top-space { margin-top: 30px;}
	.bottom-space { margin-bottom: 20px;}
	
	.event-title {
		letter-spacing: 0.2em;
		line-height: 1.2em;
	}
	
	.sign-btn { padding: 10px 30px;}
	
	.event-tab { display: none;}
	
	.m-event-tab {
		display: block;
		position: relative;
		margin-top: 30px;
	}
	
	.m-tab {
		position: relative;
		width: 100%;
		border-bottom:1px solid #565656;
	}
	
	.m-end::after {
		background-color: rgba(255,255,255,0.7);
		content: "本場次已結束";
		color: #C71215;
		position: absolute;
		font-size: 2em;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		padding-top: 160px;
		text-align: center;
	}

	.m-tab caption {
		border-top:1px solid #565656;
		border-bottom:1px solid #DFDFDF;
		padding: 10px;
		text-align: center;
	}

	.m-tab th {
		background-color: #f1f1f1;
		border-right:1px solid #DFDFDF;
		color: #161616;
		padding: 10px;
		white-space: nowrap;
		width: 18%;
		text-align: center;
	}
	
	.m-tab td { padding: 10px;}
	
	.m-tab td > dt {
		display: block;
		padding: 5px 0;
	}
	
	.m-live { text-align: center;}
	
	.YFspeaker-tab i, .YFspeaker-tab span {display: block;}
}

@media (max-width: 375px) {
	#logo-bar {
		background:#009be4 url(../images/mtopbar.png) 0 0 no-repeat;
		width:100%;
		height:52px;
	}
	
	#sign { top:210px;}
	.btn-sign {
		letter-spacing: 0;
		padding: 10px 20px;
	}
	#head, #pagehead {
		min-height: 290px;
		padding-top:102px;
	}
	#head.carousel .fill { height: 290px;}
	
	.carousel-indicators { bottom: 0;}
	
	.t1 { background-image: url(../images/xs_header1.jpg);}
	.t2 { background-image: url(../images/xs_header2.jpg);}
	.t3 { background-image: url(../images/xs_header3.jpg);}
	.t4 { background-image: url(../images/xs_header4.jpg);}
	.t5 { background-image: url(../images/xs_header5.jpg);}
	.t6 { background-image: url(../images/xs_header6.jpg);}
	.t7 { background-image: url(../images/xs_header7.jpg);}
	.t8 { background-image: url(../images/xs_header8.jpg);}
    
	.mtext { font-size: 1.2em;}
	
	.rate {
		width: 300px;
		height: 261px;
	}
	
	.sample::after { top: -26px;}
	
	.product-tab th, .product-tab td, .tax-Tab th, .tax-Tab td { padding: 5px;}

	.h-caption h4 > i {	left: 25%;}
	
	.modal-dialog {
		min-width: 300px;
		margin: 20px auto;
	}
	.modal-body {
		font-size: 1.1em;
	}
	.modal-body p {
		line-height: 1.6em;
		margin-bottom: 10px;
	}
	
	.process-tab th { text-align: center;}
	.process-tab th > i { display: none;}
	.process-tab th > span {
		display: block;
		text-align: center;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	
	.live { margin-left: 0;}
	
	footer p {
		font-size: 0.9em;
		line-height: 1.2em;
	}

}

@media (max-width: 360px) {
	
	.event-word p { padding: 5px;}
}

@media (max-width: 320px) {
	
	#sign { top:190px;}
	
	#head { min-height: 270px;}
	#head.carousel .fill { height: 270px;}
	
	.navbar-inverse .navbar-nav > li > a,
	.navbar-inverse .navbar-nav > .open ul > a { font-size: 1em;}
	.navbar-nav .dropdown-menu { font-size: 0.9em;}
	
	.market { margin-bottom: 50px;}
	.rate {
		width: 276px;
		height: 240px;
	}
	
	.product-tab th, .product-tab td { font-size: 1em;}
	.tax-Tab th, .tax-Tab td { font-size: 0.9em;}
	
	.h-caption h4 > i {
		width: 140px;
		height: 70px;
		left: 24%;
		margin-bottom: 60px;
	}
	.h-caption h4 > i::before {
		top: -35px;
		border-left: 70px solid transparent;
		border-right: 70px solid transparent;
	}
	.h-caption h4 > i::after {
		bottom: -35px;
		border-left: 70px solid transparent;
		border-right: 70px solid transparent;
	}
	#square1::before { border-bottom: 35px solid #ffb400;}
	#square1::after {  border-top: 35px solid #ffb400;}
	
	#square2::before { border-bottom: 35px solid #f81a44;}
	#square2::after {  border-top: 35px solid #f81a44;}
	
	#square3::before { border-bottom: 35px solid #73c21f;}
	#square3::after {  border-top: 35px solid #73c21f;}
	
	#square4::before { border-bottom: 35px solid #1292dc;}
	#square4::after {  border-top: 35px solid #1292dc;}
	
	.btn-window {
		padding: 5px;
		font-size: 0.9em;
	}
	
	.modal-title, .modal-body h3 { font-size: 1.2em;}
	
	.maincontent a {
		font-size: 0.9em;
		padding: 10px 10px;
	}
	.mt-download { margin-right: 10px;}
	
	#key { margin-left: 30px;}
	
	.m-tab td dt > span.online { display: block;}
	
}
