/* common */
body,th,td,input,select,textarea,button {font-size:16px;}

.wrap {
    padding-top:5em;
}

/* main visual */
.section1 {
    position:relative;
    width:100%;
    height:calc(100vh - 5em - 1px);
}
.section1 .main_visual {
    width:100%;
    height:100%;
}
.section1 .main_visual > div {
    position:relative;
    width:100%;
    height:100%;
}
.section1 .main_visual > div .bg {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}
.section1 .main_visual > div .bg img {
    display:block;
    width:100%;
    min-width:100vw;
    height:auto;
    min-height:100vh;
    object-fit:cover;
}
.section1 .main_visual > div .slogan {
    position:relative;
    top:50%;
    left:50%;
    z-index: 1;
    transform:translate(-50%, -50%);
}
.section1 .main_visual > div .slogan span {
    display:block;
    font-size:3em;
    font-weight:500;
    text-align:center;
    color:#fff;
    text-shadow: 0 0 .2083em rgba(20, 6, 6, .56);
}
.section1 .main_visual > div .slogan img {
    margin:1em auto;
    width:100%;
    max-width:14.5em;
}

/* section 공통 */
.section_title {
    display:table;
    font-size:2.5em;
    font-weight:600;
    line-height:1em;
}
.section_title b {
    font-family: 'Montserrat', sans-serif;
    font-weight:600;
    color:#DB2422;
}
.section_title small {
    font-size:.4em;
    font-weight:400;
    color:#8E959F;
}

/* line up */
.section2 .lineup_area {
    position:relative;
    margin:0 auto;
	padding:5.5em 1em 7.5em;
	width:100%;
	max-width:83.25em;
}
.section2 .lineup_area .section_title {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding-bottom:.6em;
    border-bottom:1px solid #CFD5DC;
}
.section2 .lineup_area .section_title * {
    display:block;
}
.section2 .lineup_area .section_title b {
    margin-right:.25em;
}
.section2 .lineup_area .section_title small {
    margin-left:1em;
}
.section2 .lineup_area .tabs {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    margin:5em 0 4em;
}
.section2 .lineup_area .tabs li {
    margin-right:.5em;
    width:calc((100% - 2.5em) / 6);
}
.section2 .lineup_area .tabs li:last-child {
    margin-right:0;
}
.section2 .lineup_area .tabs li span {
    display:block;
    font-size:1.5em;
    font-weight:500;
    line-height:3.3em;
    text-align:center;
    color:#CFD5DC;
    border:1px solid #CFD5DC;
    box-sizing: border-box;
    transition:all .2s ease-in-out;
}
.section2 .lineup_area .tabs li:hover span {
    color:#31363D;
    border-color:#31363D;
}
.section2 .lineup_area .tabs li.active span {
    font-weight:700;
    color:#fff;
    border-color:#DB2422;
    background-color:#DB2422;
}

.section2 .lineup_area .tabs_container .tab_content {
    display:none;
}
.section2 .lineup_area .tabs_container .tab_content.active {
    display:block;
}
.section2 .lineup_area .tabs_container .tab_content .tab_title {
    margin:0 auto 2.5em;
}
.section2 .lineup_area .tabs_container .tab_content .tab_title * {
    display:table;
    margin:0 auto;
    text-align:center;
}
.section2 .lineup_area .tabs_container .tab_content .tab_title p {
    font-size:1.5em;
}
.section2 .lineup_area .tabs_container .tab_content .tab_title span {
    font-size:2em;
    font-weight:800;
}
.section2 .lineup_area .tabs_container .tab_content .list ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
}
.section2 .lineup_area .tabs_container .tab_content .list ul li {
    margin:0 1.25em 2.5em 0;
    width:calc((100% - 2.5em) / 3);
    background-color:#F7F7F8;
}
.section2 .lineup_area .tabs_container .tab_content .list ul li:nth-child(3n) {
    margin-right:0;
}
.section2 .lineup_area .tabs_container .tab_content .list ul li img {
    margin:2.5em auto 1em;
    width:100%;
    max-width:18.75em;
}
.section2 .lineup_area .tabs_container .tab_content .list ul li .text {
    padding:1em;
    width:100%;
    background-color:#31353B;
}
.section2 .lineup_area .tabs_container .tab_content .list ul li .text span {
    display:block;
    text-align:center;
    font-family: 'Montserrat', sans-serif;
    font-size:1.5em;
    font-weight:700;
    color:#fff;
}
.section2 .lineup_area .tabs_container .tab_content .btn_area {
    margin-top:2em;
}


