@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}

    @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}

    @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}

    @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}

    @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}

    @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

    body, html, h1, h2, h3, h4, h5, h6, input, textarea, select, p, btn {
        font-family: 'Noto Sans KR', sans-serif;
        letter-spacing: -1px !important;
        font-size:16px;
    }
    /* Style for our header texts
    * --------------------------------------- */
    .nab a:nth-child(1) {
        width: 50%; margin: 3px -1px 0px 4px; display: inline-block;        
    }
    .nab a:nth-child(2) {
        width: 50%; margin:-4px; text-align:right;display: inline-block;
    }
    h1{
        font-size: 5em;
        color: #fff;
        margin:0;
        padding:0;
    }
    .intro p{
        color: #fff;
    }
    
    /*table tr { height:48px; line-height: 48px;}*/
    /* Centered texts in each section
    * --------------------------------------- */
    #section0,
    #section1,
    #section2{
        background-attachment: fixed !important;
    }

    #section0{
        text-align:center;
        
        
    }
    .bbg {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(../imgs/111.jpg);
        background-size: cover;
        -webkit-animation-name: animateBg;
        animation-name: animateBg;
        background-repeat: no-repeat;
        background-position: center;
    }
    .animate{
        -webkit-animation-duration: 1500ms;
        animation-duration: 1500ms;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;

        /*-webkit-animation-timing-function: cubic-bezier(.3,0,.7,1);
        animation-timing-function: cubic-bezier(.3,0,.7,1);*/
        /*animation-iteration-count: infinite;*/
    }

    #section2{
        
        background-image: url(../imgs/bg3.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
    }

    /*#section3{
        background-image: url(../imgs/99.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
    }*/


    #slide1 > div {
        vertical-align:inherit !important;

    }

    #slide2 > div {
        vertical-align:inherit !important;
    
    }

    #slide3 > div {
        vertical-align:inherit !important;
    
    }

    /* Fixed header and footer.
    * --------------------------------------- */
    #header {
        position: fixed;
        width: 100%;
        z-index: 9;
        margin: 0 auto;
    }

    #footer{
        position:fixed;
        height: 50px;
        display:none;
        width: 100%;
        /*background: #333;*/
        background: #1a46b5;
        z-index:9;
        text-align:center;
        color: #f2f2f2;
        padding: 20px 0 0 0;
    }

    #header{
        top:0px;
        width:100%;
        border-bottom: 1px solid #ffffff40;
        background-color:rgba(255, 255, 255, 0.08);
        -webkit-transition-property:color, background; 
        -webkit-transition-duration: 0.5s, 0.5s; 
        -webkit-transition-timing-function: linear, ease-in;
    }
    #footer{
        bottom:0px;
    }


    /* Bottom menu
    * --------------------------------------- */
    #infoMenu {
        bottom: 80px;
    }
    #infoMenu li a {
        color: #fff;
        z-index: 999;
    }

    #menu li {
    display: inline-block;
    margin: 10px;
    color: none;
    background: none;
    background: none;
    -webkit-border-radius: 0; 
    border-radius: 0px;
    }

	.aaa {
        top: 63%;
        position: absolute;
        /* width: 202%; */
        z-index: 5000 !important;
        right: 5%;
	}

	.bbb {
        top:63%;
        position: absolute;
        /* width: 202%; */
        z-index: 5000 !important;
        right: -28%;
		vertical-align: bottom;
	}

	.bbb2 {
        
        position: absolute;
        /* width: 202%; */
        z-index: 5000 !important;
        right: -28%;
		vertical-align: bottom;
	}


	.tit1 {
		color:#fff;
		font-size:4.25em;	
		font-weight: bold;
		font-family: 'm-eva00700';
		animation: 2s ease 0s normal forwards 1 fadeInUp;
		line-height: 99px;
	}
	.tit2 {
		color:#00a143;
		font-size:4.25em;
		letter-spacing: 0.11em !important;
		animation: 2s ease 0s normal forwards 1 fadeInUpf;
		font-family: 'm-eva00700';
		font-weight: bold;
		line-height: 99px;
	}
	.tit3 {
		color:#f6b229;
		margin-bottom: 2%;
		font-size:4.25em;
		letter-spacing: 0.11em !important;
		font-weight: bold;
		font-family: 'm-eva00700';
		animation: 2s ease 0s normal forwards 1 fadeInUps;
		line-height: 99px;
	}

    .apps {background-color:#fff; display:inline-block; border-radius: 120px; padding:16px; width:200px; text-align: center;}
    .apps img { width:140px; }
    .cont_box{
        position:relative; width:100%; text-align:left; margin-bottom:15%; margin-top: 11%;
    }

	.tit1s {
		/*color:#6d6d6dff;*/
		color:#fff;
		font-size:58px;	
		font-weight: bold;
        margin-bottom: 2%;
	}
	.tit2s {
		color:#000;
		font-size:18px;
		letter-spacing: 0.14em !important;
		font-weight: bold;
        margin-bottom: 2%;
	}
	.tit3s {
		color:#abc2ff;
		margin-bottom: 2%;
		font-size:18px;
		letter-spacing: 0.14em !important;
		font-weight: bold;
	}    

	.se h1 {
		color:#fff;
		font-size:68px;		
	}
	.nab {
		position:relative;
		margin:0 auto;
		max-width: 1080px;
	}
    .evtt {background-color:#fff; display:inline-block; border-radius: 120px; padding:16px; width:200px; text-align: center;  color:#000; font-weight: bold;}

    #section4 .intro { height:100% !important }
    .faq_tit_box {position:fixed; width:100%; text-align: center; margin-top: 7%;}
    
    .faq_box {max-width:1080px; position: relative; text-align: left; font-size:28px; font-weight: bold; margin:0 auto; color: #fff; display: table; height: 100%; margin-top:7%; width: 90%;}
    .faq { display:table-cell; vertical-align: middle; }
    .faq li.a {
        text-align:left;
    }

    .footer_con{width:25%; margin:0 auto; text-align: left; display: inline-block;}
    .footer_con:nth-child(2) {vertical-align: top;}
    .footer_con p {font-size:48px; line-height: 79px; font-weight: bold; color:#000; width:100%; font-family: m-eva00700;}
    .addr {width:100%;     margin-left: 25%;
        margin-top: 4%; text-align: left;}
    .addr ul {margin-top:20px}
    .fp-slidesNav {display:none}
    
    @media (max-width: 1420px) {
        .brand img { width: 32%; }

    }

    @media (max-width: 820px) {
        .brand img { width: 32%; }

        .fp-slidesNav  { display:block }
    } 

	@media (max-width: 720px) {
		.amb {
			width:74% !important;
		}
		.tit1s, .tit2s, .tit3s {
			font-size: 2.12em !important;
            margin-left: 10px;
		}
        #pills-home > div > div:nth-child(1) > div > h1 {
            font-size : 22px !important;
        }
        .tit1, .tit2, .tit3 {
			font-size : 2.12em !important;
            line-height : 58px;
            margin-left:10px;
		}
        .apps {
            background-color: #fff;
            display: inline-block;
            border-radius: 120px;
            padding: 9px;
            width: 140px;
            text-align: center;
            margin-left:10px;
        }
        /*.aaa {top: unset;}*/
        .aaa {top: unset; left: -40%}
        .bbb {top: unset; left: 10%}
        .nab {padding: 10px;}
        .nab a:nth-child(1) img {width: 24% !important;}
        .cont_box {
           margin-top: -41% !important;
        }

        
        /*#section0 > div > div > div.intro.aaa > img { width:150px }*/
        #section0 > div > div > div.intro.aaa > img { width:110px; }
        #section0 > div > div > div.intro.bbb > img { width:110px; }
        .move {
                margin-top: 23% !important;
        }

        .bor-h {
            border-top:1px solid #ffffff21 !important;
            border-bottom:1px solid #ffffff21 !important;
        }
        /*.items li {pointer-events: none !important;  }*/
        .on {background:rgba(0, 0, 0, 0.4); opacity:1 !important; }
        .abbb { position: relative; top:15% }
        .items .text{display: none;}
        .sub {      padding: 0 !important; 
            padding-top: 0% !important;
         }
        .items .eng {
            position: relative;
            margin-top: 0px !important;
            padding-bottom: 0px !important;
            font-size: x-large;
        }
        /*.cont {    padding-top: 18%;}*/
        .items .text {font-size:12px !important}
        .items .btn {font-size:16px !important; width: 160px !important;}
        .items li:hover .sub{   padding: 0% 0% 15% !important;}
        .onsub {opacity:1 !important; padding: 0% 0% 15% !important;}
        
        /*#section2 > div > div > ul > li:nth-child(1) > div > div > div {opacity:1 !important;display:block}*/
        .brand {
            padding-top: 20% !important;

        }
        /*.items .hidden{opacity: 1 !important;}*/
        .items li:nth-child(1) {    
            display: inline-block;
            width: 100% !important;
            height: 33.33% !important;
            /*vertical-align: middle !important;*/
        }

        .items li:nth-child(2) {    
            display: inline-block;
            width: 100% !important;
            height: 33.33% !important;
            /*vertical-align: middle !important;*/
        }
        .items li:nth-child(3) {    
            display: inline-block;
            width: 100% !important;
            height: 33.33% !important;
            /*vertical-align: middle !important;*/
        }

        .items .eng:before {
            left: 0% !important;
            width: 0px !important;
        }
        
        .items .eng:after {
            left: 0% !important;
            height: 0px !important;
        }	

        #section3 > div > div > div.brand > img { width: 45% !important;} 
        #section4 > div:nth-child(1) > h1:nth-child(1) {
            font-size: 3em;
        }
        .evtt { margin-left:10px;}
        .faq_box {
            margin-top: 21% !important;
            padding-left: 17px;         
        }
        #section4 > div:nth-child(1) > h1{
            font-size: 2.6em !important;
        }        
        .faq li.q {
            text-align: left;
            font-size: 17px !important;
            line-height: 51px !important;
            margin-left: 5% !important;            
        }
        #slide2 > div > div P{
            margin-top: 28% !important;
        }

        .fp-controlArrow.fp-next {
            width: 13px !important;
            height: 13px !important;
            border-top: 2px solid #fff !important;
            border-right: 2px solid #fff !important;
            right: 49px !important;
        }

        .fp-controlArrow.fp-prev {
            width: 13px !important;
            height: 13px !important;
            border-top: 2px solid #fff !important;
            border-right: 2px solid #fff !important;
            left: 10px !important;
        }
        .fp-controlArrow { display:none !important}
        .faq_tit_box { margin-top: 21% !important;}
        .faq li.a {
            font-size: 14px !important;
            font-weight: 400 !important;
            padding: 10px 20px 10px 10px !important;
            text-align:left;
        }

        .footer_con{width:90%; margin:0 auto; text-align: left; display: inline-block;}
        .footer_con p {font-size:30px; line-height: 42px;}
        .con_bot {
            width: 49% !important;
            float: left;
        }
        .con_bot p {width: auto !important;}
        .singsing {
            /* transition: background 0.4s ease; */
            position: relative;
            padding-top: 0px !important;
            opacity: 0;
            margin-top: 0px !important;
            width: 50%;
            float: left;
            text-align: center;
        }
        .singsing a {
            padding: 19px !important;
            /*width: 134px !important;*/
        }
        .singsing a img:nth-child(1) {
            width: 80px !important;
        }
        #section5 > div > div > div:nth-child(2) > div.singsing > div > img {
            display:none;
        }   
        .addr {
            width: 100%;
            margin-left: 6% !important;
            position: absolute !important;
            top: calc(100% - 317px) !important;
        }
	}	

	/********* MEDIA QUERIES ************/
	@media (max-width: 800px) {
		
		.faq_title {
			width: 90%;
			margin: 0 5%;
			height: 3.5em;
		}
		
		.faq li {
			text-align: center;
		}
		
		.faq li.a {
			width: 85%;
			margin-left: 5%;
            word-break: break-all;
		}
	}

	@media (max-width: 500px) {
        #section5 .intro { margin-top: 0 !important; }
        .apps {

            padding: 7px !important;
            width: 25% !important;

        }		
        .apps img {
            width: 100% !important;
        }
        #section0 > div > div > div.intro.aaa > img {
            width: 110px;
        } 
        #section0 > div > div > div.intro.bbb > img {
            width: 110px;
        }         
	}

