/* 메인 비주얼 영역 */ .visual {min-width: 1240px;position: relative;} .visual {max-width: 100%; position: relative;} .visual .swiper-slide {z-index: -1 !important;} .visual .slideImg {height: 525px;min-width: 1400px;} .visual .slideImg img {position:relative;left:50%;transform:translateX(-50%);} .visual .swiper-button-prev,.visual .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);background-position:center; width: 50px;height: 50px;margin:0;border-radius: 8px; background-color: rgba(0,0,0,0.5);background-repeat: no-repeat;background-size:15px 26px;} .visual .swiper-button-prev {left: 50px;background-image: url(/publish/images/main/visual_prev.png);} .visual .swiper-button-next {right:50px;background-image: url(/publish/images/main/visual_next.png);} .visual .slide_button{position: absolute;left:50%;bottom:28%;margin:0 0 0 -680px;text-align:center;} .visual .slide_button .swiper-pagination{position:relative;display:inline-block;margin: 0 auto;white-space:nowrap;} .visual .slide_button .swiper-pagination .swiper-pagination-bullet{display: inline-block;margin-right:10px;position: relative;vertical-align: middle;width: 12px;height: 12px;background-color: rgba(0,0,0,0.5);border-radius: 100%;opacity:1;} .visual .slide_button .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 33px;height: 7px; background-color: #eea301;border-radius: 3.5px;vertical-align: middle;} .visual .slide_button .slidePause {position:relative;display:inline-block;background-image: url(/publish/images/main/visualStop.png);background-repeat: no-repeat;width: 12px;height: 14px;z-index:1;} .visual .slide_button .slidePause.active {background-image:url(/publish/images/main/visualStart.png);} /*// visual 영역 */ /* content1 */ .banner_w {position:relative;max-width: 1400px;min-width: 1200px;margin: -100px auto 0 auto;z-index:1;} .banner_w .swiper2 .swiper-wrapper .swiper-slide {position:relative;} .banner_w .swiper2 .swiper-wrapper .swiper-slide img {width:90%;} .banner_w .swiper2 .swiper-button-next {width: 10px;height: 18px;background-image:none;position:absolute;top:266px;right:42%; z-index: 1;} .banner_w .swiper2 .swiper-button-prev {width: 10px;height: 18px;background-image:none;position:absolute;top:266px;left:42%; z-index: 1;} .banner_w .swiper2 .swiper-pagination {position:absolute;left:50%;bottom:-1px;width:auto;transform:translateX(-50%);z-index:1;} .banner_w .swiper2 .swiper-pagination .swiper-pagination-bullet {width:9px;height:9px;background-color: #c8c8c8;opacity:1;margin:0 5px;vertical-align:top;} .banner_w .swiper2 .swiper-pagination .swiper-pagination-bullet-active {background-color: #23428b;} .sw_wrap {position:relative;overflow: hidden;width:100%;height: 265px;border-radius: 15px;transition: 0.5s ease;} .sw_wrap::after{position: absolute; content: " ";width:97%;height: 190px; box-shadow: 0 0 10px 4px rgba(0,0,0,0.15);background-color: #fff; z-index: 0; top: 20px; left: 50%; transform: translateX(-50%); border-radius: 15px;} .swiper2 {overflow: hidden; height: 265px;width:97%;margin:0 auto;position: relative;} .swiper2 .swiper-slide{width:100%;height: 240px; border-radius: 15px; position: relative; z-index: 1; margin: 0px auto 25px auto;} .swiper2 .contWrap {display: table !important; position: relative; margin-top: 20px;width:100%;} .swiper2 .contWrap::after{content: ""; transition: all 0.2s ease-in-out; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .swiper2 .swiper-slide-next .contWrap, .swiper2 .swiper-slide.on .contWrap.on {position: relative; z-index: 1; cursor: pointer; transition: all 0.2s ease-in-out; opacity: 1; background-image: none !important;border-radius:15px;} .swiper2 .swiper-slide .contWrap{background: url(../images/main/cont1_shadow.png) 0 0 no-repeat;background-size: 49px 190px;} .swiper2 .swiper-slide.swiper-slide-active .contWrap{background: none;} .swiper2 .contWrap .slide_cont {padding: 0 30px 0 40px; height: 190px;} .swiper2 .contWrap .slide_cont .cont1_title {font-size: 22px;font-weight: 700;} .swiper2 .contWrap .slide_cont .cont1_ex {color: #555;font-weight: 400; line-height: 1.4;height: 42px; padding: 13px 0 30px 0;font-size:16px;letter-spacing:-0.5px;} .swiper2 .contWrap .slide_cont::after {position: absolute;content: "";background-color: #e1e1e5;border-radius: 50%;top: 50%;right: 30px; transform: translateY(-50%);width: 70px;height: 70px;} .swiper2 .contWrap.ct1 .slide_cont::after {background:url('../images/main/cont1_1.png') #e1e1e5 center no-repeat;} .swiper2 .contWrap.ct2 .slide_cont::after {background:url('../images/main/cont1_2.png') #e1e1e5 18px center no-repeat;} .swiper2 .contWrap.ct3 .slide_cont::after {background:url('../images/main/cont1_3.png') #e1e1e5 15px center no-repeat;} .swiper2 .contWrap.ct4 .slide_cont::after {background:url('../images/main/cont1_4.png') #e1e1e5 20px center no-repeat;} .swiper2 .contWrap.ct4 .slide_cont {cursor:default;} .swiper2 .contWrap.ct4 .slide_cont .cont1_title {margin-top:-51px;} .swiper2 .contWrap.ct4 .slide_cont .cont1_ex {padding-bottom:10px;} .swiper2 .contWrap.ct5 .slide_cont::after {background:url('../images/main/cont1_5.png') #e1e1e5 center center no-repeat;} .swiper2 .contWrap.ct6 .slide_cont::after {background:url('../images/main/cont1_6.png') #e1e1e5 center center no-repeat;} .swiper2 .contWrap.ct7 .slide_cont::after {background:url('../images/main/cont1_7.png') #e1e1e5 center center no-repeat;} .swiper2 .contWrap.ct8 .slide_cont::after {background:url('../images/main/cont1_8.png') #e1e1e5 center center no-repeat;} .swiper2 .contWrap.ct9 .slide_cont::after {background:url('../images/main/cont1_9.png') #e1e1e5 center no-repeat;} .swiper2 .contWrap .slide_cont .more {width: 115px;height: 30px; padding-right:15px;border: 1px solid #d9d9d9; border-radius: 14px; text-align: center; color: #555;background-image: url(../images/main/cont1_arrow.png);background-position: 86% center;background-repeat: no-repeat;line-height: 29px;} /* on클래스 */ .swiper2 .swiper-slide-next .contWrap::after, .swiper2 .swiper-slide.on .contWrap.on::after {background-color: #ffcc33;width: 100%;height:110%;z-index: -1;cursor: pointer;transition: all 0.2s ease-in-out;box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);border-radius: 15px;} .swiper2 .swiper-slide-next .contWrap .slide_cont .cont1_ex, .swiper2 .swiper-slide.on .contWrap.on .slide_cont .cont1_ex {color: #222;} .swiper2 .swiper-slide-next .contWrap .slide_cont .more, .swiper2 .swiper-slide.on .contWrap.on .slide_cont .more {background-color: #eea301;color: #fff;border: 1px solid #eea301;background-image: url(../images/main/cont1_arrow_white.png);} .swiper2 .swiper-slide-next .contWrap .slide_cont::after, .swiper2 .swiper-slide.on .contWrap.on .slide_cont::after {background-color: #edb818;} .swiper2 .swiper-slide-next .contWrap.active:after {display:none;} /*// content1 */ /* content2 문자샘플 */ .main_cont2{margin: -170px auto 0 auto; padding: 235px 150px 80px 150px; text-align: center; background-color: #ecedef; min-width: 1240px; box-sizing: border-box;} .main_cont2 .inner{min-width: 0;} .main_cont2 .inner>p.tit_text{font-size: 34px; font-weight: 700;} .main_cont2 .inner>p.sub_text{font-size: 14px; font-weight: 400; margin: 20px auto 0 auto; width: 60%; color: #777; line-height: 1.4;} /* 탭 */ .main_cont2 .tabs{text-align: center;position: relative;margin-top: 30px;} .main_cont2 .tab_depth1{position: absolute; display: flex;height: 33px; color: #555; font-size: 16px; border: 1px solid #bcbdc1; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: visible; margin-top: 9px; background-color: #ecedef;} .main_cont2 .tab_depth1 a{width: 50px;line-height: 33px;border-right: 1px solid #bcbdc1;} .main_cont2 .tab_depth1 a:first-child{border-radius: 5px 0 0 5px;} .main_cont2 .tab_depth1 a:last-child{border-right: 0;border-radius: 0 5px 5px 0;} .main_cont2 .tab_depth1 a.on {height:33px;border-color:#002c9a;} .main_cont2 .tab_depth1 .on_active{position: absolute; width: 51px; height: 33px;background-color: #fff;border: 1px solid #002c9a;left: 0; top: -1px; font-size: 16px; font-weight: 500; transition: left 0.3s ease-in-out; color: #002c9a; line-height: 32px; border-radius: 5px 0 0 5px;} /* .tab_depth1 a.on{border: 1px solid #002c9a; background-color: #fff;line-height: 30px;font-weight: 500; color:#002c9a; height: 33px;margin-top: -1px;margin-left: -1px;} */ .tab_depth2{display: flex; width: 80%;justify-content: center; margin: 0 auto 16px auto} .tab_depth2 a{position: relative; color: #555;font-size: 19px;height: 55px;line-height: 52px; box-sizing: border-box; border: 3px solid transparent; flex-basis: calc(65% / 4); transition: all 0.2s ease-in-out;} .tab_depth2 a::after{position: absolute; content: " "; width: 1px; height: 15px; background-color: #b0b4b9; right: 0; top: 36%;} .tab_depth2 a:last-child:after{display: none;} .tab_depth2 a.on{background-color: #fff;border: 3px solid #002c9a;border-radius: 100px; color: #002c90; font-weight: 600; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); height: 53px; line-height: 46px; transition: all 0.2s ease-in-out;} .tab_depth2 a.tab_next::after,.tab_depth2 a.tab_prev::after{display: none;} .tab_depth2 a.on::after{display: none;} .tab_depth3{width: 100%; display: flex; flex-wrap: wrap; justify-content: center; background-color: #e1e2e5;font-size: 16px; color: #666;font-weight: 400;padding: 20px 40px; border-radius: 10px;margin-bottom: 50px; box-sizing: border-box;line-height:2;} .tab_depth3 a{padding: 0 13px;position: relative;} .tab_depth3 a:hover{color: #002c9a;text-decoration: underline;} .tab_depth3 a.on{color: #002c9a; font-weight: 600;} .tab_depth3 a.on::before{position: absolute; content: " "; width: calc(100% - 25px); height: 5px; background-color: #003ed9; opacity: 0.2; bottom: 7px; left: 12px;} .tab_depth3 a::after{position: absolute; content: " "; width: 4px; height: 4px; background-color: #c3c4c5; border-radius: 10px; top: 15px;right: -1px;} .tab_depth3 a:last-child::after{display: none;} /* 탭 콘텐츠 */ .tab_contwrap{position: relative;margin-bottom: 50px; } .tab_contwrap .btn_prev,.tab_contwrap .btn_next{width: 50px;height: 50px; border-radius: 8px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3);position: absolute;z-index:1;} .tab_contwrap .btn_prev{left: -70px;top: 40%;} .tab_contwrap .btn_next{right: -70px;top: 40%;} .main_cont2 button.btn_more{font-size: 18px;height: 49px; padding:0 35px 0 24px; background-color: #fff; border: 1px solid #d5d5d5; border-radius: 30px; color: #666; background-image: url(/publish/images/main/btn_more02.png); background-repeat: no-repeat; background-position: 90% center;line-height: 0.1;position: relative;} .main_cont2 button.btn_more img{margin-top: -4px; margin-left: 10px;} .main_cont2 button.btn_more:hover{color: #002c9a; border: 1px solid #002c9a; background-image: url(/publish/images/main/btn_more03.png);box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.2);} .tab_con{justify-content: space-between; width: 99.8%; height: 0; overflow: hidden;} .tab_con.active{display: block; height: 100%; overflow: visible; border-bottom: 1px solid #d5d5d5;} /* 포토문자 */ .tab_con.msg_photo_wrap{overflow:hidden;margin: 0 auto;} .msg_photo .swiper-slide{padding: 0 10px; box-sizing: border-box;cursor:pointer;} .msg_photo .swiper-slide .slide_area{width: calc(100% - 10px) !important; background-color: #f5f5f5; position: relative;height: 420px; border: 5px solid #f5f5f5; border-radius: 16px;box-shadow: 0 0 15px rgba(0,0,0,0.15); margin-bottom: 53px; margin-top: 13px;} .msg_photo .swiper-slide .slide_area:hover::after{position: absolute; content: " "; width: calc(100% + 10px); height: 5px; background-color: #002c9a; left: -5px; bottom: -14%;} .msg_photo .swiper-slide .slide_area .mask{display:block;position: absolute; width: calc(100% + 10px); height: calc(100% + 10px);background-color: rgba(43, 48, 71,0);left: -5px;top: -5px; border-radius: 16px; transition: background-color 0.2s ease-in-out;} .msg_photo .swiper-slide .slide_area .btn_more{display: none;} .msg_photo .swiper-slide .slide_area .btn_more img{display: inline-block;} .msg_photo .swiper-slide .slide_area:hover .mask{background-color: rgba(43, 48, 71,0.5); transition: background-color 0.2s ease-in-out;opacity:1;filter:opacity(100);} .msg_photo .swiper-slide .slide_area:hover div.btn_more{display: block; width: 54px; height: 54px; background-color: rgba(0,0,0,0.4); border-radius: 100%; line-height: 48px; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .msg_photo .area_img{display:flex;height:365px; border-radius: 16px 16px 0 0; overflow: hidden;align-items:center;} .msg_photo .area_img img{width: 100%; height: auto;} .msg_photo .area_img_text{font-size: 17px;padding: 12px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .msg_photo .area_img_text .sub_text{display: block; font-size: 14px; color: #777; margin: 5px auto;} .msg_photo_wrap .swiper-button-prev {margin:0;background-image:url(/publish/images/main/btn_prev.png);background-size:12px 21px;} .msg_photo_wrap .swiper-button-next {margin:0;background-image:url(/publish/images/main/btn_next.png);background-size:12px 21px;} /* 단문문자&장문문자 */ .tab_con.msg_text{overflow:hidden;margin: 0 auto;} .msg_text .swiper-slide{padding: 0 10px;cursor:pointer;box-sizing:border-box;} .msg_text .swiper-wrapper{height: 442px} .msg_text .swiper-slide .slide_area{position: relative;border-radius: 16px; background-image: url(/publish/images/main/msg_text_bg01.png); background-size: 100% 100%; background-repeat: no-repeat; height: 387px; transition: all 0.2s ease-in-out; box-sizing: border-box; margin-top: 13px;} .msg_text .swiper-slide .slide_area::before{position: absolute; content: " "; width: 100%; height: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.15); left: 0; top: 0; border-radius: 16px;} .msg_text .swiper-slide .slide_area:hover::before{width: calc(100% - 3px); height: calc(100% - 3px); border: 3px solid #000;} .msg_text .swiper-slide .slide_area:hover::after{position: absolute; content: " "; width: calc(100% + 10px); height: 5px; background-color: #002c9a; left: -5px; bottom: -42px;} .msg_text .swiper-slide .slide_area .slide_content{width:100%;padding: 34px 0 62px 0; display: inline-block;} .msg_text .swiper-slide .slide_area .area_tit_text{height: 33px; line-height: 33px; background-color: #f5f5f5; border: 1px solid #e0e0e0; margin: 0 auto; color: #333; font-size: 17px; font-weight: 400; transition: all 0.2s ease-in-out; box-sizing: border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;padding:0 10px;text-align:center;} .msg_text .swiper-slide .slide_area:hover .area_tit_text{background-color: #747b8e; border: 1px solid #747b8e; color: #fff; font-weight: 500; width: 100%;} .msg_text .swiper-slide .slide_area .area_in_text{width: 95%; height: 279px; margin: 0 auto; padding: 20px 0; background-image: url(/publish/images/main/msg_text_bg02.png); background-repeat: no-repeat; background-position: 15px 20px; box-sizing: border-box;} .msg_text .swiper-slide .slide_area:hover .area_in_text{background-image: url(/publish/images/main/msg_text_bg03.png);} .msg_text .swiper-slide .slide_area .area_in_text p{width: 85.5%; height: 238px; margin: 0 auto; text-align: left; line-height: 1.3; font-size: 15px; letter-spacing: -0.25px; padding: 10px; overflow-y: auto; box-sizing: border-box;position:relative;z-index:1;} .msg_text_wrap .swiper-button-prev {margin:0;background-image:url(/publish/images/main/btn_prev.png);background-size:12px 21px;} .msg_text_wrap .swiper-button-next {margin:0;background-image:url(/publish/images/main/btn_next.png);background-size:12px 21px;} /* //content2 문자샘플 */ /* content3 서비스 및 공지사항 영역 */ .main_cont3 {min-width: 1200px;} .main_cont3 .inner{display: flex;justify-content: space-between;padding: 80px 0; box-sizing: border-box} .main_cont3 .inner>div {width: 100%;max-width: 440px; /*height: 343px;*/ flex-basis: calc(100%/3 - 26px);} .main_cont3 .title {margin-bottom: 20px; font-size: 26px;font-weight: 600;display: inline-block;} .main_cont3 .plus_btn { float: right; transition: transform 0.5s ease-in-out;background-image: url(/publish/images/plus.png);background-repeat: no-repeat; width:23px;height: 23px;} .main_cont3 .plus_btn:hover {transform: rotate(180deg);transition: transform 0.5s ease-in-out;background-image: url(/publish/images/plus2.png);} /* 자주찾는 서비스 */ .main_cont3 .main_service ul {display: flex;flex-flow: wrap;justify-content: space-between;height: 300px;color: #222;} .main_cont3 .main_service ul li {height: 145px;border: 1px solid #d9d9d9;border-radius: 10px;width: calc(100%/3 - 8px);margin-bottom: 10px;text-align: center;display: table;box-sizing: border-box;transition: all 0.3s ease-in-out;position: relative;} /* hover효과1 */ .main_cont3 .main_service ul li:hover {background-color: #fbc72b;box-shadow: 3px 3px 10px 4px rgba(0,0,0,0.15);border:1px solid #fbc72b;transition: all 0.2s ease-in-out;transform: translateY(-5%);} .main_cont3 .main_service ul li:hover i {background-color: #edb818;transition: all 0.2s ease-in-out;} .main_cont3 .main_service ul li:hover i {background-color: #edb818;} .main_cont3 .main_service ul li:hover span {font-weight: 500;} .main_cont3 .main_service ul li a {width: 100%;height: 100%;display: table-cell;vertical-align: middle;} .main_cont3 .main_service ul li i {background-color: #eee; width: 75px;height: 75px;border-radius: 50%;margin-bottom: 10px; position: relative;transition: all 0.2s ease-in-out;} .main_cont3 .main_service ul li i::after {content: ""; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .main_cont3 .main_service ul li:nth-child(1) i::after{background-image: url(/publish/images/main/service01.png);width: 58px;height: 44px;} .main_cont3 .main_service ul li:nth-child(2) i::after{background-image: url(/publish/images/main/service02.png);width: 36px;height: 46px;} .main_cont3 .main_service ul li:nth-child(3) i::after{background-image: url(/publish/images/main/service03.png);width: 40px;height: 44px;} .main_cont3 .main_service ul li:nth-child(4) i::after{background-image: url(/publish/images/main/service04.png);width: 42px;height: 48px;} .main_cont3 .main_service ul li:nth-child(5) i::after{background-image: url(/publish/images/main/service05.png);width: 40px;height: 46px;} .main_cont3 .main_service ul li:nth-child(6) i::after{background-image: url(/publish/images/main/service06.png);width: 47px;height: 34px;} .main_cont3 .main_service ul li span {display: block;} /* 공지사항 */ .main_cont3 .main_notice ul {border: 1px solid #d9d9d9;height: 300px;padding-top:1px;padding-bottom:1px;border-radius: 10px;box-sizing: border-box;} .main_cont3 .main_notice ul li {padding: 12px 0; margin: 0 30px; border-bottom: 1px solid #d9d9d9; position: relative;z-index: 1;} .main_cont3 .main_notice ul li:last-child {border:0 none;} /* .main_cont3 .main_notice ul li:hover::after {content: ""; border:2px solid #fbc72b;background-color: #fff; position: absolute;top: -1px;left: 50%;transform: translateX(-50%); width: calc(100% + 30px);height: 44px;z-index: -1;box-shadow: 3px 3px 10px 4px rgb(0 0 0 / 15%);} */ /* hover효과1 */ .main_cont3 .main_notice ul li::after {content: "";position: absolute;top: -1px;left: 50%;transform: translateX(-50%); z-index: -1;transition: all 0.1s ease-in-out;opacity: 0;cursor: pointer;} .main_cont3 .main_notice ul li:hover::after {border:2px solid #fbc72b;background-color: #fff;width: calc(100% + 30px);height: 41px;box-shadow: 3px 3px 10px 4px rgba(0,0,0,0.15);;transition: all 0.1s ease-in-out;opacity: 1;} .main_cont3 .main_notice ul li a {font-weight: 500;} .main_cont3 .main_notice ul li:hover::before {background-image: url(/publish/images/main/notice_arrow.png);content: "";right: 0;top: 50%;transform: translateY(-50%); width: 9px; height: 14px;z-index: 1;position: absolute;} .main_cont3 .main_notice ul li a {color: #555;font-weight: 400;width: 90%;text-overflow: ellipsis;overflow: hidden;display: -webkit-inline-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;height: 16px;} /* 고객센터 */ .main_cont3 .service_center .tablet {background-image: url(/publish/images/main/serive_tablet.png);background-repeat: no-repeat;height: 300px;color: #222;font-weight: 300;} .main_cont3 .service_center .tablet>div {padding: 15px 30px 0 30px;} .main_cont3 .service_center .tablet .service_center_title {position: relative;padding-left: 126px;} .main_cont3 .service_center .tablet .service_center_title::after {position: absolute;content: "";background-image: url(/publish/images/main/serviceCenter.png);width: 90px;height: 90px;top: 11px;left: 12px;} .main_cont3 .service_center .tablet .service_center_title p {font-size: 32px;font-weight: 700; color: #23428b;padding-bottom: 10px; letter-spacing: -1px;line-height:35px;} .main_cont3 .service_center .tablet .service_center_title span {font-size: 17px;font-weight: 300; } .main_cont3 .service_center .tablet .serive_info {background-image: url(/publish/images/main/serviceCenter_text.png);background-repeat: no-repeat;height: 71px;margin: 15px 0;} .main_cont3 .service_center .tablet .serive_info p{line-height: 1.5;padding: 13px 18px;font-size: 16px; font-weight: 400;} .main_cont3 .service_center .tablet .serive_btn {text-align: center;display: flex;height: 47px;} .main_cont3 .service_center .tablet .serive_btn li {display: inline-block;width: calc(100% - 2px /3);border: 1px solid #d5d5d5;margin-left: -1px; box-sizing: border-box;} .main_cont3 .service_center .tablet .serive_btn li a, .main_cont3 .service_center .tablet .serive_btn li button {position:relative;font-size: 17px; font-weight:400; width: 100%; height: 100%;line-height:44px;box-sizing:border-box;} .main_cont3 .service_center .tablet .serive_btn li a:before, .main_cont3 .service_center .tablet .serive_btn li button:before {content:'';display:inline-block;width:20px;height:45px;margin:0 5px 0 0;vertical-align:top;background:url(/publish/images/main/icon_main_cscenter01.png) no-repeat left top;} .main_cont3 .service_center .tablet .serive_btn li.remote a:before {width:21px;background-image:url(/publish/images/main/icon_main_cscenter03.png);} .main_cont3 .service_center .tablet .serive_btn li.qnabtn a:before {width:23px;background-image:url(/publish/images/main/icon_main_cscenter02.png);} .main_cont3 .service_center .tablet .serive_btn li:first-child {border-radius: 8px 0 0 8px;} .main_cont3 .service_center .tablet .serive_btn li:last-child {border-radius: 0 8px 8px 0;} .main_cont3 .service_center .tablet .serive_btn li:hover {font-weight: 500;} .main_cont3 .service_center .tablet .serive_btn li:hover a::after, .main_cont3 .service_center .tablet .serive_btn li:hover button::after {content:'';position:absolute;left:-1px;top:-2px;width:100%;height:100%;border: 2px solid #fbc72b;box-shadow: 3px 3px 10px 4px rgba(0,0,0,0.15);z-index: 1;} .main_cont3 .service_center .tablet .serive_btn li:first-child:hover a::after, .main_cont3 .service_center .tablet .serive_btn li:first-child:hover button::after {border-radius: 8px 0 0 8px;} .main_cont3 .service_center .tablet .serive_btn li:last-child:hover a::after, .main_cont3 .service_center .tablet .serive_btn li:last-child:hover button::after {border-radius: 0 8px 8px 0;} /*// content3 서비스 및 공지사항 영역 */ .btn_custom{position: absolute; top: 11px; right: 0; width: 145px; height: 36px; color: #fff; font-size: 18px; font-weight: 400; background-color: #002c9a; border-radius: 5px; letter-spacing: -0.5px;} .btn_custom img{vertical-align: middle; margin-top: -4px; margin-right: 2px;} .btn_custom:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);} /*요금안내 top 배너 시작*/ .price_top_banner{position: fixed; right: 4%; top: 160px; z-index: 20;} /* 키워드 */ .keyword_wrap{margin: -50px 0 0 0;} .keyword_wrap .inner{border-radius: 20px 5px 20px 5px; background-color: #f5f5f5; padding: 30px 0 0 0; min-width: 1200px;} .keyword_wrap .inner>p.tit_text{font-size: 24px; font-weight: 700; text-align: center;} .keyword_wrap .link_box{display: flex; width: 100%; padding: 23px 30px; box-sizing: border-box; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 30px 0;} .keyword_wrap .link_box li{margin: 0 8px 8px 0;} .keyword_wrap .link_box a{position: relative; height: 35px; padding: 7px 11px 7px 34px; border: 1px solid #222; border-radius: 5px; font-family: 'GmarketSansMedium'; font-size: 14px; line-height: 22.5px; color: #222; background-color: #fff; box-sizing: border-box;} .keyword_wrap .link_box a:hover{box-shadow: 3px 3px 5px rgba(0,0,0,0.3);} .keyword_wrap .link_box a::after{position: absolute; content: "#"; width: 22px; height: 22px; border-radius: 100%; background-color: #fbc72b; font-family: 'GmarketSansMedium'; color: #222; text-align: center; line-height: 25px; left: 8px; top: 50%; transform: translateY(-50%);} /* media queries */ @media screen and (max-width: 1800px){ /* content2 문자샘플 영역 */ .tab_depth3 a::after{top: 15px} .tab_contwrap .btn_next {right:-60px} .tab_contwrap .btn_prev {left:-60px} } @media screen and (max-width: 1650px){ /* content2 문자샘플 영역 */ .msg_photo li{margin-bottom: 21%} .msg_text .area_in_text{background-size: 90% 90%;} /* content3 */ .main_cont3 .service_center .tablet{background-size: 100% 100%} .main_cont3 .inner{padding: 80px 70px} .main_cont3 .service_center .tablet>div {padding: 15px 20px 0 20px;} .main_cont3 .service_center .tablet .serive_info{background-size: 100% 100%} .main_cont3 .service_center .tablet .serive_info p{padding: 13px 10px 13px 23px; font-size: 15px} .main_cont3 .service_center .tablet .service_center_title p {font-size: 28px;} /* 광고배너 */ .main_cont4 .inner{padding: 0 70px; box-sizing: border-box;} .main_cont4 .inner img{width: 100%;} } @media screen and (max-width: 1580px){ /* visual */ .visual .swiper-button-prev {left: 40px;} .visual .swiper-button-next {right: 40px;} /* content2 문자샘플 영역 */ .tab_depth3{padding: 20px 5px;} .msg_text .area_in_text{background-position: 15px 15px; background-size: 90% 90%; padding: 15px 0;} .msg_text .area_in_text p{width: 83%; height: 251px;} } @media screen and (max-width: 1500px){ /* visual */ .visual .swiper-button-prev {left: 30px;} .visual .swiper-button-next {right: 30px;} /* content2 문자샘플 영역 */ .tab_depth2{width: 90%;} .tab_depth2 a{letter-spacing: -0.5px;} .tab_depth3{padding: 20px 130px; flex-wrap: wrap;} .tab_depth3 a{line-height: 2;} .tab_depth3 a::after{top: 50%;} /* content3 */ .main_cont3 .service_center .tablet .serive_info p {font-size: 15px;} } @media screen and (max-width: 1480px){ /* 메인 비주얼 영역 */ .visual .swiper-button-prev {left: 10px;} .visual .swiper-button-next {right: 10px;} .visual .slide_button {left:22px;margin:0;} .slideBtn {text-align: left;left: 80px; width: calc(100% - 80px);} /* content1 */ .swiper2 .contWrap .slide_cont::after {right: 15px;} /* content2 문자샘플 영역 */ .main_cont2 {padding: 235px 80px 80px 80px;} .tab_depth2 a{font-size: 18px;} .tab_depth3{padding: 20px; box-sizing: border-box;} .tab_con{width: 90%;} .tab_con.msg_photo_wrap, .tab_con.msg_text_wrap {width:100%;} .tab_contwrap .btn_prev{left: 0;} .tab_contwrap .btn_next{right: 0;} .tab_contwrap .btn_prev,.tab_contwrap .btn_next{width: 40px;height: 40px;} /* content3 */ .main_cont3 .inner>div {flex-basis: calc(100%/3 - 10px);} .main_cont3 .service_center .tablet .serive_info p {padding: 13px 11px;} .main_cont3 .service_center .tablet .service_center_title p {font-size: 26px;} .main_cont3 .service_center .tablet .service_center_title span {font-size:15px;} /* 광고배너 */ .main_cont4 .inner li{width: calc((100%/4) - 15px);} } @media screen and (max-width: 1300px){ /* content1 */ .swiper2 .contWrap .slide_cont .cont1_ex {font-size:14px} .swiper2 .contWrap .slide_cont::after {right: 10px;} .swiper2 .contWrap .slide_cont::before {right: 11px;} .swiper2 .contWrap .slide_cont::before {right: 22px;} .swiper2 .contWrap .slide_cont::before {right: 7px;} .swiper2 .contWrap .slide_cont::before {right: 17px;} /* content2 문자샘플 영역 */ .msg_text .area_in_text{padding: 15px 0; height: 286px; background-position: 15px 12px;} .msg_text .area_in_text p{height: 253px;} /* content3 */ /*.main_cont3 .service_center .tablet .service_center_title{padding-left: 80px} .main_cont3 .service_center .tablet .service_center_title p{padding-bottom: 5px; padding-top: 5px;} .main_cont3 .service_center .tablet .service_center_title::after{width: 68px; height: 68px; background-size: 100% 100%}*/ .main_cont3 .service_center .tablet .serive_info p {font-size:14px;padding:13px 0px 13px 8px;} } @media screen and (max-width: 1240px){ .keyword_wrap .link_box a{padding: 7px 4px 7px 27px; letter-spacing: -0.5px;} .keyword_wrap .link_box a::after{left: 3px;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* content2 */ .tab_depth2{width: 70%; margin: 0 auto 16px auto} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width: 1500px){ /* content2 */ .tab_depth2{width: 75%;} }