@charset "utf-8";

/* 고객사 */
.reference_client .section_visual {background-image:url(../img/sub_visual_client.jpg);}
.section_client {padding-bottom:50px;}
.section_client .client_tab_div {padding:30px 20px 1px; background-color:#fff;}
.section_client .client_tab_div .client_tab {display:flex; flex-wrap:wrap; max-width:1380px; margin:0 auto; padding:1px 0 0 1px; list-style:none; transition:0.5s;}
.section_client .client_tab_div .client_tab li {width:calc(100% / 3); height:72px; margin:-1px 0 0 -1px; border:1px solid #d6dce1; background-color:#f5f7f8; box-sizing:border-box;} /* transition:0.3s; */
.section_client .client_tab_div .client_tab li a {display:flex; align-items:center; justify-content:center; height:100%; line-height:1.4; padding:0 20px; font-size:10px; font-weight:600; color:#000; text-align:center;}
/* .section_client .client_tab_div .client_tab li:nth-child(1) a,
.section_client .client_tab_div .client_tab li:nth-child(3) a {height:50px; padding-top:20px;} */
.section_client .client_tab_div .client_tab li.active {border:1px solid #0078ff; background-color:#0078ff; box-shadow:0 8px 10px rgb(0 0 0 / 15%);}
.section_client .client_tab_div .client_tab li.active a {color:#fff;}
.section_client .client_group {padding-bottom:20px;}
.section_client .client_group .tit_bar {padding:40px 0;}
.section_client .client_group .tit_bar h3 {margin:0; padding:0; font-size:32px; text-align:center;}
.section_client .client_group .logo_list {overflow:hidden;}
.section_client .client_group .logo_list ul {display:flex; flex-wrap:wrap; margin:0; padding:0 10px; list-style:none;}
.section_client .client_group .logo_list li {width:calc(100% / 3); margin-bottom:10px; text-align:center;}
.section_client .client_group .logo_list .logo {display:inline-block; padding:0 5px; border:1px solid #dbdde2; text-align:center;}
.section_client .client_group .logo_list .logo img {height:38px; vertical-align:top;}
.tab_fixed .section_client .client_tab_div {position:fixed; top:60px; left:0; width:100%; box-sizing:border-box; z-index:100;}
.tab_fixed .section_client #client_group1 {margin-top:224px;}

@media all and (min-width:760px) {
    .section_client {padding-bottom:70px;}
    .section_client .client_tab_div {padding:30px 30px 1px;}
    .section_client .client_tab_div .client_tab {height:143px;}
    .section_client .client_tab_div .client_tab li {width:calc(100% / 4);}
    .section_client .client_tab_div .client_tab li a {font-size:14px;}
    .section_client .client_group .tit_bar {padding:60px 0;}
    .section_client .client_group .tit_bar h3 {font-size:38px;}
    .section_client .client_group .logo_list ul {padding:0 20px;}
    .section_client .client_group .logo_list li {width:calc(100% / 4); margin-bottom:20px;}
    .section_client .client_group .logo_list .logo {padding:0 10px;}
    .section_client .client_group .logo_list .logo img {width:138px; height:58px;}
    .tab_fixed .section_client #client_group1 {margin-top:154px;}
}

@media all and (min-width:1280px) {
    .section_client {padding-bottom:100px;}
    .section_client .client_tab_div {padding:50px 40px 1px;}
    .section_client .client_tab_div .client_tab li a {font-size:20px;}
    .section_client .client_tab_div .client_tab li br {display:none;}
    .section_client .client_group .tit_bar {padding:80px 0;}
    .section_client .client_group .tit_bar h3 {font-size:45px;}
    .section_client .client_group .logo_list li {width:calc(100% / 6); margin-bottom:50px;}
    .section_client .client_group .logo_list .logo {width:170px;}
    .tab_fixed .section_client .client_tab_div {top:100px;}
}

/* 수주소식 */
.reference_orders .section_visual {background-image:url(../img/sub_visual_orders.jpg); background-position:70% 100%;}
.reference_orders section .sec_tit {padding:50px 20px;}
.news_tab_box {padding:50px 20px 0;}
.news_tab_box .tabs {display:flex; margin:0; padding:0; list-style:none;}
.news_tab_box .tabs li {flex:1; height:68px; margin:0 -1px; border:1px solid #d6dce1; background-color:#f5f7f8;}
.news_tab_box .tabs li a {display:block; height:68px; line-height:68px; font-size:20px; font-weight:600; color:#000; text-align:center;}
.news_tab_box .tabs li a .red_dot::after {content:''; display:inline-block; width:10px; height:10px; margin:-4px 0 0 8px; border-radius:5px; background-color:#ff0000; vertical-align:middle;}
.news_tab_box .tabs li.active {border:1px solid #0078ff; background-color:#0078ff; box-shadow:0 8px 10px rgba(0, 0, 0, 0.15);}
.news_tab_box .tabs li.active a {color:#fff;}
.board_view {padding:0 20px;}
.board_view a {color:#444; text-decoration:none;}
.board_view a:hover {text-decoration:underline;}
.board_view .ico {display:inline-block; width:19px; height:20px; background:url(../img/news_ico.png) no-repeat 0 0; vertical-align:middle;}
.board_view .menu_box {height:42px; margin:-40px 0 25px; text-align:right;}
.board_view .menu_box .btn {display:inline-block; height:40px; padding:10px 15px 10px 10px; line-height:19px; border:1px solid #ddd; background-color:#fff; font-size:16px; overflow:visible; cursor:pointer;}
.board_view .menu_box .btn .ico {vertical-align:top;}
.board_view .view_info {padding:30px 0; border-top:2px solid #535e72; border-bottom:1px solid #e6e6e6;}
.board_view .view_info .sub {padding-bottom:10px;}
.board_view .view_info .sub h4 {margin:0; padding:0; font-size:22px;}
.board_view .view_info .date {font-size:16px; color:#666;}
.board_view .view_content {padding:30px 0; font-size:16px; line-height:1.5;}
.board_view .view_content + .menu_box {margin:0; padding-top:25px; border-top:1px solid #e6e6e6;}
.board_view .view_content p {margin:0;}
.board_view .view_content table {width:100% !important;}
.board_view .view_content table td {height:auto !important;}
.board_view .view_content img {max-width:100%;}
.board_view .view_content .newsletter.wrap {width:auto !important;}
.board_view .view_content .newsletter .body {padding:20px 20px 0 !important;}
.board_view .view_content .newsletter .box_top {padding:20px 20px 0 !important;}
.board_view .view_content .link_block {margin-top:30px;}
.board_view .view_content .link_block a {display:block; max-width:500px; height:60px; line-height:28px; margin:0 auto; padding:15px 35px 15px 15px; text-align:center; background:url(../img/reference_icon_arrow.png)no-repeat 85% 50% #0078ff; text-decoration:none; border-radius:30px; color:#fff; font-size:18px; box-sizing:border-box; transition:0.3s;}
.board_view .view_content .link_block a span {display:none;}
.board_view #article_content {width:auto !important; max-width:980px; margin:0 auto;}
.board_view #article_content .view_content {padding:0;}
.news_list ul {margin:0; padding:0; list-style:none;}
.news_list ul li {padding:0 20px 20px; transition:0.2s;}
.news_list .info_box {display:block; border:1px solid #e3e3e3; background-color:#fff; box-sizing:border-box; transition:0.2s;}
.news_list .info_box .thmb {overflow:hidden;}
.news_list .info_box .thmb img {width:100%; vertical-align:top;}
.news_list .info_box .thmb img.no_img {background:#f0f0f0 url(../img/ico_img.png) no-repeat 50% 50%; opacity:0.5;}
.news_list .info_box .sub {position:relative; padding:20px;}
.news_list .info_box .sub strong {display:block; width:100%; height:30px; line-height:30px; font-size:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news_list .info_box .sub .date {display:block; padding-top:5px; font-family:Arial; font-size:14px; color:#666;}
.news_list .info_box .desc {height:69px; line-height:23px; margin-bottom:20px; padding:0 20px; font-size:16px; color:#666; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.orders_list ul {margin:0; padding:0; list-style:none;}
.orders_list ul li {padding:0 20px 20px; box-sizing:border-box;}
.orders_list ul li:hover .info_box {box-shadow:0 8px 10px rgba(0, 0, 0, 0.1);}
.orders_list .info_box {display:block; border:1px solid #e3e3e3; background-color:#fff; transition:0.2s;}
.orders_list .info_box .thmb {overflow:hidden;}
.orders_list .info_box .thmb img {width:100%; vertical-align:top;}
.orders_list .info_box .thmb img.no_img {background:#f0f0f0 url(../img/ico_img.png) no-repeat 50% 50%; opacity:0.5;}
.orders_list .info_box .sub {max-height:52px; line-height:26px; padding:20px 25px 0; overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.orders_list .info_box .sub strong {font-size:20px; line-height:1;}
.orders_list .info_box .date {padding:15px 25px 20px; font-family:Arial; font-size:14px; color:#666;}
.pagination {padding:30px 0 30px 4px; text-align:center; font-family:Arial;}
.pagination > a, .pagination > span {display:inline-block; width:28px; height:40px; line-height:40px; margin:0 0 0 -4px; border:1px solid #fff; font-size:12px; text-align:center; vertical-align:top;}
.pagination > a {color:#444; text-decoration:none;}
.pagination .active {display:inline-block; border-color:#ccc;}
.pagination .page_prev, .pagination .page_next {display:inline-block; overflow:hidden; text-indent:-9999px; background:url(../img/page_prev.png) no-repeat -6px 0;}
.pagination .page_next {background-image:url(../img/page_next.png);}
.srch_box {padding-top:40px; text-align:center;}
.srch_box .srch_bar {display:inline-block; height:40px; border:1px solid #dedede;}
.srch_box .srch_bar .frm_select {display:inline-block; width:100px; height:40px; line-height:40px; padding:0 10px; border:0; font-size:16px; vertical-align:top;}
.srch_box .srch_bar .input_txt {width:160px; height:20px; line-height:20px; padding:10px; border:0; background:none; font-size:16px; outline:none;}
.srch_box .srch_bar .btn_srch {width:40px; height:40px; border:0; background:url(../img/btn_srch.png) no-repeat 0 0; overflow:visible; cursor:pointer; vertical-align:top;}
.srch_box .srch_bar .btn_srch span {display:none;}

@media all and (min-width:760px) {
    .reference_orders section .sec_tit {padding:50px 40px;}
    .news_tab_box {padding:50px 40px 0;}
    .news_tab_box .tabs li a {font-size:22px;}
    .board_view {padding:0 40px;}
    .board_view .view_info {padding:35px 20px;}
    .board_view .view_info .sub {padding-bottom:15px;}
    .board_view .view_info .sub h4 {font-size:26px;}
    .board_view .view_info .date {font-size:18px;}
    .board_view .view_content {padding:40px 0; font-size:18px;}
    .board_view .view_content .link_block a {font-size:16px; background-position:90% 50%;}
    .board_view .view_content .link_block a span {display:inline;}
    .news_list ul li {padding:0 40px 20px;}
    .news_list .info_box {position:relative; height:152px; padding:20px 20px 20px 360px;}
    .news_list .info_box .thmb {position:absolute; top:0; left:0; width:336px; height:150px;}
    .news_list .info_box .sub {position:relative; height:30px; line-height:30px; margin-bottom:8px; padding:0 75px 0 0;}
    .news_list .info_box .sub .date {position:absolute; top:0; right:0; height:30px; line-height:30px; padding-top:0;}
    .news_list .info_box .desc {padding:0;}
    .orders_list ul {display:flex; flex-wrap:wrap; padding:0 25px;}
    .orders_list ul li {width:calc(100% / 2); padding:0 15px 30px;}
    .orders_list .info_box {min-height:305px;}
    .pagination {padding-left:0;}
    .pagination > a, .pagination > span {width:40px; margin:0; font-size:14px;}
    .pagination .page_prev, .pagination .page_next {background-position:0 0;}
    .srch_box .srch_bar .frm_select {width:auto; min-width:120px;}
    .srch_box .srch_bar .input_txt {width:300px;}
}

@media all and (min-width:1280px) {
    .reference_orders section .sec_tit {padding:100px 40px 90px;}
    .news_tab_box {padding:90px 20px 0;}
    .news_tab_box .tabs {width:710px; margin:0 auto;}
    .news_tab_box .tabs li a {font-size:26px;}
    /* .board_view {padding:0;} */
    .board_view .view_info {padding:35px 140px 35px 20px;}
    .board_view .view_info:after {content:""; display:block; clear:both; height:0; font-size:0; visibility:hidden;}
    .board_view .view_info .sub {float:left; width:100%; padding-bottom:0; line-height:36px;}
    .board_view .view_info .sub h4 {font-size:28px;}
    .board_view .view_info .date {float:right; width:110px; height:36px; line-height:36px; margin-right:-120px; font-size:18px; text-align:right;}
    /* .board_view .view_content {width:980px; margin:0 auto; padding:40px 20px;} */
    .board_view .view_content .link_block {margin-top:40px;}
    .board_view .view_content .link_block a {padding:15px 25px; background-color:#000; background-position:88% 50%; background-image:none; font-size:18px;}
    .board_view .view_content .link_block a:hover {padding:15px 35px 15px 15px; background-position:90% 50%; background-image:url(../img/reference_icon_arrow.png); background-color:#0078ff;}
    .board_view .view_content .newsletter.wrap {width:760px !important;}
    .board_view .view_content .newsletter .body {padding:35px 40px 0 !important;}
    .board_view .view_content .newsletter .box_top {padding:40px 40px 0 !important;}
    .board_view #news-content {width:980px; margin:0 auto; padding:40px 20px;}
    .board_view #article_content {width:980px !important;}
    .news_list ul li {padding:0 40px 40px;}
    .news_list ul li:hover .info_box {box-shadow:0 8px 10px rgba(0, 0, 0, 0.1);}
    .news_list .info_box {height:202px; padding:30px 35px 30px 490px;}
    .news_list .info_box .thmb {width:448px; height:200px;}
    .news_list .info_box .thmb img {height:200px;}
    .news_list .info_box .sub {margin-bottom:30px; padding-right:120px;}
    .news_list .info_box .sub strong {font-size:22px;}
    .news_list .info_box .sub .date {font-size:17px;}
    .news_list .info_box .desc {height:75px; line-height:25px; font-size:17px;}
    .orders_list ul {padding:0 20px;}
    .orders_list ul li {width:calc(100% / 3); padding:0 20px 40px;}
    .orders_list .info_box {min-height:412px;}
    .orders_list .info_box .sub {max-height:66px; min-height:66px; line-height:33px; padding:30px 35px 0;}
    .orders_list .info_box .sub strong {font-size:22px;}
    .orders_list .info_box .date {padding:25px 35px 30px; font-size:17px;}
}

/* 수주소식 템플릿 */
.orders_template .orders_head {margin-bottom:30px;}
.orders_template .orders_head img {width:100%; vertical-align:top;}
.orders_template .orders_cont .pjt_info {margin-bottom:60px;}
.orders_template .orders_cont .pjt_info .title {font-size:28px; margin-bottom:20px; color:#0078ff;}
.orders_template .orders_cont .pjt_info .info_dl {margin:0 0 30px; padding:0; font-size:18px;}
.orders_template .orders_cont .pjt_info .info_dl dt {padding:0 0 5px; font-weight:600;}
.orders_template .orders_cont .pjt_info .info_dl dd {margin:0; padding:0; color:#6f6f6f;}
.orders_template .orders_cont .pjt_info .link {padding-top:10px;}
.orders_template .orders_cont .pjt_info .link img {height:40px; vertical-align:top;}
.orders_template .orders_cont .pjt_desc .tit {margin-bottom:20px; font-size:24px;}
.orders_template .orders_cont .pjt_desc .desc {margin-bottom:40px; line-height:1.4; font-size:18px;}
.orders_template .orders_cont .pjt_desc .desc_block {margin-bottom:60px;}
.orders_template .orders_cont .pjt_desc .image_div .image_box {max-width:440px; margin:20px auto 0;}
.orders_template .orders_cont .pjt_desc .image_div .image_box .image img {width:100%; vertical-align:top;}
.orders_template .orders_cont .pjt_desc .image_div .image_box .text {padding:15px 0; font-size:18px; text-align:center;}
.orders_template .orders_cont .pjt_desc .kwd_block {margin-top:20px;}
.orders_template .orders_cont .pjt_desc .kwd_block .kwd {display:inline-block; height:38px; line-height:38px; margin:0 6px 10px 0; padding:0 15px; border:1px solid #0078ff; color:#0078ff; border-radius:20px; font-size:14px; vertical-align:top;}
.orders_template .orders_cont .pjt_desc .link_block {margin-bottom:60px;}
.orders_template .orders_cont .pjt_desc .link_block a {display:block; max-width:500px; height:60px; line-height:28px; margin:0 auto; padding:15px 35px 15px 15px; text-align:center; background:url(../img/reference_icon_arrow.png)no-repeat 85% 50% #0078ff; text-decoration:none; border-radius:30px; color:#fff; font-size:18px; box-sizing:border-box; transition:0.3s;}
.orders_template .orders_cont .pjt_desc .link_block a span {display:none;}

@media all and (min-width:760px) {
    .orders_template .orders_cont .pjt_info .info_dl {display:inline-block; margin-right:15%; vertical-align:top;}
    .orders_template .orders_cont .pjt_info .info_dl:last-child {margin-right:0;}
    .orders_template .orders_cont .pjt_info .link {padding-top:0;}
    .orders_template .orders_cont .pjt_desc .image_div {margin-top:20px;}
    .orders_template .orders_cont .pjt_desc .image_div::after {content:""; display:block; clear:both; height:0; font-size:0; visibility:hidden;}
    .orders_template .orders_cont .pjt_desc .image_div .image_box {float:left; width:46%; margin:0;}
    .orders_template .orders_cont .pjt_desc .image_div .image_box .text {font-size:16px;}
    .orders_template .orders_cont .pjt_desc .image_div .image_box:last-child {float:right;}
    .orders_template .orders_cont .pjt_desc .link_block a {font-size:16px; background-position:90% 50%;}
    .orders_template .orders_cont .pjt_desc .link_block a span {display:inline;}
}

@media all and (min-width:1024px) {
    .orders_template .orders_head {margin-bottom:60px;}
    .orders_template .orders_cont {padding-left:350px;}
    .orders_template .orders_cont::after {content:""; display:block; clear:both; height:0; font-size:0; visibility:hidden;}
    .orders_template .orders_cont .pjt_info {float:left; width:320px; margin-left:-350px;}
    .orders_template .orders_cont .pjt_info .title {font-size:34px; margin-bottom:34px;}
    .orders_template .orders_cont .pjt_info .info_dl {display:block; margin:0 0 40px;}
    .orders_template .orders_cont .pjt_info .info_dl dt {padding:0 0 6px;}
    .orders_template .orders_cont .pjt_info .info_dl {margin-bottom:34px;}
    .orders_template .orders_cont .pjt_info .link {padding-top:20px;}
    .orders_template .orders_cont .pjt_info .link img {height:45px;}
    .orders_template .orders_cont .pjt_desc {float:left; width:100%;}
    .orders_template .orders_cont .pjt_desc .tit {font-size:26px;}
    .orders_template .orders_cont .pjt_desc .desc {margin-bottom:40px;}
    .orders_template .orders_cont .pjt_desc .link_block {margin-bottom:80px;}
    .orders_template .orders_cont .pjt_desc .link_block a {padding:15px 25px; background-color:#000; background-position:88% 50%; background-image:none; font-size:18px;}
    .orders_template .orders_cont .pjt_desc .link_block a:hover {padding:15px 35px 15px 15px; background-position:90% 50%; background-image:url(../img/reference_icon_arrow.png); background-color:#0078ff;}
}

@media all and (min-width:1280px) {
    .orders_template .orders_head {margin-bottom:90px;}
    .orders_template .orders_cont {padding-left:440px;}
    .orders_template .orders_cont .pjt_info {width:400px; margin-left:-440px;}
    .orders_template .orders_cont .pjt_info .title {font-size:40px; margin-bottom:40px;}
    .orders_template .orders_cont .pjt_info .info_dl {font-size:22px;}
    .orders_template .orders_cont .pjt_info .info_dl dt {padding:0 0 8px;}
    .orders_template .orders_cont .pjt_info .link img {height:50px;}
    .orders_template .orders_cont .pjt_desc .tit {font-size:28px;}
    .orders_template .orders_cont .pjt_desc .desc {margin-bottom:50px; line-height:1.5; font-size:20px;}
    .orders_template .orders_cont .pjt_desc .desc_block {margin-bottom:80px;}
    .orders_template .orders_cont .pjt_desc .image_div {margin-top:60px;}
    .orders_template .orders_cont .pjt_desc .image_div .image_box .text {font-size:20px;}
}

#article_content.new_template {width:auto !important; max-width:none !important;} 
@media all and (min-width:1281px) {
    #article_contentnew_template {width:auto !important; max-width:none !important;} 
}

/* 구축사례 */
.reference_case .qm_lyr {display:none;}
.reference_case .case_qm_lyr {display:none; position:fixed; top:50%; right:-200px; transform:translateY(-50%); transition:all ease 0.3s; z-index:4;}
.reference_case .case_qm_lyr ul {margin:0; padding:0; list-style:none;}
.reference_case .case_qm_lyr ul li {margin:20px 0;}
.reference_case .case_qm_lyr ul li a {position:relative; display:block; right:0; height:40px; line-height:40px; margin:0; padding:0 15px; border:1px solid #d6dce1; background-color:#fff; border-radius:20px; font-weight:600; box-shadow:5px 7px 9px rgba(0, 0, 0, 0.15); transition:0.3s;}
.reference_case .case_qm_lyr ul li a:hover {right:20px;}
.reference_case .case_qm_lyr ul li.on a {border:1px solid #0078ff; background-color:#0078ff; color:#fff;}
.reference_case .case_qm_lyr ul li.on a:hover {right:0;}
.scroll_on .reference_case .case_qm_lyr {right:30px;}
.scroll_on .reference_case .case_tab_box {background-color:#fff;} 
.scroll_on .reference_case .case_tab_box .tabs {box-shadow:0 10px 10px 0 rgba(0, 0, 0, 0.15);}
.reference_case .case_tab_box {position:fixed; top:60px; left:0; width:100%; padding:30px 20px 0; box-sizing:border-box; transition:0.3s; z-index:111;}
.reference_case .case_tab_box .tabs {display:flex; max-width:1380px; margin:0 auto; padding:1px 0 0 1px; list-style:none; transition:0.5s;}
.reference_case .case_tab_box .tabs li {flex:1; height:60px; margin:-1px 0 0 -1px; border:1px solid #d6dce1; background-color:#fff;}
.reference_case .case_tab_box .tabs li a {display:block; height:40px; line-height:1.4; padding-top:20px; font-size:12px; font-weight:600; color:#000; text-align:center;}
.reference_case .case_tab_box .tabs li:nth-child(3) a {height:45px; padding-top:15px;}
.reference_case .case_tab_box .tabs li.active {border:1px solid #0078ff; background-color:#0078ff;}
.reference_case .case_tab_box .tabs li.active a {color:#fff;}
.reference_case .section_visual {height:450px; background-position:80% 0; transition:0.3s;}
.reference_case .section_visual .svc_tit {margin-top:122px;}
.reference_case .section_visual .svc_desc {margin-bottom:50px;}
.reference_case .section_visual .svc_desc br {display:none;}
.reference_case .section_visual .svc_cont {padding:0 20px; line-height:1; font-size:90px; font-weight:bold; opacity:0; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}
.reference_case .section_visual .svc_cont img {max-width:100%; vertical-align:top;}
.reference_case .section_recommend .recommend_box {padding:0 20px;}
.reference_case .section_recommend .recommend_box .info {padding:30px 0 0 0; box-sizing:border-box;}
.reference_case .section_recommend .recommend_box .info .tit strong {font-size:32px; line-height:1;}
.reference_case .section_recommend .recommend_box .info .desc {padding-top:10px; font-size:18px; line-height:1.4;}
.reference_case .section_recommend .recommend_box .info .desc br {display:none;}
.reference_case .section_recommend .recommend_box .image {overflow:hidden; text-align:center;}
.reference_case .section_recommend .recommend_box .image img {max-width:100%; vertical-align:top;}
.reference_case .section_recommend .recommend_div1 .sec_tit {position:relative; padding:50px 20px; text-align:left;}
.reference_case .section_recommend .recommend_div1 .sec_tit::before {display:none; content:''; position:absolute; top:50%; left:40px; width:140px; height:140px; background:url(../img/ref_recommend1.png)no-repeat 0 0; transform:translateY(-50%);}
.reference_case .section_recommend .recommend_div1 .sec_desc {font-size:18px; line-height:1.4; text-align:left;}
.reference_case .section_recommend .recommend_div2, 
.reference_case .section_recommend .recommend_div3 {padding:50px 0;}
.reference_case .section_recommend .recommend_div4 {padding:50px 0 100px;}
.reference_case .section_recommend .recommend_div2 .info,
.reference_case .section_recommend .recommend_div3 .info,
.reference_case .section_recommend .recommend_div4 .info {padding:0 0 30px;}
.reference_case .section_recommend .bu_list {margin:0; padding:0 0 0 6px; list-style:none;}
.reference_case .section_recommend .bu_list li {position:relative; line-height:1.4; padding:6px 0 6px 10px; font-size:18px;}
.reference_case .section_recommend .bu_list li::before {content:''; position:absolute; top:16px; left:-4px; width:6px; height:6px; border-radius:3px; background-color:#333;}
.reference_case .section_solution {position:relative; color:#fff; background:url(../img/ref_sol_bg.png)no-repeat 0 0; background-size:cover;}
.reference_case .section_solution .sec_tit h3 {font-size:28px;}
.reference_case .section_solution .sec_cont {padding-bottom:200px;}
.reference_case .section_solution .solution_box {display:flex; flex-direction:column; align-items:center;}
.reference_case .section_solution .solution_box .sub {position:relative; width:calc(100% - 80px);}
.reference_case .section_solution .solution_box .sub .div {position:relative; margin:0 0 30px; padding-left:20px; font-size:18px; font-weight:bold; color:#23dc9f; text-align:left; box-sizing:border-box; opacity:0;}
.reference_case .section_solution .solution_box .sub .div::before {content:''; position:absolute; top:50%; left:0; width:8px; height:8px; background-color:#23dc9f; border-radius:4px; transform:translate(0, -50%);}
.reference_case .section_solution .solution_box .image {position:absolute; bottom:-66px; left:50%; width:369px; height:241px; background:no-repeat 0 0; transform:translateX(-50%);}
.reference_case .section_banner {margin-top:60px;}
.reference_case .section_banner .section_inner {max-width:none;}
.reference_case .section_banner .rolling_slider {display:flex; position:relative; height:82px; margin:0 auto; overflow:hidden;}
.reference_case .section_banner .rolling_slider ul {display:flex; flex-direction:row; margin:0; padding:0; list-style:none; transform:translateX(0); animation:slide_banner 25s running infinite linear;}
.reference_case .section_banner .rolling_slider:hover ul {animation-play-state:paused;}
.reference_case .section_banner .rolling_slider ul li {float:left; width:260px; height:80px; margin:0 10px; padding:11px 0; border:1px solid #dbdbdb; text-align:center; box-sizing:border-box;}
.reference_case .section_banner .rolling_slider ul li img {max-width:100%; vertical-align:top;}

@keyframes slide_banner {
    0% {
        transform:translateX(0px);
        -webkit-transform:translateX(0px);
    }

    100% {
        transform:translateX(-2800px);
        -webkit-transform:translateX(-2800px);
    }
}

.reference_case .section_function ul {display:flex; flex-direction:column; margin:0; padding:0; list-style:none;}
.reference_case .section_function ul li {flex:1; margin:0 18px;}
.reference_case .section_function ul li .function_box {position:relative; width:100%; height:220px; margin:20px 0; padding:38px; background:no-repeat 35px 130px; color:#fff; box-sizing:border-box; opacity:0; transition:all ease-in-out 0.3s; box-shadow:0 0 14px rgba(0, 0, 0, 0.1);;}
.reference_case .section_function ul li .function_box .tit {height:41px; line-height:41px;}
.reference_case .section_function ul li .function_box .tit strong {display:none; font-size:32px;}
.reference_case .section_function ul li .function_box .tit img {vertical-align:top;}
.reference_case .section_function ul li .function_box .cont {margin-top:15px; font-size:16px;}
.reference_case .section_function ul li .function_box .btn {position:absolute; bottom:38px; right:38px; height:36px; line-height:34px; padding:0 25px; font-size:14px; color:#fff; background:no-repeat 85% 50%; border:1px solid #fff; border-radius:25px; cursor:pointer;}
.reference_case .section_function ul li:first-child .function_box {background-color:#5b34ff;}
.reference_case .section_function ul li:first-child .function_box .btn {background-color:#5b34ff; border:1px solid #fff;}
.reference_case .section_function ul li:nth-child(2) .function_box {background-color:#0078ff;}
.reference_case .section_function ul li:nth-child(2) .function_box .btn {background-color:#0078ff; border:1px solid #fff;}
.reference_case .section_function ul li:last-child .function_box {background-color:#1bc68e;}
.reference_case .section_function ul li:last-child .function_box .btn {background-color:#1bc68e; border:1px solid #fff;}

@media all and (min-width:760px) {
  .reference_case .section_recommend .recommend_box {padding:0 40px;}
  .reference_case .section_recommend .recommend_div1 .sec_tit {padding:100px 40px 100px 235px;}
  .reference_case .section_recommend .recommend_div1 .sec_tit::before {display:block;}
  .reference_case .case_tab_box {padding:50px 20px 0;}
  .reference_case .case_tab_box .tabs li.active {box-shadow:0 8px 10px rgb(0 0 0 / 15%);}
  .reference_case .case_tab_box .tabs li a {font-size:16px;}
  .reference_case .case_tab_box .tabs li:nth-child(3) a {height:40px; padding-top:20px;}
  .reference_case .case_tab_box .tabs li a br {display:none;}
  .reference_case .section_visual {height:690px;}
  .reference_case .section_visual .svc_tit {margin-top:142px;}
  .reference_case .section_visual .svc_desc {margin-bottom:80px;}
  .reference_case .section_visual .svc_desc br {display:block;}
  .reference_case .section_visual .svc_cont {display:block; padding:0 40px;}
  .reference_case .section_solution .sec_tit h3 {font-size:32px;}
  .reference_case .section_solution .solution_box .sub {position:relative; width:calc(100% - 160px);}
  .reference_case .section_solution .solution_box .sub .div {display:inline-block; width:49%;}
}

@media all and (min-width:960px) {
    .reference_case .section_recommend .recommend_box {display:flex; align-items:center;}
    .reference_case .section_recommend .recommend_box .info {width:calc(100% - 400px); padding:0 60px 0 0;}
    .reference_case .section_recommend .recommend_div1 .sec_desc {margin-top:-80px;}
    .reference_case .section_recommend .recommend_div1 .sec_desc br {display:inline;}
    .reference_case .section_recommend .recommend_div2 {padding:100px 0 0;}
    .reference_case .section_recommend .recommend_div3 {padding:100px 0 0;}
    .reference_case .section_recommend .recommend_div3 .recommend_box {flex-direction:row-reverse;}
    .reference_case .section_recommend .recommend_div3 .recommend_box .info {padding:0 0 0 60px;}
    .reference_case .section_recommend .recommend_div4 {padding:100px 0 150px;}
    .reference_case .section_recommend .recommend_div2 .image,
    .reference_case .section_recommend .recommend_div4 .image {text-align:right;}
    .reference_case .section_recommend .recommend_div3 .image {text-align:left;}
}

@media all and (min-width:1280px) {
  .scroll_on .reference_case .case_tab_box {background-color:transparent;} 
  .scroll_on .reference_case .case_tab_box .tabs {box-shadow:none;}
  .reference_case .case_qm_lyr {display:block;}
  .reference_case .case_tab_box {position:static; padding:50px 20px 140px;}
  .reference_case .case_tab_box .tabs li a {height:48px; padding-top:12px; font-size:22px;}
  .reference_case .case_tab_box .tabs li:nth-child(3) a {height:48px; padding-top:12px;}
  .reference_case .section_visual {height:calc(100vh - 100px); background-position:100% 0;}
  .reference_case .section_visual .svc_tit {margin-top:0;}
  .reference_case .section_visual .svc_desc {margin-bottom:80px;}
  .reference_case .section_visual .svc_cont {font-size:150px;}
  .reference_case .section_recommend .recommend_box .info {width:calc(100% - 640px);}
  .reference_case .section_recommend .recommend_box .info .tit strong {font-size:40px;}
  .reference_case .section_recommend .recommend_box .info .desc {padding-top:35px;}
  .reference_case .section_recommend .recommend_box .image {width:640px;}
  .reference_case .section_recommend .recommend_div3 {padding:200px 0 0;}
  .reference_case .section_recommend .recommend_div4 {padding:200px 0 150px;}
  .reference_case .section_solution .sec_tit h3 {font-size:40px;}
  .reference_case .section_solution .sec_cont {padding-bottom:0;}
  .reference_case .section_solution .solution_box .tit {width:initial; height:30px; line-height:30px; margin-bottom:0; z-index:1;}
  .reference_case .section_solution .solution_box .sub {width:1152px; height:435px; margin-top:-20px; background:url(../img/ref_sol_img.png)no-repeat 0 0;}
  .reference_case .section_solution .solution_box .sub .div {position:absolute; width:initial; margin:0; padding-left:0; font-size:16px; transform:translate(-50%, -50%);}
  .reference_case .section_solution .solution_box .sub .div::before {top:-12px; left:50%; transform:translate(-50%, -50%);}
  .reference_case .section_solution .solution_box .sub .div:first-child {top:87px; left:50%;}
  .reference_case .section_solution .solution_box .sub .div:nth-child(2) {top:116px; left:35%;}
  .reference_case .section_solution .solution_box .sub .div:nth-child(3) {top:116px; left:65%;}
  .reference_case .section_solution .solution_box .sub .div:nth-child(4) {top:195px; left:22%;}
  .reference_case .section_solution .solution_box .sub .div:nth-child(5) {top:195px; left:78%;}
  .reference_case .section_function ul {flex-direction:row;}
  .reference_case .section_function ul li .function_box {margin:0; color:#fff;}
  .reference_case .section_function ul li .function_box .tit strong {display:none;}
  .reference_case .section_function ul li .function_box .tit img {display:inline;}
  .reference_case .section_function ul li:first-child .function_box {background-color:#5b34ff; background-image:none;}
  .reference_case .section_function ul li:first-child .function_box:hover {background-image:url(../img/ref_fnbox_img1.png);}
  .reference_case .section_function ul li:first-child .function_box .btn {border:1px solid #fff; background-color:transparent;}
  .reference_case .section_function ul li:first-child .function_box:hover .btn {border:1px solid #5b34ff; background-color:#5b34ff;}
  .reference_case .section_function ul li:nth-child(2) .function_box {background-color:#0078ff; background-image:none;}
  .reference_case .section_function ul li:nth-child(2) .function_box:hover {background-image:url(../img/ref_fnbox_img2.png);}
  .reference_case .section_function ul li:nth-child(2) .function_box .btn {border:1px solid #fff; background-color:transparent;}
  .reference_case .section_function ul li:nth-child(2) .function_box:hover .btn {border:1px solid #0078ff; background-color:#0078ff;}
  .reference_case .section_function ul li:last-child .function_box {background-color:#1bc68e; background-image:none;}
  .reference_case .section_function ul li:last-child .function_box:hover {background-image:url(../img/ref_fnbox_img3.png);}
  .reference_case .section_function ul li:last-child .function_box .btn {border:1px solid #fff; background-color:transparent;}
  .reference_case .section_function ul li:last-child .function_box:hover .btn {border:1px solid #1bc68e; background-color:#1bc68e;}
  .reference_case .section_function ul li .function_box .btn {padding:0 25px; background-image:none; transition:0.3s;}
  .reference_case .section_function ul li .function_box:hover .btn {padding:0 35px 0 15px; background-image:url(../img/reference_icon_arrow.png);}
  .reference_case .section_function ul li .function_box:hover {background-color:#fff; color:#000; box-shadow:0 0 14px rgba(0, 0, 0, 0.1);}
  .reference_case .section_function ul li .function_box:hover .tit strong {display:inline;}
  .reference_case .section_function ul li .function_box:hover .tit img {display:none;}
}

/* 제조 */
.reference_case.reference_manufacture .section_visual {background-image:url(../img/sub_visual_ref_1.png);}
.reference_case.reference_manufacture .section_recommend .recommend_div1 .sec_tit::before {background-image:url(../img/ref_recommend1.png);}
.reference_case.reference_manufacture .solution_box .image {bottom:-69px; background-image:url(../img/ref_sol_img1.png);}

/* 금융 */
.reference_case.reference_finance .section_visual {background-image:url(../img/sub_visual_ref_2.png);}
.reference_case.reference_finance .section_recommend .recommend_div1 .sec_tit::before {background-image:url(../img/ref_recommend2.png);}
.reference_case.reference_finance .solution_box .image {background-image:url(../img/ref_sol_img2.png);}

/* 유통/물류/서비스 */
.reference_case.reference_logistics .section_visual {background-image:url(../img/sub_visual_ref_3.png);}
.reference_case.reference_logistics .section_recommend .recommend_div1 .sec_tit::before {background-image:url(../img/ref_recommend3.png);}
.reference_case.reference_logistics .solution_box .image {bottom:-78px; background-image:url(../img/ref_sol_img3.png);}

/* 건설/에너지 */
.reference_case.reference_energy .section_visual {background-image:url(../img/sub_visual_ref_4.png);}
.reference_case.reference_energy .section_recommend .recommend_div1 .sec_tit::before {background-image:url(../img/ref_recommend4.png);}
.reference_case.reference_energy .solution_box .image {bottom:-73px; background-image:url(../img/ref_sol_img4.png);}