@charset "UTF-8";

/***************************************************************************************************
	Font
***************************************************************************************************/

/* S-Core Dream */
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: 300;
  src: local("S-Core Dream"), url("../font/SCDream3.otf") format("opentype");
}
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: normal;
  src: local("S-Core Dream"), url("../font/SCDream4.otf") format("opentype");
}
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: 500;
  src: local("S-Core Dream"), url("../font/SCDream5.otf") format("opentype");
}
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: bold;
  src: local("S-Core Dream"), url("../font/SCDream6.otf") format("opentype");
}
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: 700;
  src: local("S-Core Dream"), url("../font/SCDream7.otf") format("opentype");
}
@font-face {
  font-family: "S-Core Dream";
  font-style: normal;
  font-weight: 900;
  src: local("S-Core Dream"), url("../font/SCDream9.otf") format("opentype");
}
/* VITRO */
@font-face {
  font-family: "VITRO";
  font-style: normal;
  font-weight: normal;
  src: local("VITRO"), url("../font/VITRO_PRIDE_OTF.otf") format("opentype");
}
@font-face {
  font-family: "VITRO";
  font-style: normal;
  font-weight: bold;
  src: local("VITRO"), url("../font/VITRO_CORE_OTF.otf") format("opentype");
}

:root {
    --font: "S-Core Dream";   /* font-face 로 지정한 폰트명 */

    --normal: #333;
    --primary: #F54747;
    --secondary: #012C5F;

    --sub: #595959;
    --light: #C1C1C1;
    --placeholder: #999;

    --border: #AFB4BE;
}



