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

/*******************************
 * Infomation : 야생동물 질병관리 시스템
 * FileName   : /css/newmain.css 
 * Update     : 2026.04.24_2.
********************************/

:root {
	/* Layout */	
	--wad-inner-width: 1400px;
	--ce-sub-cont-width: 1316px;
	--wad-font-color: #000;


	--ce-white: #fff;
	--main-color: #246BEB;
	--sub-color: #002b50;
	--txt-color: #222;
	--txt-sub-color: #555;	
	--ce-line-color: #dcdcdc;
	--ce-bg-color: #fff;
	--ce-subline: #d8d8d8;

	--ce-btn-main: #3456c5;
	--ce-btn-sub: #1f3a69;
	--ce-btn: #7b7b7f;
	--ce-btn-bBgE: #2a784d;

	--ce-input-color: #717171;
	
	--ce-spacer-10: 4rem;
    --ce-spacer-9: 3.6rem;
    --ce-spacer-8: 3.2rem;
    --ce-spacer-7: 2.8rem;
    --ce-spacer-6: 2.4rem;
    --ce-spacer-5: 2rem;
    --ce-spacer-4: 1.6rem;
    --ce-spacer-3: 1.2rem;
    --ce-spacer-2: 0.8rem;
    --ce-spacer-1: 0.4rem;
    --ce-spacer-0: 0;

	--ce-rd-1: .1rem;
    --ce-rd-2: .2rem;
    --ce-rd-4: .4rem;
    --ce-rd-6: .6rem;
    --ce-rd-8: .8rem;
    --ce-rd-10: 1rem;
    --ce-rd-12: 1.2rem;

	--ce-secondary-5: #EDF1F5;
    --ce-secondary-10: #CDD7E4;
    --ce-secondary-20: #B4C4D6;
    --ce-secondary-30: #99B0CB;
    --ce-secondary-40: #2A5C96;
    --ce-secondary-60: #002B5E;
    --ce-secondary-70: #002046;
    --ce-secondary-80: #00162F;
    --ce-secondary-90: #000B17;

	--ce-select-h-sm: 4rem;
    --ce-select-h-md: 4.8rem;
    --ce-select-h-lg: 5.6rem;
    --ce-select-pd-sm: 0 5.2rem 0 1.6rem;
    --ce-select-pd-md: 0 5.2rem 0 1.6rem;
    --ce-select-pd-lg: 0 5.2rem 0 1.6rem;
    --ce-select-rd-sm: .6rem;
    --ce-select-rd-md: .8rem;
    --ce-select-rd-lg: .8rem;
    --ce-select-fz-sm: 1.5rem;
    --ce-select-fz-md: 1.7rem;
    --ce-select-fz-lg: 1.9rem;
    --ce-select-rn-sm: 1.6rem;
    --ce-select-rn-md: 1.6rem;
    --ce-select-rn-lg: 1.6rem;
    --ce-select-bgs-sm: 2rem;
    --ce-select-bgs-md: 2rem;
    --ce-select-bgs-lg: 2.4rem;

	--ce-gray-5: #F8F8F8;
    --ce-gray-10: #F0F0F0;
    --ce-gray-20: #E4E4E4;
    --ce-gray-30: #D8D8D8;
    --ce-gray-40: #C6C6C6;
    --ce-gray-50: #8E8E8E;
    --ce-gray-60: #717171;
    --ce-gray-70: #555555;
    --ce-gray-80: #2D2D2D;
    --ce-gray-90: #1D1D1D;

	--ce-primary-5: #EFF5FF;
    --ce-primary-10: #D3E1FB;
    --ce-primary-20: #A7C4F7;
    --ce-primary-30: #7CA6F3;
    --ce-primary-40: #5089EF;
    --ce-primary-60: #1D56BC;
    --ce-primary-70: #16408D;
    --ce-primary-80: #0E2B5E;
    --ce-primary-90: #07152F;

    --ce-secondary-5: #EDF1F5;
    --ce-secondary-10: #CDD7E4;
    --ce-secondary-20: #B4C4D6;
    --ce-secondary-30: #99B0CB;
    --ce-secondary-40: #2A5C96;
    --ce-secondary-60: #002B5E;
    --ce-secondary-70: #002046;
    --ce-secondary-80: #00162F;
    --ce-secondary-90: #000B17;

	--ce-white: #fff;
    --ce-black: #000;
    --ce-primary: #246BEB;
    --ce-secondary: #003675;
    --ce-point: #E71825;
    --ce-danger: #EB003B;
    --ce-warning: #FFB724;
}


