/* What We're Doing
    ==================================================================== */


	.grid-container { display:grid; grid-template-columns:1fr 1fr; gap:50px;}
	.column-one, .column-two 	{ padding:0;  }

    /* left column - img
    ----------------------------------------*/
	.img-blk {  z-index:10; }
	.img-blk img { width:100%; height:auto; 
						 -webkit-border-radius: 10%;
							-moz-border-radius: 10%;
								border-radius: 10%;}

	#body.blue .img-blk-after:after 	{ 	content: ""; background-image: url("images/corner-planet.svg"); background-position:right bottom;
										background-size:50%; background-repeat:no-repeat;
	   								  	position:absolute;  bottom:-24px; right:-24px; width:100%; height:100%;
	    							  	z-index: -1; }

	#body.green .img-blk-after:after { 	content: ""; background-image: url("images/corner-product.svg"); background-position:right bottom;
										background-size:50%; background-repeat:no-repeat;
	   								  	position:absolute;  bottom:-24px; right:-24px; width:100%; height:100%;
	    							  	z-index: -1; }

	#body.red .img-blk-after:after   { 	content: ""; background-image: url("images/corner-people.svg"); background-position:right bottom;
										background-size:50%; background-repeat:no-repeat;
	   								  	position:absolute;  bottom:-24px; right:-24px; width:100%; height:100%;
	    							  	z-index: -1; }


    /* left column - Speech bubble
    ----------------------------------------*/
	#body.blue .speech-bubble 	{ background-color: var(--color-light-blue); } 							  	
	#body.green .speech-bubble	{ background-color: var(--color-light-green); } 							  	
	#body.red .speech-bubble 	{ background-color: var(--color-light-red); } 							  	


	.speech-bubble 	{ position:relative; background: #00aabb; padding:20px 50px; border-radius:10px; width:100%; margin-top:50px; margin-bottom:40px;
					  font-size: var(--font-xs); font-style: italic; line-height:30px;}

	.speech-bubble::after { content: ''; position:absolute; bottom:-30px; left:30px;
							border-width:30px 20px 0 20px; border-style:solid;}

	#body.blue .speech-bubble::after  {	  border-color: var(--color-light-blue) transparent transparent transparent;  }
	#body.green .speech-bubble::after {	  border-color: var(--color-light-green) transparent transparent transparent; }
	#body.red .speech-bubble::after   {	  border-color: var(--color-light-red) transparent transparent transparent;   }


    /* left column - Cite
    ----------------------------------------*/
	.cite 				{ display:flex; align-items:center; justify-content:space-between; width:100%; height:auto; padding-left:20px; }
	.cite-img-blk 		{ width:60px; height:60px;}
	.cite-img-blk img 	{ width:100%; height: auto;
					 -webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						     border-radius: 50%;}
	.cite-right-col 	{ text-align:left; flex-grow:1; padding-left:20px }
	.cite-right-col>div { font-family: 'Poppins Bold', 微軟正黑體; }
	.cite-right-col p 	{ font-size: var(--font-xs); }


	/* Right column - content
    ----------------------------------------*/
    .right-col-content 	 { padding-top:35px}

    .right-col-content hr  { background-color:#f2f2f2; height:1px; border:none; margin: 22px 0; }


	.col-title { display: block; }
	.col-title-m { display: none; margin-bottom: 20px; }
	
	.img-d { display: block; }
	.img-m { display: none; }
	
	.tab-slider-wrp { display: block; }
	.slider-m { display: none; }
	
	.hgl-item-m { display: grid; --cal-cols: calc(round(up, var(--hglcols) / 2)); width: calc(250px * var(--cal-cols));  grid-template-columns: repeat(var(--cal-cols), 250px); grid-template-rows: repeat(2, 1fr); }

	#body.inside h3.adj-title-m {  font-size:28px; padding-top: 20px;line-height: 1.4; }

	/* ==========================================================================
	    Media Style:
	============================================================================= */
	@media only screen and (max-width:840px) {
	.section-padding 		{ padding:0px 0px 50px; }
	
	.tab-slider-wrp { display: none; }
	.slider-m { display: block; }
	
	.slm-wrp { overflow: auto; }
	
	.img-d { display: none; }
	.img-m { display: block; }

	.col-title { display: none; }
	.col-title-m { display: block; }

	.grid-container 		{ display:block; grid-template-columns:1fr 1fr; gap:50px;}
	.column-two   			{ margin-top:0px; }
   	.column-one.for-img 	{ margin-bottom:50px; }

    .right-col-content hr  	{ margin: 40px 0; }
	.right-col-content { padding-top: 0; }
	
	.img-blk { margin-left: 20px; margin-right: 20px; }
	}


	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.section-padding 		{ padding:50px 30px; }		
	}

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .column-one.for-img { margin-bottom:50px; width:60%;}
	}


	@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) {
	}

	@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .column-one.for-img 	{ width:100%;}
	}