@charset "utf-8";

/* 슬라이드 */
.splide__track {
	height: 100%;
} 
.mainSlideCon {
	height: 480px;
	gap: 30px;
	margin-top: 45px;
	display: flex;
}
.visualSlide {
	width: calc(100% - 460px);
	border-radius: 16px;
	word-break: keep-all;
	position: relative;
	overflow: hidden;
	background: #ddd;
}
.visualSlide ul.splide__list > li {
	max-width: 100%;
    height: 100%;
	padding: 0 55px;
	border-radius: 16px;
	display: flex;
    align-items: center;
}
.visualSlide .slide {
	height: 45%;
	position: relative;
}
.visualSlide .slide strong {
    font-size: 2.111rem;
    font-weight: 700;
	line-height: 1.2;
	color: #2D2B2B;
    font-family: "SEBANG-Gothic";
}
.visualSlide .slide p {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 10px;
    color: #2D2B2B;
}
.visualSlide .slide b {
	font-size: 1.111rem;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 30px;
	display: block;
}
.visualSlide .slide-01 .visual_haccp {
	position: absolute;
	left: 0;
	top: -60px;
	width: 215px;
}
.visualSlide .slide-02 .slide strong,
.visualSlide .slide-02 .slide p,
.visualSlide .slide-02 .slide b,
.visualSlide .slide-03 .slide strong,
.visualSlide .slide-03 .slide p {
	color: #fff;
}
.visualSlide .slide-01 {
	background: url('/sf/res/images/main/main_visual_01.png') no-repeat center center;
	background-size: cover;
}
.visualSlide .slide-02 {
	background: url('/sf/res/images/main/main_visual_02.png') no-repeat center center;
	background-size: cover;
}
.visualSlide .slide-03 {
	background: url('/sf/res/images/main/main_visual_03.png') no-repeat center center;
	background-size: cover;
}
.visualSlide .slide-04 {
	background: url('/sf/res/images/main/main_visual_04.png') no-repeat center center;
	background-size: cover;
}
.visualSlide .splide__arrows {
	width: 128px;
    height: 32px;
	bottom: 40px;
    left: 55px;
    border-radius: 100px;
    z-index: 100;
    background: rgba(1, 19, 65, 0.80);
    position: absolute;
}
.visualSlide .splide__arrows svg {
	display: none;
}
.visualSlide .splide__arrow {
	opacity: 1;
	width: 20px;
	height: 20px;
	background: none;
}
.visualSlide .splide__arrow::before {
	content: '';
    width: 20px;
    height: 20px;
}
.visualSlide .splide__arrow.splide__arrow--prev::before {
	background: url('/sf/res/images/main/slide_arrow_icon.png');
}
.visualSlide .splide__arrow.splide__arrow--next::before {
	background: url('/sf/res/images/main/slide_arrow_icon.png');
	transform: rotate(180deg);
}
.visualSlide .slide-counter {
    font-size: 20px;
    bottom: 45px;
    left: 102px;
    z-index: 1000;
	font-size: 0.994rem;
	font-weight: 600;
	line-height: 1.3;
	position: absolute;
    color: #fff;
}
.visualSlide .slide-pause {
    font-size: 20px;
    bottom: 40px;
    left: 198px;
    z-index: 100;	
    color: #fff;
	position: absolute;
}
.visualSlide .slide-pause .pauseBtn {
    width: 32px;
    height: 32px;
    border-radius: 50px;
	display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
    background: rgba(1, 19, 65, 0.80);
	color: #fff;
}
.visualSlide .slide-pause .pauseBtn::before {
	content: '';
	width: 100%;
    height: 100%;
    position: absolute;
}
.visualSlide .slide-pause .pauseBtn.pause::before {
	background: url('/sf/res/images/main/slide_pause_icon.png');
}
.visualSlide .slide-pause .pauseBtn.play::before {
	background: url('/sf/res/images/main/slide_play_icon.png');
}

.imgSlide {
	flex: 1;
	border-radius: 16px;
	overflow: hidden;
	background: #ddd;
}
.imgSlide .slide img {
	max-width: 100%;
}
.imgSlide .splide__pagination__page {
	height: 10px;
	width: 10px;
	opacity: .6;
	background: #999;
}
.imgSlide .splide__pagination__page.is-active {
	opacity: 1;
	transform: unset;
	background: #5EBEED;
}

/* 타이틀 공통 */
.titleBox {
	line-height: normal;
	word-break: keep-all;
}
.titleBox .tag {
	padding: 6px 15px;
	font-size: 0.778rem;
	font-weight: 600;
	border-radius: 100px;
	border: 1px solid #E4E6E9;
	text-align: center;
	display: inline-block;
	color: #8F98AA;
}
.titleBox h2 {
	margin-top: 15px;
	font-size: 1.777rem;
	font-weight: 700;
	color: #103491;
	font-family: "SEBANG-Gothic";
}
.titleBox p {
	margin-top: 8px;
	font-size: 1.111rem;
	font-weight: 500;
	color: #666;
}

