#mainVisual {overflow: hidden;position: relative;} #mainVisual .swiper-slide {height: 732px;} /* 백그라운드는 높이지정을안해주면 높이가 없다고함 */ #mainVisual .mainVisual01 {background: url("../img/main/visual01.png")no-repeat 50% 0;} #mainVisual .mainVisual02 {background: url("../img/main/visual02.png")no-repeat 50% 0;} #mainVisual .mainVisual03 {background: url("../img/main/visual03.png")no-repeat 50% 0;} #mainVisual .mainVisualtext {position: absolute;z-index: 5;bottom: 350px;width: 100%;text-align: center;color: white;} #mainVisual .btnPrev {position: absolute;left: 20px;top: 50%;margin-top: -32px;z-index: 2;} #mainVisual .btnNext {position: absolute;right: 20px;top: 50%;margin-top: -32px;z-index: 2;} #mainVisual .pager {position: absolute;z-index: 3;bottom: 60px;width: 100%;text-align: center;} #mainVisual .pager .swiper-pagination-bullet {width: 12px;height: 12px;border: 2px solid #fff;opacity: 1;background: none;transition:all 0.5s ease-out;} #mainVisual .pager .swiper-pagination-bullet-active {background: #fff;} #mainVisual .subtop {height: 200px;} #mainVisual .mainVisual04 {background: url("../img/main/visual04.png")no-repeat 50% 0;} #mainVisual .subtoptext {position: absolute;z-index: 3;bottom: 70px;width: 100%;text-align: center;color: white;} #mainVisual .subtoph1 {position: absolute;z-index: 3;bottom: 60px;width: 100%;text-align: center;} #mainVisual .container {padding-top: 250px;} #mainVisual .container a {display:inline-block;padding: 10px 45px;background: #1471b8;color: #fff;text-align: center;} #mainVisual .main {font-size: 3.3rem;line-height: 1.2;font-weight: bold;margin-bottom: 50px;} #mainVisual .main strong {color: #1471b8;font-weight: bold;} #mainVisual .sub {font-size: 1.25rem;margin-bottom: 30px;} /* em은 부모수치에서 배수, rem은 원래 수치에서 배수*/ #mainVisual .visual02 {text-align: center;color: #fff;} #mainVisual .visual02 .container a {background: none;color: #fff;border: 1px solid #fff;} #mainContents {overflow: hidden;position: relative;text-align: center;height: 400px;width: 100%;background-color: white;color: #333;} #mainContents h2 {font-size: 3.3rem;font-weight: bold;} #mainContents .desc {1.13rem;margin-bottom: 30px;} #mainContents .container div > img {margin: 0 9px;border: 1px solid #777;} #mainContents .container > div {float: left;} #mainBanner {overflow: hidden;position: relative;text-align: center;height: 510px;width: 100%;background-color: #f3f3f3;} #mainBanner h6 {font-weight: 800;font-size: 24px;color: #555;} #mainBanner span {font-size: 12px;color: #777;letter-spacing: -1px;} #mainBanner .container div > img {margin: 0 10px;} #mainBanner .container > div {float: left;} #mainBanner .container {border-bottom: 0px solid #888;padding-bottom: 50px;} .toptext{ padding-top: 20px; padding-bottom: 10px; text-align: center; } .toptext h3{ font-size: 30px; font-weight: 600; color: rgba(12,91,175,1.00); } .toptext h5{ font-size: 14px; } .submenu{ margin-right: 7px; padding-top: 10px; height:275px; border:solid 1px rgba(185,184,184,1.00) ; background-color: white; padding-bottom: 10px; } .submenu h4{ font-size: 16px; color:rgba(15,167,185,1.00); font-weight: 400; } .submenu img{ width: 270px; } .submenu span{ font-size: 13px; color:rgba(83,81,81,1.00) ; font-weight: 300; } .cont03{width:100%; height:202px; padding:50px 0; } .cont03 .contInner { width:1140px; margin:0 auto; } .cont03 .notice_cont{width:380px; background:url('../../img/notice_bg.jpg') no-repeat left 5px, #fff; float:left; height:205px; margin-right:8.5px;border: 1px solid rgba(203,198,198,1.00);} .notice_cont h4{color:#333; font-size:18px; font-weight:normal; line-height:100%; padding:25px 29px 147px 25px; float:left; font-weight:bold;} .notice_cont .more{display:block; width:34px; height:34px; position:absolute; margin-left:441px;} .notice_cont ul{width:330px; float:right; padding-top:60px;} .notice_cont li a{color:#666; line-height:25px; overflow:hidden; clear:both; font-size:14px;} .notice_cont li a span{float:right; line-height:25px; font-size:13px; color:#aaaaaa; letter-spacing:0pt; padding-right:30px; font-family: 'Noto Sans', sans-serif;} .notice_cont li img { position:relative; top:-1px; } .cont03 .down_cont{width:380px; background:#42B67F; float:left; height:205px; margin-right:8.5px;} .down_cont h4 { color:#fff; font-size:18px; padding:25px 0 144px 10px; float:left; font-weight:bold; } .down_cont ul { float:right; padding:50px 21px 0 15px; float:right; width:222px;font-size: 13px;} .down_cont ul li { width:84px; height:65px; background:url('../../img/btn_down.gif') no-repeat; text-align:center; float:left;} .down_cont ul li.right { margin-right:3px; } .down_cont ul li.bottom { margin-bottom:3px; } .down_cont ul li a { width:84px; height:84px; display:block; color:#fff; font-size:14px; font-weight:bold; line-height:65px; } .cont03 .down_cont1{width:380px; background:#fff; float:left; height:205px; margin-right:8.5px;} .down_cont h4 { color:#fff; font-size:18px; padding:25px 0 144px 10px; float:left; font-weight:bold; } .down_cont ul { float:right; padding:50px 21px 0 15px; float:right; width:222px;font-size: 13px;} .down_cont ul li { width:84px; height:65px; background:url('../../img/btn_down.gif') no-repeat; text-align:center; float:left;} .down_cont ul li.right { margin-right:3px; } .down_cont ul li.bottom { margin-bottom:3px; } .down_cont ul li a { width:84px; height:84px; display:block; color:#fff; font-size:14px; font-weight:bold; line-height:65px; } .cont03 .cscenter{width:324px; height:205px; border:1px solid #ddd; background:#fff; float:left;} .cscenter h4{font-weight:bold; font-size:18px; color:#fff; padding:28px 0 7px 25px;} .cscenter p {font-family: 'Noto Sans', sans-serif; font-weight:bold; color:#fff; font-size:24px; line-height:30px; padding:0 0 15px 25px;} .cscenter span { font-weight:normal; font-size:24px; line-height:30px; } .cscenter a { margin-left:25px; } #footer { position: relative; width: 100%; clear: both; overflow: hidden; padding-bottom: 45px; background: #006738; } .privacy { color: rgba(239,236,236,1.00); width: 1100px; margin: 0 auto; padding: 40px 0 25px 0; } .footer_in { width: 1100px; margin: 0 auto; } /* 반응형 코딩시작 * / @media all and (max-width:640px) { html,body { font-size: 12px;} .container {width: 100px;} #product .productBox {width: 100%;} #product li {width: 48%;margin: 1%;} } @media all and (max-width: 420px;) { #product li {width: 98px;margin: 1%; } /* 반응형 코딩 끝 */