.section_area { padding: 5vw 0; } .section_area .more_btn { padding: 14px 30px; background: #ffffff; border: 1px solid #c9c9c9; color: #2b2b2b; font-size: 15px; font-weight: 400; display: inline-flex; align-items: center; border-radius: 99em; gap: 30px; } .section_area .more_btn span { width: 30px; height: 1px; background: #7c7c7c; display: block; z-index: 3; position: relative; } .section_area .more_btn span:before { position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 10px 6px 0; border-color: transparent transparent #7c7c7c transparent; right: -1px; bottom: 50%; content: ""; } .section_area .more_btn:hover { background: var(--secondary); color: #ffffff; border: 1px solid var(--secondary); } .section_area .more_btn:hover span:before { border-color: transparent transparent #ffffff transparent; } .section_area .more_btn:hover span { margin-left: 20px; width: 40px; background: #ffffff; } .section_area .list_box { margin-top: 2vmax; } .section_area .list_box .item_row { margin: 0 1em; } .section_area .titleBox { margin-bottom: 40px; } .section_area .titleBox p{color: #42413f;font-family: "Nunito Sans", serif;font-size: 50px;letter-spacing: .5px;font-weight: 700;text-transform: uppercase;color: transparent;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(180deg, #ffffffa3 0%, #e6e6e6 20%, #ffffff00 90%);display: block;line-height: 1;} .section_area .titleBox h2{display: flex;align-items: center;font-size: 44px;color: #4b4b4b;margin: 5px 0;font-weight: 500;line-height: 1.6;letter-spacing: 3px;} .section_area .titleBox h2 b{color: var(--primary);font-weight: 500;line-height: 1.6;letter-spacing: 1px;} .section_area .titleBox article{margin-bottom:30px;word-spacing: 100vw;color: #636160;font-size: 20px;letter-spacing: 2px;} /* about_area */ #about_area { position: relative; padding: 8vw 0 4vw 0; } #about_area::before { content: ''; position: absolute; width: calc(100% - 25vw); height: 100%; background: url(/images/01/bg.png); bottom: 0; left: 0; z-index: -4; } #about_area::after { content: ''; position: absolute; width: calc(100% - 7.8vw); height: 95%; background: white; border-radius: 0 0 0 80px; top: 0; right: 0; z-index: -2; } #about_area .bg { position: absolute; top: 320px; z-index: -3; } #about_area .bg img { height: 100%; width: 100%; aspect-ratio: 1/4; } #about_area .workframe { display: grid; justify-content: space-between; position: relative; width: 88.5%; grid-template-columns: 36% 56%; margin-left: auto; margin-right: 0; padding-right: 30%; } #about_area .workframe:before { content: ""; background: #eeeeee; position: absolute; left: 25%; width: 1px; height: 130%; top: -170px; z-index: -1; } #about_area .workframe:after {content: "";width: calc(100% - 21.3vw);height: 14%;background: url(/images/01/img-ab-bg.jpg) no-repeat;position: absolute;background-position: right;bottom: -120px;z-index: 0;left: -71px;background-size: cover;background-attachment: fixed;border-radius: 0 0 0 80px;} #about_area .aboutList:after { content: ''; width: 200%; height: 1px; background: #eeeeee; display: block; position: absolute; left: -70px; top: 310px; z-index: -1; } #about_area .titleBox p { position: absolute; top: -60px; right: 60px; margin: 0; font-size: 110px; } #about_area .info_box { margin-top: 40px; margin-bottom: 70px; } #about_area .info_box article { margin-bottom: 30px; } #about_area .info_box h3 { font-size: 32px; letter-spacing: 2px; font-weight: 400; color: #555; line-height: 1.5; margin: 0 0 2rem; } #about_area .info_box p { line-height: 1.9; letter-spacing: 1.5px; margin-bottom: 10px; } #about_area .info_box p a { vertical-align: baseline; } #about_area .info_box h2 { margin-bottom: 1em; } #about_area .aboutList{gap: 20px 50px;margin:0 auto;padding: 70px 0 0px 0;display: grid;grid-template-columns: repeat(2, 1fr);} #about_area .aboutItem .item{display:flex;align-items:flex-start;padding: 20px 0;border-bottom: 1px solid #eeeeee;transition:background-color 0.3s} #about_area .aboutItem:last-child .item{} #about_area .aboutItem .item b{flex-shrink:0;width: 40px;height: 40px;background-color: var(--secondary);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size: 1.1rem;line-height: 1.6;font-weight: 400;margin-right:20px;box-shadow: 0 4px 6px rgb(62 62 62 / 6%);font-family: "Nunito Sans", serif;} #about_area .aboutItem .item .Txt{flex-grow:1} #about_area .aboutItem .item .title{font-size:1.2rem;margin-bottom: 10px;font-weight: 600;color: #555;} #about_area .aboutItem .item .text{font-size:1rem;color:#555;line-height: 1.9;letter-spacing: 1.5px;margin:0;text-align:justify} #about_area .img_box { display: grid; gap: 40px; position: absolute; width: 360px; top: 200px; } #about_area .img_box:after { content: ""; display: block; width: 300px; height: 300px; border-radius: 50%; background: rgb(182 223 214/30%); position: absolute; top: 140px; left: -50px; z-index: -1; } #about_area .img_box:before { content: ""; display: block; width: 150px; height: 150px; border-radius: 50%; background: rgb(204 159 83/20%); position: absolute; top: 0; right: 20px; z-index: -1; } #about_area .img_box img:last-child{animation: aboutImgAnimation 10s ease-in-out infinite;} @keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(10px);transform:translateY(10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}} #about_area .img_box img:first-child { border-radius: 80px 0 80px 80px; aspect-ratio: 3/6; object-fit: contain; } #about_area .img_box img { width: 100%; aspect-ratio: 4/6; } #about_area .img_box2 { position: absolute; right: 0; top: 120px; width: 28%; } #about_area .img_box2 img { width: 100%; aspect-ratio: 3/2; border-radius: 80px 0 80px 80px; } /* photo_list */ #photo_list{width: 26%;margin: -19vw 0 0 auto;padding: 10px 4% 40px;display: flex;justify-content: space-between;align-items: flex-end;position: relative;z-index: -1;flex-direction: column;gap: 60px;} #photo_list h3{font-family: 'ChenYuluoyan-Thin', serif;font-size: 35px;font-weight: 300;} #photo_list p{display:inline-flex;align-items: center;} #photo_list p b{font-family: 'ChenYuluoyan-Thin', serif;margin-left: 5px;font-size: 35px;font-weight: 300;} /* popular_area */ #popular_area {padding: 6vw 0;} #popular_area::before { content: ''; position: absolute; background: url(/images/01/bg.png); bottom: 0; width: calc(100% - 6vw); height: 100%; border-radius: 0 80px 80px 0; top: 0; left: 0; z-index: -2; } #popular_area .list_box{margin:0} #popular_area .titleBox article{margin:0} #popular_area .title_box {display: grid;grid-template-columns: 1fr 170px;gap: 20px;justify-content: space-between;align-items: center;margin: 0 20px;} #popular_area .list_box #imglist {display: grid;grid-template-columns: 68% 30%;width: 100%;gap: 40px;align-items: end;} #popular_area .list_box #imglist .leftbox { position: relative; } #popular_area .sub_title { writing-mode: vertical-rl; position: absolute; right: -180px; top: 0; font-family: "Nunito Sans",serif; font-size: 130px; letter-spacing: .5px; font-weight: 700; text-transform: uppercase; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(270deg,#ffffffa3 0%,#b6dfd6 20%,#e9e9e9 90%); display: block; line-height: 1; } #popular_area li, #product_area .productList li {border-bottom: 1px solid #aaaaaa69;padding-bottom: 20px;} #popular_area li .info_box {position: relative;letter-spacing: 0.5px;background-color: #fff;overflow: hidden;} #popular_area li .info_box .Img img, #product_area .productList .Img_box img {aspect-ratio: 1/1;object-fit: cover;} #popular_area li .info_box .price {position: absolute;bottom: 0;right: 0;background-color: rgb(46 46 46 / 80%);display: flex;padding: 6px 10px;justify-content: space-between;align-items: baseline;} #popular_area li .info_box .price font, #popular_area li .info_box .price .number {color: white;display: flex;align-items: baseline;letter-spacing: 1.5px;font-weight: 400;font-size: 12px;} #popular_area li .info_box .price font b, #product_area .txt_box .price font b {color: #ffffff;font-size: 16px;line-height: 140%;margin-right: 5px;font-family: "Nunito Sans", serif;font-weight: 500;letter-spacing: 0px;} #popular_area li .txtitems {position: relative;color: #a6a6a6;margin-top: 15px;} #popular_area li .txtitems h2, #product_area .txt_box .InfoList h2 {font-size: 22px;height: auto;font-weight: 500;} #popular_area li .txtitems article, #product_area .txt_box .InfoList article {font-size: 15px;color: #656565;letter-spacing: .5px;} #popular_area li .txtitems .btn {display: flex;position: relative;color: #616161;align-items: center;margin-top: 25px;padding: 0;font-size: 15px;font-weight: 500;line-height: 1;font-family: "Nunito Sans", serif;} #popular_area li .txtitems .btn svg {fill: #aaaaaa;width: 20px;height: 20px;position: relative;margin-left: 20px;} #popular_area li .txtitems .btn::after {content: "";display: block;width: 1px;height: 18px;background: #aaaaaa;position: absolute;left: 101px;opacity: .5;} #popular_area .img_nav li { margin: 0 20px; position: relative; } #popular_area .img_nav .img_show { margin: 0 10px 0; } #popular_area .img_nav img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; } #popular_area .img_box li {position: relative;margin: 0 10px;} #popular_area .img_box li .txtitems { margin-top: 26px; } #popular_area .img_box li .txtitems h2 {font-size: 30px;height: auto;} #popular_area .img_box li .info_box .Img img {} #popular_area .rightbox li .txtitems .btn{margin-top: 64px;} .productbtn { display: flex; justify-content: space-between; align-items: center; } #product_prev { -webkit-transform: scaleX(-1); transform: scaleX(-1); position: relative; } #product_prev, #product_next {-webkit-box-shadow: 0px 10px 10px 2.4px rgb(184 190 196 / 31%);box-shadow: 0 0 20px 2.4px rgb(192 192 192 / 30%);border-radius: 150px;padding: 20px;} #product_next{background:var(--secondary)} #product_prev svg, #product_next svg {width: 35px;height: 35px;fill: var(--secondary);display: flex;align-items: center;justify-content: center;} #product_next svg {fill: white;} /* product_area */ #product_area { overflow: hidden; background-image: url(/images/39/img-all-Bg.png); background-repeat: no-repeat; padding: 5vw 0 3vw; } #product_area .plist { margin: 120px 20px 80px; } #product_area .product_tab .tab_row { position: absolute; pointer-events: none; top: 0; opacity: 0; } #product_area .product_tab .tab_row.active { position: relative; pointer-events: auto; opacity: 1; } #product_area::before { content: ''; position: absolute; height: 470px; width: calc(100% - 130px); top: 0px; left: 0px; background: url(/images/39/img-p-bg.png) no-repeat center / cover; background-position: 100% 0%; background-size: cover; opacity: 1; z-index: 1; } #product_area::after { content: ''; position: absolute; height: 400px; width: calc(100% - 130px); top: 70px; right: 0px; background: #fff; background-position: 100% 0%; background-size: cover; opacity: 1; z-index: 0; } #product_area .productBG { content: ''; position: absolute; height: 74%; width: calc(100% - 130px); top: 300px; right: 0; background: #ffffff; opacity: 1; z-index: 3; border-radius: 50px 0 0 0; } #product_area .title_box .page_title { color: var(--complement); } #product_area .title_box font:first-child, #product_area .title_box .noteBox { color: var(--white); } #product_area .title_box .page_title::after { background-color: var(--complement); } #product_area .producttbox { display: grid; grid-template-columns: 1fr 500px; gap: 20px 20px; align-items: center; margin: 0 20px; } .mainClassBox .classLink { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 20px; } .mainClassBox .classLink li { position: relative; cursor: pointer; overflow: hidden; background-color: var(--white); display: inline-block; border-radius: 50px; text-align: center; padding: 10px; } .mainClassBox .classLink li span { color: var(--primary); font-size: 18px; font-weight: 600; letter-spacing: 2px; } .mainClassBox .classLink li span.pageBefore { display: none; } .mainClassBox .classLink li.active .Trigger { color: var(--white); } .mainClassBox .classLink li.active { background-color: var(--complement); } .mainClassBox .classLink li:hover { background-color: var(--complement); } .mainClassBox .classLink li:hover span { color: var(--white); } #product_area .productList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 35px; } #product_area .productList .Img_box { overflow: hidden; border-radius: 20px; position: relative; } #product_area .productList .Img_box a { position: relative; } #product_area .productList .objectLabel { position: absolute; z-index: 10; top: 0; left: 0; padding: 6px 16px; color: #fff; background-color: var(--primary); font-weight: 500; letter-spacing: 1px; font-size: 17px; } #product_area .txt_box .price { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; } #product_area .txt_box .number { color: #3b3b3b; letter-spacing: 1px; } #product_area .txt_box .price font { display: flex; align-items: baseline; position: relative; } #product_area .txt_box .price font::after { content: ""; display: block; width: 1px; height: 20px; background: var(--primary); position: absolute; left: -20px; top: 15px; opacity: .5; } #product_area .txt_box .price font b { color: var(--primary); font-size: 29px; } #product_area li:hover .Img_box:after { top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #product_area li .Img_box:after { content: ""; position: absolute; background: #103725; width: 150%; padding-top: 100%; border-radius: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; top: 100%; opacity: 0.4; -webkit-transition: all 0.3s 0.05s ease-in-out; transition: all 0.3s 0.05s ease-in-out; } /* comment_area */ #comment_area { position: relative; margin: 160px 0 80px 0; padding: 3vw 0; } #comment_area::after { content: ''; position: absolute; width: calc(100% - 6vw); height: 85%; background: #f9f9f9; border-radius: 80px 0 0 80px; top: -20px; right: 0; z-index: -2; } #comment_area .workframe {width: 100%;display: grid;grid-template-columns: 40% 38%;gap: 0 max(7vw,60px);align-items: start;} #comment_area .workframe:after {content: "";display: block;width: 280px;height: 400px;background: url(/images/01/ad-02.png) no-repeat;background-size: cover;position: absolute;bottom: 0px;right: -50px;z-index: -1;} #comment_area .workframe:before {content: "";display: block;width: 210px;height: 200px;background: url(/images/01/ad-01.png) no-repeat;background-size: contain;position: absolute;top: -90px;right: 60px;z-index: -1;} #comment_area .left { position: relative; } #comment_area .left .img_box img { border-radius: 80px 80px 80px 0; aspect-ratio: 2/2; object-fit: cover; } #comment_area .left .marqueeTxtList { position: absolute; top: 50px; left: 70px; } #comment_area .left .marqueeTxtItem { line-height:20px;margin-top:30px;animation:aboutImgAnimation 5s ease-in-out infinite; } #comment_area .left .marqueeTxtItem:nth-of-type(2) { margin-left: 150px; } #comment_area .left .marqueeTxtItem:nth-of-type(2) .item::after{right:auto;left:-5px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)} #comment_area .left .marqueeTxtItem .item{position:relative;background-color:#fff;border-radius:30px;padding:25px 20px;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-filter:drop-shadow(0px 0px 18px rgba(201,160,108,0.21));filter:drop-shadow(0px 0px 18px rgba(201,160,108,0.21));width: 270px;} @media (max-width:1060px){#comment_area .left .marqueeTxtItem .item{min-width:0} }@media (max-width:500px){#comment_area .left .marqueeTxtItem .item{-webkit-filter:none;filter:none} }#comment_area .left .marqueeTxtItem .item:after{content:"";position:absolute;bottom:-10px;right:-5px;border-width:29px 19px 0;border-style:solid;border-color:#fff transparent;border-radius:5px;display:block;width:0;-webkit-transform:rotate(90deg);transform:rotate(90deg);pointer-events:none} #comment_area .left .marqueeTxtItem .title{color: #727574;font-size:18px;font-weight:500;letter-spacing:0.9px} @media (max-width:500px){#comment_area .left .marqueeTxtItem .title{font-size:15px} }#comment_area .left .marqueeTxtItem .title a{text-align:center;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (min-width:1181px){#comment_area .left .marqueeTxtItem .title a:hover{color:#c9a06c} } #comment_area .titleBox{display:flex;flex-direction: column;align-items: flex-start;margin-bottom: 20px;} #comment_area .slick-dots li button{width: 10px;height: 2px;padding:6px} #comment_area .slick-dots li button:before{content:'';width: 10px;height: 1px;line-height:0px;background: #000;} #comment_area .slick-dots{position:relative;margin-top: 15px;bottom:0} #comment_area .slick-dots li{width: 10px;height: 1px;display:inline-flex;background: none;border-radius: unset;margin: 0 5px;outline-offset: unset;outline: unset;} #comment_area li{border: 1px solid #d7d7d7;margin: 30px 50px 10px 10px;position: relative;border-radius: 40px 0 40px 40px;} #comment_area li .box{position: relative;display: flex;flex-direction: column;justify-content: center;margin: 0;border-bottom: 1px solid #d7d7d7;padding: 20px 30px;background-color: #fff;border-radius: 40px 0 40px 40px;} #comment_area li .box h3{font-size: 17px;font-weight: 500;letter-spacing: 0px;} #comment_area li .box p{color: var(--secondary);font-size:17px;margin: 0;} #comment_area li .box img{width: 90px;aspect-ratio: 1/1;object-fit: cover;position: absolute;right: -40px;top: -30px;border-radius: 50%;border: 3px solid #ffffff;filter: drop-shadow(0px 8px 7px #d2d2d2);margin: 10px;} #comment_area li .tt{padding: 20px 30px 40px;overflow-x: hidden;max-width: 100%;} #comment_area li article{-webkit-line-clamp: 7;height: 170px;} /* photo_area */ #photo_area .item_row { padding: 4% 6%; border: 2px var(--g_100) solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } #photo_area .item_row .img_box img { width: 100px; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin-left: 6%; width: 1%; flex: 1 1 auto; } #photo_area .item_row .info_box h3 { margin-bottom: .5em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2; } #photo_area .item_row .info_box font { padding: .5em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; } /* news_list */ #news_list .img_box { aspect-ratio: 5/3; } #news_list .info_box { margin-top: .5em; } #news_list .info_box .time { font-size: .9em; color: var(--g_500); } #news_list .info_box h3 { margin: .2em 0 .5em; } #news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; } /* team_area */ #team_area { } #team_area:after { content: ""; display: block; width: 150px; height: 126px; background: url(/images/01/t-02.png); background-size: contain; position: absolute; bottom: 170px; right: 90px; z-index: 2; } #team_area:before { content: ""; display: block; width: 257px; height: 147px; background: url(/images/01/t-01.png); background-size: cover; position: absolute; top: 70px; left: -30px; z-index: 1; } #team_area .workframe { width: min(90%,1340px); } #team_area .titleBox { display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 0; } #team_area .titleBox p { background-image: linear-gradient(180deg,#ffffffa3 0%,#fff 20%,#ffffff00 90%); } #team_area .bg_box { height: 75%; opacity: .3; } #team_area .tit { margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; } #team_area .tit span { width: 15px; display: block; aspect-ratio: 1/1; background: #404040; transform: rotate(45deg); margin-bottom: 5px; } #team_area li { margin: 0 50px; border-bottom: 1px solid #dbdbdb; padding-bottom: 30px; } #team_area li:before { content: ""; display: block; width: 150px; height: 150px; border-radius: 50%; background: rgb(204 159 83/20%); position: absolute; top: 0; right: 20px; z-index: -1; } #team_area li img{aspect-ratio: 4/4;object-fit: contain;object-position: top;} #team_area li .imgbox b{position:absolute;font-family: "Lato", sans-serif;font-size: 14px;text-transform: uppercase;color: white;font-weight: 700;background: var(--primary);bottom: -55px;left: -20px;padding: 170px 80px 15px 20px;z-index: -1;} #team_area li:hover .imgbox b{background:var(--secondary)} #team_area li .h3 {height: 68px;font-size: 20px;-webkit-line-clamp: 2;color: #686868;margin: 15px 0 auto auto;width: 55%;font-family: "Nunito Sans", serif;} #team_area .catalogList{width:100%;} #team_area .controlBox{display:flex;gap: 20px;align-items: center;justify-content: center;margin-bottom: 70px;} #team_area .controlBox .arrow {font-size: 15px;font-weight: 500;cursor: pointer;font-family: "Syne", sans-serif;} #team_area .controlBox span{width:80px;height: 1px;background: #c3c3c3;} @media screen and (min-width: 1161px){ #photo_area .item_row:hover { border-color: var(--primary); } } @media screen and (max-width: 1440px){ #about_area .info_box article { margin-bottom: 40px; } #photo_list { width: 40%; margin: -4vw 0 0 auto; gap: 0px; padding: 0px 3% 40px; } #about_area .workframe { width: 85.5%; padding-right: 10%; } #about_area { padding: 13vw 0 4vw 0; } #about_area .titleBox p { top: -150px; } #about_area .img_box2 { top: -90px; width: 16%; } #about_area .img_box2 img { aspect-ratio: 3/3; } #about_area .workframe:after { height: 20%; bottom: -140px; width: calc(100% - 42.3vw); z-index: 0; } #about_area .workframe:before { left: 33%; } #about_area .workframe:before { left: 36%; } #about_area::before { width: calc(100% - 110vw); } #popular_area::before { width: calc(100% - 1vw); } #comment_area .left .marqueeTxtItem .title { font-size: 14px; } #comment_area .left .marqueeTxtItem .item { width: 190px; padding: 14px 15px; } #comment_area .left .marqueeTxtList { top: 20px; left: 20px; } #comment_area::after { height: 100%; } #comment_area .workframe { grid-template-columns: 36% 44%; } } @media screen and (max-width: 1280px){ #about_area .img_box2,#about_area .titleBox p,#team_area:before,#team_area:after,#comment_area .workframe:before,#comment_area .workframe:after { display: none; } #about_area .workframe { width: 80%; padding-right: 4%; } #about_area { padding: 12vw 0px 4vw 0; } #popular_area::before { width: calc(100% - 3vw); } #comment_area .workframe { grid-template-columns: 43% 47%; display: grid; justify-content: space-between; gap: 0 max(3vw,30px); } .section_area .titleBox h2 { font-size: 36px; } } @media screen and (max-width: 1140px){ #comment_area .workframe { display: flex; flex-direction: column; width: 80%; margin: auto; gap: 50px; padding: 0 0 30px 0; } #comment_area .left,#comment_area .right { width: 100%; } #comment_area::after { width: calc(100% - 3vw); } } @media screen and (max-width: 1024px){ .section_area .titleBox article { font-size: 18px } #about_area .img_box { gap: 10px; position: relative; width: 60%; top: 0; margin: 0 auto 40px; } #about_area .img_box img:first-child { aspect-ratio: 3/3; } #about_area .info_box { margin-top: 0 } .section_area .titleBox h2 { font-size: 35px; } #about_area::before,#about_area .bg,#about_area .workframe:after,#about_area .workframe:before { display: none; } #about_area .workframe { margin: auto; } #about_area::after { width: 100%; height: 95%; } #photo_list { display: none; } #team_area .bg_box {background-size: cover;} #about_area .workframe { display: flex; flex-direction: column; padding-right: 0; } #comment_area { margin: 50px 0 0px 0; padding: 6vw 0; } #comment_area li { margin: 30px 35px; } #comment_area .left .marqueeTxtList { top: 0px; left: -10px; } #comment_area .left .marqueeTxtItem .title { font-size: 13px; } .section_area .titleBox p { font-size: 29px; } #about_area .info_box p,#about_area .aboutItem .item .text{ font-size: 15px; } } @media screen and (max-width: 768px){ .bottombtn{position:absolute;right: 0;bottom: 30px;} .productbtn{gap: 20px;} #about_area .titleBox{position:relative;width: 100%;} #about_area .workframe{grid-template-columns:1fr} .section_area{padding:12vw 0} #about_area .img_box {width: 100%;max-width: inherit;margin-bottom: 40px;order: 0;} #about_area .img_box img:first-child, #about_area .img_box img:last-child{margin-top:0;animation: unset;} #about_area .info_box { order: 1; } #popular_area .list_box #imglist { grid-template-columns: 100% 0; gap: 0; } #popular_area .list_box #imglist .rightbox { display: none; } #popular_area .title_box { width: auto; display: flex; flex-direction: column; align-items: flex-start; margin: 0 10px 30px; } #product_area::before { width: calc(100% - 30px); } #product_area .productBG { width: calc(100% - 20px); } #product_area .productList #objectLabel { font-size: 14px; } #product_area .productList { gap: 30px 30px; grid-template-columns: repeat(2, 1fr); } #team_area li .h3 { font-size: 18px; height: 61px; } #team_area li .imgbox b { padding: 150px 70px 15px 20px; } #about_area .info_box h3 { font-size: 22px; margin: 0 0 1rem; } #about_area .img_box:after { width: 170px; height: 170px; left: 0; } #about_area .aboutList:after { top: 290px; } } @media (max-width:640px){ #about_area .aboutItem .item{padding:15px 0} #about_area .aboutItem .item b{width: 32px;height: 32px;font-size:1rem;margin-right:15px;line-height: 2.2;} #comment_area li .box img{width: 105px;} #comment_area li .box p{font-size:14px;} #comment_area li .box h3{font-size: 16px;word-break: break-word;} #popular_area .titleBox article{width: 70%;} .bottombtn{position:absolute;right: 0;bottom: 30px;} .productbtn{display: flex;flex-direction: column;gap: 10px;} #product_prev, #product_next{padding:10px} #photo_area .item_row .img_box { width: 100%; } #photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; } #photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; } #team_area li.row { margin: auto; width: 250px; } #about_area .aboutList { grid-template-columns: 1fr; padding: 30px 0 0px 0; gap: 0; } }