<!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> <!-- js--> <script src="assets/js/html5shiv.js"></script> <script src="assets/js/ie-checker-min.js"></script> <!-- style--> <link rel="stylesheet" href="assets/css/reset.css"> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/owl.carousel.css"> <link rel="stylesheet" href="assets/css/lightgallery.css"> <link rel="stylesheet" href="assets/css/lg-fb-comment-box.css"> <link rel="stylesheet" href="assets/css/lg-transitions.css"> <!-- font css--> <link rel="stylesheet" href="assets/css/font-awesome.css"> <!--web font --> <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" /> <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css" /> <!-- HTML 5 Support & js Version Checker--> <!--[If 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/ico/favicon.ico"> <link rel="apple-touch-icon" href="assets/ico/icon_60.png"> <link rel="apple-touch-icon" sizes="76x76" href="assets/ico/icon_76.png"> <link rel="apple-touch-icon" sizes="120x120" href="assets/ico/icon_120.png"> <link rel="apple-touch-icon" sizes="152x152" href="assets/ico/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="quick"> <a href="#">Design Cafe</a> <a href="#">Publisher Cafe</a> </div> <div class="title"> <p>Professoional Web Publisher</p> <h1><a href="#">sojinkim.co.kr</a></h1> </div> <div class="icon-font"> <ul> <li><a href="#"><i class="fa fa-lightbulb-o" aria-hidden="true"></i><span>idea</span></a></li> <li><a href="#"><i class="fa fa-behance" aria-hidden="true"></i><span>behance</span></a></li> <li><a href="#"><i class="fa fa-edge" aria-hidden="true"></i><span>edge</span></a></li> <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i><span>google</span></a></li> </ul> </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 Reference1</a></li> <li><a href="#">HTML Reference2</a></li> <li><a href="#">HTML Reference3</a></li> <li><a href="#">HTML Reference4</a></li> <li><a href="#">HTML Reference5</a></li> <li><a href="#">HTML Reference6</a></li> <li><a href="#">HTML Reference7</a></li> <li><a href="#">HTML Reference8</a></li> <li><a href="#">HTML Reference9</a></li> <li><a href="#">HTML Reference10</a></li> <li><a href="#">HTML Reference11</a></li> <li><a href="#">HTML Reference12</a></li> <li><a href="#">HTML Reference13</a></li> <li><a href="#">HTML Reference14</a></li> <li><a href="#">HTML Reference15</a></li> <li><a href="#">HTML Reference16</a></li> <li><a href="#">HTML Reference17</a></li> <li><a href="#">HTML Reference18</a></li> <li><a href="#">HTML Reference19</a></li> <li><a href="#">HTML Reference20</a></li> <li><a href="#">HTML Reference21</a></li> <li><a href="#">HTML Reference22</a></li> <li><a href="#">HTML Reference23</a></li> <li><a href="#">HTML Reference24</a></li> <li><a href="#">HTML Reference25</a></li> <li><a href="#">HTML Reference26</a></li> <li><a href="#">HTML Reference27</a></li> <li><a href="#">HTML Reference28</a></li> <li><a href="#">HTML Reference29</a></li> <li><a href="#">HTML Reference30</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="#">Standerd<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> <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>Figure2</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="이미지1"></div> <div class="item"><img src="assets/img/fullimage4.jpg" alt="이미지2"></div> <div class="item"><img src="assets/img/fullimage5.jpg" alt="이미지3"></div> <div class="item"><img src="assets/img/fullimage6.jpg" alt="이미지4"></div> <div class="item"><img src="assets/img/fullimage7.jpg" alt="이미지5"></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="이미지2"> </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="이미지3"> </div> <!-- //figure-img3--> </article> </section> <!-- //cont-right --> </div> </section> </main> <footer id="footer"> <div class="container"> <div class="footer"> <ul> <li><a href="#"><span>사이트 도움말</span></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://sojinkim.co.kr">sojinkim.co.kr</a> <span>All Right Reserved</span> </address> <p style="padding-top:20px;"> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!" /> </a> </p> </div> </div> </footer> <!-- scrtip --> <script type="text/javascript" src="assets/js/jquery1.12.4.min.js"></script> <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script> <script type="text/javascript" src="assets/js/lightgallery.min.js"></script> <script type="text/javascript" src="assets/js/custom.js"></script> <script type="text/javascript" src="assets/js/custom.js"></script> <script type="text/javascript" src="assets/js/custom.js"></script> <script src="assets/js/lg-autoplay.min.js"></script> <script src="assets/js/lg-thumbnail.min.js"></script> <script src="assets/js/lg-hash.min.js"></script> <script src="assets/js/lg-fullscreen.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 {display: none; } #tit {background-color: #fff; border-bottom:1px solid #000; 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(4) {border-bottom: 0;} #cont_center article:last-child(4) {border-bottom: 0;} #cont_right article:last-child(4) {border-bottom: 0;} #contents article:last-child {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 { } .blog h5 { font-size: 14px; color: #2f7fa6; padding-bottom: 3px; } .blog .blog_img { position: relative; display: block; background-color: #111; 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: background-color 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%); z-index:100; text-transform: uppercase; 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; background-color: #111; margin-bottom: 3px; overflow: hidden; } .blog2 .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;} .blog2 .blog_img:hover:after {background-color: rgba(0,0,0,0.4);} .blog2 .blog_img img {display: block; transform: scale(1,1);} .blog2 .blog_img:hover img { transform: scale(1.3,1.3); transition: all 0.3s ease-in-out; } .blog2 .blog_img em {opacity: 0;position: absolute; left: 50%; top: 50%; color: #fff; transform: translate(-50%,-50%); z-index:100;text-transform: uppercase; 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: grayscale(100%);} .square a:nth-child(2) img:hover {filter: brightness(200%); } .square a:nth-child(3) img:hover {filter: contrast(150%); } .square a:nth-child(4) img:hover {filter: hue-rotate(50deg); } .square a:nth-child(5) img:hover {filter: invert(20%); } .square a:nth-child(6) img:hover {filter: opacity(60%);} .square a:nth-child(7) img:hover {filter: saturate(10%); } .square a:nth-child(8) img:hover {filter: sepia(40%); } .square a:nth-child(9) img:hover {filter: blur(1px); } .square a:nth-child(10) img:hover {filter: brightness(20%); } /* 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 0;} .footer ul { } .footer li {display: inline; padding: 0 10px; background: url(../img/bar.gif) no-repeat 0 2px; white-space: nowrap;} .footer address { padding-top: 20px;} .footer li:first-child {background: none;} /* Media Query 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */ /* 화면 너비 0~1280px pc 화면 */ @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: 0; border-right: 0;} .square a { float: left; width: 24%; } .square a:nth-child(5n) {display: none;} #cont_right {overflow: hidden; } #cont_right .cbox {float: left; width: 33.333%; 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 { float: left; width: 32.3333%; } .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 #dbdbdb;} .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.33%; border-right: 1px solid #dbdbdb; box-sizing: border-box; text-align: center;} /*.cbox.box1 .menu li:nth-child(3) {border-right: 0;} .cbox.box1 .menu li:nth-child(6) {border-right: 0;}*/ .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 { float: left; width: 49%; } .square a:nth-child(5) {display: none;} #cont_right .cbox {float: left; width: 50%; box-sizing: border-box;} #cont_right .box8 { border-right: 1px solid transparent; border-bottom: 0; } #cont_right .box9 { border-right: 1px solid transparent; display: none;} } /* 화면 너비 0~480px 모바일 */ @media (max-width : 480px){ } /* 화면 너비 0~320px 모바일(아이폰 5s) */ @media (max-width : 320px){ .square a { float: left; width: 98%; margin: 1%; } #cont_right .cbox {float: left; 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;} /* padding, margin setting */ .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;}