@charset "utf-8";
@import "mob_layout.css";
@import "mob_layout-add.css";

/*
*
* 식약처 단독사업건 css분리작업 - 켐아이넷 미작업본
* main.css
*
*/

/* for MOB s */
@media (max-width:768px) {
	#header .logo {
		width: 220px;
	}

	#header .logo>a {
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
}

@media (max-width:420px) {
	#header .logo {
		width: 190px;
	}
}

@media (max-width:360px) {
	#header .logo {
		width: 170px;
	}
}

@media (max-width:340px) {
	#header .logo {
		width: 150px;
	}
}
/* for MOB e */

/* for MOB s */
.main_container {
	min-width: unset;
}
.main_container:before {
	/* content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: #f4ead9;
	width: 100%;
	height: 570px;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px */
}
/* for MOB e */

.main_container:after {
	/* for MOB s */
	border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
	/* for MOB e */	  
	z-index: -1; /* 20250804 */
}
#content {
	/* for MOB s */
	/* z-index: 50; */
	z-index:unset;
	width: 100%;
	padding: 0 24px;
	padding-top:500px;
	box-sizing: border-box;
	/* for MOB e */
}

/* for MOB s */
.main_search .btn:hover {
	background-color: transparent;
}
/* for MOB e */

.main_search_keyword {
	right: 24px;   	
}
.main_search_keyword .keyword_list li > *{height:46px;}
.main_search_keyword .keyword_list li > * span{font-size:16px;}
.main_search_keyword .keyword_tab a{font-size:16px;}
.keyword_date span{font-size:16px;}

.area_bottom {
	padding: 0;
}

/* for MOB s */
.notice_list .bx-wrapper .bx-wrapper {
	width: 100%;
}
/* for MOB e */

.info {
	flex-wrap: wrap;
	gap: 20px 0;
	padding: 0 20px;
}

.info_left {
	width: 470px;
	padding: 0;
}

.main_container:before{display:none;}
.main_container:after{background-color:#f4ead9;}

@media screen and (min-width:1600px) {
	#content {
		max-width: 1560px !important;
	}
}

/* for MOB s */
@media (max-width: 1400px) {
	.main_container:after {
		height: 500px;
	}

	.notice_list .bx-wrapper {
		width: calc(100% - 461px);
	}
}

@media (max-width: 1320px) {
	#content {
		padding-top: 400px;
	}

	.main_container:before,
	.main_container:after {
		height: 400px;
	}

	.main_search_group {
		left:60px;
		width: 60%;
	}
	.main_search{width:100%;}
	.main_search .search_info{bottom:auto; top:-40px;}

	.main_search_keyword {
		top: 84.25px;
		height: 386.75px;
	}
}

@media (max-width: 1200px) {
	#content {
		padding-top: 220px;
	}

	.main_search_keyword {
		position: relative;
		width: 100%;
		top: unset;
		right: unset;
		height: auto;
		padding-bottom: 20px;
	}

	.keyword_list_area .box_view ul,
	.keyword_list_area .box_view.active {
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.main_search_group {
		width: 100%;
		position: relative;
		top: unset;
		left: unset;
		margin-bottom: 20px;
	}

	.area_bottom.notice {
		width: 100%;
		padding: 0;
	}

	.notice_list p.title {
		text-align: left;
		width: 80px;
	}

	.main_container:before,
	.main_container:after {
		height: 500px;
	}
}

@media (max-width: 768px) {
	#content {
		padding-top: 160px;
	}

	.main_container:before,
	.main_container:after {
		height: 300px;
	}

	.main_container:after {
		background-size: 200%;
	}

	.notice_list {
		flex-wrap: wrap;
		height: unset;
		padding-top: 20px;
	}

	.notice_list p.title {
		order: 1;
		width: calc(100% - 251px);
		line-height: normal;
	}

	.notice_list>.bx-wrapper {
		width: 100%;
		order: 3;
		margin-right: 0;
	}

	.notice_list .bx-wrapper:after {
		display: none;
	}

	.bx-controls-auto {
		order: 2;
		line-height: normal;
	}

	.notice_list .notice_more:before {
		top: 7px;
	}

	.notice_list .notice_more:after {
		top: 11px;
	}

	.info_left {
		width: 100% /* for MOB */;
	}

	.info_left h2 {
		word-break: keep-all;
	}

	.main_search input[type="text"] {
		font-size: 16px;
		padding-left: 50px;
		padding-right: 50px;
	}

	.main_search {
		height: 55px;
	}

	.main_search:before {
		left: 20px;
	}

	.main_search .btn {
		width: 20px;
		height: 20px;
		background-size: contain;
		right: 23px;
	}
}

