-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
999px 풋터에 '한국어' 떄문에 풋터가 길어졌어요
21.08.19 21:37 작성 조회수 203
1
안녕하세요? 쌤~ 마지막 질문좀 드릴께용~ ^^;
999px에서 풋터부분 하단에 한국어 footer_lang 부분이 클릭하면 보여지는데 그것떄문에 클릭 안해도 풋터하단이 길게 남아 있아요..보통 이렇게 하단을 길게 냅두는지 아니면 누르기전에는 하단이 짧게 잇어야할거 같은데요.
사라지게 숨겨놔도 잘안되서요. 하단 랭귀지 선택은 어떻게 만들어야 하나요?
그리고 한국어 클릭하면 오른쪽으로 한국어 글자가 밀리고 select_lang_list 안에 폰트사이즈가 작게 안먹히는데 왜 그럴까요? ㅜㅜ
감사합니다~수고하세용!! 아래 코드입니다.^^
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>설화수, 아시아의 지혜가 담긴 홀리스틱 뷰티 | 설화수 한국</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!-- style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<!-- header -->
<header class="header">
<div class="header_wrap">
<!-- moblie nav -->
<a href="#" class="mob_nav_btn">
<i></i>
</a>
<!-- mob_nav -->
<div class="mob_nav">
<div class="bg"></div>
<!-- mob_nav_wrap -->
<div class="mob_nav_wrap">
<h2 class="sidenav-h">
<a href="#"></a>
<img src="./img/logo_sulwhasoo_m.png" alt="">
</h2>
<ul class="m_nav_list">
<li>
<a href="#">브랜드스토리
<i class="icon_nav"></i>
</a>
</li>
<li>
<a href="#" class="m_nav_tit">제품 <i class="icon_nav"></i>
</a>
<dl><!-- 섭메뉴 -->
<dt class="blind">제품</dt>
<dd><a href="#">신제품</a></dd>
<dd><a href="#">베스트셀러</a></dd>
<dd><a href="#">스킨케어</a></dd>
<dd><a href="#">메이크업</a></dd>
<dd><a href="#">진설</a></dd>
<dd><a href="#">명작 컬렉션</a></dd>
<dd><a href="#">남성</a></dd>
<dd><a href="#">라이프스타일</a></dd>
</dl>
</li>
<li>
<a href="#" class="m_nav_tit">설화수 라운지
<i class="icon_nav"></i>
</a>
<dl><!-- 섭메뉴 -->
<dt class="blind">설화수라운지</dt>
<dd><a href="#">설화수 스타일</a></dd>
<dd><a href="#">뷰티리추얼</a></dd>
<dd><a href="#">아카이브</a></dd>
<dd><a href="#">설화문화전</a></dd>
<dd><a href="#">매거진</a></dd>
<dd><a href="#">소식</a></dd>
</dl>
</li>
<li>
<a href="#"class="m_nav_tit">소개
<i class="icon_nav"></i>
</a>
<dl><!-- 섭메뉴 -->
<dt class="blind">소개</dt>
<dd><a href="#">소개</a></dd>
<dd><a href="#">스파프로그램</a></dd>
<dd><a href="#">예약</a></dd>
<dd><a href="#">매장찾기</a></dd>
</dl>
</li>
<li>
<a href="#"class="m_nav_tit">플래그십 스토어</a>
<dl><!-- 섭메뉴 -->
<dt class="blind">플래그십 스토어</dt>
<dd><a href="#">소개</a></dd>
<dd><a href="#">리미티드에디션</a></dd>
<dd><a href="#">스페셜 서비스</a></dd>
<dd><a href="#">예약</a></dd>
<dd><a href="#">소식</a></dd>
</dl>
</li>
</ul>
<!--mob_btm-->
<div class="m_nav_btm">
<div class="m_nav_cp">
<p>
<a href="#">회사소개</a>
<a href="#">서비스이용약관</a>
<a href="#">UGC이용약관</a>
<a href="#">개인정보처리방침 </a>
<a href="#">영상정보처리방침</a>
<a href="#">사이트맵</a>
<a href="#">로그인</a>
<a href="#">회원가입</a>
</p>
<div class="m_nav_cs">
고객서비스센터(수신자요금부담) 080-023-5454<br>
월~금: AM 09:00~PM 06:00
</div>
<div class="m_copy">
© AMOREPACIFIC CORPORATION. All rights reserved.
</div>
<a href="#"><img src="img/wa.png" alt="wa"></a>
</div>
</div>
</div>
</div>
<!-- select_language -->
<div class="select_language">
<a href="#" class="t_lang">
한국/한국어
<i class="icon-angle-up"></i>
<i class="icon-angle-down"></i>
</a>
<ul class="select_lang_list">
<li>
<a href="#">한국/한국어</a>
</li>
<li>
<a href="#">International/English</a>
</li>
<li>
<a href="#">中国大陆/中文</a>
</li>
<li>
<a href="#">中國香港/繁體中文</a>
</li>
<li>
<a href="#">Hong Kong(China)/English</a>
</li>
<li>
<a href="#">Singapore/English</a>
</li>
<li>
<a href="#">Malaysia/English</a>
</li>
<li>
<a href="#">Việt Nam/Tiếng Việt</a>
</li>
<li>
<a href="#">Indonesia/Bahasa Indonesia</a>
</li>
<li>
<a href="#">ประเทศไทย/ไทย</a>
</li>
<li>
<a href="#">USA/English</a>
</li>
<li>
<a href="#">FRANCE/FRANCAIS</a>
</li>
</ul>
</div>
<h1 class="logo">
<a href="#"><img src="img/logo_sulwhasoo.png" alt="logo">
</a>
</h1>
<div class="header_link">
<a href="#">매장찾기</a>
<a href="#">구매하기</a>
<a href="#" class="h_open_search"><i class="icon-search"></i>
</a>
<div class="search_container ">
<form action="sarch.jsp">
<div class="search_wrap">
<label for="q" class=blind></label>
<input type="search" id="q" class="text">
<button class="submit">
<i class="icon-search"></i>
</button>
</div>
<a href="#" class="sch_close">
<img src="img/bu_x.png" alt="검색창닫기">
</a>
</form>
</div>
</div>
</div>
<!-- gnb -->
<div class="gnb ">
<div class="header_wrap">
<ul class="gnb_menu">
<li class="nav_d1">
<a href="#" class="nav_d1_a">브랜드스토리</a>
</li>
<li class="nav_d1 d1_Over ">
<a href="#" class="nav_d1_a">제품</a>
<ul>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a"> 신제품 </a>
<a href="#" class="nav_d2_a">베스트셀러</a>
<a href="#" class="nav_d2_a">스킨케어 </a>
<a href="#" class="nav_d2_a">메이크업</a>
<a href="#" class="nav_d2_a">진설명작</a>
<a href="#" class="nav_d2_a">명작컬렉션 </a>
<a href="#" class="nav_d2_a">남성</a>
<a href="#" class="nav_d2_a"> 라이프스타일</a>
<a href="#" class="nav_d2_a"> 전제품 구성 </a>
<a href="#" class="nav_d2_a"> 신제품 </a>
</li>
</ul>
</li>
<li class="nav_d1 d1_Over">
<a href="#" class="nav_d1_a">
설화수 라운지
</a>
<ul>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">설화수 스타일</a>
<a href="#" class="nav_d2_a">뷰티리추얼</a>
<a href="#" class="nav_d2_a">설화문화전</a>
<a href="#" class="nav_d2_a">매거진</a>
<a href="#" class="nav_d2_a">소식</a>
</li>
</ul>
</li>
<li class="nav_d1 d1_Over">
<a href="#" class="nav_d1_a">
스파
</a>
<ul>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">소개</a>
<a href="#" class="nav_d2_a">스파프로그램 </a>
<a href="#" class="nav_d2_a">예약찾기</a>
<a href="#" class="nav_d2_a">매장찾기</a>
</li>
</ul>
</li>
<li class="nav_d1 d1_Over">
<a href="#" class="nav_d1_a">
플래그십 스토어
</a>
<ul>
<li class="nav_d2_box">
<a href="#" class="nav_d2_a">소개</a>
<a href="#" class="nav_d2_a">리미티드 컬렉션</a>
<a href="#" class="nav_d2_a">스페셜서비스</a>
<a href="#" class="nav_d2_a">예약</a>
<a href="#" class="nav_d2_a">소식</a>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- gnb end -->
</header><!-- header end -->
<!-- sub_menu -->
<div class="sub_menu">
<ul>
<li></li><!--비워둔다-->
</ul>
</div><!-- sub_menu end -->
<div id="main">
<!-- visual -->
<div class="visual">
<button class="right visu_arrow">right</button>
<button class="left visu_arrow">left</button>
<ul class="visu_btm_wrap">
<li class="visu_btm_list"><a href="#">btn01</a></li>
<li class="visu_btm_list"><a href="#">btn02</a></li>
<li class="visu_btm_list"><a href="#">btn03</a></li>
<li class="controls_wrap">
<button class="start control">start</button>
<button class="stop control">stop</button>
</li>
</ul>
<!-- visual_wrap -->
<ul class="visual_wrap">
<li class="visu_slide">
<div class="visu_veil"></div>
<div class="visu_txt_wrap">
<div class="visu_txt_cont">
<div class="visu_tit">
자음생에센스
</div>
<div class="visu_txt_sub01">
Concentrated Ginseng Renewing Serum
</div>
<p class="visu_txt_sub02">
진세노믹스™가 선사하는
<br>
3중 마이크로타켓팅으로
<br>
쉽게 무너지지 않는 탄탄한 피부
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
<a href="#" class="btn_view">구매하러가기</a>
</div>
</div>
</div>
</li>
<li class="visu_slide">
<div class="visu_veil"></div>
<div class="visu_txt_wrap" >
<div class="visu_txt_cont">
<div class="visu_tit">
자음생앰플
</div>
<div class="visu_txt_sub01">
Concentrated Ginseng Rescue Ampoule
</div>
<p class="visu_txt_sub02">
단 한 번 사용으로도 외부자극으로 시달린<br>
피부를 개선해주는 레스큐 앰플
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</li>
<li class="visu_slide">
<div class="visu_veil" ></div>
<div class="visu_txt_wrap" >
<div class="visu_txt_cont">
<div class="visu_tit">
윤조에센스
<br>
2020 뉴이어 컬렉션
</div>
<div class="visu_txt_sub01">
BEAUTY FROM YOUR CULTURE
</div>
<p class="visu_txt_sub02">
온 세상에 복을 전하는
<br>
마술같은 여정
<br>
쉽게 무너지지 않는 탄탄한 피부
</p>
<div class="visu_btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</li>
</ul>
</div><!-- visual_wrap end -->
<!-- content -->
<div class="content">
<div class="recommend">
<h2 class="cont_title">설화수 선물추천</h2>
<!-- recomm_tab-->
<div class="recomm_tab">
<a href="#" class="btn_tab on">TRENDING</a>
<a href="#" class="btn_tab">BEST</a>
<a href="#" class="btn_tab">NEW</a>
</div>
<!-- recomm_list_wrap -->
<div class="recomm_list_wrap">
<!-- recomm_list1 -->
<ul class="recomm_list Act">
<li>
<div class="recomm_img">
<img src="./img/recom_01.jpg" alt="01">
</div>
<div class="recomm_name">
윤조에센스 뉴이어 리미티드
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_02.jpg" alt="01">
</div>
<div class="recomm_name">
전설명작크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_03.jpg" alt="01">
</div>
<div class="recomm_name">
자음생 2종 기획
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_04.jpg" alt="01">
</div>
<div class="recomm_name">
진설 2종기획
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
<!-- recomm_list2 -->
<ul class="recomm_list">
<li>
<div class="recomm_img">
<img src="./img/recom_05.jpg" alt="01">
</div>
<div class="recomm_name">
자음생크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_09.jpg" alt="01">
</div>
<div class="recomm_name">
자음생에센스
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_07.jpg" alt="01">
</div>
<div class="recomm_name">
자음생유액
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_08.jpg" alt="01">
</div>
<div class="recomm_name">
자음생크림
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
<!-- recomm_list3 -->
<ul class="recomm_list">
<li>
<div class="recomm_img">
<img src="./img/recom_09.jpg" alt="01">
</div>
<div class="recomm_name">
윤조에센스 세포라 리미티드
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_10.jpg" alt="01">
</div>
<div class="recomm_name">
옥용팩
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_11.jpg" alt="01">
</div>
<div class="recomm_name">
여윤팩
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
<li>
<div class="recomm_img">
<img src="./img/recom_12.jpg" alt="01">
</div>
<div class="recomm_name">
퍼팩팅 파운데이션 클로우
</div>
<div class="buy_view_layer">
<a href="#">자세히보기</a>
</div>
</li>
</ul>
</div>
</div>
<!-- lounge -->
<!-- 767px cont02 -->
<div class="cont02">
<div class="lounge lou01"><!-- lou01 -->
<div class="lounge_cont">
<div class="lounge_img">
<a href="#">
<img src="../img/lou_01.jpg" alt="liu01">
</a>
</div>
<div class="lounge_txt_wrap">
<h3>SHADE picker</h3>
<p class="sub_tit">나에게 맞는 컬러가
궁금하다면?</p>
<p class="desc">사용 중인 페이스 메이크업 제품 정보를 통
같은 컬러의 설화수 제품을 찾아드립니다.</p>
<div class="btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</div>
<div class="lounge lou02"><!-- lou02 -->
<div class="lounge_cont">
<div class="lounge_img">
<a href="#">
<img src="./img/lou02.jpg" alt="liu01">
</a>
</div>
<div class="lounge_txt_wrap">
<h3>뷰티리추얼</h3>
<p class="sub_tit">윤조 & 자음생<br>
탄력 시너지 듀오
<p class="desc">설화수 대표 윤조에센스 자음생에센스가 선사하는<br>
감동의 탄력 시너지로 올 여름 탄탄한 피부를 느껴보세요 느껴보세요</p>
<div class="btn_wrap">
<a href="#" class="btn_view">자세히보기</a>
</div>
</div>
</div>
</div>
</div>
<!-- flagship store&spa -->
<div class="flagship">
<h2 class="cont_title">
설화수 플래그십 스토어 & 스파
</h2>
<div class="flag_wrap">
<ul class="flag_slider">
<li class="fl_01">slider</li>
<li class="fl_02">slider</li>
<li class="fl_03">slider</li>
<li class="fl_04">slider</li>
</ul>
<ul class="flag_btm_wrap">
<li class="Act"><a href="#">0</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
<div class="flag_txt_wrap">
<p>
등불이 어둠을 밝혀 길을 안내하 듯, <br>
아시아의 지혜를 담아 아름다움을 비추는<br>
설화수 플래그십 스토어와 스파를 <br>
방문해보세요.
</p>
<a href="#" class="btn_view">
자세히보기
</a>
</div>
<a href="#" class="flagside left">left</a>
<a href="#" class="flagside right">right</a>
</div>
</div>
</div><!-- content end-->
</div>
<footer class="footer">
<div class="footer_wrap">
<div class="foot_link">
<div class="link_left">
<div class="foot_item_wrap">
<a href="#" class="footer_item">회사소개</a>
<a href="#" class="footer_item">서비스이용약관</a>
<a href="#" class="footer_item">UGC이용약관</a>
<a href="#" class="footer_item">개인정보처리방침</a>
<a href="#" class="footer_item">영상정보처리방침</a>
<a href="#" class="footer_item">사이트맵</a>
</div>
<div class="foot_item_wrap">
<a href="#" class="footer_item">로그인</a>
<a href="#" class="footer_item">회원가입</a>
<span class="footer_item">고객상담팀(수신자요금부담):080-023-5454
</span>
<span class="footer_item">[상담시간] 월~금:AM 09:00~PM 06:00
</span>
</div>
</div>
<div class="link_right">
<a href="#" class="link_item">
<img src="img/wa.png" alt="wa">
</a>
<a href="#" class="link_item">
<i class="icon-facebook"></i>
</a>
<a href="#" class="link_item">
<i class="icon-instagram"></i>
</a>
<a href="#" class="link_item">
<i class="icon-youtube-play"></i>
</a>
</div>
</div>
<div class="footer_legal">
©AMOREPACIFIC CORPORATION. All rights reserved.
</div>
<!-- 999px -->
<div class="footer_mob">
<a href="#" class="link_loc">매장찾기
<i class="icon-location"></i>
</a>
<div class="footer_lang">
<a href="#" class="link-lang">한국어
<i class="icon-angle-up"></i>
<i class="icon-angle-down"></i>
</a>
<ul class="select_lang_list">
<li>
<a href="#">한국/한국어</a>
</li>
<li>
<a href="#">International/English</a>
</li>
<li>
<a href="#">中国大陆/中文</a>
</li>
<li>
<a href="#">中國香港/繁體中文</a>
</li>
<li>
<a href="#">Hong Kong(China)/English</a>
</li>
<li>
<a href="#">Singapore/English</a>
</li>
<li>
<a href="#">Malaysia/English</a>
</li>
<li>
<a href="#">Việt Nam/Tiếng Việt</a>
</li>
<li>
<a href="#">Indonesia/Bahasa Indonesia</a>
</li>
<li>
<a href="#">ประเทศไทย/ไทย</a>
</li>
<li>
<a href="#">USA/English</a>
</li>
<li>
<a href="#">FRANCE/FRANCAIS</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- script -->
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/nav.js"></script>
<script src="js/visu.js"></script>
<script src="js/content.js"></script>
<script src="js/flag.js"></script>
</body>
</html>
media.css
@charset "utf-8";
@media screen and (max-width:1439px){
body {
overflow-x:hidden;
}
.content{
width:auto;
}
.recommend{
margin-top:8.3333vw;
}
.recomm_tab{
margin-bottom:1.736vw;
}
.recomm_list_wrap{
height:auto;
}
.recomm_img img{
width:auto;
height:20.139vw;
}
.lounge{
margin-top: 4.8611vw;
padding: 0 6.25vw;
height: 40.9722vw;
}
.lounge_img{
width:40.9722vw;
}
.lounge_img img{
width:100%;
}
.lounge_txt_wrap{
width:calc(100% - 49.8611vw)
}
.lounge_txt_wrap .sub_tit {
margin: 2.7777vw 0 0;
font-size: 3.19444vw;
line-height: 4.5138vw;
}
.lounge_txt_wrap .desc {
margin: 1.111vw 0 0;
font-size: 1.3888vw;
line-height: 2.2222vw;
}
.lounge_txt_wrap .btn_view {
margin-top: 3.75vw;
height: 2.638vw;
padding: 0 3.0555vw;
font-size: 1.0416vw;
line-height: 2.6388vw;
}
.flagship {
margin: 8.333vw
0 7.778vw;
}
.flag_txt_wrap{
left: 49vw;
width: 25.777vw;
}
.flag_txt_wrap p {
font-size: 1.25vw;
line-height: 2.0833vw;
}
.flag_txt_wrap .btn_view {
margin-top: 3.75vw;
height: 2.63888vw;
padding: 0 3.0555vw;
font-size: 1.0416vw;
line-height: 2.6388vw;
}
.flag_txt_wrap{
margin-top: 2.0833vw;
}
.flagside{
width: 3.1250vw;
height: 5.481vw;
top: calc(50% - 2.7083vw);
}
}
@media screen and (max-width:999px){
.select_language {
display: none;
}
.header_link>a:not(.h_open_search){
display: none;
}
.gnb{
display: none;
}
.header_wrap{
justify-content: center;
height: 60px;
}
.header_link{
width: auto;
padding-top: 0;
}
.header_link> a.h_open_search{ /*우선순위에 밀려서 앱소이 안먹힌다. 검사에 들가서 똑같이 더 길게 써준다 */
position: absolute;
right: 10px;
top: 10px;
margin: 0;
padding: 0;
font-size: 24px;
}
.mob_nav_btn{
display: block;
position: absolute;
left: 20px;
top: 18px;
width: 20px;
height: 20px;
}
.mob_nav_btn i{
position: relative;
display: inline-block;
width: 100%;
height: 2px;
background-color: #767676;
}
.mob_nav_btn i:after{
content: "";
position: absolute;
display: block;
top: -5px;
left: 0;
width: 100%;
height: 2px;
background-color: #767676;
}
.mob_nav_btn i:before{
content: "";
position: absolute;
display: block;
top: 5px;
left: 0;
width: 100%;
height: 2px;
background-color: #767676;
}
h1.logo img{
width: 140px;
}
/* nav */
.mob_nav{
display: block;
position: fixed;
left: -264px;
top: 0;
width: 264px;
height: 100%;
background-color: #363636;
transition: 0.5s;
}
.mob_nav.move{
left: 0;
}
.mob_nav .bg{
position: fixed;
top: 0;
left: 264px;
width: calc(100% - 264px);
height: 100%;
background-color: rgba(0,0,0,0.308);
display: none;
}
.mob_nav_wrap{}
.sidenav-h{
text-align: center;
padding: 13px 0 12px;
}
.sidenav-h img{
width: 100px;
}
ul.m_nav_list{
border-top: 1px solid #494949;
}
ul.m_nav_list li> a{
display: block;
position: relative;
font-size: 15px;
padding: 12px 0 12px 15px;
border-bottom: 1px solid #494949;
color: #d5d5d5;
font-weight: 700;
}
ul.m_nav_list li> a.m_nav_tit.On{
background-color: #1d1d1d;
}
ul.m_nav_list .icon_nav{
position: absolute;
right: 15px;
top: calc(50% - 7px);
width: 14px;
height: 14px;
display: block;
}
ul.m_nav_list .icon_nav:before{
content: "";
display: block;
position: absolute;
left: 0;
top: calc(50% - 1px);
width: 100%;
height: 2px;
background-color: #555;
}
ul.m_nav_list .icon_nav:after{
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
background-color: #555;
transform: rotate(90deg);
transition: 0.3s;
}
a.m_nav_tit.On .icon_nav:after{
transform: rotate(0);
}
.m_nav_list li>dl{
display: none;
}
.m_nav_list li>dl>dd{
border-bottom: 1px solid #414141;
line-height: 1.6;
font-weight: 700;
}
.m_nav_list li>dl>dd>a{
display: block;
padding: 12px 0 12px 30px;
font-size: 14px;
}
.m_nav_btm{
padding: 50px 0 12px 10px;
font-size: 12px;
color: #767676;
line-height: 1.8;
}/* | m_nav_cp안에 p 안에 첫번쨰 a 다음에 오는 모든 a들 */
.m_nav_cp p a {
display: inline-block;
color: #767676;
line-height: 1.1;
}
.m_nav_cp p a +a {
border-left: 1px solid #4f4f4f;
padding-left: 7px; /* a앞에 |을 밀어야하는데, a기준으로 padding-left밀어야 글자랑 |가 분리되고 왼쪽공간과 |는 margin-left로 민다 */
margin-left: 3px ;
}
/* search */
#main.on{
filter: blur(10px);
}
.search_container.show {
width: 100%;
transition: none;
position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: #fff;
}
.search_wrap input.text{
height: 40px;
padding: 0 12px;
}
.search_wrap .submit{
top: 3px;
right: -5px;
}
/* visual */
.visual_wrap{
height: 38.134vw;
}
.visu_tit {
font-size: 2.917vw;
line-height: 3.750vw;
letter-spacing: -0.139vw;
}
.visu_txt_sub01 {
font-size: 1.25vw;
}
.visu_txt_sub02 {
margin: 3.194vw 0 0;
font-size: 1.389vw;
}
.visu_txt_cont{
width:80%;
}
.visu_btn_wrap{
margin:2.083vw 0 0;
}
.visu_btn_wrap .btn_view{
width:9.167vw;
height:2.639vw;
font-size:1.042vw;
line-height: 2.639vw;
margin-left:0.694vw;
}
.visu_arrow{
width: 2.093vw;
height: 4.028vw;
margin-top: -2.014vw;
background-size: contain;
}
.visu_arrow.left{
left:1.3889vw;
}
.visu_arrow.right{
right:1.3889vw;
}
.visu_btm_wrap {
bottom: 1.667vw;
}
.visu_btm_wrap li{
padding: 0 0.347vw;
}
.visu_btm_wrap li a{
width: 0.694vw;
width: 0.694vw;
border-radius: 0.347vw;
}
/* recommend */
.recomm_tab {
width: 52.917vw;
}
.buy_view_layer>a{
width:9.167vw;
height:2.639vw;
font-size:1.042vw;
line-height: 2.639vw;
padding: 0;
}
.flagside{
top: 50%;
transform: translateY(-50%);
background-size: 95%;
}
.flagside.right{
right: -5px;
}
.flag_txt_wrap {
left: 55vw;
width: 25.777vw;
}
/* footer */
.footer{
margin: 80px 0 0px;
}
.link_left {
display: none;
}
.link_right .link_item:first-child{
display: none;
}
.foot_link {
justify-content: center;
}
.footer_legal{
display: none;
}
.footer {
border-top: none;
margin: 0;
}
.footer_wrap{
padding: 0;
}
.link_right .link_item i{
font-size: 1.8em;
line-height: 48px;
}
.footer_mob{
display: block;
text-align: center;
padding: 15px 0;
}
.footer_mob a, .footer_lang{
display: inline-block;
width: 150px;
text-align: center;
position: relative;
}
.footer_mob> a:first-child:after{
content: "";
position: absolute;
width: 1px;
height: 12px;
background-color: #d5d5d5;
top: 30%;
right: 0;
}
.footer_lang.show ul.select_lang_list{
visibility: visible;
top: 30px;
padding: 0 60px 0 20px;
}
.footer_lang.show .icon-angle-up{
opacity: 1;
position: absolute;
left: 95px;
}
.footer_lang.show .icon-angle-down{
opacity: 0;
}
.footer_mob a{
font-size: 2.2vw;
}
}/*end*/
/* 767px */
@media screen and (max-width:767px){
.header_wrap{
height: 50px;
}
.mob_nav_btn{
top: 12px;
}
.header_link>a.h_open_search{
top: 5px;
}
h1.logo img{
width: 112px;
}
.visual_wrap{
height: 135vw;
}
.visu_slide:nth-child(1){
background-image:url(../img/visu_mo_01.jpg);
}
.visu_slide:nth-child(2){
background-image:url(../img/visu_mo_02.jpg);
}
.visu_slide:nth-child(3){
background-image:url(../img/visu_mo_03.jpg);
}
.visu_veil{/*애니메이션은 비저빌리티로하면 더 나음*/
visibility: hidden;
}
.visu_txt_wrap{
top: auto;
bottom: 0;
width: 100%;
height: 28.125vw;
}
.visu_txt_cont{
width: 100%;
align-items:center;
}
.visu_txt_sub02{
display: none;
}
.visu_btn_wrap{
display: none;
}
.visu_slide:nth-child(1) .visu_txt_wrap{
background: rgba(237,185,46,.3);
}
.visu_slide:nth-child(2) .visu_txt_wrap{
background-color: rgba(164,105,53,.3);
}
.visu_slide:nth-child(3) .visu_txt_wrap{
background-color: rgba(140,171,217,.5);
}
.visu_tit{
font-size: 6.25vw;
line-height: 7.188vw;
letter-spacing: -0.1em;
}
.visu_txt_sub01{
font-size: 3.438vw;
margin:1.250vw;
letter-spacing: -0.1em;
}
ul.visu_btm_wrap{
bottom: -8vw;
}
li.visu_btm_list a{
width: 2.5vw;
height: 2.5vw;
background-color: #e7e7e7;
border-right: 1.250vw;
}
.start.control{
background-image: url(../img/btn-play-mo.png);
}
.stop.control{
background-image: url(../img/btn-stop-mo.png);
}
.visu_arrow{
width: 20px;
top: auto;
bottom: -8.438vw;
background-position: center top;
padding: 0;
}
/* recommend */
.recommend{
margin-top: 21.875vw;
}
h2.cont_title{
font-size: 5vw;
}
.recomm_tab{
width: auto;
height: 8.625vw;
margin: 0 4.688vw;
}
.recomm_tab a.btn_tab{
font-size: 14px;
line-height: 8.625vw;
}
ul.recomm_list.Act{
margin-top: 4.688vw;
flex-wrap: wrap; /*공간부족하면 아래로 떨어뜨림*/
}
ul.recomm_list li{
width: 50%;
height: 68.438vw;
padding: 0 1.25vw;
cursor: pointer;
}
ul.recomm_list li:hover .buy_view_layer{
opacity: 0;
}
.recomm_img{
display: flex;
height: 50vw;
justify-content: center;
align-items: center;
border: 1px solid #eee;
}
ul.recomm_list li .recomm_img img{
width: auto;
height: 30.139vw;
}
ul.recomm_list li .recomm_name{
padding: 1.875vw 0;
font-size: 3.75vw;
}
/* lounge */
.cont02{
margin-top: 6.125px;
background-color: #fafafa;
padding: 22.9375vw 0;
}
.lounge_cont{
flex-flow: wrap;
}
.lounge_img{
width: auto;
margin: 4.375vw 0;
padding: 0 8.75vw;
}
.lounge{
height: auto;
position: relative;
padding: 0;
}
.lounge_txt_wrap{
width: 100%;
padding: 0 8.75vw;
}
.lounge_txt_wrap h3{
position: absolute;
top: -50px;
width: 100%;
font-size: 4.375vw;
}
.lounge_txt_wrap desc{
margin: 6.25vw 0 0;
font-size: 4.0625vw;
line-height: 6.5625vw;
}
.lounge_txt_wrap .btn_view{
height: 9.0625vw;
padding: 0 9.375vw;
font-size: 3.125vw;
line-height: 9.0625vw;
}
.lou02 .lounge_img{
order:0;
}
.lou02 {
margin-top: 31vw;;
}
/* flagship */
.flag_wrap{
height: auto;
padding: 0 8.72vw 10.3125vw;
background-image: url(../img/flag-bg-txt-mo.jpg);
background-position: 0 100%;
background-size: contain;
}
.flag_slider{
height: 82.5vw;
}
.flag_slider li.fl_01{
background-image: url(../img/flag-bg-mo-01.jpg);
}
.flag_slider li.fl_02{
background-image: url(../img/flag-bg-mo-02.jpg);
}
.flag_slider li.fl_03{
background-image: url(../img/flag-bg-mo-03.jpg);
}
.flag_slider li.fl_04{
background-image: url(../img/flag-bg-mo-04.jpg);
}
.flag_txt_wrap{
position: static;
left: auto;
width: 100%;
}
.flag_txt_wrap p{
font-size: 3.75vw;
line-height: 6.5625vw;
margin: 6.25vw 0 0;
}
.flag_txt_wrap .btn_view{
height: 9.0625vw;
padding: 0 9.375vw;
font-size: 3.125vw;
line-height: 9.0625vw;
}
.flag_btm_wrap{
margin-top: 0;
position: absolute;
top: 74.375vw;
left: 0;
width: 100%;
text-align: center;
}
.flagside{
width: 20px;
height: 20px;
top: 74.375vw;
margin-top: 0;
background-size: contain;
}
.flagside.left{
left: 12vw;
}
.flagside.right{
right: 10vw;
}
}/*end*/
content.js
$(function(){
//footer
const footer_l =$('.footer_lang')
footer_l.click(footer_lang)
function footer_lang(e){
e.preventDefault()
$(this).toggleClass('show')
}
})
답변을 작성해보세요.
1
LIZ.B
지식공유자2021.08.20
ul.select_lang_list
의 기준을 top이 아닌 bottom으로 잡으시면 하단의 긴 공백은 사라집니다.
ul.select_lang_list a
- <input class="enabled-button" type="checkbox" aria-label="display block" style="min-width:0px;min-height:0px;font-family:inherit;font-size:10px;visibility:hidden;float:left;margin:0px;vertical-align:top;position:relative;z-index:1;width:18px;left:-40px;top:1px;height:13px" /> display: block;
- <input class="enabled-button" type="checkbox" aria-label="padding 6px 21px 4px 18px" style="min-width:0px;min-height:0px;font-family:inherit;font-size:10px;visibility:hidden;float:left;margin:0px;vertical-align:top;position:relative;z-index:1;width:18px;left:-40px;top:1px;height:13px" /> padding: 6px 21px 4px 18px;
답변 1