.inner{ position: relative; width: 1400px; margin: 0 auto;}

.main_container{ background: url("../images/newmain/main_top_bg.png") repeat-x top 0 left 0;}
.main_container *{ font-family: "Pretendard GOV";}

.main_top_contents{ position: relative;}
.main_top_contents .inner{ height: 690px; display: flex; justify-content: space-between;}

.main_slogan{ color: var(--wad-font-color); position: absolute; left: 0; top: 58px; z-index: 9;}
.main_slogan strong{ font-family: 'Gmarket Sans'; font-weight: 700; font-size: 42px; color: #012442;}
.main_slogan p{ font-size: 14px; margin-top: 2px;}

/* Left Report */
.main_report_wrap{ width: 360px; margin-top: 192px; display: flex; flex-direction: column; gap: 20px; z-index: 9;}
.mr_report_item{ width: 100%; height: 136px; border-radius: 10px; border: 1px solid #0d8c52; padding: 18px 22px 0 22px; cursor: pointer;}

.mr_report_item.box01{ background: url("../images/newmain/re_box_img01.png") no-repeat left 0 top 8px #fff;}
.mr_report_item.box02{ background: url("../images/newmain/re_box_img02.png") no-repeat left -24px top 8px #fff;}
.mr_report_item.box03{ background: url("../images/newmain/re_box_img03.png") no-repeat left -14px top 6px #fff;
}

.mr_report_item.box01:hover{ background: url("../images/newmain/re_box_img01_hover.png") no-repeat left 0 top 8px #d1ecdd;}
.mr_report_item.box02:hover{ background: url("../images/newmain/re_box_img02_hover.png") no-repeat left -24px top 8px #d1ecdd;}
.mr_report_item.box03:hover{ background: url("../images/newmain/re_box_img03_hover.png") no-repeat left -14px top 6px #d1ecdd;}

.mr_report_item .item_top{ margin-bottom: 10px; display: flex; align-items: first baseline; justify-content: space-between;}
.mr_report_item .item_top strong{ font-size: 19px; color: var(--wad-font-color);}
.mr_report_item .item_top span{ font-size: 12px; color: #555;}

.mr_report_item .item_cont{ margin-top: 10px; display: flex;}
.mr_report_item .item_cont li{ flex: 1; padding: 0 12px 0 25px;}
.mr_report_item .item_cont li:nth-child(2){ border-left: 1px solid #19ae6b;}
.mr_report_item .item_cont li .num_wrap{ font-size: 14px; color: #555; height: 32px; border-radius: 5px; background-color: #f2f5f8; display: flex; justify-content: center; align-items: first baseline;}
.mr_report_item .item_cont li .num_wrap strong{ font-size: 20px;}
.mr_report_item .item_cont li:nth-child(1) .num_wrap strong{ color: #f15c36;}
.mr_report_item .item_cont li:nth-child(2) .num_wrap strong{ color: #1d77e4;}
.mr_report_item .item_cont li p{ font-size: 15px; font-weight: 700; text-align: center; margin-top: 12px;}

/* on */
.mr_report_item.on .item_top strong{ color: #fff;}
.mr_report_item.on .item_top span{ color: #fff;}
.mr_report_item.on .item_cont li p{ color: #fff;}
.mr_report_item.on .item_cont li .num_wrap{ background-color: #fff;}
.mr_report_item.box01.on{
	background:
		url("../images/newmain/re_box_img01_on.png") no-repeat left 0 top 8px,
		linear-gradient(
			90deg,
			#017550 0%,
			#18a254 100%
	);
}

.mr_report_item.box02.on{
	background:
		url("../images/newmain/re_box_img02_on.png") no-repeat left -24px top 8px,
		linear-gradient(
			90deg,
			#017550 0%,
			#18a254 100%
	);
}
.mr_report_item.box03.on{
	background:
		url("../images/newmain/re_box_img03_on.png") no-repeat left -14px top 6px,
		linear-gradient(
			90deg,
			#017550 0%,
			#18a254 100%
	);
}

/* Right Visual */
.main_visual_wrap{ position: relative; width: 1000px; height: 640px; margin-top: 40px; background: url("../images/newmain/cloud_bg.png") no-repeat right 0 top 0;}

.main_visual_bg{}
.main_visual_bg img{}

.v_imgon{ position: absolute; z-index: 6; display: none;}
.v_imgon.img01{ left: 542px; top: 46px;} /* 야생멧돼지 ASF */
.v_imgon.img02{ left: 130px; top: 22px;} /* 야생조류 AI */
.v_imgon.img04{ left: 207px; top: 383px;} /* 야생동물 SFTS */
.v_imgon.show{ display: block;}

.vpp_pin{ position: absolute;}
.vpp_pin.vp_pin01{ left: 697px; top: 210px;} /* 야생맷대지ASF */
.vpp_pin.vp_pin02{ left: 431px; top: 50px;} /* 야생조류AI */
.vpp_pin.vp_pin03{ left: 139px; top: 266px;} /* 야생포유류AI */
.vpp_pin.vp_pin04{ left: 300px; top: 458px;} /* 야생동물SFTS */
.vpp_pin.vp_pin05{ left: 579px; top: 472px;} /* 검역 */
.vpp_pin.vp_pin06{ left: 717px; top: 329px;} /* 동물원 */

.vpp_pin.on_pump:before{ animation: point_pump 1s cubic-bezier(.76, .54, .42, .82) infinite;}
.vpp_pin.on_pump:before{ content:""; position:absolute; left: 0; top: -2px; width: 100%; height: 100%; border-radius: 50px; z-index: 0; background: rgba(189, 255, 234, 1);}
@keyframes point_pump {
    0% {
        transform: scale(0);
        transform-origin: 50% 50%;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
    }
}

.pin_tit{ font-family: 'Gmarket Sans'; font-weight: 400; font-size: 16px; color: var(--wad-font-color); text-shadow: 0 0 2px rgba(255, 255, 255, 1); position: absolute; left: 50%; top: -22px; transform: translateX(-50%);}
.pin_tit strong{ font-weight: 700;}

.btn_pin_point{ position: relative; width: 48px; height: 48px; display: inline-flex; background: url("../images/newmain/pin.png") no-repeat center; z-index: 2;}
.btn_pin_point:hover{ background: url("../images/newmain/pin_hover.png") no-repeat center;}

.btn_pin_point::before,
.btn_pin_point::after{ content: ""; position: absolute; background-color: #18a254; z-index: 1;}
.btn_pin_point::before{ width: 1px; height: 22px; left: 24px; top: 42px;}
.btn_pin_point::after{ width: 5px; height: 5px; border-radius: 5px; left: 22px; top: 61px;}

.vpp_pin.show{ z-index: 11;}
.vpp_pin.show .btn_pin_point{ background: url("../images/newmain/pin_on.png") no-repeat center; z-index: 6;}
.vpp_pin.show .btn_pin_point:hover{ background: url("../images/newmain/pin_on.png") no-repeat center;}
.vpp_pin.show .btn_pin_point::before,
.vpp_pin.show .btn_pin_point::after{ background-color: #d44c1c;}

.dim_wh{ z-index: 5; position: absolute; left:0; top: 0; width:100%; height: 690px; background-color:rgba(255, 255, 255, 0.6); opacity:1; display: none; transition: all 10s ease-in; transition-delay: 0.3s;}
.dim_wh.show{ display: block;}

.mv_tooltip{ position: absolute; border-radius: 10px; padding: 5px;
	background: linear-gradient( 90deg,
		#e66815 0%,
		#f57b2a 100%
	);
	z-index: 11;
	display: none;
}
.mv_tooltip::before{ content: ""; width: 4px; height: 35px; background-color: #e66815; position: absolute; left: 50%; top: -35px; transform: translateX(-50%);}
.mv_tooltip.tot04::before{ width: 35px; height: 4px; left: -35px; top: 50%; transform: translateY(-50%);}

.mv_tooltip.tot01{ width: 300px; left: 572px; top: 287px;} /* ASF아프리카돼지열병 */
.mv_tooltip.tot02{ width: 255px; left: 328px; top: 127px;} /* 야생조류AI */
.mv_tooltip.tot04{ width: 380px; left: 378px; top: 400px;} /* 야생동물SFTS */

.mv_tooltip.show{ display: block;}

.mv_tooltip_tit{ color: #fff; padding: 0 10px; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 18px;}
.mv_tooltip_tit strong{ font-size: 17px;}
.mv_tooltip_tit em{ font-size: 14px;}

.mv_tooltip_cont{ border-radius: 5px; background-color: #fff; padding: 15px;}
.mv_tooltip_cont .mv_txt{ font-size: 13px; font-weight: 500; word-break: keep-all; padding: 0 6px; line-height: 1.5;}

.mv_tooltip_btn_wrap{ margin-top: 14px; display: flex; gap: 5px;}
.mv_tooltip_btn_wrap a{ flex: 1; font-size: 13px; font-weight: 700; border-radius: 4px; height: 30px; display: inline-flex; justify-content: center; align-items: center;}
.mv_tooltip_btn_wrap .btn_01{ color: #fff; background-color: #3b414d;}
.mv_tooltip_btn_wrap .btn_02{ color: #3b414d; background-color: #fff; border: 1px solid #3b414d;}

@media (max-width: 768px) {
	.dim_wh.show{ top: 80px;}
}

/* 야생동물질병관리시스템 정보 : 공지사항, 자료실 */
.main_bottom_contents{ margin-top: 10px; margin-bottom: 60px;}
.main_bottom_contents .inner{ display: flex; gap: 40px;}

.mainbc_top_wrap{ margin-bottom: 20px;}
.mainbc_top_wrap strong{ position: relative; font-family: 'Gmarket Sans'; font-weight: 700; font-size: 24px; color: var(--wad-font-color); background-color: #fff; padding-right: 20px; z-index: 2;}
.mainbc_top_wrap strong span{ font-family: 'Gmarket Sans'; font-weight: 700; font-size: 24px; color: #e66815;}

.wad_board_wrap{ position: relative; width: 950px;}
.main_bbs_wrap{ display: flex; gap: 40px;}
.main_bbs_wrap > div{ flex: 1;}

.wad_board_wrap .mainbc_top_wrap::before{ content: ""; background-color: #e5eaf0; width: 100%; height: 4px; position: absolute; top: 12px; z-index: 1;}

.bbs_noti_top{ display: flex; justify-content: space-between;}

.main_bbs_tab{ margin-bottom: 18px; display: flex;}
.main_bbs_tab li{}
.main_bbs_tab li button{ height: 46px; padding: 0 22px; border-radius: 10px 10px 0 0; font-size: 17px; color: #555;}
.main_bbs_tab li.on button{ background-color: #ebf1f9; color: #012442; font-weight: 600;}

.btn_bbs_more{ position: relative; height: 36px; width: 36px; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; display: inline-flex;}
.btn_bbs_more::before,
.btn_bbs_more::after{ content: ""; width: 12px; height: 2px; background-color: #000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); transition: all 0.3s ease-in;}
.btn_bbs_more::after{ transform: translate(-50%, -50%) rotate(90deg)}

.btn_bbs_more:hover:before{ transform: translate(-50%, -50%) rotate(180deg);}
.btn_bbs_more:hover::after{ transform: translate(-50%, -50%) rotate(270deg);}

.main_bbs_cont ul{ display: none;}
.main_bbs_cont .bbs_cont01{ display: block;}

.main_bbs_cont ul li{ width: 100%; display: flex; gap: 10px; align-items: center;}
.main_bbs_cont ul li:not(:first-child){ margin-top: 10px;}
.main_bbs_cont ul li span{ width: 52px; height: 28px; border-radius: 28px; font-size: 15px; display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; background-color: #edf5ff; color: #355fca;}
.main_bbs_cont ul li a{ font-size: 15px; color: #000; width: calc(460px - 62px); padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block;}
.main_bbs_cont ul li a:hover{ text-decoration: underline !important;}

.main_bbs_cont ul:nth-child(2) li span{ background-color: #e6f6ea; color: #078516;}

.disease_bbs_wrap{}
.disea_top{ position: relative; height: 105px; padding-left: 32px; border-radius: 10px 10px 0 0; background: url("../images/newmain/disease_bg.png") no-repeat top -37px right -2px #12a1ce; margin-bottom: 3px; display: flex; flex-direction: column; justify-content: center;}
.disea_top strong{ color: #fefefe; font-size: 24px; font-family: 'Gmarket Sans';}
.disea_top p{ color: #c0e4f8; font-size: 14px; margin-top: 3px;}
.disea_top .btn_bbs_more{ position: absolute; right: 20px; bottom: 20px;}

.disease_list{}
.disease_list li{ height: 50px; border-bottom: 1px solid #ddd; padding: 0 10px; display: flex; align-items: center;}
.disease_list li a{ position: relative; font-size: 15px; color: #000; width: 420px; padding-left: 11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display: block;}
.disease_list li a::before{ content: ""; width: 3px; height: 3px; border-radius: 3px; background-color: #012442; position: absolute; left: 0; top: 8px;}
.disease_list li a:hover{ text-decoration: underline !important;}

/******************** 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: auto;
    padding: var(--ce-spacer-3);    
    background-color: var(--ce-white);
}
.swiper-indicator .swiper-pagination.swiper-pagination-fraction.swiper-pagination-bg{
    font-weight: 700;
    padding: var(--ce-spacer-3);
    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: 12px;
}

.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{
    font-weight: 700; font-size: 24px;
}
.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: 34px;
    height: 34px;
    border-radius: 100%;
    border: 1px solid #ddd;
    background-color: #fff;
}
[class^=swiper-button-]::after{
    content: "";
    font-size: 0 !important;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
}

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

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

.swiper-button-next::after,
.swiper-button-prev::after{
    background-position: center;
    background-size: contain;
}
.swiper-button-stop:hover,
.swiper-button-play:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: #edf5ff;
}
.swiper-button-next:active,
.swiper-button-prev:active{
    
}
.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/newmain/ico_swiper_next.svg");
}
.swiper-button-next:active::after{
    background-image: url("../images/newmain/ico_swiper_next_wh.svg");
}
.swiper-button-next.swiper-button-disabled::after{
    background-image: url("../images/newmain/ico_swiper_next_gray.svg");
}
.swiper-button-prev{
    left: 0;
}
.swiper-button-prev::after{
    background-image: url("../images/newmain/ico_swiper_prev.svg");
}
.swiper-button-prev:active::after{
    background-image: url("../images/newmain/ico_swiper_prev_wh.svg");
}
.swiper-button-prev.swiper-button-disabled::after{
    background-image: url("../images/newmain/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);
}

.wad_banner_wrap{ position: relative;}
.disease_banner_wrap{ flex: 1;}

/* 행동요령 */
.wad_banner_swiper{ width: 510px; height:208px; background: url("../images/newmain/swipe_bg.png") no-repeat left 0 top 0; border-radius: 10px;}

.wad_banner_swiper ul li{
	display:flex;
	height:100%;
    position: relative;
}

/* 기본 상태 */
.wad_banner_swiper .txt_box{
	font-size: 15px;
    line-height: 1.5;
	color:#fff;
	font-weight:700;
	opacity: 0;
    position: absolute;
    left: 30px;
    top: 68px;
}

.wad_banner_swiper .img_box{
	display:block;
	position: absolute;
    left: 176px;
    padding-top: 24px;
}

.wad_banner_swiper .img_box img{
	position:relative;
	left: 0; /* 시작 위치 */
}

/* active 슬라이드일 때 */
.swiper-slide-active .txt_box{
	animation: txtFade 3.5s ease forwards;
}

.swiper-slide-active .img_box img{
	animation: imgRolling 1.5s ease forwards;
}

@keyframes txtFade{
	0%{
		opacity:0;
		transform:translateY(10px);
	}
	20%{
		opacity:1;
		transform:translateY(0);
	}
	70%{
		opacity:1;
	}
	100%{
		opacity:1;
	}
}

@keyframes imgRolling{
	0%{
		transform:translateX(60px);
	}
	100%{
		transform:translateX(0);
	}
}

.wad_banner_wrap .swiper-indicator{ position: absolute; left: 246px; top: -58px;}
.disease_banner_wrap .mainbc_top_wrap{ letter-spacing: -1px;}
.disease_banner_wrap .swiper-pagination{ position: absolute; left: 30px; top: 23px; width: auto; height: auto; color: #fff; font-size: 14px; align-items: baseline;}