/***************************************************************************************************
	Reset
***************************************************************************************************/
body {-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html, body {width: 100%; height:100%; margin:0; padding:0; font-weight: 500; -webkit-text-size-adjust:none;}
html {font:normal 16px var(--font), 'arial', 'verdana', sans-serif; background:transparent;}
body {min-height:100%; font-family: var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); background:transparent; word-break: break-all; overflow-wrap: break-word;}
img {border:none;}
p, ul, li, ol, h1, h2, h3, h4, h5, h6, dl, dt, dd, em, figure {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight:bold; font-size:1em;}
li {list-style:none;}
fieldset {margin:0; padding:0; border:none;}
legend {position:absolute; left:-1000px; top:-1000px; height:0; font-size:0; line-height:0; visibility:hidden;}
a {margin:0; color:var(--normal); text-decoration:none;}
table {border-collapse:collapse; font-size:1em;}
table caption {display:none;position:absolute; left:-999px; height:0; font-size:0; line-height:0; visibility:hidden; overflow:hidden;}
table td, table th {padding:0;}
button {margin:0; padding:0; font: 500 1em var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); vertical-align:middle; background:0; border:none; overflow:visible; cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);}
button:focus {outline:none;}
button:disabled {opacity: 0.2;}
input[type=text], input[type=password], input[type=number], input[type=tel], input[type=rang], input[type=email], input[type=url], input[type=date], input[type=datetime], input[type=month], input[type=tel], input[type=search], input[type=color] {
    display:inline-block; max-width: 100%; height: 40px; margin: 0; padding: 3px 14px; font: normal .875rem var(--font), 'arial', 'verdana', sans-serif; font-weight: 500; color:var(--normal); vertical-align:middle;
    background:#fff; border:1px solid var(--border); border-radius: 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
input::-webkit-input-placeholder {font-weight: 500; color: var(--placeholder);}
input[readonly] {color: #B8BCC3; background-color: #F4F6F9;}

input[type=text]:only-child, input[type=password]:only-child, input[type=search]:only-child, input[type=number]:only-child, input[type=date]:only-child, input[type=email]:only-child, input[type=tel]:only-child {max-width:100%; width:100%;}

input[type=number]::-webkit-input-placeholder {text-align:left;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance:none; appearance:none; margin:0;}
input[type=number] {-moz-appearance:textfield; appearance:textfield;}
input[type="number"]:hover, input[type="number"]:focus {-moz-appearance:number-input; appearance:number-input;}

input[type=checkbox], input[type=radio] {margin:0; vertical-align:middle; font-size:1em; border:none; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
input[type=checkbox]:only-child, input[type=radio]:only-child {margin:0;}
input[type=checkbox] {width: 24px; height: 24px; background:url("../images/checkbox_off.svg") no-repeat center center; border:none;}
input[type=checkbox]:checked {background-image:url("../images/checkbox_on.svg");}
input[type=checkbox]:disabled {background-image: url("../images/checkbox_disabled.svg");}
input[type=checkbox]:checked:disabled {background-image: url("../images/checkbox_on_disabled.svg");}

input[type=radio] {width: 24px; height: 24px; background:url("../images/radio_off.svg") no-repeat left center; border:none;}
input[type=radio] + span, input[type=checkbox] + span {margin-left: 7px; vertical-align:middle;}
input[type=radio]:checked {background-image:url("../images/radio_on.svg");}
input[type=radio]:disabled {background-image: url("../images/radio_disabled.svg");}
input[type=radio]:checked:disabled {background-image: url("../images/radio_on_disabled.svg");}


input:focus, textarea:focus, select:focus {outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0.2);}
input:focus:not([type=checkbox]):not([type=radio]), select:focus, textarea:focus {border-color: var(--normal);}
input:disabled:not([type=radio]):not([type=checkbox]) {color: var(--disabled); border-color: #DBE0EA;}

select {margin:0; max-width:100%; height: 40px; padding:0 40px 0 14px; font: 500 .875rem var(--font), 'arial', 'verdana', sans-serif; color:var(--normal); vertical-align:middle; text-overflow:ellipsis;
    background: url("../images/select_arrow.svg") no-repeat right 14px center; background-color: #fff; border: 1px solid var(--border); border-radius: 10px; -webkit-appearance:none; -moz-appearance:none; appearance:none; white-space:nowrap; overflow:hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}

select:disabled {color: #B8BCC3; background-image: url("../images/select_arrow_disabled.svg"); background-color: #F4F6F9; opacity: 1;}
select:only-child {display:block; width:100%;}
select.noborder {height: auto; padding-right: 17px; text-align: right; background-position: right center;}
label, label > span {vertical-align:middle;}
label input[type=checkbox] + *, label input[type=radio] + * {margin-left: 10px; vertical-align:middle;}
textarea {width:100%; padding: 10px; font:normal .9375rem/1.33 var(--font), 'arial', 'verdana', sans-serif; color:var(--normal);
    background: #fff; border: 1px solid #D7DADF; border-radius: 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    resize:none;
}
textarea[readonly=readonly] {background: #f6f6f6; box-shadow: none;}
textarea:only-child {vertical-align:top;}
textarea::-webkit-input-placeholder {font-size: .875rem; color: #b5b5b5;}
hr {height:0; margin: 14px 0; border:none; border-top:1px solid #E9E9E9;}
div {box-sizing:border-box; -webkit-box-sizing:border-box;}
article, aside, footer, header, hgroup, nav, section, figure {display:block; padding:0; margin:0; box-sizing:border-box; -webkit-box-sizing:border-box;}
a[href^=tel] {text-decoration:underline;}
em, address {font-style:normal;}
em {color:var(--primary);}
sub {font-weight:normal; vertical-align:middle;}
img {max-width:100%; vertical-align:top;}

del {text-decoration-color: var(--primary);}

.cen {text-align: center !important;}
.none {display: none !important;}

.pd0 {padding: 0 !important;}

.MOB {display: none !important;}

/***** Layout *****/
.subWrap {position: relative; min-width: 1260px; min-height: 100vh; padding-top: 70px;}
.headerWrap {position: fixed; left: 0; top: 0; width: 100%; height: 70px; padding: 0; background-color: #fff; z-index: 100;}
.headerWrap h1 {position: absolute; left: 55px; top: 50%; height: 50px; margin-top: -25px;}
.headerWrap h1 a {display: block; width: 250px; height: 100%; text-indent: -999em; background: url("../images/logo.svg") no-repeat left center;}
.GNBWrap {padding: 20px 40px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13);}
.all_menu::after {content: ""; display: block; clear: both;}
.all_menu > ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; float: right;}
.all_menu li {position: relative; min-width: 100px;}
.all_menu a {display: block; height: 30px; padding: 5px 15px; font-size: 1rem; text-align: center; line-height: 20px; box-sizing: border-box;}
.all_menu .sub_menu {position: absolute; left: 0; top: 100%; min-width: 100%; height: 0; padding-top: 35px; overflow: hidden; opacity: 0; -webkit-transition: all .3s linear; transition: all .3s linear;}
.sub_menu a {height: auto; padding: 10px 5px;}
.all_menu > ul:hover::before {content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 148px; background-color: #fff; border: 0 solid #eee; border-width: 1px 0;}
.all_menu > ul:hover .sub_menu {height: auto; opacity: 1;}


.contentsWrap {position: relative; min-height: calc(100vh - 305px); padding-bottom: 146px;}
.web_container {max-width: 1200px; margin: 0 auto;}

.sub_titleWrap {position: relative; margin-bottom: 80px; color: #fff; text-align: center;}
.sub_visual_area {height: 250px; padding-top: 80px; background-size: cover !important;}
.tit_page {position: relative; font-family: "VITRO"; font-weight: 900; font-size: 40px;}
.breadcrumb {position: absolute; left: 0; top: 145px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-justify-content: center; justify-content: center;}
.breadcrumb a {position: relative; display: inline-block; margin-right: 6px; padding: 5px 9px; font-weight: 300; font-size: .9375rem; color: #fff;}
.breadcrumb a:not(:last-child)::after {content: ""; position: absolute; left: 100%; top: 50%; width: 6px; height: 10px; margin-top: -5px; background: url("../images/ico_bread_arrow.svg") no-repeat center center;}
.breadcrumb a:last-child {margin: 0;}
.btn_bread_home {width: 40px; height: 20px; text-indent: -999em; background: url("../images/ico_bread_home_w.svg") no-repeat center center;}
.company .sub_visual_area {background: url("../images/bg_sub_company.png") no-repeat center top;}
.solution .sub_visual_area {background: url("../images/bg_sub_solution.png") no-repeat center top;}
.solution_sms .sub_visual_area {background: url("../images/bg_sub_solution_sms.png") no-repeat center top;}
.solution_sms .sub_visual_area::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5);}
.customer_center .sub_visual_area {background: url("../images/bg_sub_customer_center.png") no-repeat center top;}

.image_dimm {position: relative;}
.image_dimm::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5);}
.image_dimm > *:not(.breadcrumb) {position: relative;}

.intro_cont {font-size: 1.125rem; text-align: center;}
.intro_cont .image {margin: 40px 0;}


.cont_group {padding: 139px 20px 50px;}
.cont_group.bg {background-color: #F4F4F4;}

.footerWrap {height: 235px; font-weight: 300; font-size: .875rem; color: #8A8A8A; background-color: #1C1A1B;}
.footerWrap a {color: #8A8A8A;}
.footerWrap .web_container {position: relative; max-width: 1260px; padding: 40px 10px 20px 242px;}
.footerWrap .logo {position: absolute; left: 10px; top: 41px; width: 182px; height: 22px; text-indent: -999em; background: url("../images/logo_footer.svg") no-repeat left center;}
.footer_menu {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-left: -21px; margin-bottom: 15px;}
.footer_menu li {position: relative; padding-left: 1px;}
.footer_menu li:not(:first-child)::before {content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background-color: #3A3939;}
.footer_menu a {display: block; padding: 5px 20px; font-weight: 300; color: #8A8A8A;}
.footerWrap .info {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; line-height: 1.78;}
.footerWrap .info > *:not(:last-child) {margin-right: 50px;}
.copyright {margin-top: 35px;}

/***** FAB *****/
.fabWrap {position: -webkit-sticky; position: sticky; bottom: 40px;}
.fabWrap .wrapper {
	position: absolute;
    right: 28px;
    bottom: 60px;
    width: 56px;
}
.fabWrap button {width: 56px; height: 56px; margin-top: 16px; text-indent: -999em;}
.btn_fab_kakaotalk {background: url("../images/btn_fab_kakao.png") no-repeat center center;}
.btn_fab_kakaotalk:hover {background-image: url("../images/btn_fab_kakao_hover.png");}
.btn_fab_naver {background: url("../images/btn_fab_naver.png") no-repeat center center;}
.btn_fab_naver:hover {background-image: url("../images/btn_fab_naver_hover.png");}
.btn_fab_telegram {background: url("../images/btn_fab_telegram.png") no-repeat center center;}
.btn_fab_telegram:hover {background-image: url("../images/btn_fab_telegram_hover.png");}


/***** main *****/
.mainWrap {position: relative; min-width: 1260px; min-height: 100vh; padding: 0; overflow: hidden;}
.gnb_w {background-color: transparent;}
.gnb_w .GNBWrap {box-shadow: none;}
.gnb_w h1 a {background-image: url("../images/logo_w.svg");}
.gnb_w .all_menu a {color: #fff;}
.gnb_w .all_menu > ul::before {display: none;}
.keyvisual {position: relative; height: 100vh; overflow: hidden;}
.keyvisual .image {height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.btn_main_key_prev {width: 80px; height: 80px; left: 60px; text-indent: -999em; background: url("../images/btn_main_key_prev.svg") no-repeat center center;}
.btn_main_key_next {width: 80px; height: 80px; right: 60px; text-indent: -999em; background: url("../images/btn_main_key_next.svg") no-repeat center center;}
.key_text {position: absolute; left: 10%; top: 50%; width: 80%; margin-top: -30px; font-size: 1.125rem; color: #fff; text-align: center; line-height: 1.67; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.key_text .tit {margin-bottom: 11px; font-family: "VITRO"; font-weight: normal; font-size: 50px; line-height: 1.4;}
.keyvisual .swiper-pagination {bottom: 97px;}
.keyvisual .swiper-pagination .swiper-pagination-bullet {width: 20px; height: 20px; margin: 0 10px; background-color: #fff; opacity: 0.5;}
.keyvisual .swiper-pagination .swiper-pagination-bullet-active {opacity: 1;}

.mainWrap .cont_group {font-weight: 500; font-size: 1.125rem; text-align: center;}
.tit_main {margin-bottom: 12px; font-weight: 900; font-size: 40px;}
.main_intro {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 59px; -webkit-justify-content: space-between; justify-content: space-between;}
.main_intro li {min-width: 174px;}
.main_intro .image {margin-bottom: 17px;}

.main_service {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 60px; -webkit-justify-content: space-around; justify-content: space-around;}
.main_service li {-webkit-flex: 1; flex: 1; margin-left: 27px; padding: 35px 20px; font-weight: 500; font-size: .8125rem; text-align: center; background-color: #fff;}
.main_service li:first-child {margin-left: 0;}
.main_service .tt {margin-bottom: 34px; font-weight: 500; font-size: 1.125rem; color: #012C5F;}
.main_service .tt .textbox {display: inline-block; min-width: 80px; height: 23px; font-weight: 300; font-size: .875rem; color: #fff; text-align: center; line-height: 23px; background-color: #012C5F; border-radius: 30px;}
.main_service .tt span {display: block; margin-top: 12px;}
.main_service .image {margin-bottom: 24px;}
.main_service .cont {height: 60px;} /*20230722 sw*/
.main_service .c_btn {margin-top: 20px;}
.main_service .btn_more {padding: 10px 15px; font-weight: 500; font-size: .8125rem; color: #007FA8; background: url("../images/ico_main_service_more.svg") no-repeat right 5px center;}

.main_portfolio {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 60px 0 70px; -webkit-column-gap: 9px; column-gap: 9px; -webkit-row-gap: 10px; row-gap: 10px; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.main_portfolio li {position: relative; overflow: hidden;}
.main_portfolio li .image {-webkit-transition: all .3s linear; transition: all .3s linear;}
.main_portfolio li:hover .image {-webkit-transform: scale(1.2); transform: scale(1.2);}
.main_portfolio + .c_btn .btn_more {padding: 10px 35px; font-weight: 500; font-size: 1.125rem; background: url("../images/ico_main_site_more.svg") no-repeat right 5px center;}

.cont_group.main_estimate {position: relative; height: 398px; margin-top: 170px; padding: 77px 10px 35px; text-align: left;}
.main_estimate .visual {position: absolute; left: 50%; bottom: -62px; right: 0; height: 614px; overflow: hidden;}
.main_estimate .visual img {width: auto; max-width: inherit; height: 100%;}
.main_estimate .cont {position: relative;}
.main_estimate .tit_main {font-family: "VITRO";}
.main_estimate .c_btn {margin-top: 100px;}
.main_estimate .btn_more {display: inline-block; width: 150px; height: 45px; padding: 5px 25px; font-size: 1.125rem; color: #fff; line-height: 33px; background: #012C5F url("../images/ico_rarrow01_w.svg") no-repeat right 15px center; border-radius: 45px; box-sizing: border-box;}


.program_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 60px; -webkit-column-gap: 20px; column-gap: 20px; -webkit-row-gap: 20px; row-gap: 20px; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.program_list li {min-width: calc((100% - 60px) / 4); padding: 38px; text-align: center; border: 1px solid #CDCDCD; box-sizing: border-box;}
.program_list .program {position: relative; text-align: center;}
.program_list .program_logo {width: 140px; height: 140px; margin: 0 auto 25px; background-color: #E8F3FF !important; border-radius: 150px; overflow: hidden;}
.program_list .program .tit {display: inline-block; min-width: 125px; height: 35px; font-weight: 300; font-size: 1.125rem; color: #CDCDCD; text-align: center; line-height: 33px; background-color: #012C5F; border: 1px solid #CDCDCD; border-radius: 40px; box-sizing: border-box;}





/***** tab *****/
.tab01 {margin-bottom: 120px; text-align: center; background-color: #F9F9F9; box-shadow: inset 0 -1px #E5E5E5;}
.tab01 ul {display: inline-flex; max-width: 1200px;}
.tab01 li {border: 2px solid rgba(0,0,0,0);}
.tab01 a {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 85px; padding: 10px 42px; font-weight: 500; font-size: 1.375rem; color: #666; -webkit-box-align: center; align-items: center;}
.tab01 .on {border-bottom-color: #012C5F;}
.tab01 .on a {color: #012C5F;}
.sub_titleWrap + .tab01 {margin-top: -80px;}





/***** search *****/
.searchWrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 34px 0; -webkit-justify-content: flex-end; justify-content: flex-end;}
.searchWrap > *:not(:first-child) {margin-left: 10px;}
.inp_search {position: relative;}
.inp_search input {padding-right: 55px;}
.inp_search .btn_search {position: absolute; right: 0; top: 0; border-radius: 0 10px 10px 0;}



/***** button *****/
.btn01 {display: inline-block; min-width: 185px; height: 53px; padding: 10px 15px; font-weight: bold; color: #fff; text-align: center; line-height: 33px; background-color: #012C5F; border-radius: 50px; box-sizing: border-box;}
.btn01.gray {background-color: #999;}
.btn01.red {background-color: #F54747;}
.btn_regist {display: inline-block; min-width: 185px; height: 53px; padding: 10px 15px; font-weight: bold; color: #fff; text-align: center; line-height: 33px; background-color: #F54747; border-radius: 50px; box-sizing: border-box;}



.c_btn {margin: 50px 0; text-align: center;}
.c_btn:last-child {margin-bottom: 0;}
.c_btn a {margin: 0 15px;}
.reg_btn_area {margin: 50px 0; text-align: right;}
.btn_more {display: inline-block; min-width: 155px; height: 53px; padding: 10px 34px 10px 37px; font-weight: bold; font-size: 1rem; color: #333; line-height: 31px; border: 1px solid #333; border-radius: 50px; box-sizing: border-box;}
.btn_more .ico {display: inline-block; margin-left: 20px; font-weight: normal; font-size: 1.625rem;}
.btn_more > *:not(:only-child) {vertical-align: middle;}
.btn_more.arrow {min-width: auto; height: 39px; padding: 5px 16px; font-weight: 500; font-size: .75rem; line-height: 25px; background-color: #fff; border: 2px solid #DBDBDB;}
.btn_more.arrow > * {position: relative; display: inline-block; padding-right: 38px; background: url("../images/ico_more_arrow.svg") no-repeat right center;}
.btn_search {display: inline-block; width: 42px; height: 40px; text-indent: -999em; background: #222 url("../images/ico_search.svg") no-repeat center center; background-size: 20px auto; border-radius: 10px;}


.btn_detail {position: absolute; left:0; top:0; width:100%; height:100%; text-indent: -999em; opacity: 0;}



/***** title *****/
.tit01 {margin: 80px 0 52px; font-weight: 900; font-size: 40px; text-align: center;}
.tit01:first-child {margin-top: 0;}
.tit01.txtc_blue {font-weight: 700;}
.tit02 {margin: 52px 0 54px; font-size: 2.125rem; color: var(--secondary);}
.tit03 {margin: 30px 0 15px; font-size: 2.1875rem;}
.tit04 {margin: 30px 0 15px; font-size: 40px; text-align: center;}
.tit04 > span {display: inline-block; border-bottom: 3px solid #333;}
.tit05 {margin: 40px 0 20px 10px; font-size: 1.4rem;}
.txt_intro {margin: 15px 0; font-size: 30px;}
.txt_intro.lg {margin: 24px 0; font-size: 36px;}


/***** text *****/
.txt01 {font-size: 1.4rem; line-height: 1.55;}

.txt_datetime {font-size: .875rem; color: #999;}
.txt_datetime > *:not(:last-child) {margin-right: 16px;}

.txtbox {display: inline-block; min-width: 70px; padding: 0 10px; font-weight: 500; font-size: .8125rem; color: #fff; text-align: center; line-height: 29px; background-color: #012C5F; border-radius: 4px; box-sizing: border-box;}
.txtbox.gray {background-color: #C1C1C1;}

.txt_bg {color: inherit; background-color: #FFFDD5;}
.txt_bg.blue {background-color: #7FFFF0;}



.txtc_blue {color: var(--secondary);}


/***** list *****/
.dlist01 {display: table; width: 100%; font-size: 1.5625rem;}
.dlist01 dl {display: table-row; margin: 0;}
.dlist01 dt, .dlist01 dd {display: table-cell; padding: 10px 0; vertical-align: middle;}
.dlist01 dt {width: 2em; padding-right: 45px; font-weight: bold; white-space: nowrap;}

.bul_list {font-size: 1.0625rem; line-height: 1.5;}
.bul_list li {position: relative; margin-top: 10px; padding-left: 19px;}
.bul_list li::before {content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 10px; margin-top: -5px; background-color: #012C5F;}
.bul_list li:first-child {margin: 0;}


/***** table *****/
.table01 {width: 100%; font-weight: 300; color: #666; background-color: #fff; border-top: 1px solid #333; border-collapse: collapse;}
.table01 tr {border-bottom: 1px solid #CDCDCD;}
.table01 th, .table01 td {height: 49px; padding: 10px 40px; text-align: left;}
.table01 th {font-weight: 500; color: #444;}

.table02 {border-top: 2px solid #222;}
.table02 tr {border-bottom: 1px solid #D8D8D8;}
.table02 th {padding: 20px; font-weight: 500; color: #333; text-align: center; vertical-align: middle; background-color: #F2F2F2;}
.table02 td {padding: 27px 20px; vertical-align: middle;}
.table02 input:not([type=checkbox]):not([type=radio]), .table02 select {height: 48px; font-size: .9375rem;}



.tableWrap table {width: 100%;}

.data_table {width: 100%; font-size: .875rem; border-top: 1px solid #222;}
.data_table tr {border-bottom: 1px solid #D8D8D8;}
.data_table thead th {height: 52px; padding: 5px; font-weight: bold; text-align: center;}
.data_table tbody th, .data_table tbody td {height: 42px; padding: 10px; text-align: center;}
.data_table a {display: block; padding: 5px 0; text-align: left;}
.new {display: inline-block; min-width: 36px; height: 18px; margin: 0 5px; padding: 0 5px; font-weight: 500; font-size: .6875rem; color: #fff; text-align: center; vertical-align: middle; line-height: 18px; background-color: #FF2626; border-radius: 20px; box-sizing: border-box;}

/*** paging ***/
.paging {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; margin: 70px 0 80px; text-align: center;}
.paging > a + a {margin-left: 5px}
.paging a {display: inline-block; width: 30px; height: 30px; font-weight: 500; font-size: .875rem; text-align: center; line-height: 30px; border: 1px solid var(--border); border-radius: 30px; box-sizing: border-box;}
.paging ol {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 15px;}
.paging li + li {margin-left: 5px;}
.paging .cur a {color: #fff; background-color: #222;}
.btn_page {text-indent: -999em !important; overflow: hidden;}
.btn_page.fir {background: url("../images/btn_page_fir.svg") no-repeat center center;}
.btn_page.prev {background: url("../images/btn_page_prev.svg") no-repeat center center;}
.btn_page.next {background: url("../images/btn_page_next.svg") no-repeat center center;}
.btn_page.end {background: url("../images/btn_page_end.svg") no-repeat center center;}


/*** 게시판 상세 ***/
.board_info_cont {margin: 122px 0 0; padding: 43px 20px 45px; font-size: .875rem; text-align: center; background-color: #F9F9F9; border-top: 1px solid #222; border-bottom: 1px solid #D8D8D8;}
.tit_board {margin-bottom: 20px; font-weight: bold; font-size: 30px;}
.tit_board > * {vertical-align: middle;}
.tit_board .new {height: 28px; padding: 0 10px; font-size: 1rem; line-height: 28px; vertical-align: middle;}
.tit_board .txtbox {margin-left: 5px;}
.board_info_cont .info > * {display: inline-block; margin: 0 25px;}
.board_cont {min-height: 15em; margin-bottom: 70px; padding: 35px 20px; font-weight: .875rem; line-height: 1.5;  white-space: pre-line; }

.qnaWrap {position: relative; padding: 0 36px; font-size: .875rem; border-bottom: 1px solid #222;}
.qnaWrap > div {position: relative; padding: 35px 20px 35px 84px; border-bottom: 1px solid #D8D8D8;}
.qnaWrap > div:last-child {border: none;}
.qnaWrap .tit {position: absolute; left: 0; top: 35px; width: 55px; height: 55px; font-size: 500; font-size: 1rem; color: #999; text-align: center; line-height: 51px; background-color: #fff; border: 2px solid #707070; border-radius: 55px; box-sizing: border-box;}
.qnaWrap .board_cont {min-height: 3em; margin: 15px 0; padding: 0; line-height: 2;}
.qnaWrap .answer .tit {color: #F54747; border-color: #F54747;}






/***** form *****/
.form_row {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center;}
.form_row > *:not(:last-child) {margin-right: 10px;}
.form_list > label {display: inline-block; min-width: 10%; margin-right: 20px;}
.form_list > label:last-child {margin: 0;}

.inp_box input {width: 100%;}

.contact_reg {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; max-width: 610px;}
.contact_reg .inp_box {-webkit-flex: 1; flex: 1;}
.contact_reg .txt {margin: auto 10px;}

.inp_file {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center;}
.inp_file .inp_box {-webkit-flex: 1; flex: 1;}
.inp_file input[type=file] {position: absolute; right: 0; top: 0; width: 100%; opacity: 0; cursor: pointer;}
.inp_file .bt {display: inline-block; min-width: 160px; height: 48px; margin-left: 20px; padding: 10px; font-weight: 500; font-size: .875rem; color: #fff; text-align: center; line-height: 28px; background-color: #999999; border-radius: 10px; box-sizing: border-box;}
.inp_file .bt::before {content: ""; display: inline-block; width: 14px; height: 13px; margin-right: 10px; background: url("../images/ico_file.svg") no-repeat left center;}

.reg_form_row {margin-top: 10px;}
.reg_form_row:first-child {margin-top: 0;}
.reg_form_row .label {position: relative; display: block; margin-bottom: 10px; padding-left: 15px; font-weight: 500; font-size: 1.0625rem;}
.reg_form_row .label::before {content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; background-color: #45A9FF; border-radius: 5px;}
.reg_form_row .inp_box input {height: 50px; border-radius: 0;}

/***** contents style *****/

.cont_box01 {margin: 15px 0 25px; padding: 30px 20px; background: #F5F8FA; border-top: 2px solid #333;}
.cont_box01.noti {padding: 35px 20px 35px 54px; font-size: 1.0625rem; background-color: #FFF2F2; border-top: 4px solid #EF6665;}
.cont_box01 .tt {position: relative; margin-bottom: 25px; padding-left: 36px; font-weight: bold; font-size: 1.375rem;}
.cont_box01 .tt::before {content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: url("../images/ico_chk.svg") no-repeat left center;}

.cont_box02 {padding: 36px 45px; font-size: .875rem; background-color: #F6F7F9; border: 1px solid #ddd; border-radius: 10px;}
.cont_box02 .tt {margin-bottom: 15px; font-weight: 500; font-size: 22px;}
.cont_box02.more_type {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center;}
.cont_box02.more_type .option {margin-left: auto; padding-left: 10px;}

.company_intro {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 80px 0 86px; font-weight: 500; font-size: .8125rem; text-align: center; -webkit-justify-content: space-between; justify-content: space-between;}
.company_intro li {width: 32%; letter-spacing: -0.05em;}
.company_intro .image {margin-bottom: 35px;}
.company_intro .tit {margin: 15px 0; font-weight: 500; font-size: 1.875rem; color: var(--secondary);}

.optWrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center;}
.optWrap .option {margin-left: auto; padding-left: 10px;}

.img_preview {margin: 25px 0 70px;}


/*** 오시는 길 ***/
.mapWrap {position: relative; border: 1px solid #707070; overflow: auto;}
.contact_list {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; font-weight: 500; border-top: 1px solid #333; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.contact_list li {padding: 0 20px; border-bottom: 1px solid #CDCDCD; box-sizing: border-box;}
.contact_list dl {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; min-height: 70px; -webkit-box-align: center; align-items: center;}
.contact_list dt {width: 40px; height: 32px; margin-right: 35px; text-indent: -999em;}
.contact_list .addr, .contact_list .email {width: 100%;}
.contact_list .addr dt {background: url("../images/ico_contact_addr.svg") no-repeat left center;}
.contact_list .tel {width: 50%;}
.contact_list .tel dt {background: url("../images/ico_contact_tel.svg") no-repeat left center;}
.contact_list .fax {width: 50%;}
.contact_list .fax dt {background: url("../images/ico_contact_fax.svg") no-repeat left center;}
.contact_list .email dt {background: url("../images/ico_contact_email.svg") no-repeat left center;}

/*** 솔루션 ***/
.solution_intro {position: relative; margin: 66px 0 85px; background-color: #F5F8FA;}
.solution_intro .web_container {height: 687px; padding-top: 105px;}
.solution_intro .solution_intro_image {position: absolute; right: 0; bottom: 0;}
.solution_intro .txt_price {margin-bottom: 40px; font-weight: bold; font-size: 35px; color: #012C5F;}
.solution_intro .txt_price .unit {margin-left: 5px; font-size: 25px; color: #454545;}
.solution_intro .btn_area {margin-top: 90px;}
.solution_intro a {display: inline-block; min-width: 185px; height: 53px; margin-right: 15px; padding: 10px 40px; font-weight: bold; color: #fff; text-align: center; line-height: 33px; background-color: #012C5F; border-radius: 50px; box-sizing: border-box;}
.solution_intro a > span {position: relative; display: inline-block; padding-left: 26px;}
.solution_intro a > span::before {content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px;}
.btn_demo > span::before {background: url("../images/ico_bt_user.svg") no-repeat left center;}
.btn_adm > span::before {background: url("../images/ico_btn_adm.svg") no-repeat left center;}
.solution_intro .btn_estimate {background-color: #F54747;}
.btn_estimate > span::before {background: url("../images/ico_bt_estimate.svg") no-repeat left center;}
.use_guide {margin-top: 57px;}
.use_guide li {margin-top: 20px; padding: 17px 20px 17px 209px; background: #F5F8FA url("../images/ico_guide.svg") no-repeat 32px center;}
.use_guide .cont {min-height: 100px; padding-left: 40px; font-size: 1.0625rem; line-height: 2.1; border-left: 1px solid #EBEBEB;}
.use_guide .tit {margin-bottom: 19px; font-weight: bold; font-size: 1.5625rem;}
.use_guide .contact {display: inline-block; height: 47px; margin-top: 27px; padding: 5px 28px; background-color: #DDF1FF; border-radius: 50px;}
.use_guide .contact a {display: inline-block; padding: 0 10px 0 28px; line-height: 37px;}
.use_guide .contact a em {color: #1A64AF;}
.use_guide .contact a + a {margin-left: 50px;}
.use_guide .contact .call {background: url("../images/ico_call.svg") no-repeat left center;}
.use_guide .contact .email {padding-left: 36px; background: url("../images/ico_email.svg") no-repeat left center;}

/*** sms ***/
.sms_intro {margin-top: 80px; background: #EAF3FA;}
.sms_intro .web_container {padding: 80px 0;}
.sms_intro .tit01 {margin: 0;}
.sms_step {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 32px; justify-content: center; gap: 20px;}
.sms_step li {height: 480px; background-color: #fff; border-radius: 17px; overflow: hidden; transition: all .1s linear;}
.sms_step .cont {padding: 40px 35px 20px; font-size: 1.4rem; text-align: center;}
.sms_step .tit {min-height: 50px; margin-bottom: 28px;}
.sms_step .txt_eng {font-weight: bold; font-size: .875rem; color: var(--secondary);}
.sms_step li:hover {transform: translateY(-12px);}
.sms_cont_box {position: relative;}
.sms_cont01_top {padding: 99px; background: url("../images/img_sms_cont01.png") no-repeat center center; background-size: cover;}
.sms_intro_box {width: 590px; margin: 0 auto; padding: 64px 40px; font-weight: 300; font-size: 1.4rem; background-color: #fff; border-radius: 23px;}
.sms_intro_box .tit {margin-bottom: 36px; font-size: 40px; color: var(--secondary); text-align: center; line-height: 1.2;}
.sms_intro_box .tit > * {display: block; font-weight: 700;}
/*
* 20230722 sw
*/
.sms_intro_box .tit .tit_sub {margin-bottom: 22px; font-size: 2.5rem; color: var(--primary); line-height: 1.2; font-weight: 800; color: #000000}
.detail_cont {padding: 32px 20px; font-size: 1.4rem; color: #fff; line-height: 1.6; background-color: #333;}
.sms_cont_box .detail_cont .web_container {min-height: 200px; padding: 60px 20px 52px 264px; background: url("../images/img_sms_cont01_detail.png") no-repeat 2px center;}
.detail_cont .txt_bg.blue {color: #1F2123;}
.sms_solution_step {margin: 80px 0;}
.sms_step02 {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 59px; justify-content: center; gap: 20px;}
.sms_step02 > li {flex: 1; height: 480px; border: 1px solid #AFB4BE; border-radius: 15px; box-sizing: border-box;}
/* 20230722 sw
.sms_step02 > li:last-child .txt_step {color: #fff; background-color: #F34A4E;}
*/
.sms_step02 > li:last-child .txt_step {font-weight: 800}
.sms_step02 .txt_step {padding: 23px 10px; font-size: 1.4rem; line-height: 1.1; text-align: center; background-color: #eee; border-radius: 13px 13px 0 0;}
.sms_step02 .cont {padding: 20px;}
.sms_step02 .tit {margin-bottom: 24px; font-weight: bold; font-size: 1.4rem; color: var(--secondary); text-align: center;}
.sms_step02 ol li {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 16px;}
.sms_step02 .num {width: 24px; min-width: 24px; height: 24px; margin-right: 12px; font-size: 1rem; color: #fff; text-align: center; line-height: 24px; background-color: var(--sub); border-radius: 30px;}
.skill {position: relative; margin: 84px 0; padding-left: 407px; font-size: 1.4rem; color: var(--sub); line-height: 1.6;}
.skill::before {content: ""; position: absolute; left: 0; top: 50%; width: 400px; height: 270px; margin-top: -135px; background: url("../images/img_sms_skill.png") no-repeat left center;}
.skill .tit01 {margin: 0 0 24px; text-align: left;}
.skill .txt_caution {margin: 24px 0; font-size: 1.5rem; color: #333;}
.feature {padding: 120px 0; background: #F5F7F9;}
.feature .tit01 {margin: 0 0 40px;}
.feature li {position: relative; display: flex; margin-top: 40px; min-height: 137px; -webkit-box-align: center; align-items: center; background-color: #fff; border-radius: 15px; overflow: hidden;}
.feature .cont {width: 43%; max-width: 508px; padding: 70px 44px 69px; font-size: 1.4rem; color: var(--sub); line-height: 1.8;}
.feature dt {font-weight: bold; font-size: 1.5rem; color: var(--normal); text-align: center;}
.feature .image {flex: 1; overflow: hidden;}
.feature .image img {-webkit-transition: all .2s linear; transition: all .2s linear;}
.feature li:nth-child(odd) .image {order: 2;}
.feature li:hover .image img {scale: 1.1;}
.sms_speed .about {position: relative; min-height: 546px; font-size: 1.4rem; color: #fff; text-align: center; background: url("../images/bg_sms_speed.png") no-repeat center top; background-size: cover;}
.sms_speed .about .web_container {padding: 69px 0;}
.sms_speed .about .tit01 {margin-bottom: 16px;}
.sms_speed .about ul {display: flex; margin-top: 40px; justify-content: center; gap: 20px; font-size: 2rem;}
.sms_speed .about li {flex: 1; max-width: 280px; padding-top: 116px; text-align: center; background: url("../images/img_sms_speed01.png") no-repeat center top;}
.sms_speed .about dt {margin-bottom: 16px; font-weight: 500; font-size: 1.4rem; color: #7FFFF0;}
.sms_speed .about .sub {margin-top: 16px; font-weight: bold; font-size: .875rem;}
.sms_speed .about li:nth-child(2) {background-image: url("../images/img_sms_speed02.png");}
.sms_speed .about li:nth-child(3) {background-image: url("../images/img_sms_speed03.png");}
.sms_speed .detail_cont {text-align: center;}
.sms_faq {padding: 80px 0 112px; background-color: #ECEDF1;}
.sms_faq .tit01 {margin-bottom: 40px;}
.sms_faq_list {max-width: 794px; margin: 40px auto 0; font-size: 1.4rem; color: var(--sub); line-height: 1.6;}
.sms_faq_list li:not(:first-child) {margin-top: 24px;}
.sms_faq_list dt, .sms_faq_list dd {display: flex; padding: 16px 32px; align-items: center; background-color: #fff; border-radius: 10px;}
.sms_faq_list .txt_qa {min-width: 48px; margin-bottom: auto; font-weight: 700; font-size: 2rem; color: var(--secondary); line-height: 1.1875;}
.sms_faq_list .txt {flex: 1;}
.sms_faq_list dd {margin-top: 8px; font-weight: 300;}
.sms_faq_list dd .txt_qa {color: var(--primary); color: #000000}
.sms_sm {margin: 80px 0;}
.sms_sm .tit01 {margin-bottom: 40px;}
.sm_list {max-width: 795px; display: flex; margin: 40px auto 0; gap: 20px;}
.sm_list li {flex: 1; padding: 40px 29px; font-size: 1.4rem; text-align: center; border: 1px solid #AFB4BE; border-radius: 10px;}
.sm_list .tit {margin-bottom: 40px; font-weight: bold; font-size: 2rem;}
.sm_list dl {margin-top: 24px; color: var(--sub);}
.sm_list .tit + dl {min-height: 104px;}
.sm_list dt {margin-bottom: 4px;}
.sm_list dd {font-size: 1.5rem;}
.sm_list .txt_sub {display: block; margin-top: 4px; font-weight: 200; font-size: .875rem; color: #2280D0;}
.sm_list li:hover {padding: 39px 28px; border: 2px solid var(--secondary);}
.sm_list li:hover .tit {color: var(--secondary);}



/***** 포트폴리오 *****/
.portfolio_list ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.portfolio_list li {position: relative; width: calc((100% - 60px) / 3); margin: 0 30px 30px 0; overflow: hidden;}
.portfolio_list li:nth-child(3n) {margin-right: 0;}
.portfolio_list .hover_cont {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 20px; color: #fff; background-color: rgba(1, 44, 95, 0.8); opacity: 0; -webkit-transition: all .3s linear; transition: all .3s linear;}
.portfolio_list .tit {display: block; font-weight: 500; font-size: 1.875rem; text-align: center;}
.portfolio_list .hover_cont::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 38px; background: url("../images/ico_search.svg") no-repeat center center; -webkit-transition: all .3s linear; transition: all .3s linear;}
.portfolio_list li:hover .hover_cont {padding: 90px 20px 20px; opacity: 1;}
.portfolio_list li:hover .hover_cont::before {bottom: 97px;}


/***** 약관 *****/
.terms_cont {min-height: 250px; max-height: 345px; margin: 20px 10px 9px; padding: 20px 30px; font-size: .8125rem; color: #666; line-height: 2.5; background-color: #F9F9F9; border: 1px solid #ddd; border-radius: 10px; white-space: pre-line; -webkit-overflow-scrolling: touch; overflow: auto;}
.terms_cont.full {max-height: 740px;}
.agree_chk {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; padding-left: 30px; font-weight: bold; -webkit-box-align: center; align-items: center;}
.agree_chk label {margin-left: 20px; font-weight: normal;}


/***** popup *****/
.modalWrap {position:fixed; left:0; top:0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; width:100%; height:100%; padding: 50px; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; background:rgba(0,0,0,.3); z-index:1000;}
.dialog_box {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 660px; max-width: 650px; max-height: 90%; margin: 0 auto; background:#fff; box-shadow: 0 8px 8px rgba(0,0,0,.16); overflow: hidden; z-index:1000;}
.dialog_box .pop_header {position: relative; padding: 20px 55px; font-weight:900; color: #fff; text-align:center; background-color: #2A3C99; z-index: 20;}
.pop_header h1 {font-size: 1.75rem;}
.btn_pop_close {position:absolute; right:10px; top: 50%; width: 50px; height: 50px; margin-top: -25px; text-indent:-999em; background:url("../images/btn_pop_close.svg") no-repeat center center;}
.dialog_box .pop_cont {-webkit-flex:1; flex:1; width:100%; height:100%; padding: 50px 30px; overflow:auto;}
.pop_cont .c_btn {padding:0 15px;}
.pop_cont:first-child {padding-top:20px;}
.pop_cont:last-child {padding-bottom:20px;}
.pop_cont .c_btn button:only-child {min-width: 160px;}
.pop_btn {display:-webkit-box; display:flex; padding: 0 30px 30px; -webkit-justify-content: center; justify-content: center;}
.pop_btn button {min-width: 150px; height: 50px; font-weight: 500; font-size: 1rem; color: #fff; background-color: #2A3C99; border-radius: 0;}
.pop_btn button + button {margin-left:10px;}
.btn_pop02 {min-width: 150px; height: 50px; font-weight: 500; font-size: 1rem; color: #fff; background-color: #666 !important; border-radius: 0;}




/***** jquery datepicker *****/
.ui-datepicker {display: none; width: 250px; margin-top: 2px; padding: 10px 5px; font-size: .875rem; background-color: #fff; border: 1px solid #366CE8; border-radius: 5px; z-index: 20 !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.13);}
.ui-datepicker-header {position: relative; padding: 18px 20px 10px; text-align: center;}
.ui-datepicker-header a {position: absolute; width: 30px; height: 30px; text-indent: -999em;}
.ui-datepicker-header select {height: 30px; margin: 0 5px;}
.ui-datepicker-prev {left: 10px; background: url("../images/btn_cal_prev.svg") no-repeat center center;}
.ui-datepicker-next {right: 10px; background: url("../images/btn_cal_next.svg") no-repeat center center;}
.ui-datepicker-calendar {width: 100%; font-size: 0.75rem; color: #222;}
.ui-datepicker-calendar thead th {height: 25px; padding: 5px 4px;}
.ui-datepicker-calendar thead th:first-child {color: #E34949;}
.ui-datepicker-calendar thead th:last-child {color: #366CE8;}
.ui-datepicker-calendar td {padding: 5px 4px; text-align: center;}
.ui-datepicker-calendar .ui-state-default {display: inline-block; width: 25px; height: 25px; font-size: .75rem; color: #222; text-align: center; line-height: 25px; background: #F5F5F5; border-radius: 20px; box-sizing: border-box;}
.ui-datepicker-calendar td:first-child .ui-state-default {color: #E34949;}
.ui-datepicker-calendar td:last-child .ui-state-default {color: #366CE8;}
.ui-datepicker-other-month .ui-state-default {color: #BDBDBD !important;}
.ui-datepicker-today .ui-state-default {background-color: #E8F4FD;}
.ui-datepicker-current-day .ui-state-default {color: #fff; background-color: #366CE8;}



/***********************************************************************************************************
    Mobile
***********************************************************************************************************/
@media screen and (max-width: 768px) {
    .MOB {display: block !important;}
    .WEB {display: none !important;}
    .M_block {display: block !important;}
    .M_flex {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
    .M_flex a {-webkit-flex: 1; flex: 1; min-width: auto; margin: 0;}
    .M_flex a:not(:first-child) {margin-left: 10px;}

    .subWrap {min-width: 100%; padding-top: 55px;}
    .headerWrap {position: fixed; left: 0; top: 0; width: 100%; height: 55px; padding: 0 50px; background-color: #fff; border-bottom: 1px solid #E7E7E7;}
    .headerWrap h1 {position: static; height: 100%; margin-top: 0;}
    .headerWrap h1 a {display: block; width: 100%; height: 100%; text-indent: -999em; background-position: center center; background-size: 182px auto;}
    .GNBWrap {position: absolute; top: 0; right: 0; padding: 0; padding: 7px 10px; overflow: inherit; box-shadow: none; z-index: 10;}
    .GNBWrap .btn_menu {width: 40px; height: 40px; text-indent: -999em; background: url("../images/btn_menu.svg") no-repeat center center;}
    .all_menu {position: fixed; left: 80px; top: 55px; bottom: 0; width: calc(100vw - 80px); padding-top: 64px; background-color: #fff; transform: translateX(100%); transition: all .3s linear;}
    .btn_menu_close {position: absolute; right: 10px; top: 12px; width: 40px; height: 40px; text-indent: -999em; background: url("../images/btn_menu_close.svg") no-repeat center center;}
    .all_menu > ul {display: block; float: none; border-top: 1px solid #E7E7E7; overflow: auto; box-sizing: border-box;}
    .all_menu > ul > li {border-bottom: 1px solid #E7E7E7;}
    .all_menu a {height: 45px; padding: 10px 24px; font-size: .875rem; color: var(--normal) !important; text-align: left; line-height: 25px; box-sizing: border-box;}
    .all_menu .menu_tit {padding-right: 40px; font-family: "VITRO"; font-weight: bold; background: url("../images/ico_plus.svg") no-repeat right 20px center;}
    .all_menu > ul .menu_tit + .sub_menu {position: static; height: 0; padding: 0; background-color: #F2F2F2;}
    .sub_menu li {-webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .3s linear; transition: all .3s linear;}
    .menu_tit.m_submenu_open {background-image: url("../images/ico_minus.svg");}
    .all_menu > ul .menu_tit.m_submenu_open + .sub_menu {height: auto; opacity: 1;}
    .m_submenu_open + .sub_menu li {-webkit-transform: translateY(0); transform: translateY(0);}

    .menu_open::after {content: ""; position: fixed; left: 0; top: 55px; bottom: 0; width: 100%; background-color: rgba(0,0,0,.55);}
    .menu_open .all_menu {transform: translateX(0);}

    .quick_menu {margin-top: 30px; padding: 0 20px;}
    .quick_menu ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; justify-content: space-between;}
    .quick_menu li {min-width: 65px;}
    .quick_menu a {position: relative; display: block; min-width: 65px; height: auto; padding: 75px 5px 5px; font-weight: 500; font-size: .75rem; text-align: center;}
    .quick_menu a::before {content: ""; position: absolute; left: 50%; top: 0; width: 65px; height: 65px; margin-left: -32.5px; border-radius: 60px;}
    .menu_kakao::before {background: url("../images/ico_menu_kakao.svg") no-repeat center center;}
    .menu_login::before {background: #012C5F url("../images/ico_menu_login.svg") no-repeat center center;}
    .menu_inquire::before {background: #012C5F url("../images/ico_menu_inquire.svg") no-repeat center center;}

    .contentsWrap {padding-bottom: 70px;}
    .sub_content_wrap {padding: 20px;}

    .sub_titleWrap {margin-bottom: 30px;}
    .sub_visual_area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 205px; padding-top: 0; -webkit-box-align: center; align-items: center; background-size: cover !important;}
    .tit_page {width: 100%; font-size: 1.875rem;}
    .breadcrumb {position: relative; top: unset; height: 50px; -webkit-justify-content: flex-start; justify-content: flex-start; background-color: #fff; border-bottom: 1px solid #ddd; z-index: 10;}
    .breadcrumb a {position: relative; -webkit-flex: 1; flex: 1; display: inline-block; margin-right: 0; padding: 10px 30px 10px 10px; font-weight: 500; font-size: .9375rem; color: #333; line-height: 29px; text-align: left; border-right: 1px solid #ddd; box-sizing: border-box;}
    .sub_titleWrap .breadcrumb a::after {content: ""; position: absolute; left: auto; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url("../images/ico_bread_down.svg") no-repeat center center;}
    .breadcrumb a:last-child {margin: 0;}
    .btn_bread_home {flex: none; max-width: 65px; height: 49px; background: url("../images/ico_bread_home.svg") no-repeat center center;}
    .btn_bread_home::after {display: none !important;}
    .company .sub_visual_area {background: url("../images/bg_sub_company_MOB.png") no-repeat center top;}

    .intro_cont {font-size: 1.125rem; text-align: center;}


    .cont_group {padding: 45px 20px 0;}

    .footerWrap {height: 530px;}
    .footerWrap .web_container {position: relative; max-width: 1260px; padding: 35px 30px 20px;}
    .footerWrap .logo {position: static; width: 100%; height: 23px; background-size: auto 100%;}
    .footer_menu {margin: 55px -20px 35px;}
    .footerWrap .info {display: block; line-height: 1.78;}
    .footerWrap .info > *:not(:last-child) {margin-right: 0;}
    .copyright {margin-top: 70px; line-height: 2;}



    .fabWrap {bottom: 10px;}
    .fabWrap .wrapper {right: 16px; bottom: 20px;}

    /***** main *****/
    .mainWrap {min-width: inherit; padding-top: 55px;}
    .mainWrap .headerWrap h1 a {background-image: url("../images/logo.svg");}
    .keyvisual {height: 300px;}
    .key_text {margin-top: -15px; font-size: .875rem;}
    .key_text .tit {font-size: 1.75rem;}
    .keyvisual .swiper-pagination {bottom: 20px;}
    .keyvisual .swiper-pagination .swiper-pagination-bullet {width: 10px; height: 10px; margin: 0 5px;}
    .btn_main_key_prev {width: 40px; height: 40px; left: 0; text-indent: -999em; background-size: 15px auto}
    .btn_main_key_next {width: 40px; height: 40px; right: 0; text-indent: -999em; background-size: 15px auto}


    .mainWrap .cont_group {font-size: .8125rem; text-align: center;}
    .tit_main {margin-bottom: 12px; font-weight: 900; font-size: 1.875rem;}
    .main_intro {margin-top: 20px; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .main_intro li {min-width: 25%; max-width: calc(50% - 10px); margin-top: 15px;}
    .main_intro .image {margin-bottom: 17px;}

    .main_service {display: block; margin-top: 40px;}
    .main_service li {margin: 15px 0 0; padding: 20px; font-weight: 500; font-size: .8125rem; text-align: center; background-color: #fff;}
    .main_service .tt {margin-bottom: 11px; font-weight: 500; font-size: 1.5rem; }
    .main_service .tt .textbox {display: inline-block; min-width: 80px; height: 23px; font-weight: 300; font-size: .875rem; color: #fff; text-align: center; line-height: 23px; background-color: #012C5F; border-radius: 30px;}
    .main_service .tt span {display: block; margin-top: 12px;}
    .main_service .image {margin-bottom: 24px;}
    .main_service .c_btn {margin-top: 20px;}
    .main_service .btn_more {padding: 10px 15px; font-weight: 500; font-size: .8125rem; color: #007FA8; background: url("../images/ico_main_service_more.svg") no-repeat right 5px center;}

    .main_portfolio {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 25px 0 35px; -webkit-column-gap: 10px; column-gap: 10px; -webkit-row-gap: 10px; row-gap: 10px; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
    .main_portfolio li {position: relative; max-width: calc((100% - 20px) / 3); overflow: hidden;}
    .main_portfolio + .c_btn .btn_more {display: inline-block; width: 190px; height: 50px; background: url("../images/ico_main_site_more.svg") no-repeat right 20px center; border: 1px solid #707070; border-radius: 50px; box-sizing: border-box;}

    .cont_group.main_estimate {position: relative; margin-top: 65px; padding: 0; text-align: center;}
    .cont_group.main_estimate .web_container {height: 400px; padding: 45px 10px 30px; background: url("../images/img_main_estimate.png") no-repeat 9vw 100px; background-size: auto 417px;}
    .main_estimate .cont {height: 100%;}
    .main_estimate .visual {display: none;}
    .main_estimate .c_btn {position: absolute; left: 0; bottom: 0; width: 100%;}
    .main_estimate .btn_more {width: 190px; height: 50px; font-size: 1.125rem; line-height: 36px; text-align: left; background-image: url("../images/ico_rarrow01_m_w.svg") no-repeat right 15px center; border: 2px solid #fff;}

    .program_list {margin-top: 25px; -webkit-column-gap: 10px; column-gap: 10px; -webkit-row-gap: 10px; row-gap: 10px;}
    .program_list li {min-width: calc((100% - 30px) / 4); padding: 0; border: none;}
    .program_list .program {position: relative; text-align: center;}
    .program_list .program_logo {width: 70px; height: 70px; margin: 0 auto 10px;}
    .program_list .program .tit {min-width: 70px; height: 20px; padding: 0 5px; font-weight: 300; font-size: .6875rem; line-height: 18px;}








/***** tab *****/
.tab01 {margin: 0 0 50px; text-align: left;}
.tab01 ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex;}
.tab01 li {flex: 1; padding: 0 5px; border: 2px solid rgba(0,0,0,0);}
.tab01 a {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; height: 40px; padding: 5px; font-size: .8125rem;}
.tab01 a > * {width: 100%; text-align: center;}
.sub_titleWrap + .tab01 {margin-top: -30px;}


/***** search *****/
.searchWrap {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 34px 0; -webkit-justify-content: flex-end; justify-content: flex-end;}
.searchWrap > *:not(:first-child) {margin-left: -1px;}
.searchWrap select, .searchWrap input {border-radius: 0;}
.inp_search {position: relative; -webkit-flex: 1; flex: 1;}
.inp_search input {width: 100%; padding-right: 55px;}
.inp_search .btn_search {position: absolute; right: 0; top: 0; border-radius: 0;}






    /***** button *****/
    .btn01 {height: 50px; padding: 10px 16px; line-height: 30px;}

    .reg_btn_area {margin: 50px 0 0;}
    .reg_btn_area a:only-child {width: 100%;}
    .btn_detail {position: absolute; left:0; top:0; width:100%; height:100%; text-indent: -999em; opacity: 0;}



    /***** title *****/
    .tit01 {margin: 0 0 25px; font-size: 1.75rem;}
    .tit02 {margin: 25px 0 15px; font-size: 1.5rem;}
    .txt_intro {margin: 9px 0; font-size: 1.4rem;}
    .tit03 {margin: 30px 0 15px; font-size: 1.4rem;}
    .tit04 {margin: 20px 0 15px; font-size: 1.875rem; text-align: center;}
.tit05 {margin: 40px 0 20px 10px; font-size: 1.4rem;}
    .txt_intro strong {display: block;}


    /***** text *****/
    .txt01 {font-size: .8125rem; line-height: 1.55;}

.txt_datetime {font-size: .875rem; color: #999;}
.txt_datetime > *:not(:last-child) {margin-right: 16px;}

.txtbox {display: inline-block; min-width: 70px; padding: 0 10px; font-weight: 500; font-size: .8125rem; color: #fff; text-align: center; line-height: 29px; background-color: #012C5F; border-radius: 4px; box-sizing: border-box;}
.txtbox.gray {background-color: #C1C1C1;}

.txt_bg {color: inherit; background-color: #FFFDD5;}



.txtc_blue {color: var(--secondary);}



/***** list *****/
.dlist01 {display: table; width: 100%; font-size: 1.4rem;}
.dlist01 dl {display: table-row; margin: 0;}
.dlist01 dt, .dlist01 dd {display: table-cell; padding: 10px 0; vertical-align: middle;}
.dlist01 dt {width: 2em; padding-right: 45px; font-weight: bold; white-space: nowrap;}

    .bul_list {font-size: 1rem;}








    /***** table *****/
    .table01 {width: 100%; font-weight: 300; font-size: .9375rem; color: #666; border-top: 1px solid #333; border-collapse: collapse;}
    .table01 tr {border-bottom: 1px solid #CDCDCD;}
    .table01 th, .table01 td {height: 40px; padding: 10px 16px; text-align: left;}
    .table01 th {padding-right: 10px; background-color: #F9F9F9;}

    .table02, .table02 tbody, .table02 tr, .table02 th, .table02 td {display: block;}
    .table02 tr {border: none;}
    .table02 th {padding: 15px 20px; text-align: left; border-bottom: 1px solid #CDCDCD;}
    .table02 td {padding: 15px 20px; text-align: left; border-bottom: 1px solid #CDCDCD;}


.data_table table, .data_table tbody, .data_table tr {display: block;}
.data_table td {display: inline;}
.data_table tr {position: relative; padding: 16px 3px 21px; border-bottom: 1px solid #D8D8D8;}
.data_table tbody th, .data_table tbody td {height: auto; padding: 0; text-align: center;}
.data_table a {display: block; margin-bottom: 5px; padding: 5px 0; text-align: left;}
.data_table a::after {content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 100%;}
.new {display: inline-block; min-width: 36px; height: 18px; margin: 0 5px; padding: 0 5px; font-weight: 500; font-size: .6875rem; color: #fff; text-align: center; vertical-align: middle; line-height: 18px; background-color: #FF2626; border-radius: 20px; box-sizing: border-box;}

.tit_cell {display: inline-block !important; margin-right: 5px; font-weight: normal; font-size: .8125rem; color: #999;}
.tit_cell + .data {margin-right: 10px;}

.data_table.inquiry tr {padding-right: 80px;}
.data_table.inquiry .txtbox {position: absolute; right: 0; top: 50%; height: 40px; margin-top: -20px; line-height: 40px;}


    /*** paging ***/
    .paging {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; justify-content: center; margin: 40px 0 50px; text-align: center;}

    .paging a {display: inline-block; width: 26px; height: 26px; font-weight: 500; font-size: .75rem; text-align: center; line-height: 24px;}
    .paging ol {margin: 0 10px;}


    /*** 게시판 상세 ***/
    .board_info_cont {margin: 10px 0 0; padding: 30px 20px; border-top: 2px solid #222;}
    .tit_board {margin-bottom: 20px; font-weight: bold; font-size: 1.125rem;}
    .tit_board > * {vertical-align: middle;}
    .tit_board .new {height: 23px; padding: 0 10px; font-size: 1rem; line-height: 23px; vertical-align: middle;}
    .board_info_cont .info > * {display: inline-block; margin: 0 25px;}
    .board_cont {min-height: 15em; margin-bottom: 35px; padding: 35px 20px; font-weight: .875rem; line-height: 1.7; border-bottom: 1px solid #222;}


    .qnaWrap {padding: 0 10px; font-size: 1rem;}
    .qnaWrap > div {position: relative; padding: 35px 0 35px 70px;}
    .qnaWrap > div:last-child {border: none;}
    .qnaWrap .tit {width: 50px; height: 50px; font-size: 500; font-size: 1.0625rem; line-height: 46px;}
    .qnaWrap .board_cont {margin: 10px 0 0; border-bottom: none;}





  /***** form *****/
  .form_row .M_block:not(:first-child) {margin-top: 5px;}
  .form_row.M_block > * {margin-right: 0;}

  .inp_file {position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; align-items: center;}
  .inp_file .inp_box {-webkit-flex: 1; flex: 1;}
  .inp_file input[type=file] {position: absolute; right: 0; top: 0; width: 100%; opacity: 0; cursor: pointer;}
  .inp_file .bt {min-width: 100px; height: 48px; margin-left: 10px; padding: 10px 5px;}
  .inp_file .bt::before {content: ""; display: inline-block; width: 14px; height: 13px; margin-right: 10px; background: url("../images/ico_file.svg") no-repeat left center;}


    /***** contents style *****/

    .cont_box01 {padding: 20px 15px;}
    .cont_box01.noti {padding: 20px 15px; font-size: 1rem;}
    .cont_box01 .tt {position: relative; margin-bottom: 25px; padding-left: 36px; font-weight: bold; font-size: 1.0625rem;}

    .cont_box02 {padding: 24px 16px; font-size: .875rem; color: #666; line-height: 1.4;}
    .cont_box02 .tt {margin-bottom: 10px; font-weight: 500; font-size: 1.4rem;}
    .m_help {padding-left: 30px; color: #012C5F; background: url("../images/ico_help.svg") no-repeat left center;}
    .cont_box02.more_type {display: block}
    .cont_box02.more_type .option {margin-top: 30px; padding-left: 0; text-align: center;}

    .company_intro {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; margin: 80px 0 86px; font-weight: 500; font-size: .8125rem; text-align: center; -webkit-justify-content: space-between; justify-content: space-between;}
    .company_intro li {width: 32%; letter-spacing: -0.05em;}
    .company_intro .image {margin-bottom: 35px;}
    .company_intro .tit {margin: 15px 0; font-weight: 500; font-size: 1.875rem; color: var(--secondary);}









    .company_intro {display: block; margin: 40px 0 45px; font-weight: 500; font-size: .8125rem;}
    .company_intro li {width: auto; margin-bottom: 50px; letter-spacing: -0.05em;}
    .company_intro .image {max-width: 350px; margin: 0 auto 24px;}
    .company_intro .tit {margin: 15px 0; font-weight: 500; font-size: 1.6875rem;}


    /*** 오시는 길 ***/
    .mapWrap {position: relative; border: 1px solid #707070; overflow: auto;}
    .contact_list {-webkit-flex-direction: column; flex-direction: column; font-size: .9375rem;}
    .contact_list li {width: 100% !important; padding: 10px 20px; border-bottom: 1px solid #CDCDCD; box-sizing: border-box;}
    .contact_list dl {min-height: 45px;}
    .contact_list dt {margin-right: 15px; text-indent: -999em;}



    /*** 솔루션 ***/
    .solution_intro {margin: 42px 0 55px;}
    .solution_intro .web_container {height: auto; padding-top: 0;}
    .solution_intro .cont {padding: 0 16px 50px;}
    .solution_intro .solution_intro_image {position: static; margin: 0 -16px 45px;}
    .solution_intro .txt_price {margin-bottom: 15px; font-size: 1.5rem;}
    .solution_intro .txt_price .unit {margin-left: 5px; font-size: 1.125rem;}
    .solution_intro .btn_area {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-top: 50px;}
    .solution_intro a {min-width: calc(50% - 5px); height: 50px; margin-right: 0; padding: 5px 20px; font-size: 1.0625rem; line-height: 40px;}
    .solution_intro a > span {position: relative; display: inline-block; padding-left: 26px;}
    .solution_intro a > span::before {background-size: auto 18px;}
    .solution_intro a:nth-child(2) {margin-left: 10px}
    .solution_intro .btn_estimate {width: 100%; margin-top: 24px;}
    .use_guide {margin-top: 50px;}
    .use_guide li {margin-top: 20px; padding: 140px 20px 40px; background: #F5F8FA url("../images/ico_guide.svg") no-repeat center 30px; background-size: 84px auto;}
    .use_guide .cont {min-height: auto; padding-left: 0; font-size: .9375rem; line-height: 1.875; border-left: none;}
    .use_guide .tit {margin-bottom: 20px; font-weight: bold; font-size: 1.4rem;}
    .use_guide .contact {display: block; height: auto; margin-top: 27px; padding: 0; background-color: transparent;}
    .use_guide .contact a {display: inline-block; width: 100%; margin: 15px 0 0; padding: 5px 15px 5px 70px; line-height: 37px; background-color: #DDF1FF !important; border-radius: 50px; box-sizing: border-box;}
    .use_guide .contact a em {color: #1A64AF;}
    .use_guide .contact a + a {margin-left: 0;}
    .use_guide .contact .call {background: url("../images/ico_call.svg") no-repeat 34px center;}
    .use_guide .contact .email {padding-left: 70px; background: url("../images/ico_email.svg") no-repeat 34px center;}

    /*** 문자솔루션 ***/
    .solution_sms + .sub_content_wrap .image {margin: 24px -20px;}
    .txt_intro.lg {font-size: 1.5rem;}
    .solution_sms + .sub_content_wrap .txt01 {text-align: left;}
    .tit01.txtc_blue {font-size: 1.5rem;}
    .sms_intro .web_container {padding: 40px 16px 56px;}
    .sms_step {display: block; margin: 24px 0;}
    .sms_step li {height: auto; margin: 16px 0 0;}
    .sms_step .cont {padding: 24px; font-size: 1rem;}
    .sms_step .tit {min-height: inherit; margin-bottom: 24px;}
    .sms_step .txt_eng {font-size: .625rem;}
    .sms_cont01_top {padding: 56px 16px; background-image: url("../images/img_sms_cont01_MOB.png");}
    .sms_intro_box {width: auto; padding: 32px 24px; font-size: .875rem;}
    .sms_intro_box .tit {margin-bottom: 16px; font-size: 1.5rem;}
    .sms_intro_box .tit .tit_sub {margin-bottom: 16px; font-size: 1rem;}
    .detail_cont {padding: 32px 16px; font-size: 1rem;}
    .sms_cont_box .detail_cont .web_container {padding: 184px 0 0; background-position: center top; background-size: 160px auto;}
    .sms_solution_step {margin: 56px 16px;}
    .sms_step02 {display: block; margin: 24px 0 56px; font-size: .75rem;}
    .sms_step02 > li {height: auto; margin-top: 16px; border-radius: 10px;}
    .sms_step02 .txt_step {padding: 13px 20px 10px; font-size: 1rem; border-radius: 8px 8px 0 0;}
    .sms_step02 .cont {padding: 16px 20px 24px;}
    .sms_step02 .tit {margin-bottom: 16px; font-size: 1rem;}
    .sms_step02 .num {width: 18px; min-width: 18px; height: 18px; margin-right: 4px; font-size: .6875rem; line-height: 18px;}
    /*2023-07-22 sw
    .sms_step02 ol li {margin-top: 12px; justify-content: center;}
    */
    .sms_step02 ol li {margin-top: 12px;}
    .skill {margin: 40px 0 56px; padding: 144px 0 0; font-size: .875rem;}
    .skill::before {left: 50%; top: 0; width: 160px; height: 120px; margin: 0 0 0 -80px; background-size: 100% auto;}
    .skill .tit01 {margin-bottom: 16px; text-align: center;}
    .skill .txt_caution {margin: 16px 0; font-size: 1.125rem;}
    .feature {padding: 56px 16px;}
    .feature li {display: block; margin-top: 20px; border-radius: 10px;}
    .feature li:first-child {margin-top: 0;}
    .feature .cont {width: auto; padding: 20px; font-size: .875rem;}
    .feature dt {margin-bottom: 24px; font-size: 1.4rem;}
    .sms_speed .about {font-size: .75rem; background-image: url("../images/bg_sms_speed_MOB.png");}
    .sms_speed .about .web_container {padding: 56px 20px;}
    .sms_speed .about ul {display: block; font-size: 1.5rem;}
    .sms_speed .about li {max-width: 100%; margin-top: 40px; padding-top: 90px; background-size: 86px auto;}
    .sms_speed .about dt {margin-bottom: 4px; font-size: .9375rem;}
    .sms_speed .about .sub {margin-top: 4px; font-size: .75rem;}
    .sms_speed .detail_cont {text-align: left;}
    .sms_faq {padding: 56px 16px;}
    .sms_faq_list {font-size: .8125rem;}
    .sms_faq_list li:not(:first-child) {margin-top: 20px;}
    .sms_faq_list dt, .sms_faq_list dd {padding: 16px 20px;}
    .sms_faq_list dt {font-size: .875rem;}
    .sms_faq_list .txt_qa {min-width: 44px; font-size: 1.4rem;}
    .sms_faq_list dd {margin-top: 4px;}
    .sms_sm {margin: 56px 16px;}
    .sms_sm .tit01 {margin-bottom: 28px;}
    .sm_list {display: block; margin: 0;}
    .sm_list li {margin-top: 8px; padding: 24px 16px; font-size: 1rem;}
    .sm_list .tit {position: relative; margin-bottom: 48px; font-size: 1.4rem;}
    .sm_list .tit::after {content: ""; position: absolute; left: 50%; top: 100%; width: 32px; height: 1px; margin: 24px 0 0 -16px; background-color: #C1C1C1;}
    .sm_list .info {display: flex; gap: 16px;}
    .sm_list .info dl {flex: 1;}
    .sm_list dt {margin-bottom: 16px; font-size: .8125rem;}
    .sm_list .txt_sub {margin-top: 4px; font-size: .75rem;}

    .sm_list li:hover {padding: 24px 16px; border: 1px solid var(--secondary);}



    /***** 포트폴리오 *****/
    .portfolio_list {padding: 0 20px;}
    .portfolio_list li {position: relative; width: calc(50% - 7.5px); margin: 0 0 15px 15px; overflow: hidden;}
    .portfolio_list li:nth-child(odd) {margin-left: 0;}
    .portfolio_list .tit {font-size: 1.0625rem; text-align: center;}
    .portfolio_list .hover_cont::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 38px; background: url("../images/ico_search.svg") no-repeat center center; background-size: 20px auto; -webkit-transition: all .3s linear; transition: all .3s linear;}
    .portfolio_list li:hover .hover_cont {padding: 20px; opacity: 1;}
    .portfolio_list li:hover .hover_cont::before {bottom: 20px;}




    /***** 약관 *****/
    .terms_cont {max-height: 345px; margin: 17px 0 11px; padding: 20px 10px; background-color: #fff; border: 1px solid #ddd; border-radius: 0;}
    .terms_cont.full {max-height: 80vh;}
    .agree_chk {padding-left: 0; font-weight: bold; -webkit-box-align: center; align-items: center;}
    .agree_chk label {margin-left: auto; padding-left: 10px; font-weight: normal; white-space: nowrap;}


    /***** popup *****/
    .modalWrap {padding: 50px 24px;}
    .dialog_box {min-width: 100%;}
    .dialog_box .pop_header {padding: 15px 20px;}
    .pop_header h1 {font-size: 1.125rem; text-align: left;}
    .btn_pop_close {position:absolute; width: 40px; height: 40px; margin-top: -20px; background-size: 20px auto;}
    .dialog_box .pop_cont {padding: 20px;}
    .pop_btn {display:-webkit-box; display:flex; padding: 0 20px 20px;}
    .pop_btn button {-webkit-flex: 1; flex: 1; min-width: auto;}
    .pop_btn button + button {margin-left:10px;}





}