이 문서는 무용 학원을 위한 기업 웹사이트 구축 프로젝트에 대해 설명합니다. 본 프로젝트는 HTML, CSS, JavaScript 기술을 활용하여 반응형 웹 디자인 원칙을 적용한 종합적인 웹 페이지 개발을 목표로 합니다. 사용자 친화적인 인터페이스와 현대적인 웹 표준을 준수하는 디자인을 통해 방문자에게 최적의 경험을 제공합니다.
사이트 개요
본 프로젝트는 회사 공식 웹사이트, 기업 포털, 또는 특정 서비스(예: 무용 학원)에 특화된 웹사이트 제작에 중점을 둡니다. 무용 학원의 아이덴티티를 효과적으로 전달하고, 사용자들에게 필요한 정보를 명확하게 제공하는 것을 목표로 합니다.
주요 기능 및 구성
웹 페이지는 다음과 같은 핵심 요소들로 구성됩니다:
- 구조 및 스타일링: Div와 CSS를 활용한 레이아웃 설계.
- 인터랙티브 요소: 마우스 오버 효과, 반응형 내비게이션 바, 배너 슬라이드.
- 콘텐츠 관리: 일반적인 테이블 구조, 다양한 이미지 및 텍스트 콘텐츠.
- 다단계 페이지: 메인 페이지 외에 2단계 및 3단계 서브 페이지 구성.
- 미디어 통합: 비디오 및 오디오 요소 포함.
- 사용자 입력: 문의 양식(폼) 기능.
- 브랜딩: 웹사이트에 특화된 로고 디자인 포함.
고품질 웹사이트를 위한 고려 사항
성공적인 웹 디자인을 위해 다음 기준들을 충족하도록 설계되었습니다:
- 페이지는 헤더, 메인 메뉴(드롭다운 지원), 콘텐츠 섹션, 푸터의 네 가지 주요 부분으로 구분됩니다.
- 모든 페이지는 상호 하이퍼링크로 연결되며, 5~10개 페이지로 구성된 최대 3단계 깊이의 구조를 가집니다.
- 일관된 스타일과 깔끔한 Div+CSS 레이아웃을 통해 정상적인 화면 표시를 보장합니다.
- 메뉴는 시각적으로 매력적이며, 2단계 메뉴는 정상적으로 작동하고 페이지 이동이 가능합니다.
- JavaScript를 활용한 동적 효과, 예를 들어 자동 및 수동 이미지 캐러셀(슬라이더)을 포함합니다.
- GIF 이미지, 비디오, 음악 등의 멀티미디어 요소와 양식(폼) 기술을 활용합니다.
- 깔끔하고 미학적이며 독창적인 디자인을 추구합니다.
- 사용자 요구사항을 충족하는 콘텐츠 제공뿐만 아니라, 우수한 레이아웃, 아름다운 인터페이스, 우아한 색상 조합, 다양한 표현 방식을 갖추도록 합니다.
기술 스택 및 구현 세부 사항
- 레이아웃 설계: 현대적이며 주요 브라우저와 호환되는 플로팅 레이아웃 구조를 채택합니다.
- 프로그래밍 언어: 최신 웹 프로그래밍 언어인 HTML5, CSS3, JavaScript를 사용하여 기능을 구현합니다. 모든 주요 브라우저에서 웹사이트 코드가 호환되도록 하여 즉각적인 시각적 효과를 보장합니다.
- 시각적 요소: 다양한 플랫폼에서 엄선된 이미지 소스를 수집하고, Photoshop을 사용하여 웹사이트 스타일에 맞는 크기로 조정합니다.
- 파일 구성: 웹사이트 시스템 파일은 HTML 구조 파일, CSS 스타일 파일, JavaScript 동적 효과 파일, 이미지 파일 등으로 구성됩니다.
- 개발 환경: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad++ 등 모든 HTML 편집 소프트웨어에서 프로젝트를 실행하고 수정할 수 있도록 코드를 작성합니다.
파일 구조 설명:
html파일:index.html이 메인 페이지이며, 다른 HTML 파일들은 서브 페이지입니다.css파일: 모든 페이지의 스타일, 텍스트 스크롤, 이미지 확대 등 시각적 효과를 정의합니다.js파일: 동적 캐러셀 효과, 폼 제출, 클릭 이벤트 등을 구현합니다 (일부 웹 페이지에만 JS 코드 적용).
샘플 코드
HTML 구조 (index.html 예시)
<!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, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<title>메인 페이지 - [학원 이름] 무용 학원</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" href="css/base-styles.css">
<link rel="stylesheet" href="css/main-styles.css">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/scrolloverflow.min.notransition.js"></script>
<script src="js/custom.js"></script>
<style>
/* 섹션별 스타일 재정의 또는 추가 */
.desktop-banner-wrapper { clear: both; height: 685px; }
.desktop-banner-wrapper .banner-slide { height: 685px; background: no-repeat center center; background-size: cover; }
.mobile-banner-wrapper { display: none; clear: both; height: 685px; }
.mobile-banner-wrapper div { height: 100%; }
.mobile-banner-wrapper .banner-slide { height: 100%; background: no-repeat center center; background-size: cover; }
@media (max-width: 1024px) {
.desktop-banner-wrapper { display: none; }
.mobile-banner-wrapper { display: block; }
}
.course-showcase-section .content-wrapper { padding-top: 70px; }
.course-showcase-section .content-wrapper .course-list { overflow: hidden; margin-left: -100px; margin-bottom: -30px; }
.course-showcase-section .content-wrapper .course-list > li { float: left; width: 25%; padding-left: 100px; padding-bottom: 30px; }
.course-showcase-section .content-wrapper .course-list > li:nth-child(4n+1) { clear: both; }
.course-showcase-section .content-wrapper .course-list > li .course-image-area { text-align: center; margin-top: 5px; height: 224px; width: 224px; }
.course-showcase-section .content-wrapper .course-list > li .course-image-area img { border-radius: 50%; display: inline-block; text-align: center; margin-top: 13px; }
.course-showcase-section .content-wrapper .course-list > li .course-description { text-align: center; }
.course-showcase-section .content-wrapper .course-list > li .course-description .title { font-size: 18px; color: #333; padding-top: 30px; }
.course-showcase-section .content-wrapper .course-list > li .course-description .separator { display: block; width: 32px; height: 2px; background: #a93f52; margin: 15px auto 20px auto; }
.course-showcase-section .content-wrapper .course-list > li .course-description .text { color: #999; line-height: 24px; }
.course-showcase-section .content-wrapper .course-list > li .course-description .action-btn { text-align: center; margin-top: 30px; }
.course-showcase-section .content-wrapper .course-list > li .course-description .action-btn .details { display: inline-block; padding: 10px 40px; border-radius: 50px; color: #fff; }
.course-showcase-section .content-wrapper .course-list .item-1 .course-image-area { background: url(http://www.ylcp.shop/files/files/1649473054859/img/kc_list_bg1.png) no-repeat center center; background-size: contain; }
.course-showcase-section .content-wrapper .course-list .item-2 .course-image-area { background: url(http://www.ylcp.shop/files/files/1649473054859/img/kc_list_bg2.png) no-repeat center center; background-size: contain; }
.course-showcase-section .content-wrapper .course-list .item-1 .course-description .action-btn .details { background: #ec8520; }
.course-showcase-section .content-wrapper .course-list .item-2 .course-description .action-btn .details { background: #058bd6; }
@media (max-width: 1024px) {
.course-showcase-section .content-wrapper .course-list > li { width: 50%; }
.course-showcase-section .content-wrapper .course-list > li:nth-child(n) { clear: none; }
.course-showcase-section .content-wrapper .course-list > li:nth-child(2n+1) { clear: both; }
.course-showcase-section .content-wrapper .course-list > li .course-image-area { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
.course-showcase-section .content-wrapper .course-list > li { width: 100%; }
.course-showcase-section .content-wrapper .course-list > li:nth-child(n) { clear: none; }
}
@media (max-width: 300px) {
.course-showcase-section .content-wrapper .course-list > li .course-image-area { height: auto; width: auto; }
}
.teacher-section { background: url(picture/teacher_bg.jpg) no-repeat center center; height: 780px; padding-top: 70px; margin-top: 120px; }
.teacher-section .right-panel { float: right; background: #ec8718; }
.teacher-section .intro-content .text-block { max-width: 750px; padding-top: 70px; }
.teacher-section .intro-content .text-block .main-heading { font-size: 18px; color: #333; padding-bottom: 40px; }
.teacher-section .intro-content .text-block .paragraph { color: #666; line-height: 30px; }
.teacher-section .intro-content .text-block .read-more { color: #df3d47; margin-top: 20px; display: block; }
.teacher-section .intro-content .teacher-grid { overflow: hidden; margin-left: -24px; margin-bottom: -20px; margin-top: 60px; }
.teacher-section .intro-content .teacher-grid > li { float: left; padding-left: 24px; padding-bottom: 20px; }
.teacher-section .intro-content .teacher-grid > li .teacher-card { display: block; position: relative; }
.teacher-section .intro-content .teacher-grid > li .teacher-card img { border-radius: 20px; display: inline-block; max-width: 156px; }
.teacher-section .intro-content .teacher-grid > li .teacher-card:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 4px solid #ec8718; opacity: 0; border-radius: 20px; }
.teacher-section .intro-content .teacher-grid > li .teacher-card:hover:before { opacity: 1; transition: ease .4s; }
@media (max-width: 950px) {
.teacher-section { background: #fbefe1; height: auto; padding-bottom: 50px; }
.teacher-section .intro-content .text-block { max-width: none; text-align: center; }
.teacher-section .intro-content .teacher-grid > li { width: 25%; }
.teacher-section .intro-content .teacher-grid > li .teacher-card img { width: 100%; max-width: none; }
}
@media (max-width: 600px) {
.teacher-section .intro-content .teacher-grid > li { width: 33.33%; }
}
@media (max-width: 350px) {
.teacher-section .intro-content .teacher-grid > li { width: 50%; }
}
.news-section { margin-top: 90px; }
.news-section .top-area { overflow: hidden; padding-top: 70px; }
.news-section .top-area .image-left { float: left; padding-right: 60px; position: relative; }
.news-section .top-area .image-left .background-shape { width: 576px; height: 325px; background: #ec8520; display: block; border-radius: 20px; }
.news-section .top-area .image-left .main-image { display: block; position: absolute; left: 20px; top: -20px; }
.news-section .top-area .image-left .main-image img { border-radius: 20px; }
.news-section .top-area .text-right { float: left; max-width: 542px; }
.news-section .top-area .text-right .navigation-tabs { overflow: hidden; padding: 14px 0; background: #0b8f54; display: inline-block; border-radius: 30px }
.news-section .top-area .text-right .navigation-tabs > li { float: left; padding: 0 40px; }
.news-section .top-area .text-right .navigation-tabs > li .tab-link { display: block; color: #fff; }
.news-section .top-area .text-right .content-block { }
.news-section .top-area .text-right .content-block .headline { font-size: 18px; color: #333; padding: 54px 0 24px 0; }
.news-section .top-area .text-right .content-block .description { color: #666; line-height: 24px; }
.news-section .top-area .text-right .content-block .view-all { color: #df3d47; padding-top: 20px; display: block; }
.news-section .bottom-area { margin-top: 50px; overflow: hidden; }
.news-section .bottom-area .article-list { margin-left: -40px; margin-bottom: -30px; }
.news-section .bottom-area .article-list > li { float: left; width: 33.33%; padding-left: 40px; padding-bottom: 30px; }
.news-section .bottom-area .article-list > li .article-card { background: #f1f1f1; display: block; border-radius: 20px; padding: 36px 40px 30px 36px; }
.news-section .bottom-area .article-list > li .article-card .timestamp { font-size: 18px; color: #999; padding-bottom: 15px; }
.news-section .bottom-area .article-list > li .article-card .divider { width: 34px; height: 2px; background: #ec8520; display: inline-block; }
.news-section .bottom-area .article-list > li .article-card .card-title { font-size: 16px; color: #333; padding: 18px 0; }
.news-section .bottom-area .article-list > li .article-card .card-summary { color: #999; line-height: 24px; }
.news-section .bottom-area .article-list > li .article-card:hover { background: #ec8520; }
.news-section .bottom-area .article-list > li .article-card:hover .timestamp { color: rgba(255,255,255,.6); }
.news-section .bottom-area .article-list > li .article-card:hover .divider { background: #fff; }
.news-section .bottom-area .article-list > li .article-card:hover .card-title { color: #fff; }
.news-section .bottom-area .article-list > li .article-card:hover .card-summary { color: rgba(255,255,255,.6); }
@media (max-width: 1024px) {
.news-section .top-area .image-left { float: none; padding-right: 0; }
.news-section .top-area .image-left .background-shape { display: none; }
.news-section .top-area .image-left .main-image { position: unset; text-align: center; }
.news-section .top-area .text-right { float: none; max-width: none; padding-top: 30px; }
.news-section .top-area .text-right .navigation-tabs { display: block; margin: 0 100px; }
.news-section .top-area .text-right .navigation-tabs > li { width: 50%; }
.news-section .top-area .text-right .navigation-tabs > li .tab-link { text-align: center; }
.news-section .top-area .text-right .content-block .view-all { text-align: center; }
.news-section .bottom-area .article-list > li { width: 50%; }
.news-section .bottom-area .article-list > li .article-card { padding: 20px 20px; }
}
@media (max-width: 700px) {
.news-section .top-area .text-right .navigation-tabs { margin: 0; }
.news-section .bottom-area .article-list > li { width: 100%; }
.news-section .bottom-area .article-list > li .article-card { padding: 20px 10px; }
}
</style>
<script>
$(function () {
// Custom initialization scripts can go here
// Mobile menu toggle functionality
$('.mobile-menu-toggle').on('click', function(e) {
e.preventDefault();
$('.main-navigation').toggleClass('menu-open');
});
});
</script>
</head>
<body>
<header class="site-header">
<div class="header-top">
<div class="container">
<p class="site-logo"><a href="/"><img src="picture/logo.png" alt="학원 로고"></a></p>
<div class="header-contact-info">
<p class="welcome-text">[학원 이름] 무용 학원 공식 웹사이트 방문을 환영합니다</p>
<p class="service-hotline">문의 전화: 400-0000-000</p>
</div>
</div>
</div>
<div class="mobile-header-bar">
<a href="/" class="mobile-logo"><img src="picture/logo_m.png" alt="모바일 로고">[학원 이름] 무용</a>
<a href="#" class="mobile-menu-toggle"><img src="picture/menu.svg" alt="메뉴"></a>
</div>
<nav class="main-navigation">
<div class="container">
<ul class="nav-list">
<li><a href="/" class="active"><b>홈</b></a></li>
<li><a href="about.html"><b>학원 소개</b></a></li>
<li><a href="course.html"><b>강좌 안내</b></a></li>
<li><a href="teacher.html"><b>강사 팀</b></a></li>
<li><a href="room.html"><b>시설 안내</b></a></li>
<li><a href="news.html"><b>새 소식</b></a></li>
<li><a href="ach.html"><b>교육 성과</b></a></li>
<li><a href="contact.html"><b style="border-right:0;">문의</b></a></li>
</ul>
</div>
</nav>
</header>
<div class="desktop-banner-wrapper">
<div class="banner-slide" style="background-image:url(picture/banner-index-p.jpg);"></div>
<div class="banner-slide" style="background-image:url(picture/banner-index-p.jpg);"></div>
</div>
<div class="mobile-banner-wrapper">
<div class="banner-slide" style="background-image:url(picture/banner-index-m.jpg);"></div>
<div class="banner-slide" style="background-image:url(picture/banner-index-m.jpg);"></div>
</div>
<script>
(function () {
$('.desktop-banner-wrapper, .mobile-banner-wrapper').slick({ arrows: true, dots: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 5000, speed: 500 });
})();
</script>
<style>
.desktop-banner-wrapper .slick-dots, .mobile-banner-wrapper .slick-dots { bottom: 60px; }
</style>
<main class="site-main-content">
<!-- Course Showcase Section -->
<section class="course-showcase-section">
<div class="container">
<div class="content-wrapper">
<h2 class="section-heading">주요 강좌</h2>
<ul class="course-list">
<li class="item-1">
<div class="course-image-area"><img src="picture/course_thumb1.jpg" alt="클래식 발레"></div>
<div class="course-description">
<p class="title">클래식 발레<span class="separator"></span></p>
<p class="text">우아한 동작과 섬세한 표현을 배우는 기본 발레 강좌입니다.</p>
<div class="action-btn"><a href="#" class="details">자세히 보기</a></div>
</div>
</li>
<li class="item-2">
<div class="course-image-area"><img src="picture/course_thumb2.jpg" alt="재즈 댄스"></div>
<div class="course-description">
<p class="title">재즈 댄스<span class="separator"></span></p>
<p class="text">에너지 넘치는 움직임과 현대적인 리듬을 익히는 강좌입니다.</p>
<div class="action-btn"><a href="#" class="details">자세히 보기</a></div>
</div>
</li>
<!-- 더 많은 강좌 항목 추가 가능 -->
</ul>
</div>
</div>
</section>
<!-- Teacher Introduction Section -->
<section class="teacher-section">
<div class="container">
<div class="intro-content">
<div class="text-block">
<h2 class="main-heading">강사 소개</h2>
<p class="paragraph">우리 학원의 전문 강사 팀을 소개합니다. 각 강사는 풍부한 경험과 열정으로 학생들에게 최고의 교육을 제공합니다.</p>
<a href="teacher.html" class="read-more">더 알아보기 ></a>
</div>
<ul class="teacher-grid">
<li><a href="#" class="teacher-card"><img src="picture/teacher1.jpg" alt="강사1"></a></li>
<li><a href="#" class="teacher-card"><img src="picture/teacher2.jpg" alt="강사2"></a></li>
<li><a href="#" class="teacher-card"><img src="picture/teacher3.jpg" alt="강사3"></a></li>
<li><a href="#" class="teacher-card"><img src="picture/teacher4.jpg" alt="강사4"></a></li>
</ul>
</div>
</div>
</section>
<!-- News and Events Section -->
<section class="news-section">
<div class="container">
<div class="top-area">
<div class="image-left">
<span class="background-shape"></span>
<a href="#" class="main-image"><img src="picture/news_feature.jpg" alt="주요 뉴스 이미지"></a>
</div>
<div class="text-right">
<ul class="navigation-tabs">
<li><a href="#" class="tab-link">최신 소식</a></li>
<li><a href="#" class="tab-link">이벤트</a></li>
</ul>
<div class="content-block">
<h2 class="headline">2024년 가을 학기 특강 개강 안내</h2>
<p class="description">새로운 가을 학기를 맞아 특별 강좌가 개설됩니다. 다양한 장르의 춤을 경험하고 실력을 향상시킬 기회를 놓치지 마세요.</p>
<a href="#" class="view-all">자세히 보기 ></a>
</div>
</div>
</div>
<div class="bottom-area">
<ul class="article-list">
<li>
<a href="#" class="article-card">
<p class="timestamp">2024.08.15</p>
<span class="divider"></span>
<p class="card-title">여름방학 특별 프로그램 마감</p>
<p class="card-summary">성황리에 종료된 여름방학 특별 프로그램의 생생한 현장을 확인하세요.</p>
</a>
</li>
<li>
<a href="#" class="article-card">
<p class="timestamp">2024.07.20</p>
<span class="divider"></span>
<p class="card-title">신규 강사 영입 안내</p>
<p class="card-summary">새롭게 합류한 재능 있는 강사님들을 소개합니다.</p>
</a>
</li>
<li>
<a href="#" class="article-card">
<p class="timestamp">2024.07.01</p>
<span class="divider"></span>
<p class="card-title">정기 공연 개최 예정</p>
<p class="card-summary">올해 정기 공연 일정을 미리 확인하고 많은 관심 부탁드립니다.</p>
</a>
</li>
</ul>
</div>
</div>>
</section>
</main>
<footer class="site-footer">
<div class="footer-top-area clearfix">
<div class="container">
<p class="footer-logo"><img src="picture/logo_bottom.png" alt="하단 로고"></p>
<ul class="footer-nav clearfix">
<li>
<div class="footer-nav-box">
<p class="nav-heading">학원 소개</p>
<a href="about.html"><p class="nav-link">학교 소개</p></a>
</div>
</li>
<li>
<div class="footer-nav-box">
<p class="nav-heading">강좌 안내</p>
<a href="#"><p class="nav-link">어린이 발레</p></a>
<a href="#"><p class="nav-link">민속 무용</p></a>
<a href="#"><p class="nav-link">고전 무용</p></a>
<a href="#"><p class="nav-link">라틴 댄스</p></a>
</div>
</li>
<li>
<div class="footer-nav-box">
<p class="nav-heading">강사 팀</p>
<a href="#"><p class="nav-link">강사 소개</p></a>
</div>
</li>>
<li>
<div class="footer-nav-box">
<p class="nav-heading">시설 안내</p>
<p class="nav-link">환경 전시</p>
</div>
</li>
<li>
<div class="footer-nav-box">
<p class="nav-heading">새 소식</p>
<p class="nav-link">최신 활동</p>
<p class="nav-link">업계 뉴스</p>
</div>
</li>
<li>
<div class="footer-nav-box">
<p class="nav-heading">교육 성과</p>
<p class="nav-link">하이라이트 순간</p>
</div>
</li>
<li class="contact-footer-item">
<div class="footer-nav-box" style="border-right:0;padding-right:0;">
<p class="nav-heading">문의</p>
<p class="nav-link">연락 방법</p>
</div>
</li>
</ul>
<p class="footer-hotline">문의 전화: 400-0000-000</p>
<p class="footer-address">주소: xxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
<div class="footer-bottom-area">Copyright © [학원 이름] 무용 학원 </div>
</footer>
</body>
</html>
CSS 스타일 (base-styles.css 및 main-styles.css 예시)
/* base-styles.css */
html { background: #ffffff; font-size: 14px; color: #666; font-family: "Noto Sans KR", "맑은 고딕", "AppleSDGothicNeo", sans-serif; }
body { min-width: 1220px; }
.container { width: 1220px; padding: 0 10px; margin: 0 auto; }
.container::before,
.container::after { content: ''; display: block; clear: both; }
.margin-top-large { margin-top: 80px; }
.margin-top-large::before,
.margin-top-large::after { content: ''; display: block; clear: both; }
.margin-bottom-large { margin-bottom: 80px; }
.margin-bottom-large::before,
.margin-bottom-large::after { content: ''; display: block; clear: both; }
@media (max-width: 1024px) {
body { min-width: 0; }
.container { width: 100%; }
}
@media (max-width: 700px) {
.margin-top-large { margin-top: 40px; }
.margin-bottom-large { margin-bottom: 40px; }
}
/* Pagination styles */
.pagination-controls { clear: both; text-align: center; font-size: 14px; color: #888888; margin-top: 90px; }
.pagination-controls > ul { display: inline-block; }
.pagination-controls > ul > li { float: left; line-height: 35px; margin: 0 5px; }
.pagination-controls > ul > li a { display: block; background: #fff; padding: 0 15px; border: 1px solid #E8E8E8; }
.pagination-controls > ul > li a .fa { font-size: 17px; line-height: 35px; }
.pagination-controls > ul > li a.disabled-link { color: #ccc; cursor: not-allowed; }
.pagination-controls > ul > li a:hover:not(.disabled-link),
.pagination-controls > ul > li a.current-page { background: #ec8718; color: #fff; border: 1px solid #ec8718; }
@media (max-width: 600px) {
.pagination-controls > ul .page-number-item { display: none; }
}
/* Section Title styles */
.section-title-block { overflow: hidden; text-align: center; font-weight: bold; }
.section-title-block .primary-heading { font-size: 30px; color: #029f45; padding-top: 10px; }
.section-title-block .secondary-heading { font-size: 24px; color: #ec8718; }
.section-title-block .secondary-heading .icon-image img { width: 56px; }
.section-title-block .action-button-group { float: right; }
.section-title-block .action-button-group .view-more-btn { padding: 2px; border: 1px solid #c6c6c6; font-size: 12px; display: inline-block; }
@media (max-width: 600px) {
.section-title-block .secondary-heading { font-size: 18px; }
}
/* main-styles.css */
.site-header { clear: both; }
.site-header .header-top { clear: both; height: 110px; }
.site-header .header-top .site-logo { float: left; line-height: 100px; font: bold 50px/100px arial; color: #333333; }
.site-header .header-top .site-logo img { vertical-align: middle; margin-right: 10px; }
.site-header .header-top .header-contact-info { float: right; text-align: right; padding-top: 18px; }
.site-header .header-top .header-contact-info .welcome-text { font-size: 12px; color: #999; }
.site-header .header-top .header-contact-info .service-hotline { font-size: 24px; font-weight: bold; color: #dd1e2a; padding-top: 20px; }
.site-header .mobile-header-bar { display: none; }
.site-header .main-navigation { position: relative; z-index: 99; background-size: cover; height: 80px; background: url(../image/top_nav_bg.jpg) no-repeat center top; }
.site-header .main-navigation .container { height: 80px; }
.site-header .main-navigation .nav-list { text-align: center; padding-top: 50px; }
.site-header .main-navigation .nav-list > li { float: left; width: 12.5%; }
.site-header .main-navigation .nav-list > li > a { display: block; font-size: 14px; color: #ffffff; }
.site-header .main-navigation .nav-list > li > a.active,
.site-header .main-navigation .nav-list > li > a:hover { }
.site-header .main-navigation .nav-list > li > a b { padding: 0 30px; font-weight: normal; }
@media (max-width: 1024px) {
body { padding-top: 70px; }
.site-header { height: auto; }
.site-header .header-top { display: none; }
.site-header .mobile-header-bar { position: relative; display: block; position: fixed; z-index: 100; left: 0; top: 0; right: 0; height: 70px; background: #fff; border-bottom: 1px solid #ec8718; }
.site-header .mobile-header-bar .mobile-logo { position: absolute; left: 0; top: 0; display: block; padding: 0 10px; color: #333333; font: bold 24px/70px arial; }
.site-header .mobile-header-bar .mobile-logo img { height: 40px; line-height: 40px; vertical-align: middle; margin-right: 10px; }
.site-header .mobile-header-bar .mobile-menu-toggle { position: absolute; right: 0; top: 0; display: block; float: right; padding: 0 10px; line-height: 70px; }
.site-header .mobile-header-bar .mobile-menu-toggle img { vertical-align: middle; height: 40px; }
.site-header .main-navigation { visibility: hidden; opacity: 0; position: fixed; z-index: 99; left: 0; top: -100%; bottom: 100%; right: 0; background: #fff; border-top: 0; transition: ease .4s; height: auto; text-align: left; }
.site-header .main-navigation .container { text-align: left; padding: 0 20px; height: auto; overflow: visible; }
.site-header .main-navigation .nav-list { display: block; padding-top: 0; }
.site-header .main-navigation .nav-list > li { float: none; border-right: 0; width: auto; }
.site-header .main-navigation .nav-list > li > a { padding: 20px 30px; font-size: 16px; color: #333; text-align: left; }
.site-header .main-navigation .nav-list > li > a.active,
.site-header .main-navigation .nav-list > li > a:hover { color: #ec8718; background: none; }
.site-header .main-navigation .nav-list > li > a b { padding: 0; }
.site-header .main-navigation.menu-open { visibility: visible; opacity: 1; top: 70px; bottom: 0; }
}
.site-footer { clear: both; margin-top: 150px; }
.site-footer .footer-top-area { background: url(../image/footer_bg.jpg) no-repeat center center; height: 495px; background-size: cover; position: relative; }
.site-footer .footer-top-area .footer-logo { text-align: center; position: absolute; top: -50px; left: 0; right: 0; }
.site-footer .footer-top-area .footer-nav { padding: 145px 0 50px 0; margin-left: -30px; }
.site-footer .footer-top-area .footer-nav > li { float: left; padding-left: 30px; width: 14%; }
.site-footer .footer-top-area .footer-nav > li .footer-nav-box { padding-right: 20px; border-right: 1px solid #e5e5e5; }
.site-footer .footer-top-area .footer-nav > li .footer-nav-box .nav-heading { font-size: 18px; color: #333; padding-bottom: 18px; }
.site-footer .footer-top-area .footer-nav > li .footer-nav-box .nav-link { line-height: 30px; color: #666; }
.site-footer .footer-top-area .footer-hotline { font-size: 30px; color: #0b8f54; text-align: center; }
.site-footer .footer-top-area .footer-address { text-align: center; padding-top: 16px; }
.site-footer .footer-bottom-area { padding: 14px 0; color: #fff; text-align: center; background: #ec8520; }
@media (max-width: 1024px) {
.site-footer .footer-top-area { height: auto; padding-bottom: 30px; }
.site-footer .footer-top-area .footer-nav { float: none; padding: 100px 0 0 0; }
.site-footer .footer-top-area .footer-nav > li { width: 25%; padding-left: 0; padding-bottom: 30px; }
.site-footer .footer-top-area .footer-nav > li .footer-nav-box { border: 0; text-align: center; }
.site-footer .footer-top-area .footer-nav > li:nth-child(4n+1) { clear: both; }
.site-footer .footer-top-area .footer-nav .contact-footer-item { padding-left: 0; }
.site-footer .footer-bottom-area { padding: 22px 10px; }
}
@media (max-width: 600px) {
.site-footer .footer-top-area .footer-nav > li { padding-bottom: 20px; text-align: center; width: 33.33%; }
.site-footer .footer-top-area .footer-nav > li:nth-child(n) { clear: none; }
.site-footer .footer-top-area .footer-nav > li:nth-child(3n+1) { clear: both; }
.site-footer .footer-top-area .footer-nav .contact-footer-item { width: 100%; }
.site-footer .footer-top-area .footer-nav > li .footer-nav-box { height: auto; }
}
@media (max-width: 400px) {
.site-footer .footer-top-area .footer-nav > li { width: 50%; }
.site-footer .footer-top-area .footer-nav > li:nth-child(n) { clear: none; }
.site-footer .footer-top-area .footer-nav > li:nth-child(2n+1) { clear: both; }
.site-footer .footer-top-area .footer-hotline { font-size: 20px; }
}
/* Sub-page banner styles */
.subpage-banner-desktop { display: block; }
.subpage-banner-mobile { display: none; }
.subpage-banner-desktop img, .subpage-banner-mobile img { display: block; width: 100%; height: auto; }
@media (max-width: 1024px) {
.subpage-banner-desktop { display: none; }
.subpage-banner-mobile { display: block; }
}
/* Paging for articles/lists */
.article-pagination { margin-top: 40px; border-top: 1px dashed #cfcfcf; padding-top: 60px; overflow: hidden; }
.article-pagination a { color: #666; display: block; }
.article-pagination a:hover { color: #ec8718; }
.article-pagination .prev-link { padding-bottom: 17px; }