/* 怨듯넻 css */

:root {
  --first-color: #7f3b3b;
  --second-color: #0c3472;

  --white: #fff;
  --black: #181818;


--gray-color: #545b6a;
--gray-50:rgba(254, 254, 254);
--gray-100:rgba(243, 244, 246);
--gray-200:rgba(229, 231, 235);
--gray-300:rgba(209, 213, 219);
 --gray-400:rgba(156, 163, 175);


  --silver: #767676;
  --dark-brown: #38302e;
  --light-brown: #988574;
  --light-yellow: #ffc;
  --yellow-opacity: hsla(60, 50%, 50%, 0.85);

  --accent-color: var(--light-yellow);
  --accent-opacity-color: var(--yellow-opacity);


  --spacing-sxxs: 0.125rem; /* 2px */
  --spacing-xxs: 0.25rem; /* 4px */
  --spacing-xs: 0.5rem; /* 8px */
  --spacing-sm: 0.75rem; /* 12px */
  --spacing-base: 1rem; /* 16px */
  --spacing-md: 1.25rem; /* 20px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px */

  --container-width: 64rem; /* 1024px */
}

/*  �룿�듃 移쇰씪*/
.font-color-main{color:#7f3b3b}


.margin-auto{margin:0 auto;}
.sub-title{	text-align:center;    font-size: 24px; margin-bottom:30px; line-height:1.2;}
	@media (min-width: 640px){.sub-title{font-size:38px; margin-bottom:40px; }}
	@media (min-width: 1024px){.sub-title{font-size:48px; margin-bottom:50px; }}
	@media (min-width: 1280px){.sub-title{font-size:52px; margin-bottom:60px; }}

.Pretendard{font-family: 'Pretendard-Regular' !important; }

.Subcontents-container{max-width:1300px; margin:0 auto; }

/************************************************
***************   鍮꾩쟾 ******************
*************************************************/
.vision-icon-business_container{
	max-width:1400px;
	background-color:red;
	}


/************************************************
***************   �삤�떆�뒗湲�   ******************
*************************************************/
.map__box {
    max-width: 100%;
}
.wrap_controllers {
	display: none;
}
.map-icon {
    display: inline-block;
    min-width: 48px;
    height: 48px;
    border-radius: 50%;
}

.icon-location {
    background: url(/yeastech/resources/html/images/info_addr.svg) no-repeat center center;
    background-size: 36px;
}

.icon-telephone {
    background: url(/yeastech/resources/html/images/info_tel.svg) no-repeat center center;
    background-size: 36px;
}

.icon-fax {
    background: url(/yeastech/resources/html/images/info_fax.svg) no-repeat center center;
    background-size: 36px;
}

/************************************************
***************   �옱議고빀 �떒諛깆쭏 ******************
*************************************************/
.protain-product_container{
	max-width:1050px;
	margin:0 auto;
}

@media (max-width: 1023px){
	.protain-product_img{display:none; }
	}

.protain-product:before{
    content:'';
    display:inline-block;
    width:12px;
    height:12px;	
	border-radius:50%;
	border:3px solid #FFF;
	margin : 10px;
	vertical-align:middle;	
}

.protain-product{font-size:20px; margin-bottom:0.5em; word-break: keep-all;}
	@media (min-width: 640px){
		.protain-product:before{	width:14px;    height:14px;}
		.protain-product{	font-size:16px; 	margin-bottom:0.5em; }
		}
	@media (min-width: 1024px){
		.protain-product:before{	width:18px;    height:18px;}
		.protain-product{	font-size:24px; 	margin-bottom:0.5em; }
		}
	@media (min-width: 1280px){
		.protain-product:before{	width:23px;    height:23px;}
		.protain-product{	font-size:28px; 	margin-bottom:0.5em; }
		}

.protein_container{
	max-width:1300px; 
	margin:0 auto;
}

/************************************************
*************** �닔�뻾�뿰援ш낵�젣  ******************
*************************************************/
.Table_container{overflow-x: auto;}
.study-table{width: 1300px;}
.study-table thead{
	background: var(--gray-100);
}

.study-table thead tr td {
    padding: 12px 0;
    text-align: center;
	font-weight: 600;
	font-size: 1.2rem;
    background-color: var(--gray-100);
	border-left: 2px solid #fff;
	border-bottom: 1px solid var(--gray-300);
	border-top: 2px solid var(--second-color);
}

.study-table thead tr td:first-child{
	border-left: 0;
}

.study-table tbody tr {
    border-bottom: 1px solid var(--gray-300);
}

.study-table tbody tr td {
    padding: 1rem 0;
	color: var(--gray-color);
}

.study-table tbody tr td:first-child {
    padding: 1rem 0;
	color: var(--gray-400);
}

.study-table tbody tr td:nth-child(2),
.study-table tbody tr td:nth-child(3){
    padding-left: 20px;
}

.assignments-wrap .pagingBox{
	width: 100%;
}

.assignments-wrap .pagingBox a{
	width: 30px;
    height: 30px;
    background: #0c3472;
    color: #fff;
    border: none;
    font-weight: bold;
	display: inline-block;
    padding: 7px 0 0 0;
    font-size: 13px;
    text-decoration: none;
	text-align: center;
	vertical-align: middle;
	border-radius: 50%;
}


/************************************************
***************   �룞臾쇱꽭�룷 諛곗뼇�슜 �떒諛깆쭏 ******************
*************************************************/
.animal_container, .products_cosmetic_container, .products_synthesis_container{
	width:100%; 
	/* height:1000px;  */
	background-image: url('/yeastech/resources/html/images/animal-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	}


	@media (min-width: 640px){.animal_container, .products_cosmetic_container, .products_synthesis_container{	height:80vw; }  	}
	@media (min-width: 768px){.animal_container, .products_cosmetic_container, .products_synthesis_container{	height:70vw;/* height:1000px; */  }  	}
	@media (min-width: 1024px){.animal_container, .products_cosmetic_container, .products_synthesis_container{	height:64vw; }    	}
	@media (min-width: 1280px){.animal_container, .products_cosmetic_container, .products_synthesis_container{	height:60vw; }  	}
	@media (min-width: 1536px){.animal_container, .products_cosmetic_container, .products_synthesis_container{	height:50vw; }  	}


.animal{	width:1000px; 	margin:0 auto;  	}

 	 .animal-number::before{
		content:'';
		display:inline-block;
		width:1em;
		height:1px;
		margin:0 0.5em 0 0; 
		background-color:var(--first-color);
		}
	
	@media (min-width: 640px){
		 .animal-number::before{
			width:7em;
			margin:0 10px 10px 0; }
			}



/************************************************
***************   �깮泥댁냼�옱 �빀�꽦�슜 �슚�냼 ******************
*************************************************/

.products_synthesis_container{
	width:100%; 
	/* height:1000px;  */
	background-image: url('/yeastech/resources/html/images/ps-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	}



/************************************************
***************   �솕�옣�뭹 �냼�옱 ******************
*************************************************/

.products_cosmetic_container{
	width:100%; 
	/* height:1000px;  */
	background-image: url('/yeastech/resources/html/images/products_cosmetic-bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	}



/************************************************
***************   �뿰�쁺   ******************
*************************************************/

.history_wrap{max-width: 1200px; margin: 0 auto;}
.history_content{width: 90%; margin: 0 auto; position: relative; overflow: hidden; margin-bottom: 120px;}
.history_content::before{content: ''; position: absolute; z-index: -1; top: 35px; left: 49.4%; display: block; width: 1px; height: 96.7%; background: #D1D1D1;}
.h_header_img{width: 13%; margin: 0 auto;}

.h_date_year_box{float: left;}
.h_date_year{color: #000; font-weight: bold;}
.history_list_box{width: 50%;}

.left_h_list{float: left; padding-left: 0; padding-right: 9px; /* padding-right: 50px; */ margin-left: 0; margin-right: 50%; margin-top: 80px; text-align: right;}
.right_h_list{float: right; margin-left: 50%; /* padding-left: 50px; */ width: 50%; margin-top: 80px;}

.h_date_wrap{position: relative; margin-top: 30px;}
.h_date_text_box{position: relative; margin-bottom: 14px; padding-left: 40px;}
.h_date_month{float: left; font-weight: 600; color: #333; letter-spacing: -0.025em; line-height: 1.6;}
.left_h_list .h_date_month{padding-right: 40px; float: right;}

/* .h_date_month::before{width: 18px; height: 18px; display: inline-block; content: ''; border-radius: 50%; background: #1A3575; border: solid 4px #EFEFEF; box-sizing: border-box; vertical-align: middle; margin: 0px 15px 0px -7px;} */
.left_h_list .h_date_year::after{width: 50px; height: 19px; margin-right: -13px; margin-left: 10px; display: inline-block; content: ''; background-image: url(/yeastech/resources/html/images/h_date_left.svg); background-repeat: no-repeat;}
.right_h_list .h_date_year::before{width: 50px; height: 19px; margin-left: -14px; margin-right: 10px; display: inline-block; content: ''; background-image: url(/yeastech/resources/html/images/h_date_right.svg); background-repeat: no-repeat;}
.h_history_text{position: relative; display: block; color: #666666; word-break: keep-all; padding-top: 2px;}
.left_h_list .h_history_text{float: right;}
/*.h_history_text::before{content: ''; width: 5px; height: 5px; left: -3%; top: 30%; background: #d1d1d1; border-radius: 50%; position: absolute; }*/

@media (min-width: 1024px){	
	.history_content{padding-bottom: 150px;}
	.h_date_year{/* padding-left: 7vw; */ left: -200px; font-size: 35px;}
	.h_date_year_box{padding-top: 5%;}
	.h_date_month{font-size: 20px;}
	.h_date_month::before{left: -88px;}
	.right_h_list  .h_history_text{margin-left: 7vw; font-size: 18px;}
	.left_h_list  .h_history_text{margin-right: 2vw; font-size: 18px;}
}

@media (min-width: 768px) and (max-width: 1023px){
	.history_content{padding-bottom: 150px;}
	.h_date_year{left:  -145px; font-size: 28px;}
	.h_date_month{font-size: 20px;}
	.h_date_month::before{left: -73px;}
	.right_h_list  .h_history_text{margin-left: 13vw; font-size: 16px;}
	.left_h_list  .h_history_text{margin-right: 4vw; font-size: 16px;}
}

@media (min-width: 768px) {
	.left_h_list .h_date_year {text-align: right;}
}

@media (max-width: 767px){
	.history_content{overflow: inherit;}
	.history_content::before{left: 0; top: 0px; height: 100%;}
	.h_header_img{display: none;}
	.h_date_year{text-align: left; font-size: 5vw;}
	.left_h_list .h_date_year::after{display: none;}
	.left_h_list .h_date_year::before{width: 50px; height: 19px; margin-left: -8px; margin-right: 10px; display: inline-block; content: ''; background-image: url(/yeastech/resources/html/images/h_date_right.svg); background-repeat: no-repeat;}
	.right_h_list .h_date_year::before{margin-left: -8px;}
	.left_h_list .h_date_month {float: left; padding-right: 0;}
	.history_list_box{float: none; padding-left: 0; margin-left: 0;}
	.left_h_list{margin-top: 16px;}
	.left_h_list .h_history_text {margin-left: 17vw; font-size: 3vw; text-align: left; float: none; width: 100%;}
	.right_h_list .h_history_text {margin-left: 17vw; font-size: 3vw;}
	.h_date_text_box{padding-left: 50px;}
}

@media (min-width: 641px){
	.h_date_year{line-height: 1;}
}

@media (max-width: 640px){
	.history_list_box{display: flex; flex-direction: column;}
}

@media (min-width: 414px) and (max-width: 767px){
	.history_content{padding-bottom: 150px;}
	.h_date_wrap{margin-top: 14px;}
	.h_date_month{font-size: 3.2vw;}
	.h_date_month::before{left: -59px;}
	.h_history_text{font-size: 14px;}
}

@media (max-width: 413px){
	.h_date_year{font-size: 7vw;}
	.h_date_text_box {padding-left: 50px;}
	.left_h_list{margin-top: 20px; padding-right: 0;}
	.left_h_list .h_history_text, .right_h_list .h_history_text{font-size: 5vw; margin-left: 0;}
}