.mouse {
  max-width: 2.5rem;
  width: 100%;
  height: auto;

} 

.scroll-link {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	animation: 5s ease 0s normal forwards 1 fadein;

}

.scroll {
  animation-name: scroll;
  /*animation-delay: 1s;*/
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.650, -0.550, 0.250, 1.500);
  animation-iteration-count: infinite;
  transform-origin: 50% 20.5px;
  will-change: transform;
}

.bor-h {
    border-left:1px solid #ffffff21;
    border-right:1px solid #ffffff21;
}
/*.bor-h:after {
    content: '';
    height: 100%;
    border-right:1px solid #ffffff21;
    position: absolute;
    top:100px;
}*/
.move {
    position:relative;
    top:100px;
    opacity:0;
}
.brand{
    /*transition:background 0.4s ease*/
    position:relative; left:20%; width:100%; top:80px; opacity:0;
}

.singsing{
    /*transition:background 0.4s ease*/
    position:relative; padding-top:40px; top:80px; opacity:0;
    margin-top:20px;
}
.singsing a {background-color:#fff; display:inline-block; border-radius: 23px; padding:34px; text-align: center; border:1px solid #898989}
.con_bot {width:100%;}
.footer_con p {width: auto;}
.items {
    display: table;
    width:100%;
    /*top: 50%;
    transform: translateY(-50%);
    position:absolute;
    border:1px solid red;*/
    height:100%;
}
.items li {
    display: table-cell;
    width:33.33%;
    color:#fff;
    height:100%;

    vertical-align:middle;
    /*transition:background 0.6s ease;*/
    /*transition:padding 0.6s ease;*/
}
.items li h1 {
    display: inline-block;
    font-size: 48px;
    font-weight:bold;
}
.items li p {
    font-size: 18px;
}
ul li:nth-child(2) {
    border-left:1px solid solid #000;
    border-right:1px solid solid #000;
}
#section2 .intro {
    height:100%;
}
.items .eng {
    position: relative;
    margin-top: 20px;
    padding-bottom: 100px;
    line-height: 48px;
    color: #fff;
    transition: padding 0.6s ease;
    transition: width 0.4s ease, margin 0.4s ease;
}

