@charset "utf-8";
@import url("./common.css");

#sub01{width:100%; height:261px; background:url(../images/common/subbg.png)}
@media (min-width: 1052px) {

}

#subMenu{display:flex; width:90%; max-width:1440px; margin:auto; padding:60px 0; justify-content: space-between;}
#subMenu h3{font-size:40px; padding-top:10px; margin:0; letter-spacing:-1px; font-weight:100; color:#6d6d6d; position:relative; }
#subMenu h3 strong{font-weight:600; }
#subMenu h3:before{content:''; border-top:2px solid #67c114; position:absolute; top:0; left:0; width:20px; }
#subMenu hr{background:#E5E5E5; display:none; }
#subMenu .submenu{display:flex; align-items: center;}
#subMenu .submenu .btn{border-radius:23px; padding:8px 20px; margin-left:10px; text-wrap: nowrap; font-weight:600; border:1px solid #ebebeb}
#subMenu .submenu .btn:focus{box-shadow:none; outline:none; }
#subMenu .submenu .btn:first-child{margin-left:0; }
#subMenu .submenu .btn:hover{color:#67c114}
#subMenu .submenu .btn.active{background:#67c114; color:#fff; border:0; }

@media (max-width: 980px) {
#subMenu{width:100%; flex-direction: column; padding:30px 0 0;}
#subMenu h3{width:90%; margin:auto; padding-bottom:10px; }
#subMenu hr{display:block;}
#subMenu .submenu{width:100%; margin:auto; padding:10px 5% 30px; overflow-x: auto;}
}
@media (max-width: 640px) {
#subMenu h3{font-size:28px; }
}

#greet{padding:124px 0 110px; background:#F4F4F1; }
#greet .inner{width:90%; max-width:1035px; margin:auto; padding-bottom:280px; position:relative; }
#greet .inner .thumb{margin-bottom:29px; }
#greet .inner .thumb img{max-width:206px; }
#greet .inner h4{font-size:36px; font-weight:600; word-break:keep-all; color:#81BA4C}
#greet .inner p{max-width:776px; margin:30px 0 69px; font-size:24px; line-height:33px; letter-spacing:-1.2px; word-break:keep-all; color:#6D6E71; }
#greet .inner .sign{position:relative; z-index:1}
#greet .inner .product{position:absolute; bottom:0; right:0; max-width:100%; }

@media (max-width: 768px) {
#greet .inner{padding-bottom:0px;}
#greet .inner h4{font-size:28px;}
#greet .inner p{font-size:20px; line-height:30px; }
#greet .inner .product{position:relative; }
}
@media (max-width: 640px) {
#greet .inner h4{font-size:24px;}
#greet .inner p{font-size:18px; line-height:26px; }
}

#brandstory{width:100%; padding:120px 0; background:#F4F4F1; }
#brandstory .inner{width:90%; max-width:1440px;margin:Auto; display:flex; flex-wrap: wrap;flex-direction: column;}
#brandstory .inner .col{width:100%; display:flex; align-items: center; justify-content: space-between;}
#brandstory .inner .col img{max-width:50%; }
#brandstory .inner .col .m_show{display:none; }
#brandstory .inner .col .txt{display:flex; width:50%; flex-direction: column;}
#brandstory .inner .col .txt h3{font-size:36px; line-height:46px; letter-spacing:-0.72px; margin-bottom:33px; font-weight:600; color:#81BA4C; }
#brandstory .inner .col .txt p{font-size:24px; line-height:36px; margin:0; letter-spacing:-1.2px; max-width:524px; color:#6D6E71; word-break:keep-all; }
#brandstory .inner .col .txt1{padding:0 60px}
#brandstory .inner .col .txt2{margin-top:72px; }
#brandstory .inner .col .set{display:flex; width:50%; padding: 0 90px; margin-top:64px; flex-wrap: wrap; }
#brandstory .inner .col .set .txt{width:100%; }
#brandstory .inner .col2{align-items: flex-start}

@media (max-width: 1000px) {
#brandstory .inner .col{flex-direction: column;}
#brandstory .inner .col img{width:100%; max-width:640px; margin:auto; }
#brandstory .inner .col .m_hide{display:none;}
#brandstory .inner .col .m_show{display:flex; margin-bottom:60px; }
#brandstory .inner .col2{margin-top:60px;}
#brandstory .inner .col .txt{width:100%; max-width:640px; }
#brandstory .inner .col .txt1{padding:0; }
#brandstory .inner .col .set{width:100%; max-width:640px; padding:0; margin:64px auto 0; }
}
@media (max-width: 640px) {
#brandstory{padding:80px 0}
#brandstory .inner .col .txt h3{font-size:30px; line-height:40px; margin-bottom:25px; }
#brandstory .inner .col .txt p{font-size:20px; line-height:32px;}
#brandstory .inner .col .m_show{margin-bottom:40px; }
#brandstory .inner .col .set{margin-top:40px; }
#brandstory .inner .col .txt2{margin-top:50px; }
}


