반응형 적용

src/main/resources/static/css/about.css

@@ -37,10 +37,6 @@
     text-decoration: none;
 }
 
-/*h1, h2, h3, h4, h5, h6 {
-    font-family: "Playfair Display", Georgia, "Times New Roman", serif!*rtl:Amiri, Georgia, "Times New Roman", serif*!;
-}*/
-
 .display-4 {
     font-size: 2.5rem;
 }

src/main/resources/static/css/contact-us.css

@@ -98,3 +98,13 @@ body {
     border-color: transparent;
     box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
+
+/*
+@media (max-width: 390px) {
+    .container {
+        padding: 15px; !* 패딩 줄이기 *!
+    }
+    #nt_content {
+        margin-bottom: 100px; !* 마진 조정 *!
+    }
+}*/

src/main/resources/static/css/index.css

@@ -144,4 +144,4 @@ body {
     height: 100vh;
     background-size: cover;
     background-position: center;
-}
+}

src/main/resources/templates/html/about.html

@@ -15,7 +15,7 @@
     <link href="/css/about.css" rel="stylesheet">
 </head>
 <body>
-<header th:include="html/common/header" id="header"></header>
+<header th:include="html/common/header" id="header" data-bs-theme="light"></header>
 
 <main>
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
@@ -23,7 +23,6 @@
             <div class="carousel-item active">
                 <svg aria-hidden="true" class="bd-placeholder-img" focusable="false" height="100%"
                      preserveAspectRatio="xMidYMid slice" width="100%" xmlns="http://www.w3.org/2000/svg">
-
                     <rect fill="#777" height="100%" width="100%"/>
                 </svg>
 
@@ -127,5 +126,7 @@
 <hr class="featurette-divider">
 <footer class="footer" th:include="html/common/footer"></footer>
 </body>
+<script src="/js/bootstrap.bundle.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
 <script src="/js/about/scroll.js"></script>
 </html>

src/main/resources/templates/html/business-inner/airplane.html

@@ -14,7 +14,7 @@
         <p>(주)국제종합물류는 항시 신속하고 정확한 물류서비스를 위하여 24/7 대응체계를 갖추고 있으며, 전세계 80여 자체 지사와 860여사의 협력 파트너를 통하여 고객만족을 실현하고 있습니다.</p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/plane_component.jpg">
+        <img alt="" src="/image/business/plane_component.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">
@@ -30,7 +30,7 @@
             완벽하게 실행합니다.</p>
     </div>
     <div class="col-md-6">
-        <img alt="" src="/image/business/door-to-door.jpg">
+        <img alt="" src="/image/business/door-to-door.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">
@@ -43,7 +43,7 @@
             있는 서비스로 2002년 5월 6일 중국광주(특급기차) -> 제남(화물차) -> 청도 (해운) -> 한국인천 5일 운송 노선이 최초로 개설되어 오늘에 이르고 있습니다.</p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/muti-trak-sujeong.jpg">
+        <img alt="" src="/image/business/muti-trak-sujeong.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">

src/main/resources/templates/html/business-inner/consult.html

@@ -17,7 +17,7 @@
         </p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/it-service.jpg">
+        <img alt="" src="/image/business/it-service.jpg" class="img-fluid">
     </div>
 </div>
 

src/main/resources/templates/html/business-inner/ecommerce.html

@@ -14,7 +14,7 @@
         <p>전문화된 인력, 전세계 물류요충지마다 설치된 직영지사 그리고 협력파트너들과 함께 Pick up 부터 통관, 보관, 포장, 배송에 이르기까지 모든 업무를 원스톱으로 시항하고 있습니다</p>
     </div>
     <div class="col-md-7 order-md-1">
-        <img alt="" src="/image/business/ecommerce.jpg">
+        <img alt="" src="/image/business/ecommerce.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">

src/main/resources/templates/html/business-inner/ship.html

@@ -15,7 +15,7 @@
         <p>*소량의 LCL화물부터 산업설비, 건축자재, 화학제품, 전자전기 제품등 다양하고 특수한 운송환경이 요구되는 제품까지 화물과 운송조건 등에 따라 포장, 통관, 보관, 운송등 다양한 형태의 서비스로 고객의 신뢰에 부흥하고 있습니다</p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/ship.jpg">
+        <img alt="" src="/image/business/ship.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">
@@ -26,7 +26,7 @@
         <p>수출지 픽업에서부터 포장 , 수출통관, 원산지 발행, 국제운송, 도착통관, 배송에 이르기 까지 종합적인 물류 서비스를 제공합니다.</p>
     </div>
     <div class="col-md-4">
