@charset "utf-8"; #mainSlide {position:relative; padding:0 340px 0 200px} #mainSlide .visual_wrap {position:relative; height:1040px; overflow:hidden} #mainSlide ul.imgRolling {position:relative} #mainSlide ul.imgRolling li {position:relative; height:1040px; background-size:cover !important} #mainSlide ul.imgRolling li.item1 {background:url(../../img/main_visual1.jpg) center top no-repeat} #mainSlide ul.imgRolling li.item2 {background:url(../../img/main_visual2.jpg) center top no-repeat} #mainSlide ul.imgRolling li.item3 {background:url(../../img/main_visual3.jpg) center top no-repeat} #mainSlide ul.imgRolling li.item4 {background:url(../../img/main_visual4.jpg) center top no-repeat} #mainSlide ul.imgRolling li img {display:block} #mainSlide ul.imgRolling li .text {position:absolute; top:100px; left:50px} #mainSlide ul.imgRolling li .text h2 {position:relative; font-family:'Source Sans Pro', 'Nanum Gothic',sans-serif; font-weight:300; font-size:72px; color:#fff; line-height:1.1; margin-bottom:20px; padding-bottom:20px} #mainSlide ul.imgRolling li .text h2 span {font-weight:700} #mainSlide ul.imgRolling li .text h2:after {position:absolute; bottom:0; left:5px; width:100px; height:3px; content:''; background:#fff} #mainSlide ul.imgRolling li .text h2.black {color:#000} #mainSlide ul.imgRolling li .text h2.black:after {background:#000} #mainSlide ul.imgRolling li .text h3 {font-size:24px; color:#f73942} #mainSlide ul.imgRolling li .text h3.black {color:#000 !important } #mainSlide ul.imgRolling li .text a.btn {display:inline-block; margin-top:80px; padding:10px 50px; font-size:16px; color:#fff; border:2px solid #fff; transition:all 0.4s ease} #mainSlide ul.imgRolling li .text a.btn:hover {color:#fff; border-color:#f73942; background:#f73942} #mainSlide .visual_wrap .indicator {position:absolute; top:0; right:0} #mainSlide .visual_wrap .indicator .inner {position:relative; width:150px; background:url(../../img/main_indicator_bg.png)} #mainSlide .visual_wrap .indicator .inner a {position:relative; display:table; width:100%; height:260px; text-align:center; color:#eee; vertical-align:middle; z-index:10} #mainSlide .visual_wrap .indicator .inner a .box {display:table-cell; height:100%; vertical-align:middle} #mainSlide .visual_wrap .indicator .inner a .box p {color:#eee} #mainSlide .visual_wrap .indicator .inner a .box p.img {margin-bottom:20px} #mainSlide .visual_wrap .indicator .inner a .box p.img img {display:block; margin:0 auto} #mainSlide .visual_wrap .indicator .inner a .box p.img img.m_img {display:none} #mainSlide .visual_wrap .indicator .inner .active-box {position:absolute; top:0; left:0; width:100%; height:260px; background:#f73942} #mainSlide .visual_wrap .indicator .inner .active-box:before {position:absolute; top:50%; left:-20px; margin-top:-10px; content:''; border-style:solid; border-width:10px; border-color:transparent #f73942 transparent transparent} /* 레이어팝업 */ #layerpopup{background:#fff;} .popHeader{height:30px; background:#fff; text-align:right;} .popHeader a img{padding:0 6px 0 0;} .popupContent{padding:0px;text-align:center;} .pcl {} .popupClose {height:30px; text-align:center; background:#; width:500px;} .popupClose2 { width:100%;height:30px; text-align:center; background:#2e2e2e;} .popupClose input, .popupClose img { vertical-align:middle; margin:0 10px 0 0;} .popupClose label{padding:0 8px 0 0;} .popupClose a{color:#fff; text-decoration:none; line-height:30px;} /* 레이어팝업 */ /* 실시간 상담문의 */ #mainCounsel {position:fixed; top:20px; left:210px; width:237px; height:477px; padding:53px 13px 55px 15px; background:url(../../img/phone.png) center top no-repeat; box-sizing:border-box; z-index:990} #mainCounsel .title {} #mainCounsel .title h3 {font-size:16px; font-weight:600; color:#fff} #mainCounsel .formmail_title_bgcolor {font-family:inherit !important; text-align:right; background:#fff !important} #mainCounsel .formmail_title_bgcolor font {color:#666 !important} #mainCounsel .formmail_cell_bgcolor {font-size:0 !important} #mainCounsel table {width:100%; margin-bottom:20px; table-layout:fixed} #mainCounsel table tbody td {padding:5px; border-bottom:1px solid #d5d5d5} #mainCounsel table tbody td, #mainCounsel table tbody td font {font-size:12px !important} #mainCounsel table tbody tr td:first-child {width:40% !important} #mainCounsel table tbody td input[type=text] {max-width:90%; height:25px; border:1px solid #dedede} #mainCounsel table tbody td input[name^=phone_no] {width:34px; margin-left:2px} #mainCounsel table tbody td input[name^=phone_no]:first-child {margin-left:0} #mainCounsel table tbody td textarea {max-width:90%; height:80px !important; border:1px solid #dedede} #mainCounsel table tbody td select {height:25px; font-size:12px !important;} #mainCounsel .btn-area {text-align:center} #mainCounsel .btn-area > a {display:inline-block; } #mainCounsel .btn-close {position:absolute; display:block; bottom:12px; left:103px; width:32px; height:32px; font-size:0; text-indent:-9999em; border:2px solid #fff; border-radius:50%; box-sizing:border-box} #mainCounsel .btn-close > span {position:absolute; display:block; top:50%; left:50%; width:14px; height:2px; margin-left:-7px; margin-top:-1px; border-radius:2px; background:#fff} #mainCounsel .btn-close > span.line1 {transform:rotate(45deg)} #mainCounsel .btn-close > span.line2 {transform:rotate(-45deg)} #mainCounselMini {display:none; position:fixed; top:5px; left:210px; z-index:990} #mainCounselMini img {display:block} /* 미디어쿼리 */ @media screen and (max-width:1400px) { #mainSlide {padding-right:0} #mainSlide ul.imgRolling li .text h2 {font-size:48px} } @media screen and (max-width:1180px) { #mainSlide ul.imgRolling li .text h2 {font-size:32px} #mainSlide ul.imgRolling li .text h2:after {width:32px; height:2px} #mainSlide ul.imgRolling li .text h3 {font-size:18px} } @media screen and (max-width:1024px) { body.main #container {margin:0} #mainSlide {padding:0} #mainSlide .visual_wrap {height:650px} #mainSlide ul.imgRolling li {height:650px} #mainSlide ul.imgRolling li img {width:100%; height:100%} #mainSlide ul.imgRolling li .text h2 {font-size:56px} #mainSlide ul.imgRolling li .text h2:after {width:60px; height:3px} #mainSlide ul.imgRolling li .text h3 {font-size:22px} #mainSlide ul.imgRolling li .text a.btn {margin-top:40px} #mainSlide .visual_wrap .indicator {top:70%; left:50%; width:230px; margin-left:-115px} #mainSlide .visual_wrap .indicator .inner {width:auto; background:none} #mainSlide .visual_wrap .indicator .inner a {display:inline-block; width:48px; height:48px; margin:0 2px; border-radius:50%; background:rgba(0,0,0,0.6)} #mainSlide .visual_wrap .indicator .inner a.active {background:#f73942} #mainSlide .visual_wrap .indicator .inner a .box {display:table; width:100%} #mainSlide .visual_wrap .indicator .inner a .box p {display:none} #mainSlide .visual_wrap .indicator .inner a .box p.img {display:table-cell !important; vertical-align:middle} #mainSlide .visual_wrap .indicator .inner a .box p.img img.pc_img {display:none} #mainSlide .visual_wrap .indicator .inner a .box p.img img.m_img {display:block !important} #mainSlide .visual_wrap .indicator .inner .active-box {display:none} #mainCounsel {display:none} #layerpopup1 {display:none !important} } @media screen and (max-width:640px) { #mainSlide ul.imgRolling li {height:350px} #mainSlide ul.imgRolling li img {display:block} #mainSlide ul.imgRolling li .text {top:60px; left:5%} #mainSlide ul.imgRolling li .text h2 {font-size:34px} #mainSlide ul.imgRolling li .text h2:after {width:30px; height:2px} #mainSlide ul.imgRolling li .text h3 {font-size:13px} #mainSlide ul.imgRolling li .text a.btn {display:none} #mainSlide .visual_wrap .indicator {width:150px; margin-left:-75px; top:80%} #mainSlide .visual_wrap .indicator .inner a {width:30px; height:30px} #mainSlide .visual_wrap .indicator .inner a .box p.img img.m_img {width:16px; height:16px} } @media screen and (max-width:480px) { #mainSlide ul.imgRolling li .text h2 {font-size:28px !important} }