@media (max-width: 480px) {
	.notice_list {
		padding-bottom: 20px;
	}

	.notice_list p.title {
		width: 100%;
		margin-bottom: 10px;
	}

	.notice_list .bx-viewport li a {
		flex-wrap: wrap;
		gap: 5px;
	}

	.notice_list .bx-viewport li a span.subject {
		width: 100%;
		line-height: normal;
	}

	.bx-controls-auto {
		width: 100%;
		justify-content: flex-end;
		order: 3;
		margin-top: 20px;
	}

	.main_search_keyword {
		padding: 20px 18px 18px 18px;
	}

	.main_search_keyword p {
		text-align: center;
	}

	.main_search_keyword .keyword_tab {
		gap: 10px;
	}

	.main_search_keyword .keyword_tab li {
		flex: 1;
	}

	.main_search_keyword .keyword_tab li a {
		width: 100%;
	}

	.main_container:after {
		background-size: 260%;
	}
}
/* for MOB e */

/* for MOB s */
.area_bottom.link{padding-right:30px;}

@media (max-width: 1400px) {
	.area_bottom.link {
		padding: 30px 20px;
	}
}
/* for MOB e */

.link .link_menu ul {
	width: 300px /* for MOB */;
}

@media screen and (min-width:1600px) {
	.link div .link_visual {
		padding-left: 480px; /*09.26수정*/;
	}
}

@media screen and (max-width:1600px) {
	.link .link_quick.typeA .link_visual,
	.link .link_quick.typeB .link_visual,
	.link .link_quick.typeC .link_visual,
	.link .link_quick.typeD .link_visual {
		background-position: right -500px bottom 0;
	}

	.link div .link_visual {
		padding-left: 50px;
		padding-right: 350px;
	}
}

@media (max-width:1434px) {
	.area_bottom.link {
		padding: 30px;
	}

	.link .link_btn_wrap {
		display: flex;
		position: relative;
	}

	.link>.link_quick {
		height: unset;
		gap: 20px;
	}

	.link div .link_visual {
		margin-left: 0;
		padding-bottom: 40px;
		min-height: 287px;
		padding-right: 200px;
	}

	.link .link_quick.typeA .link_visual,
	.link .link_quick.typeB .link_visual,
	.link .link_quick.typeC .link_visual,
	.link .link_quick.typeD .link_visual {
		background-size: 500px;
		background-position: right -280px bottom 0;
	}

	.link div .link_visual h3 {
		word-break: keep-all;
	}
}

@media (max-width:1200px) {
	.link div .link_visual {
		padding-right: 60px;
	}

	.link .link_quick.typeA .link_visual,
	.link .link_quick.typeB .link_visual,
	.link .link_quick.typeC .link_visual,
	.link .link_quick.typeD .link_visual {
		background: #fff;
	}

	/* .link div .link_visual:before {
		content: '';
		width: 90px;
		height: 90px;
		border-radius: 90px;
		border: 4px solid #ebf1ff;
		background: url(../../images/main/img_subvisual_a.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 230px;
		position: absolute;
		right: 30px;
		top: 20px;
	}

	.link .link_quick.typeA .link_visual:before {
		background: url(../../images/main/img_subvisual_a.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 210px;
	}

	.link .link_quick.typeB .link_visual:before {
		background: url(../../images/main/img_subvisual_b.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 220px;
	}

	.link .link_quick.typeC .link_visual:before {
		background: url(../../images/main/img_subvisual_c.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 220px;
	} */
}

