/* BASIC css start */ /* BASIC css start */ /* BASIC css start */ /* 섹션 공통 */ section { width: 100%; margin-bottom:60px } section .sec_inner { padding:0 5%; margin:0 auto } section h2 { font-family: 'Noto Sans KR', sans-serif; font-size: 26px; font-weight: bold; letter-spacing: -.5px; color: #000; margin-bottom:29px; line-height:1.3 } /* sec1 */ #sec1 { } #sec1 .swiper { width: 100%; } #sec1 .swiper ul { width: 100%; } #sec1 .swiper ul li { width: 100%; } #sec1 .swiper ul li a { display: block; width: 100%; } #sec1 .swiper ul li a img { width: 100%; } #sec1 .swiper-pagination { } #sec1 .swiper-pagination-bullet { background-color:#fff !important; margin:0 4px; opacity: .6; transition: width .3s; transform: scale(.9); } #sec1 .swiper-pagination-bullet-active { width:20px; border-radius: 10px !important; opacity: 1 !important; } /* sec2 */ #sec2 { margin-bottom:30px !important } #sec2 h2 { font-size: 22px !important } #sec2 .sec_inner { padding: 0 0 0 5%; } #sec2 .tumb { } #sec2 .tumb a { border-radius: 50%; overflow: hidden; } #sec2 .tumb a img {} /* 모든 아이들은 집에서 창의적 혁신가가 될 수 있어요! */ #works_wrap .sec_inner { padding: 0 5%; } #works_wrap .sec_inner .item_cont { display: flex; flex-direction: column; gap: 12px; } #works_wrap .sec_inner .item_cont li { position: relative; display: block; padding: 28px 24px; border-radius: 6px; } #works_wrap .sec_inner .item_cont li:nth-child(1) {background: url('/design/whatson/img/mo/mo_works_img_01.png') no-repeat right bottom #FFEFEC; background-size: 159px;} #works_wrap .sec_inner .item_cont li:nth-child(2) { background: url('/design/whatson/img/mo/mo_works_img_02.png') no-repeat right bottom #FFEFEC; background-size: 133px;} #works_wrap .sec_inner .item_cont li:nth-child(3) { background: url('/design/whatson/img/mo/mo_works_img_03.png') no-repeat right bottom #FFEFEC; background-size: 132px;} #works_wrap .sec_inner .item_cont li a { display:block; } #works_wrap .sec_inner .item_cont li a span { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--point-color); padding: 0 10px; border-radius: 28px; height: 18px; line-height: 18px; margin-bottom: 8px; } #works_wrap .sec_inner .item_cont li a h3 { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 10px; line-height: 1.25; } #works_wrap .sec_inner .item_cont li a p { font-size: 14px; font-weight: 400; color: #595959; line-height: 19px; } #works_wrap .sec_inner .item_cont li a img { width:100%; } /* sec3 */ #sec3 { } #sec3 .sec_inner { padding: 0; } #sec3 .sec_inner>div { } #sec3 .sec_inner .sec3_L { position:relative; padding: 0 5%; padding-bottom: 219px; } #sec3 .sec_inner .sec3_L .thumb { width:100% } #sec3 .sec_inner .sec3_L .thumb a { width:100%; display:block } #sec3 .sec_inner .sec3_L .thumb a img { width:100% } #sec3 .sec_inner .sec3_L h2 { transition:transform .5s, opacity .8s; opacity:0; margin-bottom: 20px; line-height: 1.2; font-weight:300; font-size:26px !important; position:absolute; bottom: 53px; left: 5%; } #sec3 .sec_inner .sec3_L>p { transition:transform .5s, opacity .8s; opacity:0; font-family: 'Noto Sans KR', sans-serif; font-size: 14px; color: #595959; letter-spacing: -.5px; font-weight: 300; line-height: 1.5; position:absolute; bottom: -2px; left: 5%; } #sec3 .sec_inner .sec3_L h2.move { transform:translateY(-50px); opacity:1 } #sec3 .sec_inner .sec3_L>p.move { transform:translateY(-45px); opacity:1 } #sec3 .sec_inner .sec3_R { position:relative; } #sec3 .sec_inner .sec3_R .swiper { overflow: hidden; margin: 0 5%; } #sec3 .sec_inner .sec3_R ul { } #sec3 .sec_inner .sec3_R ul li { position: relative; margin-right:2%; width:32% !important } #sec3 .sec_inner .sec3_R ul li .tumb img { width:100%; border-radius:5px;} #sec3 .sec_inner .sec3_R ul li .info { width: 100%; height: 100%; text-align: left; } #sec3 .sec_inner .sec3_R ul li .info a { display:block; width:100%; height:100%; display:flex; align-items: center; justify-content:center; flex-direction:column } #sec3 .sec_inner .sec3_R ul li .info .price { text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /*height: 34px;*/ } #sec3 .sec_inner .sec3_R ul li .info p img { display:inline-block; transform:scale(.66) } #sec3 .sec_inner .sec3_R ul li .info.show1 { opacity: 1; } #sec3 .sec_inner .sec3_R ul li .info p.prdname { border-top:1px solid #e7e7e7; margin-top: 10px; padding-top: 10px; font-size: 13px; font-weight: 400; color: #999; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; // 원하는 라인수-webkit-box-orient: vertical; } .swiper_btn_prev { position: absolute; top: 15%; left: 1%; z-index: 10; } .swiper_btn_next { position: absolute; top: 15%; right: 1%; z-index: 9; } .btn_more { text-align: center; } .btn_more a { display: inline-block; color: #000; font-size: 14px; font-weight: 700; background: var(--point-color); color: #fff; padding: 13px 28.5px; border-radius: 40px; line-height: 1; } .btn_more a img { vertical-align: middle; margin-left: 3px; } /* 키트 활동 소개 */ #info_wrap { position: relative; background: #FAFAFA; padding: 56px 0; margin-bottom: 72px; } #info_wrap h2 { margin-bottom: 12px; } #info_wrap p { font-size: 15px; font-weight: 400; color: #595959; margin-bottom: 28px; line-height: 21px; } #info_wrap ul { display: flex; flex-direction: column; gap: 16px; } .mainVideo { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 6px; overflow: hidden; } .mainVideo iframe { position: absolute; width: 100%; height: 100%; } /* sec4 */ #sec4 { margin-bottom:20px !important } #sec4 .sec_inner { padding-top:30px } #sec4 .sec_inner h2 { } #sec4 .sec_inner .sec4_cate { } #sec4 .sec_inner .sec4_cate ul { } #sec4 .sec_inner .sec4_cate ul li { display: inline-block; width:auto !important } #sec4 .sec_inner .sec4_cate ul li a { border-bottom: 2px solid #fff; font-family: 'Josefin Sans', sans-serif; color:#bfbfbf; font-size: 15px; font-weight: 600; letter-spacing: -.3px; transition: color .4s, border-color .3s, font-weight .3s; display:inline-block; } #sec4 .sec_inner .sec4_cate ul li.on>a { border-color:#000 !important; color: #000 !important; } #sec4 .sec4_prd { } #sec4 .sec4_prd>div { display: none; position:relative; padding-top: 30px; } #sec4 .sec4_prd>div.show { display: block; } /* sec5 */ #sec5 { } #sec5 .sec5_banner { width: 100%; } #sec5 .sec5_banner a { display: block; width: 100%; } #sec5 .sec5_banner a img { width: 100%; } /* sec6*/ #sec6 { } #sec6 .sec_inner { } #sec6 .sec_inner h2 { } #sec6 .sec_inner .sec6_cont { } #sec6 .sec_inner .sec6_cont ul { } #sec6 .sec_inner .sec6_cont ul li { height: 445px; width: 270px; border: 1px solid #e6e6e6; } #sec6 .sec_inner .sec6_cont ul li>div { width: 100%; } #sec6 .sec_inner .sec6_cont ul li .preview { width: 100%; height: 270px; } #sec6 .sec_inner .sec6_cont ul li .preview a { display: block; width: 100%; height: 100%; } #sec6 .sec_inner .sec6_cont ul li .preview a img { width: 100%; height: 100%; object-fit: cover; } #sec6 .sec_inner .sec6_cont ul li .rv_info { height: 175px; padding: 20px 25px; } #sec6 .sec_inner .sec6_cont ul li .rv_info p { margin-bottom: 8px; font-family: 'Noto Sans KR', sans-serif; } #sec6 .sec_inner .sec6_cont ul li .rv_info p.username { font-family: 'Noto Sans KR', serif; font-size: 13px; color: #b0afaf; font-weight: 500; } #sec6 .sec_inner .sec6_cont ul li .rv_info p.title { font-size: 15px; color: #222; font-weight: 500; } #sec6 .sec_inner .sec6_cont ul li .rv_info p.textarea { font-size: 13px; color: #999; line-height: 1.3; } #sec6 .sec_inner .sec6_cont ul li .rv_info .score { font-size:14px } /* sec7 */ #sec7 { } #sec7 ul { width: 100%; } #sec7 ul li { width:100%; float } #sec7 ul li:first-child { margin-bottom: 72px; } #sec7 ul li a { display: block; width: 100%; } #sec7 ul li a img { width: 100%; } /* sec8 */ #sec8 { margin-bottom: 72px !important; } #sec8 .sec_inner { padding: 0 5% !important; text-align: left; } #sec8 h2 { font-size: 24px !important; margin-bottom:20px !important; line-height:19px } #sec8 h2 span { margin-right:6px; display: inline-block; width: 15px; height: 15px; background: url(//skin.makeshop.co.kr/skin/leaflet/MO_img/insta.png) no-repeat center center; background-size: contain; } #sec8 .sec8_tit>span { font-size:13px; display:inline-block; padding: 11px 16px; border-radius: 40px; background-color: var(--point-color); color: #fff; margin-bottom: 28px; } #sec8 .sec8_tit>span img { vertical-align: baseline; margin-left: 3px; } #sec8 ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; } #sec8 ul li { width: 31.9%; } #sec8 ul li a { display: inline-block; } #sec8 ul li a img { width: 100%; } #footer { margin-top:0 !important } /* BASIC css end */ /* BASIC css end */ /* BASIC css end */