/* sub style */ .sub_content_area{margin:0 auto; padding:40px 0 0 0;} .sub_visual_area .page_title{display:inline-block; position:absolute; left: 50%; width: 1280px; top: 50%; transform: translate(-50%, -50%);} .sub_visual_area .page_title p {opacity: 0.5;color: #fff; font-size: 18px;font-weight: 400;} .sub_visual_area .page_title span{position:relative; z-index:10; color:#fff; font-size:48px;line-height: 43px;} .sub_visual_area.type02 .page_title{display:block; position:static; left:auto; top:auto; margin:0 auto; padding:225px 0 0 0; max-width:1280px; width:100%;text-align: center;transform:translateX(0);} .sub_visual_area.type02 .page_title span{letter-spacing:-2px; font-weight:400;} .sub_visual_area.type02 .page_title:after{display:none;} .sub_visual_area .breadcrumb{position:absolute; left:0; bottom:-26px; width:100%;} .sub_visual_area .breadcrumb .inner{margin:0 auto; width:100%;max-width:1280px; height:52px; overflow:hidden; transition:background 1s;} .sub_visual_area .breadcrumb .inner > a{float:left; height:52px;} .sub_visual_area .breadcrumb .inner .home{width: 33.3%; background:#dfdfe4 url(../images/common/home.png) 17px 15px no-repeat;font-size:17px; box-sizing:border-box; padding:0 50px; width: 33.3%; line-height:52px;} .sub_visual_area .breadcrumb .inner .depth1{position:relative; float:left; width: 33.33%; background: #515154;} .sub_visual_area .breadcrumb .inner .depth1 > a{display:block; padding:0 30px; line-height:52px; color:#fff; font-size:17px; box-sizing:border-box; background:url(../images/common/breadcrumb_arrow.png) no-repeat right 32px center;} .sub_visual_area .breadcrumb .inner .depth1 ul{opacity:0; position:absolute; width:100%; background:rgba(24,45,87,.8); transition:opacity .5s, background 1s;} .sub_visual_area .breadcrumb.active .inner{background:#515154; overflow:visible;} .sub_visual_area .breadcrumb.active .inner .depth1 > a{background:url(../images/common/breadcrumb_arrow_on.png) no-repeat right 32px center;} .sub_visual_area .breadcrumb.active .inner .depth1 ul{opacity:1; background:#515154; z-index: 10} .sub_visual_area .breadcrumb.active .inner .depth1 ul li{border-top:1px solid #8c97ac;} .sub_visual_area .breadcrumb.active .inner .depth1 ul li:hover {background:#717174} .sub_visual_area .breadcrumb.active .inner .depth1 ul a{display:block; padding:0 30px; line-height:52px; color:#fff; font-size:17px;} .sub_visual_area .breadcrumb .inner .depth2{padding:0 30px; width: 33.33%; line-height:52px; background: #bd000f;color:#fff; font-size:17px; box-sizing:border-box;} /*서브 타이틀*/ .sub_content_area .sub_tit {text-align: center; position: relative;padding:40px 0;} .sub_content_area .sub_tit:after {content: ''; position: absolute; background: url(../images/common/sub_tit.png) no-repeat; width:24px; height: 48px; left: 50%;transform: translateX(-50%); bottom: -40px;} .sub_content_area .sub_tit h2 {font-size: 48px; color:#1f1f25;padding-bottom: 10px; font-weight: 500;} .sub_content_area .sub_tit p {font-size: 24px; color:#9c9ca4} /*회사소개*/ .sub_content_area .cont_box {padding-top: 100px;} .sub_content_area .cont_box .top_warp {width:100%;background: linear-gradient(-5deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 13%, rgb(237, 237, 241) 0px, rgb(237, 237, 241) 52%, rgb(255, 255, 255) 0px);} .sub_content_area .cont_box .top_warp .inner {max-width: 1280px; width:100%; margin:0 auto;} .sub_content_area .cont_box .top_warp .inner:after {content: ''; clear: both; display: block;} .sub_content_area .cont_box .top_warp .inner .left_img_box { width:50%; float: left; padding-right: 20px;margin-bottom: 15px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .namecard {width:49%; height: 304px; background: url(../images/contents/first.jpg) no-repeat; background-size: cover; float: left;} .sub_content_area .cont_box .top_warp .inner .left_img_box .icon {width:49%; height: 304px; background:#dd0007; float: right; position: relative;} .sub_content_area .cont_box .top_warp .inner .left_img_box .icon:after { position: absolute; content: ''; background:url(../images/contents/bulb.png) no-repeat; width:56px; height: 63px; bottom: 20px; right: 20px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box {background:url(../images/contents/third.jpg) no-repeat; background-size: cover; width:100%; height: 304px; display: inline-block; position: relative;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box p{font-size: 36px; color:#fff;font-weight:bold;line-height: 38px; position: absolute; left: 30px; bottom: 30px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box p strong {color:#bd000f} .sub_content_area .cont_box .top_warp .inner .right_txt_box {width:50%; float: right;padding-left: 20px;margin-bottom: 21px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2 {font-size: 36px; color: #1f1f25; margin-bottom: 90px; position: relative;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2:after {position: absolute; content: ''; left: 0; width:36px; height: 1px; background: #1f1f25;bottom: -40px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box dt {font-size: 24px; color:#5f5f66; font-weight: 600; margin-bottom: 20px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box dd {font-size: 18px; color:#5f5f66;line-height: 30px;} .sub_content_area .cont_box .top_warp .inner .left_txt_box {width:50%; float: left; padding-right: 20px;} .sub_content_area .cont_box .top_warp .inner .left_txt_box p {font-size: 18px; color:#5f5f66; line-height: 37px;padding: 20px 22px;} .sub_content_area .cont_box .top_warp .inner .right_img_box {width:50%; float: right; padding-left: 20px;text-align: center; margin-top: 40px;margin-bottom: 80px;} .sub_content_area .cont_box .top_warp .inner .right_img_box .p_img{display: block; margin: 0 auto;} .sub_content_area .cont_box .top_warp .inner .right_img_box .m_img{display: none;} .sub_content_area .cont_box .bottom_warp { width:100%;margin-bottom: 150px;display: inline-block;} .sub_content_area .cont_box .bottom_warp .inner {max-width:1280px; width:100%; margin:0 auto; padding-top: 110px;} .sub_content_area .cont_box .bottom_warp .tit_box { text-align: center; color: #1f1f25; font-size: 24px; margin-bottom: 50px;} .sub_content_area .cont_box .bottom_warp .step_list ul {display: inline-block;width: 100%;} .sub_content_area .cont_box .bottom_warp .step_list ul:before{content: ''; position: absolute; width:100%; height: 4px; background: #dd0007;left: 0; margin-top: 135px;} .sub_content_area .cont_box .bottom_warp .step_list ul li {position: relative; width:25%; float: left; padding: 25px; box-sizing: border-box; text-align: center;} .sub_content_area .cont_box .bottom_warp .step_list ul li .img_box {background: url(../images/contents/step_bg.png) no-repeat; width: 188px; text-align: center; position: relative; height: 218px; margin: 0 auto;} .sub_content_area .cont_box .bottom_warp .step_list ul li .img_box .img_inner{ position: absolute; width: 100%; top: 50%; transform: translateY(-52%);} .sub_content_area .cont_box .bottom_warp .step_list ul li dt {font-size: 24px; color:#1f1f25; font-weight: 600;margin-top: 20px;} .sub_content_area .cont_box .bottom_warp .step_list ul li dd {font-size: 18px; color:#5f5f66;margin-top: 15px;} .sub_content_area .cont_box .bottom_warp .down{text-align: center;margin-top: 30px;} .sub_content_area .cont_box .bottom_warp .down .down_btn {width: 206px; height: 50px; line-height: 50px; display: block; font-size: 18px; background: #1f1f25; color: #fff; margin: 0 auto; position: relative;} .sub_content_area .cont_box .bottom_warp .down .down_btn a {z-index: 10; position: relative; display: block; width: 100%; height: 100%;} .sub_content_area .cont_box .bottom_warp .down .down_btn:before {background: #404046; content: ''; position: absolute;right: 0; left: 0; height: 100%; width: 0; z-index: 1;} .sub_content_area .cont_box .bottom_warp .down .down_btn:hover:before{width:100%;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s; transition: all 0.3s;} .history_wrap {width: 100%; background:#1c1c20;margin-top: 100px; position: relative;} .history_wrap:before {content: ''; position: absolute; width: 100%; height: 250px;top:-250px; background:url(../images/contents/history_bg.png) no-repeat; z-index: -1;} .history_wrap:after{content: ''; position: absolute; bottom: 0; width:579px; height: 1076px; background: url(../images/contents/history_pattern02.png); right:0;} .history_wrap .history_tit {margin:0 auto; margin-bottom: 150px; max-width: 1280px; width:100%;} .history_wrap .history_tit h2 {color:#fff; font-size: 72px; line-height: 50px;} .history_wrap .history_list {max-width:1280px; width:100%; margin:0 auto; position: relative; z-index: 10} .history_wrap .history_list:before {position: absolute;content: ''; background: url(../images/contents/history_logo.png) no-repeat;width: 104px; left: 50%; top: -103px; height: 104px;transform: translateX(-50%);} .history_wrap .history_list ul {position: relative; display: inline-block; width: 100%; padding-bottom: 80px;} .history_wrap .history_list ul:before {content: ''; position: absolute; top: 0; bottom: 0; width:1px; height: 100%; background: #c50d13; left: 50%;} .history_wrap .history_list ul:after{content: ''; position: absolute; top: 0; bottom: 0; width:374px; height: 310px; background: url(../images/contents/history_pattern01.png); left: -10%;} .history_wrap .history_list ul .align_right{float: right;box-sizing: border-box; clear: both; width: 50%; padding: 15px 0; text-align: left;} .history_wrap .history_list ul .align_left{float: left;box-sizing: border-box; clear: both; width: 50%; padding: 15px 0;text-align: right;} .history_wrap .history_list ul li dl { padding : 0 30px; position: relative; color: #fff;} .history_wrap .history_list ul .align_right dl:before {position: absolute; content: ''; width:11px; height: 11px; left: -5px; top:31px; background: #bd000f; border-radius: 50%;} .history_wrap .history_list ul .align_right dl:after {position: absolute; content: ''; width:17px; height: 17px; left: -9px; top:27px; border: 1px solid #bd000f; border-radius: 50%;} .history_wrap .history_list ul .align_right dl dd {padding-left: 20px;} .history_wrap .history_list ul .align_right dl dd:before {content: '-'; position: absolute; color:#fff; left: 4px;} .history_wrap .history_list ul .align_left dl:before {position: absolute; content: ''; width:11px; height: 11px; right: -6px; top:31px; background: #bd000f; border-radius: 50%;} .history_wrap .history_list ul .align_left dl:after {position: absolute; content: ''; width:17px; height: 17px; right: -10px; top:27px; border: 1px solid #bd000f; border-radius: 50%;} .history_wrap .history_list ul .align_left dl dd:before {content: '-'; position: absolute; color:#fff; right: 4px;} .history_wrap .history_list ul .align_left dl dd {padding-right: 20px;} .history_wrap .history_list ul li dl dt {font-size: 48px; color:#bd000f; font-weight: 600; font-family: nanumsquare,sans-serif;} .history_wrap .history_list ul li dl dd {position: relative; font-size: 18px; font-weight: 400; line-height: 31px;} /*서비스*/ .sub_content_area .cont_box .service_wrap {width:100%; margin-bottom: 80px; background: linear-gradient(-5deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 24%, rgb(237, 237, 241) 0px, rgb(237, 237, 241) 85%, rgb(255, 255, 255) 0px);} .sub_content_area .cont_box .service_wrap .service_inner {max-width: 1280px; width: 100%; margin:0 auto; height: auto;} .sub_content_area .cont_box .service_wrap .service_inner .con-width {width:100%; display: inline-block;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li {background: #fff; width: calc(25% - 15px); margin-right: 20px;float: left; padding: 50px 30px 150px;border: 1px solid #ddd; margin-bottom: 20px;height: 400px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(4n) {margin-right: 0} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(5) dt {font-size: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(7) dt {font-size: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(11) dt {font-size: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li dt {font-size: 24px; padding-bottom: 50px; font-weight: bold; position: relative;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li dt:after {content: ''; position: absolute; width:33px; height: 1px; background: #1f1f25; bottom: 25px; left: 0} .sub_content_area .cont_box .service_wrap .service_inner .con-width li dd {font-size: 18px; color:#5f5f66;line-height:30px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(1) {background: #fff url(../images/contents/sub_service_01.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(2) {background: #fff url(../images/contents/sub_service_02.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(3) {background: #fff url(../images/contents/sub_service_03.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(4) {background: #fff url(../images/contents/sub_service_04.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(5) {background: #fff url(../images/contents/sub_service_05.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(6) {background: #fff url(../images/contents/sub_service_06.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(6) {background: #fff url(../images/contents/sub_service_06.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(7) {background: #fff url(../images/contents/sub_service_07.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(8) {background: #fff url(../images/contents/sub_service_08.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(9) {background: #fff url(../images/contents/sub_service_09.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(10) {background: #fff url(../images/contents/sub_service_10.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(11) {background: #fff url(../images/contents/sub_service_11.png) no-repeat right 25px bottom 25px } .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(12) {background: #fff url(../images/contents/sub_service_12.png) no-repeat right 25px bottom 25px } /*오시는길*/ .sub_content_area .map_tit_box {width: 1280px; margin: 0 auto; border:1px solid #cacad3;box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);height: 260px; position: relative; top:-130px; background: #fff url(../images/contents/map_bg.png) no-repeat right 10px bottom 10px ;z-index: 10;padding:70px} .sub_content_area .map_tit_box li {width: calc(50% - 10px);float: left;line-height: 60px;} .sub_content_area .map_tit_box li:nth-child(2n - 1) {margin-right: 20px;} .sub_content_area .map_tit_box li dl {display: table-cell; font-size: 20px; color:#b6000e;width:100px;} .sub_content_area .map_tit_box li dt {display: table-cell; font-size: 18px; color: #5f5f66;} .cont_box .root_daum_roughmap_landing {width: 100% !important; padding:0; border:none;border-radius:0} .root_daum_roughmap {border:none; max-width:100%;border-radius:0} .root_daum_roughmap .wrap_controllers {display: none !important} /*솔루션 250401*/ .sub_content_area .cont_box {padding-top: 100px;} .sub_content_area .cont_box .solution_warp {width:100%;} .sub_content_area .cont_box .solution_warp .solution_top {background: transparent linear-gradient(120deg, #313131 50%, #ffffff 50%) 0% 0% no-repeat padding-box;} .sub_content_area .cont_box .solution_warp .solution_inner {max-width: 1280px; width:100%; margin:0 auto; display: flex;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box { width:40%; margin: auto;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .gioez_cms {width:513px; height: 273.6px; background: url(../images/contents/250401_GIOEZ_CMS.png) no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box {width:512px; height: 408px; padding-left: 20px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2 {font-size: 36px; color: #1f1f25; margin-bottom: 60px; position: relative;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2:after {position: absolute; content: ''; left: 0; width:36px; height: 1px; background: #1f1f25;bottom: -30px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box dt {font-size: 24px; color:#5f5f66; font-weight: 600; margin-bottom: 20px; word-break: keep-all;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box dd {font-size: 18px; color:#5f5f66; line-height: 38px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area {width: 100%; height: 20px; display: flex; justify-content: center; gap: 10px; margin-top: 20px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info {width: 50%; height: 78px; border: 1px solid var(--unnamed-color-dedee7); background: #1C1C1F 0% 0% no-repeat padding-box; border: 1px solid #DEDEE7; border-radius: 10px; opacity: 1; padding: 15px; display: flex; gap: 15px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_icon {width: 46px; height: 46px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_text {width: 130px; text-align: left; font: normal normal bold 13px/22px Noto Sans CJK KR; letter-spacing: -0.8px; color: #FFFFFF; text-transform: uppercase; opacity: 1; display: flex; align-items: center;} .sub_content_area .cont_box .solution_warp .solution_explanation {width: 100%; display: flex; align-items: center; justify-content: center; padding: 100px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list {width: 1280px; height: 300px; display: flex; align-items: center; justify-content: center; gap: 27px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content {width: 300px; height: 100%; padding-top: 56px; position: relative;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content .explanation_icon {position: absolute; left: 50%; top: 3%; transform: translate(-50%); background-color: rgb(255, 255, 255); width: 88px; height: 88px; border-radius: 13px; box-shadow: 0px 3px 6px #00000029;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content .explanation_icon img {position: absolute; left: 50%; top: -6%; transform: translate(-50%);} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content .explanation_box {display: block; width: 100%; height: 250px; padding: 60px 24px 24px 24px; background-color: #F8F8F8; border: 1px solid #DEDEE7;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dt{display: block; width: 100%; height: 50px; border-bottom: 1px solid #DEDEE7; text-align: center; font: normal normal bold 17px/40px Noto Sans CJK KR; color: #1F1F25; letter-spacing: -0.8px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dd{display: block; width: 100%; height: 120px; text-align: left; font: normal normal 16px/25px Noto Sans CJK KR; color: #5F5F66; letter-spacing: -0.8px; display: flex; padding-top: 15px;} .sub_content_area .cont_box .solution_warp .solution_skills {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 100px; background-image: url(../images/contents/250401_59300.png); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; color: #FFFFFF;} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title {width: 1280px; height: 70px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title .title {font: normal normal bold 34px/43px Noto Sans CJK KR; letter-spacing: -0.8px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list {width: 1280px; height: 420px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 10px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content {width: 420px; height: 130px; background: transparent linear-gradient(107deg, #FFFFFF1A 0%, #FFFFFF05 100%) 0% 0% no-repeat padding-box; opacity: 1; padding: 24px; display: flex; align-items: center; justify-content: space-between;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area {width: 260px; height: 82px; display: flex; flex-direction: column;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text_title {width: 100%; height: 35px; font: normal bold 18px/25px Noto Sans CJK KR; color: #ffffff; letter-spacing: -0.8px; display: flex; align-items: center;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text {width: 100%; height: 47px; font: normal normal 14px/21px Noto Sans CJK KR; color: #D4D4D4; letter-spacing: -0.8px; display: flex;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon1 {width: 80px; height: 82px; background: url(../images/contents/250401_03_01.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon2 {width: 80px; height: 82px; background: url(../images/contents/250401_03_02.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon3 {width: 80px; height: 82px; background: url(../images/contents/250401_03_03.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon4 {width: 80px; height: 82px; background: url(../images/contents/250401_03_04.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon5 {width: 80px; height: 82px; background: url(../images/contents/250401_03_05.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon6 {width: 80px; height: 82px; background: url(../images/contents/250401_03_06.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon7 {width: 80px; height: 82px; background: url(../images/contents/250401_03_07.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon8 {width: 80px; height: 82px; background: url(../images/contents/250401_03_08.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon9 {width: 80px; height: 82px; background: url(../images/contents/250401_03_09.png); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 100px;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title {width: 1280px; height: 160px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .title {display: block; font: normal normal bold 34px/43px Noto Sans CJK KR; letter-spacing: -0.8px; margin-bottom: 10px; color: #1F1F25;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .explanation {display: block; font: normal normal bold 24px/41px Noto Sans CJK KR; letter-spacing: -0.8px; color: #5F5F66; margin-bottom: 20px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list {width: 1280px; height: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content {width: 406px; height: 390px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_img {width: 100%; padding-bottom: 75%; background-color: #F5F5F9; border: 1px solid #DEDEE7;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon1 {background-image: url(../images/contents/250401_04_01.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon2 {background-image: url(../images/contents/250401_04_02.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon3 {background-image: url(../images/contents/250401_04_03.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon4 {background-image: url(../images/contents/250401_04_04.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon5 {background-image: url(../images/contents/250401_04_05.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon6 {background-image: url(../images/contents/250401_04_06.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area {width: 100%; height: 80px; background-color: rgb(255, 255, 255); border: 1px solid #DEDEE7; border-top: none; padding: 10px; display: flex; align-items: center; justify-content: space-between;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text {width: 250px; height: 53px; display: flex; flex-direction: column; text-align: left;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .title {width: 100%; height: 28px; font: normal normal bold 16px/28px Noto Sans CJK KR; color: #1F1F25; letter-spacing: -0.8px; text-indent: 4px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .hash_tag {width: 100%; height: 25px; font: normal normal normal 11px/21px Noto Sans CJK KR; color: #1F1F25; letter-spacing: -0.8px; text-indent: 4px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_01.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_2 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_02.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_03.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_2 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_04.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_03.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_2 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_05.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_03.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_2 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_04.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon5_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_06.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_1 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_07.svg); background-repeat: no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_2 {width: 53px; height: 53px; border: 1px solid #DEDEE7; border-radius: 30px; background-image: url(../images/contents/250401_05_08.svg); background-repeat: no-repeat; background-size: cover;} /*포트폴리오*/ .sub_content_area .cont_box .port_wrap {width:100%;} .sub_content_area .cont_box .port_wrap .port_inner {width:100%; max-width: 1280px; margin: 0 auto;} .sub_content_area .cont_box .port_wrap .port_inner > ul {display: flex; flex-wrap: wrap;} .sub_content_area .cont_box .port_wrap .port_inner ul li {width:calc(33.3% - 10px); border:1px solid #ddd; float: left; margin-right: 15px; margin-bottom: 45px;position: relative;overflow: hidden;-webkit-perspective: 50em;perspective: 50em;} .sub_content_area .cont_box .port_wrap .port_inner ul li * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;} .sub_content_area .cont_box .port_wrap .port_inner ul li .two {opacity: 1;width: 100%;-webkit-transform-origin: 50% 0%;-ms-transform-origin: 50% 0%;transform-origin: 50% 0%;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner {position: absolute;top: 0;left: 0; bottom: 0;width: 100%;z-index: 1;opacity: 0;} /*text_box 배경*/ .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg{ background: rgba(0,0,0,0.8); width: 100%; height: 100%;z-index: -1;padding: 40px 30px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner{opacity: 1} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(3n) {margin-right: 0;} .sub_content_area .cont_box .port_wrap .port_inner ul:after { content: ''; display: block; clear: both;} .sub_content_area .cont_box .port_wrap .port_inner ul li .img_box {overflow: hidden;position: relative;} .sub_content_area .cont_box .port_wrap .port_inner ul li .img_box img {display: block; width:100%;backface-visibility: hidden; border-bottom: 1px solid #ddd; max-height: 294px} .sub_content_area .cont_box .port_wrap .port_inner ul li.preparing .img_box img.logo {position: absolute; bottom: 5.5%; left: 50%; transform: translateX(-50%); border-bottom: 0;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box {padding:20px 15px; height: 112px;bottom: 0; width:100%;background: #fff;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box p {font-size: 20px; color:#1f1f25; font-weight: 600;float: left; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;overflow: hidden;width:100%; padding-bottom: 15px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li{text-align: right; width: auto; padding: 0 11px; height: 32px; margin-bottom: 7px; overflow: inherit; border: 1px solid #d81f25;border-radius: 25px;margin-right: 10px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li p {color: #d81f25; text-align: center; width: 100%; font-size: 14px; line-height: 32px;font-weight: 500;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner p {font-size: 20px; color:#fff; font-weight: 600;float: left;width:100%; padding-bottom: 15px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag { margin-bottom: 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li {text-align: right; width: auto; padding: 0 13px; height: 32px; margin-bottom: 0px; overflow: inherit; border: 1px solid #fff;border-radius: 25px;margin-right: 10px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li p { text-align: center; width: 100%; font-size: 14px; line-height: 32px;font-weight: 500;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .page {font-size: 18px; font-weight: 400; color:#9c9ca4} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li {width: 100%; border: none; padding-bottom: 10px; margin-bottom: 0;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dl {display: table-cell; font-size: 16px; color:#ff0000; width:85px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dt{display: table-cell; font-size: 16px;color:#fff; word-break: keep-all;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn {width: 206px;display: block;height: 48px;background: #d81f25;line-height: 48px;text-align: center; color: #fff; margin:0 auto; position: relative; margin-top: 22px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn:before{background: #bd000f;height: 100%; left: 0; top: 0; width: 0;content: ''; position: absolute; z-index: 1;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn:hover::before{width:100%;-webkit-transition: all 0.3s; -moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn a {z-index: 10; position: relative; color:#fff; font-size: 16px; display: block; width: 100%; height: 100%;} /*리뉴얼 진행중 버튼*/ .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn.ing {background: transparent; border: 1px solid #fff; } .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn.ing:before{background: #000;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn.ing a {cursor: default;} /*포트폴리오 hover시 효과*/ .sub_content_area .cont_box .port_wrap .port_inner ul li:before, .sub_content_area .cont_box .port_wrap .port_inner ul li:after { height: 1px; width: 0%; position: absolute; content: ''; background-color: #fff; z-index: 10; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; opacity: 0.8; } .sub_content_area .cont_box .port_wrap .port_inner > ul > li:before { top: 10px; left: 0; } .sub_content_area .cont_box .port_wrap .port_inner > ul > li:after { bottom: 10px; right: 0; } .sub_content_area .cont_box .port_wrap .port_inner > ul > li:hover:before, .sub_content_area .cont_box .port_wrap .port_inner > ul > li:hover:after{ width:100%; opacity:0.3; } .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:after { width: 1px; height: 0; } .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:before { right: 10px; top: 0; } .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:after { left: 10px; bottom: 0; } .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg:after { position: absolute; content: ''; background-color: #fff; z-index: 10; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; opacity: 0.8; } .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:after, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:after { height: 100%; } .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:before, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:after, .sub_content_area .cont_box .port_wrap .port_inner ul li:hover .txt_inner .inner_bg:after { opacity: 0.3; } /*제작안내*/ .sub_content_area .tit_wrap {max-width: 1280px; width:100%; margin:0 auto; position: relative;padding: 50px 0;} .sub_content_area .tit_wrap .tit_inner {display: inline-block; width:100%;} .sub_content_area .tit_wrap .tit_inner .img_box {position: absolute;top: 50%; width: 60%; transform: translateY(-55%);} .sub_content_area .tit_wrap .tit_inner .img_box img {max-width: 100%;} .sub_content_area .tit_wrap .tit_inner .tit_box {float: right; padding-right: 30px;} .sub_content_area .tit_wrap .tit_inner .tit_box h2 {font-size: 36px; color:#1f1f25; margin-bottom: 80px;position: relative;} .sub_content_area .tit_wrap .tit_inner .tit_box h2::after {content: ''; position: absolute;width: 36px; height: 1px; background:#1f1f25; bottom: -40px; left: 0;} .sub_content_area .tit_wrap .tit_inner .tit_box p {font-size: 18px; color:#5f5f66; line-height: 35px;} .sub_content_area .list_warp {width:100%; height: 441px; background: url(../images/contents/list_bg.jpg) no-repeat; background-size: cover;} .sub_content_area .list_warp .list_inner {width:100%; max-width: 1280px; margin:0 auto;} .sub_content_area .list_warp .list_inner .step_list ul {display: inline-block;width: 100%;transform: translateY(50%); position: relative;} .sub_content_area .list_warp .list_inner .step_list ul::before{content: ''; position: absolute; width:80%; height: 2px; background: #fff; top: 50%; left: -80%;margin-top: -23px; margin-left: 44px;} .sub_content_area .list_warp .list_inner .step_list ul::after{content: ''; position: absolute; width:80%; height: 2px; background: #fff; top: 50%; right: -80%;margin-top: -23px; margin-right: 50px;} .sub_content_area .list_warp .list_inner .step_list ul li{position: relative; width:16.6%; float: left; padding: 25px; box-sizing: border-box; text-align: center;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box {background: url(../images/contents/list_bg_02.png) no-repeat; width: 127px; text-align: center; position: relative; height: 147px; margin: 0 auto;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box img {padding-bottom: 15px} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box {background: url(../images/contents/list_bg_03.png) no-repeat;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box img {transition: all 0.5s ease-out;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box:after {content: ''; position: absolute; background: url(../images/contents/list_next.png) no-repeat; width:73px; height: 15px; right: -71px; top: 50%; margin-top: -14px;transition: all 0.5s ease-out;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box:after {background: url(../images/contents/list_next_on.png) no-repeat;} .sub_content_area .list_warp .list_inner .step_list ul li:last-child .img_box:after {display: none;} .sub_content_area .list_warp .list_inner .step_list ul li:first-child .img_box {background: url(../images/contents/list_bg_01.png) no-repeat; width: 127px; text-align: center; position: relative; height: 147px; margin: 0 auto;} .sub_content_area .list_warp .list_inner .step_list ul li.active:first-child .img_box {background: url(../images/contents/list_bg_01_on.png) no-repeat;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box .img_inner {position: absolute; width: 100%; top: 50%; left: 50%; transform:translate(-50%, -50%);transition: all 0.5s ease-out;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box .img_inner {position: absolute; width: 100%; top: 50%; left: 50%; transform:translate(-50%, -65%);} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(1) .img_box .img_inner {background: url(../images/contents/list_01.png) no-repeat; width: 46px; height: 55px;} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(2) .img_box .img_inner {background: url(../images/contents/list_02.png) no-repeat; width:42px;height: 40px;} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(3) .img_box .img_inner {background: url(../images/contents/list_03.png) no-repeat; width: 43px; height: 42px} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(4) .img_box .img_inner {background: url(../images/contents/list_04.png) no-repeat;width: 58px; height: 49px;} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(5) .img_box .img_inner {background: url(../images/contents/list_05.png) no-repeat;width:52px; height: 45px;} .sub_content_area .list_warp .list_inner .step_list ul li:nth-child(6) .img_box .img_inner {background: url(../images/contents/list_06.png) no-repeat;width:33px; height: 55px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(1) .img_box .img_inner {background: url(../images/contents/list_01_on.png) no-repeat; width: 46px; height: 55px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(2) .img_box .img_inner {background: url(../images/contents/list_02_on.png) no-repeat; width:42px;height: 40px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(3) .img_box .img_inner {background: url(../images/contents/list_03_on.png) no-repeat; width: 43px; height: 42px} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(4) .img_box .img_inner {background: url(../images/contents/list_04_on.png) no-repeat;width: 58px; height: 49px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(5) .img_box .img_inner {background: url(../images/contents/list_05_on.png) no-repeat;width:52px; height: 45px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:nth-child(6) .img_box .img_inner {background: url(../images/contents/list_06_on.png) no-repeat;width:33px; height: 55px;} .sub_content_area .list_warp .list_inner .step_list dt{font-size: 18px; color: #fff; margin-top: 20px;transition: all 0.5s ease-out;font-weight: 400;} .sub_content_area .list_warp .list_inner .step_list ul li.active dt {font-size: 18px; font-weight: 400;color:#ff0000;} .sub_content_area .info_wrap {width:100%;} .sub_content_area .info_wrap .info_inner {max-width: 1280px; width:100%; margin: 0 auto; height: 100%; font-size: 0; position: relative;} .sub_content_area .info_wrap .info_inner::after {display: block; content: ''; clear: both;} .sub_content_area .info_wrap .info_inner .left_tit {width:40%; float: left; position: absolute; top:50%; transform: translateY(-50%);} .sub_content_area .info_wrap .info_inner .left_tit .tit_box {text-align: center;} .sub_content_area .info_wrap .info_inner .left_tit .tit_box h3 {font-size:30px; color:#1f1f25; display: inline-block; position: relative; font-weight: 500;} .sub_content_area .info_wrap .info_inner .left_tit .tit_box h3::before{position: absolute;content: ''; background: url(../images/contents/info_icon.png) no-repeat; width:39px; height: 36px;left: -39px; top: -36px;} .sub_content_area .info_wrap .info_inner .left_tit .tit_box h3::after{content: ''; position: absolute; width:36px; height: 1px; background:#1f1f25; bottom: 7px;right: -45px;} .sub_content_area .info_wrap .info_inner .right_tit {width:60%;float: right;position: relative;} .sub_content_area .info_wrap .info_inner .right_tit img {width:100%;} .sub_content_area .info_wrap .info_inner .right_tit .tit_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .sub_content_area .info_wrap .info_inner .right_tit .tit_box li {font-style: italic;} .sub_content_area .info_wrap .info_inner .right_tit .tit_box dl {font-size:25px; display: table-cell; width: 100px; color:#fff; font-family: nanumsquare,sans-serif;font-weight: bold;} .sub_content_area .info_wrap .info_inner .right_tit .tit_box dt {font-size: 25px;display: table-cell; padding-left: 20px;color:#fff; font-family: nanumsquare,sans-serif;} /*공지사항 list*/ .list_info {width: 100%;margin: 0 auto;max-width: 1280px;margin-bottom: 40px;} .list_info .cnt_info{float:left; color:#343434; font-size:14px;line-height: 40px;} .list_info .cnt_info .number{color:#bd000f;} .list_info .info{float:right; color:#ff9800; font-size:14px;} .list_info .list_search{float:right; font-size:0;} .list_info .list_search select, .list_info .list_search input[type="text"]{margin-left:4px; height:41px; color:#616161; font-size:14px; border:1px solid #c8d1db; box-sizing:border-box; border-radius:0px;} .list_info .list_search select{padding: 0 61px 0 11px;} .list_info .list_search input[type="text"]{padding:0 10px; width:320px;} .list_info .list_search .btn_search{display:inline-block; margin-left:4px; width:100px; height:40px; line-height:40px; color:#fff; font-size:14px; text-align:center; background:#bd000f; border-radius:0px;} /*셀렉박스 화살표*/ .list_info .list_search select{-webkit-appearance: none;-moz-appearance: none;appearance: none; background: url(../images/common/noti_arrow.png) no-repeat 90% 50%;} .table-wrap {overflow: hidden;/*overflow-x: auto;*/width: 100%;max-width: 1280px; margin:0 auto; margin-bottom: 20px;} .table-wrap table {position: relative; left: -1px; table-layout: fixed; width:100%;border-top: 2px solid #1f1f25;} .table-wrap tr.notice{background:#fbfbfb;} .table-wrap th {/* padding: 1rem; */border-bottom: 1px solid #efefef;/* background-color: #f9f9f9; */font-weight: 500;color: #222;text-align: center;line-height: 60px;font-size: 1.4rem;} .table-wrap td {border-bottom: 1px solid #efefef;font-size: 16px;text-align: center;line-height: 90px;color: #666;font-weight:200;position: relative;letter-spacing: -0.5px;} .table-wrap td span{font-weight:500;letter-spacing:-1px;margin-right: 5px;} .table-wrap td span.yesan{ color:#3e67b1} .table-wrap td span.sapgyo{ color:#0cc2bc;} .table-wrap td.open, .table-wrap td.finish{ color:#3e67b1; font-weight:300;} .table-wrap td p.ico-noti:after{content:'공지';color:#fff;border:1px solid #076b60;box-sizing:border-box; border-radius:3px; background:#0a9485;position: relative;padding: 2px 8px;} .table-wrap thead {background:#f8f8fb;} .table-wrap tbody th {padding: 0.7rem 1rem; border-left: 1px solid #ddd; font-size: 0.9rem;} .table-wrap tbody th + td.txt-left + td.txt-left, .table-wrap tbody th + td {padding: 0.7rem 1rem; border-left: 1px solid #ddd; border-color: #ddd;} .table-wrap tbody th + td input.form-textbox {height: 2rem;} .table-wrap tbody th + td.txt-left .bul4 {margin: 0.5rem;} .table-wrap + p .btn-m {margin-top: 1.5rem;} .table-wrap .tstyle-list tr:hover {background: #f8f8fb} .table-wrap .tstyle-list td.subject {color: #666;text-align: left;padding-left: 16px;} .table-wrap .tstyle-list td.subject a {display: inline-block;overflow: hidden;max-width: 92%;text-overflow: ellipsis;white-space: nowrap;vertical-align: top;color: #666;/* position: relative; */ } .table-wrap .tstyle-list td.subject a.add_file {background:url(../images/bbs/ico-addfile.png) right center no-repeat; padding-right:25px;} .table-wrap .tstyle-list td.subject a.secret {background:url(../images/contents/secret-ico.png) right center no-repeat; padding-right:25px;} .table-wrap .tstyle-list td.subject a:hover{ text-decoration:underline;} .table-wrap .tstyle-list td a.step01, .table-wrap .tstyle-list td a.step02, .table-wrap .tstyle-list td a.step03{position:relative; padding:6% 10%; color:#fff; font-size:1.3rem; } .table-wrap .tstyle-list td a.step01{ background:#ef7c0b;} .table-wrap .tstyle-list td a.step02{ background:#3e67b1;} .table-wrap .tstyle-list td a.step03{ background:#666666;} table tr.nodate td{ text-align:center !important;} .txt-right + .table-wrap {margin-top: 0.5rem;} .table-wrap col.label {width: 11.7rem;} .table-wrap .tstyle-list .num, .table-wrap .tstyle-list .group, .table-wrap .tstyle-list .file, .table-wrap .tstyle-list .state {width: 12rem;} .table-wrap .tstyle-list .admin {width: 10rem;} .table-wrap .tstyle-list .name, .table-wrap .tstyle-list .open{ width:6rem;} .table-wrap .tstyle-list .answer, .table-wrap .tstyle-list .date, .table-wrap .tstyle-list .date-end {width: 12rem;} .table-wrap .tstyle-list .ing, .table-wrap .tstyle-list .thumb {width: 8rem;} .table-wrap .tstyle-list .booking, .table-wrap .tstyle-list .org {width: 12rem;} .table-wrap .tstyle-list .type{ width:9rem;} /* paging */ .paging_wrap{position:relative; padding:0;text-align:center;min-height:30px;margin: 50px 0;} .paging{} .paging ol{display:inline-block;padding:0 14px; vertical-align:top;} .paging ol li{display:inline; } .paging ol li a:hover {color:#d81f25;} .paging ol li a, .paging ol li strong{float:left;display:block;width: 35px;height: 35px;font-size:14px;text-align:center;line-height:35px;color: #999; margin:0 1.5px;} .paging ol li .current{cursor:default;color: #fff;font-weight:400; background: #222; border:1px solid #222;} .paging a{display:inline-block;width:35px;height:35px;font-size:0;background-repeat:no-repeat;background-position:center center; vertical-align:top; border: 1px solid #c9c9c9;} .paging .btn_page_first{background-image:url(../images/common/btn_page_first.png); background-color: #fbfbfb;} .paging .btn_page_prev{background-image:url(../images/common/btn_page_prev.png); background-color: #fbfbfb;} .paging .btn_page_next{background-image:url(../images/common/btn_page_next.png); background-color: #fbfbfb;} .paging .btn_page_end{background-image:url(../images/common/btn_page_end.png);background-color: #fbfbfb;} /*공지사항 read*/ .common_detail_area {margin:0 auto; width:100%; max-width: 1280px;} .common_detail_area .detail_content .subject{padding:24px 45px; border-top:2px solid #1f1f25; border-bottom:1px solid #dedee7;} .common_detail_area .detail_content .subject p{color:#1f1f25; font-size:24px;text-align: center; font-weight: 600;} .common_detail_area .detail_content .info{padding:24px 45px 24px 20px; border-bottom:1px solid #dedee7;text-align: center;} .common_detail_area .detail_content .info span{display:inline-block; position:relative; margin:0 18px; color:#9c9ca4; font-size:14px;} .common_detail_area .detail_content .info span:after{display:block; content:""; position:absolute; right:-20px; top:3px; width:1px; height:12px; background:#c3c3c7;} .common_detail_area .detail_content .info .name:after{display: none;} .common_detail_area .detail_content .detail{padding:50px 40px 90px 40px} .common_detail_area .detail_content .detail p{margin:10px 0; line-height:22px; color:#4a4a4a; font-size:16px;} .common_detail_area .detail_content .attatch_files{margin-bottom:3px; padding:25px 45px;border:1px solid #dedee7; background:#f3f3f7;} .common_detail_area .detail_content .attatch_files .title{display:inline-block; position:relative; color:#1f1f25; font-size: 16px;} .common_detail_area .detail_content .attatch_files ul{margin-top:20px;} .common_detail_area .detail_content .attatch_files ul li + li{margin-top:3px;} .common_detail_area .detail_content .attatch_files ul li a{color:#5f5f66; font-size:16px; padding-left: 23px; position: relative;} .common_detail_area .detail_content .attatch_files ul li a:before {content: ''; position: absolute;background:url(../images/contents/notice_file.png);left: 0;width: 16px; height: 19px; margin-top: 1px;} .common_detail_area .detail_content .attatch_files ul li a:hover{text-decoration:underline;} .common_btn_area{padding:0 15px; font-size:0; text-align:center;margin:55px 0;} .common_btn_area .btn{display:inline-block; padding-left: 20px; height:40px; line-height:40px; width:120px;font-size:18px; color:#fff; background: #1f1f25 url(../images/contents/notice_list.png) no-repeat 22px 15px;} .common_form_area table{width:100%; table-layout:fixed; border-top:2px solid #182d57; border-bottom:1px solid #182d57;} .common_form_area table th, .common_form_area table td{height:60px; vertical-align:middle; border-top:1px solid #ccc;} .common_form_area table th{color:#182d57; font-size:16px; border-right:1px solid #ccc;} .common_form_area table td > div{padding:0 12px;} .common_form_area table td input[type="text"], .common_form_area table td input[type="password"]{float:left; padding:0 10px; height:40px; font-size:13px; box-sizing:border-box;} .common_form_area table td .btn, .common_form_area table td .guide{float:left; margin-left:8px; line-height:40px; font-size:14px;} .common_form_area table td .btn{width:92px; height:40px; color:#fff; background:#3a90f7; border-radius:3px;} .common_form_area table td .guide{color:#f37e00;} /*자주하는 질문*/ .cont_box .category { width: 100%;max-width: 1280px; margin:0 auto;position: relative; padding-bottom: 50px;} .cont_box .category ul { font-size:0;} .cont_box .category .faq-list {font-size: 15px; margin-bottom: 35px;border-top: 1px solid #1f1f25;} .cont_box .category .faq-list .subject {border-bottom: 1px solid #ddd; padding:3% 3% 3% 4%; position: relative; cursor: pointer;} .cont_box .category .faq-list li{position: relative;} .cont_box .category .faq-list li .subject a {display: block;position: relative; font-size: 18px; padding-left: 40px;padding-right: 80px; color:#1f1f25} .cont_box .category .faq-list li .subject strong { font-size: 18px; position:absolute; top:50%; transform: translateY(-58%);font-size:24px; color:#ddd; font-family: nanumsquare,sans-serif;} .cont_box .category .faq-list li .subject.on strong {color:#bd000f} .cont_box .category .faq-list li .subject a:after {content: ''; position: absolute; background:url(../images/contents/faq_arrow.png ) no-repeat; width:32px;height: 32px; right: 30px; top:50%; transform: translateY(-50%);} .cont_box .category .faq-list li .subject.on a:after {content: ''; position: absolute; background:url(../images/contents/faq_arrow.png ) no-repeat; width:32px;height: 32px; right: 30px; top:50%; transform: translateY(-50%) rotate(-180deg);transition-duration: 0.5s} .cont_box .category .faq-list li .subject a strong{margin-right: 15px; font-size: 18px} .cont_box .category .faq-list li .hide_cont {display: none; position:relative; background: #f8f8f8;border-bottom: 1px solid #ddd; padding: 4.5% 3% 4.5% 4%; } .cont_box .category .faq-list li .hide_cont .answer {font-size: 16px; color:#5f5f66; position: relative;} .cont_box .category .faq-list li .hide_cont .answer p{padding-left: 40px; padding-right: 80px;} .cont_box .category .faq-list li .hide_cont .answer p strong {color:#d81f25; font-weight: normal} .cont_box .category .faq-list li .hide_cont .answer p em {font-style: normal; text-decoration: underline; color:#222;} /*에러페이지*/ .wrap{margin: 200px auto; width:100%;} .wrap .error_img{text-align: center;} .wrap .error_txt{text-align: center; margin-top: 80px;} .wrap .error_txt strong{font-size: 30px; color:#1f1f25; } .wrap .error_txt strong span{color:#bd000f;} .wrap .error_txt p{font-size: 18px; color: #5f5f66; margin-top: 35px;} .wrap .error_btn{ width: 340px; margin: 95px auto;} .wrap .error_btn .go_prev_page, .wrap .error_btn .go_main{width:160px;display: block;height: 48px;line-height: 48px;text-align: center;font-size: 18px;position: relative;} .wrap .error_btn .go_prev_page{background: #1f1f25;color: #fff; float:left;} .wrap .error_btn .go_main{background: #ff0000;color: #fff; float:right; } .wrap .error_btn a{z-index: 10; position: relative;} .wrap .error_btn .go_main::before{background: #bd000f;height: 100%; left: 0; top: 0; width: 0;content: ''; position: absolute;z-index: 1;} .wrap .error_btn .go_main:hover::before, .wrap .error_btn .go_prev_page:hover::before{width:100%;-webkit-transition: all 0.3s; -moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} .wrap .error_btn .go_prev_page::before{background: #464650;height: 100%; left: 0; top: 0; width: 0;content: ''; position: absolute;z-index: 1;} @media screen and (max-width:1300px){ .sub_visual_area .page_title {width:100%; padding-left: 50px; padding-top: 50px;} .sub_visual_area .breadcrumb {padding : 0 30px;} .sub_content_area .sub_tit {padding:40px 30px;} .sub_content_area .sub_tit h2 {font-size: 36px;} .sub_content_area .sub_tit p {font-size: 18px;} /*회사소개*/ .sub_content_area .cont_box .top_warp{padding: 0 30px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box p {font-size: 30px; left: 20px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2 {font-size: 30px;margin-bottom: 50px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2:after {bottom: -25px;} .sub_content_area .cont_box .top_warp .inner .right_img_box img {max-width: 100%;} .sub_content_area .cont_box .top_warp .inner .right_img_box .p_img{display: block;} .sub_content_area .cont_box .top_warp .inner .right_img_box .m_img{display: none;} .history_wrap:after{background: url(../images/contents/history_pattern02_t.png);width:452px; height: 755px;} .history_wrap .history_list ul:after {background: url(../images/contents/history_pattern01_t.png);left: 0;width:281px; height: 233px;} .history_wrap .history_tit {padding: 0 15px;} .history_wrap .history_tit h2 {font-size: 46px;} /*서비스*/ .sub_content_area .cont_box .service_wrap {margin-top:0; margin-bottom: 50px;} .sub_content_area .service_wrap .service_inner {padding:30px 25px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li{width: calc(33.33% - 15px);} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(4n){margin-right: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(3n){margin-right: 0;} /*오시는길*/ .sub_content_area .map_tit_box {width: calc(100% - 20px); height: 210px;padding: 45px 80px;} .sub_content_area .map_tit_box li dt {line-height: 23px} .sub_content_area .map_tit_box li dl {} /*솔루션 250401*/ .sub_content_area .cont_box .solution_warp{padding: 0 30px;} .sub_content_area .cont_box .solution_warp .solution_top { background: unset;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .img_box p {font-size: 30px; left: 20px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2 {font-size: 30px;margin-bottom: 50px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2:after {bottom: -25px; left: 288px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box img {max-width: 100%;} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box .p_img{display: block;} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box .m_img{display: none;} .sub_content_area .cont_box .solution_warp .solution_inner {display: block;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box { width:612px; margin: auto; margin-bottom: 50px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box {width:612px; padding-left: 0px; margin: auto; text-align: center;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_text {width: 80%;} .sub_content_area .cont_box .solution_warp .solution_explanation {width: 100%; display: flex; align-items: center; justify-content: center; padding: 0px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list {width: 650px; height: 620px; display: flex; align-items: center; justify-content: space-between; flex-direction: column; flex-wrap: wrap; gap: 2px; margin-bottom: 40px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content {width: 300px; height: 305px;} .sub_content_area .cont_box .solution_warp .solution_skills {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 100px; background-color: rgb(155, 151, 151);} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title {width: 1280px; height: 70px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center;} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title .title {font: normal normal bold 34px/43px Noto Sans CJK KR; letter-spacing: -0.8px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list {width: 650px; height: 600px; flex-direction: column;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content {width: 315px; height: 110px; padding: 16px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area {width: 211px; height: 72px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text_title {width: 100%; height: 32px; font: normal bold 16px/25px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text {width: 100%; height: 40px; font: normal normal 12px/21px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon1 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon2 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon3 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon4 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon5 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon6 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon7 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon8 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon9 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_instance {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 100px;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title {width: 1280px; height: 160px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .title {display: block; font: normal normal bold 34px/43px Noto Sans CJK KR; letter-spacing: -0.8px; margin-bottom: 10px;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .explanation {font: normal normal bold 24px/41px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list {width: 650px; height: 960px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content {width: 310px; height: 300px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_img {width: 100%; padding-bottom: 75%; background-color: #F5F5F9; border: 1px solid #DEDEE7;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon1 {background-image: url(../images/contents/250401_04_01.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon2 {background-image: url(../images/contents/250401_04_02.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon3 {background-image: url(../images/contents/250401_04_03.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon4 {background-image: url(../images/contents/250401_04_04.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon5 {background-image: url(../images/contents/250401_04_05.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon6 {background-image: url(../images/contents/250401_04_06.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area {width: 100%; height: 64px; background-color: rgb(255, 255, 255); border: 1px solid #DEDEE7; border-top: none;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text {width: 186px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .title {height: 26px; font: normal normal bold 16px/26px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .hash_tag {height: 21px; font: normal normal normal 11px/20px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_2 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_2 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_2 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_2 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon5_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_1 {width: 44px; height: 44px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_2 {width: 44px; height: 44px;} /*포트폴리오*/ .sub_content_area .cont_box .port_wrap {padding:0 25px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box p {font-size: 18px; padding-bottom: 8px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li {padding:0 9px; margin-right: 5px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li p {font-size: 13px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box {height: 100px; padding:13px 15px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg {padding:20px 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag {margin-bottom: 10px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li {padding:0 10px; margin-right: 5px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li p {font-size: 13px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .page{font-size: 16px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dl{font-size: 14px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dt{font-size: 14px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn{width:180px; height: 43px; line-height: 43px; margin-top: 10px;} /*제작안내*/ .sub_content_area .tit_wrap {padding:50px 25px;} .sub_content_area .tit_wrap .tit_inner .img_box {width:55%} .sub_content_area .tit_wrap .tit_inner .tit_box h2 {font-size: 32px; margin-bottom: 50px;} .sub_content_area .tit_wrap .tit_inner .tit_box h2::after { bottom: -25px;} .sub_content_area .tit_wrap .tit_inner .tit_box p {font-size: 15px;} .sub_content_area .list_warp .list_inner {padding:0 25px;} .sub_content_area .list_warp {height: 100%; background: url(../images/contents/list_bg.jpg) no-repeat center;} .sub_content_area .list_warp .list_inner .step_list ul {transform: none} .sub_content_area .list_warp .list_inner .step_list ul li {padding:100px 25px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box {background-size: 100%;width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:first-child .img_box {background-size: 100%;width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li:first-child .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li:last-child .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box:after {background-size: 60px 12px; margin-top: -11px; right: -71px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box:after {background-size: 60px 12px; margin-top: -11px; right: -71px;} .sub_content_area .list_warp .list_inner .step_list ul::after {display: none;} .sub_content_area .list_warp .list_inner .step_list ul::before {display: none;} .sub_content_area .list_warp .list_inner .step_list ul li:first-child .img_box:before{content: '';position: absolute; width: 200px; height: 2px; background: #fff; top: 50%; right: 0; margin-top: -1px; margin-right: 50px; left: -198px;} .sub_content_area .list_warp .list_inner .step_list ul li:last-child .img_box:before {content: '';position: absolute; width: 200px; height: 2px; background: #fff; top: 50%; right: -199px; margin-top: -1px; } .sub_content_area .info_wrap .info_inner .right_tit .tit_box {width:70%;padding-left: 7%;} /*공지사항 list*/ .list_info {padding:0 25px;} .table-wrap {padding: 0 25px;} /*공지사항 read*/ .common_detail_area {padding:0 25px;} /*자주하는 질문*/ .cont_box .category {padding:0 25px;} } @media screen and (max-width:1023px){ .sub_visual_area {height: 300px !important} .sub_content_area .cont_box .service_wrap .service_inner .con-width li dt{font-size: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li dd{font-size:17px;} /*포트폴리오*/ .sub_content_area .cont_box .port_wrap .port_inner ul li {width:calc(50% - 10px); margin-right: 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(3n){margin-right: 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(2n){margin-right: 0px;} /*제작안내*/ .sub_content_area .tit_wrap .tit_inner .img_box {position: relative; width:100%; text-align: center; top:auto; transform: none;} .sub_content_area .tit_wrap .tit_inner .tit_box {float: none; text-align: center; padding-right: 0; padding-top: 30px;} .sub_content_area .tit_wrap .tit_inner .tit_box h2 {font-size: 36px; } .sub_content_area .tit_wrap .tit_inner .tit_box h2::after {left:50%; transform: translateX(-50%);} .sub_content_area .tit_wrap .tit_inner .tit_box p {font-size: 17px;} .sub_content_area .list_warp {background-size: cover;} .sub_content_area .list_warp .list_inner .step_list ul li {padding:50px 25px; width:33.3%;} .sub_content_area .list_warp .list_inner .step_list ul li:first-child .img_box {width:127px; height: 147px; background-size: 127px 147px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:first-child .img_box {width:127px; height: 147px; background-size: 127px 147px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box {width:127px; height: 147px; background-size: 127px 147px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box {width:127px; height: 147px; background-size: 127px 147px;} .sub_content_area .list_warp .list_inner .step_list ul li:last-child .img_box {width:127px; height: 147px; background-size: 127px 147px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box:after{width:73px; height: 15px; background-size: 73px 15px;margin-top: -14px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box:after{width:73px; height: 15px; background-size: 73px 15px;margin-top: -14px;} .sub_content_area .info_wrap .info_inner .left_tit .tit_box h3 {font-size: 30px;} .sub_content_area .info_wrap .info_inner .right_tit .tit_box dl {font-size: 21px; width:69px;} .sub_content_area .info_wrap .info_inner .right_tit .tit_box dt {font-size: 21px;} } @media screen and (max-width:767px){ .sub_visual_area .breadcrumb {padding:0 15px;} .sub_content_area .sub_tit {padding: 20px 15px} .sub_content_area .cont_box .top_warp {padding: 0 15px;} .sub_visual_area .breadcrumb .inner .home {width:50px;padding: 0 15px; font-size: 0;background: #dfdfe4 url(../images/common/home.png) 15px 15px no-repeat;} .sub_visual_area .breadcrumb .inner .depth1 { width: calc( ( 100% - 50px ) / 2 );padding:0} .sub_visual_area .breadcrumb .inner .depth1 a {padding:0 20px;} .sub_visual_area .breadcrumb.active .inner .depth1 ul a {padding:0 20px;} .sub_visual_area .breadcrumb .inner .depth2 { width: calc( ( 100% - 50px ) / 2 );padding: 0 20px} .sub_visual_area .breadcrumb .inner .depth1 > a { background: url(../images/common/breadcrumb_arrow.png) no-repeat right 18px center;} .sub_visual_area .breadcrumb.active .inner .depth1 > a { background: url(../images/common/breadcrumb_arrow_on.png) no-repeat right 18px center;} .sub_content_area .sub_tit h2 {font-size: 24px;} .sub_content_area .cont_box {padding-top: 75px;} /*회사소개*/ .sub_content_area .cont_box .top_warp .inner .left_img_box{width: 100%; padding-right: 0px} .sub_content_area .cont_box .top_warp .inner .left_img_box .namecard {width:40%; height: 250px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .icon{width: 59%; height: 250px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box{width:100%; padding-left: 0; text-align: center;margin-bottom: 50px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2 {margin-bottom: 35px;margin-top: 20px;} .sub_content_area .cont_box .top_warp .inner .right_txt_box h2:after{left: 50%;transform: translateX(-50%); bottom: -15px;} .sub_content_area .cont_box .top_warp .inner .left_txt_box {width:100%; padding-right: 0; text-align: center; background: url(../images/common/breadcrumb_arrow.png) no-repeat right 18px center;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box {height: 240px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .img_box p {font-size: 25px} .sub_content_area .cont_box .top_warp .inner .right_img_box .p_img{display: none;} .sub_content_area .cont_box .top_warp .inner .right_img_box .m_img{display: block; max-width: 70%; margin:0 auto;} .sub_content_area .cont_box .top_warp .inner .right_img_box {margin-top: 0; padding-top: 30px; width:100%;} .sub_content_area .cont_box .top_warp .inner .left_txt_box p {padding: 0;} .sub_content_area .cont_box .bottom_warp {padding:0 15px; position: relative;} .sub_content_area .cont_box .bottom_warp .tit_box h2 {font-size: 18px;} .sub_content_area .cont_box .bottom_warp .step_list ul li {width:50%; padding:5px;} .sub_content_area .cont_box .bottom_warp .step_list ul li dt {margin-top: 10px; font-size: 20px;} .sub_content_area .cont_box .bottom_warp .step_list ul li dd {font-size: 16px;color: #5f5f66; margin-top: 8px;margin-bottom: 40px;} .sub_content_area .cont_box .bottom_warp .step_list ul li .img_box {background: url(../images/contents/step_bg_m.png) no-repeat; width:140px; height: 162px;} .sub_content_area .cont_box .bottom_warp .step_list ul li:nth-child(2) .img_box {background: url(../images/contents/step_right.png) no-repeat; width:140px; height: 162px;} .sub_content_area .cont_box .bottom_warp .step_list ul li:nth-child(3) .img_box {background: url(../images/contents/step_left.png) no-repeat; width:140px; height: 162px;} .sub_content_area .cont_box .bottom_warp .step_list ul:before {margin-top:87px;left: -20%;} .sub_content_area .cont_box .bottom_warp .step_list ul:after {content: ''; position: absolute; width: 100%; height: 4px;background: #dd0007;margin-top: 411px;z-index: -1;right: -20%;} .history_wrap .history_list:before {left: 25px; transform: none;} .history_wrap .history_list ul:before {left:75px;} .history_wrap .history_list ul .align_right {width:100%; padding:35px 0 0 75px} .history_wrap .history_list ul .align_left {width:100%; text-align: left;padding:35px 0 0 75px} .history_wrap .history_list ul li dl dt {font-size: 30px;} .history_wrap .history_list ul li dl dd {font-size: 16px} .history_wrap .history_list ul .align_left dl dd {padding-right: 0; padding-left: 20px;} .history_wrap .history_list ul .align_left dl dd:before {right: auto; left: 4px;} .history_wrap .history_list ul .align_left dl:before {left: -5px; right: auto;} .history_wrap .history_list ul .align_left dl:after {left: -9px; right: auto;} .history_wrap .history_list ul:after {display: none;} /*서비스*/ .sub_content_area .cont_box .service_wrap{ background: linear-gradient(-5deg, rgb(255, 255, 255) 0px, rgb(255, 255, 255) 11%, rgb(237, 237, 241) 0px, rgb(237, 237, 241) 90%, rgb(255, 255, 255) 0px);} .sub_content_area .cont_box .service_wrap .service_inner .con-width li {width: calc(50% - 10px);} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(3n) {margin-right: 20px;} .sub_content_area .cont_box .service_wrap .service_inner .con-width li:nth-child(2n) {margin-right: 0;} /*오시는길*/ .sub_content_area .map_tit_box{height: 365px; padding:16px 40px;} .sub_content_area .map_tit_box li {width:100%;} .sub_content_area .map_tit_box li:nth-child(2n - 1) {margin-right: 0;} /*솔루션 250401*/ .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box{width: 100%; padding-right: 0px} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .gioez_cms {width:100%; height: 1px; padding-bottom: 53.5%; background: url(../images/contents/250401_GIOEZ_CMS.png) no-repeat; background-size: cover;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .namecard {width:40%; height: 250px;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .icon{width: 59%; height: 250px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box {width:100%; padding-left: 0; text-align: center;margin-bottom: 50px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2 {margin-bottom: 35px;margin-top: 20px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box h2:after{left: 50%;transform: translateX(-50%); bottom: -15px;} .sub_content_area .cont_box .solution_warp .solution_inner .left_txt_box {width:100%; padding-right: 0; text-align: center; background: url(../images/common/breadcrumb_arrow.png) no-repeat right 18px center;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .img_box {height: 240px;} .sub_content_area .cont_box .solution_warp .solution_inner .left_img_box .img_box p {font-size: 25px} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box .p_img{display: none;} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box .m_img{display: block; max-width: 70%; margin:0 auto;} .sub_content_area .cont_box .solution_warp .solution_inner .right_img_box {margin-top: 0; padding-top: 30px; width:100%;} .sub_content_area .cont_box .solution_warp .solution_inner .left_txt_box p {padding: 0;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box dt {font-size: 18px;} .sub_content_area .cont_box .solution_warp .solution_explanation {width: 100%; display: flex; align-items: center; justify-content: center; padding: 0px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list {width: 100%; height: 1510px; padding-bottom: unset; display: flex; align-items: center; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; gap: 20px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content {width: 80%; height: 356px; position: relative;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content:nth-child(1) .explanation_box {height: 300px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content:nth-child(2) .explanation_box {height: 275px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content:nth-child(3) .explanation_box {height: 250px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content:nth-child(4) .explanation_box {height: 250px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dt{font: normal normal bold 22px/40px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dd{font: normal normal 18px/33px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px 0px 0px 0px; background: unset} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title {width: 100%; height: 70px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: #1F1F25;} .sub_content_area .cont_box .solution_warp .solution_skills .solution_skills_title .title {font: normal normal bold 24px/43px Noto Sans CJK KR; letter-spacing: -0.8px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list {width: 100%; height: 1300px; flex-direction: column;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content {width: 100%; height: 130px; background: transparent linear-gradient(165deg, #0000008e 0%, #000000 100%) 0% 0% no-repeat padding-box; opacity: 1;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area {width: 80%; height: 71px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text_title {width: 100%; height: 32px; font: normal bold 20px/25px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text {width: 100%; height: 40px; font: normal normal 14px/21px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon1 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon2 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon3 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon4 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon5 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon6 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon7 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon8 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon9 {width: 77px; height: 76px;} .sub_content_area .cont_box .solution_warp .solution_instance {width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 30px 0px 0px 0px; text-align: center;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title {width: 100%; height: 160px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .title {display: block; font: normal normal bold 24px/43px Noto Sans CJK KR; letter-spacing: -0.8px; margin-bottom: 10px;} .sub_content_area .cont_box .solution_warp .solution_instance .solution_instance_title .explanation {font: normal normal bold 18px/30px Noto Sans CJK KR; word-break: keep-all;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list {width: 100%; height: 1px; padding-bottom: 650%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; flex-wrap: nowrap; gap: 30px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content {width: 100%; padding-bottom: 100%; background-color: unset;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_img {width: 100%; padding-bottom: 75%; background-color: #F5F5F9; border: 1px solid #DEDEE7;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon1 {background-image: url(../images/contents/250401_04_01.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon2 {background-image: url(../images/contents/250401_04_02.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon3 {background-image: url(../images/contents/250401_04_03.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon4 {background-image: url(../images/contents/250401_04_04.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon5 {background-image: url(../images/contents/250401_04_05.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_icon6 {background-image: url(../images/contents/250401_04_06.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area {width: 100%; height: 93px; background-color: rgb(255, 255, 255); border: 1px solid #DEDEE7; border-top: none;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text {width: calc(100% - 130px); height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .title {height: 27px; font: normal normal bold 17px/27px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .hash_tag {height: 23px; font: normal normal normal 12px/26px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon1_2 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon2_2 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon3_2 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon4_2 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon5_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_1 {width: 53px; height: 53px;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_icon6_2 {width: 53px; height: 53px;} /*포트폴리오*/ .sub_content_area .cont_box .port_wrap {padding:0 15px;} .sub_content_area .cont_box .port_wrap .port_inner ul li {margin-bottom: 25px;} .sub_content_area .cont_box .port_wrap .port_inner ul li {width: calc(50% - 5px);margin-right: 10px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(3n) {margin-right: 10px} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(2n) {margin-right: 0;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box {padding: 13px 0px 13px 10px; height: 90px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box p{font-size: 16px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li {padding:0 10px; margin-right: 4px; height: 28px; border-radius: 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_box .tag li p {font-size: 11px; line-height: 28px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner p{font-size: 16px; padding-bottom: 10px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li {padding:0 10px; margin-right: 4px; height: 28px; border-radius: 20px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .tag li p {font-size: 11px; line-height: 28px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dl {font-size: 12px; width: 65px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner ul li dt {font-size: 12px;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg {padding:15px 12px} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .more_btn {margin-top: 0;} /*제작문의*/ .sub_content_area .tit_wrap {padding: 50px 15px;} .sub_content_area .list_warp .list_inner {padding:0 15px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li:first-child .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li.active:first-child .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li:last-child .img_box {background-size: 100px 116px; width:100px; height: 116px;} .sub_content_area .list_warp .list_inner .step_list ul li .img_box:after { background-size: 48px 10px; margin-top: -10px; right: -71px;} .sub_content_area .list_warp .list_inner .step_list ul li.active .img_box:after { background-size: 48px 10px; margin-top: -10px; right: -71px;} .sub_content_area .info_wrap .info_inner {padding-top: 60px;} .sub_content_area .info_wrap .info_inner .left_tit {width:100%; float: none; position: relative; top:auto;transform: none;padding:0px 0 70px 47px} .sub_content_area .info_wrap .info_inner .left_tit .tit_box {text-align: left;} .sub_content_area .info_wrap .info_inner .right_tit {width:100%; height: 160px; background: #ff2525; position: relative; } .sub_content_area .info_wrap .info_inner .right_tit .tit_box{padding-left: 0;} .sub_content_area .info_wrap .info_inner .right_tit:before{content: '';position: absolute;width: 100%;height: 96px;top: -96px;background: url(../images/contents/info_top_bg.png) no-repeat;z-index: -1} .sub_content_area .info_wrap .info_inner .right_tit img {display: none;} /*공지사항 list*/ .list_info {padding: 0 15px;} .list_info .cnt_info {float: none;} .list_info .list_search {float: none;} .list_info .list_search select {width:19%; padding:0} .list_info .list_search input[type="text"] {width: 60%} .list_info .list_search .btn_search {width:17%} .table-wrap {padding: 0 15px;} .table-wrap td{line-height: 36px;} .table-wrap .tstyle-list thead, .table-wrap .tstyle-list tbody .num, .table-wrap .tstyle-list colgroup {display: none;} .table-wrap .tstyle-list tr {/* display: block; */overflow: hidden;width: 100%;padding: 0.5rem;border-bottom: 1px solid #ddd;white-space: nowrap;} .table-wrap .tstyle-list td {float: left;width: auto !important;/* padding: 0 10px; */border: 0 none;font-size: 12px;text-align: left;margin: 0 5px;} .table-wrap .tstyle-list td + td::before {display: inline-block;height: 0.5rem;margin: 0 0.4rem;padding-left: 0.5rem;border-left: 1px solid #c8c8c8;content: '';line-height: 0.5rem;vertical-align: middle;} .table-wrap .tstyle-list .thumb {float: left; width: auto; margin-right: 1rem;} .table-wrap .tstyle-list .thumb span.img {width: 6rem; margin: 0;} .table-wrap .tstyle-list .thumb + .subject {padding: 0.5rem 0 0.2rem;} .table-wrap .tstyle-list .thumb + .subject a {display: inline-block; max-width: 85%; white-space: nowrap;} .table-wrap .tstyle-list .subject {display: block; float: none; margin: 0 0 0.2rem;} .table-wrap .tstyle-list .subject a {display: inline;font-size: 14px;font-weight: 300;white-space: normal;padding-left: 5px;max-width: 84% !important;} .table-wrap .tstyle-list .subject + td::before {margin-left: 0; padding-left: 0; border-left: 0 none;} .paging ol {padding: 0 5px;} .paging a {width:30px;height: 30px;} .paging ol li a, .paging ol li strong{width: 30px;height: 30px;font-size:15px; line-height: 30px;} .paging ol li:nth-child(6) {display:none;} .paging ol li:nth-child(7) {display:none;} table.tbl-read th, table.tbl-read td{ padding:8px 0 8px 8px;} table.tbl-read th{ font-size:14px;} table.tbl-read td{ font-size:13px; line-height:18px;} /*공지사항 read*/ .common_detail_area {padding:0 15px;} .common_detail_area .detail_content .subject{padding: 20px 8px;} .common_detail_area .detail_content .subject p { font-size: 19px;} .common_detail_area .detail_content .info {padding: 15px;} .common_detail_area .detail_content .info span {font-size: 14px;margin: 0 8px;} .common_detail_area .detail_content .info span:after {right: -10px;top: 4px;} .common_detail_area .detail_content .detail{padding: 50px 40px 90px 20px;} .common_detail_area .detail_content .attatch_files{padding: 25px 18px;} .common_detail_area .detail_content .attatch_files ul li a{ font-size: 14px;} .common_btn_area {margin:35px 0;} /*자주하는 질문*/ .cont_box .category {padding:0 25px;} .cont_box .category .faq-list li .subject strong {font-size: 18px} .cont_box .category .faq-list li .subject a:after {width:22px; height: 22px; background-size: 22px; right: 9px;} .cont_box .category .faq-list li .subject.on a:after{width:22px; height: 22px; background-size: 22px; right: 9px;} .cont_box .category .faq-list li .subject a {font-size: 15px; padding-left: 30px; padding-right: 40px;} .cont_box .category .faq-list li .hide_cont .answer {font-size: 14px;} .cont_box .category .faq-list li .hide_cont .answer p{padding-left: 30px; padding-right: 40px} } @media screen and (max-width:550px){ .sub_content_area .cont_box .port_wrap .port_inner ul li {width:100%;} } @media screen and (max-width:480px){ /*회사소개*/ .sub_content_area .cont_box .top_warp .inner .left_img_box .namecard {width:49%; height: 165px;} .sub_content_area .cont_box .top_warp .inner .left_img_box .icon {width:49%; height: 165px;} .sub_content_area .cont_box .top_warp .inner .right_img_box .m_img {max-width: 90%} /*서비스*/ .sub_content_area .cont_box .service_wrap .service_inner .con-width li {width:100%;height: 310px;padding: 35px 20px 150px;} /*포트폴리오*/ .sub_content_area .cont_box .port_wrap {padding:0 15px;} .sub_content_area .cont_box .port_wrap .port_inner ul li {margin-right: 10px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(3n) {margin-right: 10px;} .sub_content_area .cont_box .port_wrap .port_inner ul li:nth-child(2n) {margin-right: 0px;} .sub_content_area .cont_box .port_wrap .port_inner ul li a .txt_box {height: 47px; padding: 0 10px; line-height: inherit;} .sub_content_area .cont_box .port_wrap .port_inner ul li a .txt_box p {font-size: 13px; line-height: 26px;} .sub_content_area .cont_box .port_wrap .port_inner ul li a .txt_box span {font-size: 12px; float: left;} .sub_content_area .cont_box .port_wrap .port_inner ul li a .img_box .txt_inner h3 {font-size: 0.6em;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner{ padding:0;} .sub_content_area .cont_box .port_wrap .port_inner ul li .txt_inner .inner_bg { padding:40px 20px; } /*제작문의*/ .sub_content_area .tit_wrap .tit_inner .tit_box h2 {font-size: 32px} .sub_content_area .tit_wrap .tit_inner .tit_box p {font-size: 14px; line-height: 32px;} .sub_content_area .list_warp .list_inner .step_list ul li {width:50%; padding:25px;} /*에러페이지*/ .wrap{margin: 100px auto; padding: 0 10px;} .wrap .error_img img{max-width: 200px;} .wrap .error_txt{margin-top: 40px;} .wrap .error_txt strong{font-size: 20px;} .wrap .error_txt p{font-size: 15px; word-break: keep-all;} .wrap .error_btn{width:100%} .wrap .error_btn .go_prev_page, .wrap .error_btn .go_main{ width:49%;} } .paging a:hover {background-color: #eaeaea !important} /* s : 0524 웹접근성인증마크 문상혁 작업*/ .port_wrap .port_inner ul li.wa .two .txt_box{position: relative;} .port_wrap .port_inner ul li.wa .two .txt_box::before {content:''; position: absolute; width: 117px; height:89px; right: 6px; top:-38px; background: url('../images/contents/WA-mark.png') no-repeat;} .port_wrap .port_inner ul li.gd .two .txt_box{position: relative;} .port_wrap .port_inner ul li.gd .two .txt_box::after {content:''; position: absolute; /*width: 87px; height:107px;*/ width:180px; height:81px; right: 4px; top:-45px; background: url('../images/contents/gd-mark.png') no-repeat;} .port_wrap .port_inner ul li.gd.wa .two .txt_box::before {content:''; position: absolute; width: 117px; height:89px; right: 88px; top:-38px; background: url('../images/contents/WA-mark.png') no-repeat;} @media screen and (max-width: 767px){ .port_wrap .port_inner ul li.wa .two .txt_box::before {width:85px; height: 66px;background-size: cover; top: -28px;} .port_wrap .port_inner ul li.gd .two .txt_box::after {width:70px; height: 86px;background-size: cover; top: -38px;} } /* e : 0524 웹접근성인증마크 문상혁 작업*/ @media screen and (max-width: 566px){ /*솔루션 250401*/ .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_text {width: 130px;} } @media screen and (max-width: 474px){ /*솔루션 250401*/ .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info {height: 70px; gap: 7px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_icon {width: 35px; height: 35px;} .sub_content_area .cont_box .solution_warp .solution_inner .right_txt_box .gioez_cms_info_area .gioez_cms_info .gioez_cms_info_text {font: normal normal bold 11px/22px Noto Sans CJK KR; letter-spacing: -0.8px; line-height: 20px;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dt{font: normal normal bold 17px/40px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_explanation .explanation_list .explanation_content dd{font: normal normal 16px/25px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .title {height: 27px; font: normal normal bold 17px/29px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_instance .instance_list .instance_content .instance_text_area .instance_text .hash_tag {height: 25px; font: normal normal normal 12px/25px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area {width: 211px; height: 72px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text_title {width: 100%; height: 32px; font: normal bold 16px/25px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_text_area .skills_text {width: 100%; height: 40px; font: normal normal 12px/21px Noto Sans CJK KR;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon1 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon2 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon3 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon4 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon5 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon6 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon7 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon8 {width: 66px; height: 64px;} .sub_content_area .cont_box .solution_warp .solution_skills .skills_list .skills_content .skills_icon9 {width: 66px; height: 64px;} }