@charset "utf-8";

:root {
    --color1: #06373b;
    --color2: #1e5f5b;
    --color3: #159946;
    --color4: #4ab265;
}

/* animation */
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

/* default */
.mainpage::after {content:'';display:block;position:fixed;right:0;top:0;background-image:url('/images/main/main_bg.png');background-repeat:no-repeat;width:690px;height:100vh;}
.mainpage header .header_inwrap {background:transparent;}
.mainpage header.active .header_inwrap {background:#fff;}
.mainpage .header .gnb_wrap {background:transparent;}
.mainpage .main {position:relative;z-index:1;}
.mainpage footer {background:transparent;position:relative;z-index:1;}
br.block {display:none;}

/* main_src */
.main_src {margin:80px 0 55px;}
.main_src strong {/* font-size:35px~55px; */font-size:clamp(2.1875rem, 1.6518rem + 2.381vw, 3.4375rem);font-weight:600;color:#000;word-break:keep-all;}
.main_src p {/* font-size:16px~18px; */font-size:clamp(1rem, 0.9464rem + 0.2381vw, 1.125rem);color:#333;margin:20px 0 50px;}
.main_src .src {display:flex;justify-content:space-between;align-items:center;border:2px solid var(--color3);border-radius:25px;overflow:hidden;box-shadow:4px 4px 6px 0px #06373b26;width:850px;}
.main_src input {background:#fff;padding:25px;border:none;font-size:18px;background:#fff;width:calc(100% - 75px);}
.main_src input::placeholder {font-family:'S-CoreDream';font-size:18px;color:#5e7085;}
.main_src button {display:block;width:75px;height:75px;background:var(--color3);font-size:0;}
.main_src button i {font-size:28px;color:#fff;transition:.4s ease;}
.main_src button:hover i {font-size:32px;}

/* main_shortcut */
.main_shortcut {display:flex;/* margin-bottom:40px~70px; */margin-bottom:clamp(2.5rem, 1.6964rem + 3.5714vw, 4.375rem);}
.main_shortcut li:not(:last-of-type) {margin-right:30px;}
.main_shortcut li a {background:var(--color1);display:block;width:265px;color:#fff;padding:45px 40px;border-radius:25px;word-break:keep-all;position:relative;top:0;transition:.4s ease;}
.main_shortcut li:nth-of-type(2) a {background:var(--color2);}
.main_shortcut li:nth-of-type(3) a {background:var(--color3);}
.main_shortcut li:nth-of-type(4) a {background:var(--color4);}
.main_shortcut li a .text strong {/* font-size:20px~30px; */font-size:clamp(1.25rem, 0.9821rem + 1.1905vw, 1.875rem);font-weight:600;}
.main_shortcut li a .text p {/* font-size:12px~15px; */font-size:clamp(0.75rem, 0.6696rem + 0.3571vw, 0.9375rem);margin-top:5px;}
.main_shortcut li a .img  {display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px;}
.main_shortcut li a .img em {display:flex;justify-content:center;align-items:center;font-size:0;/* width:25px~35px;height:25px~35px; */width:clamp(1.5625rem, 1.2946rem + 1.1905vw, 2.1875rem);height:clamp(1.5625rem, 1.2946rem + 1.1905vw, 2.1875rem);border:1px solid #fff;border-radius:50%;padding:12px;transition:.4s .2s ease;}
.main_shortcut li a .img em i {/* font-size:14px~16px; */font-size:clamp(0.875rem, 0.8214rem + 0.2381vw, 1rem);transition:.4s .2s ease;}
.main_shortcut li a .img span {background:#fff;display:flex;justify-content:center;align-items:center;width:70px;height:70px;background:#fff;border-radius:50%;}
.main_shortcut li a .img span img {width:50px;}

.main_shortcut li:hover a {top:-10px;box-shadow:6px 6px 24px 0px #06373b66;}
.main_shortcut li:hover a .img em {width:50px;height:50px;border-color:transparent;background:#fff;}
.main_shortcut li:hover a .img em i {font-size:30px;color:var(--color1);}
.main_shortcut li:nth-of-type(2):hover a .img em i {color:var(--color2);}
.main_shortcut li:nth-of-type(3):hover a .img em i {color:var(--color3);}
.main_shortcut li:nth-of-type(4):hover a .img em i {color:var(--color4);}
.main_shortcut li:hover a .img span img {animation:swing;animation-duration:4s;animation-iteration-count:infinite;}

/* main_board */
.main_board {display:flex;justify-content:space-between;width:1150px;margin-bottom:65px;}
.main_board .b_title {display:flex;justify-content:space-between;padding-bottom:25px;}
.main_board .b_title h2 {/* font-size:20px~22px; */font-size:clamp(1.25rem, 1.1964rem + 0.2381vw, 1.375rem);font-weight:600;color:#000;word-break:keep-all;}
.main_board .b_title .controller {display:flex;align-items:center;}
.main_board .b_title .controller .arrow {display:flex;}
.main_board .b_title .controller .arrow > div {width:35px;height:35px;background:#fff;position:static;margin-top:0;transition:.4s ease;}
.main_board .b_title .controller .arrow .swiper-button-prev {border-radius:17px 0 0 17px;}
.main_board .b_title .controller .arrow .swiper-button-next {border-radius:0 17px 17px 0;}
.main_board .b_title .controller .arrow .swiper-button-prev::after {content:'';display:block;width:1px;height:10px;position:relative;right:-7px;}
.main_board .b_title .controller .arrow > div::after {font-size:0;}
.main_board .b_title .controller .arrow > div i {font-size:20px;}
.main_board .b_title .controller .more {font-size:0;margin-left:8px;width:35px;height:35px;border-radius:50%;display:flex;justify-content:center;align-items:center;transition:.4s ease;}
.main_board .b_title .controller .more i {font-size:20px;}
.main_board .b_slide {border-radius:15px;}
.main_board .b_slide .swiper-slide a {display:flex;border-radius:8px;transition:.4s ease;}
.main_board .b_slide .swiper-slide a .date {display:flex;flex-direction:column;justify-content:center;align-items:center;}
.main_board .b_slide .swiper-slide a .info {display:flex;flex-direction:column;justify-content:center;}
.main_board .b_slide .swiper-slide a .info p {font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main_board .b_slide .swiper-slide a:hover p {font-weight:600;text-decoration:underline;text-underline-position:under;}

/* main_board > 공지사항 */
.main_board .notice {background:#eef0f4;border-radius:25px;padding:35px 10px 10px;width:670px;}
.main_board .notice h2 {color:#000;padding-left:25px;}
.main_board .notice .controller {padding-right:10px;}
.main_board .notice .controller .arrow .swiper-button-prev::after {background:#dce0e9;}
.main_board .notice .controller .arrow > div {background:#fff;}
.main_board .notice .controller .arrow > div i {color:#000;}
.main_board .notice .controller .more {background:#fff;}
.main_board .notice .controller .more i {color:#000;}
.main_board .notice .b_slide {background:#fff;}
.main_board .b_slide .notice_swiper {overflow:hidden;height:300px;}
.main_board .notice .swiper-slide {padding:6px;}
.main_board .notice .swiper-slide a .date {display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 35px;margin:15px 0;border-right:1px solid #e5ecf5;}
.main_board .notice .swiper-slide a .date strong {font-family:'SpoqaHanSansNeo';font-size:28px;font-weight:600;color:#000;}
.main_board .notice .swiper-slide a .date span {font-family:'SpoqaHanSansNeo';font-size:13px;font-weight:500;color:#939fb0;}
.main_board .notice .swiper-slide a .info {padding:15px 20px;width:calc(100% - 122px);}
.main_board .notice .swiper-slide a .info em {font-family:'SpoqaHanSansNeo';font-size:13px;font-weight:600;color:var(--color3);margin-bottom:5px;}
.main_board .b_slide .swiper-slide a .info p {color:#000;}

.main_board .notice .controller .arrow .swiper-button-prev:hover {background:#f9f9f9;}
.main_board .notice .controller .arrow .swiper-button-next:hover {background:#f9f9f9;}
.main_board .notice .controller .more:hover {background:#f9f9f9;}
.main_board .notice .swiper-slide a:hover {background:#1599460d;}

/* main_board > 그린바이오 최신 동향 */
.main_board .trend {background:var(--color1);border-radius:25px;padding:35px 30px;width:450px;}
.main_board .trend .b_title{border-bottom:1px solid #fff;}
.main_board .trend h2 {color:#fff;padding-right:25px;}
.main_board .trend .controller .arrow .swiper-button-prev::after {background:#485859;}
.main_board .trend .controller .arrow > div {background:#01181a;}
.main_board .trend .controller .arrow > div i {color:#fff;}
.main_board .trend .controller .more {background:#01181a;}
.main_board .trend .controller .more i {color:#fff;}
.main_board .trend .b_slide {background:var(--color1);}
.main_board .trend .trend_swiper {overflow:hidden;margin-top:25px;height:250px;}
.main_board .trend .swiper-slide a {padding:16px 5px;}
.main_board .trend .swiper-slide a .date {display:flex;flex-direction:column;justify-content:center;align-items:center;}
.main_board .trend .swiper-slide a .date span {font-size:13px;font-weight:500;color:#fff;background:var(--color3);padding:16px 20px;border-radius:10px;transition:.4s ease;}
.main_board .trend .swiper-slide a .info {margin-left:20px;padding:0;width:calc(100% - 90px);}
.main_board .trend .swiper-slide a .info p {color:#fff;}

.main_board .trend .controller .arrow .swiper-button-prev:hover {background:#00292d;}
.main_board .trend .controller .arrow .swiper-button-next:hover {background:#00292d;}
.main_board .trend .controller .more:hover {background:#00292d;}
.main_board .trend .swiper-slide a:hover {background:#00292d;}



/* Tablet 768px ~ 1400px */
@media (max-width: 1400px) {
	/* main_src */
	.main_src .src {width:100%;}

	/* main_shortcut */
	.main_shortcut {width:100%;flex-wrap:wrap;justify-content:center;}
	.main_shortcut li {width:calc(50% - 10px);margin-bottom:20px;}
	.main_shortcut li:not(:last-of-type) {margin-right:0;}
	.main_shortcut li:nth-child(odd) {margin-right:20px;}
	.main_shortcut li a {width:auto;}

	/* main_board */
	.main_board {width:100%;}

	/* main_board > 공지사항 */
	.main_board .notice {width:58.5%;}
	.main_board .notice .swiper-slide {padding:5px;}
	.main_board .notice .swiper-slide a .date {padding:0 25px;}
	.main_board .notice .swiper-slide a .info {padding:15px 20px;width:calc(100% - 105px);}
	
	/* main_board > 그린바이오 최신 동향 */
	.main_board .trend {padding:30px 20px;width:38.5%;}
	.main_board .trend .swiper-slide a {padding:10px 5px;}
}

/* Mobile 500px ~ 768px */
@media (max-width: 768px) {
	/* default */
	.mainpage::after {position:absolute;left:0;right:0;top:60px;width:100%;height:560px;background-size:cover;background-position:center top 15%;}
	br.block {display:block;}

	/* main_src */
	.main_src strong {color:#fff;text-shadow: 0px 1px 2px rgba(0,0,0,0.4);}
	.main_src p {color:#fff;margin-bottom:250px;}

	/* main_shortcut */
	.main_shortcut li a {padding:30px;}
	.main_shortcut li:hover a .img em {width:clamp(1.5625rem, 1.2946rem + 1.1905vw, 2.1875rem);height:clamp(1.5625rem, 1.2946rem + 1.1905vw, 2.1875rem);}
	.main_shortcut li:hover a .img em i {font-size:clamp(0.875rem, 0.8214rem + 0.2381vw, 1rem);}
	.main_shortcut li a .img span {width:50px;height:50px;}
	.main_shortcut li a .img span img {width:35px;}

	/* main_board */
	.main_board {flex-direction:column;}
	.main_board .notice {width:100%;margin-bottom:40px;}
	.main_board .notice h2 {padding-left:15px;}
	.main_board .trend {width:100%;}
	.main_board .trend h2 {padding-left:10px;}
}

/* Mobile 360px ~ 500px */
@media (max-width: 500px) {
	/* default */
	.mainpage::after {height:530px;background-position:center top;}

	/* main_src */
	.main_src {margin-bottom:40px;}
	.main_src input {padding:20px;font-size:15px;width:calc(100% - 60px);}
	.main_src input::placeholder {font-size:15px;}
	.main_src button {width:60px;height:60px;}
	.main_src button i {font-size:22px;}
	.main_src button:hover i {font-size:22px;}

	/* main_board */
	.main_board .b_title {padding-bottom:15px;}

	/* main_shortcut */
	.main_shortcut li {width:calc(50% - 5px);margin-bottom:10px;}
	.main_shortcut li:nth-child(odd) {margin-right:10px;}
	.main_shortcut li a {padding:25px 22px;}

	/* main_board */
	.main_board {margin-bottom:40px;}
	.main_board .trend {padding-bottom:15px;}
	.main_board .trend .trend_swiper {margin-top:15px;}
}