초기소스
This commit is contained in:
52
src/main/webapp/WEB-INF/views/html/mobile/AF/brandStory.jsp
Normal file
52
src/main/webapp/WEB-INF/views/html/mobile/AF/brandStory.jsp
Normal file
@@ -0,0 +1,52 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/AF/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="topBg">
|
||||
<div class="conW">
|
||||
<div class="titleW">
|
||||
<h2>No Chemical Issue</h2>
|
||||
<p>데일리 안심 케어 전문 브랜드</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_wrap brand" id="brand01">
|
||||
<div class="">
|
||||
<div class="con con1">
|
||||
<div class="titleW">
|
||||
<i class="stit">Brand Story</i>
|
||||
<h3>Stress Free, Safe your life</h3>
|
||||
</div>
|
||||
<div class="conT">
|
||||
<p>안전하고 깨끗해야 할 일상 속 생활용품들,<br>지금 안심하고 사용하고 계시나요?<br>ALL FREE는 이러한 질문에 대한<br><span class="pointW">공감, 고민, 해결방안</span>을 찾기 위해 시작되었습니다.</p>
|
||||
<div class="conImg"><img src="/mobile/brand/AF/images/brand_con1.png" alt="컨텐츠1" /></div>
|
||||
<p>누구나 손쉽게 사용하기에,<br>소중한 사람들이 함께 사용하는 제품들이라면<br>더욱더 안전하고 깨끗해야 할,<br><span class="strong">올프리의 모든 제품들은 소비자의<br>안전과 건강함을 먼저 생각합니다.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con2" id="brand02">
|
||||
<div class="titleW">
|
||||
<i class="stit">Philosophy</i>
|
||||
<h3>소비자의 안전과 건강한 생활</h3>
|
||||
</div>
|
||||
<div class="conT">
|
||||
<div class="conImg"><img src="/mobile/brand/AF/images/brand_con2.png" alt="컨텐츠2" /></div>
|
||||
<p class="strong">올프리의 겉모습은 복잡하지도<br>화려하지도 않습니다.</p>
|
||||
<p class="dep">오직 “소비자의 안전과 건강한 생활”을 위하는 <br>가장 기본에 충실한 마음으로<br>엄격한 기준과 품질관리로만 만들어집니다.</p>
|
||||
<br>
|
||||
<p>자연을 이해하며, 사람과 함께 공존할 수 있는<br>자연 친화 방식의 가치 소비 지향!<br>올프리는 자연과 가장 가깝고도<br>친화적인 방법으로 환경까지 케어합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con3">
|
||||
<div class="titleW">
|
||||
<i class="stit">7 Promise</i>
|
||||
<h3>더 건강하고 가치 있는 삶을 살아가기 위한 약속입니다.</h3>
|
||||
</div>
|
||||
<div class="conImg"><img src="/mobile/brand/AF/images/m_brand_con3.png" alt="컨텐츠3" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
65
src/main/webapp/WEB-INF/views/html/mobile/AF/brandValue.jsp
Normal file
65
src/main/webapp/WEB-INF/views/html/mobile/AF/brandValue.jsp
Normal file
@@ -0,0 +1,65 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/AF/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="topBg">
|
||||
<div class="conW">
|
||||
<div class="titleW">
|
||||
<h2>The Pure,<br>All Premium Value</h2>
|
||||
<p>더하지 않아 안심! 건강한 프리미엄의 가치</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_wrap safeCare" id="safe01">
|
||||
<div class="">
|
||||
<div class="titW">
|
||||
<p>소중한 사람을 위한 깐깐한 선택,<br>
|
||||
<span class="strong">연약하고 민감한 피부를 위한 고민과 해결방안</span><br>
|
||||
<span class="pointW">올프리가 전하는 일상의 노력</span><br>
|
||||
<span class="pointW">SAFE CARE를 만나보세요</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="con con1">
|
||||
<div class="conImg">
|
||||
<span class="line"></span>
|
||||
<img src="/mobile/brand/AF/images/safecare_con1.png" alt="컨텐츠1" />
|
||||
</div>
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">안심 케어 #1.</i>
|
||||
<h3>유해화학물질 불검출,<br>안전성 인증</h3>
|
||||
<p>형광증백제, 포름알데히드 불검출 인증은 물론 인공 색소 및 합성향료를 첨가하지 않은 제품으로 호흡기 질환 및 피부염 등을 유발하지 않습니다. 올프리의 모든 제품은 까다롭고 엄격한 품질관리 기준으로 만들어집니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con2">
|
||||
<div class="conImg">
|
||||
<img src="/mobile/brand/AF/images/safecare_con2.png" alt="컨텐츠2" />
|
||||
</div>
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">건강 케어 #2.</i>
|
||||
<h3>먼지 날림 최소화<br>& 피부 저자극</h3>
|
||||
<p>섬유질이 길고 쉽게 부스러지 않아,<br>연약하고 민감한 여성. 아이의 피부 사용에 <br>적합하며, 순하고 깨끗하게 닦여집니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con3">
|
||||
<div class="conImg">
|
||||
<img src="/mobile/brand/AF/images/safecare_con3.png" alt="컨텐츠1" />
|
||||
</div>
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">신뢰 케어 #3.</i>
|
||||
<h3>친환경 제품의 착한 소비</h3>
|
||||
<p><span class="strong">사람, 환경, 건강한 내일을 위한<br><span class="point">올프리만의 가치!</span></span><br>자연과 사람, 미래의 공존과 지속을 위해 <br>올프리 제품의 모든 원재료들은 <br>가장 친화적인 방법으로 개발/생산됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
63
src/main/webapp/WEB-INF/views/html/mobile/BD/brandStory.jsp
Normal file
63
src/main/webapp/WEB-INF/views/html/mobile/BD/brandStory.jsp
Normal file
@@ -0,0 +1,63 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/BD/css/user.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout_body">
|
||||
<div class="newpage">
|
||||
<div class="cboth"><img src="/mobile/brand/BD/images/company01.gif"></div>
|
||||
<div class="cboth text">
|
||||
<p>바디닥터스 소개</p>
|
||||
인류는 과학과 문명이 발전하면서 먹거리의 산업화도 급속한 속도로 변화하고 있습니다<br>
|
||||
이런 먹거리의 산업화에서 효율을 높이고 비용을 줄이기 위해 자연에 없는 화학의 개입 <br>
|
||||
즉, 낮은 생산 비용, 높은 효율, 좋은 입맛, 좋은 향을 내기 위해 많은 화학적 원료들이 만들어지고 있습니다 <br>
|
||||
얼마나 많은 화학첨가물들이 들어가는지 알지도 못하고 우리는 그것들을 먹고 있습니다. <br>
|
||||
<br>
|
||||
과학은 자연을 복제할 수 없습니다 <br>
|
||||
<br>
|
||||
인체는 자연에서 유래한 것을 흡수하여야 건강할 수 있습니다
|
||||
</div>
|
||||
|
||||
<div class="cboth box">
|
||||
<p>“생산성 향상과 제품 안정화를 위한<br>화학첨가물을 사용하지 않습니다!”</p>
|
||||
바디닥터스의 無 부형제 공법
|
||||
</div>
|
||||
|
||||
<div class="cboth text">
|
||||
<p>바디닥터스의 가치</p>
|
||||
바디닥터스는 제품 생산에 있어 화학적 원료들을 최대한 사용하지 않을 것입니다 <br>
|
||||
또한 이에 따르는 투자또한 아끼지 않을 것입니다 <br>
|
||||
이런 노력의 결과로 타블렛 제조 과정에서 필연적으로 첨가되는 화학 부형제를 제외한 <br>
|
||||
무부형제공법이 탄생하였습니다 <br>
|
||||
바디닥터스는 앞으로도 화학적 원료들을 지양하는 최고의 제품을 공급하겠습니다
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cboth map">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1582.773207776125!2d126.95658605824576!3d37.49502880449239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca1d42e52a775%3A0x681294eb3d51bc63!2z7ISc7Jq47Yq567OE7IucIOuPmeyekeq1rCDsg4Hrj4Trj5kgNTA1LTI!5e0!3m2!1sko!2skr!4v1476435911206"
|
||||
width="100%" height="200px" frameborder="0" style="border:0" allowfullscreen=""></iframe>
|
||||
|
||||
<div class="cboth text">
|
||||
<p>바디닥터스 찾아오시는 길</p>
|
||||
CS CENTER <br>
|
||||
1670-2022/ 1600-3810<br><br>
|
||||
|
||||
<span>서울특별시 금천구 벚꽃로 298 <br> (대륭포스트타워6차) 304호</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- //newpage -->
|
||||
|
||||
<style>
|
||||
.top_shopping {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top_company {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
25
src/main/webapp/WEB-INF/views/html/mobile/CH/Ceo.jsp
Normal file
25
src/main/webapp/WEB-INF/views/html/mobile/CH/Ceo.jsp
Normal file
@@ -0,0 +1,25 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>CEO인사</h2>
|
||||
</div>
|
||||
|
||||
<div class="img_cont_box">
|
||||
<img src="/mobile/brand/CH/images/img_shopinfo_introduct.jpg" alt="대한민국 홍삼의 숨겨진 진실… 참다한이 시작합니다. 하나만 여쭙겠습니다. 정확한 답을 아신다면 제 얘기에 귀를 기울이실 필요가 없습니다. 만약 모르신다면 제 얘기에 잠시만 귀 기울여 주셔야 합니다. 홍삼제품 사실 때 무엇을 기준으로 사야 하는지 아십니까? 브랜드라서, 가격이 저렴해서, 6년근이라서, 직거래라서… 다 틀리셨습니다. 누구나 먹는 홍삼. 가장 기본이 되는 ‘무엇을 보고 사야 하는지'를 모르는 분들이 대부분 입니다. 그런 분들은 저와 함께 잠시만 참다한에 머물다 가십시오. 대한민국의 홍삼시장이 왜 이렇게 정보의 불균형으로 흘러갈 수밖에 없는지, 왜 이렇게 소비자들을 눈멀게 만들어야 했는지 그 감춰진 진실… 참다한이 하나씩 밝히겠습니다. 저희를 믿지도 마십시오. 오직 상식의 기준에서 진실만을 보시고, 옳은 선택을 하시기 바랍니다. 왜 물에 달인 추출액이 아닌 통째로 갈아 넣은 분말액을 먹어야 하는지, 모든 진실이 참다한에 있습니다. 약속드립니다. 참다한은 신념을 지키는 기업이 되겠습니다. 고객 건강을 위해 참 정성을 다한 옳은 제품만 만들고, 옳은 길만 가겠습니다. ㈜지씨바이오 대표이사">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</html>
|
||||
30
src/main/webapp/WEB-INF/views/html/mobile/CH/History.jsp
Normal file
30
src/main/webapp/WEB-INF/views/html/mobile/CH/History.jsp
Normal file
@@ -0,0 +1,30 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>회사연혁</h2>
|
||||
</div>
|
||||
<div class="inner_cont">
|
||||
<p class="img_organization">
|
||||
<img src="/mobile/brand/CH/images/img_history08.jpg" title="2020" alt="2020">
|
||||
<img src="/mobile/brand/CH/images/img_history07.jpg" title="2019" alt="2019">
|
||||
<img src="/mobile/brand/CH/images/img_history06.jpg" title="2018" alt="2018">
|
||||
<img src="/mobile/brand/CH/images/img_history05.jpg" title="2017" alt="2017">
|
||||
<img src="/mobile/brand/CH/images/img_history04.jpg" title="2016" alt="2016">
|
||||
<img src="/mobile/brand/CH/images/img_history03.jpg" title="2015" alt="2015">
|
||||
<img src="/mobile/brand/CH/images/img_history02.jpg" title="2014" alt="2014">
|
||||
<img src="/mobile/brand/CH/images/img_history01.jpg" alt="2013">
|
||||
<img src="/mobile/brand/CH/images/img_history_img.jpg" alt="참다한홍삼">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</html>
|
||||
20
src/main/webapp/WEB-INF/views/html/mobile/CH/Map.jsp
Normal file
20
src/main/webapp/WEB-INF/views/html/mobile/CH/Map.jsp
Normal file
@@ -0,0 +1,20 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>조직도</h2>
|
||||
</div>
|
||||
<div class="inner_cont">
|
||||
<p class="img_organization"><img src="/mobile/brand/CH/images/img_organization.jpg" alt="조직도"></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</html>
|
||||
21
src/main/webapp/WEB-INF/views/html/mobile/CH/Script.jsp
Normal file
21
src/main/webapp/WEB-INF/views/html/mobile/CH/Script.jsp
Normal file
@@ -0,0 +1,21 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>온체식참다한</h2>
|
||||
</div>
|
||||
|
||||
<p class="img_introduces pd20">
|
||||
<img src="/mobile/brand/CH/images/img_introduces03.jpg" title="" alt="">
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</html>
|
||||
88
src/main/webapp/WEB-INF/views/html/mobile/CH/Technology.jsp
Normal file
88
src/main/webapp/WEB-INF/views/html/mobile/CH/Technology.jsp
Normal file
@@ -0,0 +1,88 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
|
||||
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
|
||||
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
|
||||
<%@ taglib prefix="ui" uri="http://www.winbit.kr/ctl/ui"%>
|
||||
<%@ taglib prefix="f" uri="/WEB-INF/tlds/f.tld"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/mobile/vendor/jquery-3.7.1.min.js"></script>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
div[class^="inner_tab_"] {display: none;}
|
||||
div[class^="inner_tab_"].view {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>참다한의 기술</h2>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('.detail_tab3 > li').removeClass('active');
|
||||
$('.detail_tab3 > li.tab_1').addClass('active');
|
||||
$('div[class^="inner_tab_"]').removeClass('view');
|
||||
$('.inner_tab_1').addClass('view');
|
||||
|
||||
|
||||
$('.detail_tab3 > li').on('click', function () {
|
||||
var class_name = $(this)[0].className;
|
||||
$('.detail_tab3 > li').removeClass('active');
|
||||
$(this).closest("li").addClass('active');
|
||||
$('div[class^="inner_tab_"]').removeClass('view');
|
||||
$('.inner_' + class_name + '').addClass('view');
|
||||
});
|
||||
});
|
||||
const fn_change_image = (dv) => {
|
||||
$(".tech").hide();
|
||||
if (dv === '1') {
|
||||
$(".inner_tab_1").show();
|
||||
} else if (dv === '2') {
|
||||
$(".inner_tab_2").show();
|
||||
} else {
|
||||
$(".inner_tab_3").show();
|
||||
}
|
||||
fn_change_img(dv);
|
||||
}
|
||||
/*높이 설정*/
|
||||
const fn_change_img = (dv) => {
|
||||
window.parent.postMessage(dv, "*");
|
||||
}
|
||||
/*해당탭 show*/
|
||||
$(document).ready(function () {
|
||||
let dv = '<c:out value="${dv}"/>';
|
||||
fn_change_img(dv);
|
||||
});
|
||||
</script>
|
||||
<div class="tab3_box">
|
||||
<ul class="detail_tab3">
|
||||
<li class="tab_1"><a onclick="fn_change_image('1');fn_change_img('tech_1');">참다한의 기술</a></li>
|
||||
<!--//class="active" 활성화-->
|
||||
<li class="tab_2"><a onclick="fn_change_image('2');fn_change_img('tech_2');">첨단 생산설비</a></li>
|
||||
<li class="tab_3"><a onclick="fn_change_image('3');fn_change_img('tech_3');">3無4無의 진실</a></li>
|
||||
</ul>
|
||||
<div class="inner_tab_1 tech" style="text-align:center;">
|
||||
<p class="img_introduces">
|
||||
<img src="/mobile/brand/CH/images/detail_inc(123).jpg" title="" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="inner_tab_2 tech" style="text-align:center;">
|
||||
<p class="img_introduces">
|
||||
<img src="/mobile/brand/CH/images/img_introduces02_2.jpg" alt="">
|
||||
</p>
|
||||
</div>
|
||||
<div class="inner_tab_3 tech" style="text-align:center;">
|
||||
<p class="img_introduces">
|
||||
<img src="/mobile/brand/CH/images/img_introduces02_3.jpg" title="" alt="">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
47
src/main/webapp/WEB-INF/views/html/mobile/CH/Way.jsp
Normal file
47
src/main/webapp/WEB-INF/views/html/mobile/CH/Way.jsp
Normal file
@@ -0,0 +1,47 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>오시는길</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pd20 pdt30">
|
||||
<dl class="way_address mt0">
|
||||
<dt>참다한 본사주소</dt>
|
||||
<dd>서울특별시 금천구 가산디지털1로 189 (가산동) LG가산 디지털센터 703-1호</dd>
|
||||
</dl>
|
||||
<div id="daumRoughmapContainer1475212340829" class="root_daum_roughmap root_daum_roughmap_landing"></div>
|
||||
<dl class="way_address">
|
||||
<dt>참다한 영남사업부</dt>
|
||||
<dd>부산시 해운대구 센텀서로 30, (KNN타워) 1803호 <br>Tel:051-664-7710</dd>
|
||||
</dl>
|
||||
<div id="daumRoughmapContainer1449717167086" class="root_daum_roughmap root_daum_roughmap_landing"></div>
|
||||
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://spi.maps.daum.net/imap/map_js_init/roughmapLoader.js"></script><script charset="UTF-8" src="https://t1.daumcdn.net/kakaomapweb/place/jscss/roughmap/07708ab0/roughmapLander.js"></script>
|
||||
<script charset="UTF-8">
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp" : "1475212340829",
|
||||
"key" : "db7x",
|
||||
"mapWidth" : "300",
|
||||
"mapHeight" : "185"
|
||||
}).render();
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp" : "1449717167086",
|
||||
"key" : "7bzw",
|
||||
"mapWidth" : "300",
|
||||
"mapHeight" : "185"
|
||||
}).render();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</html>
|
||||
26
src/main/webapp/WEB-INF/views/html/mobile/CH/brandStory.jsp
Normal file
26
src/main/webapp/WEB-INF/views/html/mobile/CH/brandStory.jsp
Normal file
@@ -0,0 +1,26 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link href="/mobile/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/mobile/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
<h2>참다한 소개</h2>
|
||||
</div>
|
||||
<p class="img_introduces pd20">
|
||||
<img src="/mobile/brand/CH/images/img_introduces01.jpg" alt="좋은 재료로 건강하게 만드는 옳은 홍삼, 참다한
|
||||
-참다한은 귀한 홍삼의 영양을 가장 많이 담을 수 있는 ‘전체식 홍삼’ 기술을 바탕으로 탄생한 브랜드로써
|
||||
홍삼을 가장 건강하게, 온전하게 섭취할 수 있는 새로운 방법을 제안하고 있습니다
|
||||
‘참된 마음으로 정성을 다한다’는 뜻의 참다한은 보다 많은 분들이 몸에 해로운 그 어떤 유해물질 없이
|
||||
건강한 홍삼을 만날 수 있도록 늘 정성을 다하고 있습니다 ">
|
||||
<img src="/mobile/brand/CH/images/img_introduces01_2.jpg" alt="참다한 BI-식품 속에 조성된 자연 그대로의 참 영양을 모두 다해 고객에게 전달하는
|
||||
올바른 건강식품 기업으로써의 참다한의 뜻을 담았습니다. ,RED- 따뜻한 햇빛 속에 조성된 참 자연,BROWN-대 자연을 품으며 건강하게 숨 쉬는 땅,BLUE-청명한 대기와 바람">
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</html>
|
||||
511
src/main/webapp/WEB-INF/views/html/mobile/DL/brandStory.jsp
Normal file
511
src/main/webapp/WEB-INF/views/html/mobile/DL/brandStory.jsp
Normal file
@@ -0,0 +1,511 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="/pc/brand/DL/css/common.css">
|
||||
<style type="text/css" data-fbcssmodules="css:fb.css.base css:fb.css.dialog css:fb.css.iframewidget">
|
||||
.fb_hidden {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
z-index: 10001
|
||||
}
|
||||
|
||||
.fb_reposition {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fb_invisible {
|
||||
display: none
|
||||
}
|
||||
|
||||
.fb_reset {
|
||||
background: none;
|
||||
border: 0px;
|
||||
border-spacing: 0;
|
||||
color: #000;
|
||||
cursor: auto;
|
||||
direction: ltr;
|
||||
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
visibility: visible;
|
||||
white-space: normal;
|
||||
word-spacing: normal
|
||||
}
|
||||
|
||||
.fb_reset > div {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@keyframes fb_transform {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(.95)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
.fb_animate {
|
||||
animation: fb_transform .3s forwards
|
||||
}
|
||||
|
||||
.fb_hidden {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
z-index: 10001
|
||||
}
|
||||
|
||||
.fb_reposition {
|
||||
overflow: hidden;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fb_invisible {
|
||||
display: none
|
||||
}
|
||||
|
||||
.fb_reset {
|
||||
background: none;
|
||||
border: 0px;
|
||||
border-spacing: 0;
|
||||
color: #000;
|
||||
cursor: auto;
|
||||
direction: ltr;
|
||||
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-indent: 0;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
visibility: visible;
|
||||
white-space: normal;
|
||||
word-spacing: normal
|
||||
}
|
||||
|
||||
.fb_reset > div {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
@keyframes fb_transform {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(.95)
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
.fb_animate {
|
||||
animation: fb_transform .3s forwards
|
||||
}
|
||||
|
||||
.fb_dialog {
|
||||
background: rgba(82, 82, 82, .7);
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
z-index: 10001
|
||||
}
|
||||
|
||||
.fb_dialog_advanced {
|
||||
border-radius: 8px;
|
||||
padding: 10px
|
||||
}
|
||||
|
||||
.fb_dialog_content {
|
||||
background: #fff;
|
||||
color: #373737
|
||||
}
|
||||
|
||||
.fb_dialog_close_icon {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 0 transparent;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 17px;
|
||||
width: 15px
|
||||
}
|
||||
|
||||
.fb_dialog_mobile .fb_dialog_close_icon {
|
||||
left: 5px;
|
||||
right: auto;
|
||||
top: 5px
|
||||
}
|
||||
|
||||
.fb_dialog_padding {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
z-index: -1
|
||||
}
|
||||
|
||||
.fb_dialog_close_icon:hover {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -15px transparent
|
||||
}
|
||||
|
||||
.fb_dialog_close_icon:active {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/yq/r/IE9JII6Z1Ys.png) no-repeat scroll 0 -30px transparent
|
||||
}
|
||||
|
||||
.fb_dialog_iframe {
|
||||
line-height: 0
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_title {
|
||||
background: #6d84b4;
|
||||
border: 1px solid #365899;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_title > span {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/yd/r/Cou7n-nqK52.gif) no-repeat 5px 50%;
|
||||
float: left;
|
||||
padding: 5px 0 7px 26px
|
||||
}
|
||||
|
||||
body.fb_hidden {
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
margin: 0px;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
transform: none;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile.loading {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/ya/r/3rhSv5V8j3o.gif) white no-repeat 50% 50%;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 10001
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile.loading.centered {
|
||||
background: none;
|
||||
height: auto;
|
||||
min-height: initial;
|
||||
min-width: initial;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile.loading.centered #fb_dialog_loader_spinner {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile.loading.centered .fb_dialog_content {
|
||||
background: none
|
||||
}
|
||||
|
||||
.loading.centered #fb_dialog_loader_close {
|
||||
clear: both;
|
||||
color: #fff;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
padding-top: 20px
|
||||
}
|
||||
|
||||
#fb-root #fb_dialog_ipad_overlay {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10000
|
||||
}
|
||||
|
||||
#fb-root #fb_dialog_ipad_overlay.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile.loading iframe {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
.fb_dialog_mobile .fb_dialog_iframe {
|
||||
position: sticky;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header {
|
||||
background: linear-gradient(from(#738aba), to(#2c4987));
|
||||
border-bottom: 1px solid;
|
||||
border-color: #043b87;
|
||||
box-shadow: white 0px 1px 1px -1px inset;
|
||||
color: #fff;
|
||||
font: bold 14px Helvetica, sans-serif;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: rgba(0, 30, 84, .296875) 0px -1px 0px;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header table {
|
||||
height: 43px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header td.header_left {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
width: 60px
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header td.header_right {
|
||||
font-size: 12px;
|
||||
padding-right: 5px;
|
||||
vertical-align: middle;
|
||||
width: 60px
|
||||
}
|
||||
|
||||
.fb_dialog_content .touchable_button {
|
||||
background: linear-gradient(from(#4267B2), to(#2a4887));
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #29487d;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
margin-top: 3px;
|
||||
max-width: 85px;
|
||||
padding: 4px 12px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header .touchable_button input {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font: bold 12px Helvetica, sans-serif;
|
||||
margin: 2px -12px;
|
||||
padding: 2px 6px 3px 6px;
|
||||
text-shadow: rgba(0, 30, 84, .296875) 0px -1px 0px
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_header .header_center {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_content {
|
||||
background: url(https://connect.facebook.net/rsrc.php/v4/y9/r/jKEcVPZFk-2.gif) no-repeat 50% 50%;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
height: 150px
|
||||
}
|
||||
|
||||
.fb_dialog_content .dialog_footer {
|
||||
background: #f5f6f7;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-top-color: #ccc;
|
||||
height: 40px
|
||||
}
|
||||
|
||||
#fb_dialog_loader_close {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fb_dialog.fb_dialog_mobile .fb_dialog_close_icon {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
#fb_dialog_loader_spinner {
|
||||
animation: rotateSpinner 1.2s linear infinite;
|
||||
background-color: transparent;
|
||||
background-image: url(https://connect.facebook.net/rsrc.php/v4/yD/r/t-wz8gw1xG1.png);
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
height: 24px;
|
||||
width: 24px
|
||||
}
|
||||
|
||||
@keyframes rotateSpinner {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
.fb_iframe_widget {
|
||||
display: inline-block;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fb_iframe_widget span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: justify
|
||||
}
|
||||
|
||||
.fb_iframe_widget iframe {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.fb_iframe_widget_fluid_desktop iframe {
|
||||
min-width: 220px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.fb_iframe_widget_lift {
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.fb_iframe_widget_fluid {
|
||||
display: inline
|
||||
}
|
||||
|
||||
.fb_iframe_widget_fluid span {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#layout_body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
#layer_pay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#payprocessing {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 150px;
|
||||
z-index: 99999999px;
|
||||
}
|
||||
|
||||
.sub_title_bar {
|
||||
margin-top: 110px;
|
||||
}
|
||||
|
||||
.brand_section {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.brand_section .brand_section_title {
|
||||
font-size: 13pt;
|
||||
font-weight: 600;
|
||||
font-family: 'Noto Sans KR' !important;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.brand_section .brand_section_contents {
|
||||
padding-top: 25px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.player_wrap {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.player_wrap iframe, .player_wrap object, .player_wrap embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<div id="layout_body">
|
||||
<div class="sub_title_bar">
|
||||
</div>
|
||||
<div class="brand_section" style="margin-top: -107px;">
|
||||
<div class="brand_section_title">Brand Philosophy & Promise</div>
|
||||
<div style="border-top:5px solid #545454; margin: 0 5%"></div>
|
||||
<div class="brand_section_contents" style="padding-left: 35px; padding-right: 35px;">
|
||||
<img src="/mobile/brand/DL/images/m_brandimg.jpg" style="max-width: 100%; overflow-clip-margin: content-box; overflow: clip; vertical-align: middle;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand_section" style="height: 280px; margin-bottom:-1px">
|
||||
<div class="brand_section_title">Brand Story</div>
|
||||
<div style="border-top:5px solid #545454; margin: 0 5%;"></div>
|
||||
<div class="brand_section_contents"
|
||||
style="margin-bottom: 100px; padding-left: 20px; padding-right: 20px;">
|
||||
<div class="player_wrap">
|
||||
<iframe id="player" frameborder="0" allowfullscreen=""
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin" title="[디디오랩] 브랜드 영상" width="100%"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/y5t5airCreE?enablejsapi=1&autoplay=1&rel=0&showinfo=0&modestbranding=1&playsinline=1&controls=0&color=white&loop=1&mute=1&playlist=y5t5airCreE&origin=https%3A%2F%2Fm.ddolab.co.kr&widgetid=1"
|
||||
data-gtm-yt-inspected-15="true"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ch-plugin" class="notranslate">
|
||||
<div id="ch-plugin-entry">
|
||||
<div style="display: block !important;"></div>
|
||||
</div>
|
||||
<div id="ch-plugin-script" style="display:none;">
|
||||
<iframe id="ch-plugin-script-iframe" title="Channel chat"
|
||||
style="position:relative!important;height:100%!important;width:100%!important;border:none!important;"></iframe>
|
||||
</div>
|
||||
<style data-styled="active" data-styled-version="5.3.9"></style>
|
||||
</div>
|
||||
<div id="fb-root" class=" fb_reset">
|
||||
<div style="position: absolute; top: -10000px; width: 0px; height: 0px;">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
127
src/main/webapp/WEB-INF/views/html/mobile/DT/brandStory.jsp
Normal file
127
src/main/webapp/WEB-INF/views/html/mobile/DT/brandStory.jsp
Normal file
@@ -0,0 +1,127 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<!-- jquery -->
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<script src="<c:url value='/mobile/brand/DT/js/wib-common.js'/>"></script>
|
||||
<script src="<c:url value='/mobile/brand/DT/js/aos.js'/>"></script>
|
||||
<script src="<c:url value='/mobile/brand/DT/js/wib-brand.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/mobile/brand/DT/css/wib-common.css'/>">
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/mobile/brand/DT/css/aos.css'/>">
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/mobile/brand/DT/css/wib-brand.css'/>">
|
||||
<link href="/mobile/brand/DT/css/chamdahan.css" rel="stylesheet">
|
||||
<style>
|
||||
/* 로컬에서는 오픈, 서버에서 제거 */
|
||||
* {font-family: 'NanumSquare','Roboto', sans-serif !important;}
|
||||
body{margin:0;}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
AOS.init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="brand-wrap">
|
||||
<div class="mv">
|
||||
<img src="/mobile/brand/DT/images/brand-mv.jpg" alt="mv">
|
||||
<div class="txt-box">
|
||||
<img src="/mobile/brand/DT/images/mv-img.png" alt="Dr. Lean">
|
||||
<p>건강한 일상의 Life Balance를 찾다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="brandCon01">
|
||||
<img src="/mobile/brand/DT/images/bc01-img01.jpg" alt="Dr.Lean Story" data-aos="fade-left" class="aos-init">
|
||||
<div class="txt-box aos-init" data-aos="fade-right">
|
||||
<strong>01</strong>
|
||||
<p>Dr.Lean Story</p>
|
||||
<span><b>닥터린</b>은 균형 잡힌 일상의 본질을 추구합니다.</span>
|
||||
<em>Life Balance가 무너지게 되면<br>우리 몸은 체중이 증가하거나,<br>몸이 아프거나 하는 이상 신호를 보내죠.<br>그런 날 생각나는 잠깐의 선택이 아닌,<br>당신의
|
||||
일상에 깃들기를 바랍니다.</em>
|
||||
<em>그렇게 때문에,<br>닥터린은 자연을 생각하는 성분 그리고 품질 좋은 성분만을<br>까다롭게 따져보고 만들었습니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brandCon02">
|
||||
<div class="inner">
|
||||
<div class="right aos-init" data-aos="fade-left">
|
||||
<div class="txt-box">
|
||||
<strong>02</strong>
|
||||
<p>Dr.Lean Value</p>
|
||||
<span>모든 제품에 <b>닥터린</b>이 추구하는 가치를 담았습니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left aos-init" data-aos="fade-right">
|
||||
<img src="/mobile/brand/DT/images/bc02-img01.jpg" alt="닥터린">
|
||||
<div class="txt-box">
|
||||
<i># 자연유래성분</i>
|
||||
<em>건강식품은 원료부터 달라야 합니다.<br>원료의 원산지부터 가공방법, 지표 성분의<br>함량까지 무엇 하나 놓치지 않았습니다.<br>특히 자연 유래 성분으로 나 뿐만
|
||||
아니라<br>환경까지 생각 했습니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
<div class="right aos-init" data-aos="fade-left">
|
||||
<img src="/mobile/brand/DT/images/bc02-img02.jpg" alt="닥터린">
|
||||
</div>
|
||||
<div class="left aos-init" data-aos="fade-right">
|
||||
<div class="txt-box">
|
||||
<i># NO 화학첨가물</i>
|
||||
<em>생산성 향상이나 제품안정화를 위해 첨가하는<br>화학첨가물인 HPMC, 이산화규소, 스테아린<br>산마그네슘의 사용을 지양합니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
<div class="right aos-init" data-aos="fade-left">
|
||||
<div class="txt-box">
|
||||
<strong>03</strong>
|
||||
<p>Dr.Lean Global Network</p>
|
||||
<span>더 좋은 원료를 위해, 더 넓은 세상을 봅니다.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left aos-init" data-aos="fade-right">
|
||||
<img src="/mobile/brand/DT/images/bc02-img03.jpg" alt="닥터린">
|
||||
<em>더 좋은 원료를 위해, 더 넓은 세상을 봅니다.<br>좋은 건강식품은 좋은 원료에서 시작합니다.<br>닥터린의 까다롭고 엄격한 기준에 부합하는 원료를 찾기<br>위해 수년간
|
||||
구축해온 글로벌 소싱 네트워크를 기반으로<br>제대로된 원료를 소싱하기 위해 노력합니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brandCon03">
|
||||
<div class="bg aos-init" data-aos="RightFull"></div>
|
||||
<div class="txt-box aos-init" data-aos="fade-right">
|
||||
<strong>04</strong>
|
||||
<p>Dr.Lean Quality</p>
|
||||
<span>건강한 일상의 중요함을 알기에,<br>품질 만큼은 고집스럽게 지키겠습니다. </span>
|
||||
</div>
|
||||
|
||||
<img src="/mobile/brand/DT/images/bc03-img01.jpg" data-aos="fade-left" class="img01 aos-init">
|
||||
<img src="/mobile/brand/DT/images/bc03-img02.jpg" data-aos="fade-left" class="img02 aos-init">
|
||||
<img src="/mobile/brand/DT/images/bc03-img03.jpg" data-aos="fade-left" class="img03 aos-init">
|
||||
<!--<img src="/mobile/brand/DT/images/bc03-img04.jpg" data-aos="fade-left" class="img04" />-->
|
||||
|
||||
<div class="txt-box">
|
||||
<em>기술력이 품질을 좌우합니다.<br>품질에 대한 원칙을 엄격하게 지켜나가며, 최첨단 설비를<br> 갖춘 시설에서 최고 품질의 제품을 생산합니다. <br>특히 ISO,GMP 등 권위
|
||||
있는 기관에서 공식적으로 품질<br>인증을 받은 곳에서 생산하고 있습니다. <br>더욱 안전한 제품으로 여러분의 건강한 일상을 지키겠습니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brandCon04">
|
||||
<img src="/mobile/brand/DT/images/bc04-bg.jpg" alt="FSC">
|
||||
<div class="txt-box">
|
||||
<strong data-aos="fadeInUp" class="aos-init">05</strong>
|
||||
<p data-aos="fadeInUp" class="aos-init">Dr.Lean Responsibility</p>
|
||||
<span data-aos="fadeInUp" class="aos-init">함께 지켜 나가야 할 지구를 위해 책임을 다합니다.</span>
|
||||
<img src="/mobile/brand/DT/images/bc04-icon.png" alt="FSC" data-aos="fadeInUp2" class="aos-init">
|
||||
<em data-aos="fadeInUp2" class="aos-init">닥터린의 패키지는<br>지속 가능한 산림 경영을 실천하기 위한<br>FSC인증을 받은 종이를 사용하고,<br>친환경
|
||||
소재인 콩기름 잉크로 인쇄하였습니다.<br>더 나은 지구 생활을 위해 닥터린의 작지만<br>확실한 노력은 멈추지 않습니다.</em>
|
||||
<em data-aos="fadeInUp" style="font-size:10px;" class="aos-init">(현재는 일부 제품에 적용 되어 있으나, 추후 전 제품에<br>확대하여
|
||||
적용할 예정입니다.)</em>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</html>
|
||||
120
src/main/webapp/WEB-INF/views/html/mobile/JM/brandStory.jsp
Normal file
120
src/main/webapp/WEB-INF/views/html/mobile/JM/brandStory.jsp
Normal file
@@ -0,0 +1,120 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/JM/css/css.css">
|
||||
<link type="text/css" rel="stylesheet" href="/mobile/brand/JM/css/brand_story_m.css" />
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero visible">
|
||||
<div class="hero-content">
|
||||
<h3>일상과 다르지 않은 그날이 되기 위해</h3>
|
||||
<h1>몸속 변화의 이해,<br><span style="color:#7ccac6;">안심 맞춤 케어의 시작</span></h1>
|
||||
<h4>유해화학성분없이 <span style="color:#7ccac6;">안전한 오가닉 플랜</span></h4>
|
||||
</div>
|
||||
<div class="obj"><img src="/mobile/brand/JM/images/m_brand_back_01.png"></div>
|
||||
</section>
|
||||
|
||||
<section id="destinations" class="destinations">
|
||||
<div class="obj_2"><img src="/mobile/brand/JM/images/m_brand_back_02.png"></div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about visible">
|
||||
<div class="background-image"></div>
|
||||
<div class="about_text_wrap">
|
||||
<h1 class="title">ORGANIC PLAN</h1>
|
||||
<span>자연에서부터 시작된 깨끗하고 안전한 성분만을 토대로<br>‘저스트마이데이’의 모든 제품은 탄생됩니다.</span>
|
||||
<div class="about_icon">
|
||||
<img src="/mobile/brand/JM/images/m_brand_icon_05.png">
|
||||
<span>분당서울대병원 인체 적용<br>사용성평가를 통해<br> 생리통, 분비물 악취,<br>가려움 등의 증상 개선 검증</span>
|
||||
</div>
|
||||
<div class="about_icon">
|
||||
<img src="/mobile/brand/JM/images/m_brand_icon_01.png">
|
||||
<span>커버 & 흡수체까지 깨끗하고 건강한<br>유기농 순면 소재만을 사용</span>
|
||||
</div>
|
||||
<div class="about_icon_2">
|
||||
<img src="/mobile/brand/JM/images/m_brand_icon_02.png">
|
||||
<span>검증되지 않은 유해화학성분을 배제</span>
|
||||
</div>
|
||||
<div class="about_icon_3">
|
||||
<img src="/mobile/brand/JM/images/m_brand_icon_03.png">
|
||||
<span>피부 저자극 테스트 완료</span>
|
||||
</div>
|
||||
<div class="about_icon_4">
|
||||
<img src="/mobile/brand/JM/images/m_brand_icon_04.png">
|
||||
<span>나무를 베지 않는<br>자연친화적 원재료 추출 방식</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonials" class="testimonials">
|
||||
<h1>SAFE<br>PRODUCTION SYSTEM</h1>
|
||||
<h3>자연의 깨끗하고 순수한 목화 솜으로 부터 내 몸에 닿는 순간까지<br>US FDA 인증 생산시설에서 철저한 품질관리 시스템을 통해 안전하게 생산됩니다.</h3>
|
||||
<div class="testimonials_img"><img src="/mobile/brand/JM/images/safe_doc.png"></div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Smooth navigation scroll
|
||||
$(".navLink").on('click', function(event){
|
||||
if (this.hash !== "") {
|
||||
event.preventDefault();
|
||||
var hash = this.hash;
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function(){
|
||||
window.location.hash = hash;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Section fade in during scroll
|
||||
$(document).on("scroll", function(){
|
||||
// Calculate how far down the page we are
|
||||
var pageTop = $(document).scrollTop();
|
||||
var pageBottom = pageTop + $(window).height();
|
||||
|
||||
var tags = $("section");
|
||||
var tag0 = $(tags).eq(0);
|
||||
var tag1 = $(tags).eq(1);
|
||||
var tag2 = $(tags).eq(2);
|
||||
var tag3 = $(tags).eq(3);
|
||||
|
||||
if (tag0.height() + tag1.height() + tag2.height() < pageTop) {
|
||||
tag3.addClass("visible");
|
||||
} else if (tag0.height() + tag1.height() < pageTop) {
|
||||
tag2.addClass("visible");
|
||||
} else if (tag0.height() < pageTop) {
|
||||
tag1.addClass("visible");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var leaf_2 = document.querySelector(".leaf_2");
|
||||
var leaf_1 = document.querySelector(".leaf_1");
|
||||
|
||||
function setTranslate(xPos, yPos, el) {
|
||||
if (el) {
|
||||
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", scrollLoop, false);
|
||||
|
||||
var xScrollPosition;
|
||||
var yScrollPosition;
|
||||
|
||||
function scrollLoop() {
|
||||
xScrollPosition = window.scrollX;
|
||||
yScrollPosition = window.scrollY;
|
||||
|
||||
setTranslate(0, yScrollPosition * -.1, leaf_2);
|
||||
setTranslate(0, yScrollPosition * .1, leaf_1);
|
||||
|
||||
requestAnimationFrame(scrollLoop);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
152
src/main/webapp/WEB-INF/views/html/mobile/JM/brandValue.jsp
Normal file
152
src/main/webapp/WEB-INF/views/html/mobile/JM/brandValue.jsp
Normal file
@@ -0,0 +1,152 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/JM/css/css.css">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/JM/css/worganic_m.css">
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero visible">
|
||||
<div class="background-image"></div>
|
||||
<div class="hero_text_wrap">
|
||||
<h1>01<br>저스트마이데이가 선택한<br>100% 유기농 순면 성분의<br>이유있는 자신감</h1>
|
||||
<span>Why did our products choose<br>to produce by 100% pure organic<br>cotton fibers only?</span>
|
||||
<div class="hero_icon">
|
||||
<img src="/mobile/brand/JM/images/m_w_icon_01.png">
|
||||
<span>고분자화학흡수체를<br>넣지 않은 건강한 목화 솜</span>
|
||||
</div>
|
||||
<div class="hero_icon_2">
|
||||
<img src="/mobile/brand/JM/images/m_w_icon_02.png">
|
||||
<span>살충제, 제초제 등 잔류농약 걱정없는<br>깨끗한 목화 솜</span>
|
||||
</div>
|
||||
<div class="hero_icon_3">
|
||||
<img src="/mobile/brand/JM/images/m_w_icon_03.png">
|
||||
<span>친환경 유기농법으로 재배된<br>신뢰성이 높은 프리미엄 목화 솜</span>
|
||||
</div>
|
||||
<div class="hero_icon_4">
|
||||
<img src="/mobile/brand/JM/images/m_w_icon_04.png">
|
||||
<span>염소표백제, 다이옥신<br>걱정없는 안전한 목화 솜</span>
|
||||
</div>
|
||||
<div class="txtbox01"><img src="/mobile/brand/JM/images/m_w_txt_01.png"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about visible">
|
||||
<div class="about_text_wrap">
|
||||
<h1 class="title">02<br><strong>유기농 순면커버</strong>와<br><strong>흡수체</strong>의 특별한 자부심</h1>
|
||||
<div class="about_icon">
|
||||
<img src="/mobile/brand/JM/images/m_w_back_02.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonials" class="testimonials">
|
||||
<div class="background-image"></div>
|
||||
<div class="testimonials_text_wrap">
|
||||
<h1 class="title">03<br>프리미엄 퀄리티의<br>순면 소재</h1>
|
||||
<span>100% Pure Cotton<br>Fibersof Premium Quality</span>
|
||||
<div class="testimonials_icon">
|
||||
<img src="/mobile/brand/JM/images/m_w_obj_03.png">
|
||||
</div>
|
||||
<div class="txtbox02"><img src="/mobile/brand/JM/images/m_w_txt_02.png"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="which" class="which visible">
|
||||
<div class="which_text_wrap">
|
||||
<h1>04<br>US FDA 생산시설<br>설비 인증 등을 갖춘<br>투명하고 신뢰도 높은 제조과정</h1>
|
||||
<span>Which one is<br>the best quality factors<br>for the production processing?</span>
|
||||
<div class="which_icon">
|
||||
<img src="/mobile/brand/JM/images/m_w_back_04.png">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="who visible">
|
||||
<div class="who_text_wrap">
|
||||
<h1>저스트 마이 데이 생리대,<br>이런 분들께 추천합니다.</h1>
|
||||
<span>Who did say that was<br>'Yes, recommend the organic pads.'?</span>
|
||||
<div class="who_icon">
|
||||
<img src="/mobile/brand/JM/images/m_w_who_icon_01.png">
|
||||
<span>고분자화학흡수체를<br>넣지 않은 건강한 목화 솜</span>
|
||||
</div>
|
||||
<div class="who_icon_2">
|
||||
<img src="/mobile/brand/JM/images/m_w_who_icon_02.png">
|
||||
<span>살충제, 제초제 등 잔류농약 걱정없는<br>깨끗한 목화 솜</span>
|
||||
</div>
|
||||
<div class="who_icon_3">
|
||||
<img src="/mobile/brand/JM/images/m_w_who_icon_03.png">
|
||||
<span>친환경 유기농법으로 재배된<br>신뢰성이 높은 프리미엄 목화 솜</span>
|
||||
</div>
|
||||
<div class="who_icon_4">
|
||||
<img src="/mobile/brand/JM/images/m_w_who_icon_04.png">
|
||||
<span>염소표백제, 다이옥신<br>걱정없는 안전한 목화 솜</span>
|
||||
</div>
|
||||
<div class="txtbox03"><img src="/mobile/brand/JM/images/m_w_txt_03.png"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Smooth navigation scroll
|
||||
$(".navLink").on('click', function(event){
|
||||
if(this.hash !== "") {
|
||||
event.preventDefault();
|
||||
var hash = this.hash;
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function(){
|
||||
window.location.hash = hash;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Section fade in during scroll
|
||||
$(document).on("scroll", function(){
|
||||
var pageTop = $(document).scrollTop();
|
||||
var pageBottom = pageTop + $(window).height();
|
||||
var tags = $("section");
|
||||
|
||||
var tag0 = $(tags).eq(0);
|
||||
var tag1 = $(tags).eq(1);
|
||||
var tag2 = $(tags).eq(2);
|
||||
var tag3 = $(tags).eq(3);
|
||||
|
||||
if (tag0.height() + tag1.height() + tag2.height() < pageTop) {
|
||||
tag3.addClass("visible");
|
||||
} else if (tag0.height() + tag1.height() < pageTop) {
|
||||
tag2.addClass("visible");
|
||||
} else if (tag0.height() < pageTop) {
|
||||
tag1.addClass("visible");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var leaf_2 = document.querySelector(".leaf_2");
|
||||
var leaf_1 = document.querySelector(".leaf_1");
|
||||
|
||||
function setTranslate(xPos, yPos, el) {
|
||||
if (el) {
|
||||
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", scrollLoop, false);
|
||||
|
||||
var xScrollPosition;
|
||||
var yScrollPosition;
|
||||
|
||||
function scrollLoop() {
|
||||
xScrollPosition = window.scrollX;
|
||||
yScrollPosition = window.scrollY;
|
||||
|
||||
setTranslate(0, yScrollPosition * -.1, leaf_2);
|
||||
setTranslate(0, yScrollPosition * .1, leaf_1);
|
||||
|
||||
requestAnimationFrame(scrollLoop);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
428
src/main/webapp/WEB-INF/views/html/mobile/NB/brandStory.jsp
Normal file
428
src/main/webapp/WEB-INF/views/html/mobile/NB/brandStory.jsp
Normal file
@@ -0,0 +1,428 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/JM/css/css.css">
|
||||
<link type="text/css" rel="stylesheet" href="/mobile/brand/JM/css/brand_story_m.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/NB/css/chamdahan.css">
|
||||
</head>
|
||||
<style>
|
||||
.sub_title_bar {text-align: center;}
|
||||
</style>
|
||||
<div id="layout_body">
|
||||
<div class="sub_cont">
|
||||
<div class="sub_title_bar">
|
||||
<h2>브랜드 이야기</h2>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<div class="pg">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>자담유는</em><br>화학은 하나라도 더 줄이고<br>자연 그대로를 담고 싶은 마음<em>으로<br>만들었습니다.</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1">
|
||||
<div class="inwrap">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<p class="thumb"><img src="/mobile/brand/NB/images/brand-stoty_sect1_img1.jpg" alt=""></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mv">
|
||||
<div class="display_screen">
|
||||
<iframe src="https://www.youtube.com/embed/5O8u9ZbfNIs?enablejsapi=1&origin=https%3A%2F%2Fm.naturalbottle.co.kr" frameborder="0" allowfullscreen="" data-gtm-yt-inspected-31100376_50="true" id="716228443" data-gtm-yt-inspected-68="true" title="[자연담은유리병] 브랜드 영상_모바일"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .section.sect1 -->
|
||||
|
||||
<div class="section sect2">
|
||||
<h3>자담유는 이렇게 만들어집니다.</h3>
|
||||
|
||||
<div class="row step2">
|
||||
<div class="inwrap">
|
||||
<h4><strong>1</strong><span>자연유래</span>의 성분 함유</h4>
|
||||
<div class="desc">
|
||||
<p>식물에서 추출한 자연유래의 성분을 함유<br>피부 친화적이고 안전한 화장품을 만들기 위한 노력을 아끼지 않겠습니다.</p>
|
||||
</div>
|
||||
<div class="img"><img src="/mobile/brand/NB/images/brand-stoty_sect2_img1.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row step3">
|
||||
<div class="inwrap">
|
||||
<h4><strong>2</strong><span>세계 각지에서 수급한 좋은 원료</span> 사용</h4>
|
||||
<div class="desc">
|
||||
<p>좋은 땅에서 좋은 열매를 거두 듯 <br>세계 각국의 좋은 원료를 찾아 사용합니다.</p>
|
||||
</div>
|
||||
<div class="img"><img src="/mobile/brand/NB/images/brand-stoty_sect2_img2.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row step4">
|
||||
<div class="inwrap">
|
||||
<h4><strong>3</strong>정제수가 아닌 <span>식물수 베이스</span></h4>
|
||||
<div class="desc">
|
||||
<p>화장품의 베이스까지 생각한 '자연 담은 유리병'</p>
|
||||
<p>오직 피부 건강만을 생각하며 <br>화장품 성분의 많은 부분을 차지하는 정제수까지 식물수로 대체하였습니다.</p>
|
||||
</div>
|
||||
<div class="img"><img src="/mobile/brand/NB/images/brand-stoty_sect2_img3.jpg" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .section.sect2 -->
|
||||
</div><!-- .article -->
|
||||
|
||||
<div class="section sect3">
|
||||
<div class="inwrap">
|
||||
<h3>“좋은 성분 + 좋은 원료 + 좋은 베이스”</h3>
|
||||
<p class="desc">그래서 자담유는 좋은 화장품 입니다.</p>
|
||||
<p class="img"><img src="/mobile/brand/NB/images/brand-stoty_sect3_img.jpg" alt=""></p>
|
||||
</div>
|
||||
</div><!-- .section.sect3 -->
|
||||
|
||||
<div class="section sect4" style="display: none;">
|
||||
<div class="inwrap">
|
||||
<div class="inbox">
|
||||
<link type="text/css" rel="stylesheet" href="/mobile/brand/NB/css/unit_skin1_popular_2.css">
|
||||
<div class="popular">
|
||||
<div class="tab">
|
||||
<div>
|
||||
<div class="scroll">
|
||||
<ul class="lst_ul clear">
|
||||
<h4 rel="best" class="highlight best"><a href="javascript:void(0);">BEST</a></h4>
|
||||
<h4 rel="moisture" class="highlight moisture is-active"><a href="javascript:void(0);">수분담은</a></h4>
|
||||
<h4 rel="shining" class="highlight shining"><a href="javascript:void(0);">광채담은</a></h4>
|
||||
<h4 rel="volume" class="highlight volume"><a href="javascript:void(0);">탄력담은</a></h4>
|
||||
<h4 rel="organic" class="underline organic"><a href="javascript:void(0);">유기농오일</a></h4>
|
||||
<h4 rel="special" class="underline special"><a href="javascript:void(0);">스페셜/선</a></h4>
|
||||
<h4 rel="masks" class="underline masks"><a href="javascript:void(0);">마스크/팩</a></h4>
|
||||
<h4 rel="body" class="underline body"><a href="javascript:void(0);">바디/샤워필터</a></h4>
|
||||
<h4 rel="soap" class="underline soap"><a href="javascript:void(0);">클렌징/치약</a></h4>
|
||||
<h4 rel="baby" class="underline baby"><a href="javascript:void(0);">베이비</a></h4>
|
||||
<h4 rel="homme" class="underline homme"><a href="javascript:void(0);">옴므</a></h4>
|
||||
<h4 rel="prop" class="underline prop"><a href="javascript:void(0);">리빙/소품</a></h4>
|
||||
<h4><a></a></h4></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .tab -->
|
||||
<div class="tab_panel">
|
||||
<!-- BEST -->
|
||||
<div id="best" class="panel best" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-best_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb12.jpg" alt=""></span><strong>리얼 비타 씨 앰플</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-moisture_thumb3.jpg" alt=""></span><strong>수분크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular_sun_thumb1.jpg" alt=""></span><strong>햇살엔 선크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb11.jpg" alt=""></span><strong>유기농 티트리오일</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-cleansing_thumb2.jpg" alt=""></span><strong>비타민 클렌징 밤</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb9.jpg" alt=""></span><strong>광채 크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-baby_thumb1.jpg" alt=""></span><strong>베이비 탑투토워시</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb3.jpg" alt=""></span><strong>스카바이겔</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb10.jpg" alt=""></span><strong>옴므 올인원</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-toothpaste_thumb3.jpg" alt=""></span><strong>더안심 키즈치약 라즈베리</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //BEST:END -->
|
||||
|
||||
<!-- 수분담은 -->
|
||||
<div id="moisture" class="panel moisture" style="visibility: visible; height: auto;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-moisture_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/0010000001092.jpg" alt=""></span><strong>수분 크림</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/0010000000012.jpg" alt=""></span><strong>수분 토너</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/0010000000032.jpg" alt=""></span><strong>수분 세럼</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/0010000000062.jpg" alt=""></span><strong>수분 에멀전</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //수분담은:END -->
|
||||
|
||||
<!-- 광채담은 -->
|
||||
<div id="shining" class="panel shining" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-shining_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-shining_thumb1.jpg" alt="광채 도트 필링 패드"></span><strong>광채 도트 필링 패드</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-shining_thumb2.jpg" alt="광채 씨 앰플"></span><strong>광채 씨 앰플</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dshining_thumb3.jpg" alt="광채 캡슐 세럼"></span><strong>광채 캡슐 세럼</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb9.jpg" alt="광채 크림"></span><strong>광채 크림</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //광채담은:END -->
|
||||
|
||||
<!-- 탄력담은 -->
|
||||
<div id="volume" class="panel volume" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-volume_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-volume_thumb1.jpg" alt=""></span><strong>탄력 토너</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-volume_thumb2.jpg" alt=""></span><strong>탄력 에센스</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-volume_thumb3.jpg" alt=""></span><strong>탄력 크림</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //탄력담은:END -->
|
||||
|
||||
<!-- 유기농오일 -->
|
||||
<div id="organic" class="panel organic" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-organic_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dorganic_thumb1.jpg" alt=""></span><strong>유기농 호호바 오일</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dorganic_thumb4.jpg" alt=""></span><strong>유기농 티트리 오일</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dorganic_thumb5.jpg" alt=""></span><strong>유기농 코코넛 오일</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //유기농오일:END -->
|
||||
|
||||
<!-- 스페셜 -->
|
||||
<div id="special" class="panel special" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer%2Dspecial_whole_m.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dspecial_thumb12.jpg" alt=""></span><strong>리얼 비타 씨 앰플</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dspecial_thumb6.jpg" alt=""></span><strong>리얼 비피다 앰플</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dspecial_thumb5.jpg" alt=""></span><strong>리얼 밤부 보습 크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dspecial_thumb4.jpg" alt=""></span><strong>리얼 밤부 미스트</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-special_thumb2.jpg" alt=""></span><strong>리얼 펩 아이크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dspecial_thumb3.jpg" alt=""></span><strong>스카바이겔</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular_sun_thumb1.jpg" alt=""></span><strong>햇살엔 선크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dsun_thumb2.jpg" alt=""></span><strong>햇살엔 톤업 선크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dsun_thumb3.jpg" alt=""></span><strong>베이비가든 선크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dsun_thumb4.jpg" alt=""></span><strong>베이비가든 선팩트</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //스페셜:END -->
|
||||
|
||||
<!-- 마스크/팩 -->
|
||||
<div id="masks" class="panel masks" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-mask_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dmask_thumb1.jpg" alt=""></span><strong>연꽃 마스크</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dmask_thumb2.jpg" alt=""></span><strong>장미 마스크</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular%2Dmask_thumb3.jpg" alt=""></span><strong>쟈스민 마스크</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_pack_foot.jpg" alt=""></span><strong>자연담은 시카풋필링팩</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //마스크/팩:END -->
|
||||
|
||||
<!-- 바디 -->
|
||||
<div id="body" class="panel body" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-body_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-body_thumb1.jpg" alt=""></span><strong>바디 워시</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-body_thumb2.jpg" alt=""></span><strong>바디 크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-body_thumb3.jpg" alt=""></span><strong>매직 샤워필터</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //바디:END -->
|
||||
|
||||
<!-- 헤어 -->
|
||||
<div id="hair" class="panel hair" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-hair_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb1.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb2.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb3.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb4.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb5.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb6.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb7.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-hair_thumb8.jpg" alt=""></span><strong>모닝미스트 140ml</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //헤어:END -->
|
||||
|
||||
<!-- 클렌징/치약/솝 -->
|
||||
<div id="soap" class="panel soap" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer%2Dcleansing_whole_m.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_cleansing_thumb2.jpg" alt=""></span><strong>비타민 클렌징 밤</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_cleansing_thumb1.jpg" alt=""></span><strong>클렌징 오일</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_cleansing_thumb3.jpg" alt=""></span><strong>폼 클렌징</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_soap_01.jpg" alt=""></span><strong>까르떼 모이스춰라이징 피치 솝</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_soap_02.jpg" alt=""></span><strong>까르떼 모이스춰라이징 캐모마일 솝</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_soap_03.jpg" alt=""></span><strong>까르떼 모이스춰라이징 어성초 솝</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_soap_04.jpg" alt=""></span><strong>네이비 솝</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_soap_05.jpg" alt=""></span><strong>레드 솝</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_toothpaste_thumb1.jpg" alt=""></span><strong>더 안심 치약 민트</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_toothpaste_thumb2.jpg" alt=""></span><strong>더 안심 치약<br>프로폴리</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_toothpaste_thumb3.jpg" alt=""></span><strong>더 안심 키즈치약<br>라즈베리</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //클렌징/치약/솝:END -->
|
||||
|
||||
<!-- 베이비 -->
|
||||
<div id="baby" class="panel baby" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-baby_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-baby_thumb1.jpg" alt=""></span><strong>베이비 탑투토워시</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/popular-baby_thumb2.jpg" alt=""></span><strong>베이비 로션</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-baby_thumb4.jpg" alt=""></span><strong>베이비 기저귀 크림</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-baby_thumb5.jpg" alt=""></span><strong>베이비 오일</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/populer-baby_thumb3.jpg" alt=""></span><strong>베이비 보습 크림</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //베이비:END -->
|
||||
|
||||
<!-- 옴므 -->
|
||||
<div id="homme" class="panel homme" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer-homme_whole.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/180_180.jpg" alt=""></span><strong>옴므 올인원</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //옴므:END -->
|
||||
|
||||
<!-- 리빙/소품 -->
|
||||
<div id="prop" class="panel prop" style="visibility: hidden; height: 0px;">
|
||||
<div class="whole">
|
||||
<div class="thumb">
|
||||
<a href="#;">
|
||||
<img src="/mobile/brand/NB/images/populer%2Dprop_whole_m.jpg" alt="">
|
||||
</a>
|
||||
</div><!-- .thumb -->
|
||||
</div>
|
||||
<div class="sw_slide">
|
||||
<div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-android">
|
||||
<div class="swiper-wrapper" style="transition-duration: 0ms;">
|
||||
<div class="item swiper-slide-active"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_55_01.jpg" alt=""></span><strong>올프리 유아물티슈</strong></a></div>
|
||||
<div class="item swiper-slide-next"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_65_01.jpg" alt=""></span><strong>올프리 도톰한물티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_55_02.jpg" alt=""></span><strong>올프리 휴대용유아물티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_65_02.jpg" alt=""></span><strong>올프리 휴대용도톰한물티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_tissue_04.jpg" alt=""></span><strong>올프리 휴대용티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_tissue_03.jpg" alt=""></span><strong>올프리 순면신생아건티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_tissue_02.jpg" alt=""></span><strong>올프리 미용티슈</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_tissue_01.jpg" alt=""></span><strong>올프리 두루마리휴지</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_makeup_01.jpg" alt=""></span><strong>올프리화장솜</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_cotton_02.jpg" alt=""></span><strong>올프리순면면봉</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_cotton_03.jpg" alt=""></span><strong>올프리순면뷰티면봉</strong></a></div>
|
||||
<div class="item"><a href="#;"><span class="thumb"><img src="/mobile/brand/NB/images/thumb_allfree_cotton_01.jpg" alt=""></span><strong>올프리순면신생아면봉</strong></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //리빙/소품:END -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .section.sect4 -->
|
||||
</div><!-- .pg -->
|
||||
</div><!-- .cont -->
|
||||
</div><!-- .sub_cont -->
|
||||
</div>
|
||||
</html>
|
||||
423
src/main/webapp/WEB-INF/views/html/mobile/NB/ingredient.jsp
Normal file
423
src/main/webapp/WEB-INF/views/html/mobile/NB/ingredient.jsp
Normal file
@@ -0,0 +1,423 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/chamdahan.css">
|
||||
<style>
|
||||
div[id^="content_"] {display: none;}
|
||||
div[id^="content_"].view {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('.tab_menu_list > li').removeClass('on');
|
||||
$('.tab_menu_list > li.content_1').addClass('on');
|
||||
$('div[id^="content_"]').removeClass('view');
|
||||
$('#content_1').addClass('view');
|
||||
|
||||
|
||||
$('.tab_menu_list > ul > li').on('click',function(){
|
||||
console.log($(this));
|
||||
var class_name = $(this)[0].className;
|
||||
|
||||
$('.sub_cont').removeClass('ingredient1 ingredient2 ingredient3');
|
||||
$('.sub_cont').addClass('ingredient'+class_name.split('_')[1]);
|
||||
|
||||
|
||||
$('.tab_menu_list > ul > li').removeClass('on');
|
||||
$('.tab_menu_list > ul > li.'+class_name+'').addClass('on');
|
||||
$('div[id^="content_"]').removeClass('view');
|
||||
$('#'+class_name+'').addClass('view');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="sub_cont ingredient1">
|
||||
<div class="sub_hd_tit tit_ingredient">
|
||||
<p>성분 불만제로</p>
|
||||
|
||||
<div class="hd_btn_list">
|
||||
<span class="btn_left"><a href="/sopmal/main/selectNbPromiseHtml">네가지 약속</a></span>
|
||||
</div><!-- .hd_btn_list -->
|
||||
</div><!-- .sub_hd_tit -->
|
||||
|
||||
<div class="tab_menu_list">
|
||||
<ul>
|
||||
<li class="content_1 on"><a href="NaturalBottle_3.html#content_1">자담유 성분들</a></li>
|
||||
<li class="content_2"><a href="NaturalBottle_3.html#content_2">화장품 속 화학성분들</a></li>
|
||||
<li class="content_3"><a href="NaturalBottle_3.html#content_3">언론기사</a></li>
|
||||
</ul>
|
||||
</div><!-- .tab_menu_list -->
|
||||
|
||||
<div id="content_1">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>자담유는</em> EWG 그린등급 성분사용<em>을 지향합니다.</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1">
|
||||
<div class="inwrap">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-why_sect1_thumb.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<h4><strong>EWG’s Skin Deep</strong> 스킨딥 성분 등급제</h4>
|
||||
<p class="txt">EWG는 다양한 연구자료를 참고로 하여 성분에 대한 정보를 연구하고 분석해 <br>1에서 10까지의 유해등급을 매겨 정보를 제공하고 있습니다.</p>
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="n1"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico1.jpg" alt=""></em><strong>Low Hazard</strong>안전등급</li>
|
||||
<li class="n2"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico2.jpg" alt=""></em><strong>Moderate Hazard</strong>주의요망</li>
|
||||
<li class="n3"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico3.jpg" alt=""></em><strong>High Hazard</strong>위험</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
|
||||
<div class="section sect2">
|
||||
<div class="inwrap">
|
||||
<h3><em>그래서 자담유의 </em>성분<em>은 안전합니다.</em></h3>
|
||||
<div class="cont">
|
||||
<h4><span>실험내용</span> : 식물 생명유지 테스트(20일간)</h4>
|
||||
<p class="sect2_img"><img src="/pc/brand/NB/images/zero-why_sect2_1_img.jpg" alt=""></p>
|
||||
<p class="txt">※ 자담유의 「수분담은」 라인 - 수분토너, 「탄력담은」 라인 - 탄력토너로 실험했습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .section -->
|
||||
</div><!-- .article -->
|
||||
</div><!-- #content -->
|
||||
|
||||
<div id="content_2">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>매일 쓰는 화장품에 이렇게 많은 </em>화학성분<em>이?</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1 fact">
|
||||
<div class="inwrap">
|
||||
<ul class="ul_lst">
|
||||
<li class="fl mn1">
|
||||
<dl>
|
||||
<dt>샴푸</dt>
|
||||
<dd class="ff_lato">SLS/ SLES, CMIT/ MIT</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn2">
|
||||
<dl>
|
||||
<dt>클렌저</dt>
|
||||
<dd class="ff_lato">CMIT/ MIT, 이소프로필알코올,<br> 트리클로산</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn3">
|
||||
<dl>
|
||||
<dt><span>(스킨/로션/ 에센스/ 크림)</span>기초화장품</dt>
|
||||
<dd class="ff_lato">파라벤, 미네랄오일, PEG, TEA,<br> 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn4">
|
||||
<dl>
|
||||
<dt>마스크팩</dt>
|
||||
<dd class="ff_lato">페녹시에탄올, PEG, TEA, 파라벤</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn5">
|
||||
<dl>
|
||||
<dt>썬크림</dt>
|
||||
<dd class="ff_lato">옥시벤존, 아보벤존, PEG</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn6">
|
||||
<dl>
|
||||
<dt>마스카라</dt>
|
||||
<dd class="ff_lato">TEA, 이미다졸리디닐우레아, BHA, BHT</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn7">
|
||||
<dl>
|
||||
<dt>치약/가글</dt>
|
||||
<dd class="ff_lato">파라벤, 트리클로산, 합성착색료</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn8">
|
||||
<dl>
|
||||
<dt>파운데이션</dt>
|
||||
<dd class="ff_lato">소르빈산, BHA, BHT, 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn9">
|
||||
<dl>
|
||||
<dt>립스틱</dt>
|
||||
<dd class="ff_lato">합성착색료, BHT, BHA</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn10">
|
||||
<dl>
|
||||
<dt>미스트</dt>
|
||||
<dd class="ff_lato">TEA, 트리이소프로판올아민,<br> 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn11">
|
||||
<dl>
|
||||
<dt>향수</dt>
|
||||
<dd class="ff_lato">에탄올, 인공향료</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn12">
|
||||
<dl>
|
||||
<dt>손세정제</dt>
|
||||
<dd class="ff_lato">이소프로필메틸페놀, 트리클로산</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
|
||||
<div class="section sect2">
|
||||
<div class="inwrap">
|
||||
<h3><em>화장품 속 화학성분들</em> 꼭 확인하세요.</h3>
|
||||
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb1.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>1</strong>파라벤</h4>
|
||||
<div class="desc">
|
||||
<p>파라벤은 가장 많이 알려져 있고 가장 많이 사용되는 <br>대표적인 <strong>화학 방부제</strong> 중 하나입니다.</p>
|
||||
<p>'메칠파라벤, 부틸파라벤, 에칠파라벤, 이소부틸파라벤, 이소프로필파라벤, <br>프로필파라벤' 등이 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb2.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>2</strong>페녹시에탄올</h4>
|
||||
<div class="desc">
|
||||
<p>파라벤의 유해성이 급부상한 이후 대체품으로 사용되는 <strong>화학 방부제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb3.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>3</strong>트리클로산</h4>
|
||||
<div class="desc">
|
||||
<p>비누, 세제뿐 아니라 치약, 화장품 등에 일반적으로 자주 사용되는 <br><strong>화학 살균제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb4.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>4</strong>BHT</h4>
|
||||
<div class="desc">
|
||||
<p><strong>산화방지제</strong>로 쓰이는 BHT는 화장품 뿐 아니라 <br>식품에도 사용되는 화학성분입니다.</p>
|
||||
<p>'비에이치티, 부틸하이드록시톨루엔, 디부틸하이드록시톨루엔, <br>부틸레이티드하이드록시톨루엔' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb5.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>5</strong>BHA</h4>
|
||||
<div class="desc">
|
||||
<p><strong>산화방지제</strong>로 사용되는 화학성분입니다. <br>'비에이치에이, 부틸하이드록시아니솔' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb6.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>6</strong>소르빈산</h4>
|
||||
<div class="desc">
|
||||
<p>미생물의 생육을 억제하기 위해 햄, 소시지 등 <br>가공식품에 사용되기도 하는 합성보존료, 즉 <strong>화학 방부제</strong>의 일종입니다. </p>
|
||||
<p>'소르빅애씨드' 라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb7.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>7</strong>이소프로필메틸페놀</h4>
|
||||
<div class="desc">
|
||||
<p>화장수, 유액, 썬크림에 사용되는 <strong>화학 방부제</strong> 성분으로, <br>'이소프로필크레졸, 0-사이멘-5-올' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb8.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>8</strong>이미다졸리디닐우레아/ 디아졸리디닐우레아/ <br>디엠디엠하단토인/ 엠디엠하이단토인</h4>
|
||||
<div class="desc">
|
||||
<p><strong>화학 방부제</strong> 중 파라벤 다음으로 많이 사용되는 성분이지만 <br>이 성분 자체만으로는 기능이 약해 다른 보존제와 혼합해서 사용합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb9.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>9</strong>CMIT/ MIT</h4>
|
||||
<div class="desc">
|
||||
<p>일반적으로 두 가지 성분을 혼합해서 사용하곤 하며, <br>박테리아, 효모, 잔균류의 성장을 억제하며 항균 작용을 하는 <strong>화학 살균제</strong>입니다. </p>
|
||||
<p>각 '메칠클로로이소치아졸리논', '메칠이소치아졸리논' 이라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb10.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>10</strong>SLS/ SLES</h4>
|
||||
<div class="desc">
|
||||
<p>대부분의 샴푸, 세제 뿐만 아니라 치약에까지 다양한 물질에 사용되는 <br>대표적인 <strong>합성 계면활성제</strong>입니다.</p>
|
||||
<p>각 '소듐라우릴설페이트, 소듐라우릴황산염', '소듐라우레스설페이트, <br>소듐라우레스황산염' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb11.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>11</strong>PEG</h4>
|
||||
<div class="desc">
|
||||
<p>샴푸, 세제 등에 사용되는 <strong>합성 계면활성제</strong> 중 하나로 <br>'피이지, 폴리에틸렌글라이콜' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb12.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>12</strong>TEA</h4>
|
||||
<div class="desc">
|
||||
<p><strong>합성 계면활성제ㆍ유화제</strong>로, <br>'트리에탄올아민' 이라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb13.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>13</strong>합성착색료</h4>
|
||||
<div class="desc">
|
||||
<p>일반적으로 청색 x호, 황색 x호, 적색 x호식으로 표시되는 성분으로 <br>화장품의 효능을 높이기 위해 넣은 것이 아니라 <br>눈으로 보는 아름다움을 위해 첨가하는 <strong>화학 착색제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb14.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>14</strong>인공향료</h4>
|
||||
<div class="desc">
|
||||
<p>향을 은은하게 오랫동안 보존시키는 <strong>합성 착향제</strong>입니다. <br>인공향료의 종류는 200개가 넘으며, <br>주로 프탈레이트, 벤젠, 메탄올 등의 성분으로 구성되어 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb15.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>15</strong>이소프로필알코올</h4>
|
||||
<div class="desc">
|
||||
<p>프로필 알코올, 프로페놀, 이소프로페놀로 불리며, <br><strong>기포방지제, 착향제, 용제, 점도감소제</strong>로 쓰이는 화학성분입니다.</p>
|
||||
<p>헤어린스, 바디스크럽, 핸드로션, 면도로션, 향수뿐 아니라 <br>구강세척제, 애프터쉐이브 등까지 등 여러 제품군에서 쉽게 볼 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb16.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>16</strong>티몰</h4>
|
||||
<div class="desc">
|
||||
<p>멘톨의 합성원료이자 <br><strong>변성제, 착향제</strong>로 사용되는 화학성분입니다. <br>독특한 향을 내며 화장품에서는 헤어 제품에 주로 사용됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb17.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>17</strong>옥시벤존</h4>
|
||||
<div class="desc">
|
||||
<p><strong>자외선차단제</strong>성분으로 <br>립스틱, 색조화장품, 자외선차단제에 많이 쓰이는 화학성분입니다. <br>'벤조페논-3' 라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb18.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>18</strong>아보벤존</h4>
|
||||
<div class="desc">
|
||||
<p>태양광의 스펙트럼을 흡수하는 성질 때문에 <br><strong>자외선 차단제</strong>에 많이 쓰이는 화학성분입니다.</p>
|
||||
<p>'부틸메톡시디벤조일메탄, 파르솔1789' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb19.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>19</strong>트리이소프로판올아민</h4>
|
||||
<div class="desc">
|
||||
<p><strong>부식방지제, pH 조절제</strong>로 주로 화장수나 향수에 사용되는 화학성분입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb20.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>20</strong>미네랄오일</h4>
|
||||
<div class="desc">
|
||||
<p>석유, 석탄 등 광물성 원료에서 만들어지는 오일로, <br>원유를 정제하는 과정에서 생성되는 부산물로 <strong>화학 방부제, 연화제</strong> 성분입니다. <br>주성분은 알케인(alkane)과 파라핀(paraffin)으로, <br>상대적으로 값이 싼 물질이며 매우 대량으로 생산됩니다. </p>
|
||||
<p>용제, 착향제, 피부보호제, 피부컨디셔닝제(수분차단제), <br>피부컨디셔닝제(유연제), 헤어컨디셔닝제에 주로 쓰입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- .lst_cell -->
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
</div><!-- .article -->
|
||||
</div><!-- #content -->
|
||||
|
||||
<div id="content_3">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>언론에 보도된</em> 성분기사<em>를 확인하세요.</em></h3>
|
||||
</div>
|
||||
</div><!-- #content -->
|
||||
|
||||
|
||||
</div>
|
||||
82
src/main/webapp/WEB-INF/views/html/mobile/NB/promise.jsp
Normal file
82
src/main/webapp/WEB-INF/views/html/mobile/NB/promise.jsp
Normal file
@@ -0,0 +1,82 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/NB/css/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/NB/css/chamdahan.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="layout_body">
|
||||
<div class="sub_cont">
|
||||
<div class="sub_title_bar">
|
||||
<h2>네 가지 약속</h2>
|
||||
</div>
|
||||
<div class="cont">
|
||||
<div class="pg promise">
|
||||
<div class="pg_title">
|
||||
<h3 class="title">자담유의 <em>네가지 약속</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1">
|
||||
<div class="inwrap">
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/mobile/brand/NB/images/brand-promise_sect1_thumb1.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>하나</strong>오직 사람만을 생각하겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>내 아이를 위해 만든다는 엄마의 마음으로 <br>건강한 화장품을 만들겠습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/mobile/brand/NB/images/brand-promise_sect1_thumb2.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>둘</strong>빼고, 빼고 또 빼겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>유해성이 알려진 화학성분,<br> 그리고 아직 알려지지 않은 화학성분.<br> 이 모두를 단 하나라도 더 빼기 위해 끊임없이 노력하겠습니다. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/mobile/brand/NB/images/brand-promise_sect1_thumb3.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>셋</strong>바디버든 줄이기에 앞장서겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>수없이 많은 화학물질에 노출된 채 살아가는 모두를 위해<br> 바디버든 줄이는 일에 앞장서서 달려가겠습니다.</p>
|
||||
<p class="note">※ 바디버든 : 주어진 시간 동안 신체에 축적된 화학물질의 양</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/mobile/brand/NB/images/brand-promise_sect1_thumb4.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>넷</strong>생명을 귀하게 여기고 상생을 지향합니다.</h4>
|
||||
<div class="desc">
|
||||
<p>사람들의 필요와 욕구를 채우기 위한<br> 동물실험을 반대합니다. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .article -->
|
||||
</div><!-- .pg -->
|
||||
</div>
|
||||
</div><!-- .sub_cont -->
|
||||
</div>
|
||||
</html>
|
||||
20
src/main/webapp/WEB-INF/views/html/mobile/PL/brandStory.jsp
Normal file
20
src/main/webapp/WEB-INF/views/html/mobile/PL/brandStory.jsp
Normal file
@@ -0,0 +1,20 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/PL/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="sub_title_bar">
|
||||
<h2>왜 프로스랩인가?</h2>
|
||||
<a href="javascript:history.back();" class="stb_back_btn"><img src="./img/btn_back.png" width="22" height="22" alt="" /></a>
|
||||
</div>
|
||||
|
||||
<p class="img_introduces pd20">
|
||||
<img src="/mobile/brand/PL/images/01_01_proslab.jpg" alt="">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
65
src/main/webapp/WEB-INF/views/html/mobile/TZ/brandStory.jsp
Normal file
65
src/main/webapp/WEB-INF/views/html/mobile/TZ/brandStory.jsp
Normal file
@@ -0,0 +1,65 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/mobile/brand/TZ/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<p class="img_introduces pd20 tgt" id="company" style="display: none;"><%--더작 스토리--%>
|
||||
<img src="/mobile/brand/TZ/images/com_01.jpg" alt="">
|
||||
</p>
|
||||
<p class="img_introduces pd20 tgt" id="freeze" style="display: none;"><%--동결건조--%>
|
||||
<img src="/mobile/brand/TZ/images/com_02.jpg" alt="">
|
||||
</p>
|
||||
<p class="img_introduces pd20 tgt" id="organic" style="display: none;"><%--유기농--%>
|
||||
<img src="/mobile/brand/TZ/images/com_03.jpg" alt="">
|
||||
</p>
|
||||
<p class="img_introduces pd20 tgt" id="ferment" style="display: none;"><%--효소발효--%>
|
||||
<img src="/mobile/brand/TZ/images/com_04.jpg" alt="">
|
||||
</p>
|
||||
<p class="img_introduces pd20 tgt" id="production" style="display: none;"> <%--더작 생산현장--%>
|
||||
<img src="/mobile/brand/TZ/images/factory1.jpg" alt="">
|
||||
</p>
|
||||
<div class="way_wrap tgt" id="way" style="display: none;"><%--오시는길--%>
|
||||
<dl class="way_address mt0">
|
||||
<dt>더작 본사주소</dt>
|
||||
<dd>서울특별시 금천구 가산디지털1로 189 (가산동) LG가산 디지털센터 10층</dd>
|
||||
</dl>
|
||||
|
||||
<!-- * 카카오맵 - 지도퍼가기 -->
|
||||
<!-- 1. 지도 노드 -->
|
||||
<div id="daumRoughmapContainer1733894235017" class="root_daum_roughmap root_daum_roughmap_landing"
|
||||
style="width: 100%; margin-top: 30px;"></div>
|
||||
|
||||
<!--
|
||||
2. 설치 스크립트
|
||||
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
|
||||
-->
|
||||
<script charset="UTF-8" class="daum_roughmap_loader_script"
|
||||
src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
|
||||
|
||||
<!-- 3. 실행 스크립트 -->
|
||||
<script charset="UTF-8">
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp": "1733894235017",
|
||||
"key": "2mh3w",
|
||||
"mapWidth": "300",
|
||||
"mapHeight": "200"
|
||||
}).render();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
$(window).on('message', function (event) {
|
||||
// 이벤트 객체의 원본을 가져옵니다.
|
||||
const originalEvent = event.originalEvent;
|
||||
|
||||
const receivedMessage = originalEvent.data;
|
||||
const dv = receivedMessage.content;
|
||||
$("#"+dv).css("display","block");
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
51
src/main/webapp/WEB-INF/views/html/pc/AF/brandStory.jsp
Normal file
51
src/main/webapp/WEB-INF/views/html/pc/AF/brandStory.jsp
Normal file
@@ -0,0 +1,51 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="/pc/brand/AF/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 1200px; margin: 150px auto 0 !important; padding: 0 20px;">
|
||||
<div class="topBg">
|
||||
<div class="conW">
|
||||
<div class="titleW">
|
||||
<h2>No Chemical Issue</h2>
|
||||
<p>데일리 안심 케어 전문 브랜드</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_wrap brand" id="brand01">
|
||||
<div class="con con1">
|
||||
<div class="titleW">
|
||||
<i class="stit">Brand Story</i>
|
||||
<h3>Stress Free, Safe your life</h3>
|
||||
</div>
|
||||
<div class="conT">
|
||||
<p>안전하고 깨끗해야 할 일상 속 생활용품들, 지금 안심하고 사용하고 계시나요?<br>ALL FREE는 이러한 질문에 대한 <span class="pointW">공감, 고민, 해결방안</span>을 찾기 위해 시작되었습니다.</p>
|
||||
<div class="conImg"><img src="/pc/brand/AF/images/brand_con1.png" alt="컨텐츠1" /></div>
|
||||
<p>누구나 손쉽게 사용하기에,<br>소중한 사람들이 함께 사용하는 제품들이라면 더욱더 안전하고 깨끗해야 할,<br><span class="strong">올프리의 모든 제품들은 소비자의 안전과 건강함을 먼저 생각합니다.</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con2" id="brand02">
|
||||
<div class="titleW">
|
||||
<i class="stit">Philosophy</i>
|
||||
<h3>소비자의 안전과 건강한 생활</h3>
|
||||
</div>
|
||||
<div class="conT">
|
||||
<div class="conImg"><img src="/pc/brand/AF/images/brand_con2.png" alt="컨텐츠2" /></div>
|
||||
<p class="strong">올프리의 겉모습은 복잡하지도 화려하지도 않습니다.</p>
|
||||
<p class="dep">오직 “소비자의 안전과 건강한 생활”을 위하는 가장 기본에 충실한 마음으로<br>엄격한 기준과 품질관리로만 만들어집니다.</p>
|
||||
<br>
|
||||
<p>자연을 이해하며, 사람과 함께 공존할 수 있는 자연 친화 방식의 가치 소비 지향!<br>올프리는 자연과 가장 가깝고도 친화적인 방법으로 환경까지 케어합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con3">
|
||||
<div class="titleW">
|
||||
<i class="stit">7 Promise</i>
|
||||
<h3>더 건강하고 가치 있는 삶을 살아가기 위한 약속입니다.</h3>
|
||||
</div>
|
||||
<div class="conImg"><img src="/pc/brand/AF/images/brand_con3.png" alt="컨텐츠3" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
src/main/webapp/WEB-INF/views/html/pc/AF/brandValue.jsp
Normal file
62
src/main/webapp/WEB-INF/views/html/pc/AF/brandValue.jsp
Normal file
@@ -0,0 +1,62 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/AF/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 1200px; margin: 150px auto 0 !important; padding: 0 20px;">
|
||||
<div class="topBg">
|
||||
<div class="conW">
|
||||
<div class="titleW">
|
||||
<h2>The Pure, All Premium Value</h2>
|
||||
<p>더하지 않아 안심! 건강한 프리미엄의 가치</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page_wrap safeCare" id="safe01">
|
||||
<p class="titW">소중한 사람을 위한 깐깐한 선택,<br>
|
||||
<span class="strong">연약하고 민감한 피부를 위한 고민과 해결방안</span><br>
|
||||
<span class="pointW">올프리가 전하는 일상의 노력, 지금 SAFE CARE를 만나보세요</span>
|
||||
</p>
|
||||
<div class="con con1">
|
||||
<div class="conImg">
|
||||
<div class="line"></div>
|
||||
<img src="/pc/brand/AF/images/safecare_con1.png" alt="컨텐츠1" />
|
||||
</div>
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">안심 케어 #1.</i>
|
||||
<h3>유해화학물질 불검출,<br>안전성 인증</h3>
|
||||
<p>형광증백제, 포름알데히드 불검출 인증은 물론<br>인공 색소 및 합성향료를 첨가하지 않은 제품으로<br>호흡기 질환 및 피부염 등을 유발하지 않습니다.<br>
|
||||
올프리의 모든 제품은 까다롭고<br>엄격한 품질관리 기준으로 만들어집니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con2">
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">건강 케어 #2.</i>
|
||||
<h3>먼지 날림 최소화<br>& 피부 저자극</h3>
|
||||
<p>섬유질이 길고 쉽게 부스러지 않아,<br>연약하고 민감한 여성.아이의 피부 사용에 적합하며,<br>순하고 깨끗하게 닦여집니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conImg">
|
||||
<img src="/pc/brand/AF/images/safecare_con2.png" alt="컨텐츠2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="con con3">
|
||||
<div class="conImg">
|
||||
<img src="/pc/brand/AF/images/safecare_con3.png" alt="컨텐츠1" />
|
||||
</div>
|
||||
<div class="txtW">
|
||||
<div class="txt">
|
||||
<i class="stit">신뢰 케어 #3.</i>
|
||||
<h3>친환경 제품의 착한 소비</h3>
|
||||
<p><span class="strong">사람, 환경, 건강한 내일을 위한 <span class="point">올프리만의 가치!</span></span><br>자연과 사람, 미래의 공존과 지속을 위해<br>올프리 제품의 모든 원재료들은 <br>가장 친화적인 방법으로 개발/생산됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
16
src/main/webapp/WEB-INF/views/html/pc/BD/brandStory.jsp
Normal file
16
src/main/webapp/WEB-INF/views/html/pc/BD/brandStory.jsp
Normal file
@@ -0,0 +1,16 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout_config">
|
||||
<div style="text-align: center;">
|
||||
<img src="/pc/brand/BD/images/bodydoctors_brand.jpg">
|
||||
</div>
|
||||
</div><!-- //newpage -->
|
||||
<style>
|
||||
.top_shopping {display:none;}
|
||||
.top_company {display:block !important;}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
252
src/main/webapp/WEB-INF/views/html/pc/CH/brandStory.jsp
Normal file
252
src/main/webapp/WEB-INF/views/html/pc/CH/brandStory.jsp
Normal file
@@ -0,0 +1,252 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link href="/pc/brand/CH/css/common.css" rel="stylesheet">
|
||||
<link href="/pc/brand/CH/css/chamdahan.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#layout_config {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div id="layout_config">
|
||||
<div id="layout_config_full">
|
||||
|
||||
<div class="catalog_nav relative mb60" style="margin-top: 60px;">
|
||||
<c:choose>
|
||||
<c:when test = "${empty dv}">
|
||||
<c:set var = "dv" value = "company"/>
|
||||
</c:when>
|
||||
<c:otherwise>
|
||||
<c:set var = "dv" value = "${dv}"/>
|
||||
</c:otherwise>
|
||||
</c:choose>
|
||||
<ul>
|
||||
<li <c:if test = "${dv eq 'company'}">class="on"</c:if> id ="company"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=company">참다한 소개</a></li><!-- 활성화 class="on" -->
|
||||
<li <c:if test = "${dv eq 'ceo'}">class="on"</c:if> id ="ceo"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=ceo">CEO인사</a></li>
|
||||
<li <c:if test = "${dv eq 'technology'}">class="on"</c:if> id ="technology"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=technology">참다한의 기술</a></li>
|
||||
<li <c:if test = "${dv eq 'history'}">class="on"</c:if> id ="history"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=history">회사연혁</a></li>
|
||||
<li <c:if test = "${dv eq 'map'}">class="on"</c:if> id ="map"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=map">조직도</a></li>
|
||||
<%--<li <c:if test = "${dv eq 'company'}">class="on"</c:if> id ="company"><a href="chamdahan_tab6.html">언론속의 참다한</a></li>--%>
|
||||
<li <c:if test = "${dv eq 'way'}">class="on"</c:if> id ="way"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=way">오시는길</a></li>
|
||||
<li <c:if test = "${dv eq 'script'}">class="on"</c:if> id ="script"><a href="/sopmal/main/selectiframeBrandStroyForm?dv=script">온체식참다한</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<%--참다한 소개--%>
|
||||
<div id = "companyDv" style="display:none;">
|
||||
<img src="/pc/brand/CH/images/img_introduces01.jpg" title=" 좋은 재료로 건강하게 만드는 옳은 홍삼, 참다한 -참다한은 귀한 홍삼의 영양을 가장 많이 담을 수 있는 ‘전체식 홍삼’ 기술을 바탕으로 탄생한 브랜드로써 홍삼을 가장 건강하게, 온전하게 섭취할 수 있는 새로운 방법을 제안하고 있습니다‘참된 마음으로 정성을 다한다’는 뜻의 참다한은 보다 많은 분들이 몸에 해로운 그 어떤 유해물질 없이 건강한 홍삼을 만날 수 있도록 늘 정성을 다하고 있습니다 " alt=" 좋은 재료로 건강하게 만드는 옳은 홍삼, 참다한 -참다한은 귀한 홍삼의 영양을 가장 많이 담을 수 있는 ‘전체식 홍삼’ 기술을 바탕으로 탄생한 브랜드로써 홍삼을 가장 건강하게, 온전하게 섭취할 수 있는 새로운 방법을 제안하고 있습니다‘참된 마음으로 정성을 다한다’는 뜻의 참다한은 보다 많은 분들이 몸에 해로운 그 어떤 유해물질 없이 건강한 홍삼을 만날 수 있도록 늘 정성을 다하고 있습니다 ">
|
||||
<div class="img_con introduces_bg" style="position: relative; width: 1652px; left: -226px; margin-bottom: -50px; overflow: hidden;">
|
||||
<img src="/pc/brand/CH/images/img_introduces01_2.png" alt="참다한 BI-식품 속에 조성된 자연 그대로의 참 영양을 모두 다해 고객에게 전달하는
|
||||
올바른 건강식품 기업으로써의 참다한의 뜻을 담았습니다. ,RED- 따뜻한 햇빛 속에 조성된 참 자연,BROWN-대 자연을 품으며 건강하게 숨 쉬는 땅,BLUE-청명한 대기와 바람 " style="position: relative; left: 50%; margin-left: -600px;">
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
function imgPosition() {
|
||||
var winW = $(window).width();
|
||||
var imgW = $('.img_con img').width();
|
||||
if (winW > 1200) {
|
||||
$('.img_con').css({
|
||||
'position': 'relative',
|
||||
'width': winW,
|
||||
'left': (1200 - winW) / 2,
|
||||
'margin-bottom': '-50px',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
$('.img_con img').css({
|
||||
'position': 'relative',
|
||||
'left': '50%',
|
||||
'margin-left': (imgW / 2) - imgW
|
||||
});
|
||||
} else {
|
||||
$('.img_con').css({'position': 'relative', 'width': 1200, 'left': 0, 'overflow': 'hidden'});
|
||||
$('.img_con img').css({
|
||||
'position': 'relative',
|
||||
'left': '50%',
|
||||
'margin-left': (imgW / 2) - imgW
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
imgPosition();
|
||||
|
||||
$(window).resize(function () {
|
||||
imgPosition()
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<%--ceo 인사--%>
|
||||
<div id = "ceoDv" style="display:none;">
|
||||
<div class="">
|
||||
<img src="/pc/brand/CH/images/img_shopinfo_introduct.jpg"
|
||||
alt="대한민국 홍삼의 숨겨진 진실… 참다한이 시작합니다. 하나만 여쭙겠습니다. 정확한 답을 아신다면 제 얘기에 귀를 기울이실 필요가 없습니다. 만약 모르신다면 제 얘기에 잠시만 귀 기울여 주셔야 합니다. 홍삼제품 사실 때 무엇을 기준으로 사야 하는지 아십니까? 브랜드라서, 가격이 저렴해서, 6년근이라서, 직거래라서… 다 틀리셨습니다. 누구나 먹는 홍삼. 가장 기본이 되는 ‘무엇을 보고 사야 하는지'를 모르는 분들이 대부분 입니다. 그런 분들은 저와 함께 잠시만 참다한에 머물다 가십시오. 대한민국의 홍삼시장이 왜 이렇게 정보의 불균형으로 흘러갈 수밖에 없는지, 왜 이렇게 소비자들을 눈멀게 만들어야 했는지 그 감춰진 진실… 참다한이 하나씩 밝히겠습니다. 저희를 믿지도 마십시오. 오직 상식의 기준에서 진실만을 보시고, 옳은 선택을 하시기 바랍니다. 왜 물에 달인 추출액이 아닌 통째로 갈아 넣은 분말액을 먹어야 하는지, 모든 진실이 참다한에 있습니다. 약속드립니다. 참다한은 신념을 지키는 기업이 되겠습니다. 고객 건강을 위해 참 정성을 다한 옳은 제품만 만들고, 옳은 길만 가겠습니다. ㈜지씨바이오 대표이사"
|
||||
style="width:100%;height:90%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%--참다한기술--%>
|
||||
<style>
|
||||
#layout_config {
|
||||
width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
div[class^="inner_tab_"] {display: none;}
|
||||
div[class^="inner_tab_"].view {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('.detail_tab3 > li').removeClass('active');
|
||||
$('.detail_tab3 > li.tab_1').addClass('active');
|
||||
$('div[class^="inner_tab_"]').removeClass('view');
|
||||
$('.inner_tab_1').addClass('view');
|
||||
|
||||
|
||||
$('.detail_tab3 > li').on('click', function () {
|
||||
var class_name = $(this)[0].className;
|
||||
$('.detail_tab3 > li').removeClass('active');
|
||||
$(this).closest("li").addClass('active');
|
||||
$('div[class^="inner_tab_"]').removeClass('view');
|
||||
$('.inner_' + class_name + '').addClass('view');
|
||||
});
|
||||
});
|
||||
const fn_change_image = (dv) => {
|
||||
$(".tech").hide();
|
||||
if(dv === '1'){
|
||||
$(".inner_tab_1").show();
|
||||
}else if (dv === '2'){
|
||||
$(".inner_tab_2").show();
|
||||
}else {
|
||||
$(".inner_tab_3").show();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div id = "technologyDv" style="display:none;">
|
||||
<ul class="detail_tab3">
|
||||
<li class="tab_1"><a onclick="fn_change_image('1');fn_change_img('tech_1');">참다한의 기술</a></li><!--//class="active" 활성화-->
|
||||
<li class="tab_2"><a onclick="fn_change_image('2');fn_change_img('tech_2');">첨단 생산설비</a></li>
|
||||
<li class="tab_3"><a onclick="fn_change_image('3');fn_change_img('tech_3');">3無4無의 진실</a></li>
|
||||
</ul>
|
||||
<div class="inner_tab_1 tech" style="text-align:center;">
|
||||
<img src="/pc/brand/CH/images/detail_inc(123).jpg" title="" alt="">
|
||||
</div>
|
||||
<div class="inner_tab_2 tech" style="text-align:center;">
|
||||
<img src="/pc/brand/CH/images/img_introduces02_2.jpg" alt="참다한 홍삼을 생산하는 첨단시설-참다한 홍삼 제품을 생산하는 공정은 크린에어샤워시스템, 선별실, 세척실, 증삼건조실, 공정관리실, 청량실, 액제조실, 분쇄실, 충전실,
|
||||
부자재보관실, 반제품보관실, 완제품보관실 등으로 전문화되어 나누어져 있으며, 무균상태로 설계되어 외부와의 공기를 차단시켜
|
||||
공장 천장의 *HEPA 항균필터를 통해서만 외부 공기가 유입되는 최첨단 위생시설을 갖추고 있습니다.*HEPA항균필터 : 공기로부터 미세한 입자를 제거하는 고성능 필터, 무균실의 공조기에 가용">
|
||||
</div>
|
||||
<div class="inner_tab_3 tech" style="text-align:center;">
|
||||
<img src="/pc/brand/CH/images/img_introduces02_3.jpg" title="" alt="">
|
||||
<!-- <a href="/goods/catalog?code=0003" target="_self"><img src="/pc/brand/CH/images/20million_hongkids.jpg" title="" alt=""></a>
|
||||
<a href="/goods/view?no=100" target="_self"><img src="/pc/brand/CH/images/istory_compound.jpg" title="" alt=""></a>
|
||||
<a href="/goods/view?no=101" target="_self"><img src="/pc/brand/CH/images/hongkids_compound_1.jpg" title="" alt=""></a>
|
||||
<a href="/goods/view?no=102" target="_self"><img src="/pc/brand/CH/images/hongkids_compound_2.jpg" title="" alt=""></a>
|
||||
<a href="/goods/view?no=103" target="_self"><img src="/pc/brand/CH/images/hongkids_compound_3.jpg" title="" alt=""></a> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%--회사연혁--%>
|
||||
<div class="history_img" id = "historyDv" style="display:none;">
|
||||
<img src="/pc/brand/CH/images/img_history08.jpg" title="2020" alt="2020" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history07.jpg" title="2019" alt="2019" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history06.jpg" title="2018" alt="2018" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history05.jpg" title="2017" alt="2017" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history04.jpg" title="2016" alt="2016" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history03.jpg" title="2015" alt="2015" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history02.jpg" title="2014" alt="2014" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history01.jpg" title="2013" alt="2013" style="margin:80px 0;">
|
||||
<img src="/pc/brand/CH/images/img_history_img.jpg" alt="">
|
||||
</div>
|
||||
|
||||
<%--조직도--%>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
function imgPosition() {
|
||||
var winW = $(window).width();
|
||||
var imgW = $('.img_con img').width();
|
||||
if(winW > 1200) {
|
||||
$('.img_con').css({'position':'relative','width':winW,'left':(1200 - winW) / 2,'margin-bottom':'-50px','overflow':'hidden'});
|
||||
$('.img_con img').css({'position':'relative','left':'50%','margin-left':(imgW / 2) - imgW});
|
||||
} else {
|
||||
$('.img_con').css({'position':'relative','width':1200,'left':0,'overflow':'hidden'});
|
||||
$('.img_con img').css({'position':'relative','left':'50%','margin-left':(imgW / 2) - imgW});
|
||||
}
|
||||
}
|
||||
|
||||
imgPosition();
|
||||
|
||||
$(window).resize(function() {
|
||||
imgPosition()
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div id = "mapDv" style="display:none;">
|
||||
<img src="/pc/brand/CH/images/img_organization.jpg" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<%--오시는길--%>
|
||||
<div id="wayDv" style="display: none;">
|
||||
<dl class="way_address">
|
||||
<dt>참다한 본사주소</dt>
|
||||
<dd>서울특별시 금천구 가산디지털1로 189 (가산동) LG가산 디지털센터 703-1호</dd>
|
||||
</dl>
|
||||
<div id="daumRoughmapContainer1475212340829" class="root_daum_roughmap root_daum_roughmap_landing"></div>
|
||||
|
||||
<dl class="way_address">
|
||||
<dt>참다한 영남사업부</dt>
|
||||
<dd>부산시 해운대구 센텀서로 30, (KNN타워) 1803호 Tel:051-664-7710</dd>
|
||||
</dl>
|
||||
<div id="daumRoughmapContainer1449717167086" class="root_daum_roughmap root_daum_roughmap_landing"></div>
|
||||
|
||||
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://spi.maps.daum.net/imap/map_js_init/roughmapLoader.js"></script>
|
||||
<script charset="UTF-8">
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp" : "1475212340829",
|
||||
"key" : "db7x",
|
||||
"mapWidth" : "1200",
|
||||
"mapHeight" : "450"
|
||||
}).render();
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp" : "1449717167086",
|
||||
"key" : "7bzw",
|
||||
"mapWidth" : "1200",
|
||||
"mapHeight" : "450"
|
||||
}).render();
|
||||
</script>
|
||||
</div>
|
||||
<%--온체식--%>
|
||||
<div style="text-align:center; display:none;" id = "scriptDv">
|
||||
<img src="/pc/brand/CH/images/img_introduces03.jpg" title="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/*높이 설정*/
|
||||
const fn_change_img = (dv) => {
|
||||
window.parent.postMessage(dv, "*");
|
||||
}
|
||||
|
||||
/*해당탭 show*/
|
||||
$(document).ready(function (){
|
||||
let dv = '<c:out value="${dv}"/>';
|
||||
if(dv == ''){
|
||||
dv = 'company';
|
||||
}
|
||||
const liTgt = '#li_'+dv;
|
||||
const tgt = '#'+dv;
|
||||
$(liTgt).addClass('on');
|
||||
$(tgt).css("display","block");
|
||||
$("#"+dv+"Dv").show();
|
||||
fn_change_img(dv);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
src/main/webapp/WEB-INF/views/html/pc/DL/brandStory.jsp
Normal file
59
src/main/webapp/WEB-INF/views/html/pc/DL/brandStory.jsp
Normal file
@@ -0,0 +1,59 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="/pc/brand/DL/css/common.css">
|
||||
<style>
|
||||
.brand_section {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.brand_section .brand_section_title {
|
||||
font-size: 27px;
|
||||
font-weight: 600;
|
||||
font-family: 'Noto Sans KR' !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.brand_section .brand_section_contents {
|
||||
max-width: 850px;
|
||||
padding-top: 40px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.brand_section .brand_section_contents img {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: 70px;"></div>
|
||||
<div id="layout_body" class="clearbox">
|
||||
<div class="clearbox">
|
||||
<div>
|
||||
<div style=";">
|
||||
<div class="brand_section">
|
||||
<div class="brand_section_title">Brand Philosophy & Promise</div>
|
||||
<div style="border-top:3px solid #545454"></div>
|
||||
<div class="brand_section_contents">
|
||||
<img src="/pc/brand/DL/images/brandimg.jpg" style="max-width:100%">
|
||||
</div>
|
||||
</div>
|
||||
<div class="brand_section">
|
||||
<div class="brand_section_title">Brand Story</div>
|
||||
<div style="border-top:3px solid #545454"></div>
|
||||
<div class="brand_section_contents" style="margin-bottom: 100px;">
|
||||
<div class="display_screen"
|
||||
style="position: relative; width: 100%; height: 0; padding-top: 56%;">
|
||||
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" width="560"
|
||||
height="315"
|
||||
src="https://youtube.com/embed/y5t5airCreE?showinfo=1&autoplay=1&mute=1&autohide=1&loop=1&rel=0&playlist=y5t5airCreE"
|
||||
frameborder="0" allowfullscreen=""
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
121
src/main/webapp/WEB-INF/views/html/pc/DT/brandStory.jsp
Normal file
121
src/main/webapp/WEB-INF/views/html/pc/DT/brandStory.jsp
Normal file
@@ -0,0 +1,121 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/brand/DT/js/wib-common.js'/>"></script>
|
||||
<script src="<c:url value='/pc/brand/DT/js/aos.js'/>"></script>
|
||||
<script src="<c:url value='/pc/brand/DT/js/wib-brand.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/brand/DT/css/common.css'/>">
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/brand/DT/css/wib-common.css'/>">
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/brand/DT/css/aos.css'/>">
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/brand/DT/css/wib-brand.css'/>">
|
||||
<script>
|
||||
$(document).ready(function (){
|
||||
AOS.init();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="brand-wrap active">
|
||||
<div class="mv" style="margin-top: 68px;">
|
||||
<p>건강한 일상의 Life Balance를 찾다.</p>
|
||||
</div>
|
||||
<div class="brandCon01" style="height: auto;">
|
||||
<img src="/pc/brand/DT/images/bc01-img01.jpg" alt="Dr.Lean Story">
|
||||
<div class="w1300">
|
||||
<div class="txt-box">
|
||||
<strong>01</strong>
|
||||
<p>Dr.Lean Story</p>
|
||||
<span><b>닥터린</b>은 균형 잡힌 일상의 본질을 추구합니다.</span>
|
||||
<em>Life Balance가 무너지게 되면<br>우리 몸은 체중이 증가하거나, 몸이 아프거나 하는 이상 신호를 보내죠.<br>그런 날 생각나는 잠깐의 선택이 아닌, 당신의 일상에
|
||||
깃들기를 바랍니다.</em>
|
||||
<em>그렇기 때문에,<br>닥터린은 자연을 생각하는 성분 그리고 품질 좋은 성분만을 까다롭게 따져보고 만들었습니다.</em>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brandCon02" style="margin-left:158px;">
|
||||
<div class="w1300">
|
||||
<div class="inner">
|
||||
<div class="left aos-init" data-aos="fade-right" data-aos-offset="-200">
|
||||
<img src="/pc/brand/DT/images/bc02-img01.jpg" alt="닥터린">
|
||||
</div>
|
||||
<div class="right aos-init" data-aos="fade-left" data-aos-offset="-200" data-aos-delay="100">
|
||||
<div class="txt-box">
|
||||
<strong>02</strong>
|
||||
<p>Dr.Lean Value</p>
|
||||
<span>모든 제품에 <b>닥터린</b>이 추구하는 가치를 담았습니다.</span>
|
||||
<i># 자연유래성분</i>
|
||||
<em>건강식품은 원료부터 달라야 합니다.<br>원료의 원산지부터 가공방법, 지표 성분의<br>함량까지 무엇 하나 놓치지 않았습니다.<br>특히 자연 유래 성분으로 나 뿐만
|
||||
아니라<br>환경까지 생각 했습니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="left aos-init" data-aos="fade-right" data-aos-offset="-200">
|
||||
<div class="txt-box">
|
||||
<i># NO 화학 첨가물</i>
|
||||
<em>생산성 향상이나 제품안정화를 위해 첨가하는<br>화학첨가물인 HPMC, 이산화규소, 스테아린<br>산마그네슘의 사용을 지양합니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right aos-init" data-aos="fade-left" data-aos-offset="-200" data-aos-delay="100">
|
||||
<img src="/pc/brand/DT/images/bc02-img02.jpg" alt="닥터린">
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="left aos-init" data-aos="fade-right" data-aos-offset="-200">
|
||||
<img src="/pc/brand/DT/images/bc02-img03.jpg" alt="닥터린">
|
||||
</div>
|
||||
<div class="right aos-init" data-aos="fade-left" data-aos-delay="100" data-aos-offset="-200">
|
||||
<div class="txt-box">
|
||||
<strong>03</strong>
|
||||
<p>Dr.Lean Global Network</p>
|
||||
<span>더 좋은 원료를 위해, 더 넓은 세상을 봅니다.</span>
|
||||
<em>더 좋은 원료를 위해, 더 넓은 세상을 봅니다.<br>좋은 건강식품은 좋은 원료에서 시작합니다.<br>닥터린의 까다롭고 엄격한 기준에 부합하는 원료를 찾기<br>위해
|
||||
수년간 구축해온 글로벌 소싱 네트워크를 기반으로<br>제대로된 원료를 소싱하기 위해 노력합니다.</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brandCon03">
|
||||
<div class="bg aos-init" data-aos="RightFull" data-aos-offset="-300"></div>
|
||||
<div class="w1300">
|
||||
<div class="txt-box aos-init" data-aos="fade-right" data-aos-offset="-300">
|
||||
<strong>04</strong>
|
||||
<p>Dr.Lean Quality</p>
|
||||
<span>건강한 일상의 중요함을 알기에,<br>품질 만큼은 고집스럽게 지키겠습니다. </span>
|
||||
<em>기술력이 품질을 좌우합니다.<br>품질에 대한 원칙을 엄격하게 지켜나가며,<br> 최첨단 설비를 갖춘 시설에서 최고 품질의 제품을 생산합니다. <br>특히 ISO,GMP 등 권위
|
||||
있는 기관에서 공식적으로 품질<br>인증을 받은 곳에서 생산하고 있습니다.<br> 더욱 안전한 제품으로 여러분의 건강한 일상을 지키겠습니다.</em>
|
||||
<img src="/pc/brand/DT/images/bc03-icon.png" alt="식품의약품안전처">
|
||||
</div>
|
||||
</div>
|
||||
<img src="/pc/brand/DT/images/bc03-img01.jpg" data-aos="fade-left" data-aos-offset="-300"
|
||||
class="img01 aos-init">
|
||||
<img src="/pc/brand/DT/images/bc03-img02.jpg" data-aos="fade-left" data-aos-offset="-300"
|
||||
class="img02 aos-init">
|
||||
<img src="/pc/brand/DT/images/bc03-img03.jpg" data-aos="fade-left" data-aos-offset="-300"
|
||||
class="img03 aos-init">
|
||||
<!--<img src="/pc/brand/DT/images/bc03-img04.jpg" data-aos="fade-left" data-aos-offset="-300" class="img04" />-->
|
||||
</div>
|
||||
|
||||
<div class="brandCon04 aos-init" data-aos="RightFull" data-aos-offset="-300">
|
||||
<div class="w1300">
|
||||
<strong data-aos="fadeInUp" data-aos-offset="-300" class="aos-init">05</strong>
|
||||
<p data-aos="fadeInUp" data-aos-offset="-300" data-aos-delay="100" class="aos-init">Dr.Lean
|
||||
Responsibility</p>
|
||||
<span data-aos="fadeInUp" data-aos-offset="-300" data-aos-delay="150" class="aos-init">함께 지켜 나가야 할 지구를 위해 책임을 다합니다.</span>
|
||||
<img src="/pc/brand/DT/images/bc04-icon.png" alt="FSC & SOY INK" data-aos="fadeInUp"
|
||||
data-aos-offset="-300" data-aos-delay="200" class="aos-init">
|
||||
<em data-aos="fadeInUp" data-aos-offset="-300" data-aos-delay="250" class="aos-init">닥터린의 패키지는<br>지속 가능한 산림
|
||||
경영을 실천하기 위한 FSC인증을 받은 종이를 사용하고,<br>친환경 소재인 콩기름 잉크로 인쇄하였습니다.<br>더 나은 지구 생활을 위해 닥터린의 작지만 확실한 노력은 멈추지 않습니다.</em>
|
||||
<em data-aos="fadeInUp" data-aos-offset="-300" data-aos-delay="300" style="font-size:18px;"
|
||||
class="aos-init">(현재는 일부 제품에 적용 되어 있으나, 추후 전 제품에 확대하여 적용할 예정입니다.)</em>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="layout_footer" style="width:100%; height:240px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
76
src/main/webapp/WEB-INF/views/html/pc/JM/brandStory.jsp
Normal file
76
src/main/webapp/WEB-INF/views/html/pc/JM/brandStory.jsp
Normal file
@@ -0,0 +1,76 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/JM/css/css.css">
|
||||
<link type="text/css" rel="stylesheet" href="/pc/brand/JM/css/brand_story.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero visible">
|
||||
<div class="background-image"></div>
|
||||
<div class="hero-content">
|
||||
<h3>일상과 다르지 않은 그날이 되기 위해</h3>
|
||||
<h1>몸속 변화의 이해, 안심 맞춤 케어의 시작</h1>
|
||||
<h4>유해화학성분없이 안전한 오가닉 플랜</h4>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="destinations" class="destinations visible">
|
||||
<div class="text_wrap" style="font-size:15px;">
|
||||
<p>내몸에 찾아오는 <strong>변화의 시간</strong>때로는 <strong>고통</strong>스럽고, <strong>예민</strong>해지기까지...
|
||||
<br>말할 수 없이 홀로 견뎌야 하는 순간들을 <strong>혼자가 아닌 함께</strong>하는</p><br>
|
||||
<h1>자신감있고 당당한 여성들의 활기찬 삶을<br><strong>저스트마이데이가 응원합니다.</strong></h1>
|
||||
</div>
|
||||
<div class="background-image"></div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about visible">
|
||||
<div class="about_text_wrap">
|
||||
<h1 class="title">ORGANIC PLAN</h1>
|
||||
<div class="about_img"><img src="/pc/brand/JM/images/03_Brandstory_03_icon.png"></div>
|
||||
<p>자연에서부터 시작된 깨끗하고 안전한 성분만을 토대로<br>‘저스트마이데이’의 모든 제품은 탄생됩니다.</p>
|
||||
<h3>여자의 몸 속 건강을 위한 프리미엄의 가치</h3>
|
||||
<div class="logo"><img src="/pc/brand/JM/images/03_Brandstory_03_logo.png"></div>
|
||||
</div>
|
||||
<div class="background-image">
|
||||
<div class="snowflakes">
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
<div class="snowflake"><img src="/pc/brand/JM/images/cotton.png"></div>
|
||||
</div>
|
||||
<div class="leaf_wrap">
|
||||
<div class="leaf_2" style="background-image: url(/pc/brand/JM/images/leaf_1.png); background-position:center;"></div>
|
||||
<div class="leaf_1" style="background-image: url(/pc/brand/JM/images/leaf_2.png); background-position:center;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonials" class="testimonials visible">
|
||||
<h1>SAFE PRODUCTION SYSTEM</h1>
|
||||
<h3>자연의 깨끗하고 순수한 목화 솜으로 부터 내 몸에 닿는 순간까지
|
||||
<br>US FDA 인증 생산시설에서 철저한 품질관리 시스템을 통해 안전하게 생산됩니다.</h3>
|
||||
<div class="testimonials_img">
|
||||
<img src="/pc/brand/JM/images/04_brandstory_01_back.png">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var leaf_2 = document.querySelector(".leaf_2");
|
||||
var leaf_1 = document.querySelector(".leaf_1");
|
||||
|
||||
function setTranslate(xPos, yPos, el) {
|
||||
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
212
src/main/webapp/WEB-INF/views/html/pc/JM/brandValue.jsp
Normal file
212
src/main/webapp/WEB-INF/views/html/pc/JM/brandValue.jsp
Normal file
@@ -0,0 +1,212 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/JM/css/css.css">
|
||||
<link type="text/css" rel="stylesheet" href="/pc/brand/JM/css/worganic.css" />
|
||||
</head>
|
||||
<body>
|
||||
<section class="area_1 visible" id="area_1">
|
||||
<div class="background-image"></div>
|
||||
<div class="cotton_text_wrap">
|
||||
<h3 style="font-size:70px; color:#000;">01</h3>
|
||||
<h1>저스트마이데이가 선택한 <br><strong>100% 유기농 순면 성분</strong>의 이유있는 자신감</h1>
|
||||
<h2><strong>Why</strong> did <strong>our products</strong> choose to produce<br><strong>by 100% pure organic cotton fibers only?</strong></h2>
|
||||
<div class="character_img"><img src="/pc/brand/JM/images/cotton_icon.png"></div>
|
||||
</div>
|
||||
<div class="text_box"><img src="/pc/brand/JM/images/area_0_textbox.png"></div>
|
||||
</section>
|
||||
|
||||
<section id="area_2" class="area_2 visible">
|
||||
<div class="core_text_wrap">
|
||||
<h3 style="font-size:70px; color:#000; text-align:center;">02</h3>
|
||||
<h1><strong>유기농 순면커버와 흡수체</strong>의<br> 특별한 자부심</h1>
|
||||
<h2><strong>What</strong> is<br><strong>the 100% pure organic cover & absorbent core?</strong></h2>
|
||||
<div class="area_2_character_img"><img src="/pc/brand/JM/images/worganic_02.png"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="area_3" class="area_3">
|
||||
<div class="bubble_text_wrap">
|
||||
<h3 style="font-size:70px; color:#000;">03</h3>
|
||||
<h1><strong>프리미엄급 퀄리티의</strong><br>순면 소재로만 만들어집니다</h1>
|
||||
<h2>100% Pure Cotton Fibers<strong>of Premium Quality </strong></h2>
|
||||
<div class="character_img"><img src="/pc/brand/JM/images/character_img.png"></div>
|
||||
<div class="product_img"><img src="/pc/brand/JM/images/product_img.png"></div>
|
||||
</div>
|
||||
<div class="background-image">
|
||||
<div class="bubbles">
|
||||
<div class="bubble" style="background-image:url(/pc/brand/JM/images/cotton.png); background-position: center; background-size: contain; background-repeat:no-repeat;"></div>
|
||||
<div class="bubble" style="background-image:url(/pc/brand/JM/images/cotton.png); background-position: center; background-size: contain; background-repeat:no-repeat;"></div>
|
||||
<!-- (Additional bubbles truncated for brevity) -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="text_box"><img src="/pc/brand/JM/images/area_1_textbox.png"></div>
|
||||
</section>
|
||||
|
||||
<section class="area_4" id="area_4">
|
||||
<div class="gear_text_wrap">
|
||||
<h3 style="font-size:70px; color:#000;">04</h3>
|
||||
<h1><strong>US FDA 생산시설 설비 인증</strong>을 갖춘<br><strong> 투명하고 신뢰도 높은 제조과정</strong></h1>
|
||||
<h2><strong>Which</strong> one is <strong>the best quality factors</strong><br><strong>of production processing?</strong></h2>
|
||||
</div>
|
||||
<div class="production_img"><img src="/pc/brand/JM/images/production_img.png"></div>
|
||||
|
||||
<div class="gears">
|
||||
<img src="/pc/brand/JM/images/gear_big.png" alt="gear" class="big">
|
||||
<img src="/pc/brand/JM/images/gear_small.png" alt="gear" class="small">
|
||||
</div>
|
||||
<div class="gears_2">
|
||||
<img src="/pc/brand/JM/images/gear_small.png" alt="gear" class="small">
|
||||
<img src="/pc/brand/JM/images/gear_big.png" alt="gear" class="big">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="area_5" id="area_5">
|
||||
<div class="recommend_background">
|
||||
<div class="recommend_img"><img src="/pc/brand/JM/images/recommend.png"></div>
|
||||
<div class="recommend_text_wrap">
|
||||
<h1>저스트마이데이 생리대,<br><strong>이런 분들께 추천합니다.</strong></h1>
|
||||
<h2><strong>Who</strong> did say that was<br><strong>‘Yes, recommend the organic pads.'?</strong></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend_txt"><img src="/pc/brand/JM/images/recommend_txt.png"></div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Smooth navigation scroll
|
||||
$(".navLink").on('click', function(event){
|
||||
if(this.hash !== "") {
|
||||
event.preventDefault();
|
||||
var hash = this.hash;
|
||||
$('html, body').animate({
|
||||
scrollTop: $(hash).offset().top
|
||||
}, 800, function(){
|
||||
window.location.hash = hash;
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Section fade in during scroll
|
||||
$(document).on("scroll", function() {
|
||||
var pageTop = $(document).scrollTop();
|
||||
var pageBottom = pageTop + $(window).height();
|
||||
var tags = $("section");
|
||||
|
||||
// Loop through sections
|
||||
var tag0 = $(tags).eq(0);
|
||||
var tag1 = $(tags).eq(1);
|
||||
var tag2 = $(tags).eq(2);
|
||||
var tag3 = $(tags).eq(3);
|
||||
var tag4 = $(tags).eq(4);
|
||||
if (tag0.height() + tag1.height() + tag2.height() + tag3.height() < pageTop){
|
||||
tag4.addClass("visible");
|
||||
} else if (tag0.height() + tag1.height() + tag2.height() < pageTop) {
|
||||
tag3.addClass("visible");
|
||||
} else if (tag0.height() + tag1.height() < pageTop) {
|
||||
tag2.addClass("visible");
|
||||
} else if (tag0.height() < pageTop) {
|
||||
tag1.addClass("visible");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var cotton_2 = document.querySelector(".cotton_2");
|
||||
var cotton_1 = document.querySelector(".cotton_1");
|
||||
var cotton_3 = document.querySelector(".cotton_3");
|
||||
var emblem = document.querySelector(".emblem");
|
||||
var bubblecotton_2 = document.querySelector(".bubblecotton_2");
|
||||
var bubblecotton_1 = document.querySelector(".bubblecotton_1");
|
||||
var bubblecotton_3 = document.querySelector(".bubblecotton_3");
|
||||
|
||||
function setTranslate(xPos, yPos, el) {
|
||||
if (el) {
|
||||
el.style.transform = "translate(" + xPos + ", " + yPos + "px)";
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", scrollLoop, false);
|
||||
|
||||
var xScrollPosition;
|
||||
var yScrollPosition;
|
||||
|
||||
function scrollLoop() {
|
||||
xScrollPosition = window.scrollX;
|
||||
yScrollPosition = window.scrollY;
|
||||
|
||||
setTranslate(0, yScrollPosition * -.2, cotton_2);
|
||||
setTranslate(0, yScrollPosition * .5, cotton_1);
|
||||
setTranslate(0, yScrollPosition * -.7, cotton_3);
|
||||
setTranslate(0, yScrollPosition * .2, emblem);
|
||||
setTranslate(0, yScrollPosition * -.3, bubblecotton_2);
|
||||
setTranslate(0, yScrollPosition * .5, bubblecotton_1);
|
||||
setTranslate(0, yScrollPosition * -.7, bubblecotton_3);
|
||||
|
||||
requestAnimationFrame(scrollLoop);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
function initMoving(target, position, topLimit, btmLimit) {
|
||||
if (!target) return false;
|
||||
|
||||
var obj = target;
|
||||
var initTop = position;
|
||||
var bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight;
|
||||
var top = initTop;
|
||||
|
||||
obj.style.position = 'absolute';
|
||||
|
||||
if (typeof(window.pageYOffset) == 'number') {
|
||||
var getTop = function() {
|
||||
return window.pageYOffset;
|
||||
}
|
||||
} else if (typeof(document.documentElement.scrollTop) == 'number') {
|
||||
var getTop = function() {
|
||||
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
|
||||
}
|
||||
} else {
|
||||
var getTop = function() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (self.innerHeight) {
|
||||
var getHeight = function() {
|
||||
return self.innerHeight;
|
||||
}
|
||||
} else if (document.documentElement.clientHeight) {
|
||||
var getHeight = function() {
|
||||
return document.documentElement.clientHeight;
|
||||
}
|
||||
} else {
|
||||
var getHeight = function() {
|
||||
return 500;
|
||||
}
|
||||
}
|
||||
|
||||
function move() {
|
||||
var pos = (initTop > 0) ? getTop() + initTop : getTop() + getHeight() + initTop;
|
||||
if (pos > bottomLimit) pos = bottomLimit;
|
||||
if (pos < topLimit) pos = topLimit;
|
||||
|
||||
var interval = top - pos;
|
||||
top = top - interval / 3;
|
||||
obj.style.top = top + 'px';
|
||||
|
||||
window.setTimeout(function () {
|
||||
move();
|
||||
}, 25);
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
move();
|
||||
});
|
||||
}
|
||||
//]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1036
src/main/webapp/WEB-INF/views/html/pc/NB/brandStory.jsp
Normal file
1036
src/main/webapp/WEB-INF/views/html/pc/NB/brandStory.jsp
Normal file
File diff suppressed because it is too large
Load Diff
423
src/main/webapp/WEB-INF/views/html/pc/NB/ingredient.jsp
Normal file
423
src/main/webapp/WEB-INF/views/html/pc/NB/ingredient.jsp
Normal file
@@ -0,0 +1,423 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/chamdahan.css">
|
||||
<style>
|
||||
div[id^="content_"] {display: none;}
|
||||
div[id^="content_"].view {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('.tab_menu_list > li').removeClass('on');
|
||||
$('.tab_menu_list > li.content_1').addClass('on');
|
||||
$('div[id^="content_"]').removeClass('view');
|
||||
$('#content_1').addClass('view');
|
||||
|
||||
|
||||
$('.tab_menu_list > ul > li').on('click',function(){
|
||||
console.log($(this));
|
||||
var class_name = $(this)[0].className;
|
||||
|
||||
$('.sub_cont').removeClass('ingredient1 ingredient2 ingredient3');
|
||||
$('.sub_cont').addClass('ingredient'+class_name.split('_')[1]);
|
||||
|
||||
|
||||
$('.tab_menu_list > ul > li').removeClass('on');
|
||||
$('.tab_menu_list > ul > li.'+class_name+'').addClass('on');
|
||||
$('div[id^="content_"]').removeClass('view');
|
||||
$('#'+class_name+'').addClass('view');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="sub_cont ingredient1">
|
||||
<div class="sub_hd_tit tit_ingredient">
|
||||
<p>성분 불만제로</p>
|
||||
|
||||
<div class="hd_btn_list">
|
||||
<span class="btn_left"><a href="/sopmal/main/selectNbPromiseHtml">네가지 약속</a></span>
|
||||
</div><!-- .hd_btn_list -->
|
||||
</div><!-- .sub_hd_tit -->
|
||||
|
||||
<div class="tab_menu_list">
|
||||
<ul>
|
||||
<li class="content_1 on"><a href="NaturalBottle_3.html#content_1">자담유 성분들</a></li>
|
||||
<li class="content_2"><a href="NaturalBottle_3.html#content_2">화장품 속 화학성분들</a></li>
|
||||
<li class="content_3"><a href="NaturalBottle_3.html#content_3">언론기사</a></li>
|
||||
</ul>
|
||||
</div><!-- .tab_menu_list -->
|
||||
|
||||
<div id="content_1">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>자담유는</em> EWG 그린등급 성분사용<em>을 지향합니다.</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1">
|
||||
<div class="inwrap">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-why_sect1_thumb.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<h4><strong>EWG’s Skin Deep</strong> 스킨딥 성분 등급제</h4>
|
||||
<p class="txt">EWG는 다양한 연구자료를 참고로 하여 성분에 대한 정보를 연구하고 분석해 <br>1에서 10까지의 유해등급을 매겨 정보를 제공하고 있습니다.</p>
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="n1"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico1.jpg" alt=""></em><strong>Low Hazard</strong>안전등급</li>
|
||||
<li class="n2"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico2.jpg" alt=""></em><strong>Moderate Hazard</strong>주의요망</li>
|
||||
<li class="n3"><em><img src="/pc/brand/NB/images/zero-why_sect1_ico3.jpg" alt=""></em><strong>High Hazard</strong>위험</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
|
||||
<div class="section sect2">
|
||||
<div class="inwrap">
|
||||
<h3><em>그래서 자담유의 </em>성분<em>은 안전합니다.</em></h3>
|
||||
<div class="cont">
|
||||
<h4><span>실험내용</span> : 식물 생명유지 테스트(20일간)</h4>
|
||||
<p class="sect2_img"><img src="/pc/brand/NB/images/zero-why_sect2_1_img.jpg" alt=""></p>
|
||||
<p class="txt">※ 자담유의 「수분담은」 라인 - 수분토너, 「탄력담은」 라인 - 탄력토너로 실험했습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .section -->
|
||||
</div><!-- .article -->
|
||||
</div><!-- #content -->
|
||||
|
||||
<div id="content_2">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>매일 쓰는 화장품에 이렇게 많은 </em>화학성분<em>이?</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1 fact">
|
||||
<div class="inwrap">
|
||||
<ul class="ul_lst">
|
||||
<li class="fl mn1">
|
||||
<dl>
|
||||
<dt>샴푸</dt>
|
||||
<dd class="ff_lato">SLS/ SLES, CMIT/ MIT</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn2">
|
||||
<dl>
|
||||
<dt>클렌저</dt>
|
||||
<dd class="ff_lato">CMIT/ MIT, 이소프로필알코올,<br> 트리클로산</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn3">
|
||||
<dl>
|
||||
<dt><span>(스킨/로션/ 에센스/ 크림)</span>기초화장품</dt>
|
||||
<dd class="ff_lato">파라벤, 미네랄오일, PEG, TEA,<br> 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn4">
|
||||
<dl>
|
||||
<dt>마스크팩</dt>
|
||||
<dd class="ff_lato">페녹시에탄올, PEG, TEA, 파라벤</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn5">
|
||||
<dl>
|
||||
<dt>썬크림</dt>
|
||||
<dd class="ff_lato">옥시벤존, 아보벤존, PEG</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn6">
|
||||
<dl>
|
||||
<dt>마스카라</dt>
|
||||
<dd class="ff_lato">TEA, 이미다졸리디닐우레아, BHA, BHT</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn7">
|
||||
<dl>
|
||||
<dt>치약/가글</dt>
|
||||
<dd class="ff_lato">파라벤, 트리클로산, 합성착색료</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn8">
|
||||
<dl>
|
||||
<dt>파운데이션</dt>
|
||||
<dd class="ff_lato">소르빈산, BHA, BHT, 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn9">
|
||||
<dl>
|
||||
<dt>립스틱</dt>
|
||||
<dd class="ff_lato">합성착색료, BHT, BHA</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn10">
|
||||
<dl>
|
||||
<dt>미스트</dt>
|
||||
<dd class="ff_lato">TEA, 트리이소프로판올아민,<br> 페녹시에탄올</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fl mn11">
|
||||
<dl>
|
||||
<dt>향수</dt>
|
||||
<dd class="ff_lato">에탄올, 인공향료</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li class="fr mn12">
|
||||
<dl>
|
||||
<dt>손세정제</dt>
|
||||
<dd class="ff_lato">이소프로필메틸페놀, 트리클로산</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
|
||||
<div class="section sect2">
|
||||
<div class="inwrap">
|
||||
<h3><em>화장품 속 화학성분들</em> 꼭 확인하세요.</h3>
|
||||
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb1.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>1</strong>파라벤</h4>
|
||||
<div class="desc">
|
||||
<p>파라벤은 가장 많이 알려져 있고 가장 많이 사용되는 <br>대표적인 <strong>화학 방부제</strong> 중 하나입니다.</p>
|
||||
<p>'메칠파라벤, 부틸파라벤, 에칠파라벤, 이소부틸파라벤, 이소프로필파라벤, <br>프로필파라벤' 등이 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb2.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>2</strong>페녹시에탄올</h4>
|
||||
<div class="desc">
|
||||
<p>파라벤의 유해성이 급부상한 이후 대체품으로 사용되는 <strong>화학 방부제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb3.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>3</strong>트리클로산</h4>
|
||||
<div class="desc">
|
||||
<p>비누, 세제뿐 아니라 치약, 화장품 등에 일반적으로 자주 사용되는 <br><strong>화학 살균제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb4.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>4</strong>BHT</h4>
|
||||
<div class="desc">
|
||||
<p><strong>산화방지제</strong>로 쓰이는 BHT는 화장품 뿐 아니라 <br>식품에도 사용되는 화학성분입니다.</p>
|
||||
<p>'비에이치티, 부틸하이드록시톨루엔, 디부틸하이드록시톨루엔, <br>부틸레이티드하이드록시톨루엔' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb5.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>5</strong>BHA</h4>
|
||||
<div class="desc">
|
||||
<p><strong>산화방지제</strong>로 사용되는 화학성분입니다. <br>'비에이치에이, 부틸하이드록시아니솔' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb6.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>6</strong>소르빈산</h4>
|
||||
<div class="desc">
|
||||
<p>미생물의 생육을 억제하기 위해 햄, 소시지 등 <br>가공식품에 사용되기도 하는 합성보존료, 즉 <strong>화학 방부제</strong>의 일종입니다. </p>
|
||||
<p>'소르빅애씨드' 라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb7.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>7</strong>이소프로필메틸페놀</h4>
|
||||
<div class="desc">
|
||||
<p>화장수, 유액, 썬크림에 사용되는 <strong>화학 방부제</strong> 성분으로, <br>'이소프로필크레졸, 0-사이멘-5-올' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb8.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>8</strong>이미다졸리디닐우레아/ 디아졸리디닐우레아/ <br>디엠디엠하단토인/ 엠디엠하이단토인</h4>
|
||||
<div class="desc">
|
||||
<p><strong>화학 방부제</strong> 중 파라벤 다음으로 많이 사용되는 성분이지만 <br>이 성분 자체만으로는 기능이 약해 다른 보존제와 혼합해서 사용합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb9.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>9</strong>CMIT/ MIT</h4>
|
||||
<div class="desc">
|
||||
<p>일반적으로 두 가지 성분을 혼합해서 사용하곤 하며, <br>박테리아, 효모, 잔균류의 성장을 억제하며 항균 작용을 하는 <strong>화학 살균제</strong>입니다. </p>
|
||||
<p>각 '메칠클로로이소치아졸리논', '메칠이소치아졸리논' 이라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb10.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>10</strong>SLS/ SLES</h4>
|
||||
<div class="desc">
|
||||
<p>대부분의 샴푸, 세제 뿐만 아니라 치약에까지 다양한 물질에 사용되는 <br>대표적인 <strong>합성 계면활성제</strong>입니다.</p>
|
||||
<p>각 '소듐라우릴설페이트, 소듐라우릴황산염', '소듐라우레스설페이트, <br>소듐라우레스황산염' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb11.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>11</strong>PEG</h4>
|
||||
<div class="desc">
|
||||
<p>샴푸, 세제 등에 사용되는 <strong>합성 계면활성제</strong> 중 하나로 <br>'피이지, 폴리에틸렌글라이콜' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb12.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>12</strong>TEA</h4>
|
||||
<div class="desc">
|
||||
<p><strong>합성 계면활성제ㆍ유화제</strong>로, <br>'트리에탄올아민' 이라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb13.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>13</strong>합성착색료</h4>
|
||||
<div class="desc">
|
||||
<p>일반적으로 청색 x호, 황색 x호, 적색 x호식으로 표시되는 성분으로 <br>화장품의 효능을 높이기 위해 넣은 것이 아니라 <br>눈으로 보는 아름다움을 위해 첨가하는 <strong>화학 착색제</strong>입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb14.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>14</strong>인공향료</h4>
|
||||
<div class="desc">
|
||||
<p>향을 은은하게 오랫동안 보존시키는 <strong>합성 착향제</strong>입니다. <br>인공향료의 종류는 200개가 넘으며, <br>주로 프탈레이트, 벤젠, 메탄올 등의 성분으로 구성되어 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb15.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>15</strong>이소프로필알코올</h4>
|
||||
<div class="desc">
|
||||
<p>프로필 알코올, 프로페놀, 이소프로페놀로 불리며, <br><strong>기포방지제, 착향제, 용제, 점도감소제</strong>로 쓰이는 화학성분입니다.</p>
|
||||
<p>헤어린스, 바디스크럽, 핸드로션, 면도로션, 향수뿐 아니라 <br>구강세척제, 애프터쉐이브 등까지 등 여러 제품군에서 쉽게 볼 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb16.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>16</strong>티몰</h4>
|
||||
<div class="desc">
|
||||
<p>멘톨의 합성원료이자 <br><strong>변성제, 착향제</strong>로 사용되는 화학성분입니다. <br>독특한 향을 내며 화장품에서는 헤어 제품에 주로 사용됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb17.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>17</strong>옥시벤존</h4>
|
||||
<div class="desc">
|
||||
<p><strong>자외선차단제</strong>성분으로 <br>립스틱, 색조화장품, 자외선차단제에 많이 쓰이는 화학성분입니다. <br>'벤조페논-3' 라고도 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb18.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>18</strong>아보벤존</h4>
|
||||
<div class="desc">
|
||||
<p>태양광의 스펙트럼을 흡수하는 성질 때문에 <br><strong>자외선 차단제</strong>에 많이 쓰이는 화학성분입니다.</p>
|
||||
<p>'부틸메톡시디벤조일메탄, 파르솔1789' 등으로 표기됩니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb19.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>19</strong>트리이소프로판올아민</h4>
|
||||
<div class="desc">
|
||||
<p><strong>부식방지제, pH 조절제</strong>로 주로 화장수나 향수에 사용되는 화학성분입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/zero-fact_sect2_thumb20.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>20</strong>미네랄오일</h4>
|
||||
<div class="desc">
|
||||
<p>석유, 석탄 등 광물성 원료에서 만들어지는 오일로, <br>원유를 정제하는 과정에서 생성되는 부산물로 <strong>화학 방부제, 연화제</strong> 성분입니다. <br>주성분은 알케인(alkane)과 파라핀(paraffin)으로, <br>상대적으로 값이 싼 물질이며 매우 대량으로 생산됩니다. </p>
|
||||
<p>용제, 착향제, 피부보호제, 피부컨디셔닝제(수분차단제), <br>피부컨디셔닝제(유연제), 헤어컨디셔닝제에 주로 쓰입니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- .lst_cell -->
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
</div><!-- .article -->
|
||||
</div><!-- #content -->
|
||||
|
||||
<div id="content_3">
|
||||
<div class="pg_title">
|
||||
<h3 class="title"><em>언론에 보도된</em> 성분기사<em>를 확인하세요.</em></h3>
|
||||
</div>
|
||||
</div><!-- #content -->
|
||||
|
||||
|
||||
</div>
|
||||
87
src/main/webapp/WEB-INF/views/html/pc/NB/promise.jsp
Normal file
87
src/main/webapp/WEB-INF/views/html/pc/NB/promise.jsp
Normal file
@@ -0,0 +1,87 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/NB/css/chamdahan.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="sub_cont">
|
||||
<div class="brand_cont promise">
|
||||
<div class="sub_hd_tit tit_promise">
|
||||
<p>자담유의 네가지 약속</p>
|
||||
|
||||
<div class="hd_btn_list">
|
||||
<span class="btn_left"><a href="/sopmal/main/selectiframeBrandStroyForm">브랜드 이야기</a></span>
|
||||
<span class="btn_right"><a href="/sopmal/main/selectNbIngredientHtml">성분 불만제로</a></span>
|
||||
</div><!-- .hd_btn_list -->
|
||||
</div><!-- .sub_hd_tit -->
|
||||
|
||||
<div id="content">
|
||||
<div class="pg_title">
|
||||
<h3 class="title">자담유의 <em>네가지 약속</em></h3>
|
||||
</div><!-- .pg_title -->
|
||||
|
||||
<div class="article">
|
||||
<div class="section sect1 pb_0">
|
||||
<div class="inwrap">
|
||||
<div class="lst_cell">
|
||||
<ul class="ty_ul">
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/brand-promise_sect1_thumb1.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>하나</strong>오직 사람만을 생각하겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>내 아이를 위해 만든다는 엄마의 마음으로 <br>건강한 화장품을 만들겠습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/brand-promise_sect1_thumb2.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>둘</strong>빼고, 빼고 또 빼겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>유해성이 알려진 화학성분, 그리고 아직 알려지지 않은 화학성분 <br>이 모두를 단 하나라도 더 빼기 위해 끊임없이 노력하겠습니다. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/brand-promise_sect1_thumb3.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>셋</strong>바디버든 줄이기에 앞장서겠습니다.</h4>
|
||||
<div class="desc">
|
||||
<p>수없이 많은 화학물질에 노출된 채 살아가는 모두를 위해 <br>바디버든 줄이는 일에 앞장서서 달려가겠습니다.</p>
|
||||
<p class="note">※ 바디버든 : 주어진 시간 동안 신체에 축적된 화학물질의 양</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="frbx">
|
||||
<div class="thumb"><img src="/pc/brand/NB/images/brand-promise_sect1_thumb4.jpg" alt=""></div>
|
||||
<div class="info">
|
||||
<div class="vabox">
|
||||
<h4><strong>넷</strong>생명을 귀하게 여기고 상생을 지향합니다.</h4>
|
||||
<div class="desc">
|
||||
<p>사람들의 필요와 욕구를 채우기 위한 동물실험을 반대합니다. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- .lst_cell -->
|
||||
</div><!-- .inwrap -->
|
||||
</div><!-- .section -->
|
||||
</div><!-- .article -->
|
||||
</div><!-- #content -->
|
||||
</div><!-- .brand_cont -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
44
src/main/webapp/WEB-INF/views/html/pc/PL/brandStory.jsp
Normal file
44
src/main/webapp/WEB-INF/views/html/pc/PL/brandStory.jsp
Normal file
@@ -0,0 +1,44 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/PL/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="introduce_wrap">
|
||||
<div class="h3_wrap">
|
||||
<h3 id = 'sj'>왜 프로스랩인가?</h3>
|
||||
</div>
|
||||
<div class="catalog_nav">
|
||||
<ul>
|
||||
<li class="on"><a onclick="fn_change_img(this,'01')" style="cursor: pointer;">왜 프로스랩인가?</a></li>
|
||||
<li><a onclick="fn_change_img(this,'02')" style="cursor: pointer;">프로스랩의 혼합균주</a></li>
|
||||
<li><a onclick="fn_change_img(this,'03')" style="cursor: pointer;">프로스랩만의 코팅기술</a></li>
|
||||
<li><a onclick="fn_change_img(this,'04')" style="cursor: pointer;">6無</a></li>
|
||||
<li><a onclick="fn_change_img(this,'05')" style="cursor: pointer;">신바이오틱스</a></li>
|
||||
<li><a onclick="fn_change_img(this,'06')" style="cursor: pointer;">냉장배송시스템</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<img src="/pc/brand/PL/images/01_01_proslab.jpg" style="display:block; margin:0 auto;" id="01" class="image">
|
||||
<img src="/pc/brand/PL/images/01_02_premium.jpg" style="display:none; margin:0 auto;" id="02" class="image">
|
||||
<img src="/pc/brand/PL/images/01_03_innova.jpg" style="display:none; margin:0 auto;" id="03" class="image">
|
||||
<img src="/pc/brand/PL/images/01_04_Synthetic.jpg" style="display:none; margin:0 auto;" id="04" class="image">
|
||||
<img src="/pc/brand/PL/images/01_05_synbiotics.jpg" style="display:none; margin:0 auto;" id="05" class="image">
|
||||
<img src="/pc/brand/PL/images/01_06_coldsystem.jpg" style="display:none; margin:0 auto;" id="06" class="image">
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const fn_change_img = (target,id) => {
|
||||
$("#sj").text($(target).text());
|
||||
$("li").not(target).removeClass("on");
|
||||
$(target).closest("li").addClass("on");
|
||||
$(".image*").css("display","none");
|
||||
$("#"+id).css("display","block");
|
||||
|
||||
window.parent.postMessage(id, "*");
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
79
src/main/webapp/WEB-INF/views/html/pc/TZ/brandStory.jsp
Normal file
79
src/main/webapp/WEB-INF/views/html/pc/TZ/brandStory.jsp
Normal file
@@ -0,0 +1,79 @@
|
||||
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
|
||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||
<html>
|
||||
<head>
|
||||
<script src="<c:url value='/pc/vendor/jquery-3.7.1.min.js'/>"></script>
|
||||
<link rel="stylesheet" type="text/css" href="<c:url value='/pc/vendor/jquery-ui/jquery-ui.min.css'/>"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="/pc/brand/TZ/css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="introduce_wrap">
|
||||
<div class="h3_wrap" style="margin-top: 60px;">
|
||||
<h3 id="sj">더작 스토리</h3>
|
||||
</div>
|
||||
<div class="catalog_nav">
|
||||
<ul>
|
||||
<li <c:if test = "${dv eq 'company'}">class="on"</c:if>id="li_company"><a onclick="fn_change_img(this,'company')" style="cursor: pointer;">더작 스토리</a></li>
|
||||
<li <c:if test = "${dv eq 'ferment'}">class="on"</c:if>id="li_ferment"><a onclick="fn_change_img(this,'ferment')" style="cursor: pointer;">효소발효</a></li>
|
||||
<li <c:if test = "${dv eq 'freeze'}">class="on"</c:if>id="li_freeze"><a onclick="fn_change_img(this,'freeze')" style="cursor: pointer;">동결건조</a></li>
|
||||
<li <c:if test = "${dv eq 'organic'}">class="on"</c:if>id="li_organic"><a onclick="fn_change_img(this,'organic')" style="cursor: pointer;">유기농</a></li>
|
||||
<li <c:if test = "${dv eq 'production'}">class="on"</c:if>id="li_production"><a onclick="fn_change_img(this,'production')" style="cursor: pointer;">더작 생산현장</a></li>
|
||||
<li <c:if test = "${dv eq 'way'}">class="on"</c:if>id="li_way"><a onclick="fn_change_img(this,'way')" style="cursor: pointer;">오시는길</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<img class="image" src="/pc/brand/TZ/images/img_introduces01.jpg" style="display:none; margin:0 auto;" id="company">
|
||||
<img class="image" src="/pc/brand/TZ/images/img_introduces02.jpg" style="display:none; margin:0 auto;" id="ferment">
|
||||
<img class="image" src="/pc/brand/TZ/images/img_introduces03.jpg" style="display:none; margin:0 auto;" id="freeze">
|
||||
<img class="image" src="/pc/brand/TZ/images/img_introduces04.jpg" style="display:none; margin:0 auto;" id="organic">
|
||||
<img class="image" src="/pc/brand/TZ/images/factory1.jpg" style="display:none; margin:0 auto;" id="production">
|
||||
<div class="way_wrap image" id="way" style=""><%--오시는길--%>
|
||||
<dl class="way_address">
|
||||
<dt>더작 본사주소</dt>
|
||||
<dd>서울특별시 금천구 가산디지털1로 189 (가산동) LG가산 디지털센터 10층</dd>
|
||||
</dl>
|
||||
<!-- * 카카오맵 - 지도퍼가기 -->
|
||||
<!-- 1. 지도 노드 -->
|
||||
<div id="daumRoughmapContainer1733894235017" class="root_daum_roughmap root_daum_roughmap_landing"></div>
|
||||
<!--
|
||||
2. 설치 스크립트
|
||||
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
|
||||
-->
|
||||
<script charset="UTF-8" class="daum_roughmap_loader_script"
|
||||
src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
|
||||
</div>
|
||||
<!-- 3. 실행 스크립트 -->
|
||||
<script charset="UTF-8">
|
||||
new daum.roughmap.Lander({
|
||||
"timestamp" : "1733882954686",
|
||||
"key" : "2mgyv",
|
||||
"mapWidth" : "1200",
|
||||
"mapHeight" : "450"
|
||||
}).render();
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
const fn_change_img = (target, id) => {
|
||||
$("#sj").text($(target).text());
|
||||
$("li").not(target).removeClass("on");
|
||||
$(target).closest("li").addClass("on");
|
||||
$(".image*").css("display", "none");
|
||||
$("#" + id).css("display", "block");
|
||||
|
||||
window.parent.postMessage(id, "*");
|
||||
}
|
||||
$(document).ready(function (){
|
||||
let dv = '<c:out value="${dv}"/>';
|
||||
if(dv == ''){
|
||||
dv = 'company';
|
||||
}
|
||||
console.log(dv);
|
||||
const liTgt = '#li_'+dv;
|
||||
const tgt = '#'+dv;
|
||||
$(liTgt).addClass('on');
|
||||
$(tgt).css("display","block");
|
||||
$("#sj").text($(liTgt).text());
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user