.items .eng:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 35px;
    background: #fff;
    transition: height 0.6s ease;
}

.items .eng:after {
    content: '';
    position: absolute;
    bottom: 17px;
    left: 50%;
    margin-left: -17px;
    width: 35px;
    height: 1px;
    background: #fff;
    transition: width 0.4s ease, margin 0.4s ease;
}

/*.items .bg{content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; opacity:0; transition:opacity 0.6s ease}*/
.bg{
    transition:background 0.6s ease;
}

.cont {
    float: left;
    width:100%;
    height: 100%;
    text-align: center;
    transition: background 0.6s ease;
    display: table;
}
.sub {
    position: relative;
    display: table-cell;
    padding: 276px 0 100px;
    height: 100%;
    vertical-align: middle;
    transition: padding 0.6s ease;
}

.items li .hidden{position:relative; margin-top:24px; opacity:0; transition:opacity 0.6s ease}
.items li .text{font-size:16px; line-height:26px; color:#fff}
.items li .btn{display:block; margin:40px auto 0; padding:17px 15px 21px; width:240px; font-size:18px; line-height:20px; color:#fff; border:1px solid rgba(255, 255, 255, 0.5)}

.text {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
}
.items li:hover .cont{background:rgba(0, 0, 0, 0.4)}
.items li:hover .sub{opacity:1}
.items li:hover .sub{padding-top:100px}
.on {}
.onsub {}
/*.items li:hover .eng{padding-bottom:72px}*/
.items li:hover .eng:before{height:44px}
.items li:hover .eng:after{width:0; margin-left:0}
.items li:hover .hidden{opacity:1}
.items li:hover .hidden .btn{pointer-events:auto}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 6px;
    width: 6px;
    border: 0;
    background: #fff;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.fp-controlArrow {
margin-top:-23px
}
.fp-controlArrow.fp-next {
    border-width : 0;
    border-color: transparent transparent transparent rgb(255 255 255 / 0%);
    width: 38px; /* 사이즈 */
    height: 38px; /* 사이즈 */
    border-top: 5px solid #fff; /* 선 두께 */
    border-right: 5px solid #fff; /* 선 두께 */
    display: inline-block;
    transform: rotate(50deg); /* 각도 */
    right: 60px;
}

.fp-controlArrow.fp-prev {
    border-width : 0;
    border-color: transparent transparent transparent rgb(255 255 255 / 0%);
    width: 38px; /* 사이즈 */
    height: 38px; /* 사이즈 */
    border-top: 5px solid #fff; /* 선 두께 */
    border-right: 5px solid #fff; /* 선 두께 */
    display: inline-block;
    transform: rotate(225deg); /* 각도 */
left: 20px;
}


#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
    height: 16px;
    width: 16px;
    margin: -6px 0 0 -6px;
    border-radius: 100%;
}