-        <img alt="" src="/image/business/ship2.png">
+        <img alt="" src="/image/business/ship2.png" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">
@@ -39,7 +39,7 @@
         <p>해상 전자상거래 운송 중국을 출발기점으로 하여 주위의 18개국을 물류네트워크로 구축하여 해상을 이용한 특송은 물론 전자상거래 물류를 시행하고 있습니다.</p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/ship3.jpg">
+        <img alt="" src="/image/business/ship3.jpg" class="img-fluid">
     </div>
 </div>
 <hr class="featurette-divider">

src/main/resources/templates/html/business-inner/train-inner.html

@@ -13,7 +13,7 @@
         <p>(주)국제종합물류는 TCR(중국 철도), TMGR(몽골 철도), TSR(시베리아 철도) 등의 운송노선을 통하여 전 세계로의 철도운송 서비스를 시행하고 있습니다</p>
     </div>
     <div class="col-md-6 order-md-1">
-        <img alt="" src="/image/business/train-cargo.jpg">
+        <img alt="" src="/image/business/train-cargo.jpg" class="img-fluid">
     </div>
 </div>
 

src/main/resources/templates/html/business-sector.html

@@ -12,14 +12,13 @@
     <!-- Bootstrap core CSS -->
     <link href="/css/bootstrap.min.css" rel="stylesheet">
     <!-- swiper CSS-->
-<!--    <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">-->
 
 
     <!-- Custom styles for this template -->
     <link href="/css/index.css" rel="stylesheet">
 </head>
 <body>
-<header th:include="html/common/header">
+<header th:include="html/common/header" data-bs-theme="light">
 </header>
 <main>
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
@@ -81,5 +80,7 @@
 
 </footer>
 </body>
+<script src="/js/bootstrap.bundle.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
 <script src="/js/business-sector/bizChangeInner.js"></script>
 </html>

src/main/resources/templates/html/common/header.html

@@ -1,8 +1,7 @@
-<nav class="navbar navbar-expand navbar-white fixed-top bg-white">
+<nav class="navbar navbar-expand-md navbar-light fixed-top bg-white">
     <div class="container-fluid">
         <a class="navbar-brand" href="/"><img alt="" src="/image/logo.png"></a>
-        <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"
-                class="navbar-toggler"
+        <button aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
                 data-bs-target="#navbarCollapse" data-bs-toggle="collapse" type="button">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -21,9 +20,9 @@
                     <a aria-current="page" class="nav-link fw-bold text-dark" href="/contact-us">고객센터</a>
                 </li>
             </ul>
-            <form class="d-flex">
-                <a class="btn btn-success" type="button" href="http://www.nn21.net">물류회원전용</a>
+            <form class="">
+                <a class="btn btn-success" href="http://www.nn21.net" type="button">물류회원전용</a>
             </form>
         </div>
     </div>
-</nav>
+</nav>

src/main/resources/templates/html/contact-inner/logi-advice.html

@@ -97,8 +97,7 @@
             </div>
         </div>
         <div class="row" id="advice_detail" style="display: none">
-
-
+            <div class="container my-5">
                     <input type="hidden" name="type" value="LG">
                     <div class="row g-3">
                         <div class="col-md-6 form-floating h-3">

src/main/resources/templates/html/contact-inner/notice.html

@@ -32,20 +32,24 @@
         <h3 class="text-center">내용</h3>
         <div class="row">
             <div class="container my-5">
-                <div class="col">
-                    <!-- 일시, 제목, 작성자 표시 -->
-                    <p id="nt_dt"></p>
-                    <p id="nt_title"></p>
-                    <p id="nt_name"></p>
-                </div>
-                <!-- 내용 표시 textarea -->
-                <div class="row">
+                <form>
+                    <div class="row g-3">
+                        <div class="col mb-6 form-floating h-3">
+                            <!-- 일시, 제목, 작성자 표시 -->
+                            <p id="nt_dt"></p>
+                            <p id="nt_title"></p>
+                            <p id="nt_name"></p>
+                        </div>
+                    </div>
                     <!-- 내용 표시 textarea -->
-                    <div class="col">
+                    <div class="mb-3 form-floating">
+                        <div class="col input-group mb-3 form-floating">
                         <textarea class="form-control" id="nt_content" placeholder="문의 내용을 여기에 표시합니다." readonly
-                                  rows="5"></textarea>
+                                  rows="5" style="height: 300px"></textarea>
+                            <label class="form-label" for="nt_content" style="visibility: hidden">내용</label>
+                        </div>
                     </div>
-                </div>
+                </form>
             </div>
         </div>
     </div>

src/main/resources/templates/html/contact-us.html

@@ -6,9 +6,6 @@
     <meta content="" name="description">
     <meta content="Mark Otto, Jacob Thornton, and Bootstrap contributors" name="author">
     <meta content="Hugo 0.84.0" name="generator">
