@charset "utf-8"; /* 메인 롤링 이미지 */ #mainSlider {position:relative; margin-top:80px; overflow:hidden} #mainSlider ul.imgList {position:relative; width:1000%} #mainSlider ul.imgList li {position:relative; float:left; min-width:100vw; height:670px; background-size:cover !important; overflow:hidden} #mainSlider ul.imgList li.item1 {background:url(../../img/main_visual1.jpg) center top no-repeat} #mainSlider ul.imgList li.item2 {background:url(../../img/main_visual2.jpg) center top no-repeat} #mainSlider ul.imgList li.item3 {background:url(../../img/main_visual3.jpg) center top no-repeat} #mainSlider ul.imgList li img {position:absolute; display:block; top:0; left:0; width:100%; height:100%} #mainSlider ul.imgList li .caption {position:relative; top:20%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20} #mainSlider ul.imgList li .caption h2 {font-size:56px; font-weight:600; color:#000; line-height:1.1; max-width:75%} #mainSlider ul.imgList li .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px 0; background:#000} #mainSlider ul.imgList li .caption p {font-size:15px; color:#000; max-width:75%} #mainSlider ul.imgList li .caption a.btn {position:relative; display:inline-block; margin-top:60px; padding:10px 35px; font-size:15px; font-weight:600; color:#000; border:2px solid #000} #mainSlider ul.imgList li .caption a.btn span {position:relative; transition:all .3s ease; z-index:10} #mainSlider ul.imgList li .caption a.btn:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease} #mainSlider ul.imgList li .caption a.btn:hover:before {height:100%} #mainSlider ul.imgList li .caption a.btn:hover span {color:#fff} #mainSlider ul.imgList li .caption.white h2 {color:#fff !important} #mainSlider ul.imgList li .caption.white h2:after {background:#fff !important} #mainSlider ul.imgList li .caption.white p {color:#fff !important} #mainSlider ul.imgList li .caption.white a.btn {color:#fff; border:2px solid #fff} #mainSlider ul.imgList li .caption.white a.btn:before {background:#fff} #mainSlider ul.imgList li .caption.white a.btn:hover span {color:#000} #mainSlider ul.pagination {display:none; position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:50} #mainSlider ul.pagination li {display:inline-block; width:16px; height:16px; margin:0 3px; border:2px solid #fff; border-radius:50%; transition:all .3s ease; cursor:pointer} #mainSlider ul.pagination li.active {background:#fff} #mainSlider a.control {position:absolute; width:40px; height:50px; top:50%; margin-top:-25px; text-align:center; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .2s ease; z-index:50} #mainSlider a.control:hover {opacity:.7 !important; filter:alpha(opacity='70') !important} #mainSlider a.control i {color:#fff; line-height:50px} #mainSlider a.control.prev {left:30px} #mainSlider a.control.prev:hover {left:25px} #mainSlider a.control.next {right:30px} #mainSlider a.control.next:hover {right:25px} /*6개배너*/ #m_quick{clear:both; overflow:hidden} #m_quick li{ float:left; width:16.8%; height:230px;} #m_quick li:last-child{ width:16%; } #m_quick li a{ display:block; height:170px; cursor:pointer; text-align:center; } #m_quick li a.line{ background: url(../../images/main/quick_line.jpg) no-repeat right;} #m_quick li a h4{ text-align:center; padding:34px 0 0 0; color:#595959; font-size:16px; font-weight:700; letter-spacing:-1px;} #m_quick li a p{ font-size:12px; color:#707070; text-align:center; padding-top:97px; height:44px; line-height:140%} #m_quick li a p span{ display:block} #m_quick li a span.text{ margin:0 auto; background:url(../images/main/quick_btn.png) no-repeat; width:73px; height:28px; text-align:center; font-size:12px; font-weight:700; display:inline-block; line-height:25px;} #m_quick li.bg01{ background:#f1f1f1 url(../../img/images/icon1.png) no-repeat;background-size:209px 209px; background-position: center;} #m_quick li.bg02{ background:#18b2a8 url(../../img/images/icon4.png) no-repeat;background-size:209px 209px; background-position: center;} #m_quick li.bg02 a p {color:#fff;} #m_quick li.bg02 a h4 {color:#fff;} #m_quick li.bg03{ background:#3d3d3d url(../../img/images/icon5.png) no-repeat;background-size:209px 209px;background-position: center;} #m_quick li.bg03 a p {color:#fff;} #m_quick li.bg03 a h4 {color:#fff;} #m_quick li.bg04{ background:#f79b73 url(../../img/images/icon6.png) no-repeat;background-size:209px 209px; background-position: center;} #m_quick li.bg04 a h4 {padding:120px 0 0 0; font-size:20px; color:#fff} #m_quick li.bg04 a p {padding-top:4px; color:#fff } #m_quick li.bg05{ background:#18b2a8 url(../../img/images/icon2.png) no-repeat;background-size:209px 209px; background-position: center;} #m_quick li.bg05 a p {color:#fff;} #m_quick li.bg05 a h4 {color:#fff;} #m_quick li.bg06{ background:#f1f1f1 url(../../img/images/icon7.png) no-repeat;background-size:209px 209px; background-position: center;} #m_quick li.bg01 a span.text { color:#496bb3} #m_quick li.bg02 a span.text { color:#009dd0} #m_quick li.bg03 a span.text { color:#5fc323} #m_quick li.bg04 a span.text { color:#0bc3c1} #m_quick li.bg05 a span.text { color:#f47369} /*6개배너*/ /* 메인 섹션 */ #container .mainSection {position:relative; padding:40px 0} #container .mainSection .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px} #container .mainSection .inner:after {clear:both; display:block; content:''} #container .mainSection .inner .title {text-align:center; margin-bottom:30px} #container .mainSection .inner .title h2 {font-size:36px; font-weight:300; color:#555; line-height:1} #container .mainSection .inner .title h2:after {display:block; width:40px; height:1px; content:''; margin:20px auto 40px auto; background:#999} /* 상단 섹션 */ .mainSection.section1 .inner .latestBox {float:left; width:30%; margin-right:3%} .mainSection.section1 .inner > div .tit {text-align:left; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #eee; overflow:hidden; position: relative; } .mainSection.section1 .inner > div .tit h3 {float:left; font-size:16px; color:#444; line-height:1} .mainSection.section1 .inner > div .tit .btnMore { position: absolute; right:0; display:inline-block; padding:0 10px 10px 10px; } .mainSection.section1 .inner .latestBox > .board_output td {line-height:2; color:#ccc} .mainSection.section1 .inner .latestBox > .board_output td a {color:#666} .mainSection.section1 .inner .latestBox > .board_output td a:hover {text-decoration:none} .mainSection.section1 .inner .photoBox {float:left; width:44%} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {float:left; width:20%; height:157px; margin-left:5%; overflow:hidden} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td:first-child {margin-left:0} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td table {width:100% !important} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody img {display:block; width:100% !important; height:auto !important} .mainSection.section1 .inner .customerBox {float:right; width:20%} .mainSection.section1 .inner .customerBox .info h4 {font-size:28px; color:#444; line-height:1.2; margin-bottom:10px} .mainSection.section1 .inner .customerBox .info h4 a {font-size:28px !important; color:#444} .mainSection.section1 .inner .customerBox .info p {color:#777; margin-bottom:20px} .mainSection.section1 .inner .customerBox .info p span {font-weight:600} .mainSection.section1 .inner .customerBox .info i {font-weight:normal; color:#aaa; margin-right:8px} .mainSection.section1 .inner .customerBox .info a.btnContact {display:block; width:100%; height:50px; font-size:16px; color:#fff; text-align:center; line-height:46px; border:2px solid #303058; background: url(../../img/main_church.jpg) no-repeat 30% 50% #303058;padding-left:45px; transition:all .3s ease} .mainSection.section1 .inner .customerBox .info a.btnContact:hover {color:#000; background:#fff url(../../img/main_church_on.jpg) no-repeat 30% 50% ; } @media screen and (max-width:1024px) and (min-width:640px) { .mainSection.section1 .inner .customerBox .info a.btnContact {background: url(../../img/main_church.jpg) no-repeat 40% 50% #303058;padding-left:45px;} } /* 하단 섹션 */ .mainSection.section2 {padding-top:0 !important} .mainSection.section2:before {display:block; max-width:1300px; margin:0 auto 30px auto; content:''; border-top:1px solid #ececec} .mainSection.section2 .inner .imgArea {float:left; width:30%; height:300px; margin-right:3%} .mainSection.section2 .inner .desc {float:left; width:44%} .mainSection.section2 .inner .desc span {font-size:15px; color:#999; letter-spacing:2px} .mainSection.section2 .inner .desc h2 {font-size:34px; font-weight:600; color:#444; line-height:1; margin:10px 0 30px 0} .mainSection.section2 .inner .desc p {margin-bottom:30px; text-align:justify} .mainSection.section2 .inner .desc a.btn {display:inline-block; padding:6px 30px; color:#444; border:2px solid #ececec; border-radius:4px; background:#fff; transition:all .3s ease} .mainSection.section2 .inner .desc a.btn:hover {color:#fff; border-color:#000; background:#000} .mainSection.section2 .inner .rBanner {float:right; width:20%; height:300px} .mainSection.section2 .inner .rBanner img {display:block; width:100%; height:100%} /* 하단 좌측 페이드 슬라이더 */ #fadeSlider {position:relative} #fadeSlider > ul {position:relative; overflow:hidden} #fadeSlider > ul > li {position:absolute; top:0; left:0; z-index:5} #fadeSlider > ul > li.active {position:relative; z-index:30} #fadeSlider > ul > li > img {width:100%; height:100%} #fadeSlider > ol.indicator {position:absolute; top:30px; right:30px; z-index:50} #fadeSlider > ol.indicator > li {display:inline-block; width:14px; height:14px; margin:0 3px; border-radius:50%; background:#b5b1ab; cursor:pointer; transition:all .3s ease} #fadeSlider > ol.indicator > li.on {background:#18ae9f} /* 미디어 쿼리 */ @media screen and (max-width:1024px) { /* 메인 롤링 이미지 */ #mainSlider ul.imgList li {height:500px} #mainSlider ul.imgList li .caption h2 {font-size:38px} #mainSlider ul.imgList li .caption p {font-size:13px} #mainSlider ul.imgList li .caption a.btn {font-size:13px; margin-top:40px} /* 상단 섹션 */ .mainSection.section1 .inner .latestBox {float:none; width:100%; margin-bottom:30px} .mainSection.section1 .inner .photoBox {float:none; width:100%; margin-bottom:30px} .mainSection.section1 .inner .photoBox > .tbl_photo {margin:0 auto} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {width:23%; margin-left:2%; height:auto; padding:0 15px} .mainSection.section1 .inner .customerBox {float:none; width:100%} /* 하단 섹션 */ .mainSection.section2 .inner .imgArea {float:none; width:100%; height:auto; margin:0 0 30px 0} .mainSection.section2 .inner .desc {float:none; width:100%; margin-bottom:50px} .mainSection.section2 .inner .rBanner {float:none; width:60%; height:auto; margin:0 auto} } @media screen and (max-width:970px) and (min-width:640px) { #m_quick{overflow:hidden} #m_quick li{ float:left; width:100%; height:87px;} #m_quick li a{ display:block; height:87px; cursor:pointer;left;} #m_quick li a.line{ background-image:none;} #m_quick li:last-child{width:100%;} #m_quick li a h4{ text-align:left; padding:20px 0 0 14px; color:#595959;} #m_quick li a p{ font-size:12px; color:#595959; opacity:0.7; letter-spacing:-0.05em; text-align:left; padding-top:5px; height:34px; padding-left:15px; line-height:140%} #m_quick li a p span{ display:inline} #m_quick li a span.text{ display:none} #m_quick li.bg04 a h4 {padding:20px 0 0 14px; } #m_quick li.bg04 a p {padding-top:0px; } #m_quick li.bg01{ background: url(../../img/images/icon1.png) no-repeat 105% -28px #f1f1f1; background-size:150px 150px} #m_quick li.bg02{ background: url(../../img/images/icon4.png) no-repeat 105% -28px #18b2a8; background-size:150px 150px} #m_quick li.bg03{ background: url(../../img/images/icon5.png) no-repeat 105% -28px #3d3d3d; background-size:150px 150px} #m_quick li.bg04{ background: url(../../img/images/icon6.png) no-repeat 105% 0px #f79b73 ; background-size:150px 150px} #m_quick li.bg05{ background: url(../../img/images/icon2.png) no-repeat 105% -28px #18b2a8; background-size:150px 150px} #m_quick li.bg06{ background: url(../../img/images/icon7.png) no-repeat 105% -28px #f1f1f1; background-size:150px 150px} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {padding:0 0} } @media screen and (max-width:640px) { /* 메인 롤링 이미지 */ #mainSlider ul.imgList li {height:430px} #mainSlider ul.imgList li img {width:auto !important} #mainSlider ul.imgList li .caption {top:15%; padding:0 20px} #mainSlider ul.imgList li .caption h2 {font-size:24px; max-width:100%} #mainSlider ul.imgList li .caption h2:after {margin:15px 0; width:40px; height:1px} #mainSlider ul.imgList li .caption p {font-size:12px; max-width:100%} #mainSlider ul.imgList li .caption a.btn {font-size:12px; padding:8px 25px} /* 6개배너*/ #m_quick{ overflow:hidden} #m_quick li{ float:left; width:100%; height:87px;} #m_quick li a{ display:block; height:87px; cursor:pointer;left} #m_quick li a.line{ background-image:none;} #m_quick li a h4{ text-align:left; padding:20px 0 0 14px; color:#585858;} #m_quick li a p{ font-size:12px; color:#585858; opacity:0.7; letter-spacing:-0.05em; text-align:left; padding-top:5px; height:34px; padding-left:15px; line-height:140%} #m_quick li a p span{ display:inline} #m_quick li a span.text{ display:none} #m_quick li.bg01{ background: url(../../img/images/icon1.png) no-repeat 110% -28px #f1f1f1; background-size:150px 150px} #m_quick li.bg02{ background: url(../../img/images/icon4.png) no-repeat 110% -28px #18b2a8; background-size:150px 150px} #m_quick li.bg03{ background: url(../../img/images/icon5.png) no-repeat 110% -28px #3d3d3d; background-size:150px 150px} #m_quick li.bg04{ background: url(../../img/images/icon6.png) no-repeat 110% 0px #f79b73 ; background-size:150px 150px} #m_quick li.bg05{ background: url(../../img/images/icon2.png) no-repeat 110% -28px #18b2a8; background-size:150px 150px} #m_quick li.bg06{ display:none;background: url(../../img/images/icon5.png) no-repeat right -28px #f79b73; background-size:150px 150px} #m_quick li.bg04 a h4 {padding:20px 0 0 14px; } #m_quick li.bg04 a p {padding-top:0px; } /* 메인 섹션 */ #container .mainSection .inner {padding:0 20px} #container .mainSection .inner .title h2 {font-size:24px; font-weight:500} /* 상단 섹션 */ .mainSection.section1 .inner .latestBox > .board_output td {font-size:12px} .mainSection.section1 .inner .latestBox > .board_output td a {font-size:12px} .mainSection.section1 .inner .photoBox ul li {width:32%; height:120px} .mainSection.section1 .inner .photoBox > .tbl_photo > tbody > tr > td {padding:0 0} /* 하단 섹션 */ .mainSection.section2 .inner span {font-size:11px !important} .mainSection.section2 .inner .desc h2 {font-size:24px; margin:0 0 15px 0} .mainSection.section2 .inner .desc a.btn {width:100%; text-align:center} .mainSection.section2 .inner .rBanner {width:100%} } @media screen and (max-width:480px) { #mainSlider ul.imgList li .caption.white a.btn {margin-top:160px} #mainSlider ul.imgList li .caption a.btn {margin-top:160px} }