Commit dd8fd7c0 authored by 김은해_이모션's avatar 김은해_이모션

[김은해] 특장점 인포그래픽 수정

parent 59a93b32
......@@ -540,19 +540,21 @@
}
.seller-tab-area {
background-color: #fff;
margin-right: -20px;
margin-left: -20px;
font-family: 'Spoqa Han Sans Neo', sans-serif;
padding:0 20px;
}
.seller-tab-area .tab-list {
display: flex;
border-bottom: 1px solid #e1e1e1;
background:#efeff1;
}
.seller-tab-area .tab-item {
width: 50%;
width:33.333%;
}
.seller-tab-area .tab-item>a {
......@@ -561,41 +563,52 @@
padding: 14px 21px;
}
.seller-tab-area .tab-item.on>a {
border-bottom: 3px solid #000;
font-weight: 600;
}
.seller-tab-area .tab-content {
padding: 20px;
padding: 30px 0;
background-color: #efeff1;
/* 2022.01.21 수정 */
margin-bottom:20px;
}
.seller-tab-area .tab-content img {
max-width: 100%;
}
.seller-tab-area .anchor-wrap {
position:relative;
height:50px;
}
.seller-tab-area .anchor-menu.menu-fixed {
position:fixed;
top:52px;
width:calc(100% - 40px);
max-width:560px;
z-index:100000;
}
/* 2022.01.21 특장점 추가 */
.seller-tab-area .feature-point-tit {
border-radius: 4px;
border: 1px solid #c7c7c7;
text-align: center;
line-height:40px;
font-size:1.5rem;
color:#666;
letter-spacing:-0.5px;
font-size:1.8rem;
color:#222;
letter-spacing:-0.6px;
}
.seller-tab-area .feature-point-item {
margin-bottom:1.2rem;
margin-bottom:3rem;
}
.seller-tab-area .fp-item-group {
display:flex;
flex-wrap: wrap;
align-items: flex-start;
margin-top:0.4rem;
margin-top:0.8rem;
}
.seller-tab-area .group-box {
......@@ -619,6 +632,12 @@
margin-right:0;
}
.seller-tab-area .group-box.battery-box {
position:absolute;
bottom:0;
right:0;
margin-right:0;
}
.seller-tab-area .phone-tag {
font-size:1.2rem;
......@@ -638,9 +657,15 @@
position:relative;
}
.seller-tab-area .fp-item-desc.phone-scale-desc {
min-height:240px;
max-height:240px;
.seller-tab-area .fp-item-desc.long-desc
{
min-height:328px;
max-height:328px;
}
.seller-tab-area .fp-item-desc.long-desc .fp-item-img
{
transform: translate(-50%,-110%);
}
.seller-tab-area .fp-item-tit {
......@@ -654,7 +679,7 @@
}
.seller-tab-area .fp-item-tit.sub-display-tit {
margin-bottom:3.5rem;
margin-bottom:2rem;
}
.seller-tab-area .fp-item-txt {
......@@ -664,12 +689,21 @@
font-size:1.3rem;
}
.seller-tab-area .fp-item-txt.processor-txt {
bottom:6px;
}
.seller-tab-area .fp-item-desc.long-desc .processor-txt {
bottom:auto;
top:60%;
}
.seller-tab-area .fp-item-txt.side-txt {
position:static;
width:auto;
padding-right:14px;
box-sizing:border-box;
line-height:1.5rem;
margin-left:54px;
}
.seller-tab-area .fp-item-txt.side-txt > div {
......@@ -684,26 +718,11 @@
justify-content:center;
}
.seller-tab-area .iphone-678 .row-box .side-txt {
margin-left:58px;
}
.seller-tab-area .android .fp-item-img.side-img {
width:109px;
}
.seller-tab-area .android .row-box {
max-width:270px;
}
.seller-tab-area .android-1 .row-box {
justify-content:center;
}
.seller-tab-area .android-1 .row-box .side-txt {
margin-left:56px;
}
.seller-tab-area .wide-angle .row-box .side-txt {
padding-right:0;
}
......@@ -733,9 +752,7 @@
.seller-tab-area .row-box {
display:flex;
align-items: center;
justify-content:space-between;
max-width:240px;
margin:0 auto;
justify-content:center;
}
......@@ -744,6 +761,7 @@
margin-top:0.8rem;
color:#666;
letter-spacing: -0.3px;
width:100%;
}
.seller-tab-area .fp-item-img {
......@@ -754,16 +772,9 @@
}
.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img {
transform: translate(-50%,-60%);
transform: translate(-50%,-37%);
}
.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img.flip-folded {
transform: translate(-50%,-50%);
}
.seller-tab-area .fp-item-desc.phone-scale-desc .fp-item-img.fold-folded {
transform: translate(-50%,-52%);
}
.seller-tab-area .fp-item-img img {
max-width:none;
......@@ -774,7 +785,6 @@
top:0;
left:0;
transform:none;
width:70px;
}
.seller-tab-area .fp-item-img.pen {
......@@ -951,8 +961,8 @@
width:109px;
}
.seller-tab-area .w103 {
width:103px;
.seller-tab-area .w104 {
width:104px;
}
.seller-tab-area .w102 {
......@@ -971,8 +981,8 @@
width:95px;
}
.seller-tab-area .w86 {
width:86px;
.seller-tab-area .w87 {
width:87px;
}
.seller-tab-area .w83 {
......@@ -983,8 +993,8 @@
width:80px;
}
.seller-tab-area .w76 {
width:76px;
.seller-tab-area .w75 {
width:75px;
}
.seller-tab-area .w74 {
......@@ -999,6 +1009,14 @@
width:70px;
}
.seller-tab-area .w68 {
width:68px;
}
.seller-tab-area .w66 {
width:63px;
}
.seller-tab-area .w63 {
width:63px;
}
......@@ -1007,8 +1025,8 @@
width:62px;
}
.seller-tab-area .w59 {
width:59px;
.seller-tab-area .w57 {
width:57px;
}
......@@ -1024,6 +1042,11 @@
width:42px;
}
.seller-tab-area .w40 {
width:40px;
}
/* //2022.01.21 특장점 추가 */
......
......@@ -1372,7 +1372,7 @@ html {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased
font-smoothing: antialiased;
}
.wrap {
......
......@@ -412,17 +412,23 @@
<!-- s: 특장점 및 구매후기 -->
<div class="seller-tab-area">
<ul class="tab-list">
<div class="anchor-wrap">
<ul class="tab-list anchor-menu">
<!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 -->
<li class="tab-item on" data-tab="seller-detail-tab">
<a href="#none" class=""><em>특장점</em></a>
<li class="tab-item anchor-btn1 on">
<a href="#none"><em>스펙</em></a>
</li>
<li class="tab-item" data-tab="seller-detail-tab">
<a href="#none" class=""><em>구매후기</em></a>
<li class="tab-item anchor-btn2">
<a href="#none"><em>특장점</em></a>
</li>
<li class="tab-item anchor-btn3">
<a href="#none"><em>구매후기</em></a>
</li>
</ul>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none;">
<h3 class="g-invisible">특장점</h3>
</div>
<div class="anchor-contents">
<div class="tab-content anchor-content1" id="anchor-spec">
<h3 class="g-invisible">스펙</h3>
<div id="featurePoint" class="feature-point-contents">
<!-- 특장점 리뉴얼 22.01.21-->
<!-- 공통 -->
......@@ -522,12 +528,11 @@
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img">
<img src="../img/point/default_size.png" class="w86">
<img src="../img/point/default_size.png" class="w87">
<div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">78.1</div>
<div class="value-text phone-thick">7.4</div>
</div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div>
</div>
<div class="group-box">
......@@ -552,11 +557,9 @@
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/default_display.png" class="w48">
<div class="value-text">
<span>6.2</span><span>인치</span>
</div>
</div>
<div class="fp-item-txt side-txt">
<div><span>6.2</span><span>인치</span></div>
<div>Dynamic AMOLED 2X</div>
<div><span>2532</span> X <span>1170</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div>
......@@ -575,41 +578,77 @@
<div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70">
<div class="value-text processor">
<span>A14<br>Bionic칩testtesttesttesttesttest</span>
</div>
<img src="../img/point/SP002.png" class="w66">
</div>
<div class="fp-item-txt"><span>헥사코어</span>, <span>7</span><span>GHz</span> 탑재</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
<div class="value-text ram">
<span>6</span><span>GB</span>
</div>
<img src="../img/point/ram.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span> RAM 탑재</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w72">
<div class="value-text battery">
<span>2815</span><span>mAh</span>
</div>
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span> 용량</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 성능 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4>
<div class="fp-item-group">
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70">
</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box battery-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 카메라 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">카메라</h4>
......@@ -1019,12 +1058,19 @@
<!-- //특장점 리뉴얼 22.01.21-->
</div>
</div>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none">
<h3 class="g-invisible">구매후기</h3>
<div id="Review" class="review-contents">
구매후기 컨텐츠...
<div class="tab-content anchor-content2" id="anchor-point">
<h3 class="g-invisible">특장점</h3>
<div id="Review" class="review-contents">
특장점
</div>
</div>
<div class="tab-content anchor-content3" id="anchor-review" style="height:850px;">
<h3 class="g-invisible">구매후기</h3>
<div id="Review" class="review-contents">
구매후기
</div>
</div>
</div>
</div>
<!-- //e: 특장점 및 구매후기 -->
</div>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -460,17 +460,23 @@
<!-- s: 특장점 및 구매후기 -->
<div class="seller-tab-area">
<ul class="tab-list">
<!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 -->
<li class="tab-item on" data-tab="seller-detail-tab">
<a href="#none" class=""><em>특장점</em></a>
</li>
<li class="tab-item" data-tab="seller-detail-tab">
<a href="#none" class=""><em>구매후기</em></a>
</li>
</ul>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none;">
<h3 class="g-invisible">특장점</h3>
<div class="anchor-wrap">
<ul class="tab-list anchor-menu">
<!-- [D] 탭 선택 시 해당 li태그에 'on' class 추가 -->
<li class="tab-item anchor-btn1 on">
<a href="#none"><em>스펙</em></a>
</li>
<li class="tab-item anchor-btn2">
<a href="#none"><em>특장점</em></a>
</li>
<li class="tab-item anchor-btn3">
<a href="#none"><em>구매후기</em></a>
</li>
</ul>
</div>
<div class="anchor-contents">
<div class="tab-content anchor-content1" id="anchor-spec">
<h3 class="g-invisible">스펙</h3>
<div id="featurePoint" class="feature-point-contents">
<!-- 특장점 리뉴얼 22.01.21-->
<!-- 공통 -->
......@@ -570,12 +576,11 @@
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img">
<img src="../img/point/default_size.png" class="w86">
<img src="../img/point/default_size.png" class="w87">
<div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">78.1</div>
<div class="value-text phone-thick">7.4</div>
</div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div>
</div>
<div class="group-box">
......@@ -600,11 +605,9 @@
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/default_display.png" class="w48">
<div class="value-text">
<span>6.2</span><span>인치</span>
</div>
</div>
<div class="fp-item-txt side-txt">
<div><span>6.2</span><span>인치</span></div>
<div>Dynamic AMOLED 2X</div>
<div><span>2532</span> X <span>1170</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div>
......@@ -615,6 +618,44 @@
</div>
</div>
<!-- //디스플레이 -->
<!-- 성능 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4>
<div class="fp-item-group">
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w66">
</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 성능 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">성능</h4>
......@@ -624,11 +665,14 @@
<h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img">
<img src="../img/point/SP002.png" class="w70">
<div class="value-text processor">
<span>A14<br>Bionic칩testtesttesttesttesttest</span>
</div>
</div>
<div class="fp-item-txt"><span>헥사코어</span>, <span>7</span><span>GHz</span> 탑재</div>
<div class="fp-item-txt processor-txt">
<div><span>A14</span> Bionic 칩</div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
<div><span>헥사코어</span>, <span>7</span><span>GHz</span></div>
</div>
</div>
</div>
<div class="group-box">
......@@ -636,28 +680,23 @@
<h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img">
<img src="../img/point/ram.png" class="w74">
<div class="value-text ram">
<span>6</span><span>GB</span>
</div>
</div>
<div class="fp-item-txt"><span>6</span><span>GB</span> RAM 탑재</div>
<div class="fp-item-txt"><span>6</span><span>GB</span></div>
</div>
</div>
<div class="group-box">
<div class="group-box battery-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img">
<img src="../img/point/battery.png" class="w72">
<div class="value-text battery">
<span>2815</span><span>mAh</span>
</div>
<img src="../img/point/battery.png" class="w70">
</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span> 용량</div>
<div class="fp-item-txt"><span>2815</span><span>mAh</span></div>
</div>
</div>
</div>
</div>
<!-- //성능 -->
<!-- 카메라 -->
<div class="feature-point-item">
<h4 class="feature-point-tit">카메라</h4>
......@@ -1065,90 +1104,21 @@
</div>
<!-- //연결/기타 -->
<!-- //특장점 리뉴얼 22.01.21-->
<!-- 제품사양(2021.08.24 추가) -->
<!-- <table class="tbl_row" border="1">
<caption>제품 사양</caption>
<colgroup>
<col width="25%">
<col width="*">
</colgroup>
<tbody>
<tr>
<th scope="row">모델명</th>
<td>Galaxy Z Fold2 5G</td>
</tr>
<tr>
<th scope="row">디스플레이</th>
<td>
메인 디스플레이 : 192.7mm(7.6”) Dynamic AMOLED 2X Infinity-O Display
(2,208×1,768)<br>
커버 디스플레이 : 158.1mm(6.2”) Super AMOLED(2,260×816)
</td>
</tr>
<tr>
<th scope="row">CPU</th>
<td>Snapdragon 865+</td>
</tr>
<tr>
<th scope="row">OS</th>
<td>Android 10</td>
</tr>
<tr>
<th scope="row">메모리</th>
<td>RAM 12GB / ROM 256GB</td>
</tr>
<tr>
<th scope="row">외장 메모리</th>
<td>MicroSD slot 미지원</td>
</tr>
<tr>
<th scope="row">카메라</th>
<td>전면 1,000만 (F2.2 전면) + 1,000만 (F2.2 커버)<br>
후면 1,200만 (F1.8 광각) + 1,200만 (F2.2 초광각) + 1,200만 (F2.4 망원)
</td>
</tr>
<tr>
<th scope="row">네트워크</th>
<td>5G</td>
</tr>
<tr>
<th scope="row">USIM</th>
<td>Nano 유심</td>
</tr>
<tr>
<th scope="row">크기</th>
<td>접었을 때 : 159.2 x 68.0 x 13.8~16.8mm<br>
펼쳤을 때 : 159.2 x 128.2 x 6.0~6.9mm
</td>
</tr>
<tr>
<th scope="row">무게</th>
<td>282g</td>
</tr>
<tr>
<th scope="row">배터리</th>
<td>4,500mAh</td>
</tr>
<tr>
<th scope="row">특징</th>
<td>무선 배터리 공유 / 측면지문 / 삼성 페이 / 빅스비</td>
</tr>
<tr>
<th scope="row">제조국</th>
<td>대한민국</td>
</tr>
</tbody>
</table> -->
<!-- table 주석 처리 22.01.27 -->
</div>
</div>
<div data-tab-content="seller-detail-tab" class="tab-content" style="display:none">
<div class="tab-content anchor-content2" id="anchor-point">
<h3 class="g-invisible">특장점</h3>
<div id="Review" class="review-contents">
특장점
</div>
</div>
<div class="tab-content anchor-content3" id="anchor-review" style="height:850px;">
<h3 class="g-invisible">구매후기</h3>
<div id="Review" class="review-contents">
구매후기 컨텐츠...
구매후기
</div>
</div>
</div>
</div>
<!-- //e: 특장점 및 구매후기 -->
</div>
......
src/assets/img/point/SM109_10_folded_size.png

499 Bytes | W: | H:

src/assets/img/point/SM109_10_folded_size.png

560 Bytes | W: | H:

src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
src/assets/img/point/SM109_10_folded_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_10_size.png

504 Bytes | W: | H:

src/assets/img/point/SM109_10_size.png

592 Bytes | W: | H:

src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
src/assets/img/point/SM109_10_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_1_display.png

510 Bytes | W: | H:

src/assets/img/point/SM109_1_display.png

3.45 KB | W: | H:

src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
src/assets/img/point/SM109_1_display.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SM109_1_folded_size.png

420 Bytes | W: | H:

src/assets/img/point/SM109_1_folded_size.png

474 Bytes | W: | H:

src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
src/assets/img/point/SM109_1_folded_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/SP002.png

346 Bytes | W: | H:

src/assets/img/point/SP002.png

1.14 KB | W: | H:

src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
src/assets/img/point/SP002.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/battery.png

598 Bytes | W: | H:

src/assets/img/point/battery.png

595 Bytes | W: | H:

src/assets/img/point/battery.png
src/assets/img/point/battery.png
src/assets/img/point/battery.png
src/assets/img/point/battery.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/default_display.png

942 Bytes | W: | H:

src/assets/img/point/default_display.png

1.05 KB | W: | H:

src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
src/assets/img/point/default_display.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/default_size.png

509 Bytes | W: | H:

src/assets/img/point/default_size.png

602 Bytes | W: | H:

src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
src/assets/img/point/default_size.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/img/point/ram.png

648 Bytes | W: | H:

src/assets/img/point/ram.png

957 Bytes | W: | H:

src/assets/img/point/ram.png
src/assets/img/point/ram.png
src/assets/img/point/ram.png
src/assets/img/point/ram.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -2534,3 +2534,71 @@ $("input[type='text'], textarea" , ".c-input").on("focus", function () {
if ( $('.popup').css('display') === 'none') {
$('.sticky-bar').addClass('active');
}
/* 스크롤시 메뉴 on 22.02.14*/
var menu_offset = $('.anchor-menu').offset();
$(window).scroll(function() {
if ($(document).scrollTop() + 102 > menu_offset.top) {
$('.anchor-menu').addClass('menu-fixed');
}else {
$('.anchor-menu').removeClass('menu-fixed');
}
var currenScroll = $(document).scrollTop();
var _con1 = $('.anchor-content1').offset().top;
var _con2 = $('.anchor-content2').offset().top;
var _con3 = $('.anchor-content3').offset().top;
var _con1H = $('.anchor-content1').height();
var _con2H = $('.anchor-content2').height();
var _con3H = $('.anchor-content3').height();
if (currenScroll <= _con1 + _con1H - 45){
$('.anchor-menu li').removeClass('on');
$('.anchor-btn1').addClass('on');
} else if (currenScroll <= _con1 + _con1H + _con2H){
$('.anchor-menu li').removeClass('on');
$('.anchor-btn2').addClass('on');
} else if (currenScroll > _con1 + _con1H + _con2H ) {
$('.anchor-menu li').removeClass('on');
$('.anchor-btn3').addClass('on');
}
});
/* 클릭시 해당영역으로 이동 22.02.11 */
$('.anchor-menu .anchor-btn1').click(function(){
var ancSpec = $('#anchor-spec').position();
$('html, body').animate({scrollTop : ancSpec.top - 40}, 600);
});
$('.anchor-menu .anchor-btn2').click(function(){
var ancPoint = $('#anchor-point').position();
$('html, body').animate({scrollTop : ancPoint.top - 40}, 600);
});
$('.anchor-menu .anchor-btn3').click(function(){
var ancReview = $('#anchor-review').position();
$('html, body').animate({scrollTop : ancReview.top - 39}, 600);
});
/*프로세서 2줄이상 세로 길이 조절 */
function _txtHeight () {
$('.processor-txt').each(function(){
var procTxt = $(this).height();
if (procTxt > 35) {
$(this).parents('.fp-item-desc').addClass('long-desc');
$(this).parents('.fp-item-group').css('position','relative');
} else {
$(this).parents('.fp-item-desc').removeClass('long-desc');
}
});
}
_txtHeight();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment