@charset "UTF-8";
/*@import url(/kor/css/main.css)*/

/*-------------------------------------------------
title       :메인
Create date :2023-01-09
-------------------------------------------------*/

/* 공통 */
.section .group {width:calc(100% - 4rem); max-width:140rem; margin:0 auto; display:flex; flex-wrap:wrap; position:relative}
.section div > .title {color:#000; display:block; font-size:3rem; font-family:'Pretendard'; font-weight:700; line-height:1.2; margin-bottom:4rem}
.section div > .title .txt {color:#555; display:block; font-size:1.6rem; font-family:'Pretendard'; font-weight:normal; line-height:1.4; margin-top:1rem; word-break:keep-all}

.section .control_box {display:none}
.section .control_box .controller > * {border:2px solid #9bb1a8; border-radius:100%; color:#9bb1a8; display:inline-block; font-size:2.4rem; width:4.5rem; height:4.5rem; line-height:4.5rem; overflow:hidden; text-align:center; vertical-align:top; transition:all .3s}
.section .control_box .controller > *:before {color:#9bb1a8; display:block; font-size:2.4rem; width:100%; height:100%; line-height:inherit; transition:all .3s}
.section .control_box .controller > .play:before {font-size:2rem}
.section .control_box .controller > .stop:before {font-size:2rem}
.section .control_box .controller > *:hover {border-color:#527f6d; background-color:#527f6d; color:#fff}
.section .control_box .controller > *:hover:before {color:#fff}

/*모달팝업*/
#issue {display:none}

/*** 섹션0 ***/
/* visual */
#section0 .visual {position:relative; height:92rem}
#section0 .visual .list {height:100%;}
#section0 .visual .list div {height:100%}
#section0 .visual .list .item {width: 100%; padding-top: 48%; display: inline-block; position: relative}
#section0 .visual .list .img {position: absolute; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover;  background-position:65%}
#section0 .visual .list .slick-current .img {animation-name:img; animation-duration:5s}

#section0 .visual .desc {height:auto !important; text-align: center; position: absolute; top:40%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 140rem; color: #fff;  line-height: 1.2; z-index:10}
#section0 .visual .desc .tit {display:block; font-size:6rem; font-weight:200; word-break:keep-all}
#section0 .visual .desc .txt {font-size:7rem; font-weight:400; word-break:keep-all}
#section0 .visual .desc .txt span {font-weight:600}

#section0 .visual .icon-box {width:100%; height:100%; position:absolute; left:0; bottom:0; padding-top:15rem}
#section0 .visual .icon-box ul {display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-around; height:100%}
#section0 .visual .icon-box ul li {position:relative; flex:1 1; border-left:1px solid rgb(255 255 255 / 10%); height:100%}
#section0 .visual .icon-box ul li a {width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:end; justify-content:center; padding-bottom:14.3rem; color:#fff}
#section0 .visual .icon-box ul li a .txt {font-size:2rem; text-align:center; line-height:1.3}
#section0 .visual .icon-box ul li a .txt i {display:block; margin-bottom:1rem}
#section0 .visual .icon-box ul li a .txt-on {display:none}

/*visual-hover*/

#section0 .visual .icon-box .item01:hover {background-image:url('/bkri/img/main/visual-on07.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item02:hover {background-image:url('/bkri/img/main/visual-on01.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item03:hover {background-image:url('/bkri/img/main/visual-on02.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item04:hover {background-image:url('/bkri/img/main/visual-on03.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item05:hover {background-image:url('/bkri/img/main/visual-on04.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item06:hover {background-image:url('/bkri/img/main/visual-on05.jpg'); background-repeat: no-repeat}
#section0 .visual .icon-box .item07:hover {background-image:url('/bkri/img/main/visual-on06.jpg'); background-repeat: no-repeat}

#section0 .visual .icon-box ul li a:hover {display:flex; align-items:center}
#section0 .visual .icon-box ul li a:after {content: ''; border:1px solid #fff; border-radius: 100%; color: #fff; font-size: 2.5rem; font-family: 'xeicon'; width: 6rem; height: 6rem; line-height: 6rem; text-align: center; opacity: 0; position: absolute; top: 70%; left: 50%; transform: translate(-50%); transition: all .3s}
#section0 .visual .icon-box ul li a:hover:after {opacity:1; transform:translate(-50%) rotate(180deg)}
#section0 .visual .icon-box ul li a:hover .txt {font-size:2.4rem; font-weight:600}
#section0 .visual .icon-box ul li a:hover .txt-on {display:block; font-size:1.8rem; line-height:1.4; font-weight:normal; margin-top:2rem; padding:0 1rem; word-break: keep-all}

/*active*/
#section0 .visual.active .desc {display:none}

/*** 섹션1 ***/
/* 유산균 보유 현황 */
#section1 {padding:10rem 0}
#section1 .group {position:relative; display:flex; flex-wrap:wrap}
#section1 .group > div {width:50%;}
#section1 .group .current {position:relative; padding-right:8rem}
#section1 .group .box {display:flex; flex-wrap:wrap; width:calc(100% + 2rem); height:34rem}
#section1 .group .item {width:calc(50% - 2rem); margin:2rem 2rem 0 0; position:relative}
#section1 .group .item .link {border:1px solid #cccccc; border-radius:1rem; display:block;; height:16rem;  padding: 3rem 2rem}
#section1 .group .item a:after {content:''; font-family:'xeicon'; color:#005eae; position:absolute; right:6rem; top:3rem; opacity:0; transition:all .3s}
#section1 .group .item span {display:block; font-size:1.6rem; line-height:1.2; min-height:3.8rem}
#section1 .group .item strong {font-size:4.8rem; font-weight:700}
#section1 .group .more {font-size:3rem; width:4.5rem; height:4.5rem; line-height:4.5rem; text-align:center; overflow:hidden; position:absolute; right:7rem; top:0}
#section1 .group .more i {display:block; width:100%; height:100%; line-height:inherit; color:#000}
#section1 .group .more i:before {display:block; transition:all .3s}
#section1 .group .more:hover i:before {transform:rotate(180deg)}
#section1 .group .item a:hover {border-color:#005eae}
#section1 .group .item a:hover:after {right:3rem; opacity:1} 

/*active*/
#section1 .group.active .more {display:block}

/* 관련서식 다운로드 */
#section1 .group ul {display:block; height:34rem}
#section1 .group ul li {position:relative; padding:5rem 0}
#section1 .group ul li:nth-child(2) {border-top:1px solid #ccc}
#section1 .group ul li i {position:absolute; right:0; top:50%; transform:translateY(-50%); transition:all .3s}
#section1 .group .desc strong {display:block; font-size:2.4rem}
#section1 .group .desc strong .xi-download {position:relative}
#section1 .group .desc strong .xi-download:before {content: ""; font-size: 2.5rem; color: #2149a6; font-family: 'xeicon'; position: absolute; left: 1rem; top: -2rem}
#section1 .group .desc span {font-size:1.8rem}
/*hover 효과*/
@media screen and (min-width:1024px){
	#section1 .group a:hover {color:#005eae}
	#section1 .group a:hover i {transform:rotateY(180deg))}
}


/*** 섹션2 ***/
/* 분야별 문의처 */
#section2 {height:49rem; background-image:url('/bkri/img/main/main-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; padding:10rem 0}
#section2 .group {display:inherit}
#section2 .group .title {color:#fff}
#section2 .group .box {display:flex; flex-wrap:wrap; width:calc(100% + 2rem);}
#section2 .group .box .item {width:calc(25% - 2rem); height:23rem; margin-right:2rem; background-color:#fff; padding:3.4rem 2.7rem 3.4rem; border-radius:1rem}
#section2 .group .box .item .txt {border-bottom:1px solid #ccc; padding-bottom:1.5rem; margin-bottom:1.5rem}
#section2 .group .box .item span {display:block; font-size:1.6rem; color:#666; font-weight:500}
#section2 .group .box .item strong {font-size:2.2rem; line-height:1.2; color:#0aa1a5; display:block;}
#section2 .group .box .item ul li i {font-size:2rem; margin-right:1rem; vertical-align:middle}