#point{width:100%; background:#F4F4F1; }
#point .inner{width:90%; max-width:1017px; padding:197px 0 126px; margin:auto; display:flex; flex-direction: column;}
#point .inner .col-p{display:flex; }
#point .inner .col-p img{width: 247px;height: 174px; margin-right:75px; }
#point .inner .col-p .set h3{font-size:40px; margin-bottom:20px; color:#81BA4C; font-weight:600; word-break:keep-all;}
#point .inner .col-p .set p{font-size:24px; line-height:36px; letter-spacing:-1.2px; margin:0; color:#6D6E71;word-break:keep-all; }
#point .inner hr{background:#E5E5E5; margin:66px 0;}

@media (max-width: 1060px) {
#point .inner .col-p img{margin-right:5%;}
#point .inner .col-p .set p br{display:none; }
}
@media (max-width: 768px) {
#point .inner{padding:127px 0 96px;}
#point .inner .col-p .set h3{font-size:32px;}
#point .inner .col-p .set p{font-size:20px; line-height:30px;}
}
@media (max-width: 640px) {
#point .inner{padding:87px 0 86px;}
#point .inner{max-width:320px; }
#point .inner .col-p{flex-direction: column;}
#point .inner .col-p img{max-width:100%; margin:0 auto 8%; }
#point .inner .col-p .set{text-align:center;}
#point .inner .col-p .set h3{font-size:28px;}
#point .inner .col-p .set p{font-size:18px; line-height:28px;}
#point .inner hr{margin:46px 0;}
}


#process{width:100%; background:#F4F4F1; }
#process .inner{width:90%; max-width:1017px; padding:124px 0 139px; margin:auto; display:flex; flex-direction: column;}
#process .set1{display:flex; align-items: center; justify-content: space-between;}
#process .set1 .txt{max-width:640px; word-break:keep-all;} 
#process .set1 h3{font-size:40px; margin-bottom:20px; color:#81BA4C; font-weight:600;}
#process .set1 p{font-size:24px; line-height:36px; margin:0; letter-spacing:-1.2px; max-width:524px; color:#6D6E71;}
#process .set1 img{max-width:350px; }

#process hr{background:#E5E5E5; margin:93px 0 80px;}
#process .set2 h2{font-size:40px; margin-bottom:54px; word-break:keep-all; color:#81BA4C; font-weight:600;}
#process .set2 .group{display:flex; flex-wrap:wrap;}
#process .set2 .group .col{display:flex; width:33.3%; margin-bottom:50px; flex-basis: inherit; flex-direction: column;}
#process .set2 .group .col img{max-width:100%; margin-bottom:22px; }
#process .set2 .group .col h4{font-size:32px; margin:0; justify-content:center; display: flex; text-wrap:nowrap; color:#6D6E71; font-weight:600; }
#process .set2 .group .col h4 span{font-size:14px;width:40px; height:40px; margin-right:7px; color:#fff; background:#81BA4C; border-radius:50%; display:flex; justify-content: center; align-items: center;}

@media (max-width: 950px) {
#process .set1{flex-direction: column;}
#process .set1 img{margin:auto; margin-top:80px; max-width:300px; }
#process .set1 .txt{margin:auto; text-align:center;}
}
@media (max-width: 768px) {
#process .inner{padding:104px 0 119px;}
#process .set1 img{margin-top:60px; }
#process .set2 .group .col{width:50%; }
#process hr{margin:73px 0 60px;}
}
@media (max-width: 568px) {
#process .inner{padding:84px 0 99px;}
#process .set1 h3{font-size:30px;}
#process .set1 p{font-size:18px; line-height:30px;}
#process .set2 h2{font-size:30px; text-align:center; }
#process .set2 .group .col img{max-width:100%; margin:0 auto 30px; }
#process .set2 .group .col h4 span{width:30px; height:30px; }
#process .set2 .group .col h4{font-size:24px;}
}


#product{width:100%; padding:95px 0;background:#F4F4F1;  text-align:center;}
#product img{max-width:100%; }

@media (max-width: 640px) {
#product{padding:0; }
}