File name
Commit message
Commit date
File name
Commit message
Commit date
2024-01-15
2024-01-03
File name
Commit message
Commit date
2023-06-22
File name
Commit message
Commit date
2023-12-15
File name
Commit message
Commit date
/* 메인 비주얼 영역 */
.visual {min-width: 1240px;position: relative;}
.visual {max-width: 100%; position: relative;}
.visual .swiper-slide {z-index: -1 !important;}
.visual .slideImg {height: 455px;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:15%;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: -40px 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: -240px auto 0 auto; padding: 305px 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: 18px 10px 0 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%;}
}