/* 공급기업 역량 */
.contentWrap {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.contentWrap .titleBox {
	text-align: center;
}
.certifiedList {
	margin-bottom: 50px;
	margin-top: 64px;
	max-width: 1160px;
	/* min-width: 100%; */
}
.certifiedList > ul {
	gap: 15px;
	display: flex;
}
.certifiedList > ul > li {
	flex: 1;
	position: relative;
}
.certifiedList .iconBox {
	width: 67px;
	height: 67px;
    left: 50%;
    top: -33.5px;
    border-radius: 50%;
    transform: translate(-50%, 0);
	display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EDEEF0;
	position: absolute;
    box-shadow: 0px 2px 8px rgba(99, 99, 99, 0.20);
    background: #fff;
}
.certifiedList .iconBox img {
	max-width: 41px;
}
.certifiedList .contentBox {
    border-radius: 16px;
    padding: 50px 12px 12px;
    display: flex;
    flex-direction: column;
    background: #EDEEF0;
}
.certifiedList .contentBox span {
	font-size: 1.056rem;
	font-weight: 600;
	text-align: center;
	line-height: normal;
	color: #111;
}
.certifiedList .ciBox {
	margin-top: 13px;
	padding: 12px 15px;
    border-radius: 10px;
    background: #FFF;
	text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.certifiedList .ciBox img {
	height: 37px;
	max-width: 100%;
	object-fit: contain;
}

/* 주요고객사 */
.mainBg-client {
	background: linear-gradient(180deg, #FFF 0%, #EBF6FF 100%);
}
.clientList {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 50px;
}
.clientList ul {
    padding: 0;
    margin: 0;
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}
.clientList li {
    width: calc(20% - 16px);
	border-radius: 10px;
    padding: 20px;
	height: 100px;
    border: 1px solid #D9D9D9;
    text-align: center;
	display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
}
.clientList li:nth-child(n+11) {
	display: none;
}
.clientList.expanded li {
	display: flex;
}
.clientList li img {
	max-width: 100%;
}
.contentWrap button.toggleBtn {
	margin-bottom: 50px;
	border: 2px solid #C4D3F9;
}
.contentWrap button.toggleBtn span {
	color: #103491;
}

/* 뉴스 & 센서 */
.newsContent {
	gap: 20px;
	display: flex;
}
.newsContent .newsBox {
	flex: 1;
	max-width: calc(50% - 10px);
	border-radius: 16px;
	padding: 30px;
	position: relative;
    border: 1px solid #E9E9E9;
    box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.20);
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.newsContent .newsBox .titleBox h2 {
	margin-top: 0;
}
.newsContent .newsBox ul {
	margin-top: 30px;
	gap: 20px;
	display: flex;
}
.newsContent .newsBox ul li {
	flex: 1;
	max-width: calc(50% - 10px);
	font-size: 0;
}
.newsContent .newsBox ul li:first-child {
	
}
.newsContent .newsBox ul li:last-child {
	
}
.newsContent .newsBox ul li .thumbnailCon {
	border-radius: 15px;
	overflow: hidden;
    border: 1px solid #EEE;
}
.newsContent .newsBox ul li img {
	max-width: 100%;
    min-width: 100%;
    max-height: 223px;
    min-height: 223px;
    object-fit: cover;
}
.newsContent .newsBox ul li span {
	font-size: 0.889rem;
	font-weight: 500;
	margin-top: 10px;
	/* width: 320px; */
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis; 
	display: block;
	line-height: normal;
	color: #111;
}
.newsContent .newsBox ul li em {
	font-size: 0.778rem;
	font-weight: 400;
	margin-top: 3px;
	display: block;
	line-height: normal;
	color: rgba(0, 0, 0, 0.30);
}
.newsContent .newsBox .moreViewBtn {
	top: 30px;
    right: 30px;
}

/* 문의 */
.mainBg-inquiry {
	background: url('/sf/res/images/main/inquiry_bg.png') no-repeat center center;
	background-size: cover;
}
.inquiryCon {
	padding: 84px 0;
	word-break: keep-all;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.inquiryCon strong {
    font-size: 2rem;
    font-weight: 700;
    line-height: normal;
	text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	color: #FFF;
    font-family: "SEBANG-Gothic";
}
.inquiryCon p {
	margin-bottom: 40px;
    font-size: 1.222rem;
    font-weight: 500;
	text-align: center;
    line-height: normal;
	color: #FFF;
}

/* ================ */

button.btn,
a.btn {
	width: 168px;
    padding: 14px 0;
	border-radius: 200px;
	display: flex;
	justify-content: center;
	/* border: 2px solid #C4D3F9; */
	border: 2px solid #fff;
	background: transparent;
}
button.btn span,
a.btn span {
	gap: 7px;
	font-size: 1.222rem;
	font-weight: 500;
	line-height: 1.5;
	display: flex;
    align-items: center;
	/* color: #103491; */
	color: #fff;
}
button.toggleBtn span::after {
	content: '';
	width: 26px;
    height: 26px;
    display: inline-block;
	background: url('/sf/res/images/common/btn_arrow_icon.png');
    background-size: cover;
}
button.toggleBtn.expanded span::after {
	transform: rotate(180deg);
}

.moreViewBtn {
    width: 38px;
    border-radius: 5px;
    height: 38px;
	position: absolute;
	display: flex;
    justify-content: center;
    align-items: center;
    background: #EDEEF0;
}
.moreViewBtn::before {
	content: '';
    width: 2px;
    height: 20px;
    position: absolute;
    background: #58514E;
}
.moreViewBtn::after {
	content: '';
    width: 20px;
    height: 2px;
    position: absolute;
    background: #58514E;
}

/* 반응형 */
@media(max-width: 1280px) {
	.mainSlideCon {height: auto;}
	.visualSlide {width: 65%;}
	.imgSlide .slide {height: 100%;}
	.newsContent .newsBox ul li img {max-height: 183px;min-height: 183px;}
}
@media(max-width: 992px) {
	.mainSlideCon {gap: 20px; margin-top: 30px;}
	.visualSlide ul.splide__list > li {padding: 0 20px;}
	.visualSlide .slide {height: 70%;}
	.visualSlide .slide strong {font-size: 1.722rem;}
	.visualSlide .slide b {margin-top: 20px;}
	.visualSlide .splide__arrows {left: 20px; bottom: 20px;}
	.visualSlide .slide-counter {left: 69px; bottom: 26px;}
	.visualSlide .slide-pause {left: 158px; bottom: 20px;}
	.visualSlide .slide-01 .visual_haccp {
		width: 120px;
		top: -35px;
	}
	.newsContent .newsBox {padding: 20px;}
	.newsContent .newsBox .moreViewBtn {top: 20px; right: 20px;}
	.newsContent .newsBox ul li img {max-height: 143px;min-height: 143px;}
}
@media(max-width: 900px) {
	.mainSlideCon { margin-top: 20px; }
	.certifiedList { margin-top: 50px; }
	.certifiedList > ul { row-gap: 33px; flex-wrap: wrap; justify-content: center; }
	.certifiedList > ul > li { flex: unset; max-width: 207px; min-width: 207px; }
	.certifiedList .iconBox { width: 50px; height: 50px; top: -25px; }
	.certifiedList .iconBox img { width: 30px; }
	.certifiedList .contentBox { padding: 34px 12px 12px; }
	.certifiedList .ciBox img { height: 34px; }
	.clientList li { width: calc(25% - 15px); }
	.clientList li:nth-child(n+9) { display: none; }
	.clientList.expanded li { display: flex; }
	.newsContent .newsBox ul { margin-top: 20px; gap: 10px; }
	.newsContent .newsBox ul li { max-width: calc(50% - 5px); }
	.moreViewBtn { width: 28px; height: 28px; }
	.moreViewBtn::before { width: 1px; height: 15px; }
	.moreViewBtn::after { width: 15px; height: 1px; }
}
@media(max-width: 768px) {
	.visualSlide { width: 50%; }
	.visualSlide .slide strong br { display: none; }
	.visualSlide .slide p br { display: none; }
	.clientList ul { gap: 15px; }
	.clientList li { width: calc(25% - 11.25px); }
	.newsContent .newsBox ul li { max-width: 100%; }
	.newsContent .newsBox ul li:last-child { display: none; }
	.newsContent .newsBox ul li img {max-height: 223px;min-height: 223px;}
	button.btn, a.btn { width: 148px; padding: 8px 0; }
	button.btn span, a.btn span { line-height: 1; }
	button.toggleBtn span::after { width: 20px;height: 20px;}
}
@media(max-width: 680px) {
	.visualSlide .slide-counter {bottom: 27px;}	
}
@media(max-width: 600px) {
	.mainSlideCon {flex-direction: column;}
	.visualSlide {width: 100%; height: 310px;}
	.visualSlide .slide strong br,
	.visualSlide .slide p br {display: block;}
	.imgSlide .slide img {width: 100%;}
	.clientList li {width: calc(33.3333% - 10px);}
	.clientList li:nth-child(n+7) { display: none; }
	.clientList.expanded li { display: flex; }
	.newsContent .newsBox {padding: 15px;}
	.newsContent .newsBox .moreViewBtn {top: 15px; right: 15px;}
	.newsContent .newsBox ul li img {max-height: 163px;min-height: 163px;}
	.inquiryCon {padding: 50px 0;}
}
@media(max-width: 480px) {
	.visualSlide {height: 290px;}
	.visualSlide .slide {height: 70%;}
	.visualSlide .slide strong br,
	.visualSlide .slide p br {display: none;}
	.certifiedList > ul {justify-content: space-between;}
	.certifiedList > ul > li {width: calc(50% - 7.5px); max-width: unset; min-width: unset;}
	.clientList li {width: calc(50% - 7.5px); padding: 20px 10px; height: 80px;}
	.clientList li img {max-height: 40px;}
	.newsContent {flex-direction: column;}
	.newsContent .newsBox {max-width: 100%;}
	.newsContent .newsBox ul li img {max-height: 223px;min-height: 223px;}
}
@media(max-width: 400px) {
	.certifiedList > ul > li {width: calc(100%);}
}