/* • Selecion Year blk
   	---------------------------------- */
	.year 			{ background-color:#ececec; padding:15px 20px 25px 20px;}
	.year.calendar 	{ z-index:5; margin-top:-26px; margin-bottom:30px}
	
	/* • Section banner + breadcrumb
   	---------------------------------- */
	.section 			{}
	.section .s-pos 	{ position:absolute; bottom:0; left:0}
	.section .s-pos>div { background-color: transparent; padding:15px 30px}

	.section .s-name 		{ display:flex; align-items:center;}
	.section .s-name>img 	{ width:auto; height:25px; margin-right:10px}
	.section .s-name h1 	{ line-height:normal; font-size:200%; color:#fff; text-transform:uppercase; font-weight:normal;}
	
	ul.breadcrumb 				{ list-style:none; padding:0; margin:0; font-size:80%}
	ul.breadcrumb li 			{ display:inline;}
	ul.breadcrumb li+li:before 	{ content: "/\00a0"; color:#fff; padding:8px;}
	ul.breadcrumb li a  		{ color:#fff; text-decoration:none; transition: all 0.3s ease-out;}
	ul.breadcrumb li a:hover 	{ color:#333; text-decoration:underline;}


	/* • main content left right col
   	---------------------------------- */
   	.full .pg-container .main .pg-col2 	   { width:100%; padding-left:30px}
   	.no-edge .pg-container .main .pg-col2  { width:100%; padding-left:0}

	.pg-container .main 			{ padding-bottom:50px;}
	.pg-container .main .pg-col1	{ width:22%; padding:50px 0 0 0; float:left; background-color:#f1f8fd}
	.pg-container .main .pg-col2	{ width:78%; padding:50px 0 0 50px; float:left;}


	ul#left-nav  				{ margin:0; padding:0}
  	ul#left-nav li				{ margin:0; padding:12px 50px 12px 20px; color:#fff; list-style:none; line-height:1.4; width:100%;
  								  border-bottom:1px solid #fff; background-color:#13426b;
  								  transition: all 0.3s ease-out; cursor:pointer;}
  	ul#left-nav li:hover					{ background-color:#f4364c;}
	ul#left-nav li.level1-current 			{ color:#fff; cursor:default; border-left:5px solid #f4364c}
	ul#left-nav li.level1-current:hover 	{ background-color:#13426b}

	ul#left-nav ul.level2 						{ margin:0; padding:10px 0; font-size:95%}
	ul#left-nav ul.level2 li.level2-sec			{ padding:5px 20px 5px 0; margin-left:50px; list-style:none; border-bottom:none; color:#00a3e0;
												  list-style:disc; background-color:#f1f8fd; width:calc(100% - 50px)  }
	ul#left-nav ul.level2 li.level2-sec:hover 	{ background-color:#f1f8fd; color:#f4364c}
	ul#left-nav ul.level2 li.level2-current 	{ color:#f4364c}
	
	ul#left-nav > li.level1 + .level2{ display: none; }
	ul#left-nav > li.level1:after{ content: " "; width: 20px; height: 20px; position: absolute; display: block; right: 20px; top: 12px; background-image: url(images/arrow-left-white.svg);
							background-repeat: no-repeat; background-size: contain; background-position: right center; transition: transform 300ms ease; }
	ul#left-nav > li.level1.level1-current:after { transform: rotate(90deg); }
	
	.cp-wrp {
		margin-bottom: 80px;
	}

	.cp-wrp  a 			{color:#13426b; transition: all 0.3s ease-out;}
	.cp-wrp  a:hover 	{color: #00a3e0}
	
	span.more { color: #00a3e0; padding-left: 5px; }

	/* circles */
	.circles{
		background-size: cover;
	}
	.circles .circles-bg{
		position: absolute;
		width: 70%;
		height: auto;
		left: 15%;
		top: 25px;
		opacity: 0.5;
	}
	.circles .circle-wrp{
		width: 106%;
		margin-left: -3%;
	}
	.circles .circle-wrp.cp-wrp{
		margin-bottom: 25px;
	}
	.circles .circle{
		width: 33.33%;
		padding-bottom: 33.33%;
		border-radius: 50%;
		overflow: hidden;
		float: left;
		cursor: pointer;
	}
	.circles .circle .after{
		display: block;
		background-repeat: no-repeat;
		background-size: 10% auto;
		background-position: center center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 15%;
	}
	.circles .circle:hover .after{
		background-image: url('images/arrow-bottom-white.svg');
	}
	.circles .circle.cr1{
		right: -3%;
	}
	.circles .circle.cr3{
		left: -3%;
	}
	.circles .circle.cr1 .icon img{
		width: 130%;
		margin-left: -15%;
	}
	.circles .circle.cr1 .after{
		background-color: #f4364c;
	}
	.circles .circle.cr2 .after{
		background-color: #00a3e0;
	}
	.circles .circle.cr3 .after{
		background-color: #13426b;
	}
	.circles .circle .cir-bg{
		position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	}
	.circles .circle.cr1 .cir-bg{
		background-color: #fed7dc;
		opacity: 0.4;
		transition: all 0.3s ease-out;
	}
	.circles .circle.cr2 .cir-bg{
		background-color: #cdedfa;
		opacity: 0.5;
		transition: all 0.3s ease-out;
	}
	.circles .circle.cr3 .cir-bg{
		background-color: #326787;
		opacity: 0.2;
		transition: all 0.3s ease-out;
	}

	.circles .circle.cr1:hover .cir-bg{
		background-color: #fed7dc;
		opacity: 1;
	}
	.circles .circle.cr2:hover .cir-bg{
		background-color: #cdedfa;
		opacity: 1;
	}
	.circles .circle.cr3:hover .cir-bg{
		background-color: #326787;
		opacity:0.5;
	}
	.circles .circle .cir-detail{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		max-width: 100%;
		max-height: 100%;
	}
	.circles .circle p{
	    text-align: center;
		margin-top: 15px;
		line-height: 1.2;
		color: #13426b;
	}
	.cp1,
	.cp2,
	.cp3{
		display: none; 
	}
	
	#circlegp[value='1'] ~ * .cp1,
	#circlegp[value='1'] ~ .cp1,
	#circlegp[value='2'] ~ * .cp2,
	#circlegp[value='2'] ~ .cp2,
	#circlegp[value='3'] ~ * .cp3,
	#circlegp[value='3'] ~ .cp3{
		display: block;
	}
	
	
	#circlegp[value='1'] ~ * .cr1 .after,
	#circlegp[value='2'] ~ * .cr2 .after,
	#circlegp[value='3'] ~ * .cr3 .after{
		background-image: url('images/arrow-bottom-white.svg');
	}
	.logo-item-m{
		display: none;
	}


	/* ==========================================================================
	    Media Style
	============================================================================= */
	@media only screen and (max-width: 1200px) {
	.year 	{ padding:10px 20px 15px 20px;}
	}


  	@media only screen and (max-width:1024px) {
	.section .s-pos>div  { padding:10px 20px 10px 30px}
  	.section .s-name h1  { font-size:140%;}
	.section .s-name>img { height:20px; margin-right:10px}
	
	.pg-container .main .pg-col1	{ display:none}
	.pg-container .main .pg-col2	{ width:100%; padding:50px 30px 0 30px; }
	
	.circles .circle .after{
		opacity: 1;
		visibility: visible;
		display: none;
	}
	#circlegp[value='1'] ~ * .cr1 .after,
	#circlegp[value='2'] ~ * .cr2 .after,
	#circlegp[value='3'] ~ * .cr3 .after{
		opacity: 1;
		visibility: visible;
		transition: opacity 0s, visibility 0s;
		display: block;
	}
  	}


  	@media only screen and (max-width:767px) {
 	.year 	{ padding:5px 20px 15px 15px;}

   	.full .pg-container .main .pg-col2 		{ padding-left:15px}


  	.section .s-pos>div  { padding:8px 15px; background-color:#13426b;}
	.section .s-pos 	 { position:relative; bottom:auto; left:auto;}
  	.section .s-name h1  { font-size:110%;}
	.section .s-name>img { height:15px; margin-right:5px}

	ul.breadcrumb 		 		 { margin-bottom:2px; font-size:70%}
	ul.breadcrumb li+li:before 	 { padding:5px;}

	.pg-container .main .pg-col2 { padding:30px 15px 0 15px; }
	.logo-item-m { display: block; }

	.circles .circle .cir-detail p{
		font-size: 2.2vw;
	}
	.section .s-name 		{align-items: baseline;}
  	}