Skip to content

T
TDS_Myshop_Detail
Commit 54c33e4d authored by 김은해_이모션's avatar 김은해_이모션
Browse files
Options

[김은해] 20220126

parent e9c316e6
Hide whitespace changes
Inline Side-by-side
Showing with 1920 additions and 56 deletions
src/assets/css/seller_common.css
View file @ 54c33e4d
...@@ -543,6 +543,7 @@ ...@@ -543,6 +543,7 @@
background-color: #fff; background-color: #fff;
margin-right: -20px; margin-right: -20px;
margin-left: -20px; margin-left: -20px;
font-family: 'Spoqa Han Sans Neo', 'sans-serif';
} }
.seller-tab-area .tab-list { .seller-tab-area .tab-list {
...@@ -606,6 +607,10 @@ ...@@ -606,6 +607,10 @@
margin-right:0.8rem; margin-right:0.8rem;
} }
.seller-tab-area .camera-group .group-box:nth-child(odd){
margin-right:0;
}
.seller-tab-area .group-box.wide-group-box { .seller-tab-area .group-box.wide-group-box {
width:100%; width:100%;
} }
...@@ -614,9 +619,6 @@ ...@@ -614,9 +619,6 @@
margin-right:0; margin-right:0;
} }
.seller-tab-area .group-box.front-camera {
margin:0.8rem 0 0 0.8rem;
}
.seller-tab-area .phone-tag { .seller-tab-area .phone-tag {
font-size:1.2rem; font-size:1.2rem;
...@@ -635,6 +637,12 @@ ...@@ -635,6 +637,12 @@
letter-spacing: -0.5px; letter-spacing: -0.5px;
position:relative; position:relative;
} }
.seller-tab-area .fp-item-desc.phone-scale-desc {
min-height:328px;
max-height:328px;
}
.seller-tab-area .fp-item-desc.display-desc { .seller-tab-area .fp-item-desc.display-desc {
min-height:210px; min-height:210px;
max-height:210px; max-height:210px;
...@@ -647,31 +655,74 @@ ...@@ -647,31 +655,74 @@
} }
.seller-tab-area .fp-item-tit.camera-tit { .seller-tab-area .fp-item-tit.camera-tit {
margin-bottom:3.2rem; margin-bottom:2.7rem;
}
.seller-tab-area .fp-item-tit.sub-display-tit {
margin-bottom:3.5rem;
} }
.seller-tab-area .fp-item-txt { .seller-tab-area .fp-item-txt {
position:absolute; position:absolute;
width:100%; width:100%;
bottom:20px; bottom:20px;
font-size:1.3rem;
} }
.seller-tab-area .fp-item-txt.side-txt { .seller-tab-area .fp-item-txt.side-txt {
position:static; position:static;
width:auto; width:auto;
margin-left:30px padding-right:14px;
box-sizing:border-box;
line-height:1.5rem;
}
.seller-tab-area .fp-item-txt.side-txt > div {
margin-top:5px;
}
.seller-tab-area .fp-item-txt.side-txt > div:first-child {
margin-top:0;
}
.seller-tab-area .iphone-678 .row-box {
justify-content:center;
}
.seller-tab-area .iphone-678 .row-box .side-txt {
margin-left:58px;
} }
.seller-tab-area .fp-item-txt.side-txt.camera-txt { .seller-tab-area .android .fp-item-img.side-img {
margin-left:60px; width:109px;
} }
.seller-tab-area .fp-item-txt.side-txt.camera-txt2 { .seller-tab-area .android .row-box {
margin-left:64px; max-width:270px;
} }
.seller-tab-area .fp-item-txt.side-txt.camera-txt3 { .seller-tab-area .android-1 .row-box {
margin-left:50px; 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;
}
.seller-tab-area .android-3-vertical .fp-item-tit.camera-tit {
margin-bottom:1.6rem;
}
.seller-tab-area .android-4-vertical .fp-item-tit.camera-tit {
margin-bottom:0.8rem;
}
.seller-tab-area .android-5 .fp-item-tit.camera-tit {
margin-bottom:1.6rem;
} }
.seller-tab-area .fp-item-txt > div { .seller-tab-area .fp-item-txt > div {
...@@ -687,11 +738,9 @@ ...@@ -687,11 +738,9 @@
.seller-tab-area .row-box { .seller-tab-area .row-box {
display:flex; display:flex;
align-items: center; align-items: center;
justify-content: center; justify-content:space-between;
} max-width:240px;
margin:0 auto;
.seller-tab-area .row-box.camera-row-box {
padding-left:14px;
} }
...@@ -709,11 +758,143 @@ ...@@ -709,11 +758,143 @@
transform:translate(-50%,-50%); transform:translate(-50%,-50%);
} }
.seller-tab-area .fp-item-img img {
max-width:none;
}
.seller-tab-area .fp-item-img.side-img{ .seller-tab-area .fp-item-img.side-img{
position:relative;
top:0;
left:0;
transform:none;
width:70px;
}
.seller-tab-area .fp-item-img.pen {
transform:translate(-40%,-40%);
}
.seller-tab-area .value-text {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-53%);
width:100%;
font-size:1.1rem;
font-weight:700;
letter-spacing:-0.42px;
}
.seller-tab-area .value-text.processor {
color:#fe796b;
font-size:1.2rem;
letter-spacing:-0.34px;
}
.seller-tab-area .value-text.ram {
transform:translate(-42%,-52%);
}
.seller-tab-area .value-text.battery {
letter-spacing:-0.75px;
transform:translate(-56%,-57%);
}
.seller-tab-area .value-text.phone-height {
writing-mode: vertical-rl;
height:144px;
width:auto;
transform:none;
top:0;
left:72%;
letter-spacing:-0.5px;
}
.seller-tab-area .value-text.phone-width {
transform:none;
top:95%;
width:72px;
left:0;
letter-spacing:-0.5px;
}
.seller-tab-area .value-text.phone-thick {
transform:none;
top:95%;
left:auto;
width:auto;
right:-2px;
letter-spacing:-0.5px;
}
.seller-tab-area .fold-img .value-text.phone-height {
left:79%;
}
.seller-tab-area .fold-img .value-text.phone-width {
width:105px;
}
.seller-tab-area .fold-img .value-text.phone-thick {
right:1px;
}
.seller-tab-area .fold-folded .value-text.phone-height {
left:98%;
}
.seller-tab-area .fold-folded .value-text.phone-width {
width:60px;
}
.seller-tab-area .fold-folded .value-text.phone-thick {
width:35px;
right:13px;
}
.seller-tab-area .flip-folded .value-text.phone-height {
left:98%;
height:72px;
top:0;
transform:none;
}
.seller-tab-area .flip-folded .value-text.phone-width {
width:72px;
}
.seller-tab-area .flip-folded .value-text.phone-thick {
writing-mode: vertical-rl;
left:98%;
right:auto;
top:auto;
bottom:18px;
}
.seller-tab-area .value-text.communication {
transform:none;
font-size:1.4rem;
width:29px;
left:22px;
}
.seller-tab-area .value-text.sub-display-text {
transform: translate(-50%,-65%);
}
.seller-tab-area .front-camera .fp-item-img {
position:static; position:static;
transform:none; transform:none;
} }
.seller-tab-area .front-camera .fp-item-tit {
margin-bottom:1.7rem;
}
.seller-tab-area .front-camera-2 {
margin-left:0.8rem;
}
.seller-tab-area .camera-img { .seller-tab-area .camera-img {
width:70px; width:70px;
line-height:70px; line-height:70px;
...@@ -723,10 +904,78 @@ ...@@ -723,10 +904,78 @@
width:82px; width:82px;
} }
.seller-tab-area .apple-logo {
width:28px;
}
.seller-tab-area .xiaomi-logo {
width:36px;
}
.seller-tab-area .etc-logo {
width:44px;
}
.seller-tab-area .android-logo { .seller-tab-area .android-logo {
width:93px; width:93px;
} }
.seller-tab-area .ios-logo {
width:36px;
}
.seller-tab-area .os-logo {
width:40px;
}
.seller-tab-area .w140 {
width:140px;
}
.seller-tab-area .w113 {
width:113px;
}
.seller-tab-area .w112 {
width:112px;
}
.seller-tab-area .w109 {
width:109px;
}
.seller-tab-area .w102 {
width:102px;
}
.seller-tab-area .w99 {
width:99px;
}
.seller-tab-area .w98 {
width:98px;
}
.seller-tab-area .w95 {
width:95px;
}
.seller-tab-area .w85 {
width:85px;
}
.seller-tab-area .w83 {
width:83px;
}
.seller-tab-area .w80 {
width:80px;
}
.seller-tab-area .w74 {
width:74px;
}
.seller-tab-area .w72 { .seller-tab-area .w72 {
width:72px; width:72px;
} }
...@@ -735,13 +984,24 @@ ...@@ -735,13 +984,24 @@
width:70px; width:70px;
} }
.seller-tab-area .w74 { .seller-tab-area .w63 {
width:74px; width:63px;
}
.seller-tab-area .w62 {
width:62px;
}
.seller-tab-area .w51 {
width:51px;
} }
.seller-tab-area .w42 { .seller-tab-area .w42 {
width:42px; width:42px;
} }
/* //2022.01.21 특장점 추가 */ /* //2022.01.21 특장점 추가 */
......
src/assets/css/tdirect.css
View file @ 54c33e4d
...@@ -370,6 +370,22 @@ video.controls-hidden::-webkit-media-controls-start-playback-button { ...@@ -370,6 +370,22 @@ video.controls-hidden::-webkit-media-controls-start-playback-button {
src: url('../fonts/Spoqa Han Sans Regular.ttf') format('truetype'); src: url('../fonts/Spoqa Han Sans Regular.ttf') format('truetype');
} }
@font-face {
font-family: 'Spoqa Han Sans Neo';
font-weight: 400;
src: url('../fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2');
src: url('../fonts/SpoqaHanSansNeo-Regular.woff') format('woff');
src: url('../fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Spoqa Han Sans Neo';
font-weight: 700;
src: url('../fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2');
src: url('../fonts/SpoqaHanSansNeo-Bold.woff') format('woff');
src: url('../fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype');
}
.active .btn-trigger, .active .btn-trigger,
.active .btn-trigger-all, .active .btn-trigger-all,
.active .filter-head .label:after, .active .filter-head .label:after,
......
src/assets/html/seller_heder_modify.html
View file @ 54c33e4d
...@@ -438,6 +438,33 @@ ...@@ -438,6 +438,33 @@
<div class="fp-item-txt">삼성</div> <div class="fp-item-txt">삼성</div>
</div> </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/fill-1_2@2x.png" class="apple-logo">
</div>
<div class="fp-item-txt">애플</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/fill-1_3@2x.png" class="xiaomi-logo">
</div>
<div class="fp-item-txt">샤오미</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/group-6@2x.png" class="etc-logo">
</div>
<div class="fp-item-txt">기타</div>
</div>
</div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">운영체제</h5> <h5 class="fp-item-tit">운영체제</h5>
...@@ -447,17 +474,40 @@ ...@@ -447,17 +474,40 @@
<div class="fp-item-txt">안드로이드</div> <div class="fp-item-txt">안드로이드</div>
</div> </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/group-3_2@2x.png" class="ios-logo">
</div>
<div class="fp-item-txt">iOS</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/group-29@2x.png" class="os-logo">
</div>
<div class="fp-item-txt">기타</div>
</div>
</div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">통신</h5> <h5 class="fp-item-tit">통신</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-5-gx@2x.png" class="w99">
<div class="value-text communication">5G</div>
</div>
<div class="fp-item-txt"><span>5G</span>통신 지원</div> <div class="fp-item-txt"><span>5G</span>통신 지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">USIM종류</h5> <h5 class="fp-item-tit">USIM종류</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-usim@2x.png" class="w51">
</div>
<div class="fp-item-txt">나노유심</div> <div class="fp-item-txt">나노유심</div>
</div> </div>
</div> </div>
...@@ -469,9 +519,14 @@ ...@@ -469,9 +519,14 @@
<h4 class="feature-point-tit">외관</h4> <h4 class="feature-point-tit">외관</h4>
<div class="fp-item-group"> <div class="fp-item-group">
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5> <h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-phone_2@2x.png" class="w113">
<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 class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div> </div>
</div> </div>
...@@ -481,7 +536,7 @@ ...@@ -481,7 +536,7 @@
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/icon-scale@2x.png" class="w72"> <img src="../img/point/icon-scale@2x.png" class="w72">
</div> </div>
<div class="fp-item-txt"><span>226</span>g</div> <div class="fp-item-txt"><span>226</span><span>g</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -497,6 +552,10 @@ ...@@ -497,6 +552,10 @@
<div class="row-box"> <div class="row-box">
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/icon-phone@2x.png" class="w72"> <img src="../img/point/icon-phone@2x.png" class="w72">
<div class="value-text">
<span>6.2</span>
<span>인치</span>
</div>
</div> </div>
<div class="fp-item-txt side-txt"> <div class="fp-item-txt side-txt">
<div>Dynamic AMOLED 2X</div> <div>Dynamic AMOLED 2X</div>
...@@ -518,6 +577,9 @@ ...@@ -518,6 +577,9 @@
<h5 class="fp-item-tit">프로세서</h5> <h5 class="fp-item-tit">프로세서</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/rectangle@2x.png" class="w70"> <img src="../img/point/rectangle@2x.png" class="w70">
<div class="value-text processor">
<span>A14<br>Bionic 칩</span>
</div>
</div> </div>
<div class="fp-item-txt"><span>헥사코어</span>,<span>7</span><span>GHz</span></div> <div class="fp-item-txt"><span>헥사코어</span>,<span>7</span><span>GHz</span></div>
</div> </div>
...@@ -527,6 +589,10 @@ ...@@ -527,6 +589,10 @@
<h5 class="fp-item-tit">RAM</h5> <h5 class="fp-item-tit">RAM</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/icon-ram@2x.png" class="w74"> <img src="../img/point/icon-ram@2x.png" class="w74">
<div class="value-text ram">
<span>6</span>
<span>GB</span>
</div>
</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> RAM</div>
</div> </div>
...@@ -536,6 +602,10 @@ ...@@ -536,6 +602,10 @@
<h5 class="fp-item-tit">배터리 용량</h5> <h5 class="fp-item-tit">배터리 용량</h5>
<div class="fp-item-img"> <div class="fp-item-img">
<img src="../img/point/icon-battery@2x.png" class="w72"> <img src="../img/point/icon-battery@2x.png" class="w72">
<div class="value-text battery">
<span>2,815</span>
<span>mAh</span>
</div>
</div> </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>
...@@ -546,8 +616,8 @@ ...@@ -546,8 +616,8 @@
<!-- 카메라 --> <!-- 카메라 -->
<div class="feature-point-item"> <div class="feature-point-item">
<h4 class="feature-point-tit">카메라</h4> <h4 class="feature-point-tit">카메라</h4>
<div class="fp-item-group"> <div class="fp-item-group camera-group">
<div class="group-box wide-group-box"> <div class="group-box wide-group-box iphone-678">
<div class="phone-tag">i Phone 6/7/8</div> <div class="phone-tag">i Phone 6/7/8</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
...@@ -555,7 +625,7 @@ ...@@ -555,7 +625,7 @@
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-7@2x.png" class="w70"> <img src="../img/point/group-23-copy-7@2x.png" class="w70">
</div> </div>
<div class="fp-item-txt side-txt camera-txt"> <div class="fp-item-txt side-txt">
<div><span>와이드</span></div> <div><span>와이드</span></div>
<div><span>F1.6</span></div> <div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span></div>
...@@ -563,7 +633,7 @@ ...@@ -563,7 +633,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box iphone-678">
<div class="phone-tag">i Phone 6/7/8_?</div> <div class="phone-tag">i Phone 6/7/8_?</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
...@@ -571,7 +641,7 @@ ...@@ -571,7 +641,7 @@
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-3@2x.png" class="w70"> <img src="../img/point/group-23-copy-3@2x.png" class="w70">
</div> </div>
<div class="fp-item-txt side-txt camera-txt"> <div class="fp-item-txt side-txt">
<div><span>와이드</span></div> <div><span>와이드</span></div>
<div><span>F1.6</span></div> <div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span></div>
...@@ -583,11 +653,11 @@ ...@@ -583,11 +653,11 @@
<div class="phone-tag">i Phone 10</div> <div class="phone-tag">i Phone 10</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box camera-row-box"> <div class="row-box">
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-8@2x.png" class="w42"> <img src="../img/point/group-23-copy-8@2x.png" class="w42">
</div> </div>
<div class="fp-item-txt side-txt camera-txt2"> <div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div> <div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div> <div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
...@@ -603,7 +673,7 @@ ...@@ -603,7 +673,7 @@
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-6@2x.png" class="w70"> <img src="../img/point/group-23-copy-6@2x.png" class="w70">
</div> </div>
<div class="fp-item-txt side-txt camera-txt3"> <div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div> <div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div> <div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
...@@ -619,7 +689,7 @@ ...@@ -619,7 +689,7 @@
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-5@2x.png" class="w70"> <img src="../img/point/group-23-copy-5@2x.png" class="w70">
</div> </div>
<div class="fp-item-txt side-txt camera-txt3"> <div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div> <div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div> <div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
...@@ -627,52 +697,254 @@ ...@@ -627,52 +697,254 @@
</div> </div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box wide-angle">
<div class="phone-tag">i Phone 11/12/13pro</div> <div class="phone-tag">i Phone 11/12/13pro</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box"> <div class="row-box">
<div class="fp-item-img side-img"> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-5@2x.png" class="w70"> <img src="../img/point/group-23-copy@2x.png" class="w70">
</div> </div>
<div class="fp-item-txt side-txt camera-txt3"> <div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div> <div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div> <div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="group-box wide-group-box"> <div class="group-box wide-group-box wide-angle">
<div class="phone-tag">i Phone 1N~</div> <div class="phone-tag">i Phone 1N~</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">제조사</h5> <h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="fp-item-img"></div> <div class="row-box">
<div class="fp-item-txt">삼성</div> <div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-4@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br></Nt>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box wide-group-box android android-1">
<div class="phone-tag">안드로이드 1개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_8@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_10@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_대각선</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_2@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-3-vertical">
<div class="phone-tag">안드로이드 3개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_3@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-3-horizontal">
<div class="phone-tag">안드로이드 3개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_5@2x.png" class="w98">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-4-vertical">
<div class="phone-tag">안드로이드 4개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_6@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-4-horizontal">
<div class="phone-tag">안드로이드 4개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_7@2x.png" class="w109">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android">
<div class="phone-tag">안드로이드 4개_정방향</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_9@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-5">
<div class="phone-tag">안드로이드 5개 이상</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_4@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span><br> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box front-camera">
<div class="phone-tag">전면_측면_1개</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5> <h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon@2x.png" class="w102">
</div>
<div class="fp-item-txt"> <div class="fp-item-txt">
<div>와이드</div> <div><span>와이드</span></div>
<div>F1.6</div> <div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div> <div><span>12</span><span>MP</span></div>
</div> </div>
</div> </div>
</div> </div>
<div class="group-box front-camera front-camera-2">
<div class="phone-tag">전면_측면_2개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/icon_2@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span> + <span>와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="group-box front-camera"> <div class="group-box front-camera">
<div class="phone-tag">전면_중앙_1개</div>
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5> <h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/dim_10@2x.png" class="w102">
</div>
<div class="fp-item-txt"> <div class="fp-item-txt">
<div>와이드 + 와이드</div> <div><span>와이드</span></div>
<div>F1.6 + F2.0</div> <div><span>F1.6</span></div>
<div>12MP + 12MP</div> <div><span>12</span><span>MP</span></div>
</div> </div>
</div> </div>
</div> </div>
<div class="group-box front-camera front-camera-2">
<div class="phone-tag">전면_중앙_2개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/icon_4@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span> + <span>와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="noti">※ 실제 카메라 배치와 다를 수 있습니다.</div> <div class="noti">※ 실제 카메라 배치와 다를 수 있습니다.</div>
</div> </div>
</div> </div>
...@@ -684,49 +956,63 @@ ...@@ -684,49 +956,63 @@
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">방수 및 방진</h5> <h5 class="fp-item-tit">방수 및 방진</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-waterproof@2x.png" class="w72">
</div>
<div class="fp-item-txt"><span>IP68</span>등급 획득</div> <div class="fp-item-txt"><span>IP68</span>등급 획득</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">얼굴인식</h5> <h5 class="fp-item-tit">얼굴인식</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-face-id-copy@2x.png" class="w70">
</div>
<div class="fp-item-txt">얼굴인식 지원</div> <div class="fp-item-txt">얼굴인식 지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">지문인식</h5> <h5 class="fp-item-tit">지문인식</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon-face-id-copy_2@2x.png" class="w70">
</div>
<div class="fp-item-txt">지문인식 지원</div> <div class="fp-item-txt">지문인식 지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">충전단자</h5> <h5 class="fp-item-tit">충전단자</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/group-31@2x.png" class="w63">
</div>
<div class="fp-item-txt">라이트닝 8핀</div> <div class="fp-item-txt">라이트닝 8핀</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">Pen</h5> <h5 class="fp-item-tit">Pen</h5>
<div class="fp-item-img"></div> <div class="fp-item-img pen">
<img src="../img/point/icon_6@2x.png" class="w83">
</div>
<div class="fp-item-txt">Pen지원</div> <div class="fp-item-txt">Pen지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">무선충전</h5> <h5 class="fp-item-tit">무선충전</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/icon_7@2x.png" class="w95">
</div>
<div class="fp-item-txt">무선충전 지원</div> <div class="fp-item-txt">무선충전 지원</div>
</div> </div>
</div> </div>
<div class="group-box"> <div class="group-box">
<div class="fp-item-desc"> <div class="fp-item-desc">
<h5 class="fp-item-tit">전자결제</h5> <h5 class="fp-item-tit">전자결제</h5>
<div class="fp-item-img"></div> <div class="fp-item-img">
<img src="../img/point/group-32@2x.png" class="w62">
</div>
<div class="fp-item-txt">전자결제(pay)지원</div> <div class="fp-item-txt">전자결제(pay)지원</div>
</div> </div>
</div> </div>
......
src/assets/html/seller_heder_modify_f.html 0 → 100644
View file @ 54c33e4d
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>[상품 Mobile] detail | SK텔레콤 공식 온라인 쇼핑몰 T월드 다이렉트</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/seller.css">
<script>
document.documentElement.dataset.userAgent = navigator.userAgent;
</script>
</head>
<body>
<!-- [D] div.wrap에 클래스 product-detail-page 추가
header가 상단 고정을 경우 div.wrap에 클래스 header-sticky 추가 -->
<div class="wrap seller-wrap header-sticky seller-product-detail">
<div class="product-detail-header">
<div class="top-header">
<div class="top-header-left">
<img src="../img/go-back-img@2x.png" /><span class="blind">이전 페이지로 돌아가기</span>
</div>
<div class="top-header-right">
<span class="ico-cart"><img src="../img/cart@2x.png" /></span>
<span class="ico-mypage"><img src="../img/mypage@2x.png" /></span>
</div>
</div>
</div>
<main role="main" class="content">
<div class="l-grid">
<div class="seller-detail-header">
<div class="product-name">
<h1>iPhone 12 Pro Max</h1>
<span>IPHONE_12_PRO_MAX_128GBL</span>
</div>
<!-- key visual -->
<div class="product-key-visual">
<!-- Swiper -->
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="img-area">
<img src="https://cdnm.shop.tworld.co.kr/pimg/phone/A2/A238/default/A238_001_13.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="img-area">
<img src="https://cdnm.shop.tworld.co.kr/pimg/phone/A2/A238/default/A238_001_13.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="img-area">
<img src="https://cdnm.shop.tworld.co.kr/pimg/phone/A2/A238/default/A238_001_13.jpg" alt="">
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- //Swiper -->
</div>
<!-- //key visual -->
<a href="#none" class="link-kakako-chat" target="_blank">카카오톡 채팅 연결하기</a>
</div>
<!-- s: 색상선택 -->
<div class="opt-group" id="inputAnchor1">
<h2 class="opt-group-tit">색상 선택</h2>
<div class="opt-group-con opt-color">
<div class="product-color">
<div class="color-chips">
<span class="c-ick-var">
<input type="radio" name="_colorChip" id="_colorChip1">
<label for="_colorChip1" class="text" style="background-color:#a67c52;">브라운</label>
</span>
<span class="c-ick-var">
<input type="radio" name="_colorChip" id="_colorChip2">
<label for="_colorChip2" class="text" style="background-color:#0f0f44;">딥블루</label>
</span>
<span class="c-ick-var">
<input type="radio" name="_colorChip" id="_colorChip3">
<label for="_colorChip3" class="text" style="background-color:#8e0c25;">버건디레드</label>
</span>
<span class="c-ick-var">
<input type="radio" name="_colorChip" id="_colorChip4" checked="checked">
<label for="_colorChip4" class="text" style="background-color:#d8d8d8;">스페이스 그레이</label>
</span>
</div>
<span class="color-name">실버</span>
</div>
<p class="opt-group-notice"><a href="#none">가장 인기 있는 색상을 알아보세요.</a></p>
</div>
</div>
<!-- //e: 색상선택 -->
<!-- s: 용량선택 -->
<div class="opt-group" id="inputAnchor2">
<h2 class="opt-group-tit">용량 선택</h2>
<div class="opt-group-con opt-capacity">
<div class="product-option-row product-capacities">
<h3 class="g-invisible">용량 선택</h3>
<span class="c-ick-var">
<input type="radio" name="_productCapacity" id="_productCapacity1" checked="checked">
<label for="_productCapacity1">
<span class="text">128G</span>
<span class="side">₩1,078,000</span>
</label>
</span>
<!-- [D] 품절시 클래스 disabled-semi 추가 -->
<span class="c-ick-var disabled-semi">
<input type="radio" name="_productCapacity" id="_productCapacity2">
<label for="_productCapacity2">
<span class="text">256G</span>
<span class="side">재고없음</span>
</label>
</span>
<span class="c-ick-var">
<input type="radio" name="_productCapacity" id="_productCapacity3">
<label for="_productCapacity3">
<span class="text">512G</span>
<span class="side">₩1,287,000</span>
</label>
</span>
</div>
<p class="opt-group-notice"><a href="#none">가장 인기 있는 용량을 알아보세요.</a></p>
</div>
</div>
<!-- //e: 용량선택 -->
<!-- s: 배송 가능 방법 -->
<div class="opt-group" id="inputAnchor3">
<h2 class="opt-group-tit">배송 가능 방법</h2>
<div class="opt-group-con opt-delivery">
<div role="tablist" class="sort-lists">
<!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
<button type="button" class="sort-items" aria-selected="false">
<span class="tit">바로도착</span>
<!-- <span class="desc"><strong>00시00분00초</strong> 이내<br> 주문하면 오늘 도착</span> -->
<span class="desc">17시 이후 주문 시<br>내일(주말:월요일) 도착</span>
</button>
<!-- [D] 선택 활성화 aria-selected="true" -->
<button type="button" class="sort-items" aria-selected="true">
<span class="tit">행복배송</span>
<span class="desc"><strong>00시00분00초</strong> 이내<br>주문하면 오늘 도착</span>
</button>
<button type="button" class="sort-items" aria-selected="false">
<span class="tit">택배</span>
<span class="desc">꼼꼼하게 포장하여<br>우체국 익일 특급 배송</span>
</button>
<button type="button" class="sort-items" aria-selected="false">
<span class="tit">바로픽업</span>
<span class="desc">주문하고 가까운<br>대리점에서 바로 찾기</span>
</button>
</div>
<p class="opt-group-notice"><a href="#none" onclick="UI.modal({modal: '.pop-info-deilivery', modalMode: 'overlap'})">바로도착/행복배송에 대해 알아보세요.</a></p>
<!-- s: case 별 주소 입력 폼 -->
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">배송정보</h3>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<label for="_deliveryParcelPhone2" class="title">휴대폰 번호</label>
<div class="form-group">
<span class="c-input">
<input type="tel" placeholder="- 없이 숫자만 입력해주세요" class="input" id="_deliveryParcelPhone2" required="" maxlength="11" value="010-1234-5678" readonly="readonly"
oninput="javascript: if ( this.maxLength > -1 && this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</span>
</div>
</li>
<li class="buyer-item">
<strong class="title">주소</strong>
<div class="detail-address">
<div class="form-group">
<span class="c-input">
<input type="number" title="우편번호" class="input" value="12345" readonly="readonly" required="" pattern="[0-9]*" inputmode="numeric">
</span>
<button type="button" class="btn-extra" onclick="UI.modal({modal: '.pop-search-zip', modalMode: 'overlap'})">우편번호 찾기</button>
</div>
<div class="form-group">
<span class="c-input">
<input type="text" title="기본 주소" value="경기도 광주시 오포읍 신현리" class="input" readonly="readonly" required="">
</span>
</div>
<div class="form-group">
<span class="c-input">
<input type="text" title="나머지 주소" value="638-3 주원타운 102동 403호" maxlength="50" class="input" readonly="readonly"
oninput="javascript: if ( this.maxLength > -1 && this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</span>
</div>
</div>
</li>
</ul>
<button type="button" class="btn-submit">확인</button>
</div>
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">배송정보</h3>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<label for="_deliveryParcelPhone2" class="title">휴대폰 번호</label>
<div class="form-group">
<span class="c-input">
<input type="tel" placeholder="- 없이 숫자만 입력해주세요" class="input" id="_deliveryParcelPhone2" required="" maxlength="11"
oninput="javascript: if ( this.maxLength > -1 && this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</span>
</div>
</li>
<li class="buyer-item">
<strong class="title">주소</strong>
<div class="detail-address">
<div class="form-group">
<span class="c-input">
<input type="number" title="우편번호" class="input" value="" readonly="readonly" required="" pattern="[0-9]*" inputmode="numeric">
</span>
<button type="button" class="btn-extra" onclick="UI.modal({modal: '.pop-search-zip', modalMode: 'overlap'})">우편번호 찾기</button>
</div>
<div class="form-group">
<span class="c-input">
<input type="text" title="기본 주소" value="" class="input" readonly="readonly" required="">
</span>
</div>
<div class="form-group">
<span class="c-input">
<input type="text" title="나머지 주소" value="" maxlength="50" class="input" readonly="readonly"
oninput="javascript: if ( this.maxLength > -1 && this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</span>
</div>
</div>
</li>
</ul>
<button type="button" class="btn-submit">확인</button>
</div>
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">배송정보</h3>
<a href="#none" class="notice">이 주소가 아닌가요?</a>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<span for="_deliveryParcelPhone2" class="title">휴대폰 번호</span>
<div class="form-group">
<span class="c-input">
010-1234-5678
</span>
</div>
</li>
<li class="buyer-item">
<strong class="title">주소</strong>
<div class="detail-address">
<div class="form-group">
<span class="c-input">
<span>15950</span>
<span>서울시 중구 을지로(을지로 1가)</span>
<span>페럼타워 14층</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">배송정보</h3>
<a href="#none" class="notice">수정</a>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<span for="_deliveryParcelPhone2" class="title">휴대폰 번호</span>
<div class="form-group">
<span class="c-input">
010-1234-5678
</span>
</div>
</li>
<li class="buyer-item">
<strong class="title">주소</strong>
<div class="detail-address">
<div class="form-group">
<span class="c-input">
<span>15950</span>
<span>서울시 중구 을지로(을지로 1가)</span>
<span>페럼타워 14층</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">바로 픽업 매장</h3>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<label for="_deliveryPickupPhone" class="title">휴대폰 번호</em></label>
<div class="form-group">
<span class="c-input">
<input type="tel" placeholder="- 없이 숫자만 입력하세요" class="input" id="_deliveryPickupPhone" required="" maxlength="11"
oninput="javascript: if ( this.maxLength > -1 && this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
</span>
</div>
</li>
<li class="buyer-item">
<label for="_deliveryPickupShop" class="title">바로픽업 매장</label>
<div class="form-group">
<span class="c-input">
<input type="text" value="" class="input" id="_deliveryPickupShop" readonly="readonly" required="">
</span>
<button type="button" class="btn-extra">매장 찾기</button>
</div>
</li>
<li class="buyer-item">
<strong class="title">방문 일시</strong>
<div class="form-group">
<span class="c-select" style="width:50%">
<select title="일자 선택" class="select">
<option value="" selected="selected">일자 선택</option>
<option value="">9월 21일</option>
<option value="">9월 22일</option>
<option value="">9월 23일</option>
<option value="">9월 24일</option>
<option value="">9월 25일</option>
</select>
</span>
<span class="c-select" style="width:50%">
<select title="시간 선택" class="select">
<option value="" selected="selected">시간 선택</option>
<option value="">오후 12시 ~ 오후 1시</option>
<option value="">오후 1시 ~ 오후 2시</option>
<option value="">오후 2시 ~ 오후 3시</option>
<option value="">오후 3시 ~ 오후 4시</option>
<option value="">오후 4시 ~ 오후 5시</option>
<option value="">오후 5시 ~ 오후 6시</option>
</select>
</span>
</div>
</li>
</ul>
<button type="button" class="btn-submit">확인</button>
</div>
<div class="buyer-info">
<div class="buyer-tit">
<h3 class="tit">바로 픽업 매장</h3>
<a href="#none" class="notice">수정</a>
</div>
<ul class="buyer-list">
<li class="buyer-item">
<label for="_deliveryPickupPhone" class="title">휴대폰 번호</label>
<div class="form-group">
<span class="c-input">
010-1234-5678
</span>
</div>
</li>
<li class="buyer-item">
<label for="_deliveryPickupShop" class="title">매장 정보</label>
<div class="form-group">
<span class="c-input">
<span>인천중구대리점 부천시청역 직영점</span>
<span>경기도 부천시 원미구 길주로 189(중동, 우신빌딩)</span>
<span>032-326-0329</span>
</span>
</div>
</li>
<li class="buyer-item">
<label for="_deliveryPickupShop" class="title">방문 일시</label>
<div class="form-group">
<span class="c-input">
<span>2020년 12월 02일</span>
<span>18:00 ~ 18:30</span>
</span>
</div>
</li>
</ul>
</div>
<!-- e:// case 별 주소 입력 폼 -->
</div>
</div>
<!-- //e : 배송 가능 방법 -->
<div class="favorite-seller">
<h3 class="favorite-seller-tit">이 휴대폰과 함께 많이 본 휴대폰</h3>
<ul class="favorite-seller-list">
<li class="favorite-seller-item">
<a href="#none">
<img src="https://cdnm.shop.tworld.co.kr/pimg/phone/A2/A238/default/A238_001_1.jpg" class="favorite-seller-thumb" />
<span class="favorite-seller-name">iPhone 12 Pro max 2 5G</span>
</a>
</li>
<li class="favorite-seller-item">
<a href="#none">
<img src="../img/@/iphone-12-mini@2x.png" class="favorite-seller-thumb" />
<span class="favorite-seller-name">iPhone 12 mini</span>
</a>
</li>
<li class="favorite-seller-item">
<a href="#none">
<img src="../img/@/iphone-12@2x.png" class="favorite-seller-thumb" />
<span class="favorite-seller-name">갤럭시 S20+ 5G BTS 에디션 시리즈</span>
</a>
</li>
</ul>
</div>
<!-- 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 id="featurePoint" class="feature-point-contents">
<!-- 특장점 리뉴얼 22.01.21-->
<!-- 공통 -->
<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/fill-1@2x.png" class="samsung-logo">
</div>
<div class="fp-item-txt">삼성</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/fill-1_2@2x.png" class="apple-logo">
</div>
<div class="fp-item-txt">애플</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/fill-1_3@2x.png" class="xiaomi-logo">
</div>
<div class="fp-item-txt">샤오미</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/group-6@2x.png" class="etc-logo">
</div>
<div class="fp-item-txt">기타</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/group-3@2x.png" class="android-logo">
</div>
<div class="fp-item-txt">안드로이드</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/group-3_2@2x.png" class="ios-logo">
</div>
<div class="fp-item-txt">iOS</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/group-29@2x.png" class="os-logo">
</div>
<div class="fp-item-txt">기타</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/icon-5-gx@2x.png" class="w99">
<div class="value-text communication">5G</div>
</div>
<div class="fp-item-txt"><span>5G</span>통신 지원</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">USIM종류</h5>
<div class="fp-item-img">
<img src="../img/point/icon-usim@2x.png" class="w51">
</div>
<div class="fp-item-txt">나노유심</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="phone-tag">SM109 1. 플립형 case</div>
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img">
<img src="../img/point/icon-phone_2@2x.png" class="w113">
<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">
<div class="phone-tag">SM109 10. 폴드형 case</div>
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">휴대폰 크기</h5>
<div class="fp-item-img fold-img">
<img src="../img/point/icon_8@2x.png" class="w140">
<div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">120</div>
<div class="value-text phone-thick">10</div>
</div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div>
</div>
<div class="group-box">
<div class="phone-tag">SM109 1. 플립형 case</div>
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">접힌 상태<br>휴대폰 크기</h5>
<div class="fp-item-img flip-folded">
<img src="../img/point/icon-phone_3@2x.png" class="w85">
<div class="value-text phone-height">80.4</div>
<div class="value-text phone-width">78.8</div>
<div class="value-text phone-thick">14.8</div>
</div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</span></div>
</div>
</div>
<div class="group-box">
<div class="phone-tag">SM109 10. 폴드형 case</div>
<div class="fp-item-desc phone-scale-desc">
<h5 class="fp-item-tit">접힌 상태<br>휴대폰 크기</h5>
<div class="fp-item-img fold-folded">
<img src="../img/point/icondim@2x.png" class="w112">
<div class="value-text phone-height">160.8</div>
<div class="value-text phone-width">60</div>
<div class="value-text phone-thick">20</div>
</div>
<div class="fp-item-txt">가로 X 세로 X 두께<br><span class="size-unit">(단위:㎜)</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/icon-scale@2x.png" class="w72">
</div>
<div class="fp-item-txt"><span>226</span><span>g</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 wide-group-box">
<div class="fp-item-desc display-desc">
<h5 class="fp-item-tit">디스플레이</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/icon-phone@2x.png" class="w72">
<div class="value-text">
<span>6.2</span>
<span>인치</span>
</div>
</div>
<div class="fp-item-txt side-txt">
<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>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box">
<div class="phone-tag">SM109 1. 플립형 case</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit sub-display-tit">보조 디스플레이</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/icon-phone_4@2x.png" class="w70">
<div class="value-text sub-display-text">
<span>1.9</span>
<span>인치</span>
</div>
</div>
<div class="fp-item-txt side-txt">
<div>Super AMOLED</div>
<div><span>2640</span> X <span>1080</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box">
<div class="phone-tag">SM109 10. 폴드형 case</div>
<div class="fp-item-desc display-desc">
<h5 class="fp-item-tit">보조 디스플레이</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/icon-phone@2x.png" class="w72">
<div class="value-text">
<span>6.2</span>
<span>인치</span>
</div>
</div>
<div class="fp-item-txt side-txt">
<div>Dynamic AMOLED 2X</div>
<div><span>2640</span> X <span>1680</span><span>px</span></div>
<div><span>120</span><span>Hz</span> 주사율</div>
</div>
</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/rectangle@2x.png" class="w70">
<div class="value-text processor">
<span>A14<br>Bionic 칩</span>
</div>
</div>
<div class="fp-item-txt"><span>헥사코어</span>,<span>7</span><span>GHz</span></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/icon-ram@2x.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>
</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/icon-battery@2x.png" class="w72">
<div class="value-text battery">
<span>2,815</span>
<span>mAh</span>
</div>
</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 camera-group">
<div class="group-box wide-group-box iphone-678">
<div class="phone-tag">i Phone 6/7/8</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-7@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box iphone-678">
<div class="phone-tag">i Phone 6/7/8_?</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-3@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box">
<div class="phone-tag">i Phone 10</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-8@2x.png" class="w42">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box">
<div class="phone-tag">i Phone 11/12</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-6@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box">
<div class="phone-tag">i Phone 13</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-5@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle">
<div class="phone-tag">i Phone 11/12/13pro</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle">
<div class="phone-tag">i Phone 1N~</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/group-23-copy-4@2x.png" class="w70">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br></Nt>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android android-1">
<div class="phone-tag">안드로이드 1개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_8@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_10@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box android">
<div class="phone-tag">안드로이드 2개_대각선</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_2@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-3-vertical">
<div class="phone-tag">안드로이드 3개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_3@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-3-horizontal">
<div class="phone-tag">안드로이드 3개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_5@2x.png" class="w98">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-4-vertical">
<div class="phone-tag">안드로이드 4개_세로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_6@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-4-horizontal">
<div class="phone-tag">안드로이드 4개_가로</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_7@2x.png" class="w109">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android">
<div class="phone-tag">안드로이드 4개_정방향</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_9@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box wide-group-box wide-angle android android-5">
<div class="phone-tag">안드로이드 5개 이상</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit camera-tit">카메라</h5>
<div class="row-box">
<div class="fp-item-img side-img">
<img src="../img/point/camera_4@2x.png" class="w74">
</div>
<div class="fp-item-txt side-txt">
<div><span>와이드</span> + <span>와이드</span> + <span>와이드</span><br>+ <span>울트라와이드</span> + <span>광각</span></div>
<div><span>F1.6</span> + <span>F1.6</span> + <span>F1.6</span> + <span>F2.0</span> + <span>F2.2</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span><br> + <span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
</div>
<div class="group-box front-camera">
<div class="phone-tag">전면_측면_1개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/icon@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="group-box front-camera front-camera-2">
<div class="phone-tag">전면_측면_2개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/icon_2@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span> + <span>와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="group-box front-camera">
<div class="phone-tag">전면_중앙_1개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/dim_10@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span></div>
<div><span>F1.6</span></div>
<div><span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="group-box front-camera front-camera-2">
<div class="phone-tag">전면_중앙_2개</div>
<div class="fp-item-desc">
<h5 class="fp-item-tit">전면 카메라</h5>
<div class="fp-item-img">
<img src="../img/point/icon_4@2x.png" class="w102">
</div>
<div class="fp-item-txt">
<div><span>와이드</span> + <span>와이드</span></div>
<div><span>F1.6</span> + <span>F2.0</span></div>
<div><span>12</span><span>MP</span> + <span>12</span><span>MP</span></div>
</div>
</div>
</div>
<div class="noti">※ 실제 카메라 배치와 다를 수 있습니다.</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/icon-waterproof@2x.png" class="w72">
</div>
<div class="fp-item-txt"><span>IP68</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/icon-face-id-copy@2x.png" class="w70">
</div>
<div class="fp-item-txt">얼굴인식 지원</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/icon-face-id-copy_2@2x.png" class="w70">
</div>
<div class="fp-item-txt">지문인식 지원</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/group-31@2x.png" class="w63">
</div>
<div class="fp-item-txt">라이트닝 8핀</div>
</div>
</div>
<div class="group-box">
<div class="fp-item-desc">
<h5 class="fp-item-tit">Pen</h5>
<div class="fp-item-img pen">
<img src="../img/point/icon_6@2x.png" class="w83">
</div>
<div class="fp-item-txt">Pen지원</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/icon_7@2x.png" class="w95">
</div>
<div class="fp-item-txt">무선충전 지원</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/group-32@2x.png" class="w62">
</div>
<div class="fp-item-txt">전자결제(pay)지원</div>
</div>
</div>
</div>
</div>
<!-- //연결/기타 -->
<!-- //특장점 리뉴얼 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>
</div>
</div>
<!-- //e: 특장점 및 구매후기 -->
</div>
</main>
<!-- s: 하단 스티키 바 -->
<!-- [D] sticky-bar 숨김시 .active 추가 -->
<!-- s: 01-15 수정 -->
<div class="sticky-bar">
<div class="layer-pay">
<h2 class="g-invisible">출고가 가격정보</h2>
<div class="l-grid">
<div class="layer-foot">
<div class="price-area">
<div class="stit">
<span class="text">
<span class="sunit">출고가</span>
</span>
</div>
<div class="price">
<span class="num"><strong>1,155,000</strong></span>
<span class="unit">원</span>
</div>
</div>
</div>
<!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
<div class="btn-area disabled">
<button type="button" class="btn-primary">선택완료</button>
</div>
</div>
</div>
</div>
<!-- s: 01-15 수정 -->
<!-- //e: 하단 스티키 바 -->
</div>
<!-- 바로도착/행복배송 안내 레이어 팝업 -->
<div class="popup pop-seller pop-info-deilivery" style="display: none;">
<div class="popup-body">
<div class="popup-header">
<h1 class="popup-title">바로도착/행복배송 이란?</h1>
</div>
<div role="main" class="popup-content">
<h2 class="title-content">행복배송 안내</h2>
<p class="txt-info">월~토요일 오후 3시까지 주문하면 전문 컨설턴트가 방문하여 개통과 데이터 이전까지 도와드리는 서비스입니다.</p>
<h3 class="g-invisible">행복배송 개통 절차</h3>
<ol class="list-info-step">
<li>
<div class="title-step">
<span>주문</span>
</div>
<p class="txt-step">
<strong>오후 3시</strong><br>마감
</p>
</li>
<li>
<div class="title-step">
<span>배송</span>
</div>
<p class="txt-step">
<strong>T 매니저</strong><br>방문
</p>
</li>
<li>
<div class="title-step">
<span>개통</span>
</div>
<p class="txt-step">
<strong>데이터 이전, 중고폰 매각, 개통 세팅 도움</strong>
</p>
</li>
</ol>
<h2 class="title-content">바로도착 안내</h2>
<p class="txt-info">월~토요일 오후 5시까지 주문하면 배송 파트너가 방문하여 주문하신 휴대폰을 배송해 드립니다.</p>
<h3 class="g-invisible">바로도착 개통 절차</h3>
<ol class="list-info-step">
<li>
<div class="title-step">
<span>주문</span>
</div>
<p class="txt-step">
<strong>오후 5시</strong><br>마감
</p>
</li>
<li>
<div class="title-step">
<span>배송</span>
</div>
<p class="txt-step">
<strong>배송기사님</strong><br>방문
</p>
</li>
<li>
<div class="title-step">
<span>개통</span>
</div>
<p class="txt-step">
<strong>Self</strong> 개통
</p>
</li>
</ol>
</div>
<button type="button" class="btn-close" onclick="UI.modalClose(this);return false;">
<span class="ico-close">팝업 닫기</span>
</button>
</div>
</div>
<!-- //바로도착/행복배송 안내 레이어 팝업 -->
<!-- 우편번호 검색 레이어 팝업 -->
<div class="popup pop-seller pop-search-zip" style="display: none;">
<div class="popup-body">
<div class="popup-header">
<h1 class="popup-title">우편번호 검색</h1>
</div>
<div role="main" class="popup-content">
<p class="txt-form-info">찾으시는 도로명 주소나 지번 주소를 입력 후 검색 버튼을 눌러주세요.</p>
<div class="form-group">
<span class="c-input">
<!-- [D] 검색어 입력시 btn-delete 호출 -->
<input type="text" placeholder="도로명 또는 지번 주소를 입력해주세요." title="주소 입력" class="input">
<button class="btn-delete"><span class="ico-delete">입력 내용 삭제</span></button>
</span>
<button type="button" class="btn-extra">검색</button>
</div>
<!-- [D] 우편번호 검색 결과 있음 -->
<div class="area-result">
<span class="g-invisible">검색된 우편번호 목록</span>
<ul class="list-address">
<li>
<a href="#none" class="item-address">
<span class="zipcode">우편번호 <em>06120</em></span>
<span class="street-address">서울특별시 중구 을지로 177(을지로4가, 일신빌딩)</span>
<span class="lot-num-address">서울특별시 중구 을지로4가 71-2</span>
</a>
</li>
<li>
<a href="#none" class="item-address">
<span class="zipcode">우편번호 <em>06120</em></span>
<span class="street-address">서울특별시 중구 을지로 177(을지로4가, 일신빌딩)</span>
<span class="lot-num-address">서울특별시 중구 을지로4가 71-2</span>
</a>
</li>
</ul>
<!-- [D] 검색 결과 10개 이상 시 '더보기' 버튼 노출 -->
<div class="btn-area">
<button type="button" class="btn-default btn-fix">10개 더보기</button>
</div>
</div>
<!-- [D] 우편번호 검색 결과 없음 -->
<div class="area-result">
<p class="txt-info"><em>일치하는 주소가 없습니다.</em>주소를 정확히 확인 후 다시 입력해주세요.</p>
</div>
</div>
<div class="popup-footer">
<div class="btn-area">
<button type="button" class="btn-primary">확인</button>
</div>
</div>
<button type="button" class="btn-close" onclick="UI.modalClose(this);return false;">
<span class="ico-close">팝업 닫기</span>
</button>
</div>
</div>
<!-- 우편번호 검색 레이어 팝업 -->
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/tdirect-ui.js"></script>
<script>
(function(){
$(".seller-product-detail .sort-items").each(function(){
$(this).on('click', function(){
$(this).siblings().attr("aria-selected", false);
$(this).attr("aria-selected", true);
target_blank($('.buyer-info'));
});
});
//앵커링 애니메이션
$('.c-ick-var input').on('change', function() {
var currentNumber = parseInt($(this).parents('.opt-group').attr('id').match(/\d+/g).join());
var nextAnchor = '#inputAnchor' + (currentNumber + 1);
if ($(nextAnchor).length) {
target_blank($(nextAnchor));
}
});
})();
</script>
</body>
</html>
\ No newline at end of file
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