@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css); * {margin:0; padding:0; border:none; box-sizing:border-box; -moz-box-sizing:border-box; vertical-align: top; text-align:center; } html,body {height:100%; background:#efefef;font-family: "Myriad","Tahoma","NBG","Apple SD Gothic","Malgun Gothic",Arial,"돋움",Dotum,sans-serif; } li { list-style: none; } a { text-decoration: none; } a:hover{ text-decoration:none; cursor:pointer; } img, ifram { border: 0; max-width: 100%; margin: 0 auto; box-sizing: border-box;} footer,header,hgroup,menu,nav,contents {display: block;} /*font-size: -pixelx 16px*/ /* wrap */ #wrap {width: 100%; height: auto; background: #2A0A1B;} /* full */ #full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 888; background: transparent; display:none;} /* head */ /* head pc */ /* header */ #header { width: 1280px; height: auto; margin: 0 auto; z-index: 777; box-sizing: border-box;} /* logo */ #logo { width: 100%; text-align:center; margin-bottom: 10px; } /* manu */ /*font-size:14px*/ /*#menu { overflow: hidden; text-align: center; } #manu-title {float: left; width: 20%; } #manu-title a { display:block; height: 70px; line-height: 70px; text-align: center; color: #FFFF00 ; font-size: 1.25em; font-weight: bold; border-right:1px solid #424242; } #manu-title a:hover { color: #FF0040; } #sub-manu { display:none; float: none; height: auto; } #sub-manu li { height: 40px; } #sub-manu a { line-height: 40px;font-size: 0.875em; color: #E6E6E6; font-weight:bold; } #sub-manu a:hover { color: #FFFF00; }*/ #nav { width: 100%; box-sizing: border-box; } #menu {overflow: hidden; text-align: center; } #menu_title2, #menu_title6 {float: left; width: 18%; } #menu_title3, #menu_title4 {float: left; width: 22%; } #menu_title5 {float: left; width: 20%; } .menu_title a { display:block; height: 50px; text-align: center; color: #FFFF00 ; font-size: 1.25em; font-weight: bold; border-right:1px solid #424242; } .menu_title a:hover { color: #FF0040;} .menu_sub1, .menu_sub2, .menu_sub3, .menu_sub4, .menu_sub5, .menu_sub6 { display:none; float: none; height: auto; } .menu_sub1 a, .menu_sub2 a, .menu_sub3 a, .menu_sub4 a, .menu_sub5 a, .menu_sub6 a { font-size: 0.875em; height: 30px; line-height: 30px;color: #E6E6E6; font-weight:bold; } /*font-size:14px*/ .menu_sub1 a:hover, .menu_sub2 a:hover, .menu_sub3 a:hover, .menu_sub4 a:hover, .menu_sub5 a:hover, .menu_sub6 a:hover {color: #FFFF00; } /* top-img */ #top-img { } /* head pc end */ /* body */ #contents { width:100%; height: auto; text-align: center; box-sizing: border-box; } #first-contents { width: 1280px; margin: 0 auto; text-align: center; padding-bottom: 20px; margin-bottom: 20px; } .contents-title1 { width: 100%; height: 50px; } .contents-title1 a { line-height: 50px; font-size: 1.25em; color:#D8D8D8; font-weight: bold; } .contents-text1 a {height: 30px; line-height: 30px; font-size: 1em; color:#D8D8D8; font-weight: normal; } #second-contents { width: 1280px; margin: 0 auto; text-align: center; overflow: hidden; } #second-contents1 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #second-contents2 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #second-contents3 {float:left; width: 31%; height:auto; margin-bottom: 20px; } #contents-title1 {width: 100%; margin: 0; overflow: hidden; border: 1px solid #6E6E6E;} .contents-title2 { float: left; width: 70%; height: 50px; text-align: left; } .contents-title2 a{ line-height: 50px; font-size: 1.25em; color: #FFFF00 ; font-weight: bold; } .contesnts-more2 { float: left; width: 30%; height: 50px; } .contesnts-more2 a { line-height: 50px; font-size: 1em; color: #FFF ; font-weight: normal; } #contents-text2 { width: 100%; height: auto; } .contents-text2 {float: none; width: 100%; height: 150px; background: #FFF; margin-top: 5px; padding-top: 10px;} /******** height: 300px; background: #FFF; 수정해야함 ********/ .contents-text2 a { width: 100%; text-align: left;} /******** height: 300px; background: #FFF; 수정해야함 ********/ #third-contents { width: 1280px; margin: 0 auto; text-align: center; padding-bottom: 20px; margin-bottom: 30px; overflow: hidden; } #third-contents1 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #third-contents2 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #third-contents3 {float:left; width: 31%; height:auto; margin-bottom: 20px; } #third-contents4 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #third-contents5 {float:left; width: 31%; height:auto; margin-right: 3.5%; margin-bottom: 20px; } #third-contents6 {float:left; width: 31%; height:auto; margin-bottom: 20px; } #contents-text3 { width: 100%; height: auto; } .contents-text3 {float: none; width: 100%; height: auto; margin-top: 5px;} #fourth-contents { width: 1280px; height: auto; margin: 0 auto; text-align: center; padding-bottom: 20px; margin-bottom: 30px; overflow: hidden; } #contents-text4 { width: 98%; height: auto; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; } #fifth-contents { display: none; width: 95%; height: auto; margin: 0 auto; text-align: center; margin-bottom: 20px; } #contents-text5 { width: 100%; height: auto; } .contents-text5 { width: 100%; height: auto; margin-top: 5px;} /******** height: 300px; background: #FFF; 수정해야함 ********/ /* footer */ #footer {width: 1280px; height: auto; margin: 0 auto; text-align: center; box-sizing: border-box; padding-bottom:50px; border-top: 5px groove #333; } #footer-logo { width: 100%; height: auto;} #footer-text { width: 100%; height: auto; overflow: hidden; } .footer-text-tel {float:left; width: 50%; height: 50px; text-align: right; padding: 5px; } .footer-text-tel a { line-height: 50px; font-size: 1.5em; color: #FFFF00 ; font-weight: bold; } .footer-text-add {float:left; width: 50%; height: 50px; text-align: left; } .footer-text-add a { line-height: 60px; font-size: 1em; color: #FFFF00 ; } #m-footer-logo { display: none; width: 100%; height: 30px; margin-top: 20px;} #m-footer-logo a { font-size: 2em; color: #FFF ; font-weight: bold; } #btm_text { float:left; width:100%; height: 20px; overflow: none; } #btm_text a {display:block; color: #FAFAFA; font-size: 0.65em; } #btm_query { display: none; width:100%; height: 100px; margin:0 auto; text-align: left; overflow:hidden;} .btm_query { float: left; height: 100px; overflow: hidden; } .btm_query img { float: left; margin-top: 20px; } .btm_query a { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; } .btm_query_tel { float: left; height: 100px; overflow: hidden; } .btm_query_tel img { float: left; margin-top: 20px; } .btm_query_tel a { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; } #mobile-btm { display: none; width:1280px; height: 100px; margin:0 auto; text-align: left; overflow:hidden;} .mobile-btm-customer { float: left; height: 100px; margin-left: 38%; width: 15%; overflow: hidden; } /* body end*/ /************************************************************/ /*모바일 */ /* head mobile */ /* mobile-header */ /* mobile-logo */ #mobile-logo { display:none; width: 100% ; margin: 0 auto; text-align: center; overflow: hidden; padding-bottom: 30px; padding-top: 10px; } .mobile-smanu-bt { float: left; width: 15%; } .mobile-smanu-bt img { width: 40px; margin-top: 5px;} .mobile-logo { float: left; width: 70%; padding-top: 2%; } .mobile-logo a {font-size: 2em; color: #FFF;} .mobile-tel-bt { float: left; width: 15%; margin-top: 5px;} .mobile-tel-bt img { width: 40px; } /* mobile-manu */ #mobile-smanu { display: block; width: 200px; height: 100%; margin: 0 auto; padding-top: 20px; position: absolute; z-index: 999; top: 0; left:-300px; background:#333; } #back { font-size: 1.25em; line-height: 1.7em; text-align:right; margin-right: 15px; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #FFF; } #mobile-smanu-title {display: block; width: 200px; margin: 0 auto; background: #333;} #mobile-smanu-title a { display: block; padding: 16px 18px; font-size: 1.25em; color: #FFF; text-decoration: none; border-bottom: 1px solid #212121; } #mobile-smanu-title a:hover ,#manu-title a.open { color: #FFF;border-bottom-color: #384f76; background-color: #7F7F7F; } #mobile-sub-smanu { display: none; background: #CCCCCC;; } #mobile-sub-smanu a { display: block; background: none; padding: 10px 0px; padding-left: 30px; font-size: 1.25em; text-decoration: none; color: #000; } #mobile-sub-smanu a :hover{ background: #CCCCCC; } /* head mobile end */ #mobile-btm { display: none; width:1280px; height: 100px; margin:0 auto; text-align: left; overflow:hidden;} .mobile-btm-customer { float: left; height: 100px; margin-left: 38%; width: 15%; overflow: hidden; } .mobile-btm-customer img { float: left; margin-top: 20px; } .mobile-btm-customer a { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; } .mobile-btm-tel { float: left; height: 100px; width: 15%; overflow: hidden; } .mobile-btm-tel img { float: left; margin-top: 20px; } .mobile-btm-tel a { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; } /*1280*/ @media screen and (max-width: 1280px) { #header { width: 100%;} #first-contents { width: 100%;} #second-contents { width: 95%;} #third-contents { width: 95%;} #fourth-contents { width: 95%;} #footer { width: 95%;} #mobile-btm { width: 95%;} } /*900*/ @media screen and (max-width: 900px) { .menu_title a { height: 30px; line-height: 30px; } .contesnts-more2 a { line-height: 50px; font-size: 0.7em; color: #FFF ; font-weight: normal; } #second-contents1 {width: 49%; margin-right: 2%; } #second-contents2 {width: 49%; margin-right: 0%; } #second-contents3 { display: none;} #fourth-contents { width: 95%;} #footer { padding-bottom: 50px;} } /*700*/ @media screen and (max-width: 700px) { html, body {font-size: 12px;} #third-contents { margin-bottom: 0px; padding-bottom: 0px; } #fourth-contents { padding-bottom: 0px; } #footer { padding-bottom: 20px;} .footer-text-tel { float: none; width: 99%; height: 30px; margin-right: 0%; text-align:center; } .footer-text-tel a { line-height: 30px; } .footer-text-add {float: none; width: 99%; height: 30px; margin-right: 0%; text-align:center;} .footer-text-add a { line-height: 30px; } #footer-logo { display: none; } #m-footer-logo { display: block; } .contents-text1 a { height: 20px; line-height: 20px; } #mobile-btm { display: block; } #btm_query { height: 80px;display: block; } .btm_query { height: 80px;margin-right: 10px; } .btm_query img { width: 40px; } .btm_query a {height: 80px; line-height: 80px; } .btm_query_tel { height: 80px; } .btm_query_tel img { width: 40px; } .btm_query_tel a {height: 80px; line-height: 80px; } #btm_text a {font-size: 0.5em; } } /*600*/ @media screen and (max-width: 600px) { #manu-title a { height: 30px; line-height: 30px; } #first-contents { margin-bottom: 0px; } #third-contents1 {width: 49%; margin-right: 2%; } #third-contents2 {width: 49%; margin-right: 0%; } #third-contents3 {width: 49%; margin-right: 2%; } #third-contents4 {width: 49%; margin-right: 0%; } #third-contents5 {width: 49%; margin-right: 2%; } #third-contents6 {width: 49%; margin-right: 0%; } #second-contents1 { display: none; } #second-contents2 {width: 100%; margin-right: 0%; } } /*500*/ @media screen and (max-width: 500px) { #logo { display: none; } #mobile-logo { display: block;} .btm_query { padding-left: 20%} .btm_query_tel { padding-right:20%;} }