/*
.items li:nth-child(1) {background:url('http://company.nutrione.co.kr/res/images/main_company_bg1.jpg') no-repeat; background-size:cover; opacity:1}
.items li:nth-child(2) {background:url('http://company.nutrione.co.kr//res/images/main_company_bg2.jpg') no-repeat; background-size:cover}
.items li:nth-child(3) {background:url('http://company.nutrione.co.kr//res/images/main_company_bg3.jpg') no-repeat; background-size:cover}
*/


.nhs li {
    display: inline-block;
    font-size:18px;
    font-weight: bold;
    margin-right:20px;
    margin-bottom: 20px;
}
#section5 .fp-tableCell {
    vertical-align: top;
}

/*############################## FAQ #######################################################*/

.faq li.q {
    text-align: left; font-size:28px; font-weight: bold; margin:0 auto; line-height: 96px; color: #fff;
}
.faq li.q span {
    color:#fff; padding-right:10px
}

.faq li.a {
    font-size: 18px; font-weight: 400;padding:20px 50px 20px 20px; color: #cbfffd; display: none;
}

@font-face {
    font-family: 'm-eva00700';
    src: url('/fonts/m-eva00700.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@keyframes animateBg {
    from {
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }

    to {
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        
    }
    30%{
        opacity:0;
        transform: translate3d(0, 50%, 0);
    }
    100%{
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeInUpf {
    0% {
        opacity: 0;
        
    }
    40%{
        opacity:0;
        transform: translate3d(0, 50%, 0);
    }
    100%{
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes fadeInUps {
    0% {
        opacity: 0;
        
    }
    50%{
        opacity:0;
        transform: translate3d(0, 50%, 0);
    }
    100%{
        opacity: 1;
        transform: translateZ(0);
    }
}


@keyframes scroll {

	0%, 20% {
		transform: translateY(0) scaleY(1);
	}

	100% {
		transform: translateY(36px) scaleY(2);
		opacity: 0;
	}

}

@keyframes fadein {
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}