chominsoo4245 / mjon_git star
Forked from hylee / mjon_git
ITN_디자인팀 2024-01-23
2024/01/23 문자온 모바일용 홍보페이지 퍼블리싱 추가
@7b48ed544f4a140a57addeeecfda75b5c606f8b2
4225ebc
7b48ed5
src/main/webapp/publish/publish_m/css/style.css
--- src/main/webapp/publish/publish_m/css/style.css
+++ src/main/webapp/publish/publish_m/css/style.css
@@ -52,12 +52,27 @@
 
 footer ul li:last-child{margin: 0 auto;}
 
 footer .iten{padding: 22px 0 40px 0; font-size: 26px; font-weight: 300; opacity: 40%;}
 
 
+/*intro_03 내용 수정*/
 
+.visual .banner_con ul{padding: 50px 20px;}
 
+.visual .banner_con ul li{width:calc((100% - 15px)/2)}
 
+.visual .banner_con ul .wrap{border: none;}
 
+.visual .banner_con ul .wrap .inner_text{border-radius: 8px; font-weight: 700; padding: 15px 7px; line-height: 1.1; box-shadow: 0 0 20px rgba(0,0,0,0.3 );} 
+.visual .banner_con ul .wrap .inner_text span{font-size: 20px;}
 
+.con .add_wrap .text .inner_sub{font-size: 30px; font-weight: 300;}
 
+
 
 /*미디어쿼리_640x*/
 
 @media screen and (max-width:640px){
 
     .visual{background-image: url(/publish/publish_m/img/main_bg.png);}
 
 }
 
 
-/*미디어쿼리_500x*/
 
+/*미디어쿼리_585px*/
 
+@media screen and (max-width:585px){
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul .wrap .inner_text{font-size: 18px;}
 
+    .visual .banner_con ul .wrap .inner_text span{font-size: 14px;}
 
+}
 
+
 
+/*미디어쿼리_500px*/
 
 @media screen and (max-width:500px){
 
     /*header*/
 
     header .inner{border-radius: 0 0 20px 0; padding: 3px 20px;}
@@ -91,11 +106,29 @@
 
     footer .title p{margin: 0 0 0 10px;}
 
     footer ul li{width: 210px; margin: 0 auto 8px auto; border-radius: 8px; font-size: 22px; padding: 8px 0 5px 0;}
 
     footer .iten{padding: 12px 0 20px 0; font-size: 13px;}
 
+
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul .wrap{border: none;}
 
+    .visual .banner_con ul .wrap .inner_text{font-size: 18px; border-radius: 8px; font-weight: 700; font-size: 18px; padding: 15px 7px 13px 7px; line-height: 1.1; box-shadow: 0 0 20px rgba(0,0,0,0.3 );} 
+    .visual .banner_con ul .wrap .inner_text span{font-size: 14px;}
 
+    .con .add_wrap .text .inner_sub{font-size: 15px;}
 
 }
 
 
-/*미디어쿼리_460pxx*/
 
