/* BASIC css start */ /* 섹션 공통 */ section { width: 100%; margin-bottom: 120px; } section .sec_inner { } section h2 { text-align: center; font-family: 'Red Hat Display', sans-serif; font-size: 20px; color: #555; font-weight: 500; margin-bottom: 50px; } /* sec1 */ #sec1 { margin-top: 135px; margin-bottom:40px; } #sec1 .swiper { } #sec1 .swiper ul { } #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-fraction { width: 200px !important; left: unset !important; right: 0 !important; bottom: 70px; } #sec1 .swiper-pagination { font-family: 'Red Hat Display', sans-serif !important; color: #aaa; font-weight: 600; } #sec1 .swiper-pagination-current { color: #000 !important; } #sec1 .swiper-pagination-total { } #sec1 .swiper-horizontal>.swiper-scrollbar { width: 100% !important; left: 0 !important; bottom:0 !important; height:4px !important } #sec1 .swiper-scrollbar-drag { background: rgba(0, 0, 0, 0.25); } #sec1 .swiper_btn_prev { position:absolute; left:50% !important; top:50%; transform:translate(-720px,-50%); z-index:4; cursor:pointer } #sec1 .swiper_btn_next { position:absolute; right:50% !important; top:50%; transform:translate(720px,-50%); z-index:4; cursor:pointer } /* 게시판 영역 */ .board_wrap { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom:70px; } .board_wrap .board_cont { width: 48%; border: 1px solid #e8e8e8; padding: 18px 20px; } .board_wrap .board_cont h1 { font-size: 22px; color: #171717; display: flex; justify-content: space-between; align-items: center; padding-bottom: 21px; margin-bottom: 23px; border-bottom: 1px solid #000; font-family: 'Noto Sans KR', sans-serif; } .board_wrap .board_cont h1 a { font-size:22px; } .board_wrap .board_cont dl { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .board_wrap .board_cont dl:last-child{margin-bottom:0;} .board_wrap .board_cont dl dt a { font-size: 14px; color: #171717; font-family: 'Noto Sans KR', sans-serif; } .board_wrap .board_cont dl dt a:hover { color:#000; } .board_wrap .board_cont dl dd { font-size: 14px; color: #171717; font-family: 'Noto Sans KR', sans-serif; } /* sec2 */ #sec2 ul { display:flex; flex-wrap:wrap } /* sec3 */ #sec3 { } #sec3 .sec_inner { height: 744px; } #sec3 .sec_inner>div { width: 50%; float: left; height: 100%; display: flex; } #sec3 .sec_inner>div>div { } #sec3 .sec_inner>div>div a { display: block; } #sec3 .sec_inner>div>div a img { } #sec3 .sec_inner .sec3_L { align-items: center; justify-content: right; padding-right: 20px; } #sec3 .sec_inner .sec3_L .thumb1 { } #sec3 .sec_inner .sec3_L .thumb1 a { } #sec3 .sec_inner .sec3_L .thumb1 a img { } #sec3 .sec_inner .sec3_R { align-items: center; justify-content: left; padding-left: 20px; } #sec3 .sec_inner .sec3_R .thumb2 { } #sec3 .sec_inner .sec3_R .thumb2 a { } #sec3 .sec_inner .sec3_R .thumb2 a img { } /* sec4 */ #sec4 { } #sec4 .sec_inner { padding-top:100px } #sec4 .sec_inner h2 { } #sec4 .sec_inner .sec4_cate { } #sec4 .sec_inner .sec4_cate ul { display:flex } #sec4 .sec_inner .sec4_cate ul li { width:calc(100% / 6); border:1px solid #ccc; } #sec4 .sec_inner .sec4_cate ul li:not(:last-child) { border-right:none } #sec4 .sec_inner .sec4_cate ul li.on { background-color:#f6f8fa } #sec4 .sec_inner .sec4_cate ul li a { display:block; width:100%; text-align:center; font-family: 'Red Hat Display', sans-serif; color:#aaa; font-size: 12px; font-weight: 600; letter-spacing: -.3px; transition: color .4s, border-color .3s, font-weight .3s; display:inline-block; padding: 14px 0; } #sec4 .sec_inner .sec4_cate ul li.on>a { color: #000 !important; } #sec4 .sec4_prd { } #sec4 .sec4_prd>div { display: none; position:relative; padding-top: 40px; } #sec4 .sec4_prd>div ul { display:flex; flex-wrap:wrap } #sec4 .sec4_prd>div.show { display: block; } /* sec5 */ #sec5 { } #sec5 .sec_inner { } #sec5 .sec_inner .banner { width: 100%; } #sec5 .sec_inner .banner a { display: block; width: 100%; } #sec5 .sec_inner .banner a img { width: 100%; } /* sec6 */ #sec6 { } #sec6 .sec_inner { } #sec6 .sec_inner h2 { } #sec6 .sec_inner .rev_sec { } #sec6 .sec_inner .rev_sec .swiper { padding-bottom: 70px; } #sec6 .sec_inner .rev_sec .swiper ul { width: 100%; } #sec6 .sec_inner .rev_sec .swiper ul li { width: 356px !important; height: 646px; border: 1px solid #eee; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_thumb { width: 100%; height: 460px; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_thumb a { display: block; width: 100%; height: 100%; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_thumb a img { width: 100%; height: 100%; object-fit: cover; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt { height: 186px; padding: 30px; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .prd_name { color: #555; font-size: 14px; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; padding-bottom: 10px; letter-spacing: -.7px; border-bottom: 1px solid #eee; margin-bottom: 10px; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont { } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_cont p { line-height:1.5; font-size: 13px; color: #bbb; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; letter-spacing: -.7px; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score { margin-top: 14px; } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score>span { } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart { } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .heart img { display: inline-block; transform: translateY(-1px); margin-right:4px } #sec6 .sec_inner .rev_sec .swiper ul li .rv_txt .rv_score .score { color: #daae97; font-size: 13px; font-family: 'Red Hat Display', sans-serif; font-weight: 500; } #sec6 .swiper-pagination-bullet { background-color:#000 !important; margin:0 8px; } /* BASIC css end */