@charset "utf-8";
/*mixin - cont_box */


#Sub {position:relative; background:url('../_image/sub/subbg01.svg') no-repeat right top}
#Sub .sub_container {width:100%; margin:0 auto; padding:1.9rem 0;min-height: 800px;}
.sub_content, .subArea {width:1400px; margin:0 auto;}

#Sub .sub_container .sub-top {position:relative}

#sec01, #sec02, #sec03,  #sec04,  #sec05,  #sec06,  #sec07, #sec08  {margin-bottom: 8rem;}

.menu-bott{position: fixed; bottom:0; left:0; right:0; background: #000; color:#fff; width: 100%; min-width: 340px;
    padding-left:0;    margin:0;    list-style-type:none;  display:flex;  flex-direction: column-reverse;  height:60px; line-height: 60px;  z-index: 100; text-align: center;}
.menu-bott > ul > li{ display: inline-block; margin: 0 1.9rem;} 
.menu-bott > ul > li > a {color:var(--white); font-weight: 500;}

.customer {position:absolute; right:0; top:0; display: flex;flex-direction: column; text-align: center; background: url('../_image/sub/customer_icon.svg') no-repeat top left;
width:180px; padding-top:55px; }    
.customer > h3 {color:var(--primary-color); font-weight: 500;}
.customer > dl > dt{color:var(--black); font-size: 1.1.9rem; font-weight: 600; }



.location > * {display: inline-block;vertical-align: middle;}
.location .path {margin-right: 1.7rem;}
.location .path li {display: inline-block;font-size: 0.9rem;font-weight: 500;color: var(--gray-60);vertical-align: middle;position: relative;line-height: 1.5rem;}
.location .path li+li {margin-left: 1.6rem;}
.location .path li+li:before {font-family: "remixicon";content: "\ea54";font-size: 1.5rem;position: absolute;width: 1.5rem;height: 1.5rem;left: -1.7rem;top: 50%;transform: translateY(-50%);}
.location .path li a {display: block;}
.location .path li:hover a,
.location .path li:focus a {color:var(--primary-color);}
.location .path .icon {font-size: 1.1rem;vertical-align: 0px;}

.sub_title {text-align: center; }
.sub_title > h3{font-size: 3.1.1.9rem; font-weight: 600;}
.sub_title > span {font-size: 1rem; color:var(--gray-40)}



.data_select { margin-top:30px;position:relative;   overflow: visible}
.data_select > ul > li {
    width: 50%;
    margin: 0 auto;
    position: relative; /* 기준점 설정 */
  }
.custom button{display:block;position:relative;background:var(--primary-color);border:0; border-radius:8rem;height:50px;line-height:50px;margin:0;font-size:12px;color:#707070;letter-spacing:-0.2px;cursor:pointer;border-radius:none;
    width: 100%;color: var(--white);font-size: 1.1rem; margin: 0 auto;}
.custom.user button{padding-left:0;}
.custom button:hover, .custom .util_menu > li.custom button:focus{color:var(--white); }
.custom.active button{color:var(--white);}
.custom button span{display:inline-block; padding-right:20px;}
.custom button span:after{content:"\e944"; position:absolute; right:30px; top:0; font-size:1rem; color:var(--white); font-family:"xeicon"; font-weight:300; transform:rotate(-180deg); transition:all .25s ease;}
.custom.active button span:after{color:var(--white); transform:rotate(0deg);}

