File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.main{margin:0 0 80px 0;}
/* =============================================
메인비주얼
============================================= */
.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: 1240px;}
.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: var(--secondary-color);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);}
/* =============================================
배너
============================================= */
.banner_slide {position:relative;max-width: 1400px;min-width: 1240px;margin:0 auto;padding:40px 0 0 0;z-index:1;}
.banner_slide .swiper2,.banner_slide .swiper-wrapper{height:100%;}
.banner_slide .swiper-slide{display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.banner_slide .swiper-slide.swiper-slide-next+.swiper-slide+.swiper-slide a{border-right:0;}
.banner_slide .swiper-slide-prev{border-right:0;}
.banner_slide .slide_btns{display:flex;height:21px;margin:30px 0 0 0;justify-content:center;align-items:center;gap:20px;}
.banner_slide .swiper-button-next,
.banner_slide .swiper-button-prev{position:relative;width:10px;height:18px;background:none;top:auto;left:auto;right:auto;margin:0;}
.banner_slide .swiper-pagination{position:relative;}
.banner_slide .swiper-pagination .swiper-pagination-bullet {width:12px;height:12px;background-color: #d5d5d5;opacity:1;margin:0 5px;vertical-align:top;}
.banner_slide .swiper-pagination .swiper-pagination-bullet-active {background-color:var(--secondary-color);}
.banner_wrap {position:relative;width:100%;height:195px;background:#fff;border:1px solid var(--primary-color);border-radius:15px;overflow:hidden;transition:0.5s ease;}
.banner_wrap a{display:flex;width:100%;height:100%;border-right:1px solid var(--primary-color);flex-direction:column;gap:15px;align-items:center;justify-content:center;transition:background 0.3s;}
.banner_wrap a:hover{background:#f4fbff;}
.banner_wrap .title{font-size:23px;font-weight:bold;color:#222;}
.banner_wrap .summary{font-size:16px;font-weight:400;color:#555;}
.main .contents_title{display:flex;align-items:center;justify-content:center;}
.main .contents_title .title{font-family:'GmarketSansBold';font-size:33px;color:#222;}
.main_cont3 .contents_title{justify-content:flex-start;margin:0 0 20px 0;}
.main_cont3 .contents_title .title{font-size:27px;}
.main_cont3 .contents_title.between{justify-content:space-between;align-items:center;}
.main_cont3 .plus_btn{width:23px;height:23px;background:url(/publish/images/plus.png) no-repeat center;transition:transform 0.5s ease-in-out;}
.main_cont3 .plus_btn:hover{background:url(/publish/images/plus2.png) no-repeat center;transform: rotate(180deg);}
/* =============================================
이달의 인기문자
============================================= */
.main_cont2{min-width:1240px;margin:80px auto;text-align:center;background:#fff;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{position:relative;text-align: center;position: relative;margin-top: 30px;}
.tab_depth2{display:flex;width:80%;justify-content:center;margin:0 auto 16px auto;gap:20px;}
.tab_depth2 a{display:flex;height:50px;padding:0 25px;font-size:17px;font-weight:500;color:#555;background:#fff;border:1px solid #d5d5d5;border-radius:50px; justify-content:center;align-items:center;transition:all 0.3s;}
.tab_depth2 a.on{background:var(--primary-color);border:1px solid var(--primary-color);color:#fff;box-shadow:0 0 8px rgba(0,0,0,0.25);}
.tab_depth2 a.tab_next::after,.tab_depth2 a.tab_prev::after{display: none;}
.tab_depth2 a.on::after{display: none;}
.btn_custom{position:absolute;width:143px;height:42px;font-size:17px;font-weight:500;border-radius:3px;background:var(--primary-dark-color);color:#fff;right:0;top:50%;transform:translateY(-50%);}
/* 인기문자 탭 */
.tab_contwrap{position:relative;}
.tab_contwrap .btn_prev,.tab_contwrap .btn_next{position:absolute;width:56px;height:56px;border-radius:100%;background-color:#f2f2f2;top: 40%;z-index:1;}
.tab_contwrap .btn_prev{left:-70px;}
.tab_contwrap .btn_next{right:-70px;}
.main_cont2 .btn_more{display:flex;height:45px;font-size:18px;font-weight:500;color:#222;margin:30px auto 0;padding:0 25px;background:#f2f2f2;border-radius:3px;justify-content:center;align-items:center;gap:15px;}
.main_cont2 .btn_more .more{display:inline-block;width:8px;height:14px;background:url(/publish/images/main/btn_more02.png) no-repeat center;}
.tab_con{margin:25px auto 0;overflow:hidden;}
.tab_con .swiper-slide{box-sizing:border-box;cursor:pointer;}
/* 포토문자 */
.msg_photo .swiper-slide .slide_area{position: relative;min-width:260px;height:420px;background-color:#f8f8f8;border:1px solid #d5d5d5;border-radius:10px;}
.msg_photo .swiper-slide .slide_area .mask{position:absolute;display:block;width:100%;height:100%;background-color:rgba(0,0,0,0);border-radius:10px;transition:background-color 0.3s ease-in-out;left:0;top:0;}
.msg_photo .swiper-slide .slide_area .btn_more{position:absolute;display:flex;width:50px;height:50px;padding:0;background:var(--secondary-color);border-radius:100%;justify-content:center;align-items:center;opacity:0;left:50%;top:50%;transform:translate(-50%,-50%);}
.msg_photo .swiper-slide .slide_area .btn_more .more{display:inline-block;width:24px;height:24px;background:url(/publish/images/main/btn_more01.png) no-repeat center;}
.msg_photo .area_img{display:flex;height:365px;border-radius:10px 10px 0 0;overflow:hidden;align-items:center;}
.msg_photo .area_img img{width: 100%;height:auto;}
.msg_photo .area_img_text{display:flex;height:50px;border-top:1px solid #d5d5d5;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;justify-content:center;}
.msg_photo .area_img_text .sub_text{display: block; font-size: 14px; color: #777; margin: 5px auto;}
.msg_photo .swiper-slide .slide_area:hover .mask{background-color:rgba(0,0,0,.3);transition: background-color 0.3s ease-in-out;left:0;top:0;}
.msg_photo .swiper-slide .slide_area:hover div.btn_more{opacity:1;}
.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;}
/* 단문문자&장문문자 */
.msg_text .swiper-slide .slide_area{position:relative;min-width:260px;height:384px;padding:20px 15px;background:#fff;border:1px solid #d5d5d5;border-radius:10px;box-sizing:border-box;transition:all .3s ease-in-out;}
.msg_text .swiper-slide .slide_area .slide_content{width:100%;height:100%;}
.msg_text .swiper-slide .slide_area .area_tit_text{position:relative;height:45px;padding:20px 0 0 0;font-size:18px;font-weight:500;line-height:1.5;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg_text .swiper-slide .slide_area .area_tit_text::before{position:absolute;content:"";width:30px;height:7px;border-radius:10px;background:#d5d5d5;top:0;left:50%;transform:translateX(-50%);transition:all .3s ease-in-out;}
.msg_text .swiper-slide .slide_area .area_in_text{width:100%;max-height:285px;height:100%;background:#f8f8f8;border-radius:5px;margin:18px auto 0;padding:15px 20px;box-sizing:border-box;overflow-y:auto;transition:all .3s ease-in-out;}
.msg_text .swiper-slide .slide_area .area_in_text p{font-size:17px;font-weight:400;line-height:1.4;color:#555;text-align:left;}
.msg_text .swiper-slide .slide_area:hover{border:1px solid var(--primary-color);box-shadow:0 0 10px rgba(0,0,0,.2);}
.msg_text .swiper-slide .slide_area:hover .area_tit_text::before{background:var(--primary-color);}
.msg_text .swiper-slide .slide_area:hover .area_in_text{background:#f4fbff;}
.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;}
/* =============================================
content03
============================================= */
.main_cont3 .inner{display:flex;gap:40px;}
.main_cont3 .inner>div{min-width:0;flex:1;}
/* 자주찾는 서비스 */
.main_cont3 .main_service ul {display:flex;flex-flow:wrap;gap:13px;}
.main_cont3 .main_service ul li {width:calc(100%/3 - 9px);}
.main_cont3 .main_service ul li a {display:flex;width:100%;height:112px;padding:26px 0;border:1px solid #d5d5d5;border-radius:10px;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;transition:all .3s ease-in-out;}
.main_cont3 .main_service ul li i {position:relative;width:100%;height:24px;margin:0 0 10px 0;background-position:center;transition: all 0.2s ease-in-out;}
.main_cont3 .main_service ul li:nth-child(1) i{background-image: url(/publish/images/main/service01.png);}
.main_cont3 .main_service ul li:nth-child(2) i{background-image: url(/publish/images/main/service02.png);}
.main_cont3 .main_service ul li:nth-child(3) i{background-image: url(/publish/images/main/service03.png);}
.main_cont3 .main_service ul li:nth-child(4) i{background-image: url(/publish/images/main/service04.png);}
.main_cont3 .main_service ul li:nth-child(5) i{background-image: url(/publish/images/main/service05.png);}
.main_cont3 .main_service ul li:nth-child(6) i{background-image: url(/publish/images/main/service06.png);}
.main_cont3 .main_service ul li span {font-size:17px;font-weight:500;}
.main_cont3 .main_service ul li a:hover{border:1px solid var(--primary-color);background:#f4fbff;box-shadow:0 0 10px 0 rgba(0,0,0,.2);}
/* 공지사항 */
.main_cont3 .main_notice ul {display:flex;border:1px solid #d5d5d5;border-radius:10px;padding:10px;box-sizing:border-box;flex-direction:column;}
.main_cont3 .main_notice ul li:nth-child(n+6){display:none;}
.main_cont3 .main_notice ul a{position:relative;display:inline-block;max-width:100%;font-size:17px;font-weight:400;color:#222;padding:11.5px 0 11.5px 26px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;align-items:center;transition:all 0.3s ease-in-out;box-sizing:border-box;}
.main_cont3 .main_notice ul a::before{position:absolute;content:"";width:7px;height:7px;background:#d9d9d9;border-radius:100%;left:10px;top:50%;transform:translateY(-50%);}
.main_cont3 .main_notice ul a:hover{text-decoration:underline;}
/* 고객센터 */
.service_center .box{display:flex;padding:29.5px 30px;border:1px solid #d5d5d5;border-radius:10px;flex-direction:column;gap:15px;}
.service_title{display:flex;align-items:center;gap:20px;}
.service_title .service{display:inline-block;width:55px;height:55px;padding:0;margin:0;border-radius:5px;background:var(--primary-color) url(/publish/images/main/serviceCenter.png) no-repeat center;}
.service_title b{font-family:'GmarketSansBold';font-size:29px;color:var(--primary-dark-color-hover);}
.service_title .email{font-family: 'GmarketSansMedium';font-size:15px;font-weight:300;color:#454545;}
.service_time_info{font-size:16px;font-weight:400;color:#555;line-height:1.4;}
.service_btn{display:flex;width:100%;height:46px;background:#f2f2f2;border-radius:3px;}
.service_btn li{flex:1;height:100%;}
.service_btn a{display:flex;width:100%;height:100%;font-size:17px;font-weight:400;color:#222;justify-content:center;align-items:center;gap:8px;transition:box-shadow .3s ease-in-out;}
.service_btn a:hover{box-shadow:0 0 8px rgba(0,0,0,0.15);border-radius:4px;}
.service_btn .circle{display:inline-block;width:15px;height:15px;border-radius:100%;}
.service_btn .kakao{background:#564742;}
.service_btn .remote{background:#4673B7;}
.service_btn .qnabtn{background:#3D5E5E;}
.main_cont4{display:none;}
/*요금안내 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: var(--secondary-light-color); 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 .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 문자샘플 영역 */
.main_cont2 .tit_text {margin:50px 0 0 0;}
.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){
.banner_slide,.main_cont2 .inner,.main_cont3 .inner{padding:0 40px;box-sizing:border-box;}
.banner_slide{padding:40px 40px 0 40px;}
/* 메인 비주얼 영역 */
.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 문자샘플 영역 */
.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: -20px;}
.tab_contwrap .btn_next{right: -20px;}
.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: 30px;}
.main_cont3 .service_center .tablet .service_center_title span {font-size:15px;}
/* 광고배너 */
.main_cont4 .inner li{width: calc((100%/4) - 15px);}
.service_title .info{width:calc(100% - 75px);}
.service_time_info{font-size:15px;}
.service_btn .circle{width:12px;height:12px;}
.service_btn a{font-size:16px;}
}
@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;}
.swiper2 .contWrap .slide_cont1 .cont1_title {font-size:20px;}
.swiper2 .contWrap .slide_cont1 .cont_ex .txt {font-size:14px; line-height: 1.3;}
.swiper2 .contWrap .slide_cont1 .cont_ex .bg_icon {width:65px; height:65px;}
/* 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%;}
}