/* 기술지원 */
.section3 {
    background-color:#31353B;
}
.support_area {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
    margin:0 auto;
	padding:5.5em 1em 3.5em;
	width:100%;
	max-width:83.25em;
}
.support_area .text {
    margin-right:5em;
    width:calc(100% - 61.25em);
}
.support_area .text .section_title {
    color:#fff;
}
.support_area .link_list {
    width:56.25em;
}
.support_area .link_list ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items: stretch;
}
.support_area .link_list ul li {
    position:relative;
    margin-right:.375em;
    padding:1em 1em 2.5em;
    width:calc((100% - 1.5em) / 5);
    background-color:rgba(255,255,255,.5);
    transition:all .2s ease-in-out;
}
.support_area .link_list ul li:hover {
    background-color:rgba(255,255,255,.7);
}
.support_area .link_list ul li:nth-child(11) {
    margin-right:0;
}
.support_area .link_list ul li > img {
    margin:0 auto;
}
.support_area .link_list ul li hr {
    height:1px;
    background-color:#31353B;
    border:none;
}
.support_area .link_list ul li span {
    display:block;
    margin-top:1em;
    font-weight:500;
    text-align:center;
    color:#fff;
}
.support_area .link_list ul li .btn.more {
    position:absolute;
    display:flex;
    justify-content:center;
    align-items: center;
    bottom:-0.83334em;
    right:0.66667em;
    padding:0;
    width:1.66667em;
    height:1.66667em;
    background-color:#fff;
    transition:all .2s ease-in-out;
}
.support_area .link_list ul li:hover .btn.more {
    background-color:#DB2422;
}
.support_area .link_list ul li .btn.more::after {
    display:none;
}
.support_area .link_list ul li .btn.more img {
    width:80%;
    filter: brightness(0%);
}
.support_area .link_list ul li:hover .btn.more img {
    filter: brightness(100%);
}


/* Nikor 레서피 */
.recipe_area {
    position: relative;
    margin: 0 auto;
    padding: 10em 0 7.5em;
    width: 100%;
}
.recipe_area .section_bg {
    position:absolute;
    top:12%;
    right:21.05%;
    width:25.64%;
}
.recipe_area .text {
    margin-bottom:4em;
}
.recipe_area .section_title {
    margin:0 auto;
    text-align:center;
}
.recipe_area .text,
.recipe_area .list {
    position:relative;
    z-index: 1;
}

.recipe_area .list ul {
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: center;
}
.recipe_area .list ul li {
    width:calc(100% / 3);
    overflow:hidden;
}
.recipe_area .list ul li a {
    position:relative;
    display:block;
    width:100%;
    height:100%;
}
.recipe_area .list ul li .text {
    position:absolute;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
.recipe_area .list ul li .overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(76,63,60,.6);
    mix-blend-mode: multiply;
}
.recipe_area .list ul li .text span {
    position:relative;
    display:block;
    font-size:2em;
    font-weight:500;
    line-height:1.3em;
    text-align:center;
    color:#fff;
    z-index: 1;
}
.recipe_area .list ul li img {
    width:100%;
    min-width:100%;
    height:auto;
    min-height:100%;
    object-fit:cover;
}
.recipe_area .list ul li img,
.recipe_area .list ul li .overlay {
    transition:all .2s ease-in-out;
}
.recipe_area .list ul li:hover img {
    transform:scale(1.1);
}
.recipe_area .list ul li:hover .overlay {
    background-color:rgba(76,63,60,.9);
}

/* clients area */
.section5 {
    background-color:#F7F7F8;
}
.section5 .clients_area {
    margin:0 auto;
    padding:5em 1em;
    width:100%;
    max-width: 83.25em;
}

.section5 .clients_area .section_title {
    margin: 0 auto;
    text-align: center;
}

.section5 .clients_area .list {
    margin:3em auto 1.5em;
    width:100%;
    max-width:63.875em;
}
.section5 .clients_area .list ul {
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items:stretch;
}
.section5 .clients_area .list ul li {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 1em 1em 0;
    padding:0 .5em;
    width:calc((100% - 2em) / 3);
    min-height:8.75em;
    background-color:#fff;
    border:1px solid #CFD5DC;
}
.section5 .clients_area .list ul li:nth-child(3n) {
    margin-right:0;
}