.drop_open {position: absolute; top: 100%;  left: 0;width: 100%; z-index: 9999;margin-top: .5rem;}
.data_select ul li .drop_open ul{ border-top:none; background:var(--primary-color); border-radius: 15px;}
.data_select ul li .drop_open ul li{border-bottom:1px solid #005799; ;   transition:all .25s ease;padding:4px 8px; text-align: center;}
.data_select ul li .drop_open ul li:last-child{border-bottom:0}
.data_select ul li.drop_open ul li:hover{}
.data_select ul li.drop_open ul li:last-child{border-bottom:none;}
.data_select ul li .drop_open ul li  a{display:block; color:var(--white) !important; padding:8px 15px; font-size:15px; letter-spacing:-0.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.data_select ul li .drop_open ul li  a:hover{text-decoration: underline}



/* title */
.title-style {width: 1400px; margin:0 auto; margin-top:5rem; margin-bottom:1.9rem}
.title-style > em {color:#2CA8FC; font-size: 0.9rem; font-weight: 500;}
.title-style > h3 {font-size: 1.9rem; color:var(--black); font-weight: 600; display: flex;    }
.title-style > h3 span.tit{ width: calc(100% - 6.5rem); }
.title-style > h3 span.more{ width: 6.5rem;text-align: right;font-size: 0.8rem;color: #000;cursor: pointer; ;}
.title-style > p {font-size: 0.8rem;}
.emphasize{color:var(--black); font-weight: 600;}

.solution_info {display: flex; }
.solution_info > ul { width: 50%;}
.solution_info > ul.solution_1_img {display: flex;align-items: center;justify-content: center;width: 50%;flex: none; }

.sol_menu > ul {display: flex;flex-wrap: wrap}
.sol_menu > ul > li {border:1px solid var(--gray-base); border-radius: 30px; padding:.1.9rem 0.6rem; margin: .5rem .5rem; font-size: 0.9rem;}

.list_txt > ul {padding:1.1.9rem 0.6rem 0.6rem;}
.list_txt > ul > li {position:relative; padding-left: 15px; font-size: 0.9rem; color:var(--black)}
.list_txt > ul > li:after{position:absolute; content: ''; width: 3px; height: 3px; background: var(--primary-color); border-radius: 8px; left:0; top:10px;}


.solution-banner{background: url('../_image/sub/subbg02.png') no-repeat; height: 30rem;  position:relative; color:var(--white); margin-bottom: 8rem;}
.solution-banner > dl {text-align: center;padding-top: 7.5rem;}
.solution-banner > dl > dt {font-size: 2.3rem; font-weight: 600;}
.solution-banner > span.txt01 {position:absolute; top:1.1.9rem; left:6rem}
.solution-banner > span.txt02 {position:absolute; bottom:1.1.9rem; right:8rem}


.solution_tl{display: flex;gap: 1.1.9rem;}
.solution_tl > ul { width: 50%;}


.price-table {width: 100%;border-collapse: collapse; border: 1px solid #ddd;font-size: 0.9rem;color: #333; table-layout: fixed;}
.price-table th {border: 1px solid #ddd;padding: 0.6rem;vertical-align: middle;text-align: center;}
.price-table td {border: 1px solid #ddd;padding: .1.1.9rem;vertical-align: middle;text-align: center;}
.price-table thead th {background: #f8f9fc; font-weight: bold;font-size: 0.9rem;}
.price-table thead th.tit1{color: var(--primary-color);}
.price-table thead th.tit2{color: var(--pupple-color);}
.price-table td del {color:var(--gray-40)}
.price-table .foot {background: #f8f9fc;text-align: center;font-size: 0.8rem;padding: 0.6rem;}
.price-table .foot strong {padding-right: 0.6rem;}
.tbl_info{color:var(--accent-color); font-size: 0.8rem; margin:.5rem 0;}
.tbl_info2{color:var(--primary-color);font-size: 0.8rem; margin:.5rem 0;}
.price-table .small {font-size: 0.8rem;color: #666;}

.site_page > ul{display: flex; gap: 1.1.9rem; }
.site_page > ul > li {flex: 1;}
.site_page > ul > li .thumnail > p {border:1px solid var(--gray-base); border-radius: 15px; height: 25rem; overflow: hidden; position: relative;cursor: pointer;}
.site_page > ul > li .thumnail > p:after{position: absolute;content: '미리보기 \e97a';font-family: 'xeicon'; bottom: -5%;right: 10%;height: 50px;color: var(--white);  z-index: 100;font-size: 0.9rem;}
.site_page > ul > li .thumnail > p:before {position:absolute; content: ''; bottom:0; left:0; width:100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); z-index: 10;}
.site_page > ul > li .thumnail > p img  {overflow:hidden;     -webkit-transition:.3s;    -moz-transition:.3s; -ms-transition:.3s;    -o-transition:.3s;    transition:.3s;  }
.site_page > ul > li .thumnail > p:hover img {    -webkit-transform:scale(1.1);    -moz-transform:scale(1.1);    -ms-transform:scale(1.1);   -o-transform:scale(1.1);    transform:scale(1.1);}
.site_page > ul > li .thumnail > ul > li {font-size: 1rem; font-weight: 500; margin: .5rem 0; color:var(--black)}
.site_page > ul > li .thumnail > ul > p {font-size: 0.9rem;}

/* 솔루션특장점 */
.Key_Strengths {background: #F9F9F9; padding: 0.6rem 0 1.9rem; }
.Key_Strengths ul.KeySt{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.6rem; }
.Key_Strengths ul.KeySt > li {width: calc((100% - 1.9rem) / 4);padding: 0.6rem;position: relative;text-align: center;}
.Key_Strengths ul.KeySt > li:not(:last-child)::after {content: "";position: absolute;top: 10%;right: 0;width: 1px;height: 80%;background: var(--gray-base);}
.Key_Strengths ul.KeySt > li > div {padding: 1.9rem 0 2.5rem;}
.Key_Strengths ul.KeySt > li > div > p {color:var(--black); font-size: 2.2rem;}
.Key_Strengths ul.KeySt > li > div > dl > dt {color:var(--primary-color); font-weight: 600; font-size: 1.1rem;}
.Key_Strengths ul.KeySt > li > div > dl > dd {font-size: 0.9rem; color:var(--gray-40)}

/* 주요기능 */
.features {display:flex; gap: 1.1.9rem;flex-wrap: wrap; }
.features .featBox {width: calc((100% - 8rem) / 5); height: 210px; padding: 1.1.9rem;position: relative; border:1px solid var(--gray-base); border-radius: 8px;
box-shadow: var(--box-shadow-base);}
.features .featBox:first-child {border: 0; box-shadow: none;}
.features .featBox > dl > dt {color:var(--black); font-weight: 500;  font-size: 1.1rem;}
.features .featBox > dl > dd {font-size: 0.8rem; margin-top: 1.1.9rem; color:var(--gray-40)}
.features .featBox > span {position:absolute; right:1.9rem; bottom:1.9rem; font-size: 1.6rem; color:var(--black)}

/* 특장점 */
.Advantages{border:1px solid var(--gray-base); padding: 1.1.9rem; display: flex; gap: 1.9rem;}
.Advantages .menu_List {width: 280px}
.Advantages .menu_img{flex: 1; text-align: center;}

.faceBox{}
.fc_menu {margin-bottom: 1.1.9rem; cursor: pointer;}
.fc_menu:first-of-type ul {display: block;}
.fc_menu > h3{font-size: 1rem; font-weight: 500;display: flex;justify-content: space-between; align-items: center;             font-size: 1rem;              cursor: pointer;}
.fc_menu ul {display: none;}
.fc_menu ul > li {font-size: 0.9rem; line-height: normal; color:var(--gray-40); margin-top: 0.6rem;}

.function{position:relative; overflow: hidden; border-top:1px solid var(--black); margin-top: 1.9rem;}
.function > dl > dt.on span{ background:var(--primary-color) ;}
.function > dl > dt.Q {cursor:pointer; padding:25px 0; font-size: 1rem; position:relative; padding-right: 40px;   }
.function > dl > dt, .FAQ > dl >dd { padding: 10px; }
.function > dl > dt { border-top:1px solid var(--gray-base); color:var(--black) }
.function > dl > dt span{   display: inline-block;    background: var(--black);    border-radius: 50%;    width: 30px;
    height: 30px;    color: var(--white);    text-align: center;    line-height: 30px;    margin-right: 8px;}
.function > dl > dt:first-child{border-top:0}
.function > dl > dt em { display: inline-block; width: 15px; height: 15px;     vertical-align: middle; position:absolute; right:25px; top:25px}
.function > dl > dt em > i {font-size:28px}
.function > dl > dt.on em { transform:rotate(180deg);right:10px; top:38px}
.function > dl > dd { display: none; font-size:0.9rem; padding: 0 0.9rem 1.9rem; color:var(--gray-40); position:relative; margin-left: 40px; }
.function > dl:last-child{border-bottom:1px solid #000}

/* 추천업체 */
.partner{background: #EDF7FF; border:1px solid #D7E8F6; border-radius: 30rem; position:relative; padding: 2.5rem 11.1.9rem;}
.partner ul {display: flex;flex-wrap: wrap; }
.partner ul > li {width: calc((100% - 11.1.9rem) / 3); margin: 0.6rem; padding: 1.1.9rem; background: var(--white); border-radius: 100px; color:var(--primary-color); font-size: 0.9rem; text-align: center;}
.partner > h3 {position: absolute;left: 50%;top: -20px;transform: translateX(-50%);font-size: 1.8rem;font-weight: 500;color: var(--black); }

/*탭*/
.tab_group{margin-top:30px; position:relative; }
.tab_group:after{content:''; display: block; clear: both; }
.tab { position:relative;}
.tab li { float:left; width:30rem;  text-align:center; display:inline-block;  padding:.8rem 0; border:1px solid var(--gray-base); background:var(--white); border-radius: 4px;}
.tab li+li { margin-left:2px;}
.tab li {  cursor:pointer; color:var(--black); font-size:1.1rem; font-weight: 500;  text-align:center}
.tab li:hover{background:var(--primary-color); color:#fff;  }
.tab li.on { background:var(--primary-color); color:#fff;  }
.tab_con { position:relative; }
.tab_con>div { display:none; padding:30px 0px    }

.gallery ul{display: flex; flex-wrap: wrap; gap: 1.1.9rem;}
.gallery ul > li { width: calc((100% - 8rem) / 4); margin-bottom: 1.9rem;}
.gallery ul > li > a{display: flex;flex-direction: column;}
.gallery ul > li > a > p{ border:1px solid #ddd; border-radius: 8px; height: 256px;
    -webkit-transition: -webkit-transform .3s;  transition: -webkit-transform .3s;  transition: transform .3s;  transition: transform .3s, -webkit-transform .3s;
overflow: hidden;}
.gallery ul > li > a > p img{width: 100%;}
.gallery ul > li > a > p:hover{-webkit-transform: translateY(-10px);  -ms-transform: translateY(-10px);
    transform: translateY(-10px);}
.gallery ul > li > a > span {padding-top: 1.1.9rem; font-size: 0.9rem; color:var(--black); font-weight: 500;}






@media all and (max-width:1400px){

.sub_content, .subArea {width:100%}
.title-style {width:100%}
#Sub .sub_container {padding: 0.6rem .8rem; }

}

@media all and (max-width:1280px){

    .features .featBox:first-child {width:100%; height: 11.9rem;}
    .br-pc {display: none;}
    .partner {padding: 1.9rem 1.9rem;}

    }
    

@media all and (max-width:768px){
    
   

    .customer {background: none;    padding-top: 0px; width: auto;}
    .customer > h3 {text-align: left;}
    .customer > dl {display: flex;gap: 0.6rem;}

    .sub_title {margin-top:5rem}

    .data_select > ul > li {width:80%}

    .menu-bott > ul > li {margin:0 0.6rem}
    .custom button {height: 40px; line-height: 40px;}

    .solution_info {flex-direction : column;}
    .solution_info > ul, .solution_info > ul.solution_1_img {width: 100%;}
    .solution_info > ul.solution_1_img {margin-top:1.9rem}
    .solution-banner, .Key_Strengths, .features {margin-bottom:2.5rem}
    .solution_tl {flex-direction : column;}
    .solution_tl > ul {width:100%}

    .site_page > ul {flex-wrap: wrap;   }
    .site_page > ul > li {flex: none;            width: calc(50% - 0.6rem); }
    .Key_Strengths ul.KeySt > li {width: calc((100% - 0.6rem) / 2); }
   .Key_Strengths ul.KeySt > li:nth-child(3)::before,
   .Key_Strengths ul.KeySt > li:nth-child(4)::before { content: "";position: absolute;top: 0;left: 10%;width: 80%;height: 1px;background: var(--gray-base);}
   .Key_Strengths ul.KeySt > li:nth-child(2)::after {display: none;}

   .features .featBox{width: calc((100% - 6rem) / 3);}

   .Advantages {flex-direction : column;}
   .Advantages .menu_List {width:100%}

   .partner{border-radius: 8rem;}
   .partner ul > li {width: calc((100% - 6rem) / 2);}
   .gallery ul > li { width: calc((100% - 6rem) / 2); }
   .tab li+li { margin-left:-1px;}



}


@media all and (max-width:640px){
 
    .customer > h3 {display: none;}
    .features .featBox{width: calc((100% - 1.1.9rem) / 2);}
    .partner ul > li {width: calc((100% - 0rem) / 1);}
    .gallery ul > li { width: calc((100% - 0rem) / 1); }
    .tab li {width:50%}

}










.content_w { width:100% !important; max-width:100% !important; }

.page_toparea { background:url('../images/bottom_img.jpg') no-repeat; background-size:cover; width:100%; height:300px;  
background-position: center;  text-align:center; display:flex; justify-content:center; align-items:center;  }
.page_toparea h1 { color:#fff; font-size:40px; }

.page_style_01 { width:95%; max-width:1500px; margin:0 auto; padding:50px 0; }
.page_style_01 .page_title { border-bottom:1px solid #ddd; padding:50px 0; }
.page_style_01 .page_title h2 { font-size:40px; font-weight:500; }
.page_style_01 .page_inner .page_iframe { width:100%; }
.page_style_01 .page_inner02 { width:100%; padding:0 0 100px 0; }

.page_txt_map { font-size:25px; padding:50px 0 ;}
.page_txt_map ul {  }
.page_txt_map ul li {}
.page_txt_map .map { background:url('../images/icon_map.png') no-repeat;  padding:0 0 10px 60px; ;}
.page_txt_map .mail { background:url('../images/icon_email.png') no-repeat;  padding:0 0 10px 60px; }
.page_txt_map .tel { background:url('../images/icon_tel2.png') no-repeat;  padding:0 0 10px 60px; }
.page_txt_map ul li strong { display:inline-block; font-size:20px;  font-family:'Roboto'; color:#2470b1; margin-right:10px;  }



@media(max-width:800px){

.page_toparea {  height:100px; }
.page_toparea h1 { color:#fff; font-size:25px; }

.page_style_01 { width:100%;padding:30px 0; }
.page_style_01 .page_title { border-bottom:1px solid #ddd; padding:20px 0 10px 20px; }
.page_style_01 .page_title h2 { font-size:25px; font-weight:500; }
.page_style_01 .page_inner .page_iframe { width:100%; }
.page_style_01 .page_inner02 { width:100%; padding:0 0 30px 0; }
.page_style_01 .page_inner .page_iframe div { width:100% !important; }

.page_txt_map { font-size:20px; padding:30px 0 ;}
.page_txt_map ul {  }
.page_txt_map ul li { margin-left:20px; line-height:120%; margin-bottom:20px; font-size:18px; }
.page_txt_map ul li strong { width:100%; padding-left:32px; padding-bottom:5px; box-sizing:border-box; }
.page_txt_map .map { background:url('../images/icon_map.png') no-repeat;  padding:0 10px 0px 0px; background-size:25px; }
.page_txt_map ul li span { display:block; }
.page_txt_map .mail { background:url('../images/icon_email.png') no-repeat;  padding:0 0  0px 0px; background-size:25px; }
.page_txt_map .tel { background:url('../images/icon_tel2.png') no-repeat;  padding:0 0  0px 0px; background-size:25px; }
.page_txt_map ul li strong { display:inline-block; font-size:13px;  font-family:'Roboto'; color:#2470b1; margin-right:10px;  }

.root_daum_roughmap { width:350px; margin:0 auto; }
}



.root_daum_roughmap { width:100% !important; max-width:100%; min-width:100% !important; }
.wrap_map { max-height:600px; }

@media screen and (max-width: 900px) {
.page_iframe { width:100%;  }
.root_daum_roughmap { width:100% !important; max-width:100%; min-width:100% !important;  }
.wrap_map { max-height:400px; }
}