@charset "utf-8";

/*** mobile ***/
/** common **/
footer {background: #eee;}

/** sub 01 **/
.sub01Inner {padding: 100px 0 60px;}
/* sub01_1 */
.grtInner h3, .grtInner p {padding: 0 4.533%;}
.grtInner h3 {font-size: 2.2rem;}
.grtInner p.tit {
    margin: 24px 0 12px;
    font-size: 1.7rem; color: #8dc63f;
}
.grtInner p {
    font-size: 1.4rem; line-height: 18px;
    white-space: pre-line;
}
.grtInner i.img {
    display: block;
    width: 100%; height: 160px;
    margin-top: 40px;
    background: url(../img/sub01_1_bg_m.jpg) no-repeat center/cover;
}
/* sub01_2 */
.hisInner {padding: 100px 4.533% 60px;}
.hisInner h3 {font-size: 2.2rem;}
.hisInner > p {
    margin: 6px 0 16px;
    font-size: 1.4rem; color: #747474;
}
.hisInner li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 30px;
}
.hisInner li:before, .hisInner li:after {
    position: absolute;
    content: '';
    left: 0px; top: 5px;
    width: 10px; height: 10px;
    background: #8dc63f;
    border-radius: 100%;
}
.hisInner li:after {
    left: -5px; top: 0;
    width: 20px; height: 20px;
    opacity: .5;
}
.hisInner li:nth-child(2n):before, .hisInner li:nth-child(2n):after {background: #d4c739;}
.hisInner .db {margin-top: 18px;}
.hisInner li b {font-size: 1.4rem;}
.hisInner li p {
    margin-top: 10px;
    font-size: 1.6rem;
    word-break: keep-all;
}
/* sub01_3 */
.mapInner h4 {
    margin-bottom: 12px;
    font-size: 3rem;
}
.mapInner .contact {padding: 0 4.533% 56px;}
.mapInner .contact ul {padding-left: 14px; font-size: 0;}
.mapInner .contact ul li:first-child {margin-bottom: 15px;}
.mapInner i.icon {
    display: inline-block;
    width: 26px; height: 25px;
    margin-right: 16px;
    background: url(../img/sub01_3_icon01.png) no-repeat center/contain;
    vertical-align: middle;
}
.mapInner li:nth-child(2) i.icon {
    width: 26px; height: 26px;
    background-image: url(../img/sub01_3_icon02.png);
}
.mapInner .map .contWrap i.icon {
    height: 25px;
    background-image: url(../img/sub01_3_icon03.png);
}
.mapInner p {display: inline-block; font-size: 1.6rem; vertical-align: middle;}
.mapInner .map h4 {padding-left: 4.533%;}
.mapInner .map .contWrap {padding: 0 calc(14px + 4.533%) 24px;}
.mapInner .map iframe {
    display: block;
    width: 100%; height: 460px;
    border: 1px solid #333;
}

/** sub 02 **/
#product {position: relative;}
.proBg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 525px;
    background: url(../img/sub02_bg_m.jpg) no-repeat center/cover;
    z-index: -1;
}
.proInner {padding: 240px 4.533% 60px;}
.proInner .textWrap {
    padding: 28px 3.958% 27px;
    background: #f8f8f8;
}
.proInner .textWrap h3 {font-size: 3rem;}
.proInner .textWrap p:nth-child(2) {margin: 19px 0;}
.proInner .textWrap p {
    font-size: 1.4rem; color: #4e4e4e;
    line-height: 18px;
    word-break: keep-all;
}
.proInner .tabCont {margin-top: 48px;}
.proInner .tabCont h4 {
    margin-bottom: 14px;
    font-size: 1.8rem; color: #fea100;
    font-weight: 400;
}
.proInner article:nth-child(n+2) {margin-top: 30px;}
.proInner article li {
    float: left;
    width: 47.947%;
}
.proInner article li:nth-child(2n) {margin-left: 4%;}
.proInner article li:nth-child(n+3) {margin-top: 4%;}
.proInner article li .imgWrap {
    width: 100%; height: 80px;
    border: 1px solid #eee;
    text-align: center;
}
.proInner article li img {height: 100%;}
.proInner article li p {
    width: 100%; height: 24px;
    line-height: 23px;
    font-size: 1.4rem; color: #fff;
    text-align: center;
    background: #fea100;
}

