#ventricle { transition: all 0.5s ease; background: #ffffff00; } .viscus { background: #FFFFFF !important; box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%) !important; } #ventricle:hover { background: #FFFFFF !important; box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%) !important; } #ventricle .venSack .venLf { padding: 16px 0; position: relative; } #ventricle .venSack .venLf .venLogo img { max-width: 100%; } .viscus .venSack .venLf .venLogo.venLogoW { opacity: 0 !important; } #ventricle .venSack .venLf .venLogo.venLogoW { opacity: 1; transition: all 0.5s ease; } #ventricle:hover .venSack .venLf .venLogo.venLogoW { opacity: 0 !important; } .viscus .venSack .venLf .venLogo.venLogoO { opacity: 1 !important; } #ventricle .venSack .venLf .venLogo.venLogoO { position: absolute; top: 50%; left: 0; transform: translateY(-50%); opacity: 0; transition: all 0.5s ease; } #ventricle:hover .venSack .venLf .venLogo.venLogoO { opacity: 1 !important; } #ventricle .venSack .venRg { padding: 0; display: flex; justify-content: flex-end; } #ventricle .venSack .venRg .venList .venUl { display: flex; align-items: center; margin-right: 28px; height: 100%; } #ventricle .venSack .venRg .venList .venUl .venLi { margin-right: 86px; height: 100%; } #ventricle .venSackJp .venRg .venList .venUl .venLi { margin-right: 46px; } #ventricle .venSack .venRg .venList .venUl .venLi>a { display: flex; align-items: center; height: 100%; } #ventricle .venSack .venRg .venList .venUl .venLi>a p { font-size: 16px; font-weight: 500; color: #FFFFFF; transition: all 0.5s ease; } #ventricle .venSack .venRg .venList .venUl .venLi.active>a p { color: #2C9E41; } .viscus .venSack .venRg .venList .venUl .venLi>a p { color: #333333 !important; } #ventricle:hover .venSack .venRg .venList .venUl .venLi>a p { color: #333333 !important; } .viscus .venSack .venRg .venList .venUl .venLi.active>a p { color: #2C9E41 !important; } #ventricle:hover .venSack .venRg .venList .venUl .venLi.active>a p { color: #2C9E41 !important; } #ventricle .venSack .venRg .venLagu>a { display: flex; height: 100%; align-items: center; } #ventricle .venSack .venRg .venLagu>a .venLaguIco { margin-right: 12px; } #ventricle .venSack .venRg .venLagu>a .venLaguIco img { width: 100%; transition: all 0.5s ease; filter: invert(0) } .viscus .venSack .venRg .venLagu>a .venLaguIco img { filter: invert(100%) !important; } #ventricle:hover .venSack .venRg .venLagu>a .venLaguIco img { filter: invert(100%) !important; } #ventricle .venSack .venRg .venLagu>a .venLaguText p { font-size: 16px; font-weight: normal; color: #FFFFFF; line-height: normal; transition: all 0.5s ease; } .viscus .venSack .venRg .venLagu>a .venLaguText p { color: #333333 !important; } #ventricle:hover .venSack .venRg .venLagu>a .venLaguText p { color: #333333 !important; } #ventricle .venSack .venRg .venPho { display: none; } #ventricle .venSack .venRg .venPho .venPhoSack { display: inline-block; vertical-align: middle; position: relative; width: 24px; height: 100%; margin-left: 16px; } #ventricle .venSack .venRg .venPho .venPhoSack::before, #ventricle .venSack .venRg .venPho .venPhoSack::after { content: ""; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: translateY(-50%); background: #FFFFFF; transition: all .5s; } .viscus .venSack .venRg .venPho .venPhoSack::before, .viscus .venSack .venRg .venPho .venPhoSack::after { background: #333333 !important; } #ventricle .venSack .venRg .venPho .venPhoSack::before { margin-top: -6px; } #ventricle .venSack .venRg .venPho .venPhoSack::after { margin-top: 6px; } #ventricle:hover .venSack .venRg .venPho .venPhoSack::before, #ventricle:hover .venSack .venRg .venPho .venPhoSack::after { background: #333333 !important; } #ventricle .venSack .venRg .venPho .venPhoSack.active::before, #ventricle .venSack .venRg .venPho .venPhoSack.active::after { background: #333333 !important; } #ventricle .venSack .venRg .venPho .venPhoSack.on::before { margin-top: 0px; transform: translateY(-50%) rotate(-46deg); } #ventricle .venSack .venRg .venPho .venPhoSack.on::after { margin-top: 0px; transform: translateY(0%) rotate(46deg); } #ventricle .venSack .venRg .venPho .venPhoSack span { height: 1px; display: block; position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); background: #FFFFFF; transition: all .5s; } .viscus .venSack .venRg .venPho .venPhoSack span { background: #333333 !important; } #ventricle:hover .venSack .venRg .venPho .venPhoSack span { background: #333333 !important; } #ventricle .venSack .venRg .venPho .venPhoSack.active span { background: #333333 !important; } #ventricle .venSack .venRg .venPho .venPhoSack.on span { opacity: 0 !important; } #venSecond { position: fixed; top: 77px; left: 0; width: 100%; background: #F5F9F8; display: flex; justify-content: flex-end; overflow: hidden; max-height: 0; opacity: 0; transition: all 0.3s ease; } #ventricle .venSack .venRg .venList .venUl .venLi:hover #venSecond { opacity: 1 !important; max-height: 400px !important; transition: all 0.8s ease; } #venSecond .venSecSack { width: 54%; display: flex; padding: 40px 0 60px; } #venSecond .venSecSack .venSecLf { padding-right: 76px; border-right: 1px solid #DEDEDE; } #venSecond .venSecSack .venSecLf .venSecLfBox { display: flex; } #venSecond .venSecSack .venSecLf .venSecLfBox .venSecLfBoxImg { border-radius: 16px; overflow: hidden; } #venSecond .venSecSack .venSecLf .venSecLfBox .venSecLfBoxImg img { width: 320px; object-fit: cover; max-width: 100%; } #venSecond .venSecSack .venSecRg { padding-left: 76px; } #venSecond .venSecSack .venSecRg .venSecRgBox { margin-bottom: 20px; } #venSecond .venSecSack .venSecRg .venSecRgBox>a { display: flex; } #venSecond .venSecSack .venSecRg .venSecRgBox>a .venSecRgTit { position: relative; padding-bottom: 2px; } #venSecond .venSecSack .venSecRg .venSecRgBox>a .venSecRgTit::after { position: absolute; content: ""; left: 0; bottom: 0; width: 0%; transition: all 0.5s ease; height: 2px; background: #2C9E41; } #venSecond .venSecSack .venSecRg .venSecRgBox:hover>a .venSecRgTit::after { width: 100%; } #venSecond .venSecSack .venSecRg .venSecRgBox>a .venSecRgTit p { font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #666666; transition: all 0.5s ease; } #venSecond .venSecSack .venSecRg .venSecRgBox:hover>a .venSecRgTit p { color: #2C9E41; } @media (max-width: 1536px) { #venSecond .venSecSack .venSecLf .venSecLfBox .venSecLfBoxImg img { width: 260px; } #ventricle .venSack .venLf .venLogo img { width: 170px; } #ventricle .venSack .venRg .venList .venUl { margin-right: 8px; } #ventricle .venSack .venRg .venList .venUl .venLi { margin-right: 36px; } #ventricle .venSack .venRg .venList .venUl .venLi>a p { font-size: 14px; } #ventricle .venSack .venRg .venLagu>a .venLaguIco { display: flex; } #ventricle .venSack .venRg .venLagu>a .venLaguText p { font-size: 14px; } #venSecond { top: 72px; } #venSecond .venSecSack { width: 48%; } #venSecond .venSecSackJp { width: 60%; } #venSecond .venSecSack .venSecLf { padding-right: 46px; } #venSecond .venSecSack .venSecRg { padding-left: 46px; } #venSecond .venSecSack .venSecRg .venSecRgBox { margin-bottom: 12px; } #venSecond .venSecSack .venSecRg .venSecRgBox>a .venSecRgTit p { font-size: 14px; } } @media (min-width: 1199.9px) and (max-width: 1400px) {} @media (max-width: 1199.9px) { #ventricle .venSack .venRg .venList .venUl { display: none; } #ventricle .venSack .venRg .venLagu>a .venLaguIco { margin-right: 6px; } #ventricle .venSack .venRg .venPho { display: block; } } @media (max-width: 499px) { #ventricle .venSack .venLf .venLogo img { width: 130px; } } #somaBanner>.swiper-wrapper .swiper-slide { position: relative; } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .banContent .banTitle { width: 668px; max-width: 100%; } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .banContent .banTitleJp { width:610px } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .banContent .banTitle h2 { text-align: start; } #somaBanner>.swiper-wrapper .swiper-slide img { width: 100%; height: 100vh; object-fit: cover; } #somaBanner>.swiper-wrapper .swiper-slide .immd { display: none; } #somaBanner>.swiper-wrapper .swiper-slide .banContent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitlePh { display: none; } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitle h2 { font-size: 60px; font-weight: bold; line-height: normal; text-align: center; letter-spacing: 0em; color: #FFFFFF; } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitleJp h2 { font-size: 54px; } #somaBanner>.swiper-pagination { bottom: 6vh; } #somaBanner>.swiper-pagination .swiper-pagination-bullet { background: #9E9E9E; opacity: 1; border: 1px solid #9E9E9E; transition: all 0.5s ease; } #somaBanner>.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #9e9e9e00; border: 1px solid #FFFFFF; } .soma01 .soma01Sack .soma01Title { text-align: center; } .soma01 .soma01Sack .soma01Ul { padding-bottom: 160px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack { position: relative; border-radius: 10px; overflow: hidden; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiImg { position: relative; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiImg::after { content: ""; position: absolute; background: #2c9e41; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.5s ease; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack:hover .soma01LiImg::after { opacity: 0.9; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiImg img { width: 100%; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; transform: translateY(86%); transition: all 0.5s ease; } .soma01Jp .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { transform: translateY(80%); } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack:hover .soma01LiTxt { transform: translateY(42%); } .soma01Jp .soma01Sack .soma01Ul .soma01Li .soam01LiSack:hover .soma01LiTxt { transform: translateY(38%); } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle { padding: 0 12px; padding-bottom: 26px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle p { font-size: 24px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #FFFFFF; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .soma01Jp .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle p { -webkit-line-clamp: 6; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soam01LiBtn { display: flex; justify-content: center; opacity: 0; transition: all 0.5s ease; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack:hover .soma01LiTxt .soam01LiBtn { opacity: 1; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soam01LiBtn p { border: 1px solid #FFFFFF; border-radius: 40px; padding: 10px 42px; } .soma02 .soma02Sack { padding-bottom: 120px; } .soma02 .soma02Sack a { display: flex; align-items: center; } .soma02 .soma02Sack .soma02Lf { margin-right: 80px; width: 58%; } .soma02 .soma02Sack .soma02Lf .soma02Img { border-radius: 32px; overflow: hidden; } .soma02 .soma02Sack .soma02Lf .soma02Img img { width: 100%; object-fit: cover; transition: all 0.8s ease; } .soma02 .soma02Sack a:hover .soma02Lf .soma02Img img { transform: scale(1.1); } .soma02 .soma02Sack .soma02Rg { width: 42%; } .soma02 .soma02Sack .soma02Rg .soam02Title { padding-top: 14px; padding-bottom: 50px; } .soma02 .soma02Sack .soma02Rg .soma02Txt { padding-bottom: 114px; } .soma02 .soma02Sack .soma02Rg .soma02Txt p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden; text-overflow: ellipsis; } .soma02 .soma02Sack .soma02Rg .soma02Btn { display: flex; } .soma02 .soma02Sack .soma02Rg .soma02Btn p { color: #2c9e41; border: 1px solid #2c9e41; background: #2c9e4100; padding: 10px 40px; border-radius: 40px; transition: all 0.5s ease; } .soma02 .soma02Sack a:hover .soma02Rg .soma02Btn p { color: #FFFFFF; background: #2c9e41; } .soma03 { position: relative; } .soma03 .soma03Img img { width: 100%; object-fit: cover; } .soma03 .soma03Sack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .soma03 .soma03Sack .soma03Str { width: 1032px; max-width: 100%; } .soma03 .soma03Sack .soma03Mark { position: absolute; left: -52px; top: -30px; } .soma03 .soma03Sack .soma03Mark img { width: 68px; } .soma04 .soma04Sack { padding-bottom: 50px; } .soma04 .soma04Sack .soma04Loca { display: flex; } .soma04 .soma04Sack .soma04Loca .soma04Lf { display: flex; justify-content: space-between; width: calc(56% - 10px); } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack { display: flex; width: calc(50% - 15px); border-radius: 10px; overflow: hidden; border: 1px solid #DEDEDE; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfImg { position: relative; height: 54%; overflow: hidden; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfImg img { width: 100%; height: 100%; object-fit: cover; transition: all 0.8s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:hover .soma04LfImg img { transform: scale(1.1); } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfImg i { position: absolute; color: #fff; bottom: -26px; z-index: 3; left: 50%; transform: translateX(-50%); font-size: 40px; transition: all 0.3s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:hover .soma04LfImg i { color: #2c9e41; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:nth-child(2) .soma04LfImg i { top: -26px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont { /* border: 1px solid #DEDEDE; */ border-top: none; border-radius: 0 0 10px 10px; padding: 68px 30px; height: 46%; position: relative; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont::after { position: absolute; content: ""; width: 0; height: 100%; background: #2c9e41; top: 0; left: 0; z-index: -1; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:hover .soma04LfCont::after { width: 100%; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:nth-child(2) .soma04LfCont { /* border: 1px solid #DEDEDE; */ border-bottom: none; border-radius: 10px 10px 0 0; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont .soma04LfTime { padding-bottom: 26px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont .soma04LfTime p { transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:hover .soma04LfCont .soma04LfTime p { color: #FFFFFF; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont .soma04LfTitle p { height: calc(1em* 2* 1.5); min-height: calc(12px* 2* 1.5); font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:hover .soma04LfCont .soma04LfTitle p { color: #FFFFFF; } .soma04 .soma04Sack .soma04Loca .soma04Rg { margin-left: 26px; width: 43%; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li a { display: flex; align-items: center; position: relative; padding-bottom: 20px; margin-bottom: 10px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li:last-child a { margin-bottom: 0px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li a::after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background: #DEDEDE; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li a::before { content: ""; position: absolute; width: 0; height: 1px; left: 0; bottom: 0; background: #2c9e41; z-index: 2; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li:hover a::before { width: 100%; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiImg { width: 147px; max-width: 100%; border-radius: 12px; overflow: hidden; margin-right: 20px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiImg img { width: 100%; object-fit: cover; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li:hover .soma04LiImg img { transform: scale(1.1); } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiCont { flex: 1; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiCont .soma04LiTit { padding-bottom: 24px } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiCont .soma04LiTit p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li:hover .soma04LiCont .soma04LiTit p { color: #2c9e41; } .soma04 .soma04Sack .soam04Btn { display: flex; justify-content: flex-end; padding-top: 36px; } .soma04 .soma04Sack .soam04Btn a { display: block; padding: 10px 42px; border: 1px solid #2c9e41; border-radius: 50px; transition: all 0.5s ease; } .soma04 .soma04Sack .soam04Btn a:hover { background: #2c9e41; } .soma04 .soma04Sack .soam04Btn a p { color: #2c9e41; transition: all 0.5s ease; } .soma04 .soma04Sack .soam04Btn a:hover p { color: #FFFFFF; } @media (max-width: 1536px) { #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .banContent .banTitle { width: 446px; max-width: 100%; } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitle h2 { font-size: 40px; } #somaBanner>.swiper-pagination { bottom: 4vh; } .soma01 .soma01Sack .soma01Ul { margin-right: calc(-.5* 1rem); margin-left: calc(-.5* 1rem); padding-bottom: 110px; } .soma01 .soma01Sack .soma01Ul .soma01Li { padding-right: calc(1rem* .5); padding-left: calc(1rem* .5); } .soma01Jp .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { transform: translateY(80%); } /* .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { transform: translateY(36%); } */ .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle { padding-bottom: 18px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle p { font-size: 18px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soam01LiBtn p { padding: 4px 26px; } .soma02 .soma02Sack .soma02Lf { margin-right: 58px; } .soma02 .soma02Sack .soma02Rg .soam02Title { padding-top: 10px; padding-bottom: 46px; } .soma02 .soma02Sack .soma02Rg .soma02Txt { padding-bottom: 84px; } .soma02 .soma02Sack .soma02Rg .soma02Btn p { padding: 4px 26px; } .soma03 .soma03Sack .soma03Str { max-width: 64%; } .soma03 .soma03Sack .soma03Mark { left: -34px; top: -18px; } .soma03 .soma03Sack .soma03Mark img { width: 42px; } .soma04 .soma04Sack .soma04Loca .soma04Lf { width: calc(78% - 10px); } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack { width: calc(50% - 10px); } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont { padding: 46px 20px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont .soma04LfTime { padding-bottom: 20px; } .soma04 .soma04Sack .soma04Loca .soma04Rg { margin-left: 22px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li a { padding-bottom: 20px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiCont .soma04LiTit { padding-bottom: 6px; } .soma04 .soma04Sack .soam04Btn a { padding: 4px 26px; } } @media (min-width: 1199.9px) and (max-width: 1400px) {} @media (max-width: 1199.9px) { .soma01 .soma01Sack .soma01Ul .soma01Li { margin-bottom: 30px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle p { font-size: 20px; } .soma02 .soma02Sack a { flex-direction: column-reverse; } .soma02 .soma02Sack .soma02Lf { margin-right: 0; width: 100%; margin-bottom: 30px; } .soma02 .soma02Sack .soma02Rg { width: 100%; margin-bottom: 30px; } .soma03 .soma03Sack .soma03Str { width: 672px; max-width: 100%; } .soma03 .soma03Img img { height: 240px; } .soma04 .soma04Sack .soma04Loca { flex-direction: column; } .soma04 .soma04Sack .soma04Loca .soma04Lf { width: 100%; flex-direction: column; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack { width: 100%; margin-bottom: 30px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack a { width: 100%; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack:nth-child(2) a { display: flex; flex-direction: column-reverse; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfImg i { display: none; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfImg { height: auto; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont { height: auto; } .soma04 .soma04Sack .soma04Loca .soma04Rg { margin-left: 0; width: 100%; } } @media (max-width: 768px) { #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitle { display: none; } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitlePh { display: block; } #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitle h2 { font-size: 26px; } .soma02 .soma02Sack .soma02Rg .soam02Title { padding-bottom: 36px; } .soma02 .soma02Sack .soma02Rg .soma02Txt { padding-bottom: 74px; } } @media (max-width: 499px) { #somaBanner>.swiper-wrapper .swiper-slide .banContent .banTitle h2 { font-size: 26px; } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) img { display: none; } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .immd { display: block; } #somaBanner>.swiper-wrapper .swiper-slide:nth-child(3) .banContent { position: absolute; top: 28%; } .soma01 .soma01Sack .soma01Ul { padding-bottom: 20px; } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt .soma01LiTitle p { font-size: 20px; } .soma01Jp .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { transform: translateY(82%); } /* .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack .soma01LiTxt { transform: translateY(18%); } .soma01 .soma01Sack .soma01Ul .soma01Li .soam01LiSack:hover .soma01LiTxt { transform: translateY(-276%); } */ .soma02 .soma02Sack { padding-bottom: 56px; } .soma02 .soma02Sack .soma02Lf { margin-bottom: 16px; } .soma02 .soma02Sack .soma02Rg .soam02Title { padding-bottom: 28px; } .soma02 .soma02Sack .soma02Rg .soma02Txt { padding-bottom: 46px; } .soma03 .soma03Img img { height: 180px; } .soma03 .soma03Sack .soma03Mark { left: -6px; top: -12px; } .soma03 .soma03Sack .soma03Mark img { width: 26px; } .soma04 .soma04Sack { padding-bottom: 34px; } .soma04 .soma04Sack .soam04Btn { padding-top: 20px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack { margin-bottom: 20px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont { padding: 32px 12px; } .soma04 .soma04Sack .soma04Loca .soma04Lf .soma04LfSack .soma04LfCont .soma04LfTime { padding-bottom: 12px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiImg { margin-right: 12px; width: 115px; } .soma04 .soma04Sack .soma04Loca .soma04Rg .soma04Ul .soma04Li .soma04LiCont .soma04LiTit { padding-bottom: 0px; } } #footer .footerTop { background: url(../images/footerbg.png) no-repeat; background-size: cover; /* background-position: center; */ padding-top: 180px; padding-bottom: 80px; } #footer .footerTop .footerSack { display: flex; } #footer .footerTop .footerSack .footerTpLf { width: 76%; } #footer .footerTop .footerSack .footerTpLf .footerUl { display: flex; justify-content: space-between; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi { position: relative; padding-right: 74px; margin-right: 18px; } #footer .footerTopJp .footerSack .footerTpLf .footerUl .footerLi { padding-right: 14px; margin-right: 8px; } #footer .footerTopJp .footerSack .footerTpLf .footerUl .footerLi:last-child { padding-right: 52px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi:last-child { padding-right: 116px; margin-right: 0px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi::after { position: absolute; content: ""; right: 0; top: 0; height: 100%; width: 1px; background: #DEDEDE; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack>a { padding-bottom: 16px; display: block; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack>a p { font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; transition: all 0.5s ease; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack>a:hover p { color: #2C9E41; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack .footerDd .footerDl { padding-bottom: 10px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack .footerDd .footerDl>a p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; transition: all 0.5s ease; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack .footerDd .footerDl>a:hover p { color: #2C9E41; } #footer .footerTop .footerSack .footerTpRg { width: 24%; padding-left: 68px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt1 { padding-bottom: 12px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt1 p { font-size: 18px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a { display: flex; margin-bottom: 12px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; transition: all 0.5s ease; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a:hover p { color: #2C9E41; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2:nth-of-type(4)>a:hover p { color: #666666; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a .footerIco { margin-right: 10px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a img { width: 15px; object-fit: cover; } #footer .footerBtm { background: #2C9E41; padding: 20px 0; } #footer .footerBtm .footerBtmSack { display: flex; justify-content: space-between; } #footer .footerBtm .footerBtmLf { display: flex; align-items: center; } #footer .footerBtm .footerBtmLf .copy { margin-right: 10px; } #footer .footerBtm .footerBtmLf .copy p { font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #FFFFFF; } #footer .footerBtm .footerBtmLf .filings p { font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #FFFFFF; } #footer .footerBtm .footerBtmRg .support p { font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #FFFFFF; } @media (max-width: 1536px) { #footer .footerTop { padding-top: 120px; padding-bottom: 50px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi { padding-right: 32px; margin-right: 18px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi:last-child { padding-right: 90px; } #footer .footerTopJp .footerSack .footerTpLf .footerUl .footerLi { padding-right: 14px; } #footer .footerTopJp .footerSack .footerTpLf .footerUl .footerLi:last-child { padding-right: 30px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack>a p { font-size: 14px; } #footer .footerTop .footerSack .footerTpLf .footerUl .footerLi .footerLiSack .footerDd .footerDl>a p { font-size: 14px; } #footer .footerTop .footerSack .footerTpRg { padding-left: 50px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt1 p { font-size: 16px; } #footer .footerTop .footerSack .footerTpRg .footerTpRgCon .footerTpRgTxt2>a p { font-size: 14px; } #footer .footerBtm { padding: 14px 0; } #footer .footerBtm .footerBtmLf .copy p { font-size: 12px; } #footer .footerBtm .footerBtmLf .filings p { font-size: 12px; } #footer .footerBtm .footerBtmRg .support p { font-size: 12px; } } @media (min-width: 1199.9px) and (max-width: 1400px) {} @media (max-width: 1199.9px) { #footer .footerTop { background-position: right; } #footer .footerTop .footerSack .footerTpLf { display: none; } #footer .footerTop .footerSack .footerTpRg { padding-left: 0px; } #footer .footerTop .footerSack .footerTpRg { width: 100%; } } @media (max-width: 499px) { #footer .footerTop { padding-top: 40px; padding-bottom: 20px; } #footer .footerBtm .footerBtmLf { margin-bottom: 4px; justify-content: center; } #footer .footerBtm .footerBtmSack { display: flex; justify-content: space-between; flex-direction: column; } #footer .footerBtm .footerBtmRg .support p { text-align: center; } } #eye .eyeSack { padding-top: 66px; } #eye .eyeSack .eyeAll { margin-bottom: 72px; } #eye .eyeSack .eyeAll a { display: flex; align-items: center; } #eye .eyeSack .eyeAll .eyeImg { overflow: hidden; border-radius: 10px; width: 34.5%; } #eye .eyeSack .eyeAll .eyeImg img { width: 100%; transition: all 0.8s ease; } #eye .eyeSack .eyeAll:hover .eyeImg img { transform: scale(1.1); } #eye .eyeSack .eyeAll .eyeCon { width: 65.5%; } #eye .eyeSack .eyeAll.eye01 .eyeCon { padding-left: 110px; } #eye .eyeSack .eyeAll.eye02 .eyeCon { padding-right: 110px; } #eye .eyeSack .eyeAll .eyeCon .eyeTime { padding-bottom: 18px; } #eye .eyeSack .eyeAll .eyeCon .eyeTime p { font-family: Arial; font-size: 20px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #eye .eyeSack .eyeAll .eyeCon .eyeTitle { padding-bottom: 30px; } #eye .eyeSack .eyeAll .eyeCon .eyeTitle p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; transition: all 0.5s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } #eye .eyeSack .eyeAll:hover .eyeCon .eyeTitle p { color: #2C9E41; } #eye .eyeSack .eyeAll .eyeCon .eyeText { padding-bottom: 40px; } #eye .eyeSack .eyeAll .eyeCon .eyeText p { font-size: 16px; font-weight: normal; /* line-height: 30px; */ letter-spacing: 0em; color: #666666; height: calc(1em* 2* 1.5); min-height: calc(12px* 2* 1.5); font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } #eye .eyeSack .eyeAll .eyeCon .eyeBtn { display: flex; } #eye .eyeSack .eyeAll .eyeCon .eyeBtn p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #2C9E41; padding: 10px 42px; border-radius: 50px; border: 1px solid #2C9E41; transition: all 0.5s ease; } #eye .eyeSack .eyeAll:hover .eyeCon .eyeBtn p { color: #FFFFFF; background: #2C9E41; } @media (max-width: 1536px) { #eye .eyeSack { padding-top: 54px; } #eye .eyeSack .eyeAll.eye01 .eyeCon { padding-left: 84px; } #eye .eyeSack .eyeAll.eye02 .eyeCon { padding-right: 84px; } #eye .eyeSack .eyeAll .eyeCon .eyeTime p { font-size: 18px; } #eye .eyeSack .eyeAll .eyeCon .eyeTitle p { font-size: 22px; } #eye .eyeSack .eyeAll .eyeCon .eyeText p { font-size: 14px; line-height: 22px; } #eye .eyeSack .eyeAll .eyeCon .eyeBtn p { font-size: 14px; padding: 4px 26px; } } @media (max-width: 992px) { #eye .eyeSack .eyeAll .eyeImg { width: 100%; margin-bottom: 20px; } #eye .eyeSack .eyeAll.eye01 a { flex-direction: column; } #eye .eyeSack .eyeAll.eye02 a { flex-direction: column-reverse; } #eye .eyeSack .eyeAll.eye01 .eyeCon { padding-left: 0; width: 100%; } #eye .eyeSack .eyeAll.eye02 .eyeCon { padding-right: 0; width: 100%; } } @media (max-width: 499px) { #eye .eyeSack { padding-top: 16px; } #eye .eyeSack .eyeAll { margin-bottom: 38px; } #eye .eyeSack .eyeAll .eyeCon .eyeTime { padding-bottom: 4px; } #eye .eyeSack .eyeAll .eyeCon .eyeTime p { font-size: 14px; } #eye .eyeSack .eyeAll .eyeCon .eyeTitle { padding-bottom: 16px; } #eye .eyeSack .eyeAll .eyeCon .eyeTitle p { font-size: 18px; } #eye .eyeSack .eyeAll .eyeCon .eyeText { padding-bottom: 32px; } } #eyeVis { padding-top: 72px; } #eyeVisSack { display: flex; padding-top: 60px; padding-bottom: 120px; align-items: flex-start; } #eyeVisSack .eyeVisLf { width: 74%; padding-right: 6vw; } #eyeVisSack .eyeVisLf .eyeVisLfTit { padding-bottom: 30px; } #eyeVisSack .eyeVisLf .eyeVisLfTit h2 { font-size: 30px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; } #eyeVisSack .eyeVisLf .eyeVisLfMi { display: flex; align-items: center; position: relative; padding-bottom: 22px; margin-bottom: 40px; } #eyeVisSack .eyeVisLf .eyeVisLfMi::after { position: absolute; content: ""; width: 100%; height: 1px; background: #DEDEDE; left: 0; bottom: 0; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt { margin-right: 30px; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt:last-child { margin-right: 0; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #eyeVisSack .eyeVisLf .eyeVisLfCon { display: flex; flex-direction: column; align-items: flex-start; } #eyeVisSack .eyeVisLf .eyeVisLfCon p { font-size: 16px; font-weight: normal; line-height: 28px; letter-spacing: 0em; color: #666666; margin-bottom: 10px; } #eyeVisSack .eyeVisLf .eyeVisLfCon img { max-width: 100%; margin-bottom: 10px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm { display: flex; align-items: center; justify-content: space-between; position: relative; padding-top: 32px; margin-top: 34px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm::after { position: absolute; content: ""; width: 100%; height: 1px; left: 0; top: 0; background: #DEDEDE; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn { max-width: 70%; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a p { font-size: 16px; font-weight: normal; line-height: 28px; letter-spacing: 0em; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a:hover p { color: #2C9E41; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a:first-child { margin-bottom: 14px; display: block; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a { border: 1px solid #2C9E41; display: block; border-radius: 50px; padding: 4px 20px; transition: all 0.5s ease; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a:hover { background: #2C9E41; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #2C9E41; transition: all 0.5s ease; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a:hover p { color: #FFFFFF; } #eyeVisSack .eyeVisRg { width: 26%; position: sticky; top: 86px; } #eyeVisSack .eyeVisRg .eyeVisRgTit { position: relative; padding-left: 14px; margin-bottom: 16px; } #eyeVisSack .eyeVisRg .eyeVisRgTit::after { position: absolute; content: ""; width: 4px; height: 64%; left: 0; top: 50%; transform: translateY(-50%); background: #2C9E41; } #eyeVisSack .eyeVisRg .eyeVisRgTit h2 { font-size: 30px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; } #eyeVisSack .eyeVisRg .eyeVisRgImg { border-radius: 8px; overflow: hidden; margin-bottom: 22px; } #eyeVisSack .eyeVisRg .eyeVisRgImg a { display: block; } #eyeVisSack .eyeVisRg .eyeVisRgImg a img { width: 100%; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a { display: block; position: relative; padding-bottom: 10px; margin-bottom: 16px; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a::after { position: absolute; content: ""; width: 100%; height: 1px; background: #DEDEDE; left: 0; bottom: 0; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTit { padding-bottom: 12px; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTit p { font-size: 18px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; transition: all 0.5s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a:hover .eyeVisRgLiTit p { color: #2C9E41; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTim p { font-family: Arial; font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } @media (max-width: 1536px) { #eyeVisSack { padding-top: 44px; padding-bottom: 74px; } #eyeVisSack .eyeVisLf .eyeVisLfTit h2 { font-size: 26px; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt { margin-right: 20px; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt p { font-size: 14px; } #eyeVisSack .eyeVisLf .eyeVisLfCon p { font-size: 14px; line-height: 22px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a:first-child { margin-bottom: 10px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a p { font-size: 14px; line-height: 24px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a p { font-size: 14px; } #eyeVisSack .eyeVisRg .eyeVisRgTit h2 { font-size: 26px; } #eyeVisSack .eyeVisRg .eyeVisRgImg { margin-bottom: 14px; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTit { padding-bottom: 8px; } #eyeVisSack .eyeVisRg .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTit p { font-size: 16px; } .eyeVisRgUl .eyeVisRgLi a .eyeVisRgLiTim p { font-size: 14px; } } @media (max-width: 1199.9px) { #eyeVisSack .eyeVisLf { padding-right: 0; width: 100%; } #eyeVisSack .eyeVisRg { display: none; } } @media (max-width: 499px) { #eyeVisSack { padding-top: 14px; padding-bottom: 34px; } #eyeVisSack .eyeVisLf .eyeVisLfTit h2 { font-size: 22px; } #eyeVisSack .eyeVisLf .eyeVisLfTit { padding-bottom: 14px; } #eyeVisSack .eyeVisLf .eyeVisLfMi { padding-bottom: 14px; margin-bottom: 24px; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt { margin-right: 12px; } #eyeVisSack .eyeVisLf .eyeVisLfMi .eyeVisLfMiTxt p { font-size: 12px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm { padding-top: 16px; margin-top: 12px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisBtn a:first-child { margin-bottom: 2px; } #eyeVisSack .eyeVisLf .eyeVisLfBtm .eyeVisBtm .eyeVisRe a { padding: 2px 12px; } } #makeup { position: relative; } #makeup .makeupImg { overflow: hidden; } #makeup .makeupImg img { width: 100%; object-fit: cover; } #makeup .makeupSack { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @media (max-width: 1199.9px) { #makeup .makeupImg img { height: 400px; } } @media (max-width: 499px) { #makeup .makeupImg img { height: 300px; } } #hair { padding: 36px 0; } #hair .hairSack .hairUl { display: flex; align-items: center; } #hair .hairSack .hairUl .hairLi { margin-right: 68px; } #hair .hairSack .hairUl .hairLi:last-child { margin-right: 0; } #hair .hairSack .hairUl .hairLi a { position: relative; display: block; padding-bottom: 8px; } #hair .hairSack .hairUl .hairLi a:after { content: ""; position: absolute; width: 100%; height: 4px; bottom: 0; left: 0; background: #2C9E41; transition: all 0.5s ease; opacity: 0; } #hair .hairSack .hairUl .hairLi .active::after { opacity: 1; } #hair .hairSack .hairUl .hairLi a:hover:after { opacity: 1; } #hair .hairSack .hairUl .hairLi a p { transition: all 0.5s ease; } #hair .hairSack .hairUl .hairLi .active p { color: #2C9E41; } #hair .hairSack .hairUl .hairLi a:hover p { color: #2C9E41; } @media (max-width: 1536px) { #hair { padding: 28px 0; } #hair .hairSack .hairUl .hairLi { margin-right: 54px; } } @media (max-width: 499px) { #hair .hairSack .hairUl .hairLi { margin-right: 32px; } #hair .hairSack .hairUl .hairLi a { padding-bottom: 6px; } #hair .hairSack .hairUl .hairLi a:after { height: 2px; } } #value { padding: 28px 0 46px; } #value .pagination { justify-content: center; } #value .pagination .page-item { margin: 0 10px; } #value .pagination .page-item.disabled { opacity: 0; } #value .pagination .page-item:first-child { margin: 0; } #value .pagination .page-item:last-child { margin: 0; } #value .pagination .page-item a { font-size: 18px; border: none; border: 1px solid #DEDEDE; border-radius: 50%; padding: 10px 18px; color: #333333; transition: all 0.5s ease; } #value .pagination .page-item:hover a { color: #FFFFFF; border-color: #2C9E41; background: #2C9E41; } #value .pagination .page-item:first-child:hover a { color: #2C9E41; border-color: none; background: none; } #value .pagination .page-item:last-child:hover a { color: #2C9E41; border-color: none; background: none; } #value .pagination .page-item:first-child a { border: none; } #value .pagination .page-item:last-child a { border: none; } #value .pagination .page-item.active a { color: #FFFFFF; border-color: #2C9E41; background: #2C9E41; } @media (max-width: 1536px) { #value { padding: 8px 0 46px; } #value .pagination .page-item { margin: 0 5px; } #value .pagination .page-item a { font-size: 14px; padding: 8px 15px; } } @media (max-width: 499px) { #value .pagination .page-item a { padding: 4px 11px; } } #nail .nailSack { padding-top: 76px; } #nail .nailSack .nailList .nailBox { display: flex; justify-content: space-between; align-items: center; position: relative; padding-bottom: 36px; margin-bottom: 56px; } #nail .nailSack .nailList:last-child .nailBox { margin-bottom: 32px; } #nail .nailSack .nailList .nailBox::before { position: absolute; content: ""; width: 100%; height: 1px; left: 0; bottom: 0; background: #DEDEDE; } #nail .nailSack .nailList .nailBox::after { position: absolute; content: ""; width: 0; height: 1px; left: 0; bottom: 0; background: #2C9E41; transition: all 0.8s ease; } #nail .nailSack .nailList:hover .nailBox::after { width: 100%; } #nail .nailSack .nailList .nailBox .nailLf { display: flex; align-items: flex-end; max-width: 70%; } #nail .nailSack .nailList .nailBox .nailLf .nailTim { min-width: 266px; } #nail .nailSack .nailList .nailBox .nailLf .nailTim p { font-family: Arial; font-size: 24px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #nail .nailSack .nailList .nailBox .nailLf .nailTit p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; transition: all 0.5s ease; } #nail .nailSack .nailList:hover .nailBox .nailLf .nailTit p { color: #2C9E41; } #nail .nailSack .nailList .nailBox .nailRg { display: flex; align-items: center; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnTx { padding-right: 20px } #nail .nailSack .nailList .nailBox .nailRg .nailBtnTx p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #2C9E41; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnIc { padding-right: 2px; } @media (max-width: 1536px) { #nail .nailSack { padding-top: 62px; } #nail .nailSack .nailList .nailBox { padding-bottom: 30px; margin-bottom: 46px; } #nail .nailSack .nailList .nailBox .nailLf .nailTim { min-width: 200px; } #nail .nailSack .nailList .nailBox .nailLf .nailTim p { font-size: 18px; } #nail .nailSack .nailList .nailBox .nailLf .nailTit p { font-size: 18px; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnTx { padding-right: 16px; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnTx p { font-size: 14px; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnIc img { width: 24px; } } @media (max-width: 768px) { #nail .nailSack .nailList .nailBox .nailLf { flex-direction: column-reverse; align-items: flex-start; max-width: 60%; } #nail .nailSack .nailList .nailBox .nailLf .nailTit { padding-bottom: 4px; } #nail .nailSack .nailList .nailBox .nailLf .nailTim { min-width: 154px; } } @media (max-width: 499px) { #nail .nailSack { padding-top: 12px; } #nail .nailSack .nailList .nailBox { padding-bottom: 16px; margin-bottom: 20px; } #nail .nailSack .nailList:last-child .nailBox { margin-bottom: 22px; } #nail .nailSack .nailList .nailBox .nailLf { max-width: 80%; } #nail .nailSack .nailList .nailBox .nailLf .nailTim p { font-size: 14px; } #nail .nailSack .nailList .nailBox .nailRg .nailBtnTx { padding-right: 0; display: none; } } #tell .tellSack { padding-top: 72px; } #tell .tellSack .tellList { position: relative; padding-left: 48px; padding-right: 6px; } #tell .tellSack .tellList::before { position: absolute; content: ""; width: 100%; height: 1px; left: 0; bottom: 0; background: #DEDEDE; } #tell .tellSack .tellList::after { position: absolute; content: ""; width: 100%; height: 1px; left: 0; bottom: 0; background: #2C9E41; opacity: 0; } #tell .tellSack .tellList .tellBox { margin-bottom: 46px; } #tell .tellSack .tellList:last-child .tellBox { margin-bottom: 30px; } #tell .tellSack .tellList .tellBox .tellLight { display: flex; justify-content: space-between; margin-bottom: 36px; } #tell .tellSack .tellList .tellBox .tellLight .tellLightTit { max-width: 88%; } #tell .tellSack .tellList .tellBox .tellLight .tellLightTit p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; transition: all 0.5s ease; } #tell .tellSack .tellList.on .tellBox .tellLight .tellLightTit p { color: #2C9E41; } #tell .tellSack .tellList .tellBox .tellLight .tellLightIco i { font-size: 24px; font-weight: bolder; color: #333333; transition: all 0.5s ease; display: block; } #tell .tellSack .tellList.on .tellBox .tellLight .tellLightIco i { color: #2C9E41; transition: all 0.5s ease; transform: rotate(-180deg); } #tell .tellSack .tellList .tellBox .tellDark { max-height: 0; overflow: hidden; transition: all ease 0.5s; opacity: 0; } #tell .tellSack .tellList.on .tellBox .tellDark { max-height: 500px; opacity: 1; transition: all ease 1s; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText { padding-bottom: 58px; max-width: 88%; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText p { font-size: 16px; font-weight: normal; line-height: 30px; letter-spacing: 0em; color: #666666; } @media (max-width: 1536px) { #tell .tellSack { padding-top: 54px; } #tell .tellSack .tellList { padding-left: 40px; } #tell .tellSack .tellList .tellBox { margin-bottom: 34px; } #tell .tellSack .tellList .tellBox .tellLight { margin-bottom: 24px; } #tell .tellSack .tellList .tellBox .tellLight .tellLightTit p { font-size: 18px; } #tell .tellSack .tellList .tellBox .tellLight .tellLightIco i { font-size: 18px; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText { padding-bottom: 44px; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText p { font-size: 14px; line-height: 26px; } } @media (max-width: 768px) { #tell .tellSack .tellList { padding-left: 0px; } } @media (max-width: 499px) { #tell .tellSack { padding-top: 18px; } #tell .tellSack .tellList .tellBox { margin-bottom: 18px; } #tell .tellSack .tellList:last-child .tellBox { margin-bottom: 22px; } #tell .tellSack .tellList .tellBox .tellLight { margin-bottom: 14px; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText { max-width: 100%; padding-bottom: 26px; } #tell .tellSack .tellList .tellBox .tellDark .tellDarkText p { line-height: 22px; } } #chest { padding-top: 72px; } #chest .chest01 { background: url(../images/conusbg.jpg) no-repeat; background-size: cover; background-position: left; padding-top: 88px; padding-bottom: 86px; } #chest .chest01 .chest01Sack .chest01Tit { padding-bottom: 100px; width: 86%; margin: auto; } #chest .chest01 .chest01Sack .chest01Tit p { font-size: 48px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #333333; } #chest .chest01 .chest01Sack .chest01Box { display: flex; width: 86%; margin: auto; margin-bottom: 58px; } #chest .chest01 .chest01Sack .chest01Box .chest01Ct:nth-child(1) { margin-right: 11.2vw; } #chest .chest01 .chest01Sack>.chest01Ct { width: 86%; margin: auto; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc { display: flex; align-items: flex-end; margin-bottom: 12px; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc .chest01Ico { padding-right: 10px; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc .chest01Smt p { font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #666666; } #chest .chest01 .chest01Sack .chest01Ct .chest01Txt p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; } #chest .chest01 .chest01Sack>.chest01Ct .chest01Txt { width: 470px; max-width: 100%; } #chest .chest02 .chest02Sack { padding-top: 70px; padding-bottom: 88px; } #chest .chest02 .chest02Sack .chest02Tit { padding-bottom: 50px; } #chest .chest02 .chest02Sack .chest02Tit p { font-size: 48px; font-weight: bold; line-height: normal; text-align: center; letter-spacing: 0em; color: #333333; } @media (max-width: 1536px) { #chest { padding-top: 62px; } #chest .chest01 { padding-top: 56px; padding-bottom: 54px; } #chest .chest01 .chest01Sack .chest01Tit { padding-bottom: 80px; } #chest .chest01 .chest01Sack .chest01Tit p { font-size: 28px; } #chest .chest01 .chest01Sack .chest01Box { margin-bottom: 38px; } #chest .chest01 .chest01Sack>.chest01Ct .chest01Txt { width: 398px; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc .chest01Smt p { font-size: 14px; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc .chest01Ico img { width: 18px; } #chest .chest01 .chest01Sack .chest01Ct .chest01Txt p { font-size: 18px; } #chest .chest02 .chest02Sack { padding-top: 60px; padding-bottom: 78px; } #chest .chest02 .chest02Sack .chest02Tit { padding-bottom: 40px; } #chest .chest02 .chest02Sack .chest02Tit p { font-size: 28px; } } @media (max-width: 992px) { #chest .chest01 .chest01Sack .chest01Tit { width: 100%; } #chest .chest01 .chest01Sack .chest01Box { width: 100%; } #chest .chest01 .chest01Sack>.chest01Ct { width: 100%; } } @media (max-width: 499px) { #chest { padding-top: 22px; } #chest .chest01 { background-position: center; padding-top: 24px; padding-bottom: 30px; } #chest .chest01 .chest01Sack .chest01Tit { padding-bottom: 42px; } #chest .chest01 .chest01Sack .chest01Tit p { font-size: 24px; } #chest .chest01 .chest01Sack .chest01Box { margin-bottom: 20px; flex-direction: column; } #chest .chest01 .chest01Sack .chest01Box .chest01Ct:nth-child(1) { margin-right: 0; margin-bottom: 20px; } #chest .chest01 .chest01Sack .chest01Ct .chest01CtLoc { margin-bottom: 8px; } #chest .chest02 .chest02Sack { padding-top: 40px; padding-bottom: 42px; } #chest .chest02 .chest02Sack .chest02Tit { padding-bottom: 24px; } #chest .chest02 .chest02Sack .chest02Tit p { font-size: 24px; } } #expose01 .expose01Sack { display: flex; justify-content: space-between; padding-top: 68px; } #expose01 .expose01Sack .exp01Lf { width: 38%; margin: auto 0; } #exp01Sw { overflow: hidden; position: relative; padding-bottom: 120px; } #exp01Sw>.swiper-wrapper .swiper-slide .exp01Tit { padding-bottom: 28px; } #exp01Sw>.swiper-wrapper .swiper-slide .exp01Tex p { font-size: 16px; font-weight: normal; line-height: 30px; text-align: justify; letter-spacing: 0em; color: #666666; } #exp01Sw>.swiper-pagination { display: flex; justify-content: start; } #exp01Sw>.swiper-pagination .swiper-pagination-bullet { width: 40px; height: 2px; border-radius: 4px; transition: all 0.5s ease; margin: 0; margin-right: 20px; } #exp01Sw>.swiper-pagination .swiper-pagination-bullet:last-child { margin-right: 0; } #exp01Sw>.swiper-pagination .swiper-pagination-bullet-active { width: 70px; background: #2C9E41; } #expose01 .expose01Sack .exp01Rg { width: 51%; } #expose01 .expose01Sack .exp01Rg .exp01RgImg { border-radius: 30px; overflow: hidden; } #expose01 .expose01Sack .exp01Rg .exp01RgImg img { width: 100%; } #expose02 { padding-top: 144px; } #expose02 .expose02Tit { padding-bottom: 40px; } #expose02 .exp02Vis { position: relative; } #expose02 .expose02Loca { display: flex; justify-content: flex-end; } #expose02 .expose02Loca .expose02Bg { width: 70%; border-radius: 30px 0 0 30px; overflow: hidden; } #expose02 .expose02Loca .expose02Bg img { width: 100%; } #expose02 .expose02Sack { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #expose02 .expose02Sack .exp02Ul { width: 52.5%; } #expose02 .expose02Sack .exp02Ul .exp02Li { background: #FFFFFF; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15); border-radius: 20px; overflow: hidden; margin-bottom: 26px; transition: all 0.5s ease; } #expose02 .expose02Sack .exp02Ul .exp02Li:hover { background: #2C9E41; } #expose02 .expose02Sack .exp02Ul .exp02Li:last-child { margin-bottom: 0; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack { display: flex; align-items: center; padding: 26px 40px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf { margin-right: 60px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat { background: #F4F4F4; border-radius: 50%; overflow: hidden; padding: 20px 0; width: 128px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat p { font-family: D-DIN-Bold; font-size: 80px; line-height: normal; letter-spacing: 0em; background: linear-gradient(70deg, #46BC5C 4%, #1F6ED4 144%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; opacity: 0.8; text-align: center; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Rg .exp02Tit { padding-bottom: 12px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Rg .exp02Tit p { transition: all 0.5s ease; } #expose02 .expose02Sack .exp02Ul .exp02Li:hover .exp02LiSack .exp02Rg .exp02Tit p { color: #FFFFFF; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Rg .exp02Tex p { font-size: 18px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; transition: all 0.5s ease; } #expose02 .expose02Sack .exp02Ul .exp02Li:hover .exp02LiSack .exp02Rg .exp02Tex p { color: #FFFFFF; } #expose03 { padding-top: 160px; } #expose03 .exp03Sack { display: flex; align-items: center; } #expose03 .exp03Sack .exp03Lf { width: 51.4%; } #expose03 .exp03Sack .exp03Lf .exp03Img { overflow: hidden; border-radius: 0 30px 30px 0; } #expose03 .exp03Sack .exp03Lf .exp03Img img { width: 100%; } #expose03 .exp03Sack .exp03Rg { width: 48.6%; display: flex; justify-content: center; } #expose03 .exp03Sack .exp03Rg .exp03Con { width: 84%; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tit { padding-bottom: 136px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit { position: relative; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit img { position: absolute; left: -10px; top: -40px; z-index: -1; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit { padding-left: 28px; padding-bottom: 60px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit p { font-size: 40px; font-weight: bold; line-height: 60px; letter-spacing: 0em; color: #2C9E41; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tex { width: 540px; max-width: 100%; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tex p { font-size: 20px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #expose04 { padding-top: 172px; padding-bottom: 84px; } #expose04 .exp04Sack .exp04Li { position: relative; } #expose04 .exp04Sack .exp04Li::after { position: absolute; right: 0; top: 12%; width: 1px; height: 45%; content: ""; background: #2C9E41; opacity: 0.5; } #expose04 .exp04Sack .exp04Li:last-child:after { opacity: 0; } #expose04 .exp04Sack .exp04Li .exp04LiSack { display: flex; flex-direction: column; align-items: center; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIc { padding: 65px; /* background: #ECF6EE; */ border-radius: 50%; margin-bottom: 20px; position: relative; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIc::after { position: absolute; width: 100%; height: 100%; content: ""; left: 0; top: 0; border-radius: 50%; background: #ECF6EE; z-index: -1; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIco { background: #2C9E41; border-radius: 50%; overflow: hidden; padding: 25px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04SmTit { padding-bottom: 10px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04SmTit p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #666666; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04Tit p { text-align: center; } @media (max-width: 1536px) { #expose01 .expose01Sack { padding-top: 40px; } #expose01 .expose01Sack .exp01Lf { width: 42%; } #exp01Sw { padding-bottom: 100px; } #exp01Sw>.swiper-wrapper .swiper-slide .exp01Tex p { font-size: 14px; line-height: 24px; } #expose01 .expose01Sack .exp01Rg { width: 48%; } #expose02 .expose02Sack .exp02Ul .exp02Li { margin-bottom: 18px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack { padding: 14px 28px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat { width: 106px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat p { font-size: 60px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Rg .exp02Tex p { font-size: 14px; } #expose02 { padding-top: 130px; } #expose02 .expose02Loca .expose02Bg img { height: 700px; object-fit: cover; } #expose03 .exp03Sack .exp03Lf .exp03Img img { height: 380px; object-fit: cover; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tit { padding-bottom: 110px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit { padding-left: 14px; padding-bottom: 50px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit img { width: 38px; top: -22px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit p { font-size: 22px; line-height: 34px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tex p { font-size: 14px; line-height: 22px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04SmTit p { font-size: 22px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIc { padding: 34px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIco { padding: 10px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04LiIco img { width: 70px; } } @media (max-width: 1199.9px) { #expose01 .expose01Sack { flex-direction: column; } #expose01 .expose01Sack .exp01Lf { width: 100%; margin-bottom: 20px; } #expose01 .expose01Sack .exp01Rg { width: 100%; } #expose02 .expose02Sack .exp02Ul { width: 64%; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf { margin-right: 30px; } } @media (max-width: 992px) { #expose03 .exp03Sack { align-items: flex-start; flex-direction: column; } #expose03 .exp03Sack .exp03Lf { width: 93%; margin-bottom: 40px; } #expose03 .exp03Sack .exp03Rg { width: 86%; margin: auto; display: block; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tit { padding-bottom: 74px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit { padding-bottom: 34px; } #expose04 { padding-top: 90px; } #expose04 .exp04Sack .exp04Li { margin-bottom: 40px; } #expose04 .exp04Sack .exp04Li::after { opacity: 0; } } @media (max-width: 768px) { #expose02 .expose02Sack .exp02Ul { width: 100%; } } @media (max-width: 499px) { #exp01Sw { padding-bottom: 60px; } #expose02 { padding-top: 62px; } #expose02 .expose02Loca .expose02Bg img { height: 588px; object-position: 68%; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack { padding: 12px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf { margin-right: 12px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat { width: 84px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Lf .exp02Mat p { font-size: 40px; } #expose02 .expose02Sack .exp02Ul .exp02Li .exp02LiSack .exp02Rg .exp02Tit { padding-bottom: 6px; } #expose03 { padding-top: 66px; } #expose03 .exp03Sack .exp03Lf { margin-bottom: 28px; } #expose03 .exp03Sack .exp03Lf .exp03Img img { height: 240px; } #expose03 .exp03Sack .exp03Rg .exp03Con { width: 100%; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03Tit { padding-bottom: 64px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit { padding-bottom: 26px; } #expose03 .exp03Sack .exp03Rg .exp03Con .exp03SmTit p { font-size: 20px; line-height: 30px; } #expose04 { padding-top: 70px; padding-bottom: 18px; } #expose04 .exp04Sack .exp04Li .exp04LiSack .exp04SmTit p { font-size: 18px; } } #makeup .cilSack { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #makeup .cilSack .cilTit { padding-bottom: 44px; } #makeup .cilSack .cilTex { width: 864px; max-width: 100%; padding-bottom: 40px; } #silicaGel .sil01 .sil01Sack .sil01Tit h2 { text-align: center; } #silicaGel .sil01 .sil01Sw { position: relative; padding-bottom: 32px; } #sil01Sw { overflow: hidden; } #sil01Sw>.swiper-pagination { bottom: 0; } #sil01Sw>.swiper-pagination .swiper-pagination-bullet-active { background: #2C9E41; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li { height: auto !important; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa { background: #E9F0EB; border-radius: 20px; overflow: hidden; height: 100%; padding: 40px 46px 50px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico { padding-bottom: 14px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico img { height: 50px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01SmTit { padding-bottom: 8px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01SmTit p { font-size: 24px; font-weight: 500; line-height: normal; letter-spacing: 0em; color: #333333; height: calc(1em* 2* 1.5); min-height: calc(12px* 2* 1.5); font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Tex p { font-size: 14px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #silicaGel .cil02 .sil02Sack .sil02Tit h2 { text-align: center; } #silicaGel .cil02 .sil02Con .sil02Ul { margin: auto; margin-bottom: 40px; border-bottom: 1px solid #D8D8D8; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li { padding: 0; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit { position: relative; padding-bottom: 22px; cursor: pointer; height: 100%; } /* #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background: #D8D8D8; } */ #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit::after { position: absolute; content: ""; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 4px; background: #2C9E41; /* opacity: 0; */ transition: all 0.5s ease; } /* #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li:hover .sil02LiTit::after { opacity: 1; } */ #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li.active .sil02LiTit::after { width: 100%; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit p { font-size: 22px; font-weight: normal; line-height: normal; letter-spacing: 0em; text-align: center; color: #333333; transition: all 0.5s ease; } /* #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li:hover .sil02LiTit p { color: #2C9E41; } */ #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li.active .sil02LiTit p { color: #2C9E41; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02Img { display: flex; justify-content: center; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02Img img { max-width: 100%; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02TabBox .sil02TabTit { position: relative; margin-bottom: 30px; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02TabBox .sil02TabTit::before { position: absolute; content: ""; width: 100%; height: 2px; left: 0; bottom: 0; background: #2C9E41; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02TabBox .sil02TabTit h2 { text-align: center; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02TabBox .sil02Table .sil02Tableimg { display: flex; justify-content: center; } #silicaGel .cil02 .sil02Con .sil02Btm .sil02BtmSack .sil02TabBox .sil02Table .sil02Tableimg img { max-width: 100%; } #silicaGel .cil03 { padding-bottom: 114px; } #silicaGel .cil03 .cil03Sack .cil03Tit h2 { text-align: center; } #silicaGel .cil03 .cil03Sw { position: relative; width: 94%; margin: auto; } #cil03SwLas { /* position: relative; */ overflow: hidden; width: 92%; margin: auto; } #cil03SwLas>.swiper-wrapper .swiper-slide a { display: block; } #cil03SwLas>.swiper-wrapper .swiper-slide a .cil03SwImg { overflow: hidden; border-radius: 20px; } #cil03SwLas>.swiper-wrapper .swiper-slide a .cil03SwImg img { width: 100%; } #cil03SwLas>.swiper-button-prev { left: 0; border: 1px solid #DEDEDE; border-radius: 50%; width: 50px; height: 50px; transition: all 0.5s ease; } #cil03SwLas>.swiper-button-prev:hover { background: #2C9E41; border-color: #2C9E41; } #cil03SwLas>.swiper-button-prev::after { font-size: 20px; font-weight: bold; color: #333333; transition: all 0.5s ease; } #cil03SwLas>.swiper-button-prev:hover:after { color: #FFFFFF; } #cil03SwLas>.swiper-button-next { right: 0; border: 1px solid #DEDEDE; border-radius: 50%; width: 50px; height: 50px; transition: all 0.5s ease; } #cil03SwLas>.swiper-button-next:hover { background: #2C9E41; border-color: #2C9E41; } #cil03SwLas>.swiper-button-next::after { font-size: 20px; font-weight: bold; color: #333333; transition: all 0.5s ease; } #cil03SwLas>.swiper-button-next:hover::after { color: #FFFFFF; } #cil03SwLas>.swiper-pagination { display: none; } @media (max-width: 1536px) { #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa { padding: 28px 14px 28px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01SmTit p { font-size: 20px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico { padding-bottom: 10px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico img { height: 40px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit p { font-size: 16px; } #cil03SwLas { width: 90%; } #cil03SwLas>.swiper-button-prev { width: 36px; height: 36px; } #cil03SwLas>.swiper-button-prev::after { font-size: 14px; } #cil03SwLas>.swiper-button-next { width: 36px; height: 36px; } #cil03SwLas>.swiper-button-next::after { font-size: 14px; } } @media (max-width: 1199.9px) { #makeup .makeupImgSil img { height: auto; min-height: 400px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li { width: auto; flex: auto; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit p { font-size: 14px; } } @media (max-width: 992px) { #cil03SwLas>.swiper-button-prev { display: none; } #cil03SwLas>.swiper-button-next { display: none; } #cil03SwLas>.swiper-pagination { display: block; bottom: -38px; } #cil03SwLas>.swiper-pagination .swiper-pagination-bullet-active { background: #2C9E41; } } @media (max-width: 768px) { #silicaGel .cil02 .sil02Con .sil02Ul { border-bottom: none; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li { flex: 100%; margin-bottom: 10px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit { padding-bottom: 12px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit p { font-size: 16px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background: #D8D8D8; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit::after { height: 2px; } } @media (max-width: 499px) { #makeup .cilSack .cilTit { padding-bottom: 26px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01SmTit p { font-size: 18px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico { padding-bottom: 4px; } #silicaGel .sil01 .sil01Sack .cil01Ul .cil01Li .cil01LiSa .cil01Ico img { height: 30px; } #silicaGel .cil02 .sil02Con .sil02Ul .sil02Li .sil02LiTit::after { height: 2px; } #silicaGel .cil03 { padding-bottom: 73px; } } #kill01 { background: url(../images/killbg.jpg) no-repeat; background-size: cover; background-position: center; } #kill01 .kill01Sack { display: flex; align-items: center; padding-top: 234px; padding-bottom: 114px; } #kill01 .kill01Sack .kil01Lf { width: 62%; padding-right: 6vw; } #kill01 .kill01Sack .kil01Lf .kil01Tit { padding-bottom: 42px; } #kill01 .kill01Sack .kil01Lf .kil01Tit h2 { font-size: 48px; font-weight: bold; line-height: 60px; letter-spacing: 0em; color: #FFFFFF; } #kill01 .kill01Sack .kil01Lf .kil01Box { margin-bottom: 28px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li { text-decoration: none; display: inline-block; vertical-align: top; position: relative; border: 1px solid #FFFFFF; border-radius: 50px; padding: 4px 22px; margin-right: 22px; margin-bottom: 12px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li:last-child { margin-right: 0; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li p { font-size: 20px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #FFFFFF; } #kill01 .kill01Sack .kil01Lf .kil01Tex { height: 170px; overflow-y: auto; padding-right: 10px; } #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar-thumb { border-radius: 3px !important; background: #FFFFFF !important; } #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar { width: 3px !important; height: 3px !important; } #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar-track { background-color: #DEDEDE !important; border-radius: 3px !important; } #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar-thumb, #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar-thumb:hover, #kill01 .kill01Sack .kil01Lf .kil01Tex::-webkit-scrollbar-thumb:active { border-radius: 3px !important; background: #FFFFFF !important; background-clip: content-box !important; } #kill01 .kill01Sack .kil01Lf .kil01Tex p { font-size: 18px; font-weight: normal; line-height: 28px; letter-spacing: 0em; color: #FFFFFF; } #kill01 .kill01Sack .kil01Rg { width: 38%; position: relative; padding-bottom: 34px; } #kil01Sw { overflow: hidden; } #kil01Sw>.swiper-wrapper .swiper-slide .kil01Img { border-radius: 20px; overflow: hidden; } #kil01Sw>.swiper-wrapper .swiper-slide .kil01Img img { width: 100%; } #kil01Sw>.swiper-pagination { bottom: 0; } #kil01Sw>.swiper-pagination .swiper-pagination-bullet-active { background: #FFFFFF; opacity: 1; } #kil02 { background: #E9F0EB; } #kil02 .kil02Sack .kil02Tit { padding-bottom: 80px; } #kil02 .kil02Sack { padding-bottom: 128px; } #kil02 .kil02Sack .kil02Tit h2 { text-align: center; } #kil02 .kil02Sack .kil02Ul { justify-content: center; margin-right: calc(-.5* 2.5rem); margin-left: calc(-.5* 2.5rem); } #kil02 .kil02Sack .kil02Ul .Kil02Li { padding-right: calc(2.5rem* .5); padding-left: calc(2.5rem* .5); } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Box { border-radius: 10px; background: #FFFFFF; overflow: hidden; height: 100%; padding: 36px 0 28px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Ico { display: flex; justify-content: flex-end; padding-right: 30px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02SmTit { position: relative; padding-left: 30px; margin-bottom: 8px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02SmTit::before { position: absolute; content: ""; width: 4px; height: 78%; left: 0; top: 50%; transform: translateY(-50%); background: #2C9E41; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02SmTit p { font-size: 24px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #333333; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Tex { padding: 0 63px 0 30px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Tex p { font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; } #kil03Tit { padding-top: 20px; } #kil03Tit p { font-size: 24px; font-weight: 500; line-height: normal; text-align: center; letter-spacing: 0em; color: #333333; } #kil04 { position: relative; } #kil04 .kil04Bg img { width: 100%; object-fit: cover; } #kil04 .kil04Con { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; } #kil04 .kil04Con .kil04Tit { padding: 0; padding-bottom: 28px; } #kil04 .kil04Con .kil04Tit h2 { color: #FFFFFF; text-align: center; } #kil04 .kil04Con .kil04Tex { width: 530px; max-width: 100%; } #kil04 .kil04ConJp .kil04Tex { width: 930px; } #kil04 .kil04Con .kil04Tex p { font-size: 18px; font-weight: 500; line-height: normal; text-align: center; letter-spacing: 0em; color: #FFFFFF; } #kil04 .kil04Ul { justify-content: center; position: absolute; left: 50%; bottom: -28%; transform: translateX(-50%); margin-right: calc(-.5* 2rem); margin-left: calc(-.5* 2rem); } #kil04 .kil04UlJp { bottom: -34%; } #kil04 .kil04Ul .kil04Li { padding-right: calc(2rem* .5); padding-left: calc(2rem* .5); } #kil04 .kil04Ul .kil04Li .kil04box { background: #FFFFFF; position: relative; padding: 42px 19px 54px; height: 100%; } #kil04 .kil04UlJp .kil04Li .kil04box { padding: 30px 19px 36px; } #kil04 .kil04Ul .kil04Li .kil04box::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 6px; background: #2C9E41; } #kil04 .kil04Ul .kil04Li .kil04Ma p { font-family: D-DIN-Bold; font-size: 120px; line-height: 120px; letter-spacing: 0em; color: #2C9E41; opacity: 0.08; } #kil04 .kil04UlJp .kil04Li .kil04Ma p { font-size: 100px; } #kil04 .kil04Ul .kil04Li .kil04LiTit p { font-size: 22px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #333333; } #kil04 .kil04UlJp .kil04Li .kil04LiTit p { font-size: 20px; } #kil04 .kil04Ul .kil04Li .kil04LiSmTit p { font-size: 22px; font-weight: bold; line-height: normal; letter-spacing: 0em; color: #2C9E41; } #kil04 .kil04UlJp .kil04Li .kil04LiSmTit p { font-size: 20px; } #kil05 { background: #E9F0EB; padding-top: 190px; padding-bottom: 154px; } .kil05 { padding-top: 0 !important; } #kil05 .kil05Sack .kil05Tit h2 { text-align: center; } #kil05 .kil05Sack .kil05Ul { justify-content: center; margin-right: calc(-.5* 2.6rem); margin-left: calc(-.5* 2.6rem); } #kil05 .kil05Sack .kil05Ul .kil05Li { padding-right: calc(2.6rem* .5); padding-left: calc(2.6rem* .5); } #kil05 .kil05Sack .kil05Ul .kil05Li a { display: block; } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox { display: flex; flex-direction: column; align-items: center; background: #FFFFFF; border-radius: 10px; padding-bottom: 46px; } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox .kil05Img { width: 100%; } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox .kil05Img img { width: 100%; } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox .kil05Tit p { font-size: 24px; font-weight: bold; line-height: 34px; text-align: center; letter-spacing: 0em; color: #3D9E2C; } #kil06 { padding-bottom: 50px; } #kil06 .kil06Tit h2 { text-align: center; } #kil06 .kil06Sw { position: relative; } #kil06Swp { overflow: hidden; } #kil06Swp>.swiper-wrapper .swiper-slide .kil06Sack { position: relative; border-radius: 20px; overflow: hidden; } #kil06Swp>.swiper-wrapper .swiper-slide .kil06Sack .kil06Img img { width: 100%; } #kil06Swp>.swiper-wrapper .swiper-slide .kil06Sack .kil0SwTex { position: absolute; width: 100%; left: 0; bottom: 6%; } #kil06Swp>.swiper-wrapper .swiper-slide .kil06Sack .kil0SwTex p { font-size: 24px; font-weight: 500; line-height: normal; text-align: center; letter-spacing: 0em; color: #FFFFFF; } #kil06Swp>.swiper-button { display: flex; justify-content: flex-end; padding-right: 10%; height: 132px; } #kil06Swp>.swiper-button .swiper-button-prev { position: relative; left: auto; right: auto; border: 1px solid #DEDEDE; border-radius: 50%; width: 50px; height: 50px; transition: all 0.5s ease; margin-right: 14px; } #kil06Swp>.swiper-button .swiper-button-prev:hover { border: 1px solid #2C9E41; background: #2C9E41; } #kil06Swp>.swiper-button .swiper-button-prev::after { font-size: 20px; font-weight: bold; color: #333333; transition: all 0.5s ease; } #kil06Swp>.swiper-button .swiper-button-prev:hover:after { color: #FFFFFF; } #kil06Swp>.swiper-button .swiper-button-next { position: relative; left: auto; right: auto; border: 1px solid #DEDEDE; border-radius: 50%; width: 50px; height: 50px; transition: all 0.5s ease; } #kil06Swp>.swiper-button .swiper-button-next:hover { border: 1px solid #2C9E41; background: #2C9E41; } #kil06Swp>.swiper-button .swiper-button-next::after { font-size: 20px; font-weight: bold; color: #333333; transition: all 0.5s ease; } #kil06Swp>.swiper-button .swiper-button-next:hover::after { color: #FFFFFF; } #kil06Swp>.swiper-pagination { display: none; } @media (max-width: 1536px) { #kill01 .kill01Sack { padding-top: 120px; } #kill01 .kill01Sack .kil01Lf .kil01Tit h2 { font-size: 30px; } #kill01 .kill01Sack .kil01Lf .kil01Box { margin-bottom: 16px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li { padding: 2px 16px; margin-right: 12px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li p { font-size: 18px; } #kill01 .kill01Sack .kil01Lf .kil01Tex { height: 134px; } #kill01 .kill01Sack .kil01Lf .kil01Tex p { font-size: 16px; line-height: 26px; } #kil02 .kil02Sack { padding-bottom: 106px; } #kil02 .kil02Sack .kil02Tit { padding-bottom: 42px; } #kil02 .kil02Sack .kil02Ul { margin-right: calc(-.5* 1.5rem); margin-left: calc(-.5* 1.5rem); } #kil02 .kil02Sack .kil02Ul .Kil02Li { padding-right: calc(1.5rem* .5); padding-left: calc(1.5rem* .5); } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Box { padding: 28px 0 22px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Ico { padding-right: 18px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02SmTit { padding-left: 18px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02SmTit p { font-size: 20px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Tex { padding: 0 51px 0 18px; } #kil02 .kil02Sack .kil02Ul .Kil02Li .kil02Tex p { font-size: 14px; } #kil03Tit p { font-size: 18px; } #kil04 .kil04Con { top: 34%; } #kil04 .kil04Bg img { height: 500px; } #kil04 .kil04Con .kil04Tex p { font-size: 16px; } #kil04 .kil04Ul { margin-right: calc(-.5* 1.5rem); margin-left: calc(-.5* 1.5rem); } #kil04 .kil04Ul .kil04Li { padding-right: calc(1.5rem* .5); padding-left: calc(1.5rem* .5); } #kil04 .kil04Ul .kil04Li .kil04box { padding: 44px 14px 52px; } #kil04 .kil04Ul .kil04Li .kil04Ma p { font-size: 80px; line-height: 80px; } #kil04 .kil04Ul .kil04Li .kil04LiTit p { font-size: 18px; } #kil04 .kil04Ul .kil04Li .kil04LiSmTit p { font-size: 18px; } #kil05 { padding-bottom: 126px; } #kil05 .kil05Sack .kil05Ul { margin-right: calc(-.5* 2rem); margin-left: calc(-.5* 2rem); } #kil05 .kil05Sack .kil05Ul .kil05Li { padding-right: calc(2rem* .5); padding-left: calc(2rem* .5); } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox { padding-bottom: 24px; } #kil05 .kil05Sack .kil05Ul .kil05Li .kil05LiBox .kil05Tit p { font-size: 18px; } #kil06Swp>.swiper-wrapper .swiper-slide .kil06Sack .kil0SwTex p { font-size: 18px; } #kil06Swp>.swiper-button .swiper-button-prev { width: 36px; height: 36px; margin-right: 10px; } #kil06Swp>.swiper-button .swiper-button-prev::after { font-size: 14px; } #kil06Swp>.swiper-button .swiper-button-next { width: 36px; height: 36px; } #kil06Swp>.swiper-button .swiper-button-next::after { font-size: 14px; } } @media (max-width: 1199.9px) { #kill01 .kill01Sack { align-items: flex-start; flex-direction: column; } #kill01 .kill01Sack .kil01Lf { width: 100%; padding-right: 0; } #kill01 .kill01Sack .kil01Lf .kil01Tex { margin-bottom: 40px; } #kill01 .kill01Sack .kil01Rg { width: 100%; } #kil02 .kil02Sack .kil02Ul .Kil02Li { margin-bottom: 20px; } #kil04 { background: #E9F0EB; } #kil04 .kil04Con { top: 12%; } #kil04 .kil04Bg img { height: 300px; margin-bottom: 40px; } #kil04 .kil04Ul { position: relative; left: 0; bottom: 0; transform: translateX(0); margin: auto; } #kil04 .kil04Ul .kil04Li { margin-bottom: 20px; padding: 0; padding-right: 8px; } #kil04 .kil04Ul .kil04Li:nth-child(2) { padding-right: 0; } #kil04 .kil04Ul .kil04Li:nth-child(4) { padding-right: 0; } #kil04 .kil04Ul .kil04Li:last-child { padding-right: 0; } #kil05 { padding-top: 0px; } #kil05 .kil05Sack .kil05Ul { margin-right: calc(-.5* 1.5rem); margin-left: calc(-.5* 1.5rem); } #kil05 .kil05Sack .kil05Ul .kil05Li { padding-right: calc(1.5rem* .5); padding-left: calc(1.5rem* .5); } } @media (max-width: 992px) { #kil05 .kil05Sack .kil05Ul .kil05Li { margin-bottom: 40px; } } @media (max-width: 768px) { #kil04 .kil04Ul .kil04Li { margin-bottom: 20px; padding: 0; } } @media (max-width: 576px) { #kil06Swp { width: 94%; margin: auto; } } @media (max-width: 499px) { #kill01 .kill01Sack { padding-top: 94px; padding-bottom: 48px; } #kill01 .kill01Sack .kil01Lf .kil01Tit { padding-bottom: 26px; } #kill01 .kill01Sack .kil01Lf .kil01Tit h2 { font-size: 28px; line-height: 48px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li { margin-right: 6px; } #kill01 .kill01Sack .kil01Lf .kil01Box .kil01Li p { font-size: 14px; } #kill01 .kill01Sack .kil01Lf .kil01Tex { height: auto; } #kill01 .kill01Sack .kil01Lf .kil01Tex p { font-size: 14px; line-height: 22px; } #kil02 .kil02Sack { padding-bottom: 36px; } #kil03Tit { padding-top: 12px; } #kil03Tit p { font-size: 16px; } #kil04 .kil04Con { top: 8%; } #kil04 .kil04Con .kil04Tit { padding: 0; padding-bottom: 20px; } #kil04 .kil04Con .kil04Tex p { font-size: 14px; } #kil04 .kil04Ul .kil04Li .kil04Ma { margin-bottom: 10px; } #kil04 .kil04Ul .kil04Li .kil04Ma p { font-size: 60px; line-height: 60px; } #kil04 .kil04Ul .kil04Li .kil04box { padding: 22px 14px 40px; } #kil04 .kil04Bg img { height: 200px; } #kil05 { padding-bottom: 44px; } #kil05 .kil05Sack .kil05Ul .kil05Li { margin-bottom: 20px; } #kil06 { padding-bottom: 4px; } #kil06Swp>.swiper-button { height: 90px; } } #retop { position: fixed; right: 24px; bottom: 222px; cursor: pointer; z-index: 12; transform: translateX(80%); opacity: 0; transition: all 0.5s ease; } .retop { transform: translateX(0) !important; opacity: 1 !important; } @media (max-width: 1536px) { #retop .retopImg img { width: 70px; } } @media (max-width: 499px) { #retop { right: -8px; bottom: 170px; } } #myform { width: 86%; margin: auto; } #myform .information .fillinbox { margin-bottom: 14px; display: flex; } #myform .information .fillinbox.fillinboxkaka { margin-bottom: 70px; } #myform .information .fillinbox.fillinboxkaka input { margin-right: 26px; } #myform .information .fillinbox.fillinboxkaka img { height: 100%; object-fit: cover; } #myform .information .fillinbox .form-input { border: none; background: #E9F0EB; width: 100%; padding: 16px 14px; font-size: 16px; font-weight: normal; line-height: normal; letter-spacing: 0em; color: #666666; border-radius: 5px; transition: border 0.5s ease; } #myform .information .fillinbox .form-input.active { color: #E01E24; } #myform .information .fillinbox .form-input:focus { border: none; } #myform .information .fillinbox .form-input:-webkit-autofill, #myform .information .fillinbox .form-input:-webkit-autofill:hover, #myform .information .fillinbox .form-input:-webkit-autofill:focus { border: none; background: #E9F0EB; -webkit-text-fill-color: #333333; -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset; transition: background-color 5000s ease-in-out 0s; } #myform .information .fillinbox .form-input.active::-webkit-input-placeholder { color: #E01E24; } #myform .information .fillinbox .form-input.active:-moz-placeholder { color: #E01E24; } #myform .information .fillinbox .form-input.active::-moz-placeholder { color: #E01E24; } #myform .information .fillinbox .form-input.active:-ms-input-placeholder { color: #E01E24; } #myform .information .fillinbox .form-input::-webkit-input-placeholder { color: #666666; } #myform .information .fillinbox .form-input:-moz-placeholder { color: #666666; } #myform .information .fillinbox .form-input::-moz-placeholder { color: #666666; } #myform .information .fillinbox .form-input:-ms-input-placeholder { color: #666666; } #myform .button .submit { display: flex; justify-content: center; } #myform .button .submit button { background: linear-gradient(270deg, rgba(44, 158, 65, 0) -35%, #2C9E41 65%); border: none; border-radius: 5px; font-size: 18px; font-weight: 500; line-height: normal; align-items: center; letter-spacing: 0em; color: #FFFFFF; padding: 12px 14vw; position: relative; overflow: hidden; } #myform .button .submit button::after { content: " "; position: absolute; border-radius: 50%; left: 50%; top: 50%; margin-left: -120px; margin-top: -120px; border-width: 120px; border-color: #fff; border-style: dashed; width: 0; height: 0; -webkit-transition: all 500ms ease-out 0s; transition: all 500ms ease-out 0s; opacity: .1; visibility: hidden; -webkit-transform: scale(.1); transform: scale(.1); pointer-events: none; } #myform .button .submit button:hover:after { -webkit-transition: all 350ms ease-in 0s; transition: all 350ms ease-in 0s; opacity: .15; visibility: visible; -webkit-transform: none !important; transform: none !important } @media (max-width: 1536px) { #myform .information { margin-right: calc(-.5* 1rem); margin-left: calc(-.5* 1rem); } #myform .information .fillinbox { padding-right: calc(1rem* .5); padding-left: calc(1rem* .5); } #myform .information .fillinbox .form-input { font-size: 14px; padding: 14px 12px; } #myform .information .fillinbox.fillinboxkaka { margin-bottom: 60px; } #myform .information .fillinbox.fillinboxkaka input { margin-right: 14px; } #myform .button .submit button { font-size: 16px; } } @media (max-width: 992px) { #myform { width: 100%; margin: auto; } } @media (max-width: 499px) { #myform .information .fillinbox { margin-bottom: 10px; } #myform .information .fillinbox.fillinboxkaka { margin-bottom: 40px; } #myform .information .fillinbox .form-input { padding: 12px 12px; } #myform .button .submit button { padding: 8px 14vw; } } #msgbg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 99999; } #msg { width: 264px; position: fixed; z-index: 999; top: 44%; left: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); display: inline-block; } #msg_top { background: #f8f8f8; position: relative; padding: 5px 20px; text-align: left; display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #333333; border-bottom: 1px solid #E7E7E7; } #msg_top img { margin-right: 10px; } #msg_top span { font-size: 20px; float: right; cursor: pointer; } #msg_cont { padding: 16px 0; padding-bottom: 22px; padding-left: 20px; padding-right: 20px; text-align: start; font-size: 14px; color: #333333; } #msg_clear { color: #fff; padding: 3px 15px; background: #E01E24; border-radius: 2px; float: right; margin-right: 15px; cursor: pointer; margin-bottom: 16px; } /* 混乱 */ #venPhoSec { /* display: none; */ position: fixed; right: -100%; opacity: 0; top: 72px; width: 100%; height: 100vh; background: #fff; transition: all 0.8s ease; /* animation-name: fadeInUp11t; */ /* animation-duration: 0.8s; */ z-index: 14; } @keyframes fadeInUp11t { 0% { opacity: 0; /* -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) */ -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0) } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0) } } #venPhoSec ul li .xiaopingsanji { display: flex; height: 45px; align-items: center; } #venPhoSec .menu_list li { border-bottom: 1px solid #33333330; } #venPhoSec .menu_list li .xiaopingsanji a { width: 100%; } #venPhoSec ul li i { /* color: #fff; */ color: #333; padding-left: 15px; } .menu_head { height: 46px; line-height: 46px; /* padding: 0 38px; */ /* margin: auto; */ /* border-bottom: 1px solid #33333330; */ display: flex; justify-content: space-between; } .menu_head a { font-size: 16px; /* color: #fff; */ color: #333; font-weight: bold; /* font-family: ml; */ width: 100%; margin: auto; display: block; } .xiantiao a { color: #2C9E41; /* font-weight: bold; */ } .menu_body { line-height: 38px; display: none; /* border-bottom: 1px solid #33333330; */ margin-bottom: 10px; } .menu_body a { display: block; /* height: 38px; */ line-height: 32px; padding-left: 10px; /* color: #fff; */ color: #666; font-family: 'ml'; text-decoration: none; font-size: 16px; transition: all 0.5s ease; } .menu_body h2 { padding-left: 53px; font-size: 16px; font-family: 'ml'; color: #333; font-weight: bold; line-height: 28px; } .menu_body a:hover { color: #2C9E41; } .menu_body .danqiana { color: rgba(28, 87, 163); background-color: rgba(237, 237, 237, 0.8); } @media (max-width: 499px) { #venPhoSec { opacity: 0; top: 60px; } .menu_head a { font-size: 18px; } .menu_body a { display: block; line-height: 28px; font-size: 16px; } } #makeup .cilSack .cilTex {height: 170px;overflow-y: auto;padding-right: 10px;}#makeup .cilSack .cilTex::-webkit-scrollbar-thumb {border-radius: 3px !important;background: #FFFFFF !important;}#makeup .cilSack .cilTex::-webkit-scrollbar {width: 3px !important;height: 3px !important;}#makeup .cilSack .cilTex::-webkit-scrollbar-track {background-color: #DEDEDE !important;border-radius: 3px !important;}#makeup .cilSack .cilTex::-webkit-scrollbar-thumb, #makeup .cilSack .cilTex::-webkit-scrollbar-thumb:hover, #makeup .cilSack .cilTex::-webkit-scrollbar-thumb:active {border-radius: 3px !important;background: #FFFFFF !important;background-clip: content-box !important;}