YDU/assets/stylesheets/template/layout/content.scss

@charset "utf-8";
@import "../initial";
html{height: 100%}
body{height: 100%}
.page-home{
	background: #fff url("/assets/main_bg.png") center -83px repeat-x;
}
.internal-page
{
	background: #fff url("/assets/page_bg.png") center -50px repeat-x;
}
.layout-content {
		.control{
		outline:1px solid #0f0;
		width: 100%;
		height: 50px;
		text-align: center;
	}
	.control li{
		display:inline-block;
		width: 15px;
		height: 15px;
		background-color:#aaa;
		border-radius:50%;
		behavior: url("/assets/ie_support/PIE2/PIE.htc");
		border:1px solid #999;
		margin: 10px;
		cursor:pointer;
	}
	.control li.active{
		background-color:#666;
	}
  min-height: 600px;
  margin-bottom: 2em;
  			@media(max-width : 767px) {
				  margin-bottom: 0;
			}
  .container {
    // @extend %response-content;
    		@media(min-width : 1200px){
        		    width: 1000px;
    		}

			@media(min-width : 768px) and (max-width : 991px) {
        		width: 100% ;
    		}
  }
	section[data-pp="1"]

	{	width: 60.7%;
		
	
		border: solid 1px #E4E4E4;
		@media (min-width : 1200px){
			padding: 0 ;
		}
			@media (min-width : 768px) and (max-width : 1199px) {
        		width: 64.6% ;
    		}
    		@media(max-width : 340px) {
				width: 300px;
				margin:auto;
				background-color: #fff;
				margin-bottom: 30px;

			}
    		 @media (min-width : 341px) and (max-width : 480px) {
				width: 341px;
				margin:auto;
				background-color: #fff;
				margin-bottom: 30px;

			}
 
		.w-annc.widget-announcement-1.container{
			overflow: hidden;
			width:100%;
			margin:0;
			padding: 0;
		}
		.w-annc__item{
			width: 293.1px !important;
			a{font-size: 15.6px;
			  font-weight: bold;
			}
			@media(min-width :1200px){
        		padding-left:20px;
        		padding-right: 0;
    		}
			@media(min-width : 992px) and (max-width : 1199px) {
        		width: 298px !important;
    		}
			@media(min-width : 989px) and (max-width : 991px) {
        		width: 304px !important;
    		}
    		@media(min-width : 972px) and (max-width : 988px){
				width:303px !important;
    		}
       		@media(min-width : 961px) and (max-width : 971px){
				width:298px !important;
    		}
        	@media(min-width : 951px) and (max-width : 960px){
				width:294px !important;
    		}
        	@media(min-width : 941px) and (max-width : 950px){
				width:291px !important;
    		}
        	@media(min-width : 931px) and (max-width : 940px){
				width:287.7px !important;
    		}
    		@media(min-width : 921px) and (max-width : 930px){
				width:284px !important;
    		}
          	@media(min-width : 911px) and (max-width : 920px){
				width:281px !important;
    		}
         	@media(min-width : 901px) and (max-width : 910px){
				width:278px !important;
    		}
           	@media(min-width : 891px) and (max-width : 900px){
				width:275px !important;
    		}
          	@media(min-width : 881px) and (max-width : 890px){
				width:272px !important;
    		}
            @media(min-width : 871px) and (max-width : 880px){
				width:270px !important;
    		}
    		@media(min-width : 861px) and (max-width : 870px){
				width:265px !important;
    		}
            @media(min-width : 851px) and (max-width : 860px){
				width:262px !important;
    		}
    		@media(min-width : 841px) and (max-width : 850px){
				width:258px !important;
    		}
            @media(min-width : 831px) and (max-width : 840px){
				width:255px !important;
    		}
    		@media(min-width : 821px) and (max-width : 830px){
				width:252px !important;
    		}
    		@media(min-width : 811px) and (max-width : 820px){
				width:250px !important;
    		}
    		@media(min-width : 801px) and (max-width : 810px){
				width:245px !important;
    		}
    		@media(min-width : 791px) and (max-width : 800px){
				width:242px !important;
    		}
    		@media(min-width : 781px) and (max-width : 790px){
				width:238px !important;
    		}
    		@media(min-width : 771px) and (max-width : 780px){
				width:235px !important;
    		}
    		@media(min-width : 768px) and (max-width : 770px){
				width:235px !important;
    		}
    		@media(min-width : 481px) and (max-width : 767px) {
				
			}
			@media (min-width : 401px) and (max-width : 480px) {
				width:310px !important;
				margin-right: 40px;
			}
			@media (min-width : 341px) and (max-width : 400px) {
				width:310px !important;
				margin-right: 36px;
			}
			@media(max-width : 340px){
				width:270px !important;
				margin-right: 20px;
			}
		}
		.cycle-carousel-wrap{
			white-space: normal !important;
		} 
		.cycle-prev{
			margin-right: 10px; 
			float: right;
			padding:0 15px;
			background-color: #f6d16e;
			position:relative;
			color: #bf8e0c;
			@media(max-width : 340px){
			padding:0 5px;
			}
		} 
		.cycle-next{
			margin-right: 30px; 
			float: right;
			padding:0 15px;
			background-color: #f6d16e;
			position: relative;
			color: #bf8e0c;
			@media(max-width : 340px){
			padding:0 5px;
			}
		}
		.w-annc__widget-title{
			padding: 0 15px;
		}
		.w-annc__box{
			width:1400%;
		}
		.more{
			float: right;
			font-size: 10pt;
			line-height: 35px;
			color:#333;
		}
		.w-annc__entry-title{
			a{
				color: #333;
			}
		}
	}


	#pics
	{
	width: 37.8%;
	margin-left:15px;
	border: solid 1px #E4E4E4;
	height:310px;
	overflow: hidden;
			@media (min-width : 1200px) {
        		height:299px;
    		}
			 @media (min-width : 992px) and (max-width : 1199px) {
        		width: 33.8% ;
    		}
 			 @media(min-width : 768px) and (max-width : 991px) {
        		width: 33% ;
    		}
    		@media(max-width : 767px) {
				width: 100%;
				margin:0; 
			}
	}
	#tabs{
		
		height: 100%;
	border: solid 1px #E4E4E4;
	margin-top: 30px;
	padding: 0;
	background: url("/assets/tab_bg.png") repeat-y scroll 0 0;
			@media(max-width : 767px) {
				overflow: hidden;
				background: inherit;
			}
	}
	#links{
		padding-left:0;
		width: 34.5%;	
		float: left;
		   	@media(min-width : 825px) and (max-width : 1199px) {
        		width: 34% ;
    		}
			@media (min-width : 481px) and (max-width : 825px){
				width: 33%;	
        		padding-left: 0;
    		}
    		@media (max-width : 480px){
    			width: 100%;
    			padding-left: 15px;
    		}
	}
	#news{
		padding: 0 33px 0 0;
		width: 55%;
		float: left;
			@media(min-width : 481px) and (max-width : 1199px) {
				width: 54%;
				padding: 0 15px;
			}
			 @media (max-width : 480px){
    			width: 100%;
    			padding: 0;
    		}
	}
	#ads{
		padding: 0;
		margin-top: 30px;
	}
	aside[data-pp="2"]
	{	padding: 0;
		h3{	
			width: 76%;
			margin: 12px 0;
			font-family: "微軟正黑體";
			.more{
				float: right;
				font-size: 10pt;
				line-height: 35px;
				color:#333;
			}
		}
	}
	aside[data-pp="3"]
	{	float: left;
		width:70%;
		top:45px;
		position: absolute;
		.slider{
			width:270px;
			height: 300px;
			overflow: hidden;
			 @media (max-width : 1199px) {
        		width: inherit;
    		}
		}
		.w-annc__list{
			position: relative;
			overflow: hidden;

		}
		.w-annc__item{

			width: auto;
			margin-bottom:0;
			@media (max-width : 1199px) {
				width: auto;

			}

		}
		.w-annc__title{
			color:#333;
			font-size: 12pt;
			line-height: 24px;
		}
		.w-annc__entry-title{
			overflow: auto;
			background-color: #f6d16e;
			padding: 8px;
			margin: 0;
		}
		.w-annc__img-wrap img{
			position: inherit!important;
		}
	}
	aside[data-pp="4"]
	{
		float: right;
		width:19%;
		.w-annc__item.row{
			margin: 0;
			width: 100%;
		}
		.w-annc.widget-announcement-2{
		 	@media(min-width : 1200px) {
				margin-left:5px;
			}
		}
		.w-annc__img-wrap.col-sm-4.bullseye
		{width: 100%;
		 height: 47px;
		 cursor: pointer;
		 margin:auto;
		 margin-bottom: 10px;
		 	@media(max-width : 767px) {
				width:inherit;
			}
		}
		
		.w-annc__list{
			margin-top: -38px;
		}
	}
	section[data-pp="5"]
	{
		width: 10.4%;
		float: left;
		overflow: hidden;
		height: 100%;
			@media(min-width : 992px) and (max-width : 1199px) {
				width: 10.7%;
			}
			@media(min-width : 825px) and (max-width : 991px) {
        		width: 10.9% ;
    		}
    		@media(min-width : 768px) and (max-width : 825px) {
        		width: 12.5% ;
    		}
    		@media(max-width : 767px){
        		width: 100% ;
        		background-color: rgb(236,110,25);
    		}
		ul{	
			position: relative;
			margin:0;
			padding: 0;
			list-style: none;
			@media(max-width : 767px){
        			text-align: center;
    				}

			li{	cursor:pointer;
				color:#fff;
				font-family: "微軟正黑體";
				padding: 20px 0 20px 15px;
				    @media(max-width : 767px){
        				padding: 20px 10px;
        				display: inline-block;
    				}
			  }
			  .active{
			  	background-color: #DE4F03;

			   &:before {
			   	content: '';
			   	position:absolute;
                left: 0;
                margin-top:5px;
                @include arrow("left", 6px, 6px, #fff);        	
				    @media(max-width : 767px){
        				display:none;
    				}

              	}
			  }

		}
	}
	aside[data-pp="11"]{
		h3{
			margin: 20px 0 0 15px;
			font-family: "微軟正黑體";
			font-size: 12pt;
			font-weight: bold;
		}
	}
	section[data-pp="6"]
	{	.w-annc.widget-announcement-11{
			padding-top: 13px;
			position: relative;
			display: none;
			opacity: 0;
					@media(max-width : 1199px){
        				padding-top: 15px;
    				}
		}
		.w-annc.widget-announcement-11.active{
			display: block;
			overflow: hidden;
		}

		.w-annc__item{
			position: relative;
			left: 0;
			padding: 0 0 5px 10px;
			margin-left:0;
			margin-right:0;
			border-bottom: solid 1px #eee;
		}
		.w-annc__category{
			font-size: 10pt;
			margin: 0 10px 1px;
			background-color: #999;
			color: #fff;
			padding: 4px;
		}
		.w-annc__postdate{
			color:#aaa;
			font-size: 10pt;
		}
		.w-annc__title{
			width: 87%;
			display: inline-block;
			margin-top:10px; 
			color:#333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			@media(min-width : 992px) and  (max-width : 1199px) {
				display: inline-block;
				width: 58%;
			}
			@media (max-width : 991px) {
				display: inline-block;
        		width: 48%;
        		padding-top: 10px;
			}
			@media (max-width : 797px) {
        		width: 44%;
			}
			@media (max-width : 480px) {
        		width: 100%;
    		}
    		&:hover{
    			color:#f77319;
    		}
		}
		.w-annc__widget-title{
			display: inline;
				position: absolute;
				right:0;
				margin:0;
				top:-9px;
			z-index: 5;
			font-weight: bold;

			font-size: 12pt;
			padding-left:15px; 
			@media (max-width : 1199px) {

			}
		}
		.w-annc__more.btn.btn-primary.pull-right{
			background-color: inherit;
			color:#333;
			border:0;
			font-size: 10pt;
		}
	}
	section[data-pp="7"]{
		h3{
			margin: 20px 0 0 0;
			font-family: "微軟正黑體";
			font-size: 12pt;
			font-weight: bold;
			@media (max-width : 1199px) {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
	section[data-pp="8"]
	{	overflow: hidden;
		padding-bottom: 10px;
		.widget-link.widget1{
			display: none;
			opacity: 0;
			position: relative;
			top:-350px;
		}
		.widget-link.widget1.active{
			display: block;
		}
		.widget-content{
			position: relative;
			left: 20px;
			float: left;
			display: list-item;
			width: 49%;
            width: calc(50% - 1em);
			border-top:inherit !important;
			font-size: 10pt;
			list-style:disc;
			@media(max-width : 965px) {
        		width: 100% ;
    		}

			a{color:#333;}
		}
		.widget-title{
			//margin-left: -15px;
		}
		.widget-content-title{
			&:hover{
    			color:#f77319;
    		}
		}

		.status-top{
			display: none;
		}


	}
	section[data-pp="9"]
	{	overflow:hidden;
		width: 62.7%;
		.w-ad-banner__caption{
			display: none !important; 
		}
		padding-left: 0;
			@media(max-width : 767px) {
				padding: 0;
			}
	}
	aside[data-pp="10"]
	{	width: 37.3%;
		background-color: #0f2d4f;
		padding-left: 30px;
			@media(max-width : 1199px) {
				height: 192px;
			}
		.w-annc__more.btn.btn-primary.pull-right{
			background-color: inherit;
			border: inherit;
		}
		.w-annc__widget-title{
			color: #fff;
			font-size: 12pt;
			font-weight: bold;
			//padding: 15px 0;
		}
		.w-annc__category{
			display: none;
		}
		.w-annc__postdate{
			color:#2776d0;
			font-size: 10pt;
		}
		.w-annc__item.row{
			margin: 0;
			border-bottom:1px solid #17457a;
			//padding: 6px 0;
			&:first-child{
				padding-top: 0;
			}
			a{
				color:#fff;
			}
		}
	}
	.w-ad-banner.ad-banner-widget-4{
		margin-bottom: 15px;
	}
}