@media (max-width:1056px) {
	.link_quick {
		flex-wrap: wrap;
	}

	.link div .link_visual {
		padding-right: 250px;
		padding-left: 30px;
		background-size: 500px;
	}

	.link .link_quick.typeA .link_visual {
		background: url(../../images/main/img_subvisual_a.png) no-repeat #fff;
		background-size: 500px;
		background-position: right -280px bottom 0;
	}

	.link .link_quick.typeB .link_visual {
		background: url(../../images/main/img_subvisual_b.png) no-repeat #fff;
		background-size: 500px;
		background-position: right -280px bottom 0;
	}

	.link .link_quick.typeC .link_visual {
		background: url(../../images/main/img_subvisual_c.png) no-repeat #fff;
		background-size: 500px;
		background-position: right -280px bottom 0;
	}
	
	.link .link_quick.typeD .link_visual {
		background: url(../../images/main/img_subvisual_d.png) no-repeat #fff;
		background-size: 500px;
		background-position: right -280px bottom 0;
	}	

	.link .link_menu {
		width: 100%;
	}

	.link .link_menu ul li a em {
		word-break: keep-all;
	}

	.link .link_menu ul {
		width: 100%;
		flex-wrap: nowrap;
		gap: 24px;
		height: fit-content;
	}

	.link .link_menu ul li {
		width: calc((100% - 72px) / 4);
	}
}

@media (max-width:640px) {
	.link .link_btn_wrap {
		flex-wrap: wrap;
	}

	.link .tab_btn.on,
	.link .tab_btn:hover,
	.link .link_btn_wrap li {
		width: 100%;
		box-sizing: border-box;
	}

	.area_bottom.link {
		padding-bottom: 50px;
	}

	.link>.link_quick {
		gap: 40px;
	}

	.link .link_menu ul {
		flex-wrap: wrap;
		gap: 16px 24px;
	}

	.link .link_menu ul li {
		width: calc((100% - 24px) / 2)
	}

	.link div .link_visual {
		padding-right: 30px;
		padding-top: 280px;
		position: relative;
	}

	.link .link_quick.typeA .link_visual {
		padding-top: 280px;
	}

	.link .link_quick.typeA .link_visual,
	.link .link_quick.typeB .link_visual,
	.link .link_quick.typeC .link_visual,
	.link .link_quick.typeD .link_visual {
		background: #fff;
	}

	.link div .link_visual:before {
		content: '';
		width: 200px;
		height: 200px;
		border-radius: 200px;
		border: 4px solid #ebf1ff;
		background: url(../../images/main/img_subvisual_a.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 500px;
		position: absolute;
		left: 50%;
		top: 40px;
		transform: translateX(-50%);
	}

	.link .link_quick.typeA .link_visual:before {
		background: url(../../images/main/img_subvisual_a.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 460px;
	}

	.link .link_quick.typeB .link_visual:before {
		background: url(../../images/main/img_subvisual_b.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 500px;
	}

	.link .link_quick.typeC .link_visual:before {
		background: url(../../images/main/img_subvisual_c.png) no-repeat #fff;
		background-position: left bottom;
		background-size: 500px;
	}
}

@media (max-width:430px) {
	.area_bottom.link {
        padding: 20px;
		padding-bottom: 30px;
    }

	.link>.link_quick {
        gap: 30px;
    }

	.link .link_menu ul {
		gap: 16px;
	}

	.link div .link_visual:before {
		width: 150px;
		height: 150px;
	}

	.link div .link_visual {
		padding-top: 210px;
	}

	.link .link_quick.typeA .link_visual {
		padding-top: 210px;
	}

	.link .link_quick.typeA .link_visual:before,
	.link .link_quick.typeB .link_visual:before,
	.link .link_quick.typeC .link_visual:before,
	.link .link_quick.typeD .link_visual:before {
		background-size: 350px;
		top: 30px;
	}
}

@media (max-width:360px) {
	.link .link_menu ul li {
	}
}
/* for MOB e */