/* contact */
.contact_area {
    margin:0 auto;
    padding:7.5em 1em;
    width:100%;
    max-width: 83.25em;
}

.contact_area .text {
    margin-bottom:3em;
}

.contact_area .form_area {
    width:100%;
}
.contact_area .form_area > form {
    padding:3em 7.75em 4em;
    border:1px solid #212529;
}
.contact_area .form_area .form-elements {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:center;
}
.contact_area .form_area .form-elements fieldset {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:stretch;
    margin:0 3em 3em 0;
    padding:0;
    width:calc((100% - 3em) / 2);
    border:none;
}
.contact_area .form_area .form-elements fieldset.select,
.contact_area .form_area .form-elements fieldset.textarea {
    margin:0 0 3em;
    width:100%;
    border:none;
}
.contact_area .form_area .form-elements fieldset:nth-child(even) {
    margin-right:0;
}
.contact_area .form_area .form-elements .title,
.contact_area .form_area .form-elements fieldset.input input,
.contact_area .form_area .form-elements fieldset.select select,
.contact_area .form_area .form-elements fieldset.textarea textarea {
    padding:.25em;
    font-size:1.5em;
}

.contact_area .form_area .form-elements .title {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    width:4.5em;
    font-weight:500;
    text-align:right;
}
.contact_area .form_area .form-elements .title .asterisk {
    color:#DB2422;
    line-height:.75em;
}
.contact_area .form_area .form-elements fieldset.input input,
.contact_area .form_area .form-elements fieldset.select select,
.contact_area .form_area .form-elements fieldset .radio_area,
.contact_area .form_area .form-elements fieldset.textarea textarea {
    margin-left:.5em;
    width:calc(100% - 5em);
    border:1px solid #CFD5DC;
    transition:all .2s ease-in-out;
}
.contact_area .form_area .form-elements fieldset.input input {
    background:none;
}
.contact_area .form_area .form-elements fieldset .radio_area,
.contact_area .form_area .form-elements fieldset .radio_area label {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.contact_area .form_area .form-elements fieldset .radio_area label {
    font-size:.9em;
}
.contact_area .form_area .form-elements fieldset .radio_area label input[type="radio"] {
    display:none;
}
.contact_area .form_area .form-elements fieldset .radio_area label .radio {
    position:relative;
    display:block;
    margin-right:.5em;
    width:1em;
    height:1em;
    border:1px solid #e3e3e3;
    border-radius:50%;
    box-sizing: border-box;
}
.contact_area .form_area .form-elements fieldset .radio_area label input[type="radio"]:checked + .radio {
    border:2px solid #DB2422;
}
.contact_area .form_area .form-elements fieldset .radio_area label input[type="radio"]:checked + .radio:before {
    position:absolute;
    content:'';
    top:50%;
    left:50%;
    width:.5em;
    height:.5em;
    background-color:#DB2422;
    border-radius:50%;
    transform:translate(-50%,-50%);
}
.contact_area .form_area .form-elements fieldset.textarea textarea.comp {
    border-color:#e3e3e3;
}

.contact_area .form_area .submit_area {
    display:flex;
    justify-content: flex-start;
    align-items:center;
    width:100%;
}
.contact_area .form_area .submit_area .btn.more {
    margin:0 auto;
}
.contact_area .form_area .submit_area .terms_area {
    display:block;
    margin-right:1em;
    width:calc(100% - 13.75em);
}
.contact_area .form_area .submit_area .terms_area {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.contact_area .form_area .submit_area .terms_area a {
    display:table;
    padding:.25em .75em;
    font-size:.9em;
    border:1px solid #ccc;
    border-radius:5em;
}
.contact_area .form_area .submit_area .terms_area label {
    display:flex;
    justify-content: flex-start;
    align-items:center;
}
.contact_area .form_area .submit_area .terms_area label input {
    display:none;
}
.contact_area .form_area .submit_area .terms_area label .checkbox {
    position:relative;
    display:block;
    margin-right:.5em;
    padding:0;
    width:1.125em;
    height:1.125em;
    border:0.15em solid #e3e3e3;
    transition:all .1s ease-in-out;
}
.contact_area .form_area .submit_area .terms_area label .checkbox img {
    width:100%;
    height:100%;
    opacity:0;
    transition:all .1s ease-in-out;
}
.contact_area .form_area .submit_area .terms_area label input:checked + .checkbox {
    border-width:0;
}
.contact_area .form_area .submit_area .terms_area label input:checked + .checkbox img {
    opacity:1;
}
.contact_area .form_area .submit_area button.complete {
    display:flex;
    justify-content:center;
    align-items:center;
    width:12.75em;
    line-height:3em;
    color:#fff;
    background-color: #DB2422;
    border:none;
    border-radius:.25em;
    transition: all .2s ease-in-out;
}
.contact_area .form_area .submit_area button.complete:disabled {
    color:#00BDD7;
    background-color:#ddfbff;
}

.contact_area .thankyou_message {
    display:table;
    padding:2.5em;
    width:auto;
    min-width:28.75em;
    background-color:#fff;
    border:1px solid #212529;
}
.contact_area .thankyou_message > * {
    display:table;
    margin:0 auto;
    text-align:center;
}
.contact_area .thankyou_message .ico {
    margin-bottom:.25em;
}
.contact_area .thankyou_message span {
    font-size:1.8em;
    color:#212529;
}
.contact_area .thankyou_message span,
.contact_area .thankyou_message span * {
    line-height:1.3em;
}
.contact_area .thankyou_message span b {
    color:#DB2422;
}
.contact_area .thankyou_message p {
    font-size:1.2em;
    line-height:1.3em;
    color:#747474;
}

.contact_area .thankyou_message hr {
    margin:.75em 0;
    width:100%;
    height:1px;
    border:0;
    background-color:#d9d9d9;
}

/* Nikor test kitchen */
.section7 {
    width:100%;
    background:url(../img/main/bg_testarea.png) no-repeat center;
    background-size:cover
}
.test_area {
    margin: 0 auto;
    padding: 5em 1em;
    width: 100%;
    max-width: 83.25em;
}
.test_area .text {
    margin-bottom:5.75em;
}
.test_area .section_title {
    margin:0 auto;
    text-align:center;
    color:#fff;
}
.test_area .progress_list > span {
    display:block;
    font-family: 'Montserrat', sans-serif;
    font-size:2.5em;
    text-align:center;
    font-weight:700;
    color:#fff;
}
.test_area .progress_list ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    margin:1.5em auto;
    width:100%;
    max-width:73.75em;
}
.test_area .progress_list ul li {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    margin-right:4em;
    padding:3em 1em;
    width:calc((100% - 8em) / 3);
    background-color:rgba(33,37,41,.8);
    border:1px solid #B0B8C2;
}
.test_area .progress_list ul li:last-child {
    margin-right:0;
}
.test_area .progress_list ul li::after {
    position:absolute;
    content:'';
    top:calc(50% - .5em);
    right:-2.75em;
    width:0;
    height:0;
    border-top:.675em solid transparent;
    border-bottom:.675em solid transparent;
    border-left:1em solid #DB2422;
}
.test_area .progress_list ul li:last-child::after {
    display:none;
}
.test_area .progress_list ul li * {
    display:block;
    font-size:1.5em;
    text-align:center;
    color:#fff;
}
.test_area .progress_list ul li .phone {
    position:relative;
    margin-top:.5em;
    padding-left:1.6em;
    font-weight:700;
}
.test_area .progress_list ul li .phone::before {
    position:absolute;
    content:'';
    top:.25em;
    left:0;
    width:1.25em;
    height:1em;
    background:url(../img/main/ico_telephone.svg) no-repeat center;
    background-size:cover;
}
.test_area .progress_list ul li p {
    margin-top:.5em;
    font-size:1em;
    color:#8E959F;
}
.test_area .progress_list > p {
    display:table;
    margin:0 auto;
    text-align:center;
    color:#fff;
}
.test_area .btn_area {
    margin-top:3.75em;
}
@media screen and (max-width:1024px) {
    body,th,td,input,select,textarea,button {font-size:16px;}
    
}

@media screen and (max-width:768px) {
    body,th,td,input,select,textarea,button {font-size:14px;}
    
}

@media screen and (max-width:570px) {
    
}

@media screen and (max-width:430px) {
    body,th,td,input,select,textarea,button {font-size:10px;}
    
}