@charset "utf-8"; 
 
 
@keyframes ani-slide-up {
	from	{opacity:0; transform: translateY(80px);}
	to		    {opacity:1.0; transform: translateY(0);}
}
@keyframes imgScale {
	0%		{transform:scale(1.2)}
	100%	{transform:scale(1)}
}

 /* VISUAL    ================================================================================== */
.main_visual							{position:relative; overflow: hidden;}
.main_visual li							{position:relative; height:580px; }	
.main_visual .visual_item				{content:''; animation:imgScale 3s both;}
 
.visual_txt											{position:absolute; text-align:left; width:100%; top:19%; padding-left:4.6em;  font-size:1.3em; line-height:1.2;   z-index:100; color:#fff;  transition:all 0.4s ease; animation:ani-slide-up 1s linear forwards; animation-delay:0.1s; }
.visual_txt .txt01								{font-family: 'Paperlogy';font-weight:700;font-size:1.15em; color:#3cf8f1;letter-spacing:0.25px; text-shadow: 3px 3px 15px rgba(0,0,0,0.4);transition:all 0.4s ease;}
.visual_txt .txt02								{font-family: 'Paperlogy';font-weight:600; font-size:2.8em;padding-top:10px;line-height:1.1;letter-spacing:0;  text-shadow: 3px 3px 15px rgba(0,0,0,0.4); transition:all 0.4s ease;}
.visual_txt .txt03								{font-weight:600;  padding-top:1em; line-height:1.3;  text-shadow: 3px 3px 10px rgba(0,0,0,0.4); transition:all 0.4s ease;}

 
@media screen and (max-width:1500px) {
    .visual_txt											{ padding-left:5%; }
} 
@media screen and (max-width:1024px) { 
	.main_visual li					                {height:480px;}  
    .visual_txt											{  padding-left:4%; font-size:1.15em;}
} 
@media screen and (max-width:768px) { 
	.main_visual li					                {height:340px;}
    .visual_txt											{ top:18%;padding-left:4%; font-size:0.95em;}
    .visual_txt .txt01								{ font-size:1.1em; }
    .visual_txt .txt02								{ font-size:2.5em;padding-top:8px;  }
}
@media screen and (max-width:580px) { 
	.main_visual li					                {height:220px;}
    .visual_txt											{ top:22%;padding-left:5%; font-size:0.8em;}
    .visual_txt .txt01								{ font-size:1.1em; }
    .visual_txt .txt02								{ font-size:2.5em;  }
    .visual_txt .txt03								{ display:none; }
}
@media screen and (max-width:480px) { 
	.main_visual li					                {height:200px;}
    .visual_txt .txt01								{ font-size:0.95em; }
    .visual_txt .txt02								{ font-size:2.1em; padding-top:5px; font-weight:500; }
}






 /* main_banner   ================================================================================== */
.main_banner                        {position:relative; padding:40px 0; } 
.main_banner ul					{ display: grid; grid-template-columns:repeat(8, 1fr); padding:0 20px;  }
.main_banner ul li					{  text-align:center; }
.main_banner ul li a				{ display: flex; flex-direction: column; justify-content:center; gap:15px; }
.main_banner ul li figure		{position:relative; top:0;  width:100px; height:100px; border-radius:50%; border:1px solid #e5e5e5;  display: flex; flex-direction: column; justify-content:center; align-items:center; margin:auto; transition:all 0.3s; box-shadow: 0 3px 12px 0 rgba(0,0,0,0.08);  }
.main_banner ul li img			{ width:48%;  }
.main_banner ul li p				{font-weight:600; color:#333; font-size:1.05em; }
.main_banner ul li:hover figure		{ top:-10px; }

@media screen and (max-width:1024px) {    
    .main_banner                        {  padding:30px 0; } 
    .main_banner ul li a				{  gap:10px; }
    .main_banner ul li figure		{ width:80px; height:80px; }
    .main_banner ul li p				{  font-size:1.05em; }
}
@media screen and (max-width:768px) {    
    .main_banner ul					{   grid-template-columns:repeat(4, 1fr); gap:30px 0; }
}
@media screen and (max-width:480px) {    
    .main_banner ul					{  gap:20px 0; }
    .main_banner ul li figure		{ width:60px; height:60px; }
    .main_banner ul li p				{font-size:0.9em; }
}

 /* main_banner   ================================================================================== */





 /* main_news   ================================================================================== */
.main_news								{position:relative; padding:30px 0 60px 0; overflow:hidden;}
.main_notice							    {position:relative;float:left;width:calc(100% - 580px); }
.main_bn								    {position:relative;width:520px; float:right; }

.main_notice .tit_wrap             {position:relative; padding-bottom:20px;  border-bottom:2px solid var(--color1); }
.main_notice .tit						{font-size:1.8em; color:var(--color1);  font-weight:700;  padding-left:5px; }
 
.main_notice .tit_wrap .more						   {display:block; position:absolute; right:0; top:0; font-size:0.85em;font-weight:500;color:#868686; cursor:pointer;  padding-right:35px; }
.main_notice .tit_wrap .more span                  {position:absolute; right:0;top:-2px; display:block; width:34px;height:34px; border-radius:30px; border:1px solid #ddd;  transition:all 0.3s ease;} 
.main_notice .tit_wrap .more span::after			{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:14px; height:2px; background:#a9a9a9;}
.main_notice .tit_wrap .more span::before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:14px; width:2px; background:#a9a9a9;}
.main_notice .tit_wrap .more:hover span::after,
.main_notice .tit_wrap .more:hover span::before	{ background:var(--color1);}


.news_item                {position:relative; }
.news_item .top        {position:relative; display:grid; grid-template-columns:90px auto; gap:20px; padding:  20px 10px; border-bottom:1px solid #e3e3e3;  }
.news_item .date			{width:90px; height:90px; text-align:center; background:var(--color1); color:#fff; border-radius:10px; font-style:normal;   font-size:0.95em;display: flex; flex-direction: column; justify-content:center; align-items:center;  }
.news_item .date b			{  line-height:100%; font-size:2.3em; } 
.news_item dl				{   position:relative; width:100%; overflow:hidden;}
.news_item dl dt			{ font-weight:600; font-size:1.15em; color:#000;margin-bottom:10px;padding-top:4px;  overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-wrap: break-word; }
.news_item dl dd			{color:#777;   overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word; }
.news_item ul							{overflow:hidden;width:100%;   padding-top:18px  ;}
.news_item ul li							{ position:relative;   } 
.news_item ul a							{position:relative;   padding:5px 5px 8px 18px; line-height:1.3; display:flex;flex-flow:wrap;justify-content: space-between; gap:15px; } 
.news_item ul a::before           {position:absolute; content:''; left:5px;top:13px; width:3px; height:3px; background:#666; border-radius:3px; } 
.news_item li p						    {position:relative; flex:2; color:#333;font-size:1.05em; font-weight:500; overflow: hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.news_item li time				    {position:relative; width:110px;text-align:right;    color:#999; font-size:0.95em;  }
.news_item dl:hover,
.news_item ul a:hover              {text-decoration:underline; }

 
.main_notice .nolist					{padding:60px 0; text-align:center; color:#999; float:none; width:100%;}
.main_notice .nolist:after				{display:none;}

.main_bn li							    {padding:30px 25px;}
.main_bn li p							{position:relative; color:#fff; font-size:1.25em;  line-height:1.3; font-weight:700; word-break:keep-all; }
.main_bn li p:before				{content:''; display:block; width:26px; height:1px; background:#fff; margin:0 0 15px 0;}
.main_bn li .btn						{position:absolute; bottom:35px;}
.main_bn li .btn span			{padding:6px 12px; color:#fff; border:1px solid #fff; font-size:0.9em;opacity:0.8; border-radius:3px; }

.main_bn .btm						{position:relative; display:grid; grid-template-columns:repeat(2, 1fr);}
.main_bn li						        {position:relative; height:210px;}
.main_bn li:first-child			{background:url("../image/main/bn09.png") no-repeat 80px -50px #dfecff;}
.main_bn li:nth-child(2)		{background:url("../image/main/bn12.png") no-repeat 95% 85% #0c2e86; background-size:80px;}
.main_bn li p span					{display:block; font-weight:700;}
.main_bn li:first-child .btn span	{background:#152652; border-color:#152652; color:#fff; cursor:pointer; opacity:1;}
.main_bn li:first-child p               {color:#222;}
.main_bn li:first-child .btn span:hover	{background:#000;} 
.main_bn li:first-child p:before	{background:#222;} 
 
.main_bn li:nth-child(3)			{position:relative; background:url("../image/main/bn10.png") no-repeat 95% bottom #00a0c6; background-size:100px; }
.main_bn li:last-child				{background:url("../image/main/bn11.png") no-repeat 95% bottom #1972d6; background-size:100px;}
.main_bn li:hover .btn span		{opacity:1;}


@media screen and (max-width:1430px) {  
	.main_news							    {padding:30px 15px 60px 15px;}  
}
@media screen and (max-width:1200px) {   
    .main_notice							    { width:calc(100% - 500px); }
    .main_bn								    { width:460px;}
} 
@media screen and (max-width:1024px) {    
	.main_news							{padding:20px 15px 40px 15px;}
	.main_notice					        {float:none; width:100%; margin:0 0 30px 0; }
	.main_notice .tit				    {font-size:1.6em;  }
 
    .news_item .top        {  grid-template-columns:80px auto; gap:15px; padding:  15px 0;   }
    .news_item .date			{width:80px; height:80px; font-size:0.95em;  }
    .news_item .date b			{    font-size:2em; } 

    .news_item ul							    { padding-top:15px  ;} 
  
	.main_bn						    {float:none; width:100%;  }
    .main_bn li:first-child		{  background-position:right -100px top 50%;  }					
	.main_bn li				            { background-position:100% -50px; height:180px;padding:30px 20px;}
}
@media screen and (max-width:560px) {  
	.main_notice .tit				    {font-size:1.45em;  }
    .news_item .top        {  grid-template-columns:70px auto;}
    .news_item .date			{width:70px; height:70px;  font-size:0.9em;  }
 
    .news_item dl dt			{  font-size:1.1em; margin-bottom:8px; padding-top:6px;  }
    .news_item dl dd			{  display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; }

    .news_item ul a							{  padding:4px 5px 6px 15px;  } 
    .news_item ul a::before           { left:3px;top:11px;}
    .news_item li p						    { font-size:1em;  }

    .main_bn .btm						{ grid-template-columns:repeat(1, 1fr);} 	  
	.main_bn li p					{padding-right:50px; max-width:300px;font-size:1.15em; } 
}


 /* main_news   ================================================================================== */






 /* main_company   ================================================================================== */
.main_company                        {position:relative; padding:70px 0;   background:#f3f5f7;}
.main_company .tit_wrap                      {position:relative;text-align:center; padding-bottom:50px;   }
.main_company .tit_wrap .tit                {position:relative; font-size:2.1em; color:#000;  font-weight:700;   }
.main_company .tit_wrap .tit b                { color:var(--color1);  font-weight:700;   }
.main_company .tit_wrap .more        { display:flex;  position:absolute; right:0; top:0; font-size:0.85em;font-weight:500; cursor:pointer;  padding-right:35px; }
.main_company .tit_wrap .more p         { color:#868686; padding-top:3px; padding-right:12px; }
.main_company .tit_wrap .more span                  {position:absolute; right:0;top:-2px; display:block; width:34px;height:34px; border-radius:30px;background:#fff; border:1px solid #ddd;  transition:all 0.3s ease;} 
.main_company .tit_wrap .more span::after			{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:14px; height:2px; background:#a9a9a9;}
.main_company .tit_wrap .more span::before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:14px; width:2px; background:#a9a9a9;}
.main_company .tit_wrap .more:hover span::after,
.main_company .tit_wrap .more:hover span::before	{ background:var(--color1);}



.main_company .swiper-wrapper						{position:relative; }
.main_company .company_wraps					{}
.main_company .swiper                                   {padding-bottom:20px;  }
.main_company article										{position:relative;  }
/*
.main_company article a									{display:block; width:100%; overflow:hidden; background:#fff; border:1px solid #ddd; border-radius:10px; padding:25px;   }
*/
.main_company article .article_company					{display:block; width:100%; overflow:hidden; background:#fff; border:1px solid #ddd; border-radius:10px; padding:25px;   }
 
.main_company article .com_name								{position:relative;  margin-bottom:15px ; color:#000;font-size:1.2em;font-weight:700;line-height:1.25;  overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break: break-all; }
.main_company article .cont                       { display: flex; flex-direction: column; gap:5px; }
.main_company article dl                            { position:relative; display: grid; grid-template-columns:75px auto; gap:10px;   font-size:0.95em ;  }
.main_company article dl dt                           { position:relative; font-weight:600;color:#222;padding-left:10px; }
.main_company article dl dt::before              { position:absolute;  content:''; left:0; top:9px; width:4px; height:4px;  background:#888; border-radius:5px; }
.main_company article dl dt::after              { position:absolute;  content:''; right:0; top:5px; width:1px; height:14px;  background:#ddd;   }
.main_company article dl dd                           { position:relative;  }
.main_company article .txt01								{position:relative;  font-size:0.95em ; color:#888; line-height:1.3; margin-top:15px;  text-indent:20px ; height:45px;  overflow:hidden; text-overflow: ellipsis;-o-text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap: break-word;  } 
.main_company article .txt01::before            {position:absolute;  content:''; left:0; top:1px; width:15px; height:15px;  background:url('../image/common/icon_location.svg') no-repeat 0 0; background-size:100% auto; opacity:0.55; } 

.main_company article a:hover						    {border:1px solid var(--color1); box-shadow: 0 3px 13px 0 rgba(0,0,0,0.1);  } 
.main_company article a:hover .com_name				{  color:var(--color1); } 



 
 /* 화살표 css */
.main_company .btn-prev,
.main_company .btn-next                                { position: absolute; display:block; top:calc(52% - 5px);   cursor: pointer;  border-radius:50px; border:1px solid #bbb;  width:60px; height:60px;  opacity:0.5;  z-index: 999;  transition: var(--transition1); display: flex; justify-content:center; align-items:center; background:#fff; }
.main_company .btn-prev                                { left:-90px;  }
.main_company .btn-next                                {right:-90px;  }
.main_company .btn-prev:hover,
.main_company .btn-next:hover                     { opacity:0.8; } 
 
.main_company .btn-prev span, .main_company .btn-next span { position: absolute; width:15px;height:15px;border:solid #222; border-width:2px 2px 0 0;   }
.main_company .btn-prev span            {transform: rotate(-135deg); left:25px;}
.main_company .btn-next span            {transform: rotate(45deg); right:25px;  } 
 
 .main_company .btn_wrap                  { padding-top:20px;  width:100%; max-width:600px; margin:auto;  z-index:111 ; display:flex;justify-content: center; align-items:center; gap:10px; }
/* dots css */
.main_company .pagination                {  text-align:center; display:flex;justify-content: center; gap:0; } /* Swiper 수정으로 임시추가 */
.main_company .swiper-pagination-bullets.swiper-pagination-horizontal  { bottom: initial !important; } 
.main_company .swiper-pagination                {  padding-top:20px;  }
.main_company .swiper-pagination span       {  background:#ddd  ;  } 

.main_company .swiper-pagination-bullet     {display:inline-block;}
 
.main_company .swiper-pagination-bullet {position:relative; width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 24px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 30px));  display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 0); background: var(--swiper-pagination-bullet-inactive-color, transparent); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.9) ; } 
.main_company .swiper-pagination-bullet::after  {position:absolute; content:''; left:50%;top:50%; width:10px;height:10px; background:#ccc;border-radius:50px; transform:translate(-50%, -50%);    }
.main_company .swiper-pagination-bullet-active,
.main_company .swiper-pagination-bullet:focus, 
.main_company .swiper-pagination-bullet:hover              {    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1) ;}
.main_company .swiper-pagination-bullet-active::after    { background:#8f969b;}
.main_company .swiper-pagination-bullet:focus::after,
.main_company .swiper-pagination-bullet:hover::after    { background:#8f969b;}

.main_company .swiper-pagination-bullet:focus       { outline:2px dotted var(--outline-color); outline-offset:var(--outline-offset);}

 /* 재생정지 css */
.main_company .btn-toggle span    {position:relative;top:2px; display:inline-block; width:30px; height:30px;cursor:pointer; }
.main_company .btn-toggle.play span::before    { position:absolute;  content:''; top:11px;left:10px; width:3px;height:12px; background:#aaa; }
.main_company .btn-toggle.play span::after     { position:absolute;  content:''; top:11px;left:16px; width:3px;height:12px; background:#aaa; }
.main_company .btn-toggle.stop span::before    { position:absolute;  content:''; top:11px;left:12px; width:0px;height:0px;border-top:6px solid transparent;border-bottom:6px solid  transparent;border-left:8px solid #aaa;}
 
 
@media screen and (max-width:1600px) {
    .main_company .btn-prev                                { left:-30px;  }
    .main_company .btn-next                                {right:-30px;  }
} 
@media screen and (max-width:1480px) {
    .main_company										{  padding:70px 15px; }    
    .main_company .btn-prev               { left:-15px; }
    .main_company .btn-next               { right:-15px; }
}   
@media screen and (max-width:1100px) {
    .main_company article .article_company					{ padding:25px 20px;   }
}
@media screen and (max-width:1024px) {
    .main_company										{  padding:60px 15px; }     
    .main_company .tit_wrap					{  padding-bottom:40px; }
    .main_company .tit_wrap .tit                {  font-size:1.9em;}
    .main_company .more						    {  top:5px;  }
    .main_company .more a  						{ gap:10px; }
    .main_company .more a span				{ width:30px; height:30px;} 

    .main_company article .article_company					{ padding:20px 1em;   }
    .main_company article dl                            {   grid-template-columns:70px auto; gap:6px; }
    .main_company article .txt01						{  height:40px; } 

    .main_company .btn-prev,
    .main_company .btn-next                                {  width:50px; height:50px;   } 
 
    .main_company .btn-prev span, .main_company .btn-next span {   width:13px;height:13px;  }
    .main_company .btn-prev span            {transform: rotate(-135deg); left:20px;}
    .main_company .btn-next span            {transform: rotate(45deg); right:20px;  }  
}
@media screen and (max-width:768px) { 
    .main_company										{  padding:50px 15px; }     
    .main_company .tit_wrap					{  padding-bottom:30px; }
    .main_company .tit_wrap .tit                {   font-size:1.6em; text-align:left;}
    .main_company article .com_name	{   font-size:1.15em;  }
} 


 /* main_company   ================================================================================== */







 /* CONT02   ================================================================================== */
.main_review									    {position:relative; padding:70px 0; overflow:hidden; background:#fff;}
.main_review .tit_wrap                      {position:relative;text-align:center;padding:0 15px 50px 15px;    }
.main_review .tit_wrap .tit                {position:relative; font-size:2.1em; color:#000;  font-weight:700;   }
.main_review .tit_wrap .tit b                { color:var(--color1);  font-weight:700;   }
.main_review .tit_wrap .more        { display:flex;  position:absolute; right:15px; top:0; font-size:0.85em;font-weight:500; cursor:pointer;  padding-right:35px; }
.main_review .tit_wrap .more p         { color:#868686; padding-top:3px; padding-right:12px; }
.main_review .tit_wrap .more span                  {position:absolute; right:0;top:-2px; display:block; width:34px;height:34px; border-radius:30px;background:#fff; border:1px solid #ddd;  transition:all 0.3s ease;} 
.main_review .tit_wrap .more span::after			{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); width:14px; height:2px; background:#a9a9a9;}
.main_review .tit_wrap .more span::before		{position:absolute; content:''; left:50%; top:50%; transform:translate(-50%, -50%); height:14px; width:2px; background:#a9a9a9;}
.main_review .tit_wrap .more:hover span::after,
.main_review .tit_wrap .more:hover span::before	{ background:var(--color1);}

.main_review h2								{font-size:2em; letter-spacing:-3px; color:#222; display:none; }
.main_review h2 span							{color:#0c2e86;}
.main_review h2 p							{display:block; color:#777; font-size:16px; margin:15px 0 30px 0; letter-spacing:-0.75px;}

 
.main_reviewlist 						{position:relative; padding:0 5px;}
.main_reviewlist li						{position:relative; float:left; overflow:hidden; background:#fff; border:1px solid #ddd; border-radius:10px; margin:0 10px;  }
.main_reviewlist li:last-child			{ }
.main_reviewlist figure					{overflow:hidden; height:230px;} 
.main_reviewlist figure img				{width:100%;  transition:.3s;}
.main_reviewlist dl						{padding:20px ; }
.main_reviewlist dl dt					{font-size:1.15em; font-weight:700; color:#111;  margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}
.main_reviewlist dl dd					{font-weight:600; color:#888; font-size:1em; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;} 
.main_reviewlist li:hover 		        {border:1px solid var(--color1); box-shadow: 0 3px 13px 0 rgba(0,0,0,0.1);  } 


   

.page_btn								        {position:absolute;  width:100%; top:50%; }
.page_btn p					{ position: absolute;  cursor: pointer;  border-radius:50px; border:1px solid #bbb;  width:60px; height:60px;  opacity:0.5;  z-index: 999;  display: flex; justify-content:center; align-items:center; background:#fff; }
.page_btn span				{position: absolute; width:15px;height:15px;border:solid #222; border-width:2px 2px 0 0;   }
.page_btn .btn-prev				{  left:-75px;  }
.page_btn .btn-next				{right:-75px;  }
.page_btn .btn-prev span				{transform: rotate(-135deg); left:25px;}
.page_btn .btn-next span				{transform:rotate(45deg);right:25px;  } 
.page_btn p:hover			{opacity:0.8; }  
   
 
@media screen and (max-width:1600px) {
    .page_btn .btn-prev				{  left:-15px;  }
    .page_btn .btn-next				{right:-15px;  } 
}
@media screen and (max-width:1480px) { 
    .page_btn .btn-prev				{  left:0;  }
    .page_btn .btn-next				{right:0;  } 
}    
 
@media screen and (max-width:1024px) {  
    .main_review										{  padding:60px 0; }      
	.main_review h2						{font-size:1.6em;}
	.main_review h2 p					{font-size:15px; margin:10px 0 25px 0;}
    .main_review .tit_wrap					{  padding-bottom:40px; }
    .main_review .tit_wrap .tit                {  font-size:1.9em;}
 
	.main_reviewlist dl dt			{font-size:1.1em;}
	.main_reviewlist figure			{height:180px;}

	.page_btn p			{width:50px; height:50px; }  
    .page_btn span				{width:13px;height:13px;  } 
    .page_btn .btn-prev span				{transform: rotate(-135deg); left:20px;}
    .page_btn .btn-next span				{transform:rotate(45deg); left:20px;}
  
}
@media screen and (max-width:768px) { 
    .main_review										{  padding:50px 0; }      
    .main_review .tit_wrap					    {  padding-bottom:30px; }
    .main_review .tit_wrap .tit                {   font-size:1.6em; text-align:left;}
 

}



/* FAMSITE   ================================================================================== */
.main_famsite							{position:relative; background:#fff; overflow:hidden; border-top:1px solid #e5e5e5; }
#viewArea								{position:relative; width:calc(100% - 40px); margin-left:40px; height:120px; overflow:hidden; }
#imgList								{position:absolute; width:2000px; left:0; top:0; padding:30px 0 0 0;}
#imgList div							{float:left; margin:0 5px; padding:0  ; border:1px solid #e5e5e5;overflow:hidden; width:210px; height:60px;display: flex; flex-direction: column; justify-content:center; align-items:center;  }
.main_famsite .arrow p					{position: absolute; content: ''; display: block; top:50px; cursor:pointer;  width: 12px; height: 12px; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index:9;}
.main_famsite .prev						{left:0;  border-left: 3px solid #d1d1d1; border-bottom: 3px solid #d1d1d1; }                    
.main_famsite .next						{right:0; border-top: 3px solid #d1d1d1; border-right: 3px solid #d1d1d1;}
.main_famsite .arrow p:hover			{border-color:#333;}

  
@media screen and (max-width:1430px) { 
	.main_famsite					{padding:0 15px;} 
    #viewArea								{ width:calc(100% - 20px); margin-left:20px;  }
}