+/*미디어쿼리_460px*/
 
 @media screen and (max-width:460px){
 
     .visual{background-image: url(/publish//publish_m/img/main_bg_small_01.png);}
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul .wrap .inner_text{font-size: 16px;}
 
+}
 
+
 
+/*미디어쿼리_383px*/
 
+@media screen and (max-width:383px){
 
+    .visual .banner_con ul .wrap .second_te{padding: 15px 6px 13px 6px;} 
+}
 
+
 
+/*미디어쿼리_382px*/
 
+@media screen and (max-width:382px){
 
+    .visual .banner_con ul .wrap .second_te{padding: 15px 7px 13px 7px;}
 
 }
 
 
 /*미디어쿼리_360x*/
@@ -107,10 +140,19 @@
 
 @media screen and (max-width:340px){
 
     .visual .price ul .wrap .title{font-size: 13px;}
 
     .visual .price ul{padding: 0 15px;}
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul{padding: 40px 15px;}
 
 }
 
 
 /*미디어쿼리_310x*/
 
 @media screen and (max-width:310px){
 
     .visual .price ul .wrap .title{font-size: 12px;}
 
     .visual .price ul{padding: 0 9px;}
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul{padding: 40px 15px;}
 
+}
 
+/*미디어쿼리_310x*/
 
+@media screen and (max-width:300px){
 
+    /*intro_03 내용 수정*/
 
+    .visual .banner_con ul .wrap .inner_text{font-size: 15px;}
 
 }
(No newline at end of file)
 
7b48ed5
src/main/webapp/publish/publish_m/munjaon_intro_03.html (added)
+++ src/main/webapp/publish/publish_m/munjaon_intro_03.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>

+<html lang="ko">

+<head>

+    <meta charset="UTF-8">

+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>프리미엄 문자 발송 서비스 문자온</title>

+	<meta property="og:title" content="프리미엄 문자 발송 서비스 문자온">

+	<meta property="og:image" content="https://www.munjaon.co.kr/publish/publish_m/img/preview_logo.png">

+

+    <link rel="apple-touch-icon" sizes="57x57" href="/publish/images/favicon/apple-icon-57x57.png">

+	<link rel="apple-touch-icon" sizes="60x60" href="/publish/images/favicon/apple-icon-60x60.png">

+	<link rel="apple-touch-icon" sizes="72x72" href="/publish/images/favicon/apple-icon-72x72.png">

+	<link rel="apple-touch-icon" sizes="76x76" href="/publish/images/favicon/apple-icon-76x76.png">

+	<link rel="apple-touch-icon" sizes="114x114" href="/publish/images/favicon/apple-icon-114x114.png">

+	<link rel="apple-touch-icon" sizes="120x120" href="/publish/images/favicon/apple-icon-120x120.png">

+	<link rel="apple-touch-icon" sizes="144x144" href="/publish/images/favicon/apple-icon-144x144.png">

+	<link rel="apple-touch-icon" sizes="152x152" href="/publish/images/favicon/apple-icon-152x152.png">

+	<link rel="apple-touch-icon" sizes="180x180" href="/publish/images/favicon/apple-icon-180x180.png">

+	<link rel="icon" type="image/png" sizes="192x192" href="/publish/images/favicon/android-icon-192x192.png">

+	<link rel="icon" type="image/png" sizes="32x32" href="/publish/images/favicon/favicon-32x32.png">

+	<link rel="icon" type="image/png" sizes="96x96" href="/publish/images/favicon/favicon-96x96.png">

+	<link rel="icon" type="image/png" sizes="16x16" href="/publish/images/favicon/favicon-16x16.png">

+	<link rel="manifest" href="/publish/images/favicon/manifest.json">

+

+    <link rel="stylesheet" href="/publish/publish_m/css/reset.css">

+    <link rel="stylesheet" href="/publish/publish_m/css/style.css">

+</head>

+

+<body>

+	<div class="con_wrap">

+		<header>

+			<div class="inner">

+			  <a href="https://www.munjaon.co.kr">

+				<h1><img src="/publish/publish_m/img/header_logo.png" alt="문자온 로고"></h1>

+				<p>munjaon.co.kr</p>

+			  </a>

+			</div>

+		</header>

+		<div class="visual">

+			<div class="inner">

+				<h2><span>프리미엄</span>&nbsp;문자<br>발송 서비스</h2>

+				<div class="button">

+					<a href="https://www.munjaon.co.kr">

+						<p>문자온 바로가기&nbsp;<span>(클릭)</span></p>

+					</a>

+				</div>

+				<div class="price banner_con">

+					<ul>

+						<li>

+							<div class="wrap">

+								<p class="inner_text">최저가 요금<span>(후불제 가능)</span></p>

+							</div>

+						</li>

+						<li>

+							<div class="wrap">

+								<p class="inner_text second_te">편리한 선거문자 시스템</p>

+							</div>

+						</li>

+					</ul>

+				</div>

+			</div>

+		</div>

+		<section>

+			<div class="con">

+				<div class="title">

+					<p class="num">1</p>

+					<p>특장점</p>

+				</div>

+				<div class="text_wrap add_wrap">

+                    <div class="text">

+						<p class="te">편리한 20건 선거문자 발송</p>

+                        <p class="inner_sub">(자동분류, 전체선택 가능)</p>

+					</div>

+                    <div class="text">

+						<p class="te">업계 최저가 요금</p>

+                        <p class="inner_sub">(현 요금보다 저렴하게 제공)</p>

+					</div>

+					<div class="text">

+						<p class="te">단문<span class="inner_sub">(SMS)</span>, 장문<span class="inner_sub">(LMS)</span>, 그림문자<span class="inner_sub">(MMS)</span>, 카카오 알림톡, 팩스 발송 기능 제공</p>

+					</div>

+					<div class="text">

+						<p class="te">최신 트렌드 반영 서비스 제공</p>

+						<div class="text_sub">

+							<p>- 주소록 입력 대행(무료)</p>

+							<p>- 예약발송 기능 제공(분 단위)</p>

+							<p>- 문자메시지 지도‧약도 자동 첨부 가능</p>

+							<p>- 그림문자 주문제작 서비스 제공</p>

+							<p>- 다양한 결제수단 제공(신용카드, 휴대폰 결제, 전용계좌, 즉시이체, 간편결제 등)</p>

+							<p>- 무제한 발송량 제공</p>

+							<p>- 특정 공통문구(이름, 일시, 비용 등) 일괄 변경 기능 제공</p>

+						</div>

+					</div>

+					<div class="text">

+						<p class="te">기업‧단체‧공공기관 B2B 전용라인 제공</p>

+					</div>

+				</div>

+			</div>

+		</section>

+		<section>

+			<div class="con">

+				<div class="title">

+					<p class="num">2</p>

+					<p>이용고객</p>

+				</div>

+				<div class="text_wrap add_wrap">

+					<div class="text">

+						<p class="te">개인<span class="inner_sub">(사업자)</span></p>

+						<div class="text_sub">

+							<p>- 동호회, 동문회, 향우회, 병원, 부동산, 음식점, 마트, 대리점, 숙박업, 전문직 사무실, 소셜커머스 사업자, 교육시설(학원, 학교, 유치원, 어린이집), 스포츠시설(골프장, 피트니스) 등</p>

+						</div>

+					</div>

+					<div class="text">

+						<p class="te">기업‧협회‧단체</p>

+						<div class="text_sub">

+							<p>- 기업(대‧중‧소기업), 협회, 조합, 비영리단체, 종교단체(교회, 사찰), 은행, 카드사, 쇼핑몰, 택배사, 보험사, 리서치사 등</p>

+						</div>

+					</div>

+					<div class="text">

+						<p class="te">공공</p>

+						<div class="text_sub">

+							<p>- 정부, 지방자치단체, 국회, 지방의회, 법원, 공공기관, 공직유관단체, 도서관, 미술관, 전시관, 공연시설, 영화관 등</p>

+						</div>

+					</div>

+				</div>

+			</div>

+		</section>

+		<footer>

+			<div class="title">

+				<img src="/publish/publish_m/img/tel_icon.png" alt="고객센터 아이콘">

+				<p>고객센터</p>

+			</div>

+			<ul>

+				<li>

+					<a href="tel:010-8432-9333">010-8432-9333</a>

+				</li>

+				<li>

+					<a href="tel:010-2290-4789">010-2290-4789</a>

+				</li>

+			</ul>

+			<p class="iten">주식회사 아이티앤</p>

+		</footer>

+	</div>

+

+</body>

+</html>(No newline at end of file)
Add a comment
List