/* index.html의 부분만 디자인하는 css */
main {
max-width:100%;
min-width:320px;
}
/* 제목 글자 디자인 통일 */
h2 {font-size:2.125rem; font-weight:600;}
h2 span {font-size:1.375rem; font-weight:500; color:#999;}
/* 메인배너 - 스와이퍼 디자인 */
main .main {width:100%; height:714px; position:relative;}
main .main .swiper-wrapper {}
main .main .swiper-wrapper .swiper-slide {
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
main .main .swiper-wrapper .slide1 {
background-image:url(../images/mainBnr_01.png);
}
main .main .swiper-wrapper .slide2 {
background-image:url(../images/mainBnr_02.png);
}
main .main .swiper-wrapper .slide3 {
background-image:url(../images/mainBnr_03.png);
}
/* 메인배너 - 스와이퍼 페이지네이션 디자인 */
main .main .swiper-pagination {
background:#fff;
width:68px; height:31px; border-radius:20px;
display:flex; justify-content:center; align-items: center; gap:5px;
position:absolute; left:auto; right:145px; bottom:60px;
}
main .main .swiper-pagination * {/* pagination의 모든 글자적용 */
font-size:0.875rem; font-weight:500;
}
/* 메인배너 - 스와이퍼 이전, 다음버튼 디자인 */
main .main .swiper-button-next:after, main .main .swiper-button-prev:after {
display:none; /* 스와이퍼 이전,다음버튼 기본디자인 삭제 */
}
main .main .swiper-button-next, main .main .swiper-button-prev {
width:70px; height:70px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
position:absolute;
}
main .main .swiper-button-prev {
background-image:url(../images/mainBnr_prev.png);
left:110px;
}
main .main .swiper-button-next {
background-image:url(../images/mainBnr_next.png);
right:110px;
}
/* -----------------2행 - 카테고리 스와이퍼 시작 */
main #row2_category {padding:100px 250px; width:100%; height:583px;}
main #row2_category .container {
height:100%;
position:relative;
}
main #row2_category .container h2 {
font-size:2.125rem; font-weight:600;
}
main #row2_category .container .category {/* 스와이퍼 전체크기 */
width:100%; height:199px;
margin:70px 0 70px;
}
main #row2_category .container .category .swiper-wrapper {}
main #row2_category .container .category .swiper-wrapper .swiper-slide {width:160px;}
main #row2_category .container .category .swiper-wrapper .swiper-slide a {text-align:center;}
main #row2_category .container .category .swiper-wrapper .swiper-slide a img {margin-bottom:20px;}
main #row2_category .container .swiper-button-prev:after,
main #row2_category .container .swiper-button-next:after {display:none;}
main #row2_category .container .swiper-button-prev {
top:34px; right:34px; left:auto;
width:24px; height:24px;
}
main #row2_category .container .swiper-button-next {
top:34px; right:0;
width:24px; height:24px;
}
main #row2_category .container .swiper-scrollbar {}
/* -----------------2행 - 카테고리 스와이퍼 끝 */
/* -----------------3행(베스트셀러) 시작 */
main #row3_best {
width:100%; padding:100px 250px;
position:relative;
}
main #row3_best h2 {font-size:2.125rem; font-weight:600; margin-bottom:70px; text-align: center; line-height:1.2;}
main #row3_best h2 span {font-size:1.375rem; font-weight:500; color:#999;}
/* 탭 버튼 */
main #row3_best .tab-buttons {
display:flex; justify-content:center;/* margin-bottom:26px; */
width:max-content; margin:0 auto 26px;
position:relative; left:10px;
}
main #row3_best .tab-buttons .tab-button {
font-size:0.875rem; font-weight:500; color:#555;
padding:10px 15px; border:1px solid #ddd; border-radius:20px;
margin-right:10px;
}
main #row3_best .tab-buttons .tab-button:last-child {margin-right:0;}
main #row3_best .tab-buttons .tab-button.active {
color:#fff; background:#0E2148; border:none;
}
/* 탭 내용 */
main #row3_best .tab-contents {
width:1420px; height:433px;
}
main #row3_best .tab-contents .tab-content {
display:none;/* 탭 내용 숨기기(초기화) */
}
main #row3_best .tab-contents .tab-content.active {
display:block;/* 활성화 탭내용만 보이기 */
}
/* 3행(베스트셀러) 스와이퍼 */
main #row3_best .tab-contents .tab-content .best {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide {
position:relative; width:300px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(1) {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(1) img {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(2) {
position:absolute; top:254px; right:16px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(2) img {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(3) {}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide a:nth-child(3) h3 {
font-size:1.125rem; font-weight:500; margin:15px 0 14px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide del {
font-size:0.75rem; font-weight:500; color:#666; display:block; margin-bottom:4px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide em {
color:#FF0000; font-weight:600; margin-right:5px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide span {font-weight:500;}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide .score_like_num * {
font-size:0.813rem; color:#666;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide .score_like_num {
display:flex; align-items:center; margin-top:30px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide .score_like_num a {
display:flex; align-items:center; margin-right:10px; gap:3px;
}
main #row3_best .tab-contents .tab-content .best .swiper-wrapper .swiper-slide .score_like_num p {
display:flex; align-items:center; gap:3px;
}
/* 이전, 다음 버튼 */
main #row3_best .tab-contents .tab-content .best .swiper-button-prev:after {display:none;}
main #row3_best .tab-contents .tab-content .best .swiper-button-next:after {display:none;}
main #row3_best .tab-contents .tab-content .best .swiper-button-prev {
background-image:url(../images/list_prev.png);
width:50px; height:50px;
top:125px; left:0; margin-top:0;
}
main #row3_best .tab-contents .tab-content .best .swiper-button-next {
background-image:url(../images/list_next.png);
width:50px; height:50px;
top:125px; right:0; margin-top:0;
}
main #row3_best .more {
padding:13px 55px; border:1px solid #ccc; border-radius:2px;
display:flex; align-items:center;
font-size:0.875rem; color:#333;
margin:70px auto 0;
}
main #row3_best .more img {margin-left:6px;}
/* -----------------3행(베스트셀러) 끝 */
/* -----------------4행(신제품) 시작 */
main #row4_new {padding:100px 250px;}
main #row4_new .container {width:1420px;}
main #row4_new .container h2 {margin-bottom:70px; text-align:center; }
main #row4_new .container .new {width:100%; height:433px;}
main #row4_new .container .new .swiper-wrapper {}
main #row4_new .container .new .swiper-wrapper .swiper-slide {position:relative;}
main #row4_new .container .new .swiper-wrapper .swiper-slide a:nth-child(1) {}
main #row4_new .container .new .swiper-wrapper .swiper-slide a img {}
main #row4_new .container .new .swiper-wrapper .swiper-slide a:nth-child(2) {position:absolute; top:254px; right:16px;}
main #row4_new .container .new .swiper-wrapper .swiper-slide a h3 {
font-size:1.125rem; font-weight:500;
margin:15px 0 14px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide del {
font-size:0.75rem; font-weight:500; color:#666; display:block;
margin-bottom:4px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide em {
font-weight:600; color:#ff0000; margin-right:5px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide span {
font-weight:500;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide .score_like_num {
display:flex; margin-top:30px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide .score_like_num a {
display:flex; justify-content:center; align-items:center; margin-right:10px; gap:3px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide .score_like_num p {
display:flex; justify-content:center; align-items:center; gap:3px;
}
main #row4_new .container .new .swiper-wrapper .swiper-slide .score_like_num * {
font-size:0.813rem; color:#666;
}
main #row4_new .container .new {position:relative; }
/* 이전, 다음 버튼 */
main #row4_new .container .new .swiper-button-prev:after {display:none;}
main #row4_new .container .new .swiper-button-next:after {display:none;}
main #row4_new .container .new .swiper-button-prev {
background-image:url(../images/list_prev.png);
width:50px; height:50px;
top:125px; left:0; margin-top:0;
}
main #row4_new .container .new .swiper-button-next {
background-image:url(../images/list_next.png);
width:50px; height:50px;
top:125px; right:0; margin-top:0;
}
/* -----------------4행(신제품) 끝 */
/* 5행(선물하기) */
main #row5_gift {padding:100px 250px; text-align:center;}
main #row5_gift h2 {line-height:1.2;}
main #row5_gift h2 span {}
main #row5_gift .tap_menu {
margin:40px 0 26px;
display:flex; gap:15px;
justify-content:center;
}
main #row5_gift .tap_menu .tap {
/* 비활성화 시 공통 탭디자인 */
padding:10px 15px; border:1px solid #ddd; border-radius:20px;
color:#555; font-size:0.875rem; font-weight:500;
}
main #row5_gift .tap_menu .tap.active {
/* 활성화 탭 디자인 */
background-color:#0E2148; color:#fff; border:none;
}
main #row5_gift .bottom {
display:flex; justify-content:space-between; gap:23px;
width:1420px; height:550px;
}
main #row5_gift .bottom img {}
/* 5행(선물하기) 스크롤 스와이퍼 */
main #row5_gift .bottom .gift {
width:720px; height:550px;/* 원하는 스와이퍼 전체 크기 */
display:flex; justify-content:space-between;
text-align:left;
}
main #row5_gift .bottom .gift .swiper-wrapper {
display:flex; flex-flow:column nowrap;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide {/* 개별슬라이드 값 설정 */
width:616px; height:170px;
position:relative;/* 좋아요아이콘 부모위치기준 */
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide > a:nth-child(1) {
/* 상품사진 */
margin-right:30px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide > a:nth-child(1) img {}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide > a:nth-child(2) {
/* 좋아요아이콘 */
position:absolute; left:130px; bottom:5px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide > a:nth-child(2) img {}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents {
position:absolute; left:200px; top:0;
padding:10px 0;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents > a {}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents > a h3 {
font-weight:500; font-size:1.063rem; margin-bottom:10px;
/* width:406px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; */
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents del {
display:block; font-size:0.75rem; font-weight:500; color:#666;
margin-bottom:4px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .price_wrap {
display:flex; gap:5px; margin-bottom:10px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .price_wrap em {
color:#ff0000; font-weight:600;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .price_wrap em:empty {display:none;}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .price_wrap span {
font-weight:500;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num {
display:flex; align-items:center; gap:10px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num a {
display:flex; align-items:center;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num a img {
margin-right:3px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num a span {
color:#666; font-size:0.813rem;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num p {
display:flex; align-items:center;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num p img {
margin-right:3px;
}
main #row5_gift .bottom .gift .swiper-wrapper .swiper-slide .contents .score_like_num p span {
color:#666; font-size:0.813rem;
}
main #row5_gift .bottom .gift .swiper-scrollbar {}
main #row5_gift .more {
display:flex; justify-content:center; align-items:center; margin:40px auto 0;
padding:13px 55px; border:1px solid #ccc; border-radius:2px;
color:#333; font-size:0.875rem; margin-right:6px;
position:relative; right:600.5px;
}
main #row5_gift .more img {}
/* -----------------6행(아티클) 시작*/
main #row6_article {
padding:100px 250px;
display:flex; justify-content:space-between;
}
main #row6_article .left {}
main #row6_article .left h3 {
font-family:'Oleo Script', serif ;
font-size:2rem; letter-spacing:5; color:#0E2148;
margin-bottom:10px;
}
main #row6_article .left h2 {line-height:1.2;}
main #row6_article .left h2 em {
font-size:1.375rem; font-weight:500; display:block;
}
main #row6_article .left .tap_menu {
display:flex; flex-flow:column nowrap;
margin-top:40px;
}
main #row6_article .left .tap_menu .tap {
margin-bottom:10px; padding:8px 0;
font-size:1.125rem; font-weight:500; color:#777;
}
main #row6_article .left .tap_menu .tap.active {
color:#000; border-bottom:3px solid #000; width:max-content;
}
main #row6_article .left .tap_menu .tap:last-child {margin-bottom:0;}
main #row6_article .right {
width:1066px;
position:relative;
}
main #row6_article .right button {
font-size:0.875rem; line-height:1.5; color:#444;
display:flex; align-items:center; gap:5px;
margin-bottom:10px; position:relative; left:996px;
}
main #row6_article .right button img {}
/* 6행(아티클) 가로스크롤 스와이퍼 */
main #row6_article .right .article {width:100%; height:461px;}
main #row6_article .right .article .swiper-wrapper {}
main #row6_article .right .article .swiper-wrapper .swiper-slide {width:350px; height:418px;}
main #row6_article .right .swiper-scrollbar {position:absolute; width:100%;}
main #row6_article .right .article .swiper-wrapper .swiper-slide a {}
main #row6_article .right .article .swiper-wrapper .swiper-slide a img {}
main #row6_article .right .article .swiper-wrapper .swiper-slide a .text {padding:10px 0;}
main #row6_article .right .article .swiper-wrapper .swiper-slide a .text * {margin-bottom:10px;}
main #row6_article .right .article .swiper-wrapper .swiper-slide a .text h3 {
font-size:1.063rem; font-weight:500; line-height:1.5;
}
main #row6_article .right .article .swiper-wrapper .swiper-slide a .text span {
display:block; padding:3px 10px; width:max-content;
color:#FF6BC9; border:1px solid #FF6BC9; border-radius:5px;
font-size:0.938rem; font-weight:500; line-height:1.5;
}
main #row6_article .right .article .swiper-wrapper .swiper-slide a .text p {
font-size:0.938rem; line-height:1.5; color:#222;
}
/* -----------------6행(아티클) 끝*/
/* -----------------7행(영상영역) 시작*/
main #row7_video {background-color:#EAEEE8; padding:100px 0; text-align:center;}
main #row7_video h2 {margin-bottom:70px;}
main #row7_video .video {width:1200px; height:639px; margin:0 auto;}
main #row7_video .video .video_tab {display:flex; gap:14px; float:right; margin-bottom:13px;}
main #row7_video .video .video_tab li {}
main #row7_video .video .video_tab .tab1 {}
main #row7_video .video .video_tab .tab2 {}
main #row7_video .video .video_tab .tab3 {}
main #row7_video .video .video_tab .tab4 {}
main #row7_video .video .video_tab li button {}
main #row7_video .video .video_tab li button img {}
main #row7_video .video .video_show {width:1200px; height:600px;}
main #row7_video .video .video_show li {width:100%; height:100%;}
main #row7_video .video .video_show .video1 {display:block;}
main #row7_video .video .video_show .video2 {display:none;}
main #row7_video .video .video_show .video3 {display:none;}
main #row7_video .video .video_show .video4 {display:none;}
main #row7_video .video .video_show li iframe {width:100%; height:100%;}
/* -----------------7행(영상영역) 끝*/
/* -----------------8행(리뷰영역) 시작 */
main #row8_review {padding:100px 0;}
main #row8_review .title {margin-bottom:70px;}
main #row8_review .title h2 {text-align:center; line-height:1.2;}
main #row8_review .title h2 span {display:block;}
main #row8_review .contents {
display:flex; justify-content:space-between; align-items:end;
width:1420px; margin:0 auto;
}
main #row8_review .contents .product {}
main #row8_review .contents .product h3 {
margin-bottom:11px; font-size:1.125rem; text-align:right; font-weight:500;
}
main #row8_review .contents .product .image_wrap {
/* 백그라운드이미지 */
/* background-image:url(../images/review/review_product01.png); */
width:600px; height:600px;
}
main #row8_review .contents .product .image_wrap img {width:100%;}
main #row8_review .contents .product .image_wrap .swiper.reviewPhoto {/* 스와이퍼시작 */}
main #row8_review .contents .product .image_wrap .swiper.reviewPhoto .swiper-wrapper {}
main #row8_review .contents .product .image_wrap .swiper.reviewPhoto .swiper-wrapper .swiper-slide {}
main #row8_review .contents .product .image_wrap .swiper.reviewPhoto .swiper-scrollbar {}
main #row8_review .contents .review {width:720px;}
main #row8_review .contents .review .tap_wrap {
display:flex; margin-bottom:20px; justify-content:end;
}
main #row8_review .contents .review .tap_wrap .tapBtn {
color:#444; padding:10px 0; width:95px; text-align:center;
border-bottom:3px solid #ddd;
cursor:pointer;
}
main #row8_review .contents .review .tap_wrap .tapBtn.active {
color:#000; border-bottom:3px solid #000;
font-weight:600;
}
main #row8_review .contents .review .tab_contents {}
main #row8_review .contents .review .tab_contents .tab_content {
height:600px; display:flex; flex-flow:row nowrap;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist {
display:flex;
padding:18px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist.list1 {
border-bottom:1px solid #ccc;
padding-bottom:40.5px;
position:relative;/* 더보기 이미지의 부모위치기준 */
}
/* 리뷰 더보기 버튼 부모위치기준 개별로 각각 주기 */
/* 여성탭 2번째 리뷰(위) */
/* 20대탭 2, 3번째 리뷰 */
main #row8_review .contents .review .tab_contents .tab_content:nth-child(4) .reviewlist.list2 {
position:relative;}
main #row8_review .contents .review .tab_contents .tab_content:nth-child(4) .reviewlist.list3 {
position:relative;}
/* 30대탭 2번째 리뷰 */
main #row8_review .contents .review .tab_contents .tab_content:nth-child(5) .reviewlist.list2 {
position:relative;}
/* 40대탭 2, 3번째 리뷰 */
main #row8_review .contents .review .tab_contents .tab_content:nth-child(6) .reviewlist.list2 {
position:relative;}
main #row8_review .contents .review .tab_contents .tab_content:nth-child(6) .reviewlist.list3 {
position:relative;}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist.list2 {
border-bottom:1px solid #ccc;
padding-top:40.5px;
padding-bottom:40.5px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist.list3 {
padding-top:40.5px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist > img {
margin-right:55px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent {
padding-top:10px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .top {
display:flex; justify-content:space-between;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .top .product_name {
font-weight:500;
margin-bottom:10px;
width:341px;/* 글자영역의 너비 고정 */
overflow:hidden; /* 넘치는 내용 숨기기 */
white-space:nowrap;/* 줄바꿈없이 한줄로 표시 */
text-overflow:ellipsis;/* 넘치는 경우 말줄임표 처리 */
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .top .score {
display:flex; height:16px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .top .score img {
/* width:16px; height:16px; */ width:13px; height:13px;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .bottom {
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .bottom .reviewtext {
width:425px; height:85px; line-height:1.5;
overflow:hidden; text-overflow:ellipsis;
font-size:0.875rem;
display:-webkit-box;
-webkit-line-clamp: 4; /* 몇 줄까지 보일지 설정(나머진 말줄임처리) */
-webkit-box-orient: vertical;
}
main #row8_review .contents .review .tab_contents .tab_content .reviewlist .reviewContent .bottom img {
position:absolute; right:18px; bottom:40.5px; cursor: pointer;
}
/* 리뷰 팝업 */
.popup_bg {
position:fixed; top:0; left:0;/* position fixed나 absolute */
z-index:800;/* header보다 뒤에 오도록 */
background-color:rgba(0,0,0,0.4);
width:100%; height:100vh;
display:none;/* 초기숨기기(부모에만 해주면됨) */
}
.popup_bg .popup {
width:800px; margin:120px auto 0;/* 너비를 줘서 자식인 img크기가 자동으로 따라오도록+가운데배치 */
height:40%; overflow:auto;/* 어느정도 안에서 보고싶은지 크기설정+그 범위보다 넘치면 자동으로 스크롤생성하도록 auto설정 */
background-color:#fff; border:10px solid #ddd;
padding:30px;
}
.popup_bg .popup .wrap1 {
display:flex; gap:20px; margin-bottom:20px;
}
.popup_bg .popup .wrap1 p {
font-weight:600; font-size:1.25rem;
}
.popup_bg .popup .wrap1 .popup_score {}
.popup_bg .popup .wrap1 .popup_score img {width:16px;}
.popup_bg .popup .wrap2 {display:flex; gap:20px;}
.popup_bg .popup .wrap2 img {width:160px; height:160px;}
.popup_bg .popup .wrap2 p {font-size:1.1rem; line-height:1.5;}
/* -----------------8행(리뷰영역) 끝 */
/* -----------------9행(브랜딩영역) 시작 */
main #row9_brand_meaning {padding:100px 0; display:flex; justify-content:center;}
main #row9_brand_meaning .left {}
main #row9_brand_meaning .right {}
main #row9_brand_meaning .right li {
border-top:1px solid #ddd;
margin-bottom:20px;
display:flex; align-items: center; justify-content: center;
}
main #row9_brand_meaning .right li:nth-child(1) {
width:454px; height:173px; margin-left:80px;
}
main #row9_brand_meaning .right li:nth-child(2) {
width:537px; height:165px; margin-left:147px;
}
main #row9_brand_meaning .right li:nth-child(3) {
width:521px; height:165px; margin-left:227px;
margin-bottom:0;
}
main #row9_brand_meaning .right li .text_wrap {}
main #row9_brand_meaning .right li .text_wrap p {
font-size:1.5rem; font-weight:500;
text-shadow:2px 2px 10px rgba(0, 0, 0, 0.1);
margin-bottom:24px;
}
main #row9_brand_meaning .right li:nth-child(1) .text_wrap p em {color:#FF6E7D;}
main #row9_brand_meaning .right li:nth-child(2) .text_wrap p em {color:#7CDEF9;}
main #row9_brand_meaning .right li:nth-child(3) .text_wrap p em {color:#F9B3DF;}
main #row9_brand_meaning .right li .text_wrap span {
font-size:1.125rem; color:#444; line-height:1.5;
}
/* -----------------9행(브랜딩영역) 끝 */
/* 반응형규칙 */
@media screen and (max-width:1199px){/* 태블릿 */
/* 기존css에서 달라지는 값만 작성 */
html {border:2px solid red;}
main {}
}/* media 760~1199 end */
@media screen and (max-width:759px){/* 모바일 */
html {border:2px solid blue;}
main {}
}/* media 320~759 end */