2023/09/05 키워드 작업 퍼블리싱 수정

src/main/webapp/WEB-INF/jsp/web/main/mainPage.jsp

@@ -1237,7 +1237,7 @@ function fn_click_banner_add_stat(bannerMenuCode){
 						<a href="/web/mjon/msgdata/excel/selectMsgExcelDataView.do" title="페이지 이동">
 							<ul class="slide_cont table_cell">
 								<li class="cont1_title">대량문자·단체문자 전송</li>
-								<li class="cont1_ex">별도의 프로그램 설치 없이<br>PC에서 바로 전송 가능</li>
+								<li class="cont1_ex">별도의 프로그램 설치 없이<br>컴퓨터로 단체·대량문자 발송가능</li>
 								<li class="more">자세히보기</li>
 							</ul>
 						</a>
@@ -1368,7 +1368,9 @@ function fn_click_banner_add_stat(bannerMenuCode){
 
 	<div class="main_cont2">
 		<div class="inner">
-			<p class="tit_text">이런 문자 어때요?</p>
+			<!-- <p class="tit_text">이런 문자 어때요?</p> -->
+			<p class="tit_text">이런 단체문자, 대량문자 샘플 어때요?</p>
+			<p class="sub_text">단체문자, 대량문자, 경조문자, 부고문자, 광고문자, 홍보문자, 조문문자, 결혼문자, 예약문자, 사진문자, 그림문자, SMS, LMS, MMS, 병원문자, 위로문자, 응원문자, 행사문자, 기념일문자, 웹문자, 인터넷문자, 문자사이트, 답례문자 등 다양한 샘플 무료 제공</p>
 			<div class="tabs">
 				<!-- Default tab_depth1 - 전체 / tab_depth2 - 인기그림문자 / tab_depth3 - BEST -->
 				<!-- <div class="tab_depth1 tDep2_mType">
@@ -1469,6 +1471,42 @@ function fn_click_banner_add_stat(bannerMenuCode){
 			</div>
 		</div>
 	</div>
+</div>
+<div class="main_cont5 keyword_wrap">
+	<div class="inner">
+		<p class="tit_text">이런 키워드는 어때요?</p>
+		<ul class="link_box">
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">경조문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">부고문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">홍보문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">결혼문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">출산문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">장례문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">추석문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">설문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">명절문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">모임문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">안부문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">연말연시문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">감사문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">행사문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">격려문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">생일문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">조의문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">크리스마스문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">그림문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">컴퓨터로문자보내기</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">인터넷문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">문자사이트</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">단체문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">대량문자</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">문자보내기</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">대량문자사이트</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">단체문자발송</a></li>
+			<li><a href="/web/mjon/msgdata/selectMsgDataView.do">웹문자</a></li>
+		</ul>
+	</div>
+	
 </div>
 
     <div class="main_cont4 adv_wrap">

src/main/webapp/WEB-INF/jsp/web/msgdata/MainPhotoListAjax.jsp

@@ -31,6 +31,7 @@ $(document).ready(function(){
 								</div>
 								<div class="area_img_text">
 									<c:out value="${photoList.letterSj}"/>
+									<p class="sub_text">(인터넷문자사이트 샘플)</p>
 								</div>
 							</div>
 						</div>

src/main/webapp/publish/css/common.css

@@ -34,7 +34,7 @@ caption, .label {position: absolute;width: 1px;height: 1px;margin: -1px;border:
 /* header body */
 .header .header_body {background-color: #fff;height: 75px;border-bottom: 1px solid #dcdee0; }
 .header .header_body .logo {position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
-.header .header_body .gnbWrap {width: 100%;margin: 0 auto;text-align: center;font-size: 19px;color: #222;font-weight: 500;}
+.header .header_body .gnbWrap {width: 100%;margin: 0 auto;text-align: center;font-size: 18px;color: #222;font-weight: 500;}
 /* header body _ gnb */
 .header .header_body .gnbWrap li {display: inline-block;margin: 0 20px;}
 .header .header_body .gnbWrap li:first-child{margin: 0 22px 0 -32px;}

src/main/webapp/publish/css/main.css

@@ -68,7 +68,8 @@
 /* content2 문자샘플 */
 .main_cont2{margin: -170px auto 0 auto; padding: 235px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;}
 .main_cont2 .inner{min-width: 0;}
-.main_cont2 .inner>p.tit_text{font-size: 34px; font-weight: 700;} 
+.main_cont2 .inner>p.tit_text{font-size: 34px; font-weight: 700;}
+.main_cont2 .inner>p.sub_text{font-size: 14px; font-weight: 400; margin: 20px auto 0 auto; width: 60%; color: #777; line-height: 1.4;} 
 /* 탭 */
 .main_cont2 .tabs{text-align: center;position: relative;margin-top: 30px;}
 .main_cont2 .tab_depth1{position: absolute; display: flex;height: 33px; color: #555; font-size: 16px; border: 1px solid #bcbdc1; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: visible; margin-top: 9px;  background-color: #ecedef;}
@@ -105,7 +106,7 @@
 /* 포토문자 */
 .tab_con.msg_photo_wrap{overflow:hidden;margin: 0 auto;}
 .msg_photo .swiper-slide{padding: 0 10px; box-sizing: border-box;cursor:pointer;}
-.msg_photo .swiper-slide .slide_area{width: calc(100% - 10px) !important; background-color: #f5f5f5; position: relative;height: 415px; border: 5px solid #f5f5f5; border-radius: 16px;box-shadow: 0 0 15px rgba(0,0,0,0.15); margin-bottom: 53px; margin-top: 13px;}
+.msg_photo .swiper-slide .slide_area{width: calc(100% - 10px) !important; background-color: #f5f5f5; position: relative;height: 420px; border: 5px solid #f5f5f5; border-radius: 16px;box-shadow: 0 0 15px rgba(0,0,0,0.15); margin-bottom: 53px; margin-top: 13px;}
 .msg_photo .swiper-slide .slide_area:hover::after{position: absolute; content: " "; width: calc(100% + 10px); height: 5px; background-color: #002c9a; left: -5px; bottom: -14%;}
 .msg_photo .swiper-slide .slide_area .mask{display:block;position: absolute; width: calc(100% + 10px); height: calc(100% + 10px);background-color: rgba(43, 48, 71,0);left: -5px;top: -5px; border-radius: 16px; transition: background-color 0.2s ease-in-out;}
 .msg_photo .swiper-slide .slide_area .btn_more{display: none;}
@@ -115,6 +116,7 @@
 .msg_photo .area_img{display:flex;height:365px; border-radius: 16px 16px 0 0; overflow: hidden;align-items:center;}
 .msg_photo .area_img img{width: 100%; height: auto;}
 .msg_photo .area_img_text{font-size: 17px;padding: 12px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.msg_photo .area_img_text .sub_text{display: block; font-size: 14px; color: #777; margin: 5px auto;}
 .msg_photo_wrap .swiper-button-prev {margin:0;background-image:url(/publish/images/main/btn_prev.png);background-size:12px 21px;}
 .msg_photo_wrap .swiper-button-next {margin:0;background-image:url(/publish/images/main/btn_next.png);background-size:12px 21px;}
 /* 단문문자&장문문자 */
@@ -204,6 +206,14 @@
 
 /*요금안내 top 배너 시작*/
 .price_top_banner{position: fixed; right: 4%; top: 160px; z-index: 20;}
+.keyword_wrap .inner{border-radius: 20px 5px 20px 5px; background-color: #f5f5f5; padding: 50px 0 0 0;}
+.keyword_wrap .inner>p.tit_text{font-size: 34px; font-weight: 700; text-align: center;}
+.keyword_wrap .link_box{display: flex; width: 100%; padding: 30px; box-sizing: border-box; flex-wrap: wrap; align-items: center; margin: 0 0 80px 0;}
+.keyword_wrap .link_box li{margin: 0 20px 13px 0;}
+.keyword_wrap .link_box a{position: relative; height: 45px; padding: 7px 15px 7px 53px; border: 1px solid #222; border-radius: 5px; font-family: 'GmarketSansMedium'; font-size: 18px; line-height: 33.5px; color: #222; background-color: #fff; box-sizing: border-box;}
+.keyword_wrap .link_box a:hover{box-shadow: 3px 3px 5px rgba(0,0,0,0.3);}
+.keyword_wrap .link_box a::after{position: absolute; content: "#"; width: 30px; height: 30px; border-radius: 100%; background-color: #fbc72b; font-family: 'GmarketSansMedium'; color: #222; text-align: center; line-height: 34px; left: 13px; top: 50%; transform: translateY(-50%);}
+
 
 /* media queries */
 @media screen and (max-width: 1800px){