@charset "utf-8";
/* CSS Document */

/*******************************
 * Infomation : 한국재자원에너지협회
 * FileNam	: main.css 
 * Update	: 2025.01.08.
********************************/

#main_container{}

.quick_menu{ opacity: 0;}
.quick_menu.show{ animation: quick_show 1.4s both;}
@keyframes quick_show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fa_banner_wrap{ margin-top: 0;}

/* Main Visual */
.main_visual{ height: 59.5rem; background: url("../images/main/main_visual01.jpg") no-repeat; background-size: cover;}
.main_visual .inner{ height: 100%; display: flex; justify-content: space-between; align-items: center;}

.main_slogan{ font-family: 'Gmarket Sans'; color: #fff; margin-top: -10rem;}
.main_slogan .txt01{ }
.main_slogan .txt01 p{font-size: 5.3rem; font-weight: 700; line-height: 1.1; letter-spacing: -.8px;}

.main_slogan .txt02{ font-size: 1.8rem; margin-top: 3rem; letter-spacing: -.8px;}
.main_slogan .txt02 p{}

/* Main Slogan Event */
.main_slogan .txt01 .t01.wave{}
.main_slogan .txt01 .t02.wave{ animation-delay: 0.2s}
.txt02.wave_anim .wave{ animation-delay: 0.4s}

.wave_anim {
	overflow: hidden;
}
.wave_anim .wave {
	-webkit-animation: common_wave 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
	animation: common_wave 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.wave_anim > .wave {
	display: inline-block;
	transform: translateY(125%);
	opacity: 0;
}

@keyframes common_wave {
	0% {
		opacity: 0;
		-webkit-transform: translateY(125%);
		transform: translateY(125%);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.main_v_banner{ width: 42rem; height: 47.4rem; border-radius: 1.5rem; border: .6rem solid #fff; background-color: #fff;}
.main_v_banner a{ position: relative; display: block;}
.main_v_banner a img{ width: 41.8rem; height: 46.2rem; border-radius: 1rem;}

.arr01{ position: absolute; width: 4rem; height: 4rem; border-radius: 4rem; background-image: url("../images/main/arr_b_wh.png"); background-repeat: no-repeat; background-position: top 14px right 16px; background-color: #2d2d2d; transition: width 0.6s ease; display: flex; align-items: center;}
.arr01::before{ content: "바로가기"; color: #fff; opacity: 0; transition: transform 0.3s ease;}

.main_v_banner a .arr01{ right: 3rem; bottom: 3rem;}
.main_v_banner a:hover .arr01{ width: 11rem; padding-left: 1.8rem;}
.main_v_banner a:hover .arr01::before{ animation: arr01_show 1.4s both;}

@keyframes arr01_show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*################################### Main Contens ###################################*/
.main_cont_body{ position: relative;}
.main_middle_cont{}

/* 알림·소통, 주요 뉴스 */
.main_middle_cont.news{ margin-top: 4rem; display: flex; justify-content: space-between;}
.main_c_tit{ font-size: 3.2rem; font-weight: 700;}

/* 알림·소통 */
.noti_news_wrap{ width: 65rem;}
.notinews_top{ height: 8rem; border-bottom: 2px solid #2d2d2d; display: flex; justify-content: space-between; align-items: center;}

.notinews_tab{ display: flex; gap: .8rem;}
.notinews_tab li{}
.notinews_tab li button{ height: 4rem; border-radius: 4rem; padding: 0 2rem; border: 1px solid #c6c6c6; font-size: 1.6rem; color: #717171;}
.notinews_tab li.on button{ background-color: #2d2d2d; color: #fff; font-weight: 600; border: none;}

.notinews_tab_cont{ display: none;}
.notinews_tab_cont.ne01{ display: block;}

.notinews_main_view{ padding: 3rem; border-bottom: 1px dashed #c6c6c6; display: flex; gap: 2rem;}
.notinews_main_view .nots_date{ width: 8rem; height: 8rem; border-radius: 1.6rem; background-color: #edf1f5; flex-shrink: 0; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.notinews_main_view .nots_date span{}
.notinews_main_view .nots_date strong{ font-size: 2.6rem; color: #ff6a33; line-height: 1;}

.notinews_main_view .nots_text{ display: flex; align-items: flex-start; justify-content: center; flex-direction: column; width: calc(100% - 10rem);}
.notinews_main_view .nots_text:hover{ text-decoration: underline;}
.notinews_main_view .nots_text strong{ font-size: 2rem; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notinews_main_view .nots_text div{ margin-top: .4rem; width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.notinews_list{ padding: 2.5rem 3rem; height: 16rem; border-bottom: 1px solid #c6c6c6;}
.notinews_list li{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.notinews_list li::before{ content: ""; background-color: #ff6a33; width: 4px; height: 4px; border-radius: 4px; position: absolute; left: 0; top: .8rem;}

.notinews_list li:not(:first-child){ margin-top: 2.2rem;}
.notinews_list li a{ padding-left: 1.7rem; width: 76%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notinews_list li a:hover{ text-decoration: underline;}
.notinews_list li span{ color: #717171;}

/* 주요 뉴스 */
.main_news_wrap{ width: 55rem;}
.mainnews_top{ height: 8rem; display: flex; justify-content: space-between; align-items: center;}

.mainnews_swiper{ height: 14rem; padding: 3rem 0; background-color: #edf1f5; border-radius: 1.5rem;}
.mainnews_swiper li{ padding: 0 3rem;}
.mainnews_swiper li a{ height: 8rem; display: flex; flex-direction: column; justify-content: space-between;}
.mainnews_swiper li a p{ font-size: 2rem; font-weight: 700;
  display: -webkit-box !important;
    overflow: hidden;
    max-height: 3em;
    line-height: 1.3 !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    white-space: normal !important;
    height: auto;
}
/* .mainnews_swiper li a:hover p{ text-decoration: underline;}*/
.mainnews_swiper li a span{ color: #717171;}

/******************** Swiper Control ********************/
.swiper-indicator{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: var(--ce-spacer-2);
    flex-shrink: 0;
    position: relative;
}
.swiper-indicator.text-center{
    justify-content: center;
}
.swiper-indicator .swiper-pagination{
    top: auto;
    bottom: auto;
    width: auto;
}
.swiper-indicator .swiper-pagination:not(.swiper-pagination-fraction){
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 4rem;
    padding: var(--ce-spacer-3);
    border-radius: 4rem;
    background-color: var(--ce-white);
}
.swiper-indicator .swiper-pagination.swiper-pagination-fraction.swiper-pagination-bg{
    font-weight: 700;
    padding: var(--ce-spacer-3);
    border-radius: 4rem;
    background-color: var(--ce-white);
}
.swiper-indicator .swiper-button-next,
.swiper-indicator .swiper-button-prev{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: auto;
}
.swiper-indicator .swiper-navigation{
    display: inline-flex;
    gap: var(--ce-spacer-2);
}

.swiper-pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: relative;
    top: auto;
    bottom: auto;
    height: 4rem;
}
.swiper-pagination .swiper-pagination-bullet{
    width: 0.8rem;
    height: 0.8rem;
    opacity: 0.4;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 2rem;
    border-radius: 14rem;
    background-color: var(--ce-primary);
    opacity: 1;
}
.swiper-pagination.swiper-pagination-fraction{
    gap: var(--ce-spacer-1);
}
.swiper-pagination.swiper-pagination-fraction .swiper-pagination-current{
    color: #246beb;
}
.swiper-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: var(--ce-spacer-2);
}
[class^=swiper-button-]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    border: 0.1rem solid var(--ce-gray-20);
    background-color: #fff;
}
[class^=swiper-button-]::after{
    content: "";
    font-size: 0 !important;
    width: 2.4rem;
    height: 2.4rem;
    background-repeat: no-repeat;
}

.swiper-button-play::after{
    background-image: url("../images/main/ico_swiper_play.svg");
}

.swiper-button-stop::after{
background-image: url("../images/main/ico_swiper_stop.svg");
}

.swiper-button-next::after,
.swiper-button-prev::after{
    background-position: center;
    background-size: contain;
}
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: var(--ce-secondary-5);
}
.swiper-button-next:active,
.swiper-button-prev:active{
    background-color: var(--ce-secondary);
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled{
    background-color: var(--ce-gray-10);
    opacity: 1;
}
.swiper-button-next{
    right: 0;
}
.swiper-button-next::after{
    background-image: url("../images/main/ico_swiper_next.svg");
}
.swiper-button-next:active::after{
    background-image: url("../images/main/ico_swiper_next_wh.svg");
}
.swiper-button-next.swiper-button-disabled::after{
    background-image: url("../images/main/ico_swiper_next_gray.svg");
}
.swiper-button-prev{
    left: 0;
}
.swiper-button-prev::after{
    background-image: url("../images/main/ico_swiper_prev.svg");
}
.swiper-button-prev:active::after{
    background-image: url("../images/main/ico_swiper_prev_wh.svg");
}
.swiper-button-prev.swiper-button-disabled::after{
    background-image: url("../images/main/ico_swiper_prev_gray.svg");
}

.swiper-indicator .swiper-pagination{
    font-weight: 700; padding: var(--ce-spacer-3); border-radius: 4rem; background-color: var(--ce-white);
}

.news_banner{ position: relative; margin-top: 3rem; border-radius: 1.5rem;
  background-color: #c5e0ff;
  background-image: url("../images/main/news_banner_bg.png");
  background-repeat: no-repeat;
  background-position: right 0 bottom 0;
}

.news_banner .txt_wrap{ }
.news_banner .txt_wrap .nb_tit{ font-size: 2.8rem;}
.news_banner .txt_wrap .nb_tit strong{ color: #0d4688;}
.news_banner .txt_wrap .nb_txt{ margin-top: .2rem;}

.news_banner a{ height: 13rem; width: 100%; padding: 0 4rem;  display: flex; align-items: center;}
.news_banner a .arr01{ right: 4rem; top: 50%; transform: translateY(-50%);}
.news_banner a:hover .arr01{ width: 11rem; padding-left: 1.8rem;}
.news_banner a:hover .arr01::before{ animation: arr01_show 1.4s both;}

.news_banner:hover .txt01 .t01.wave{}
.news_banner:hover .txt01 .t02.wave{ animation-delay: 0.2s}
.txt02.wave_anim .wave{ animation-delay: 0.4s}



/************** Main Middle Top **************/
/* Banner common */
.ban_txt .ban_tit{ font-size: 3.4rem; font-weight: 700;}
.ban_txt .ban_desc{ margin-top: 1rem;}
.bann_go{ position: relative; height: 5rem; color: #fff; font-size: 1.8rem; display: flex; align-items: center;}
.bann_go span{ position: absolute; display: inline-flex; align-items: center; gap: 1.5rem; transition: 0.6s ease; width: min-content; left: 4rem;}
.bann_go span::after{ content: ""; width: .7rem; height: 1.2rem; background: url("../images/main/arr_b_wh.png") no-repeat center;}

.bann_go span b{ white-space: nowrap;}

a:hover .bann_go span{ left: 6rem;}

.main_middle_cont.top{ height: 57rem; padding-top: 6rem; display: flex; justify-content: space-between;}

.banner_ty02{ position: relative; width: 34rem; height: 45rem; border-radius: 1.5rem; overflow: hidden;}

.banner_ty02::before{ content: ""; width: 34rem; height: 34rem; border-radius: 100%; background-color: #fff; opacity: .3; position: absolute; left: -6rem; top: -8rem; transition: transform 2s ease;}
.banner_ty02 .ban_bg{ height: calc(100% - 5rem);}
.banner_ty02 .ban_bg::after{ content: ""; position: absolute; width: 100%; height: calc(100% - 5rem); left: 0; top: 0;}
.banner_ty02 .ban_bg .ban_txt{ position: absolute; z-index: 2; left: 4rem; top: 4.6rem;}

.banner_ty02:hover::before{ transform: scale(1.2); /* 원래 크기 대비 1.5배 확대 */}

/* 설립 목적 Banner */
.banner_ty02.n01{ background-color: #ffd87d;}
.banner_ty02.n01 .ban_bg::after{ background: url("../images/main/baner_ty02_img01.png") no-repeat right 0 bottom 0; z-index: 2;}
.banner_ty02.n01 .bann_go{ background-color: #fb812f;}

/* 협회 연혁 Banner */
.banner_ty02.n02{ background-color: #fbbcad;}
.banner_ty02.n02 .ban_bg::after{ background: url("../images/main/baner_ty02_img02.png") no-repeat right 0 bottom 0; z-index: 2;}
.banner_ty02.n02 .bann_go{ background-color: #f95c4b;}

/* Middle Right Banner */
.main_middle_cont.top .right_banner{ width: 52rem; height: 45rem; display: flex; flex-direction: column; justify-content: space-between;}

/* 조직도(연락처) Banner */
.banner_ty03{ position: relative; border-radius: 1.5rem; background-color: #edf1f5;}
.banner_ty03::before,
.banner_ty03::after{ content: ""; position: absolute;}
.banner_ty03::before{ width: 10.6rem; height: 8.7rem; background: url("../images/main/baner_ty03_icon01.png") no-repeat; top: 4rem; right: 11rem;}
.banner_ty03::after{ width: 8rem; height: 6.2rem; background: url("../images/main/baner_ty03_icon02.png") no-repeat; top: 10.2rem; right: 8rem;}
.banner_ty03 a{ height: 20.5rem; padding-left: 4rem; display: flex; align-items: center;}
.arr02{ position: absolute; width: 4rem; height: 4rem; border-radius: 100%; background: url("../images/main/arr_b_bk.png") no-repeat center #fff; right: 3rem; top: 50%; transform: translateY(-50%);}

.banner_ty03:hover:before { animation: ban03_1_show 1.4s both;}
.banner_ty03:hover::after { animation: ban03_2_show 1.4s both;}

@keyframes ban03_1_show {
  0% {
    opacity: 0.6;
    top: 2rem;	
  }
  100% {
    opacity: 1;
    top: 4rem;
  }
}

@keyframes ban03_2_show {
  0% {
    opacity: 0.6;
    top: 12.2rem;
  }
  100% {
    opacity: 1;
    top: 10.2rem;
  }
}

/* 협회장 인사말 Banner */
.banner_ty04{ position: relative; height: 20.5rem; background: linear-gradient(90deg,rgba(218, 249, 218, 1) 0%, rgba(255, 246, 202, 1) 100%);  border-radius: 1.5rem;}
/*.banner_ty04::after{ content: ""; position: absolute; width: 20.4rem; height: 23.6rem; background: url("../images/main/chairman_pic.png") no-repeat center; right: 1rem; bottom: 0;}*/

.banner_ty04 a{ position: absolute; display: block; height: 100%; width: 100%;}

/*
.banner_ty04 a:hover::after{ animation: ban04_show 1.4s both;}
@keyframes ban04_show {
  0% {
    opacity: 1;
    right: 1rem;
  }
  100% {
    opacity: 1;
    right: 2rem;
  }
}
*/

.chairman_pic{ position: absolute; width: 20.4rem; height: 23.6rem; right: -11px; bottom: 0; overflow: hidden; z-index: 2;}
.chairman_pic img{ position: absolute; left: 0; bottom: 0; transition: transform 3s ease-in-out;}

.banner_ty04 a:hover .chairman_pic img{ animation: ban04_show 1.6s both;}

@keyframes ban04_show {
  0% {
    opacity: 1;
    bottom: -.8rem;
  }
  100% {
    opacity: 1;
    bottom: 0rem;
  }
}

.banner_ty04 .ban_txt{ height: calc(100% - 5rem); padding: 3.8rem 0 0 4rem;}
.banner_ty04 .ban_txt .ban_desc2{ font-family: 'Gmarket Sans'; font-size: 1.4rem; margin-bottom: .8rem;}
.banner_ty04 .ban_txt .ban_tit2{ font-family: 'Gmarket Sans'; font-size: 2.2rem; line-height: 1.3;}
.banner_ty04 .ban_txt .ban_tit2 b{ font-size: 3rem;}
.banner_ty04 .bann_go{ background-color: #5d9011; border-radius: 0 0 1.5rem 1.5rem;}

/************** Main Middle Bottom (사업소개) **************/
.main_middle_cont.biz{ margin-top: 6rem;}

.main_biz_wrap{ padding: 3rem; border-radius: 1.5rem; background: url("../images/main/biz_banlogo_bg.png") no-repeat left -1rem bottom -1rem #edf1f5; display: flex; justify-content: space-between;}

.biz_int_txt{ padding: 2rem 0 0 2rem;}
.biz_int_txt .biz_tit{ font-size: 3.4rem; font-weight: 700;}
.biz_int_txt .biz_desc{ margin-top: 1.8rem;}

.biz_int_list{ display: flex; gap: 4rem;}

.biz_int_banner{ position: relative; width: 40rem; height: 29rem; border-radius: 1.5rem; background-color: #fff;}
.biz_int_banner::before{
    display: block;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    border: solid 5px #fff;
    box-shadow: 8px 13px 35px rgba(0, 72, 174, 0.2);
    transition: opacity 0.3s;
    content: '';
    pointer-events: none; z-index: 2;
}
.biz_int_banner:hover:before{ opacity: 1;}

.biz_int_img{ position: relative; height: 18rem; overflow: hidden;}
.biz_int_img span{ position: absolute; font-size: 1.4rem; font-weight: bold; color: #fff; top: 1.8rem; left: 2rem; z-index: 2;}
.biz_int_img img {
  border-radius: 1.5rem 1.5rem 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 3s ease-in-out;
  transform-origin: center center; /* 확대 기준점 중앙 고정 */
}

.biz_int_banner a:hover .biz_int_img img {
  /* animation: blur_show02 1s both; */
}

.biz_int_banner a:hover .biz_int_img::after{ animation: blur_show02 1.4s both;}

.biz_int_img::after{ content: ""; width: 100%; height: 100%; position: absolute; background-color: #fff; opacity: 0;}

@keyframes blur_show02 {
	0% {
		filter: blur(4px);
	}
	100% {
		filter: blur(0);
	}
}

.biz_int_botom{ position: relative; height: 11.4rem; padding: 2rem;}
.biz_int_botom p{ font-size: 2rem; font-weight: 700;}
.biz_int_botom span{}

.arr03{ position: absolute; width: 3rem; height: 3rem; border-radius: 3rem; background-image: url("../images/main/arr03.png"); background-repeat: no-repeat; background-position: top 10px right 10px; right: 2rem; bottom: 2rem; background-color: #2d2d2d; transition: width 0.6s ease; display: flex; align-items: center;}
.arr03::before{ content: "바로가기"; color: #fff; opacity: 0; transition: transform 0.3s ease;}

a:hover .arr03{ width: 11rem; padding-left: 1.8rem;}
a:hover .arr03::before{ animation: arr03_show 1.4s both;}

@keyframes arr03_show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*************** 포토뉴스 ****************/
.main_middle_cont.photonews{ margin-top: 4rem;}

.photonews_top{ border-bottom: 2px solid #2d2d2d; margin-bottom: 3rem; height: 8rem; display: flex; justify-content: space-between; align-items: center;}

.btn_photonews_more{ position: relative; width: 4rem; height: 4rem; border-radius: 100%; border: 1px solid #c7c7c7; display: inline-flex;}
.btn_photonews_more::before,
.btn_photonews_more::after{ content: ""; position: absolute; background-color: #2d2d2d; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .3s ease;}
.btn_photonews_more::before{ width: 1.2rem; height: .2rem;}
.btn_photonews_more::after{ width: .2rem; height: 1.2rem;}
.btn_photonews_more:hover::before,
.btn_photonews_more:hover::after{ transform: translate(-50%, -50%) rotate(180deg);}

.photonews_cont{}
.photonews_cont.main_photo_list{}

.main_photo_list{ display: flex; flex-wrap: wrap; gap: 4.3rem;}
.main_photo_list li{ width:  39.8rem;}
.main_photo_item{ display: block;}
.main_photo_item .pic{ position: relative; width: 39.8rem; height: 28rem; border-radius: 1.2rem; overflow: hidden; background-color: #f5f5f5; border: 1px solid #c6c6c6; transition:border-color 0.2s ease-in-out;}
.main_photo_item .pic img{ width: 39.8rem; height: 28rem;}

.main_photo_item .pic img{ 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .5s ease-in-out;
  transform-origin: center center; /* 확대 기준점 중앙 고정 */
}
.main_photo_item:hover .pic img {
  transform: translate(-50%, -50%) scale(1.1);
}

.main_photo_item .tit{ font-size: 2rem; font-weight: 600; margin-top: 2.6rem;
  display: -webkit-box !important;
    overflow: hidden;
    max-height: 3em;
    line-height: 1.2 !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    white-space: normal !important;
    height: auto;
}
.main_photo_item .date{ color: #555; margin-top: 1.2rem;}

/*************** 산업동향 ****************/
.partner_link_wrap{}
.partner_link_wrap .inner{ padding: 6rem 0;}

.partner_link{ height: 14rem; border-radius: 1.5rem; overflow: hidden; padding: 0 4.5rem 0 6.4rem; display: flex; justify-content: space-between; align-items: center;
  background: 
    url("../images/main/partner_bg.png") no-repeat left 4rem bottom 0, 
    linear-gradient(90deg, rgba(232,119,31,1) 0%, rgba(234,58,36,1) 100%);
}

.prtl_tit{ font-family: 'Gmarket Sans'; font-size: 2.4rem; color: #fff;}
.prtl_tit b{ font-size: 3.4rem;}

.partner_sel{ width: 28.8rem; height: 5rem; border-radius: 5rem; background: url("../images/common/arr_sel_wh.png") no-repeat center right 3rem; color: #fff; border: 1px dashed #fff; padding: 0 3rem;
   appearance: none;        /* 크롬, 사파리 */
  -webkit-appearance: none;/* 사파리 */
  -moz-appearance: none;   /* 파이어폭스 */
}

.partner_sel option{ color: #1d1d1d; background: #fff;}

.biz_tag_wrap{ display: flex; gap: 1.5rem;}
.biz_teg{ position: relative; border: 1px dashed #fff; color: #fff; font-size: 1.8rem; font-weight: 700; height: 4.4rem; border-radius: 4.4rem; padding: 0 1.8rem 0 4.8rem; background-position: left 1.8rem center; background-repeat: no-repeat; transition:border-color 0.2s ease-in-out; display: inline-flex; align-items: center;}
.biz_teg:hover{ }

.biz_teg::after{ content: ""; width: calc(100% + 2px); height: 4.4rem; border-radius: 4.4rem; border: 1px solid #fff; display: inline-flex; position: absolute; left: -1px; top: -1px; opacity: 0;}
.biz_teg:hover:after{ animation: opacity_show .4s both;}

.biz_teg::before{ content: ""; position: absolute;}

.biz_teg.tg01::before{ background-image: url("../images/main/icon_biz01.png"); width: 21px; height: 20px; left: 1.8rem;}
.biz_teg.tg02::before{ background-image: url("../images/main/icon_biz02.png"); width: 19px; height: 20px; left: 1.8rem;}
.biz_teg.tg03::before{ background-image: url("../images/main/icon_biz03.png"); width: 21px; height: 19px; left: 1.6rem;}
.biz_teg.tg04::before{ background-image: url("../images/main/icon_biz04.png"); width: 17px; height: 24px; left: 1.9rem;}

.biz_teg:hover::before{transform: rotateY(360deg); transition-duration: 0.4s;}

@keyframes opacity_show {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}