HTML5 Responsive

사이트 바로가기

  • 반응형 사이트 바로가기
  • 아웃라이터 작업
  • 
     <!DOCTYPE html>
     <html lang="ko">
        <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
           <!-- <meta http-equiv="Content-Script-Type" content="text/javascript">
           <meta http-equiv="Content-Style-Type" content="text/css">
           <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> -->
           <meta name="author" content="webstoryboy">
           <meta name="description" content="반응형 웹 페이지를 만들기 위한 교육 사이트입니다.">
           <meta name="keywords" content="반응형 웹 페이지, HTML5, Responsive, Site"> 
          
           <title>Responsive Site </title>
    
           <!-- style -->
           <link rel="stylesheet" href="assets/css/reset.css">
           <link rel="stylesheet" href="assets/css/style.css">
           <link rel="stylesheet" href="assets/css/lightgallery.css">
           <link rel="stylesheet" href="assets/css/owl.carousel.css">
           <link rel="stylesheet" href="assets/css/lg-fb-comment-box.css">
           <link rel="stylesheet" href="assets/css/lg-transitions.css">
    
           <style>
             #owl-demo .item img{
      display: block;
      width: 100%;
      height: auto;
    }
    #bar{
      width: 0%;
      max-width: 100%;
      height: 4px;
      background: #1b5e20;
    }
    #progressBar{
      width: 100%;
      background: #00c853;
    }
           </style>
          
           <!-- font css -->
           <link rel="stylesheet" href="assets/css/font-awesome.css">
    
           <!-- web font -->
           <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css"/>
           <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css"/>
           
           <!-- HTML5 Support & ie Version Checker -->
           <!--[if lt IE 9]>
              <script src="assets/js/html5shiv.min.js"> </script>
              <script src="assets/js/ie-checker-min.js"> </script>
           <![endif]-->
    
           <!-- favicon -->
           <link rel="shortcut icon" href="assets/icon/favicon.ico">
           <link rel="apple-touch-icon" href="assets/icon/icon_60.png">
           <link rel="apple-touch-icon" sizes="76x76" href="assets/icon/icon_76.png">
           <link rel="apple-touch-icon" sizes="120x120" href="assets/icon/icon_120.png">
           <link rel="apple-touch-icon" sizes="152x152" href="assets/icon/icon_152.png">
    
           <!--[if lte IE 8]>
              <p style="font-size: 12px; color: #fff; background: #2885b0; padding:5px 0; margin: 0; text-align: center">사용하고 계신 브라우저는 최신 웹 브라우저가 아닙니다. 업그레이드를 하거나 다른 최신 브라우저 사용을 권장합니다.
              <a style="color:#f57c00;" href="http://www.microsoft.com/korea/ie" target="_blank" >익스플로러, </a>
              <a style="color:#f57c00;" href="http://www.mozilla.or.kr/ko/" target="_blank">파이어폭스, </a> 
              <a style="color:#f57c00;" href="http://kr.opera.com/download/" target="_blank">오페라, </a>
              <a style="color:#f57c00;" href="http://support.apple.com/kb/DL1531?viewlocale=ko_KR&locale=ko_KR" target="_blank">사파리, </a>
              <a style="color:#f57c00;" href="http://www.google.com/chrome?hl=ko" target="_blank">크롬 </a> </p>
           <![endif]-->
    
           </head>
           <body>
              <header id="header">
              <div class="container">
                 <div class="row">
                    <div class="quick">
                       <a href="#">Design Cafe </a>
                       <a href="#">Publisher Cafe </a>
                    </div>
                    <div class="title">
                       <p>Professional Web Publisher </p>
                       <h1> <a href="#">choheebaek.com </a> </h1>
                    </div>
                    <div class="icon-font">
                       <ul>
                          <li> <a href="#"> <i class="fa fa-fire" aria-hidden="true"> </i> <span>fire </span> </a> </li>
                             <li> <a href="#"> <i class="fa fa-lightbulb-o" aria-hidden="true"> </i> <span>lightbulb </span> </a> </li>
                             <li> <a href="#"> <i class="fa fa-hand-peace-o" aria-hidden="true"> </i> <span>peace </span> </a> </li>
                             <li> <a href="#"> <i class="fa fa-rocket" aria-hidden="true"> </i> <span>rocket </span> </a> </li>
                       </ul>
                    </div>
                 </div>
              </div>
              </header>
    
              <nav id="nav">
                 <div class="container">
                    <div class="row">
                       <div class="nav">
                          <h2>HTML/CSS Reference </h2>
                          <ul class="clearfix">
                             <li> <a href="#">HTML Referenct1 </a> </li>
                             <li> <a href="#">HTML Referenct2 </a> </li>
                             <li> <a href="#">HTML Referenct3 </a> </li>
                             <li> <a href="#">HTML Referenct4 </a> </li>
                             <li> <a href="#">HTML Referenct5 </a> </li>
                             <li> <a href="#">HTML Referenct6 </a> </li>
                             <li> <a href="#">HTML Referenct7 </a> </li>
                             <li> <a href="#">HTML Referenct8 </a> </li>
                             <li> <a href="#">HTML Referenct9 </a> </li>
                             <li> <a href="#">HTML Referenct10 </a> </li>
                             <li> <a href="#">HTML Referenct11 </a> </li>
                             <li> <a href="#">HTML Referenct12 </a> </li>
                             <li> <a href="#">HTML Referenct13 </a> </li>
                             <li> <a href="#">HTML Referenct14 </a> </li>
                             <li> <a href="#">HTML Referenct15 </a> </li>
                             <li> <a href="#">HTML Referenct16 </a> </li>
                             <li> <a href="#">HTML Referenct17 </a> </li>
                             <li> <a href="#">HTML Referenct18 </a> </li>
                             <li> <a href="#">HTML Referenct19 </a> </li>
                             <li> <a href="#">HTML Referenct20 </a> </li>
                             <li> <a href="#">HTML Referenct21 </a> </li>
                             <li> <a href="#">HTML Referenct22 </a> </li>
                             <li> <a href="#">HTML Referenct23 </a> </li>
                             <li> <a href="#">HTML Referenct24 </a> </li>
                             <li> <a href="#">HTML Referenct25 </a> </li>
                             <li> <a href="#">HTML Referenct26 </a> </li>
                             <li> <a href="#">HTML Referenct27 </a> </li>
                             <li> <a href="#">HTML Referenct28 </a> </li>
                             <li> <a href="#">HTML Referenct29 </a> </li>
                             <li> <a href="#">HTML Referenct30 </a> </li>
                          </ul>                    
                       </div>               
                    </div>          
                 </div>
              </nav>
              <article id="tit">
                 <div class="container">
                    <div class="tit">
                       <h2>“나는 백초희다” </h2>
                       <span class="btn"> <a href="#"> <i class="fa fa-bars" aria-hidden="true"> </i> </a> </span>                  
                    </div>
                 </div>         
              </article>
    
              <main>
              <section id="contents">
                 <div class="container">
                    <h2 class="ir_pm">반응형 사이트 컨텐츠 </h2>
                    <section id="cont_left">
                       <h3 class="ir_pm">반응형 사이트 왼쪽 컨텐츠 </h3>
                       <article class="cbox box1">
                          <h4 class="cbox_tit">Menu </h4>
                          <p class="cbox_desc">웹 반응형 사이트와 관련된 메뉴 정보입니다. </p>
                          <!-- menu -->
                          <div class="menu">
                             <ul>
                                <li> <a href="#">Cafe <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                                <li> <a href="#">Standard <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                                <li> <a href="#">Tutorial <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                                <li> <a href="#">Reference <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                                <li> <a href="#">CSS <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                                <li> <a href="#">HTML5 <i class="fa fa-angle-double-right" aria-hidden="true"> </i> </a> </li>
                             </ul>
                          </div>
                          <!-- //menu -->
                       </article>
                       <article class="cbox box2">
                          <h4 class="cbox_tit">Notice </h4>
                          <p class="cbox_desc">웹 반응형 사이트 게시판 유형입니다. </p>                     
                          <!-- notice -->
                          <div class="notice">
                             <h5>Graphic Design </h5>
                             <ul>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                             </ul>
                             <span class="more"> <a href="#">more  <i class="fa fa-plus-square-o" aria-hidden="true"> </i> </a> </span>
                          </div>
                          <!-- //notice -->
                          <!-- notice -->
                          <div class="notice mt15">
                             <h5>Graphic Design </h5>
                             <ul>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                                <li> <a href="#">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </a> </li>
                             </ul>
                             <span class="more"> <a href="#">more  <i class="fa fa-plus-square-o" aria-hidden="true"> </i> </a> </span>
                          </div>
                          <!-- //notice -->
                       </article>
                       <article class="cbox box3">
                          <h4 class="cbox_tit">Blog </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다.  </p>
                          <!-- blog -->
                          <div class="blog">
                             <h5>Figure </h5>
                             <figure>
                                <a href="#" class="blog_img">
                                   <img src="assets/img/fullimage1.jpg" alt="blog image"> <em>blog </em>
                                </a>
                                <figcaption>웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </figcaption>
                             </figure>
                          </div>
                          <!-- //blog -->
                          <!-- blog2 -->
                          <div class="blog2 mt15">
                             <h5>Figure </h5>
                             <figure>
                                <a href="#" class="blog_img">
                                   <img src="assets/img/fullimage2.jpg" alt="blog image"> <em>blog2 </em>
                                </a>
                                <figcaption>웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </figcaption>
                             </figure>
                          </div>
                          <!-- //blog2 -->
                       </article>
                    </section>
                    <!-- //cont_left -->
                    <section id="cont_center">
                       <h3 class="ir_pm">반응형 사이트 가운데 컨텐츠 </h3>
                       <article class="cbox box4">
                          <h4 class="cbox_tit">Gallery </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </p>
                          <!-- gallery-->
                          <div class="gallery">
                          <div id="owl-demo" class="owl-carousel owl-theme"> 
                            <div class="item"> <img src="assets/img/fullimage3.jpg" alt=""> </div>
                            <div class="item"> <img src="assets/img/fullimage4.jpg" alt=""> </div>
                            <div class="item"> <img src="assets/img/fullimage5.jpg" alt=""> </div>
                            <div class="item"> <img src="assets/img/fullimage6.jpg" alt=""> </div>
                            <div class="item"> <img src="assets/img/fullimage7.jpg" alt=""> </div>
                            </div>
                          </div>
                          <!--//gallery-->
                       </article>
                       <article class="cbox box5">
                          <h4 class="cbox_tit">SQUARE </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </p>
                          <!--square-->
                          <div id="lightgallery" class="square clearfix">
                           <a href="assets/img/d1_800.jpg"> <img src="assets/img/a1_600.jpg" alt="이미지1"/> </a>
                           <a href="assets/img/d2_800.jpg"> <img src="assets/img/a2_600.jpg" alt="이미지2"/> </a>
                           <a href="assets/img/d3_800.jpg"> <img src="assets/img/a3_600.jpg" alt="이미지3"/> </a>
                           <a href="assets/img/d4_800.jpg"> <img src="assets/img/a4_600.jpg" alt="이미지4"/> </a>
                           <a href="assets/img/d5_800.jpg"> <img src="assets/img/a5_600.jpg" alt="이미지5"/> </a>
                           <a href="assets/img/d6_800.jpg"> <img src="assets/img/a6_600.jpg" alt="이미지6"/> </a>
                           <a href="assets/img/d7_800.jpg"> <img src="assets/img/a7_600.jpg" alt="이미지7"/> </a>
                           <a href="assets/img/d8_800.jpg"> <img src="assets/img/a8_600.jpg" alt="이미지8"/> </a>
                           <a href="assets/img/d9_800.jpg"> <img src="assets/img/a9_600.jpg" alt="이미지9"/> </a>
                           <a href="assets/img/d10_800.jpg"> <img src="assets/img/a10_600.jpg" alt="이미지10"/> </a>
                          </div>
                          <!--//square-->
                       </article>
                       <article class="cbox box6">
                          <h4 class="cbox_tit">VIDEO </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. 웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다 </p>
                          <!-- video -->
                          <div class="video">
                             <!--  <video controls="controls" autoplay="autoplay" loop="loop">
                                <source src="assets/img/video.mp4" type="video/mp4">
                             </video> -->
                             <iframe class="iframe" src="https://www.youtube.com/embed/DtlLNqvLAok" allowfullscreen> </iframe>
                          </div>
                          <!-- //video -->
                       </article>
                    </section>
                    <!-- //cont_center -->
                    <section id="cont_right">
                       <h3 class="ir_pm">반응형 사이트 오른쪽 컨텐츠 </h3>
                       <article class="cbox box7">
                          <h4 class="cbox_tit">img1 </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. </p>
                          <!-- figure-img1 -->
                          <div class="fimg1">
                             <img src="assets/img/go1.jpg" alt="이미지">
                          </div>
                          <!-- //figure-img1 -->
                       </article>
                       <article class="cbox box8">
                          <h4 class="cbox_tit">img2 </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. </p>
                          <!-- figure-img2 -->
                          <div class="fimg2">
                             <img src="assets/img/go2.jpg" alt="이미지">
                          </div>
                          <!-- //figure-img2 -->
                       </article>
                       <article class="cbox box9">
                          <h4 class="cbox_tit">img3 </h4>
                          <p class="cbox_desc">웹 퍼블리싱과 관련된 정보 공유 및 교육을 위한 사이트 입니다. </p>
                          <!-- figure-img3 -->
                          <div class="fimg3">
                             <img src="assets/img/go3.jpg" alt="이미지">
                          </div>
                          <!-- //figure-img3 -->
                       </article>
                    </section>
                    <!-- //cont_right -->
                 </div>
              </section>
              </main>
    
              <footer id="footer">
                 <div class="container">
                    <div class="footer">
                       <ul>
                          <li> <a href="#">사이트 도움말 </a> </li>
                          <li> <a href="#">사이트 이용약관 </a> </li>
                          <li> <a href="#">사이트 운영원칙 </a> </li>
                          <li> <a href="#"> <strong>개인정보취급방침 </strong> </a> </li>
                          <li> <a href="#">책임의 한계와 법적고지 </a> </li>
                          <li> <a href="#">게시중단요청서비스 </a> </li>
                          <li> <a href="#">고객센터 </a> </li>
                      </ul> 
                      <address>
                          <em>Copyright ©  </em>
                          <a href="http://choheebaek.com">http://choheebaek.com </a>
                          <span>All Right Reserved </span>
                      </address>
                        <p class="w3c">
                          <a href="http://validator.kldp.org/check?uri=referer"
                         onclick="this.href=this.href.replace(/referer$/,encodeURIComponent(document.URL))"> <img
                         src="//validator.kldp.org/w3cimgs/validate/html5-blue.png" alt="Valid HTML 5" height="15" width="80"> </a>
                       </p>
    
                    </div>
                 </div>
              </footer>
    
              <!--script-->
              <script type="text/javascript" src="assets/js/jquery.1.12.4.min.js" > </script>
              <script type="text/javascript" src="assets/js/owl.carousel.js" > </script>
              <script src="assets/js/custom.js"> </script>
              <script src="assets/js/lightgallery.min.js"> </script>
              <script src="assets/js/lg-autoplay.min.js"> </script>
              <script src="assets/js/lg-hash.min.js"> </script>
              <script src="assets/js/lg-autoplay.min.js"> </script>
    
    
             
    
              <script> 
            lightGallery(document.getElementById('lightgallery'));
            
              </script>
           </body>
        </html>
    
    /* layout */
    body {background: #f1f4fb url(../img/header_bg.jpg) repeat-x center top;}
    #header {}
    #nav {  }
    #tit {background-color: #fff;  border-bottom:1px solid #dbdbdb; padding: 2px 0;}
    #contents .container {border-right:1px solid #dbdbdb; border-left: 1px solid #dbdbdb;   }
    #cont_left {width: 250px; float: left; }
    #cont_center {overflow: hidden;  margin-right: 250px; border-right:1px solid #dbdbdb; border-left: 1px solid #dbdbdb; min-height: 1347px; }
    #cont_right {width: 250px; position: absolute; right: 0; top: 0; }
    #footer {width: 100%; height: 200px; border-top:1px solid #dbdbdb;}
    
    /* container */
    .container {width: 1200px; margin: 0 auto; position: relative;
     /*background: rgba(0,0,0,0.4);*/}
    
    /* quick */
    .quick {text-align: right;  }
    .quick a {display: inline-block; color: #fff;  padding:4px 0 4px 10px; transition: all 0.5s ease;}
    .quick a:hover {color: #ccc;}
    
    /* title */
    .title {text-align: center; text-transform: uppercase; margin-top: 70px;}
    .title  p {font-size: 24px; color: #fff; background-color: #51b0dc; display: inline; padding: 10px 20px;  }
    .title h1 a {color: #fff; background-color: #4a9abf; padding: 10px 20px; margin-top: -4px; font-size: 14px; display: inline-block; transition: all .3s ease-in-out;}
    .title h1 a:hover {
      box-shadow:
        0 0 0 3px rgba(75,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset;
    }
    
    /* icon-font */
    .icon-font {text-align: center; margin-top: 40px; padding-bottom: 50px;}
    .icon-font li {display: inline; margin: 0 2px;}
    .icon-font li a {position: relative;  display: inline-block;  width: 60px; height: 60px; background-color: #3192bf; font-size: 35px; border-radius: 50%; color: #fff;  }
    .icon-font li a span {opacity: 0; position: relative; font-size: 12px; background-color: #3192bf; position: absolute; left: 50%; top: -40px; transform: translateX(-50%);  padding: 1px 7px;  border-radius: 6px 0; transition: all .3s ease-in-out;}
    .icon-font li a span:before {content:''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; 
    	border-top: 5px solid #3192bf; 
    	border-left: 5px solid transparent; 
    	border-right: 5px solid transparent; 
    }
    .icon-font li a:hover span {opacity: 1;  top: -30px }				
    .ie8 .icon-font li a span {display: none;}
    
    
    
    /* nav */
    .nav {padding: 30px 0;  }
    .nav h2 {font-size: 16px; color: #25a2d0; padding-bottom: 5px;}
    .nav li {position: relative; float: left; width: 20%; }
    .nav li:before {content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #25a2d0; position: absolute; left: 0; top: 8px;}
    .nav li a {margin-left: 8px; padding: 3px; border-radius: 2px;}
    .nav li a:hover {background-color: #25a2d0; color: #fff;}
    
    
    /* tit */
    .tit {position: relative; text-align: center;}
    .tit h2 {font-size: 39px; color: #0093bd; font-family: 'Nanum Brush Script';  }
    .tit .btn {position: absolute; right: 0; top: 3px;}
    .tit .btn a {width: 60px; height: 60px; background-color: #4a9abf; display: block;
    color: #fff; border-radius: 50%;  font-size: 33px; line-height: 60px;}
    
    
    /* cbox */
    .cbox {padding: 15px; border-bottom: 1px solid #dbdbdb;  }
    .cbox .cbox_tit {font-size: 20px; color: #2f7fa6; text-transform: uppercase;  }
    .cbox .cbox_desc {border-bottom: 1px dashed #dbdbdb;  padding-bottom: 15px; margin-bottom: 15px; color: #878787; }
    .cbox.box1 {  }
    .cbox.box2 {  }
    .cbox.box3 {border-bottom: 0; }
    .cbox.box4 {  }
    .cbox.box5 {  }
    .cbox.box6 {border-bottom: 0; } 
    .cbox.box7 {  } 
    .cbox.box8 {  } 
    .cbox.box9 {border-bottom: 0; } 
    
    /*#cont_left article:nth-child(4) {border-bottom: 0;   }
    #cont_center article:nth-child(4) {border-bottom: 0;   }
    #cont_right article:nth-child(4) {border-bottom: 0;   }
    #cont_left article:last-child {border-bottom: 0;}
    #cont_center article:last-child {border-bottom: 0;}
    #cont_right article:last-child {border-bottom: 0;}
    #contents article:nth-child(4) {border-bottom: 0;}*/
    
    /* menu */
    .menu li {position: relative;  }
    .menu li a {font-size: 16px; text-transform: uppercase; color: #878787; border-bottom: 1px solid #dbdbdb; padding: 10px; display: block; }
     .menu li a i {position: absolute; right: 10px; top: 15px;}
    
    
    /* notice */
    .notice {position: relative;  }
    .notice h5 {font-size: 14px; color: #2f7fa6;  }
    .notice li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  padding-left: 8px;}
    .notice li:before {content: ''; width: 3px; height: 3px; background-color: #449ce2; position: absolute; left: 0; top: 8px; border-radius: 50%;}
    .notice .more {position: absolute; right: 0; top: 4px; font-size: 9px; text-transform: uppercase;}
    .notice .more a {color: #878787;}
    
    
    /* blog */
    .blog h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
    .blog .blog_img {position: relative; display: block;  margin-bottom: 3px;}
    .blog .blog_img:after {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; left: 0; top: 0; z-index: 50;
     	transition: all 0.3s ease-in-out;}
    .blog .blog_img:hover:after {background-color: rgba(0,0,0,0.4);}
    .blog .blog_img img {display: block;}
    .blog .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); text-transform: uppercase; z-index: 100; font-size: 16px;}
    .blog .blog_img:hover em {opacity: 1;} 
    
    /* blog2 */
    .blog2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
    .blog2 .blog_img {position: relative; display: block;  margin-bottom: 3px; overflow: hidden;}
    .blog2 .blog_img:after {content: ''; width: 100%; height: 100%; display: block;
    position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0); transition: all 0.3s ease-in-out;}
    .blog2 .blog_img:hover:after {background-color: rgba(0,0,0,0.4);}
    .blog2 .blog_img img {display: block; transform: scale(1,1); transition: all 0.3s ease-in-out;}
    .blog2 .blog_img:hover img {transform: scale(1.3,1.3);}
    .blog2 .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); text-transform: uppercase; z-index: 100; font-size: 16px;}
    .blog2 .blog_img:hover em {opacity: 1;} 
    
    /* square */
    .square {  }
    .square a {float: left; width: 19%; margin: 0.5%;}
    .square a img {display: block;}
    .square a:nth-child(1) img:hover {filter : contrast(200%); }
    .square a:nth-child(2) img:hover {filter : grayscale(100%);}
    .square a:nth-child(3) img:hover {filter : hue-rotate(300deg);}
    .square a:nth-child(4) img:hover {filter : invert(100%);}
    .square a:nth-child(5) img:hover {filter : opacity(20%);}
    .square a:nth-child(6) img:hover {filter : saturate(700%);}
    .square a:nth-child(7) img:hover {filter : sepia(80%);  }
    .square a:nth-child(8) img:hover {filter : saturate(200%);}
    .square a:nth-child(9) img:hover {filter : invert(40%);}
    .square a:nth-child(10) img:hover {filter : hue-rotate(200deg);}
    
    /* video */
    .video {position: relative; width: 100%; padding-bottom: 56.25%; }
    .video .iframe {width: 100%; height: 100%; position: absolute; border:0;  }
    
    /* footer */
    .footer {text-align: center; padding: 30px 50px; }
    .footer li {position: relative; display: inline; padding: 0 7px; white-space: nowrap;}
    .footer li:before {content: ''; width: 1px; height: 10px; background-color: #dbdbdb; position: absolute; left: 0; top: 2px;}
    .footer li:first-child:before {width: 0;}
    .footer address {padding-top: 15px;}
    .footer .w3c img {width: 80px; margin-top: 15px;}
    
    /*#cont_left article:nth-child(4) {border-bottom: 0;   }
    #cont_center article:nth-child(4) {border-bottom: 0;   }
    #cont_right article:nth-child(4) {border-bottom: 0;   }
    #cont_left article:last-child {border-bottom: 0;}
    #cont_center article:last-child {border-bottom: 0;}
    #cont_right article:last-child {border-bottom: 0;}
    #contents article:nth-child(4) {border-bottom: 0;}*/
    
    /* menu */
    .menu li {position: relative;  }
    .menu li a {font-size: 16px; text-transform: uppercase; color: #878787; border-bottom: 1px solid #dbdbdb; padding: 10px; display: block; }
     .menu li a i {position: absolute; right: 10px; top: 15px;}
    
    
    /* notice */
    .notice {position: relative;  }
    .notice h5 {font-size: 14px; color: #2f7fa6;  }
    .notice li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;  padding-left: 8px;}
    .notice li:before {content: ''; width: 3px; height: 3px; background-color: #449ce2; position: absolute; left: 0; top: 8px; border-radius: 50%;}
    .notice .more {position: absolute; right: 0; top: 4px; font-size: 9px; text-transform: uppercase;}
    .notice .more a {color: #878787;}
    
    
    /* blog */
    .blog h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
    .blog .blog_img {position: relative; display: block;  margin-bottom: 3px;}
    .blog .blog_img:after {content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0); position: absolute; left: 0; top: 0; z-index: 50;
     	transition: all 0.3s ease-in-out;}
    .blog .blog_img:hover:after {background-color: rgba(0,0,0,0.4);}
    .blog .blog_img img {display: block;}
    .blog .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); text-transform: uppercase; z-index: 100; font-size: 16px;}
    .blog .blog_img:hover em {opacity: 1;} 
    
    /* blog2 */
    .blog2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 3px;  }
    .blog2 .blog_img {position: relative; display: block;  margin-bottom: 3px; overflow: hidden;}
    .blog2 .blog_img:after {content: ''; width: 100%; height: 100%; display: block;
    position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0); transition: all 0.3s ease-in-out;}
    .blog2 .blog_img:hover:after {background-color: rgba(0,0,0,0.4);}
    .blog2 .blog_img img {display: block; transform: scale(1,1); transition: all 0.3s ease-in-out;}
    .blog2 .blog_img:hover img {transform: scale(1.3,1.3);}
    .blog2 .blog_img em {opacity: 0; position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); text-transform: uppercase; z-index: 100; font-size: 16px;}
    .blog2 .blog_img:hover em {opacity: 1;} 
    
    /* square */
    .square {  }
    .square a {float: left; width: 19%; margin: 0.5%;}
    .square a img {display: block;}
    .square a:nth-child(1) img:hover {filter : contrast(200%); }
    .square a:nth-child(2) img:hover {filter : grayscale(100%);}
    .square a:nth-child(3) img:hover {filter : hue-rotate(300deg);}
    .square a:nth-child(4) img:hover {filter : invert(100%);}
    .square a:nth-child(5) img:hover {filter : opacity(20%);}
    .square a:nth-child(6) img:hover {filter : saturate(700%);}
    .square a:nth-child(7) img:hover {filter : sepia(80%);  }
    .square a:nth-child(8) img:hover {filter : saturate(200%);}
    .square a:nth-child(9) img:hover {filter : invert(40%);}
    .square a:nth-child(10) img:hover {filter : hue-rotate(200deg);}
    
    /* video */
    .video {position: relative; width: 100%; padding-bottom: 56.25%; }
    .video .iframe {width: 100%; height: 100%; position: absolute; border:0;  }
    
    /* footer */
    .footer {text-align: center; padding: 30px 50px; }
    .footer li {position: relative; display: inline; padding: 0 7px; white-space: nowrap;}
    .footer li:before {content: ''; width: 1px; height: 10px; background-color: #dbdbdb; position: absolute; left: 0; top: 2px;}
    .footer li:first-child:before {width: 0;}
    .footer address {padding-top: 15px;}
    .footer .w3c img {width: 80px; margin-top: 15px;}
    
    
    
    
    
    
    /*#cont_left article:nth-child(4) {border-bottom: 0;   }
    #cont_center article:nth-child(4) {border-bottom: 0;   }
    #cont_right article:nth-child(4) {border-bottom: 0;   }
    #cont_left article:last-child {border-bottom: 0;}
    #cont_center article:last-child {border-bottom: 0;}
    #cont_right article:last-child {border-bottom: 0;}
    #contents article:nth-child(4) {border-bottom: 0;}*/
    
    /* #cont_left article:nth-child(4) {border-bottom: 0;   }
    #cont_center article:nth-child(4) {border-bottom: 0;   }
    #cont_right article:nth-child(4) {border-bottom: 0;   } */
    
    /* #cont_left article:last-child {border-bottom: 0;}
    #cont_center article:last-child {border-bottom: 0;}
    #cont_right article:last-child {border-bottom: 0;} */
    
    /*#contents article:nth-child(4) {border-bottom: 0;}*/
    
     
    /* MediaQuery 320 / 480 / 600 / 768 / 960 / 1024 / 1280*/
    /* 화면 너비 0~1280px 피시화면 */
    
    @media (max-width: 1280px){
       .container { width: 100%}
       .row {padding: 0 15px;}
       #contents .container {border: 0;}
    }
    
    /* 화면 너비 0~1024px 노트북 */
    @media (max-width:1024px){
    	.nav li {width: 25%;}
    }
    
    /* 화면 너비 0~960px */
    @media (max-width: 960px){
    	#cont_right {position: static; border-top: 1px solid #dbdbdb;  width: 100%;} 
    	#cont_center {margin-right: 0px; border-right: 0;}
    	.square a {width: 24%; }
    	.square a:nth-child(5n) {display: none;}
    
    	#cont_right {overflow: hidden;}
    	#cont_right .cbox {float: left; width: 33.33333%; box-sizing: border-box;  }
    	#cont_right .box7 {border-right:1px solid #dbdbdb; border-bottom: 0; }
    	#cont_right .box8 {border-right:1px solid #dbdbdb; border-bottom: 0;  }
    	#cont_right .box9 {border-right:1px solid transparent;}
    }
    
    /* 화면 너비 0~768px 타블렛 */
    @media (max-width: 768px){
    	.nav li {width: 33.3333%;}
    	.square a {width: 32.333333%; }
    	.square a:nth-child(5) {display: block;}
    
    }
    
    /* 화면 너비 0~600px 타블렛 */
    @media (max-width:600px){
    	.nav {display: none;}
    	#cont_left {width: 100%; float: none;} 
    	#cont_center {border-left: 0; border-top: 1px solid #000;}
    
    	.title, .icon-font, .tit .btn {display: none;}
    	.cbox.box1 {padding: 0; border-bottom: 0;}
    	.cbox.box1 .cbox_tit {display: none; }
    	.cbox.box1 .cbox_desc {display: none; }
    	.cbox.box1 .menu li a i {display: none; }
    	.cbox.box1 .menu ul {overflow: hidden;}
    	.cbox.box1 .menu li {float: left; width: 33.3333%; border-right: 1px solid #dbdbdb; box-sizing: border-box; text-align: center;}
    	.cbox.box1 .menu li:nth-child(3n) {border-right: 0;}
    	.cbox.box1 .menu li a{color:#fff; text-shadow: 0 0 5px rgba(0,0,0,0.5)}
    	.cbox.box2 {background-color: #f1f4fb;  }
    	.square a {width: 49%; }
    	.square a:nth-child(5) {display: none;}
    
    	#cont_right .cbox {width: 50%;}
    	#cont_right .box8 {display: none; }
    
    }
    
    /* 화면 너비 0~480px 모바일 */
    @media (max-width: 480px){
    
    }
    
    /* 화면 너비 0~320px 모바일(아이폰 5s) */
    @media (max-width: 320px){
    	.square a {width: 98%; margin: 1%;}
    
    	#cont_right .cbox {width: 100%;}
    	#cont_right .box7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
    }
    
    @charset "UTF-8";
    
    /* 여백 초기화 */
    body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul,figure,figcaption{margin:0;padding:0}
    
    /* 테투리 초기화 */
    fieldset,img{border:0 none}
    
    /* 리스트 스타일 초기화 */
    dl,ul,ol,menu,li{list-style:none}
    
    /* quotes 초기화 */
    blockquote, q{quotes: none}
    blockquote:before, blockquote:after,q:before, q:after{content:'';content:none}
    
    /* 정렬 초기화 */
    input,select,textarea,button{vertical-align:middle}
    
    /* 버튼 초기화 */
    button{border:0 none;background-color:transparent;cursor:pointer}
    
    /* 배경 속성 초기화 */
    body{background:#fff;direction:ltr;-webkit-text-size-adjust:none}
    
    /* 폰트 초기화 */
    body,th,td,input,select,textarea,button{font-size:12px;line-height:1.7;font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic",dotum,"돋움",sans-serif;color:#222;}
    
    /* 제목 폰트 초기화 */
    h1,h2,h3,h4,h5,h6 {font-size: 12px; font-weight:normal;}
    
    /* 링크 초기화 */
    a{color:#222;text-decoration:none}
    a:hover{color:#118eff;text-decoration:none}
    a:active{background-color:transparent}
    
    /* 폰트 스타일 초기화 */
    address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
    
    /* 반응형 이미지 */
    img, video {width: 100%;}
    
    /* ir 효과 */
    .ir_pm{display:block;overflow:hidden;font-size:1px;line-height:0;text-indent:-9999px}
    .ir_wa{display:block;overflow:hidden;position:relative;width:100%;height:100%;z-index:-1}
    .show{display:block}
    .hide{display:none}
    
    /* clearfix */
    .clearfix {*zoom:1;}
    .clearfix:before, .clearfix:after {display: block; content: ''; line-height: 0;}
    .clearfix:after {clear: both;}
    
    /* video */
    .video {position: relative; width: 100%; padding-bottom: 56.25%; }
    .video .iframe {width: 100%; height: 300px; position: absolute; border: 0;}
    
    
    
    /* Padding, Margin */
    .pt00 {padding-top: 0px !important;}
    .pt05 {padding-top: 5px !important;}
    .pt10 {padding-top: 10px !important;}
    .pt15 {padding-top: 15px !important;}
    .pt20 {padding-top: 20px !important;}
    .pt25 {padding-top: 25px !important;}
    .pt30 {padding-top: 30px !important;}
    .pt35 {padding-top: 35px !important;}
    .pt40 {padding-top: 40px !important;}
    .pt45 {padding-top: 45px !important;}
    .pt50 {padding-top: 50px !important;}
    .pt55 {padding-top: 55px !important;}
    .pt60 {padding-top: 60px !important;}
    
    .pl00 {padding-left: 0px !important;}
    .pl05 {padding-left: 5px !important;}
    .pl10 {padding-left: 10px !important;}
    .pl15 {padding-left: 15px !important;}
    .pl20 {padding-left: 20px !important;}
    .pl25 {padding-left: 25px !important;}
    .pl30 {padding-left: 30px !important;}
    .pl35 {padding-left: 35px !important;}
    .pl40 {padding-left: 40px !important;}
    .pl45 {padding-left: 45px !important;}
    .pl50 {padding-left: 50px !important;}
    .pl55 {padding-left: 55px !important;}
    .pl60 {padding-left: 60px !important;}
    
    .pr00 {padding-right: 0px !important;}
    .pr05 {padding-right: 5px !important;}
    .pr10 {padding-right: 10px !important;}
    .pr15 {padding-right: 15px !important;}
    .pr20 {padding-right: 20px !important;}
    .pr25 {padding-right: 25px !important;}
    .pr30 {padding-right: 30px !important;}
    .pr35 {padding-right: 35px !important;}
    .pr40 {padding-right: 40px !important;}
    .pr45 {padding-right: 45px !important;}
    .pr50 {padding-right: 50px !important;}
    .pr55 {padding-right: 55px !important;}
    .pr60 {padding-right: 60px !important;}
    
    .pb00 {padding-bottom: 0px !important;}
    .pb05 {padding-bottom: 5px !important;}
    .pb10 {padding-bottom: 10px !important;}
    .pb15 {padding-bottom: 15px !important;}
    .pb20 {padding-bottom: 20px !important;}
    .pb25 {padding-bottom: 25px !important;}
    .pb30 {padding-bottom: 30px !important;}
    .pb35 {padding-bottom: 35px !important;}
    .pb40 {padding-bottom: 40px !important;}
    .pb45 {padding-bottom: 45px !important;}
    .pb50 {padding-bottom: 50px !important;}
    .pb55 {padding-bottom: 55px !important;}
    .pb60 {padding-bottom: 60px !important;}
    
    .mt00 {margin-top: 0px !important;}
    .mt05 {margin-top: 5px !important;}
    .mt10 {margin-top: 10px !important;}
    .mt15 {margin-top: 15px !important;}
    .mt20 {margin-top: 20px !important;}
    .mt25 {margin-top: 25px !important;}
    .mt30 {margin-top: 30px !important;}
    .mt35 {margin-top: 35px !important;}
    .mt40 {margin-top: 40px !important;}
    .mt45 {margin-top: 45px !important;}
    .mt50 {margin-top: 50px !important;}
    .mt55 {margin-top: 55px !important;}
    .mt60 {margin-top: 60px !important;}
    
    .ml00 {margin-left: 0px !important;}
    .ml05 {margin-left: 5px !important;}
    .ml10 {margin-left: 10px !important;}
    .ml15 {margin-left: 15px !important;}
    .ml20 {margin-left: 20px !important;}
    .ml25 {margin-left: 25px !important;}
    .ml30 {margin-left: 30px !important;}
    .ml35 {margin-left: 35px !important;}
    .ml40 {margin-left: 40px !important;}
    .ml45 {margin-left: 45px !important;}
    .ml50 {margin-left: 50px !important;}
    .ml55 {margin-left: 55px !important;}
    .ml60 {margin-left: 60px !important;}
    
    .mr00 {margin-right: 0px !important;}
    .mr05 {margin-right: 5px !important;}
    .mr10 {margin-right: 10px !important;}
    .mr15 {margin-right: 15px !important;}
    .mr20 {margin-right: 20px !important;}
    .mr25 {margin-right: 25px !important;}
    .mr30 {margin-right: 30px !important;}
    .mr35 {margin-right: 35px !important;}
    .mr40 {margin-right: 40px !important;}
    .mr45 {margin-right: 45px !important;}
    .mr50 {margin-right: 50px !important;}
    .mr55 {margin-right: 55px !important;}
    .mr60 {margin-right: 60px !important;}
    
    .mb00 {margin-bottom: 0px !important;}
    .mb05 {margin-bottom: 5px !important;}
    .mb10 {margin-bottom: 10px !important;}
    .mb15 {margin-bottom: 15px !important;}
    .mb20 {margin-bottom: 20px !important;}
    .mb25 {margin-bottom: 25px !important;}
    .mb30 {margin-bottom: 30px !important;}
    .mb35 {margin-bottom: 35px !important;}
    .mb40 {margin-bottom: 40px !important;}
    .mb45 {margin-bottom: 45px !important;}
    .mb50 {margin-bottom: 50px !important;}
    .mb55 {margin-bottom: 55px !important;}
    .mb60 {margin-bottom: 60px !important;}