-
-
-
     <title>(주)국제종합물류</title>
 
     <link href="https://getbootstrap.com/docs/5.0/examples/carousel/" rel="canonical">
@@ -24,7 +21,7 @@
 <body>
 <div th:include="html/modal/lg-advice-modal"></div>
 <div th:include="html/modal/lg-auth-modal"></div>
-<header th:include="html/common/header">
+<header th:include="html/common/header" data-bs-theme="light">
 </header>
 <main>
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
@@ -50,15 +47,8 @@
     </div>
     <!-- 업무내용 설명 -->
 
-    <!--<div class="container marketing" id="notice" th:include="html/contact-inner/notice">-->
     <div class="container marketing" id="notice">
     </div>
-    <!--<div class="container marketing" id="estimate" th:include="html/contact-inner/estimate" style="display: none">
-    <div class="container marketing" id="estimate" style="display: none">
-    </div>
-    <div class="container marketing" id="logi_advice" th:include="html/contact-inner/logi-advice" style="display: none">
-    <div class="container marketing" id="logi_advice" style="display: none">
-    </div>-->
     <hr class="featurette-divider">
 </main>
 
@@ -66,6 +56,8 @@
 
 </footer>
 </body>
+<script src="/js/bootstrap.bundle.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script src="/js/business-sector/bizChangeInner.js"></script>
 <script src="/js/contact/getList.js"></script>

src/main/resources/templates/html/index.html

@@ -11,8 +11,6 @@
     <link href="https://getbootstrap.com/docs/5.0/examples/carousel/" rel="canonical">
     <!-- Bootstrap core CSS -->
     <link href="/css/bootstrap.min.css" rel="stylesheet">
-    <!-- swiper CSS-->
-    <link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet">
 
 
     <!-- Custom styles for this template -->
@@ -20,7 +18,7 @@
 </head>
 <body>
 
-<header th:include="html/common/header">
+<header th:include="html/common/header" data-bs-theme="light">
 </header>
 
 <main>
@@ -90,9 +88,6 @@
 
 </body>
 <!-- 부트스트랩 JS -->
-<script crossorigin="anonymous"
-        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
 <script src="/js/bootstrap.bundle.min.js"></script>
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

src/main/resources/templates/html/info-inner/info-form.html

@@ -3,8 +3,11 @@
     </div>
     <div class="col-md-8">
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".sub-nav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
             <div class="container-fluid">
-                <div class="collapse navbar-collapse">
+                <div class="collapse navbar-collapse sub-nav">
                     <ul class="navbar-nav d-flex justify-content-between w-100">
                         <li class="nav-item">
                             <a aria-current="page" class="nav-link" href="javascript:void(0);" onclick="changeTbody('01')">무역업고유번호 신청</a>
@@ -24,7 +27,7 @@
         </nav>
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
             <div class="container-fluid">
-                <div class="collapse navbar-collapse">
+                <div class="collapse navbar-collapse sub-nav">
                     <ul class="navbar-nav d-flex justify-content-between w-100">
                         <li class="nav-item">
                             <a aria-current="page" class="nav-link" href="javascript:void(0);" onclick="changeTbody('05')">외환,무역금융</a>

src/main/resources/templates/html/info-plaza.html

@@ -22,15 +22,10 @@
     <link href="/css/info-form.css" rel="stylesheet">
 </head>
 <body>
-<header th:include="html/common/header">
+<header th:include="html/common/header" data-bs-theme="light">
 </header>
 <main>
     <div class="carousel slide" data-bs-ride="carousel" id="myCarousel">
-        <!--<div class="carousel-indicators">
-            <button aria-label="Slide 1" data-bs-slide-to="0" data-bs-target="#myCarousel" type="button"></button>
-            <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#myCarousel" type="button"></button>
-            <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#myCarousel" type="button"></button>
-        </div>-->
         <div class="carousel-inner">
             <div class="carousel-item active">
                 <svg aria-hidden="true" class="bd-placeholder-img" focusable="false" height="100%"
@@ -46,7 +41,6 @@
                             <button class="btn btn-primary"  th:onclick="changeInner('inner_form')">서식자료</button>
                             <button class="btn btn-primary"  th:onclick="changeInner('inner_container')">컨테이너제원</button>
                             <button class="btn btn-primary"  th:onclick="changeInner('inner_vol')">체적계산기</button>
-                            <!--<button class="btn btn-primary"  th:onclick="changeInner('inner_global')">물류정보</button>-->
                         </p>
                     </div>
                 </div>
@@ -62,6 +56,8 @@
 
 </footer>
 </body>
+<script src="/js/bootstrap.bundle.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
 <script src="/js/info-plaza/volCal.js"></script>
 <script src="/js/info-plaza/infoFormChangeInner.js"></script>
 <script src="/js/business-sector/bizChangeInner.js"></script>