/** sub03 **/
.inqInner {padding: 55px 0 34px;}
.inqInner > .tit {
    width: 100%; height: 120px;
    padding: 84px 0 0 2%;
    background: url(../img/sub03_bg_m.jpg) no-repeat center/cover;
    color: #fff;
}
.inqInner > .tit h3 {font-size: 2.4rem;}
.inqInner .cont {padding: 15px 4.533%;}
.inqInner .cont p.tit {font-size: 1.6rem; color: #8dc63f;}
.inqInner .cont p {
    margin-top: 10px;
    font-size: 1.4rem; color: #4e4e4e;
    font-weight: 300;
}
.inqInner form {
    margin: 25px 0;
    padding: 26px 4.533%;
    border-top: 2px solid #8dc63f;
}
.inqInner form > .content:after {
	display: block;
	content: '';
	width: 100%; height: 1px;
	margin-top: 24px;
	background: #dbdbdb;
}
.inqInner form > div {margin-bottom: 20px;}
.inqInner form > div:last-child {margin: 0;}
.inqInner form label {
    display: inline-block;
    width: 20.52%;
    font-size: 1.5rem;
}
.inqInner form input {
    width: 77%;
    height: 28px;
    font-size: 1.4rem; padding-left: 3%;
    border: 1px solid #dbdbdb;
    outline: none;
}
.inqInner form textarea {
    display: inline-block;
    width: 77%; height: 250px;
    font-size: 1.4rem;
    padding: 10px 3%;
    overflow-y: scroll;
    vertical-align: top;
    resize: none;
    border: 1px solid #dbdbdb;
    outline: none;
}
.inqInner form input::placeholder {color: #b2b2b2;}
.inqInner button[type="submit"] {
    display: block;
    width: 140px; height: 36px;
    margin: 0 auto;
    font-size: 1.4rem; color: #fff;
    background: #8dc63f;
    text-indent: 0;
}

/*** PC ***/
@media screen and (min-width:1084px){
    /** common **/
    #fixed {
        position: fixed;
        bottom: 0; left: 0;
        width: 100vw; height: calc(100vh - 100px);
        background: #fff;
        z-index: 9999;
    }
    header {border-bottom: 1px solid #eee;}
    footer.mobile {
        display: block;
        color: #fff;
        background: #4e4e4e;
    }
    footer .infoWrap {width: 1062px; margin: 0 auto;}
    footer .infoWrap b, footer .infoWrap p {float: left;}
    footer .infoWrap b {margin: 0;}
    footer .infoWrap p {margin: 14px 0 0 22px;}
    footer .infoWrap p:nth-child(2) {margin-top: 0;}
    footer .infoWrap p:nth-child(3) {margin-left: 0; clear: both;}
    footer .infoWrap p:last-child:after {
        display: inline-block;
        margin-left: 130px;
        font-size: 1rem;
        content: 'Copyright © DAINFOOD Corp. All rights reserved.';
    }
    footer i.copy {display: none;}

    /** sub 01 **/
    .sub01Inner {padding: 0;}
    /* sub01_1 */
    .grtInner {padding: 86px 0 99px; width: 900px; margin: 0 auto;}
    .grtInner h3, .grtInner p {padding: 0;}
    .grtInner h3 {font-size: 3.6rem;}
    .grtInner p.tit {
        margin: 64px 0 41px;
        font-size: 2.4rem;
    }
    .grtInner p {font-size: 1.6rem; line-height: 26px;}
    .grtInner i.img {
        width: 900px; height: 120px;
        margin-top: 70px;
        background-image: url(../img/sub01_1_bg.jpg);
    }
    /* sub01_2 */
    .hisInner {padding: 86px 0 78px; width: 900px; margin: 0 auto;}
    .hisInner h3 {font-size: 4rem;}
    .hisInner > p {
        margin: 15px 0 59px;
        font-size: 1.6rem;
    }
    .hisInner ul {position: relative;}
    .hisInner ul:before {
        position: absolute;
        left: 10px; top: 0;
        content: '';
        width: 1px; height: 100%;
        background: #eee;
    }
    .hisInner li {
        margin-bottom: 58px;
        padding-left: 79px;
    }
    .hisInner li:before, .hisInner li:after {
        top: 5px;
        width: 20px; height: 20px;
    }
    .hisInner li:after {
        left: -10px; top: -5px;
        width: 40px; height: 40px;
    }
    .hisInner .db {margin-top: 61px;}
    .hisInner li b {
        display: inline-block;
        margin-right: 104px;
        font-size: 2.4rem;
    }
    .hisInner li p {
        display: inline-block;
        margin-top: 0;
        font-size: 1.8rem;
    }
    /* sub01_3 */
    .mapInner {padding: 85px 0 144px; width: 900px; margin: 0 auto;}
    .mapInner h4 {
        margin-bottom: 32px;
        font-size: 4rem;
    }
    .mapInner .contact {padding: 0; margin-bottom: 85px;}
    .mapInner .contact ul {padding-left: 28px;}
    .mapInner .contact ul li {display: inline-block;}
    .mapInner .contact ul li:first-child {margin: 0 56px 0 0;}
    .mapInner i.icon {
        width: 18px;
        margin-right: 17px;
    }
    .mapInner .map h4 {padding: 0;}
    .mapInner .map .contWrap {padding: 0 0 46px 28px;}
    .mapInner .map iframe {height: 487px;}
    
    /** sub 02 **/
    .proBg {
		display: none;
        width: 320px; height: 1020px;
        background-image: url(../img/sub02_bg.jpg);
        z-index: 1;
    }
    .proInner {padding: 0; width: 1520px; margin: 0 auto;}
    .proInner .leftMenu {
        float: left;
        width: 218px;
        padding-top: 376px;
    }
    .proInner .leftMenu li a {
        display: block;
        font-size: 1.6rem; color: #4e4e4e;
        margin-bottom: 26px;
        transition: .6s;
    }
    .proInner .leftMenu li a.on {color: #fea100;}
    .proInner .leftMenu li a:before {
        display: inline-block;
        content: '';
        width: 8px; height: 8px;
        margin-right: 15px;
        border: 2px solid #4e4e4e;
        vertical-align: -1px;
        border-radius: 100%;
        transition: .6s;
    }
    .proInner .leftMenu li a.on:before {border-color: #fea100;}
    .proInner .rightWrap {
        float: left;
        padding-left: 81px;
        width: 1302px;
		border-left: 1px solid #eee;
    }
    .proInner .textWrap {
        padding: 66px 0 0 0;
        background: none;
    }
    .proInner .textWrap h3 {font-size: 3.6rem;}
    .proInner .textWrap p:nth-child(2) {margin: 34px 0 22px;}
    .proInner .textWrap p {font-size: 1.6rem; line-height: 24px;}
    .proInner .tabCont {
        height: 602px; overflow-y: scroll;
        margin: 48px 0 20px;
    }
    .proInner .tabCont h4 {
        margin-bottom: 26px;
        font-size: 2.4rem;
    }
    .proInner article:nth-child(n+2) {margin-top: 0; display: none;}
    .proInner article li {width: 200px; margin: 0 34px 0 0;}
    .proInner article li:nth-child(2n) {margin: 0 34px 0 0;}
    .proInner article li:nth-child(5n) {margin-right: 0;}
    .proInner article li:nth-child(n+3) {margin-top: 0;}
    .proInner article li:nth-child(n+6) {margin-top: 20px;}
    .proInner article li .imgWrap {height: 120px;}
    .proInner article li p {
        height: 40px;
        line-height: 39px;
        font-size: 1.6rem;
        font-weight: 300;
    }
    
    /** sub03 **/
    .inqInner {padding: 0 0 77px;}
    .inqInner > .tit {
        width: 100%; height: 156px;
        padding: 86px 0 0;
        background-image: url(../img/sub03_bg.jpg);
    }
    .inqInner > .tit h3 {
        width: 900px;
        margin: 0 auto;
        font-size: 3.6rem;
    }
    .inqInner .cont {padding: 55px 0 0; width: 900px; margin: 0 auto;}
    .inqInner .cont p.tit {font-size: 2.4rem;}
    .inqInner .cont p {font-size: 1.6rem;}
    .inqInner form {
        margin: 20px 0 32px;
        padding: 32px 0 38px;
        font-size: 0;
        border-top-width: 3px;
    }
    .inqInner .formWrap {width: 900px; margin: 0 auto;}
    .inqInner form > div {padding-left: 13px; margin-bottom: 33px;}
    .inqInner form label:before {
        display: inline-block;
        content: '';
        width: 3px; height: 3px;
        margin-right: 7px;
        background: #fea100;
        vertical-align: top;
    }
    .inqInner form label {
        width: 123px;
        font-size: 1.8rem;
    }
    .inqInner form input {
        width: 260px; height: 36px;
        font-size: 1.4rem; padding-left: 15px;
    }
	.inqInner form > .content:after {margin-top: 30px;}
    .inqInner .tel, .inqInner .mail {display: inline-block;}
    .inqInner .mail {padding-left: 66px;}
    .inqInner .mail input {width: 291px;}
    .inqInner .title input {width: 740px;}
    .inqInner form textarea {
        width: 740px; height: 280px;
        padding: 10px 15px;
    }
    .inqInner form textarea::-webkit-scrollbar {display: none;}
    .inqInner form input::placeholder {color: #b2b2b2;}
    .inqInner button[type="submit"] {
        width: 130px; height: 40px;
        font-size: 1.8rem;
        font-weight: 300;
        background: #a2d062;
    }
}

/*** PC 1440 ***/
@media screen and (min-width:1440px){
    /** sub01 **/
	.sub01Inner {position: relative;}
    .sub01Inner:before, .sub01Inner:after {
        position: absolute;
        top: 0; left: -27vw;
        content: '';
        width: 320px; height: 100%;
        background: url(../img/sub01_leftBg.png) no-repeat center/cover;
        transform: translateX(-190px);
        opacity: 0;
        animation: sub01Ani .8s cubic-bezier(.895,.03,.585,.22) .3s forwards;
        -webkit-animation: sub01Ani .8s cubic-bezier(.895,.03,.585,.22) .3s forwards;
    }
    .sub01Inner:after {
        left: auto; right: -27vw;
        background-image: url(../img/sub01_rightBg.png);
        transform: translateX(190px);
    }
    @keyframes sub01Ani {to {opacity: 1; transform: translateX(0);}}
    @-webkit-keyframes sub01Ani {to {opacity: 1; transform: translateX(0);}}
}

/*** PC 1900 ***/
@media screen and (min-width:1900px){
    /** sub02 **/
	.proBg {display: block;}
	.proInner {width: 1280px;}
	.proInner .leftMenu {padding-left: 54px;}
	 .proInner .rightWrap {width: 1062px;}
	 .proInner article li:nth-child(5n) {margin-right: 34px;}
	 .proInner article li:nth-child(4n) {margin-right: 0;}
	 .proInner article li:nth-child(n+5) {margin-top: 20px;}
}