@charset "utf-8"; /* font-family: "Poppins", sans-serif; */ /* 공통 */ #sub #container .box {padding: 100px 0 120px;} #sub #container .inner_bx {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;} #sub .ttl01 {text-align: center;} #sub .ttl01 .txt1 {font-family: "Poppins", sans-serif; font-size: 18px; color: #c6171e; line-height: 18px; font-weight: 600; letter-spacing: 0.3em;} #sub .ttl01 .txt2 {font-family: "Poppins", sans-serif; font-size: 60px; color: #000000; line-height: 60px; font-weight: 600; margin-top: 18px;} #sub .ttl01 .txt2 span {color: #c6171e;} #sub .tab01 {height: 70px;} #sub .tab01 .tab_w {position: relative; z-index: 2;} #sub .tab01 .tab_w.on {position: fixed; left: 0; top: 120px; width: 100%;} /* Introdution */ #introdution .box1 .top_txt {margin-top: 60px; text-align: center;} #introdution .box1 .top_txt .txt1 {font-size: 30px; color: #000000; line-height: 40px; font-weight: 500; word-break: keep-all;} #introdution .box1 .top_txt .txt1 strong {font-family: "Poppins", sans-serif; font-weight: 700;} #introdution .box1 .top_txt .txt1 strong span {color: #c6171e;} #introdution .box1 .top_txt .txt2 {font-size: 18px; color: #444444; line-height: 30px; word-break: keep-all; margin: 28px auto 0; max-width: 815px;} #introdution .box1 .con_bx {margin-top: 73px; display: flex; flex-flow: wrap;} #introdution .box1 .con_bx .con_w {width: calc(33.333% - 20px); margin-right: 30px; box-sizing: border-box; position: relative;} #introdution .box1 .con_bx .con_w:nth-child(3n) {margin-right: 0;} #introdution .box1 .con_bx .con_w img {width: 100%;} #introdution .box1 .con_bx .con_w p {position: absolute; width: 100%; top: 36px; left: 0; box-sizing: border-box; z-index: 1; padding: 0 40px; font-family: "Poppins", sans-serif; font-size: 24px; color: #ffffff; line-height: 30px; font-weight: 600; word-break: keep-all;} /* Vision */ #vision .box1 .con_bx1 {background-color: #fafafa; padding: 50px; border-radius: 200px; margin-top: 51px;} #vision .box1 .con_bx1 ul {display: flex; flex-flow: wrap;} #vision .box1 .con_bx1 ul li {width: calc(33.333% - 66.666px); margin-right: 100px; box-sizing: border-box;} #vision .box1 .con_bx1 ul li:nth-child(3n) {margin-right: 0;} #vision .box1 .con_bx1 ul li .round {position: relative; padding-bottom: 100%; background-color: #fff; border-radius: 50%; box-shadow: 0 20px 30px rgba(0,0,0,0.2);} #vision .box1 .con_bx1 ul li .round::before {content: ''; width: 30px; height: 30px; background: url(../images/sub/vision_box1_plus.png) no-repeat center; position: absolute; right: -65px; top: 50%; margin-top: -15px;} #vision .box1 .con_bx1 ul li:last-child .round::before {display: none;} #vision .box1 .con_bx1 ul li .round .txt_w {position: absolute; width: 100%; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); text-align: center;} #vision .box1 .con_bx1 ul li .round .txt_w .txt1 {font-family: "Poppins", sans-serif; font-size: 36px; color: #c6171e; font-weight: 600;} #vision .box1 .con_bx1 ul li .round .txt_w .txt2 {font-size: 18px; color: #666666; line-height: 26px; word-break: keep-all; letter-spacing: -0.05em; max-width: 240px; margin: 16px auto 0;} #vision .box1 .con_bx1 ul li .round .txt_w .txt2 strong {color: #111111; font-weight: 600;} #vision .box1 .mid_txt {font-size: 26px; color: #111111; line-height: 40px; letter-spacing: -0.02em; word-break: keep-all; text-align: center; margin-top: 51px;} #vision .box1 .mid_txt strong {color: #c6171e; font-weight: 700;} #vision .box1 .con_bx2 {margin-top: 91px;} #vision .box1 .con_bx2 ul {display: flex; flex-flow: wrap;} #vision .box1 .con_bx2 ul li {width: calc(25% - 30px); margin-right: 40px; box-sizing: border-box; text-align: center;} #vision .box1 .con_bx2 ul li:nth-child(4n) {margin-right: 0;} #vision .box1 .con_bx2 ul li img {max-width: 100%;} #vision .box1 .con_bx2 ul li .txt1 {font-family: "Poppins", sans-serif; font-size: 18px; color: #c6171e; font-weight: 600; letter-spacing: 0.05em; margin-top: 22px;} #vision .box1 .con_bx2 ul li .txt2 {font-size: 30px; color: #111111; font-weight: 700; word-break: keep-all; margin-top: 3px;} #vision .box1 .con_bx2 ul li .txt3 {font-size: 18px; color: #666666; line-height: 28px; letter-spacing: -0.02em; word-break: keep-all; margin: 10px auto 0;} #vision .box1 .con_bx2 ul li .txt3 span {display: inline-block;} /* Location */ #location .box1 .map_bx {overflow: hidden; position: relative;} #location .box1 .map_bx::before {content: ''; width: 100%; height: 1px; background-color: rgba(0,0,0,.1); position: absolute; bottom: 0; left: 0; z-index: 2;} #location .box1 .map_bx .root_daum_roughmap .cont {display: none!important;} #location .box1 .btn_bx {position: relative; z-index: 2; text-align: center; font-size: 0; margin-top: -35px;} #location .box1 .btn_bx a {display: inline-block; max-width: 280px; width: 100%; height: 70px; font-size: 0; background: url(../images/sub/location_kakao.jpg) no-repeat center #fae100; border-radius: 35px;} #location .box1 .info_bx {max-width: 1150px; width: 100%; margin: 60px auto 0; box-sizing: border-box; display: flex; flex-flow: wrap; min-height: 160px;} #location .box1 .info_bx .l_bx {display:flex; justify-content:right; align-items:center; table-layout:fixed; width: 43.914%; box-sizing: border-box;} #location .box1 .info_bx .l_bx .txt_w {max-width: 426px; width: 100%;} #location .box1 .info_bx .l_bx .txt_w strong {display: block; font-family: "Poppins", sans-serif; font-size: 70px; color: #eeeeee; font-weight: 700; letter-spacing: -0.02em; line-height: 51px;} #location .box1 .info_bx .l_bx .txt_w p {font-size: 28px; color: #111111; font-weight: 600; margin-top: 26px;} #location .box1 .info_bx .r_bx {width: 56.086%; box-sizing: border-box; border-left: 1px solid #dddddd; padding-left: 60px; display:flex; justify-content:left; align-items:center; table-layout:fixed;} #location .box1 .info_bx .r_bx ul {width: 100%;} #location .box1 .info_bx .r_bx ul li {font-size: 18px; line-height: 26px; color: #111111; word-break: keep-all; padding-left: 32px; margin-bottom: 13px;} #location .box1 .info_bx .r_bx ul li:last-child {margin-bottom: 0;} #location .box1 .info_bx .r_bx ul li.icon1 {background: url(../images/sub/location_icon1.png) no-repeat left top 2px;} #location .box1 .info_bx .r_bx ul li.icon2 {background: url(../images/sub/location_icon2.png) no-repeat left top 2px;} #location .box1 .info_bx .r_bx ul li.icon3 {background: url(../images/sub/location_icon3.png) no-repeat left top 2px;} /* products */ #products .tab_con {margin-top: 60px;} #products .tab_con .tab_con_w {box-shadow: 0 10px 30px rgba(0,0,0,0.06); background-color: #fff; border-radius: 20px; margin-bottom: 40px; overflow: hidden; padding: 60px 60px 0;} #products .tab_con .tab_con_w:last-child {margin-bottom: 0;} #products .tab_con .btm_btn {background-color: #fafafa; height: 70px; display:flex; justify-content:center; align-items:center; table-layout:fixed; text-align: center; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; cursor: pointer; margin-top: 60px; position: relative; width: calc(100% + 120px); left: -60px;} #products .tab_con .btm_btn.on {background-color: #c6171e;} #products .tab_con .btm_btn span::before {content: 'VIEWMORE'; font-family: "Poppins", sans-serif; font-size: 16px; color: #aaaaaa; font-weight: 500; letter-spacing: 0.3em;} #products .tab_con .btm_btn.on span::before {content: 'CLOSED'; color: #fff!important;} #products .tab_con .list1 li {font-size: 18px; color: #444444; line-height: 26px; word-break: keep-all; padding-left: 37px; box-sizing: border-box; background: url(../images/icon/dot1.png) no-repeat left 0; margin-bottom: 14px;} #products .tab_con .list1 li:last-child {margin-bottom: 0;} #products .tab_con .hide_bx {position: relative; margin-top: 60px; padding: 60px 0 0; display: none;} #products .tab_con .hide_bx::before {content: ''; width: 100%; height: 1px; background-color: #eeeeee; position: absolute; top: 0; left: 0;} #products .tab_con .con {margin-bottom: 60px;} #products .tab_con .con:last-child {margin-bottom: 0;} #products .tab_con .tb01 {overflow-x: auto; border-top: 1px solid #212121;} #products .tab_con .tb01 table {width: 100%; table-layout: fixed;} #products .tab_con .tb01.ovh table {min-width: 500px;} #products .tab_con .tb01 table .col2 {color: #c6171e!important;} #products .tab_con .tb01 table .col3 {color: #fff!important;} #products .tab_con .tb01 table .col4 {color: #111111!important;} #products .tab_con .tb01 table .bg2 {background-color: #c6171e!important;} #products .tab_con .tb01 table .bg3 {background-color: #fdf6f6!important;} #products .tab_con .tb01 table .tl {text-align: left!important; padding-left: 30px!important; padding-right: 30px!important;} #products .tab_con .tb01 table thead tr {border-bottom: 1px solid #dddddd;} #products .tab_con .tb01 table thead th {background-color: #fafafa; text-align: center; font-size: 16px; color: #111111; font-weight: 600; padding: 20px 5px; box-sizing: border-box; border-right: 1px solid #dddddd; word-break: keep-all;} #products .tab_con .tb01 table thead th:last-child {border-right: none;} #products .tab_con .tb01 table tbody tr {border-bottom: 1px solid #ddd;} #products .tab_con .tb01 table tbody td {text-align: center; font-size: 16px; color: #444444; line-height: 26px; word-break: keep-all; padding: 12px 5px; box-sizing: border-box; border-right: 1px solid #ddd;} #products .tab_con .tb01 table tbody td:last-child {border-right: none;} #products .tab_con .tb_btm {text-align: center; font-size: 16px; color: #666666; line-height: 26px; word-break: keep-all; margin-top: 8px;} #products .tab_con .row_con {display: flex; flex-flow: wrap; margin-bottom: 20px;} #products .tab_con .row_con:last-child {margin-bottom: 0;} #products .tab_con .row_con .row_w {box-sizing: border-box; width: 100%;} #products .tab_con .row_con.two > .row_w {width: calc(50% - 10px); margin-right: 20px; margin-top: 20px;} #products .tab_con .row_con.two > .row_w:nth-child(2n) {margin-right: 0;} #products .tab_con .row_con.two > .row_w:nth-child(-n+2) {margin-top: 0;} #products .tab_con .row_con.three > .row_w {width: calc(33.333% - 13.333px); margin-right: 20px; margin-top: 20px; box-sizing: border-box;} #products .tab_con .row_con.three > .row_w:nth-child(3n) {margin-right: 0;} #products .tab_con .row_con.three > .row_w:nth-child(-n+3) {margin-top: 0;} #products .tab_con .row_con.four > .row_w {width: calc(25% - 15px); margin-right: 20px; margin-top: 20px; box-sizing: border-box;} #products .tab_con .row_con.four > .row_w:nth-child(4n) {margin-right: 0;} #products .tab_con .row_con.four > .row_w:nth-child(-n+4) {margin-top: 0;} #products .tab_con .row_con .row_w img {width: 100%;} #products .tab_con .row_con .row_w img.bd {border: 1px solid #eeeeee;} #products .tab_con .row_con .row_w .ttl {font-size: 20px; color: #000000; font-weight: 600; line-height: 30px; word-break: keep-all; margin-bottom: 14px;} #products .tab_con .row_con .row_w .ttl:last-child {margin-bottom: 0;} #products .tab_con .row_con .row_w .ttl:first-child {margin-top: 0;} #products .tab_con .row_con .row_w .btm_txt {text-align: center; font-size: 16px; color: #666666; line-height: 26px; word-break: keep-all; margin-top: 7px;} #products .tab_con .con1 {display: flex; flex-flow: wrap;} #products .tab_con .con1 .l_bx {width: calc(50% - 10px); margin-right: 20px; box-sizing: border-box;} #products .tab_con .con1 .l_bx img {width: 100%;} #products .tab_con .con1 .r_bx {width: calc(50% - 10px); box-sizing: border-box; padding-left: 30px;} #products .tab_con .con1 .r_bx .txt1 {font-family: "Poppins", sans-serif; font-size: 18px; color: #c6171e; font-weight: 600; letter-spacing: 0.05em; word-break: keep-all; line-height: 28px; margin-bottom: 9px;} #products .tab_con .con1 .r_bx .txt2 {font-family: "Poppins", sans-serif; font-size: 60px; color: #000000; font-weight: 600; line-height: 70px;} #products .tab_con .con1 .r_bx .txt2 span {color: #c6171e;} #products .tab_con .con1 .r_bx .txt3 {font-size: 26px; color: #000000; line-height: 40px; font-weight: 700; word-break: keep-all; margin-top: 53px;} #products .tab_con .con1 .r_bx .txt4 {font-size: 18px; color: #444444; line-height: 30px; word-break: keep-all; margin-top: 8px;} #products .tab_con .con1 .r_bx .list1 {margin-top: 34px;} #products.software .tab_con #tabCon2 .row_con .row_w {padding: 0 30px 53px;} #products.software .tab_con #tabCon2 .row_con .row_w.col1 {background-color: #fafafa;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 {border: 1px solid #c6171e; border-top: none;} #products.software .tab_con #tabCon2 .row_con .row_w .top_ttl {text-align: center; font-size: 20px; color: #ffffff; font-weight: 600; line-height: 70px; margin-bottom: 60px; position: relative; width: calc(100% + 60px); left: -30px;} #products.software .tab_con #tabCon2 .row_con .row_w.col1 .top_ttl {background-color: #666666;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 .top_ttl {background-color: #c6171e;} #products.software .tab_con #tabCon2 .row_con .row_con1 {max-width: 299px; width: 100%; margin: 0 auto;} #products.software .tab_con #tabCon2 .row_con .row_con1 .con_bx {padding-bottom: 79%; background: url(../images/sub/p_software_t2_con2_1_bg.png) no-repeat center; background-size: cover; position: relative;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx {text-align: center; position: absolute; left: 0; top: 0; width: 100%; padding-bottom: 57%;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w {position: absolute; width: 100%; top: 50%; left: 0; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w img {width: auto;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w strong {display: block; font-size: 18px; color: #000000; font-weight: 700; word-break: keep-all; margin-top: 11px;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w p {font-size: 16px; color: #666666; word-break: keep-all; margin-top: 6px;} #products.software .tab_con #tabCon2 .row_con .row_con2 {margin-top: 40px; position: relative;} #products.software .tab_con #tabCon2 .row_con .row_con2 img {max-width: 100%; width: auto;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx {text-align: center;} #products.software .tab_con #tabCon2 .row_con .row_w.col1 .row_con2 .con_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .con_w {width: 100%; margin-bottom: 60px;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .con_w:last-child {margin-bottom: 0;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 {max-width: 340px; width: 100%; margin: 0 auto; position: relative; padding: 20px 20px 0; box-sizing: border-box; margin-bottom: 14px;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1:last-child {margin-bottom: 0;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 .num {position: absolute; left: 0; top: 0; line-height: 40px; width: 40px; font-size: 20px; color: #ffffff; font-weight: 600; background-color: #666666;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 .row_con2 .con_bx .img1 .num {background-color: #c6171e;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 strong {display: block; font-size: 18px; color: #000000; font-weight: 700; line-height: 28px; margin-top: 15px;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 .row_con2 .con_bx .img1 strong {color: #c6171e;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 p {font-size: 16px; color: #666666; line-height: 28px; word-break: keep-all; margin-top: -4px;} #products.software .tab_con #tabCon2 .row_con .row_con3 {margin-top: 53px;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx {position: relative;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx img {max-width: 100%;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .round {position: absolute; width: 40%;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .round::before {content: ''; width: 100%; padding-bottom: 100%; background-color: #666666; border-radius: 50%; display: block;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 .row_con3 .con_bx .round::before {background-color: #c6171e;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .r1 {left: 0; top: 0;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .r2 {right: 0; top: 0;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .r3 {left: 0; bottom: 0;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .r4 {right: 0; bottom: 0;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .round .txt_w {width: 100%; position: absolute; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); font-size: 16px;color: #ffffff; line-height: 26px; word-break: keep-all; text-align: center;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .round .txt_w strong {font-weight: 600;} #products.software .tab_con #tabCon2 .row_con .row_con3 .btm_bx {text-align: center;} #products.software .tab_con #tabCon2 .row_con .row_con3 .btm_bx strong {display: block; font-size: 18px; color: #000000; font-weight: 700; line-height: 28px; margin-top: 15px;} #products.software .tab_con #tabCon2 .row_con .row_w.col2 .row_con3 .btm_bx strong {color: #c6171e;} #products.software .tab_con #tabCon2 .row_con .row_con3 .btm_bx p {font-size: 16px; color: #666666; line-height: 28px; word-break: keep-all; margin-top: -4px;} #products.software .tab_con #tabCon4 .row_con1 .row_w {padding: 40px 30px 35px;} #products.software .tab_con #tabCon4 .row_con1 .row_w.col1 {background-color: #eeeeee;} #products.software .tab_con #tabCon4 .row_con1 .row_w.col2 {background-color: #c6171e;} #products.software .tab_con #tabCon4 .row_con1 .row_w .top_txt {text-align: center;} #products.software .tab_con #tabCon4 .row_con1 .row_w .top_txt img {width: auto;} #products.software .tab_con #tabCon4 .row_con1 .row_w .top_txt p {font-size: 20px; color: #000000; line-height: 30px; font-weight: 600; word-break: keep-all; margin-top: 13px;} #products.software .tab_con #tabCon4 .row_con1 .row_w.col2 .top_txt p {color: #fff;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul {margin-top: 24px;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li {background-color: #fff; position: relative; min-height: 70px; margin-bottom: 10px; box-sizing: border-box; border-radius: 300px; padding: 5px 10px 5px 80px; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li:last-child {margin-bottom: 0;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li span {position: absolute; width: 50px; height: calc(100% - 20px); border-radius: 300px; top: 10px; left: 10px; background-color: #666666; text-align: center; font-size: 20px; color: #ffffff; font-weight: 700; font-family: "Poppins", sans-serif; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #products.software .tab_con #tabCon4 .row_con1 .row_w.col2 ul li span {background-color: #c6171e;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li p {width: 100%; font-size: 16px; color: #111111; line-height: 26px; word-break: keep-all;} /* Download */ #download .down_list .con_w {border: 1px solid #dddddd; margin-bottom: 20px; box-sizing: border-box; display: flex; flex-flow: wrap; padding: 40px 60px;} #download .down_list .con_w:last-child {margin-bottom: 0;} #download .down_list .con_w .l_bx {width: 310px; box-sizing: border-box; padding-right: 20px; display:flex; justify-content:left; align-items:center; table-layout:fixed;} #download .down_list .con_w .l_bx strong {display: block; font-family: "Poppins", sans-serif; font-size: 30px; color: #000000; font-weight: 600;} #download .down_list .con_w .l_bx strong span {color: #c6171e;} #download .down_list .con_w .r_bx {width: calc(100% - 310px); box-sizing: border-box;} #download .down_list .con_w .r_bx ul {font-size: 0; text-align: right; margin-top: -10px;} #download .down_list .con_w .r_bx ul li {display: inline-block; margin-left: 10px; margin-top: 10px;} #download .down_list .con_w .r_bx ul li a {display:flex; justify-content:center; align-items:center; table-layout:fixed; min-width: 180px; width: 100%; border: 1px solid #c6171e; box-sizing: border-box; padding: 0 20px; height: 50px; font-size: 15px; color: #c6171e; font-weight: 500;} #download .down_list .con_w .r_bx ul li a span {display: block; width: 100%; background: url(../images/icon/download1.png) no-repeat right center; padding-right: 20px; box-sizing: border-box; text-align: left;} /* PC */ @media all and (min-width:1025px){ /* 공통 */ #sub .tab01 .tab_w::before {content: ''; width: 0; height: 100%; background-color: #fafafa; position: absolute; left: 50%; top: 0; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s;} #sub .tab01 .tab_w.on::before {width: 100%;} #sub .tab01 .tab_w .on_txt {display: none!important;} #sub .tab01 .tab_w > ul {max-width: 1200px; display: table!important; table-layout: fixed; width: 100%; margin: 0 auto; background-color: #fafafa; position: relative; z-index: 1;} #sub .tab01 .tab_w > ul > li {display: table-cell;} #sub .tab01 .tab_w > ul > li > a {display:flex; justify-content:center; align-items:center; table-layout:fixed; text-align: center; font-size: 16px; color: #999999; line-height: 24px; font-weight: 500; font-family: "Poppins", sans-serif; height: 70px; -webkit-transition: color 0.3s, background 0.3s; -moz-transition: color 0.3s, background 0.3s; transition: color 0.3s, background 0.3s;} #sub .tab01 .tab_w > ul > li > a:hover {color: #c6171e;} #sub .tab01 .tab_w > ul > li.on > a {background-color: #c6171e; color: #fff!important;} /* Location */ #location .box1 .btn_bx a {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #location .box1 .btn_bx a:hover {box-shadow: 0 0 26px rgba(250,225,0,0.5);} /* products */ #products .tab_con .btm_btn span::before {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;} #products .tab_con .btm_btn:hover span::before {color: #c6171e;} /* Download */ #download .down_list .con_w .r_bx ul li a {-webkit-transition: background 0.3s, color 0.3s; -moz-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;} #download .down_list .con_w .r_bx ul li a:hover {background-color: #c6171e; color: #fff;} #download .down_list .con_w .r_bx ul li a span {-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;} #download .down_list .con_w .r_bx ul li a:hover span {background: url(../images/icon/download2.png) no-repeat right center;} } /* 태블릿&모바일 공통*/ @media all and (max-width:1024px){ /* 공통 */ #sub #container .box {padding: 50px 0 60px;} #sub .ttl01 .txt1 {font-size: 10px; line-height: 10px;} #sub .ttl01 .txt2 {margin-top: 9px; font-size: 30px; line-height: 30px;} #sub .tab01 {height: 45px;} #sub .tab01 .tab_w.on {top: 60px; width: calc(100% - 40px); left: 20px;} #sub .tab01 .tab_w .on_txt {height: 45px; display:flex; justify-content:center; align-items:center; table-layout:fixed; text-align: center; font-size: 13px; color: #ffffff; font-weight: 600; font-family: "Poppins", sans-serif; background-color: #c6171e; cursor: pointer; position: relative;} #sub .tab01 .tab_w .on_txt::before {content: ''; width: 8px; height: 5px; background: url(../images/icon/arrow2.png) no-repeat center; position: absolute; right: 15px; top: 50%; margin-top: -2.5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #sub .tab01 .tab_w .on_txt.on::before {transform: rotate(180deg);} #sub .tab01 .tab_w > ul {position: absolute; width: 100%; top: 45px; left: 0; background-color: #fff; border: 1px solid #c6171e; box-sizing: border-box; border-top: none; display: none;} #sub .tab01 .tab_w > ul > li {text-align: center; margin-bottom: 5px;} #sub .tab01 .tab_w > ul > li:first-child {padding-top: 10px;} #sub .tab01 .tab_w > ul > li:last-child {padding-bottom: 10px; margin-bottom: 0;} #sub .tab01 .tab_w > ul > li > a {display: block; font-size: 12px; color: #111; font-weight: 500; line-height: 25px;} /* Introdution */ #introdution .box1 .top_txt {margin-top: 29px;} #introdution .box1 .top_txt .txt1 {font-size: 15px; line-height: 20px;} #introdution .box1 .top_txt .txt2 {margin-top: 15px; font-size: 12px; line-height: 17px; max-width: 540px;} #introdution .box1 .con_bx {margin-top: 36px;} #introdution .box1 .con_bx .con_w {width: calc(33.333% - 13.333px); margin-right: 20px;} #introdution .box1 .con_bx .con_w p {top: 16px; padding: 0 20px; font-size: 17px; line-height: 22px;} /* Vision */ #vision .box1 .con_bx1 {padding: 30px; margin-top: 30px;} #vision .box1 .con_bx1 ul li {width: calc(33.333% - 40px); margin-right: 60px;} #vision .box1 .con_bx1 ul li .round {box-shadow: 0 10px 15px rgba(0,0,0,0.2);} #vision .box1 .con_bx1 ul li .round::before {background-size: 15px auto; width: 15px; right: -36px;} #vision .box1 .con_bx1 ul li .round .txt_w .txt1 {font-size: 19px;} #vision .box1 .con_bx1 ul li .round .txt_w .txt2 {font-size: 12px; line-height: 17px; margin-top: 10px; max-width: 160px;} #vision .box1 .mid_txt {font-size: 15px; line-height: 20px; margin-top: 30px;} #vision .box1 .con_bx2 {margin-top: 50px;} #vision .box1 .con_bx2 ul li {width: calc(25% - 22.5px); margin-right: 30px;} #vision .box1 .con_bx2 ul li img {max-width: 100px; width: 100%;} #vision .box1 .con_bx2 ul li .txt1 {margin-top: 13px; font-size: 13px;} #vision .box1 .con_bx2 ul li .txt2 {margin-top: 2px; font-size: 15px;} #vision .box1 .con_bx2 ul li .txt3 {margin-top: 7px; font-size: 12px; line-height: 17px; max-width: 170px;} /* Location */ #location .box1 {padding-top: 50px;} #location .box1 .map_bx {height: 260px;} #location .box1 .map_bx::after {content: ''; width: 100%; height: 1px; background-color: rgba(0,0,0,.1); position: absolute; top: 0; left: 0; z-index: 2;} #location .box1 .map_bx .root_daum_roughmap {position: absolute; width: 100%; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);} #location .box1 .map_bx .root_daum_roughmap .map > div:nth-child(2) {bottom: 130px!important;} #location .box1 .btn_bx {margin-top: -25px;} #location .box1 .btn_bx a {max-width: 210px; background-size: 98px auto; height: 50px;} #location .box1 .info_bx {margin-top: 29px; min-height: 120px;} #location .box1 .info_bx .l_bx .txt_w {max-width: 300px;} #location .box1 .info_bx .l_bx .txt_w strong {font-size: 35px; line-height: 26px;} #location .box1 .info_bx .l_bx .txt_w p {font-size: 15px; line-height: 20px; margin-top: 11px;} #location .box1 .info_bx .r_bx {padding-left: 30px;} #location .box1 .info_bx .r_bx ul li {font-size: 12px; line-height: 17px; margin-bottom: 13px; background-size: 15px auto!important; padding-left: 27px;} /* products */ #products .tab_con {margin-top: 30px;} #products .tab_con .tab_con_w {padding: 20px 15px 0; border-radius: 10px;} #products .tab_con .btm_btn {margin-top: 30px; height: 45px; width: calc(100% + 30px); left: -15px;} #products .tab_con .btm_btn span::before {font-size: 13px;} #products .tab_con .list1 li {font-size: 12px; line-height: 17px; background-size: 17px auto; padding-left: 20px; margin-bottom: 12px;} #products .tab_con .hide_bx {margin-top: 30px; padding-top: 30px;} #products .tab_con .con {margin-bottom: 30px;} #products .tab_con .row_con {margin-bottom: 15px;} #products .tab_con .row_con .row_w .ttl {font-size: 12px; line-height: 19px; margin-bottom: 5px;} #products .tab_con .row_con .row_w .btm_txt {font-size: 10px; line-height: 15px; margin-top: 1px;} #products .tab_con .con1 .r_bx {padding-left: 15px;} #products .tab_con .con1 .r_bx .txt1 {margin-bottom: 4px; font-size: 10px; line-height: 15px;} #products .tab_con .con1 .r_bx .txt2 {font-size: 30px; line-height: 35px;} #products .tab_con .con1 .r_bx .txt3 {margin-top: 28px; font-size: 15px; line-height: 20px;} #products .tab_con .con1 .r_bx .txt4 {margin-top: 5px; font-size: 12px; line-height: 17px;} #products .tab_con .con1 .r_bx .list1 {margin-top: 19px;} #products .tab_con .tb01 table .tl {padding-left: 15px!important; padding-right: 15px!important;} #products .tab_con .tb01 table thead th {font-size: 11px; line-height: 17px; padding: 10px 5px;} #products .tab_con .tb01 table tbody td {font-size: 11px; line-height: 17px; padding: 10px 5px;} #products .tab_con .tb_btm {font-size: 12px; line-height: 19px; margin-top: 4px;} #products.software .tab_con #tabCon2 .row_con .row_w {padding: 0 15px 25px;} #products.software .tab_con #tabCon2 .row_con .row_w .top_ttl {font-size: 15px; line-height: 40px; margin-bottom: 30px; width: calc(100% + 30px); left: -15px;} #products.software .tab_con #tabCon2 .row_con .row_con1 {max-width: 250px;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w img {max-width: 30px;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w strong {font-size: 13px; line-height: 21px; margin-top: 5px;} #products.software .tab_con #tabCon2 .row_con .row_con1 .txt_bx .txt_w p {font-size: 11px; line-height: 17px; margin-top: 3px;} #products.software .tab_con #tabCon2 .row_con .row_con2 {margin-top: 30px;} #products.software .tab_con #tabCon2 .row_con .row_w.col1 .row_con2 > img {display: none;} #products.software .tab_con #tabCon2 .row_con .row_w.col1 .row_con2 .con_bx {position: relative;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .con_w {margin-bottom: 20px;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 {padding: 10px 10px 0;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 .num {font-size: 11px; width: 20px; line-height: 20px;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 strong {font-size: 13px; line-height: 21px; margin-top: 5px;} #products.software .tab_con #tabCon2 .row_con .row_con2 .con_bx .img1 p {font-size: 11px; line-height: 17px; margin-top: 3px;} #products.software .tab_con #tabCon2 .row_con .row_con3 {margin-top: 30px;} #products.software .tab_con #tabCon2 .row_con .row_con3 .con_bx .round .txt_w {font-size: 11px; line-height: 17px;} #products.software .tab_con #tabCon2 .row_con .row_con3 .btm_bx strong {font-size: 13px; line-height: 21px; margin-top: 5px;} #products.software .tab_con #tabCon2 .row_con .row_con3 .btm_bx p {font-size: 11px; line-height: 17px; margin-top: 3px;} #products.software .tab_con #tabCon4 .row_con1 .row_w {padding: 20px 15px 20px;} #products.software .tab_con #tabCon4 .row_con1 .row_w .top_txt img {max-width: 70px;} #products.software .tab_con #tabCon4 .row_con1 .row_w .top_txt p {font-size: 15px; line-height: 23px; margin-top: 8px;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul {margin-top: 15px;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li {min-height: 50px; padding: 5px 10px 5px 50px;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li span {font-size: 13px; width: 30px; height: 30px; top: 50%; margin-top: -15px;} #products.software .tab_con #tabCon4 .row_con1 .row_w ul li p {font-size: 11px; line-height: 17px;} /* Download */ #download .down_list .con_w {padding: 20px 30px; margin-bottom: 15px;} #download .down_list .con_w .l_bx {width: 190px;} #download .down_list .con_w .l_bx strong {font-size: 15px;} #download .down_list .con_w .r_bx {width: calc(100% - 190px);} #download .down_list .con_w .r_bx ul {margin-top: -5px;} #download .down_list .con_w .r_bx ul li {margin-left: 5px; margin-top: 5px;} #download .down_list .con_w .r_bx ul li a {font-size: 12px; padding: 0 15px; height: 40px; min-width: 150px;} #download .down_list .con_w .r_bx ul li a span {background-size: 12px auto!important;} } /* 모바일 */ @media all and (max-width:768px){ /* Introdution */ #introdution .box1 .top_txt .txt2 {max-width: 302px;} #introdution .box1 .top_txt .txt2 span {display: inline-block;} #introdution .box1 .con_bx .con_w:nth-child(n) {width: 100%; margin-right: 0; margin-top: 10px;} #introdution .box1 .con_bx .con_w:first-child {margin-top: 0;} /* Vision */ #vision .box1 .con_bx1 {margin: 30px auto 0; max-width: 180px;} #vision .box1 .con_bx1 ul li:nth-child(n) {width: 100%; margin-right: 0; margin-bottom: 60px;} #vision .box1 .con_bx1 ul li:last-child {margin-bottom: 0;} #vision .box1 .con_bx1 ul li .round::before {right: auto; left: 50%; margin-left: -7.5px; height: 15px; bottom: -36px; top: auto; margin-top: 0;} #vision .box1 .con_bx2 ul li:nth-child(n) {width: calc(50% - 10px); margin-right: 20px; margin-top: 30px;} #vision .box1 .con_bx2 ul li:nth-child(2n) {margin-right: 0;} #vision .box1 .con_bx2 ul li:nth-child(-n+2) {margin-top: 0;} /* Location */ #location .box1 .info_bx {min-height: auto;} #location .box1 .info_bx .l_bx {width: 100%;} #location .box1 .info_bx .l_bx .txt_w {max-width: 100%; text-align: center;} #location .box1 .info_bx .r_bx {width: 100%; padding-left: 0; border-left: none; border-top: 1px solid #dddddd; margin-top: 26px; padding-top: 31px; justify-content: center;} #location .box1 .info_bx .r_bx ul {width: auto;} /* products */ #products .tab_con .con1 .l_bx {width: 100%; margin-right: 0;} #products .tab_con .con1 .r_bx {width: 100%; padding-left: 0; margin-top: 27px;} #products .tab_con .row_con.rowmt30 > .row_w {margin-top: 30px!important;} #products .tab_con .row_con.two > .row_w:nth-child(n) {width: 100%; margin-right: 0; margin-top: 15px;} #products .tab_con .row_con.two > .row_w:first-child{margin-top: 0!important;} #products .tab_con .row_con.two.mN > .row_w:nth-child(n) {width: calc(50% - 5px); margin-right: 10px; margin-top: 15px;} #products .tab_con .row_con.two.mN > .row_w:nth-child(2n) {margin-right: 0;} #products .tab_con .row_con.two.mN > .row_w:nth-child(-n+2) {margin-top: 0!important;} #products .tab_con .row_con.four > .row_w:nth-child(n) {width: 100%; margin-right: 0; margin-top: 15px;} #products .tab_con .row_con.four > .row_w:first-child {margin-top: 0!important;} #products .tab_con .row_con.four.four_two > .row_w:nth-child(n) {width: calc(50% - 5px); margin-right: 10px; margin-top: 15px;} #products .tab_con .row_con.four.four_two > .row_w:nth-child(2n) {margin-right: 0;} #products .tab_con .row_con.four.four_two > .row_w:nth-child(-n+2) {margin-top: 0!important;} /* Download */ #download .down_list .con_w {padding: 25px 15px 15px;} #download .down_list .con_w .l_bx {width: 100%; padding-right: 0; justify-content: center;} #download .down_list .con_w .r_bx {width: 100%; margin-top: 24px;} #download .down_list .con_w .r_bx ul {margin-top: 0;} #download .down_list .con_w .r_bx ul li {display: block; margin-left: 0;} #download .down_list .con_w .r_bx ul li:first-child {margin-top: 0;} #download .down_list .con_w .r_bx ul li a {min-width: none;} }