@charset "utf-8"; /* font-family: 'Poppins', sans-serif; */ /* 공통 */ #sub .visual_bx {position: relative; overflow: hidden; height: 650px!important} #sub .visual_bx .bg_bx {overflow: hidden; /*height: 100vh; transform: scale(1.2);*/ position: absolute; width: 100%; height: 100%; top: 0; left: 0;} /*#sub .visual_bx .bg_bx.on {transform: scale(1); -webkit-transition: transform 3s; -moz-transition: transform 3s; transition: transform 3s;}*/ #sub .visual_bx .bg_bx div {background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; background-position-y: 0px;} #sub .visual_bx .v_txt {position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #sub .visual_bx .v_txt .txt_w {max-width: 1224px; width: calc(100% - 40px);} /*#sub .visual_bx .v_txt .txt1 {font-family: 'Poppins', sans-serif; font-size: 82px; line-height: 100px; color: #ed4130; font-weight: 600; word-break: keep-all;}*/ #sub .visual_bx .v_txt .txt1 {font-family: 'Poppins', sans-serif; font-size: 72px; line-height: 90px; color: #ed4130; font-weight: 600; word-break: keep-all;} #sub .visual_bx .v_txt .txt2 {font-size: 40px; line-height: 62px; color: #ffffff; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; margin-top: 39px; padding-bottom: 4px;} #sub .visual_bx .v_txt .txt2 span {display: inline-block;} #sub .visual_bx .v_txt .col2 {color: #fff;} #sub .visual_bx .v_txt .col3 {color: #000000;} #sub .visual_bx .v_txt .btn {display: block; padding: 0 36px; border: 1px solid #fff; box-sizing: border-box; border-radius: 28px; font-size: 16px; color: #ffffff; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; width: 220px; margin-top: 15px;} #sub .visual_bx .v_txt .btn span {display: block; position: relative; line-height: 54px;} #sub .visual_bx .v_txt .btn span::before {content: ''; width: 12px; height: 16px; background: url(../images/icon/download.png) no-repeat right center; position: absolute; right: 0; top: 50%; margin-top: -8px;} #sub .visual_bx2 {min-height: 560px; display:flex; justify-content:left; align-items:center; table-layout:fixed; padding-top: 50px;} #sub .visual_bx2 .txt_w {width: 100%;} #sub .visual_bx2 .txt_w .txt1 {font-family: 'Poppins', sans-serif; font-size: 82px; color: #ed4130; font-weight: 600; word-break: keep-all;} #sub .visual_bx2 .txt_w .txt1 span {position: relative;} /*#sub .visual_bx2 .txt_w .txt1 span::before {content: ''; width: 0%; height: 4px; background-color: #ed4130; position: absolute; left: 0; top: 50%; margin-top: 3px; -webkit-transition: width 0.6s; -moz-transition: width 0.6s; transition: width 0.6s; transition-delay: 0.2s;}*/ #sub .visual_bx2 .txt_w .txt1.aos-animate span::before {width: 100%;} #sub .visual_bx2 .txt_w .txt2 {font-size: 30px; color: #101010; font-weight: 700; line-height: 46px; letter-spacing: -0.05em; word-break: keep-all; margin-top: 18px;} #sub .v_menu {position: relative;} #sub .v_menu::before {content: ''; width: 100%; height: 1px; background-color: #ddd; position: absolute; left: 0; bottom: 0;} #sub #container .inner_bx {max-width: 1224px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;} #sub .ttl01 .txt1 {font-size: 46px; line-height: 70px; color: #000000; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all;} #sub .ttl01 .txt2 {font-family: 'Poppins', sans-serif; font-size: 64px; color: #000000; line-height: 84px; font-weight: 600; word-break: keep-all; padding-bottom: 4px;} #sub .ttl01 .txt2:last-child {padding-bottom: 0;} #sub .ttl01 .txt3 {font-size: 24px; color: #101010; line-height: 38px; letter-spacing: -0.05em; word-break: keep-all; margin-top: 29px;} #sub .ttl01 .txt4 {font-size: 36px; color: #101010; line-height: 50px; letter-spacing: -0.05em; word-break: keep-all; margin-top: 27px; font-weight: 700;} #sub .ttl01 .col2 {color: #ed4130;} #sub .ttl01 .col3 {color: #ababab;} #sub .tb_bx {overflow-x: auto;} #sub .tb_bx table {width: 100%; table-layout: fixed; border-top: 3px solid #101010; min-width: 700px;} #sub .tb_bx table thead th {border-bottom: 1px solid #101010; height: 80px; text-align: center; font-size: 18px; color: #101010; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all;} #sub .tb_bx table tbody tr {border-bottom: 1px solid #dedede;} #sub .tb_bx table tbody tr:last-child {border-color: #101010;} #sub .tb_bx table tbody th {height: 80px; border-right: 1px solid #101010; padding: 27px 10px; box-sizing: border-box; text-align: center; font-size: 16px; color: #101010; letter-spacing: -0.05em; font-weight: 400; word-break: keep-all;} #sub .tb_bx table tbody th.type2 {font-size: 18px; font-weight: 500; padding: 25px 10px;} #sub .tb_bx table tbody td {height: 80px; border-right: 1px solid #dedede; padding: 27px 10px; box-sizing: border-box; text-align: center; font-size: 16px; color: #666666; letter-spacing: -0.05em; word-break: keep-all;} #sub .tb_bx table tbody td:last-child {border-right: none;} #sub .tb_bx table tbody .left {padding: 27px 36px; text-align: left;} #sub .tb_bx table tbody .col2 {color: #ed4130;} #sub .tb_bx table tbody .list1 li {margin-bottom: 10px; text-indent: -10px; padding-left: 10px;} #sub .tb_bx table tbody .list1 li:last-child {margin-bottom: 0;} #sub .tb_bx table tbody ul li span {text-indent: 0;} /* works */ #works .box1 {padding: 185px 0 196px;} #works .ttl01 {max-width: 720px;} #works .top_txt span {display: block;} #works .top_txt .col2 {color: #ed4130;} #works #board {padding-top: 118px;} #works #board .list_top {padding-right: 0; display: flex; flex-flow: wrap; margin-bottom: 87px; min-height: auto;} #works #board .list_top .category_bx {width: 100%; margin-bottom: 0;} #works #board .category_bx .on_txt span {line-height: 72px;} #works #board .category_bx .chk_txt {width: 360px; padding-top: 21px;} #works #board .list_top .search_bx {width: calc(100% - 520px); max-width: 100%; height: 72px;} #works #board .list_top .search_bx input {height: 72px; font-size: 18px;} #works #board .list_top .search_bx .btn {height: 72px;} #works #board .category_bx ul {margin-top: 15px;} #works .btn_bx {max-width: 1320px; width: calc(100% - 40px); margin: 121px auto 0; box-sizing: border-box; display: block; position: relative; font-size: 0; height: 60px; z-index: 2;} #works .btn_bx::before {content: ''; width: calc(100% - 120px); height: 6px; background-color: #000000; position: absolute; left: 60px; top: 50%; margin-top: -3px; z-index: -2} #works .btn_bx::after {content: ''; width: 0; height: 6px; background-color: #ed4130; position: absolute; right: 60px; top: 50%; margin-top: -3px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; z-index: -2} #works .btn_bx div {display: inline-block; color: #000000; font-weight: 700; font-style: italic; font-family: 'Poppins', sans-serif; line-height: 28px; width: 320px; text-align: center; position: absolute; right: 0; top: 16px; background-color: #fff; z-index: -1; font-size: 0;} #works .btn_bx div span {display: inline-block; line-height: 28px; position: relative;} #works .btn_bx div span::before {content: 'VIEW MORE'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.3s, opacity 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); font-size: 40px;} #works .btn_bx div span em {font-size: 40px; display: inline-block; opacity: 0; color: #ed4130; transform: translate3d(0, -10px, 0); transition: transform 0.3s, opacity 0.3s; transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} /* introduction */ #introduction .box1 {position: relative; padding: 185px 0 0;} #introduction .box1 .con_bx {display: flex; flex-flow: wrap; margin-top: 93px; padding-bottom: 134px;} #introduction .box1 .con_bx .con_w {width: calc(33.333% - 40px); margin-right: 60px; box-sizing: border-box; border-top: 1px solid #ed4130; padding: 52px 0 0;} #introduction .box1 .con_bx .con_w:last-child {margin-right: 0;} #introduction .box1 .con_bx .num {display: block; font-family: 'Poppins', sans-serif; font-size: 74px; color: #101010; font-weight: 700; line-height: 74px;} #introduction .box1 .con_bx p {font-size: 24px; color: #ababab; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; margin-top: 9px;} /*#introduction .box1 .bg_bx {background-color: #ededed; height: 880px; position: relative; overflow: hidden; background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;}*/ #introduction .box1 .bg_bx {position: relative; overflow: hidden;} #introduction .box1 .bg_bx .bg {width: 100%;} #introduction .box1 .bg_bx .txt_w {position: absolute; width: 100%; top: 50%; left: 0; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%);} #introduction .box1 .bg_bx .txt_bx {font-family: 'Poppins', sans-serif; font-size: 174px; color: #ed4130; font-weight: 600; line-height: 144px; position: relative; height: 144px;/* left: 0; top: 50%; margin-top: -73px;*/ text-transform: uppercase; white-space: nowrap; display: flex; z-index: 1; margin-bottom: 24px;} #introduction .box1 .bg_bx .txt_bx:last-child {margin-bottom: 0;} #introduction .box1 .bg_bx .txt_bx.txt1 {width: 7276px; animation: scrollTextF 30s infinite linear;} #introduction .box1 .bg_bx .txt_bx.txt2 {width: 6124px; animation: scrollTextL 31s infinite linear; color: #fff;} #introduction .box1 .bg_bx .txt_bx.txt3 {width: 8360px; animation: scrollTextF 34s infinite linear;} #introduction .box1 .bg_bx .txt_bx span {padding-right: 20px;} @-webkit-keyframes scrollTextL { from { transform: translateX(-50%); } to { transform: translateX(0%); } } #introduction .box2 {padding: 246px 0 245px;} #introduction .box2 .con_bx {padding: 124px 0 130px; margin-top: 112px;} #introduction .box2 .con_bx .con_w {width: 50%; position: relative; padding: 0 0 0 252px; box-sizing: border-box;} #introduction .box2 .con_bx .con_w:nth-child(2n-1) {margin: 0 0 0 auto;} #introduction .box2 .con_bx .con_w:nth-child(2n) {text-align: right; padding: 0 252px 0 0;} #introduction .box2 .con_bx .con_w:nth-child(1) {padding: 0 0 0 75px; margin-bottom: 121px;} #introduction .box2 .con_bx .con_w:nth-child(2) {margin-bottom: 55px} #introduction .box2 .con_bx .num {display: inline-block; vertical-align: middle; position: absolute; left: -40px; top: 50%; margin-top: -318px; font-family: 'Pretendard', sans-serif; font-size: 540px; color: #000000; font-weight: 100;} #introduction .box2 .con_bx .con_w:nth-child(2n) .num {left: auto; right: -40px;} #introduction .box2 .con_bx .con_w:nth-child(1) .num {left: -74px;} #introduction .box2 .con_bx .txt_bx {display: inline-block; vertical-align: middle; text-align: left; padding-left: 54px;} #introduction .box2 .con_bx .con_w:nth-child(1) .txt_bx {max-width: 245px;} #introduction .box2 .con_bx .con_w:nth-child(2) .txt_bx {max-width: 260px;} #introduction .box2 .con_bx .con_w:nth-child(3) .txt_bx {max-width: 290px;} #introduction .box2 .con_bx .txt_bx strong {display: block; font-family: 'Poppins', sans-serif; font-size: 36px; line-height: 28px; color: #ed4130; font-weight: 600; word-break: keep-all;} #introduction .box2 .con_bx .txt_bx p {font-size: 17px; line-height: 28px; font-weight: 300; word-break: keep-all; color: #333333; margin-top: 23px;} #introduction .box2 .con_bx .txt_bx p span {display: inline-block;} #introduction .box2 .con_bx2 {display: flex; flex-flow: wrap; max-width: 1224px; margin: 210px auto 0; box-sizing: border-box; width: calc(100% - 40px);} #introduction .box2 .con_bx2 .p_bx {width: 25%; padding-bottom: 31.819%; display:flex; justify-content:center; align-items:center; table-layout:fixed; position: relative; overflow: hidden;} #introduction .box2 .con_bx2 .p_bx strong {display: block; width: 100%; font-family: 'Poppins', sans-serif; font-size: 36px; color: #000000; font-weight: 700; font-style: italic; text-align: center; position: absolute; z-index: 3; left: 0; top: 50%; margin-top: -27px;} #introduction .box2 .con_bx2 .p_bx.p1 .bg_bx {transform: rotate(-45deg); left: -499px; top: 44px; position: absolute; width: 1200px; height: 707px; overflow: hidden;} #introduction .box2 .con_bx2 .p_bx.p1 .bg_bx .bg_w {animation: scrollp1 10s infinite linear; white-space: nowrap; display: flex; width: 2400px; height: 707px;} @-webkit-keyframes scrollp1 { from { transform: translateX(0%); } to { transform: translateX(-50%); } } #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx {position: absolute; top: -229px; width: 2262px; height: 850px; transform: rotate(45deg); overflow: hidden; z-index: 1;} #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx .bg_w {animation: scrollp2 15s infinite linear; white-space: nowrap; display: flex; width: 4524px; height: 850px;} @-webkit-keyframes scrollp2 { from { transform: translateX(0%); } to { transform: translateX(-50%); } } #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx {position: absolute; width: 462px; height: 462px; top: 50%; left: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w {position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 1;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .round {position: absolute; width: 5px; height: 5px; left: 50%; top: 50%; border-radius: 50%; background-color: #fff; z-index: 2; /*animation: scrollp3 9s infinite linear;*/ transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); font-size: 50px; color: blue; display:flex; justify-content:center; align-items:center; table-layout:fixed; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .round:nth-child(2n-1) {background-color: #eaeaea;} /*#introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .rd2 {animation-delay: 1.5s;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .rd3 {animation-delay: 3s;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .rd4 {animation-delay: 4.5s;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .rd5 {animation-delay: 6s;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx .bg_w .rd6 {animation-delay: 7.5s;}*/ @-webkit-keyframes scrollp3 { from { width: 0; height: 0; } to { width: 900px; height: 900px; } } #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx {position: absolute; width: 440px; height: 462px; top: 50%; left: 50%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);} #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx .bg_w {position: absolute; width: 100%; height: /*calc(100% * 4)*/1790px; top: 0; left: 50%; animation: scrollp4 7s infinite linear; white-space: nowrap; display: flex; flex-flow: wrap; width: 350px; margin-left: -175px;} #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx .bg_w img {width: 100%;} @-webkit-keyframes scrollp4 { from { transform: translateY(-50%); } to { transform: translateY(0%); } } #introduction .box3 {padding: 0 0 200px;} #introduction .box3 .logo_bx {margin-top: 133px;} #introduction .box3 .logo_bx ul {max-width: 1200px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box; display: flex; flex-flow: wrap; margin-bottom: -30px;} #introduction .box3 .logo_bx ul li {width: calc(25% - 39px); margin-right: 52px; margin-bottom: 30px;} #introduction .box3 .logo_bx ul li:nth-child(4n) {margin-right: 0;} #introduction .box3 .logo_bx ul li img {width: 100%;} /* history */ #history .box1 {padding: 185px 0 121px;} #history .box1 .list_bx {margin-top: 216px;} #history .box1 .list_bx .con_bx {display: flex; flex-flow: wrap;} #history .box1 .list_bx .ttl_bx {width: 50%; position: relative;} #history .box1 .list_bx .ttl_bx div {background-color: #fff; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;} #history .box1 .list_bx .con_bx .ttl_bx.on div {position: fixed; top: 170px; left: 50%; max-width: 1224px; width: calc(100% - 40px); transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); opacity: 1;} #history .box1 .list_bx .con_bx .ttl_bx.lastOn div {position: absolute; bottom: 60px; left: 0; opacity: 1; width: 100%;} #history .box1 .list_bx .ttl_bx strong {font-size: 124px; line-height: 124px; color: #000000; word-break: keep-all; font-weight: 700; font-family: 'Poppins', sans-serif; max-width: 500px; position: relative; display: block; height: 247px;} #history .box1 .list_bx .ttl_bx.on strong {width: 50%;} #history .box1 .list_bx .ttl_bx strong span {position: absolute; right: 0; top: 123px;} #history .box1 .list_bx .ttl_bx strong .col2 {color: #ed4130;} #history .box1 .list_bx .txt_bx {width: 50%; position: relative; z-index: 5; box-sizing: border-box; padding-left: 120px;} #history .box1 .list_bx .con_bx:nth-child(1) .txt_bx {padding-top: 143px;} #history .box1 .list_bx .txt_bx .txt_w {padding-bottom: 74px;} #history .box1 .list_bx .txt_bx .year {font-family: 'Poppins', sans-serif; display: block; font-size: 58px; color: #000000; font-weight: 700; word-break: keep-all;} #history .box1 .list_bx .txt_bx .year.col2 {color: #ed4130;} #history .box1 .list_bx .txt_bx ul {margin-top: 41px;} #history .box1 .list_bx .txt_bx ul li {font-size: 20px; color: #101010; letter-spacing: -0.05em; word-break: keep-all; line-height: 30px; margin-bottom: 20px;} #history .box1 .list_bx .txt_bx ul li:last-child {margin-bottom: 0;} /* service */ #service .box1 {padding: 185px 0 256px;} #service .box1 .con_bx {margin-top: 148px;} #service .box1 .con_bx .con_w {border-top: 1px solid #dddddd; display: flex; flex-flow: wrap; padding: 0 0 96px;} #service .box1 .con_bx .con_w:last-child {padding: 0;} #service .box1 .con_bx .l_txt {width: 50%; box-sizing: border-box; padding-top: 47px;} #service .box1 .con_bx .l_txt strong {display: inline-block; padding-left: 40px; font-family: 'Poppins', sans-serif; font-size: 30px; color: #000000; font-weight: 600; word-break: keep-all; background: url(../images/icon/bar.png) no-repeat left 10px;} #service .box1 .con_bx .txt_bx {width: 50%; box-sizing: border-box; padding: 50px 0 0;} #service .box1 .con_bx .txt_bx .txt_w {width: 100%; max-width: 589px;} #service .box1 .con_bx .txt_bx strong {display: block; font-size: 24px; line-height: 38px; color: #101010; font-weight: 400; letter-spacing: -0.05em; word-break: keep-all;} #service .box1 .con_bx .txt_bx p {font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 30px; color: #a5a5a5; font-weight: 500; word-break: keep-all; margin-top: 10px;} #service .box2 .img1 {position: relative; overflow: hidden;} #service .box2 .img2 {display: flex; flex-flow: wrap; margin-top: 10px;} #service .box2 .img2 .img_w {width: calc(50% - 5px); margin-right: 10px; box-sizing: border-box; overflow: hidden;} #service .box2 .img2 .img_w:last-child {margin-right: 0;} #service .box2 img {width: 100%;} #service .box3 {padding: 246px 0 200px;} #service .box3 .con_bx {max-width: 1300px; width: calc(100% - 60px); margin: 153px auto 0; box-sizing: border-box;} #service .box3 .con_bx ul {font-size: 0; text-align: center; padding-bottom: 52px;} #service .box3 .con_bx ul li {display: inline-block; border: 1px solid #e0e0e0; position: relative; text-align: center; width: calc(20% + 20px); padding-bottom: 21.385%; box-sizing: border-box; margin-right: -20px; border-radius: 50%; margin-bottom: -52px; color: #000000;} #service .box3 .con_bx ul li:nth-child(1) {margin-left: -10px;} #service .box3 .con_bx ul li:nth-child(6) {margin-left: -10px;} #service .box3 .con_bx ul li.col2 {background-color: #f2f2f2; border-color: #f2f2f2; color: #ed4130;} #service .box3 .con_bx ul li.col3 {background-color: #ed4130; border-color: #ed4130; color: #fff;} #service .box3 .con_bx ul li.col4 {background-color: #000000; border-color: #000000; color: #fff;} #service .box3 .con_bx ul li.col5 {border-color: #ed4130; color: #ed4130;} #service .box3 .con_bx ul li.col6 {border-color: transparent; color: transparent;} #service .box3 .con_bx .num {position: absolute; top: 32px; left: 0; width: 100%; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 800;} #service .box3 .con_bx strong {position: absolute; width: 100%; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); font-family: 'Poppins', sans-serif; font-size: 26px; line-height: 34px; font-weight: 600; word-break: keep-all;} /* hosting */ #hosting .box1 {padding: 185px 0 200px;} #hosting .box1 .con_bx {margin-top: 125px; position: relative;} #hosting .box1 .con_bx::before {content: ''; width: 62px; height: 200px; background: url(../images/sub/linux_box1_bg.png) no-repeat center; position: absolute; left: 50%; margin-left: -31px; top: 0;} #hosting .box1 .con_bx .con_w {display: inline-block; width: calc(50% + 30px); box-sizing: border-box; margin-left: -64px; vertical-align: middle; position: relative; transition: none!important;} #hosting .box1 .con_bx .con_w::before {content: ''; width: 27px; height: 24px; background: url(../images/icon/bar.png) no-repeat center top; position: absolute; left: 100px; top: -12px; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; transition-delay: 0.3s;} /*#hosting .box1 .con_bx .con_w.aos-animate::before {height: 24px;}*/ #hosting .box1 .con_bx .con_w:nth-child(2n-1) {margin-left: 0;} #hosting .box1 .con_bx .con_w div {display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 200px; box-sizing: border-box; border: 1px solid rgba(237,65,48,0.5); border-radius: 100px; padding: 0 100px;} #hosting .box1 .con_bx .con_w strong {width: 100%; text-align: center; font-size: 22px; line-height: 34px; color: #101010; font-weight: 500; letter-spacing: -0.05em; word-break: keep-all; max-width: 430px; opacity: 0; -webkit-transition: opacity 0.7s; -moz-transition: opacity 0.7s; transition: opacity 0.7s; transition-delay: 0.3s;} #hosting .box1 .con_bx .con_w.aos-animate strong {opacity: 1;} #hosting .box1 .con_bx .con_w strong span {display: inline-block;} #hosting .box2 {overflow: hidden; position: relative;} #hosting .box2 img {width: 100%;} #hosting .box2 .txt_bx {animation: scrollTextF 30s infinite linear; font-family: 'Poppins', sans-serif; font-size: 146px; color: #ed4130; font-weight: 600; line-height: 146px; position: absolute; width: 5260px; height: 146px; left: 0; top: 50%; margin-top: -73px; text-transform: uppercase; white-space: nowrap; display: flex; z-index: 1;} #hosting .box2 .txt_bx span {padding-right: 20px;} #hosting .box3 {overflow: hidden; padding: 246px 0 255px;} #hosting .box3 .con_bx1 {margin-top: 113px;} #hosting .box3 .con_bx1 .con_w {border-top: 1px solid #dddddd; display: flex; flex-flow: wrap; padding: 0 0 96px;} #hosting .box3 .con_bx1 .con_w:last-child {padding: 0;} #hosting .box3 .con_bx1 .l_txt {width: 50%; box-sizing: border-box; padding-top: 47px;} #hosting .box3 .con_bx1 .l_txt strong {display: inline-block; padding-left: 40px; font-size: 30px; line-height: 44px; letter-spacing: -0.05em; word-break: keep-all; font-size: 700; background: url(../images/icon/bar.png) no-repeat left 10px;} #hosting .box3 .con_bx1 .txt_bx {width: 50%; box-sizing: border-box; padding: 50px 0 0;} #hosting .box3 .con_bx1 .txt_bx .txt_w {width: 100%;} #hosting .box3 .con_bx1 .txt_bx strong {display: block; font-size: 24px; line-height: 38px; color: #101010; font-weight: 400; letter-spacing: -0.05em; word-break: keep-all;} #hosting .box3 .con_bx1 .txt_bx strong span {display: inline-block;} #hosting .box3 .con_bx1 .txt_bx p {font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 30px; color: #a5a5a5; font-weight: 500; word-break: keep-all; margin-top: 10px;} #hosting .box3 .con_bx2 {font-size: 0; margin-top: 173px; margin-bottom: 245px;} #hosting .box3 .con_bx2 .con_w {position: relative; padding-bottom: 35.947%; width: calc(33.333% + 32px); margin-left: -48px; display: inline-block; border-radius: 50%; vertical-align: middle; mix-blend-mode: multiply;} #hosting .box3 .con_bx2 .con_w:first-child {margin-left: 0;} #hosting .box3 .con_bx2 .con_w:nth-child(1) {background-color: #ed4130;} #hosting .box3 .con_bx2 .con_w:nth-child(2) {background-color: #252f39;} #hosting .box3 .con_bx2 .con_w:nth-child(3) {background-color: #1b1d20;} #hosting .box3 .con_bx2 .con_w strong {width: 100%; text-align: center; position: absolute; left: 0; top: 50%; transform:translate(0%, -50%); -webkit-transform:translate(0%, -50%); font-size: 30px; line-height: 40px; font-weight: 700; font-family: 'Poppins', sans-serif; color: #fff; padding: 0 48px; box-sizing: border-box; font-style: italic;} #hosting .box3 .con_bx3 {display: flex; flex-flow: wrap; margin-top: 81px; margin-bottom: -73px;} #hosting .box3 .con_bx3 .con_w {width: calc(50% - 30px); margin-right: 60px; border-top: 1px solid #dddddd; box-sizing: border-box; position: relative; padding: 41px 0 0 82px;; margin-bottom: 73px;} #hosting .box3 .con_bx3 .con_w:nth-child(2n) {margin-right: 0;} #hosting .box3 .con_bx3 .num {position: absolute; left: 0; top: 47px; font-family: 'Poppins', sans-serif; font-size: 18px; color: #ed4130; font-weight: 700; letter-spacing: -0.05em;} #hosting .box3 .con_bx3 strong {display: block; font-size: 24px; color: #101010; line-height: 38px; font-weight: 400; letter-spacing: -0.05em; word-break: keep-all;} #hosting .box3 .con_bx3 p {font-size: 18px; color: #7f7f7f; letter-spacing: -0.05em; word-break: keep-all; margin-right: 2px;} #hosting .box4 {position: relative; overflow: hidden;} #hosting .box4 .img_bx {display: flex; flex-flow: wrap;} #hosting .box4 .img_bx .img_w {width: calc(50% - 5px); margin-right: 10px; overflow: hidden;} #hosting .box4 .img_bx .img_w:nth-child(2n) {margin-right: 0;} #hosting .box4 .img_bx .img_w img {width: 100%;} /*#hosting .box4 .txt_bx {animation: scrollTextF 30s infinite linear; font-family: 'Poppins', sans-serif; font-size: 146px; color: #ed4130; font-weight: 600; line-height: 146px; position: absolute; width: 5260px; height: 146px; left: 0; top: 50%; margin-top: -73px; text-transform: uppercase; white-space: nowrap; display: flex; z-index: 1;} #hosting .box4 .txt_bx span {padding-right: 20px;}*/ #hosting .box5 {padding: 246px 0 200px;} #hosting .box5 .ttl01 {margin-top: 105px;} #hosting .box5 .ttl01:first-child {margin-top: 0;} #hosting .box5 .tb_bx {margin-top: 40px;} #hosting #board .btm_btn {padding-top: 100px;} /* linux */ #sub #hosting.linux .ttl01 .txt3 {max-width: 970px;} #sub #hosting.linux .ttl01 .txt3 span {display: inline-block;} /* window */ #hosting.window .box3 .con_bx1 .con_w:nth-child(1) .txt_bx strong {max-width: 420px;} #hosting.window .box3 .con_bx1 .con_w:nth-child(3) .txt_bx strong {max-width: 540px;} /* hosting - request */ #hostingR {padding-bottom: 180px;} /* request */ #request .box1 {padding: 0 0 160px;} #request .top_txt {height: 700px; display:flex; justify-content:center; align-items:center; table-layout:fixed;} #request .top_txt strong {display: block; width: 100%; font-size: 64px; color: #000000; line-height: 94px; letter-spacing: -0.05em; word-break: keep-all; font-weight: 700; padding-top: 22px;} #request .con_bx {display: flex; flex-flow: wrap; padding-top: 7px;} #request .con_bx .r_bx {box-sizing: border-box; width: calc(100% - 448px); order: 2; position: relative; z-index: 5;} #request .con_bx .l_bx {box-sizing: border-box; width: 448px; order: 1; position: relative; z-index: 1;} #request .con_bx .l_bx .txt_bx.on {position: fixed; max-width: 1224px; left: 50%; top: 172px; box-sizing: border-box; width: calc(100% - 40px); transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%);} #request .con_bx .l_bx .txt_bx.on.lastOn {position: absolute; left: 0; transform:translate(0%, 0%); -webkit-transform:translate(0%, 0%); bottom: 0; top: auto;} #request .con_bx .l_bx .txt_w {position: relative; /*padding-top: 41px;*/ max-width: 328px; box-sizing: border-box;} #request .con_bx .l_bx .txt_w > div {position: relative;} #request .con_bx .l_bx .txt_w > div::before {content: ''; width: 27px; height: 24px; background: url(../images/icon/bar.png) no-repeat center; position: absolute; top: 0; left: 0;} #request .con_bx .l_bx .txt_w .txt {font-size: 24px; color: #333333; font-weight: 700; line-height: 42px; word-break: keep-all; margin-top: 42px; max-width: 270px;} #request .con_bx .l_bx .txt_w .txt:first-child {margin-top: 0; padding-top: 41px;} #request .con_bx .l_bx .txt_w .txt p {display: inline-block;} #request .con_bx .l_bx .txt_w .txt span {color: #b3b4b4;} #request .con_bx .l_bx .txt_w .txt em {font-style: normal;} #request .con_bx .l_bx .txt_w .txt .chkT {color: #ed4130;} #request .con_bx .l_bx .txt_w .txt .chkT::after {content: ','; padding-right: 3px;} #request .con_bx .l_bx .txt_w .txt .chkT:last-child::after {display: none;} #request .con_bx .l_bx .txt_w .btn {display: block; max-width: 328px; width: 100%; line-height: 86px; background-color: #d7d7d7; text-align: center; border-radius: 43px; font-size: 32px; color: #ffffff; font-weight: 700; letter-spacing: -0.05em; word-break: keep-all; margin-top: 55px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;} #request .con_bx .l_bx .txt_w .btn.on {background-color: #ed4130;} #request .con_bx .btm_btn {width: 100%; order: 3;} #request .con_bx .btm_btn .btn {background-color: #d7d7d7; border-color: #d7d7d7} #request .con_bx .btm_btn .btn.on {background-color: #ed4130; border-color: #ed4130;} /* contact */ #contact .box1 {position: relative; overflow: hidden;} #contact .box1 .bg_bx {overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #contact .box1 .bg_bx div {background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box;} #contact .box1 .inner_bx {height: 838px; display:flex; justify-content:center; align-items:center; table-layout:fixed; z-index: 2; position: relative;} #contact .box1 .txt_bx {width: 100%; padding-top: 90px;} #contact .box1 .txt_bx .txt1 {font-family: 'Poppins', sans-serif; font-size: 54px; line-height: 70px; color: #000000; font-weight: 600; word-break: keep-all;} #contact .box1 .txt_bx .txt2 {font-size: 22px; line-height: 32px; color: #101010; letter-spacing: -0.05em; font-weight: 500; word-break: keep-all; margin-top: 22px;} #contact .box1 .txt_bx ul {font-size: 0; margin-top: 16px;} #contact .box1 .txt_bx ul li {display: inline-block; font-family: 'Poppins', sans-serif; font-size: 22px; color: #000000; font-weight: 500; word-break: keep-all; line-height: 32px; margin-right: 40px;} #contact .box1 .txt_bx ul li:last-child {margin-right: 0;} #contact .box1 .txt_bx .col2 {color: #ed4130;} #contact .box2 {font-size: 0;} #contact .box2 .map_bx iframe {width: 100%; height: 760px;} #contact .box2 .map_bx img {width: 100%;} /* Online supporter */ #onlineSupporter {padding-bottom: 160px;} /* project */ #project {padding-bottom: 160px;} /* cardPayment */ #cardPayment {padding-bottom: 160px;} /* 전자상거래 표준약관 */ .yg{font-size:14px; line-height:24px; word-break:keep-all} .yg h2{margin-top:70px; font-size:22px; font-weight:700; color:#333;} .yg h3{margin-top:40px; margin-bottom:5px; font-size:18px; font-weight:700; color:#444;} .yg h4{margin-top:20px; margin-bottom:5px; font-size:16px; font-weight:500; color:#555;} .yg p{margin:5px 0;} .fly_w{margin-top:10px; background:#f2f2f2; box-sizing:border-box; padding:20px;} .fly_w > li:first-child{margin-top:0;} .fly_w > li > ul{margin-top:0; padding:0 0 0 15px; background:none;} .fly_w > li > ul > li{padding:0; margin:0;} .fly_w > li > ul > li:before{display:none;} .fly_w > li > ol{margin-top:0; padding:0 0 0 15px; background:none;} .fly_w > li > ol > li{padding:0; margin:0;} .fly_w > li > ol > li:before{display:none;} ul.fly_w > li{position:relative; padding-left:10px; margin-top:5px; color:#777;} ul.fly_w > li:before{content:'-'; position:absolute; top:0; left:0;} ol.fly_w > li{position:relative; margin-top:5px; color:#777;} .yg_table{overflow:hidden; margin-top:15px;} .yg_table div{float:right; width:calc(50% - 10px);} .yg_table div:first-child{float:left;} .yg_table div > strong{display:block; text-align:center; background:#333; color:#fff; font-size:15px; font-weight:500; padding:15px 0;} .yg_table div table{width:100%; box-sizing:border-box;} .yg_table div table thead th{text-align:center; color:#333; font-weight:700; border-bottom:1px solid #ddd; padding:10px 0; background:#f2f2f2;} .yg_table div table tbody th{text-align:center; border-bottom:1px solid #ddd; color:#333; padding:10px 0; font-weight:500; background:#f9f9f9} .yg_table div table tbody td{border-bottom:1px solid #ddd; padding:5px 20px; border-left:1px solid #ddd;} #privacy_box select { padding-left:10px; margin-top: 20px; width: 320px; height: 40px; font-size: 14px; border-color: #bbb;} /* PC */ @media all and (min-width:1025px){ /* 공통 */ #sub .visual_bx .v_txt .btn {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #sub .visual_bx .v_txt .btn:hover {background-color: #ed4130; border-color: #ed4130;} /*#sub .visual_bx .v_txt .btn span::before {-webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s;} #sub .visual_bx .v_txt .btn:hover span::before {background-position: left center;}*/ #sub .v_menu .tab_box .dep2_wrap {font-size: 0; text-align: center; display: block!important; height: auto!important;} #sub .v_menu .tab_box .dep2_wrap > li {display: inline-block; vertical-align: middle; margin-right: 70px;} #sub .v_menu .tab_box .dep2_wrap > li:last-child {margin-right: 0;} #sub .v_menu .tab_box .dep2_wrap > li > a {display:flex; justify-content:center; align-items:center; table-layout:fixed; font-size: 18px; color: #000; font-weight: 600; line-height: 27px; position: relative; font-family: 'Poppins', sans-serif; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s; height: 80px; position: relative;} #sub .v_menu .tab_box .dep2_wrap > li.on > a {color: #ed4130;} #sub .v_menu .tab_box .dep2_wrap > li > a:hover {color: #ed4130;} #sub .v_menu .tab_box .dep2_wrap > li.on > a::before {content: ''; width: 100%; height: 2px; background-color: #ed4130; position: absolute; bottom: 0; left: 0;} #works .btn_bx::after {-webkit-transition: width 1s; -moz-transition: width 1s; transition: width 1s;} #works .btn_bx:hover::after {width: calc(100% - 120px);} #works .btn_bx:hover div span::before {opacity: 0; transform: translate3d(0, 100%, 0);} #works .btn_bx:hover div span em {opacity: 1; transform: translate3d(0, 0, 0);} #works .btn_bx:hover div span em:nth-child(1) {transition-delay: 0.045s;} #works .btn_bx:hover div span em:nth-child(2) {transition-delay: 0.09s;} #works .btn_bx:hover div span em:nth-child(3) {transition-delay: 0.135s;} #works .btn_bx:hover div span em:nth-child(4) {transition-delay: 0.18s; } #works .btn_bx:hover div span em:nth-child(5) {transition-delay: 0.225s;} #works .btn_bx:hover div span em:nth-child(6) {transition-delay: 0.27s;} #works .btn_bx:hover div span em:nth-child(7) {transition-delay: 0.315s;} #works .btn_bx:hover div span em:nth-child(8) {transition-delay: 0.36s;} #works .btn_bx:hover div span em:nth-child(9) {transition-delay: 0.405s;} } /* 태블릿&모바일 공통*/ @media all and (max-width:1024px){ /* 공통 */ #sub .visual_bx .bg_bx div {/*background-size: unset;*/ background-position-y: 0;} #sub .visual_bx .v_txt .txt1 {font-size: 41px; line-height: 50px;} #sub .visual_bx .v_txt .txt2 {font-size: 20px; line-height: 31px; margin-top: 19px;} #sub .visual_bx .v_txt .btn {font-size: 12px; padding: 0 20px; margin-top: 10px; width: 150px;} #sub .visual_bx .v_txt .btn span {line-height: 38px;} #sub .visual_bx .v_txt .btn span::before {width: 8px; background-size: 8px auto;} #sub .visual_bx2 {min-height: 448px; padding-top: 20px; box-sizing: border-box;} #sub .visual_bx2 .txt_w .txt1 {font-size: 41px; line-height: 50px;} #sub .visual_bx2 .txt_w .txt1 span::before {height: 2px; margin-top: 2px;} #sub .visual_bx2 .txt_w .txt2 {font-size: 20px; line-height: 31px; margin-top: 19px;} #sub .v_menu .tab_box .on_txt {font-size: 14px; color: #ed4130; font-family: 'Poppins', sans-serif; font-weight: 600; padding: 0 20px; height: 45px; display:flex!important; justify-content:center; align-items:center; table-layout:fixed; cursor: pointer;} #sub .v_menu .tab_box .on_txt span {display: block; width: 100%; position: relative;} #sub .v_menu .tab_box .on_txt span::before {content: ''; width: 9px; height: 6px; background: url(../images/icon/arrow3.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} #sub .v_menu .tab_box .on_txt.on span::before {transform: rotate(180deg);} #sub .v_menu .tab_box .dep2_wrap {position: absolute; top: 45px; background-color: #ed4130; left: 0; width: 100%; box-sizing: border-box; z-index: 10; display: none;} #sub .v_menu .tab_box .dep2_wrap > li {padding: 0 20px; margin-bottom: 5px;} #sub .v_menu .tab_box .dep2_wrap > li:first-child {padding-top: 10px;} #sub .v_menu .tab_box .dep2_wrap > li:last-child {margin-bottom: 0; padding-bottom: 10px;} #sub .v_menu .tab_box .dep2_wrap > li > a {font-size: 14px; display: inline-block; line-height: 25px; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; word-break: keep-all;} #sub .ttl01 .txt1 {font-size: 20px; line-height: 31px;} #sub .ttl01 .txt2 {font-size: 32px; line-height: 30px; padding-bottom: 0;} #sub .ttl01 .txt3 {font-size: 12px; line-height: 19px; margin-top: 15px;} #sub .ttl01 .txt4 {font-size: 15px; line-height: 25px; margin-top: 15px;} #sub .tb_bx table {border-top: 2px solid #101010;} #sub .tb_bx table thead th {font-size: 12px; height: 40px;} #sub .tb_bx table tbody th {font-size: 11px; height: 40px; padding: 10px 5px;} #sub .tb_bx table tbody th.type2 {font-size: 12px; padding: 10px 5px;} #sub .tb_bx table tbody td {font-size: 11px; height: 40px; padding: 10px 5px;} #sub .tb_bx table tbody .left {padding: 10px 20px;} #sub .tb_bx table tbody .list1 li {margin-bottom: 5px; text-indent: -7px; padding-left: 7px;} /* works */ #works .box1 {padding: 65px 0 80px;} #works .ttl01 {max-width: 370px;} #works #board {padding-top: 50px;} #works #board .list_top {margin-bottom: 30px;} #works #board .category_bx .on_txt span {line-height: 40px;} #works #board .category_bx .chk_txt {padding-top: 9px; width: 270px;} #works #board .list_top .search_bx {height: 40px; width: calc(100% - 364px);} #works #board .list_top .search_bx input {height: 40px; font-size: 13px;} #works #board .list_top .search_bx .btn {height: 40px;} #works #board .category_bx ul {margin-top: 5px;} #works .btn_bx {margin-top: 30px;} #works .btn_bx::before {width: calc(100% - 60px); left: 30px; height: 3px; margin-top: -2px;} #works .btn_bx div {width: 180px;} #works .btn_bx div span::before {font-size: 20px;} #works .btn_bx div span em {font-size: 20px;} /* introduction */ #introduction .box1 {padding: 65px 0 0;} #introduction .box1 .con_bx {margin-top: 50px; padding-bottom: 65px;} #introduction .box1 .con_bx .con_w {padding: 15px 0 0;} #introduction .box1 .con_bx .num {font-size: 29px; line-height: 28px;} #introduction .box1 .con_bx p {margin-top: 5px; font-size: 12px;} /*#introduction .box1 .bg_bx {height: 480px;} #introduction .box1 .bg_bx .txt_bx {width: 4200px; font-size: 100px; animation: scrollTextF 20s infinite linear;}*/ /*#introduction .box1 .bg_bx {height: 300px; background-size: cover; background-attachment:unset;}*/ #introduction .box1 .bg_bx .txt_bx {font-size: 50px; line-height: 50px; height: 50px; margin-bottom: 5px;} #introduction .box1 .bg_bx .txt_bx.txt1 {width: 2200px; animation: scrollTextF 15s infinite linear;} #introduction .box1 .bg_bx .txt_bx.txt2 {width: 1788px; animation: scrollTextL 16s infinite linear;} #introduction .box1 .bg_bx .txt_bx.txt3 {width: 2432px; animation: scrollTextF 17s infinite linear;} #introduction .box2 {padding: 65px 0 100px;} #introduction .box2 .con_bx {padding: 25px 0 29px; margin-top: 65px;} #introduction .box2 .con_bx .con_w {padding: 0 0 0 100px;} #introduction .box2 .con_bx .con_w:nth-child(2n) {padding: 0 100px 0 0;} #introduction .box2 .con_bx .con_w:nth-child(1) {margin-bottom: 5px; padding: 0 0 0 45px;} #introduction .box2 .con_bx .con_w:nth-child(2) {margin-bottom: 0;} #introduction .box2 .con_bx .num {font-size: 200px; margin-top: -117px; left: -15px;} #introduction .box2 .con_bx .con_w:nth-child(2n) .num {right: -15px;} #introduction .box2 .con_bx .con_w:nth-child(1) .num {left: -20px;} #introduction .box2 .con_bx .txt_bx {padding-left: 24px;} #introduction .box2 .con_bx .con_w:nth-child(1) .txt_bx {max-width: 170px;} #introduction .box2 .con_bx .con_w:nth-child(2) .txt_bx {max-width: 185px;} #introduction .box2 .con_bx .con_w:nth-child(3) .txt_bx {max-width: 211px;} #introduction .box2 .con_bx .txt_bx strong {font-size: 18px; line-height: 18px;} #introduction .box2 .con_bx .txt_bx p {font-size: 12px; line-height: 19px; margin-top: 15px;} #introduction .box2 .con_bx2 {margin-top: 80px} #introduction .box2 .con_bx2 .p_bx strong {font-size: 20px; margin-top: -15px;} #introduction .box2 .con_bx2 .p_bx.p1 .bg_bx {transform: rotate(-45deg) scale(0.85); left: -424px; top: -119px;} #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx {transform: rotate(45deg) scale(0.85);} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx {transform:translate(-50%, -50%) scale(0.85); -webkit-transform:translate(-50%, -50%) scale(0.85);} #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx {transform:translate(-50%, -50%) scale(0.85); -webkit-transform:translate(-50%, -50%) scale(0.85);} #introduction .box3 {padding-bottom: 80px;} #introduction .box3 .logo_bx {margin-top: 45px;} #introduction .box3 .logo_bx ul {margin-bottom: -20px;} #introduction .box3 .logo_bx ul li {width: calc(25% - 22.5px); margin-right: 30px; margin-bottom: 20px;} /* history */ #history .box1 {padding: 65px 0 45px;} #history .box1 .list_bx {margin-top: 100px;} #history .box1 .list_bx .ttl_bx {width: 350px;} #history .box1 .list_bx .ttl_bx.on strong {width: 350px;} #history .box1 .list_bx .ttl_bx strong {font-size: 62px; line-height: 62px; height: 124px;} #history .box1 .list_bx .ttl_bx strong span {top: 62px; right: auto; left: 100px;} #history .box1 .list_bx .txt_bx {padding-left: 30px; width: calc(100% - 350px);} #history .box1 .list_bx .txt_bx .txt_w {padding-bottom: 35px;} #history .box1 .list_bx .con_bx:nth-child(1) .txt_bx {padding-top: 53px;} #history .box1 .list_bx .txt_bx .year {font-size: 29px;} #history .box1 .list_bx .txt_bx ul {margin-top: 10px;} #history .box1 .list_bx .txt_bx ul li {margin-bottom: 10px; font-size: 12px; line-height: 19px;} /* service */ #service .box1 {padding: 65px 0 80px;} #service .box1 .con_bx {margin-top: 65px;} #service .box1 .con_bx .con_w {padding-bottom: 40px;} #service .box1 .con_bx .l_txt {width: 280px; padding-top: 20px;} #service .box1 .con_bx .l_txt strong {font-size: 15px; background-size: 12px auto; background-position: left 6px; padding-left: 20px;} #service .box1 .con_bx .txt_bx {width: calc(100% - 280px); padding-top: 20px;} #service .box1 .con_bx .txt_bx .txt_w {max-width: 390px;} #service .box1 .con_bx .txt_bx strong {font-size: 13px; line-height: 21px;} #service .box1 .con_bx .txt_bx p {font-size: 12px; line-height: 19px; margin-top: 5px;} #service .box2 .img2 {margin-top: 6px;} #service .box2 .img2 .img_w {width: calc(50% - 3px); margin-right: 6px;} #service .box3 {padding: 65px 0 80px;} #service .box3 .con_bx {margin-top: 45px;} #service .box3 .con_bx .num {font-size: 16px; top: 25px;} #service .box3 .con_bx strong {font-size: 14px; line-height: 17px;} /* hosting */ #sub #hosting .ttl01 .txt2 {line-height: 37px;} #hosting .box1 {padding: 65px 0 80px;} #sub #hosting.linux .ttl01 .txt3 {max-width: 500px;} #hosting .box1 .con_bx {margin-top: 45px;} #hosting .box1 .con_bx::before {width: 33px; height: 90px; background-size: 33px 90px; margin-left: -17px;} #hosting .box1 .con_bx .con_w {width: calc(50% + 15px); margin-left: -34px;} #hosting .box1 .con_bx .con_w::before {width: 12px; background-size: 12px auto; height: 11px; top: -5px; left: 50px;} #hosting .box1 .con_bx .con_w div {padding: 0 35px; height: 90px;} #hosting .box1 .con_bx .con_w strong {font-size: 13px; line-height: 21px; max-width: 260px;} #hosting .box2 .txt_bx {width: 1822px; font-size: 50px; animation: scrollTextF 15s infinite linear;} #hosting .box3 {padding: 65px 0;} #hosting .box3 .con_bx1 {margin-top: 45px;} #hosting .box3 .con_bx1 .con_w {padding-bottom: 40px;} #hosting .box3 .con_bx1 .l_txt {width: 280px; padding-top: 20px;} #hosting .box3 .con_bx1 .l_txt strong {font-size: 15px; line-height: 25px; background-size: 12px auto; background-position: left 6px; padding-left: 20px;} #hosting .box3 .con_bx1 .txt_bx {width: calc(100% - 280px); padding-top: 20px;} #hosting .box3 .con_bx1 .txt_bx strong {font-size: 13px; line-height: 21px;} #hosting .box3 .con_bx1 .txt_bx p {font-size: 12px; line-height: 19px; margin-top: 5px;} #hosting .box3 .con_bx2 {margin: 45px auto 65px; max-width: 580px;} #hosting .box3 .con_bx2 .con_w {padding-bottom: 36.782%; width: calc(33.333% + 20px); margin-left: -30px;} #hosting .box3 .con_bx2 .con_w strong {font-size: 15px; line-height: 21px;} #hosting .box3 .con_bx3 {margin-top: 45px; margin-bottom: -35px;} #hosting .box3 .con_bx3 .con_w {width: calc(50% - 20px); margin-right: 40px; padding: 21px 0 0 52px; margin-bottom: 35px;} #hosting .box3 .con_bx3 .num {font-size: 12px; top: 24px;} #hosting .box3 .con_bx3 strong {font-size: 13px; line-height: 21px;} #hosting .box3 .con_bx3 p {font-size: 12px; line-height: 19px;} /*#hosting .box4 .txt_bx {width: 1822px; font-size: 50px; animation: scrollTextF 15s infinite linear;}*/ #hosting .box4 .img_bx .img_w {width: calc(50% - 3px); margin-right: 6px;} #hosting .box5 {padding: 65px 0;} #hosting .box5 .ttl01 {margin-top: 45px;} #hosting .box5 .tb_bx {margin-top: 20px;} #hosting #board .btm_btn {padding-top: 40px;} /* hosting - request */ #hostingR {padding-bottom: 80px;} /* request */ #request .box1 {padding-bottom: 80px;} #request .top_txt {height: 448px;} #request .top_txt strong {font-size: 32px; line-height: 47px;} #request .con_bx {padding-top: 0;} #request .con_bx .r_bx {width: calc(100% - 280px);} #request .con_bx .l_bx {width: 280px;} #request .con_bx .l_bx .txt_w {max-width: 200px;} #request .con_bx .l_bx .txt_w > div::before {background-size: 12px auto; width: 12px; height: 11px;} #request .con_bx .l_bx .txt_w .txt {font-size: 15px; line-height: 21px; max-width: 190px; margin-top: 20px;} #request .con_bx .l_bx .txt_w .txt:first-child {padding-top: 28px;} #request .con_bx .l_bx .txt_w .btn {line-height: 40px; font-size: 12px; margin-top: 25px;} /* contact */ #contact .box1 .bg_bx div {background-size: unset; background-position-y: 0; background-image: url(../images/sub/sub_v_05_m1.jpg)!important;} #contact .box1 .inner_bx {height: 448px;} #contact .box1 .txt_bx .txt1 {font-size: 35px; line-height: 43px;} #contact .box1 .txt_bx .txt2 {font-size: 15px; line-height: 21px; margin-top: 16px;} #contact .box1 .txt_bx ul {margin-top: 3px;} #contact .box1 .txt_bx ul li {font-size: 14px; margin-right: 25px;} #contact .box2 .map_bx iframe {height: 400px;} /* Online supporter */ #onlineSupporter {padding-bottom: 80px;} /* project */ #project {padding-bottom: 80px;} /* cardPayment */ #cardPayment {padding-bottom: 80px;} /* 전자상거래 표준약관 */ .yg{font-size:12px; line-height:18px;} .yg h2{margin-top:50px; font-size:18px;} .yg h3{margin-top:20px; margin-bottom:5px; font-size:15px;} .yg h4{margin-top:10px; margin-bottom:5px; font-size:14px;} .yg p{margin:5px 0;} .fly_w{margin-top:5px; padding:10px;} .fly_w > li > ul{padding:0 0 0 5px;} .fly_w > li > ol{ padding:0 0 0 5px;} ul.fly_w > li{padding-left:10px; margin-top:3px;} ol.fly_w > li{margin-top:3px;} .yg_table{margin-top:10px;} .yg_table div{width:100%; margin-top:10px;} .yg_table div:first-child{margin-top:0;} .yg_table div > strong{font-size:12px; padding:8px 0;} .yg_table div table{ table-layout:fixed; } /* .yg_table div table colgroup col:nth-of-type(1){width:80px !important;} .yg_table div table colgroup col:nth-of-type(2){width:calc(100% - 80px) !important;} */ .yg_table div table thead th{padding:5px 0;} .yg_table div table tbody th{padding:5px 0;} .yg_table div table tbody td{padding:0 10px} #privacy_box select { margin-top: 15px; width: 300px; height: 30px; font-size: 12px; } } /* 모바일 */ @media all and (max-width:768px){ /* 공통 */ #sub .visual_bx .bg_bx div {background-size: unset; background-position-y: 0;} #sub .visual_bx .bg_bx div.pc_show2 {display: block!important;} #sub .visual_bx .bg_bx div.m_show2 {display: none!important;} #sub .visual_bx .v_txt .txt1 {font-size: 29px; line-height: 37px;} #sub .visual_bx .v_txt .txt2 {font-size: 15px; line-height: 25px; margin-top: 13px;} #sub .visual_bx2 {min-height: auto; padding: 150px 0 65px;} #sub .visual_bx2 .txt_w .txt1 {font-size: 29px; line-height: 37px;} #sub .visual_bx2 .txt_w .txt2 {font-size: 15px; line-height: 25px; margin-top: 13px;} /* works */ #sub #works .visual_bx .v_txt .txt1 {max-width: 320px;} #board .category_bx .on_txt {order: 2;} #works #board .category_bx .on_txt span {line-height: 30px;} #works #board .category_bx .chk_txt {width: calc(100% - 94px); order: 3; padding-top: 5px;} #works #board .list_top .search_bx {width: 100%; order: 1; margin-bottom: 10px;} #works #board .category_bx ul {order: 4; margin-top: 0;} #works .btn_bx::before {left: 10px;} /* introduction */ #sub #introduction .visual_bx .v_txt .txt2 {max-width: 260px;} #introduction .box1 .con_bx .con_w {width: calc(33.333% - 13.333px); margin-right: 20px; padding-top: 15px;} #introduction .box1 .con_bx .num {text-align: center;} #introduction .box1 .con_bx p {text-align: center;} /*#introduction .box1 .bg_bx {height: 300px;}*/ #introduction .box1 .bg_bx {min-height: 320px;} #introduction .box1 .bg_bx .bg {object-fit: cover; position: absolute; height: 100%;} #introduction .box1 .bg_bx .txt_bx {width: 2200px; font-size: 50px; animation: scrollTextF 15s infinite linear;} #introduction .box2 .con_bx {max-width: 320px; margin: 65px auto 0;} #introduction .box2 .con_bx .con_w {width: 100%;} #introduction .box2 .con_bx .con_w:nth-child(1) {margin-bottom: 71px;} #introduction .box2 .con_bx .con_w:nth-child(2) {margin-bottom: 71px;} #introduction .box2 .con_bx .num {left: 0;} #introduction .box2 .con_bx .con_w:nth-child(1) .num {left: 0;} #introduction .box2 .con_bx .con_w:nth-child(2n) .num {right: 0;} #introduction .box2 .con_bx2 .p_bx {width: 50%; padding-bottom: 63.44%;} #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx {transform:translate(-50%, -50%) scale(1.05); -webkit-transform:translate(-50%, -50%) scale(1.05);} #introduction .box3 .logo_bx ul li:nth-child(n) {width: calc(50% - 10px); margin-right: 20px;} #introduction .box3 .logo_bx ul li:nth-child(2n) {margin-right: 0;} /* history */ #sub #history .visual_bx .v_txt .txt2 {max-width: 260px;} #sub #history .ttl01 .txt1 {max-width: 370px;} #history .box1 .list_bx {margin-top: 65px; position: relative;} #history .box1 .list_bx:before {content: ''; width: 1px; height: calc(100% - 51px); background-color: #000; position: absolute; left: 4px; top: 16px;} #history .box1 .list_bx .ttl_bx {width: 100%; display: none!important;} #history .box1 .list_bx .con_bx .ttl_bx div {position: relative!important; top: auto!important; left: auto!important; transform: none!important; opacity: 1!important;} #history .box1 .list_bx .ttl_bx strong {height: auto;} #history .box1 .list_bx .ttl_bx strong span {position: relative; left: auto; top: auto;} #history .box1 .list_bx .con_bx .txt_bx {width: 100%; padding: 0 0 0 22px!important; position: relative;} #history .box1 .list_bx .txt_bx .year {position: relative;} #history .box1 .list_bx .txt_bx .year::before {content: ''; width: 10px; height: 10px; box-sizing: border-box; border: 3px solid #000; border-radius: 50%; box-sizing: border-box; position: absolute; left: -22px; top: 50%; margin-top: -7px; background-color: #fff;} #history .box1 .list_bx .txt_bx .year.col2::before {border-color: #ed4130;} /*#history .box1 .list_bx .txt_bx .txt_w {padding-left: 120px; position: relative;} #history .box1 .list_bx .txt_bx .year {position: absolute; left: 0; top: -3px; line-height: 26px;}*/ /* service */ #sub #service .visual_bx .v_txt .txt2 {max-width: 300px;} #sub #service .ttl01 .txt1 {max-width: 370px;} #sub #service .ttl01 .txt2 {max-width: 400px;} #sub #service .ttl01 .txt3 {max-width: 400px;} #service .box1 .con_bx .l_txt {width: 100%; padding-top: 30px;} #service .box1 .con_bx .txt_bx {width: 100%; padding-top: 10px;} #service .box1 .con_bx .txt_bx .txt_w {max-width: 100%;} /*#service .box2 .img2 .img_w {margin-bottom: 10px; width: 100%; margin-right: 0;} #service .box2 .img2 .img_w:last-child {margin-bottom: 0;}*/ #service .box3 .con_bx ul {text-align: left; padding-bottom: 20px; max-width: 300px; margin: 0 auto;} #service .box3 .con_bx ul li {width: calc(50% + 20px); padding-bottom: 56%; left: -10px; margin-bottom: -20px;} #service .box3 .con_bx ul li:nth-child(1) {margin-left: 0;} #service .box3 .con_bx ul li:nth-child(6) {margin-left: 0;} #service .box3 .con_bx ul li.col6 {display: none;} /* hosting */ #hosting .box1 .con_bx::before {display: none;} #hosting .box1 .con_bx .con_w:nth-child(n) {margin-left: 0; width: 100%; margin-bottom: 15px;} #hosting .box1 .con_bx .con_w:last-child {margin-bottom: 0;} #hosting .box1 .con_bx .con_w div {height: auto; min-height: 80px;} #hosting .box2 {min-height: 320px;} #hosting .box2 img {object-fit: cover; position: absolute; height: 100%;} #hosting .box3 .con_bx1 .l_txt {width: 100%; padding-top: 30px;} #hosting .box3 .con_bx1 .l_txt strong br {display: none;} #hosting .box3 .con_bx1 .txt_bx {width: 100%; padding-top: 10px;} #hosting .box3 .con_bx1 .txt_bx .txt_w {max-width: 100%;} #hosting .box3 .con_bx2 .con_w {margin-left: -20px; width: calc(33.333% + 13px); padding-bottom: 37.396%;} #hosting .box3 .con_bx2 .con_w strong {font-size: 11px; line-height: 17px; padding: 0 12px;} #hosting .box3 .con_bx3 {margin-bottom: 0;} #hosting .box3 .con_bx3 .con_w:nth-child(n) {width: 100%; margin-right: 0;} #hosting .box3 .con_bx3 .con_w:last-child {margin-bottom: 0;} /* hosting - request */ #sub #hostingR .visual_bx2 .txt_w .txt2 {max-width: 430px;} /* request */ #request .top_txt {height: auto; justify-content: left; padding: 150px 0 65px;} #request .top_txt strong {font-size: 25px; line-height: 36px; max-width: 330px; padding-top: 0;} #request .con_bx .r_bx {width: 100%; order: 1;} #request .con_bx .l_bx {width: 100%; order: 2; padding-top: 65px;} #request .con_bx .l_bx .txt_bx.on {position: relative!important; left: auto!important; top: auto!important; transform: none!important; -webkit-transform: none!important; width: 100%!important} #request .con_bx .l_bx .txt_w {max-width: 100%;} #request .con_bx .l_bx .txt_w > div::before {display: none;} #request .con_bx .l_bx .txt_w .txt {max-width: 100%; margin: 10px auto 0; text-align: center; max-width: 260px;} #request .con_bx .l_bx .txt_w .txt:first-child {padding-top: 0;} #request .con_bx .l_bx .txt_w .btn {max-width: 145px; margin: 25px auto 0;} /* contact */ /*#contact .box1 .bg_bx div {background-image: url(../images/sub/sub_v_05_m2.jpg)!important;}*/ #contact .box1 .bg_bx div {background-image:none!important;} #sub #container .inner_bx {height: auto;} #contact .box1 .txt_bx {padding: 150px 0 65px;} #contact .box1 .txt_bx .txt1 {font-size: 23px; line-height: 28px;} #contact .box1 .txt_bx .txt2 {font-size: 13px; line-height: 21px;} #contact .box1 .txt_bx ul li {font-size: 12px; line-height: 19px; display: block; margin-right: 0;} #contact .box2 .map_bx iframe {height: 300px;} /* Online supporter */ #sub #onlineSupporter .visual_bx2 .txt_w .txt2 {max-width: 350px;} /* project */ #sub #project .visual_bx2 .txt_w .txt2 {max-width: 390px;} /* cardPayment */ #sub #cardPayment .visual_bx2 .txt_w .txt2 {max-width: 480px;} } @media all and (max-width:450px){ /* 공통 */ #sub .visual_bx {height: 540px!important} #sub .visual_bx .bg_bx div.pc_show2 {display: none!important;} #sub .visual_bx .bg_bx div.m_show2 {display: block!important;} /* introduction */ #introduction .box2 .con_bx2 .p_bx.p1 .bg_bx {transform: rotate(-45deg) scale(0.6); left: -586px; top: -169px;} #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx {transform: rotate(45deg) scale(0.6); top: -313px;} #introduction .box2 .con_bx2 .p_bx.p3 .bg_bx {transform:translate(-50%, -50%) scale(0.6); -webkit-transform:translate(-50%, -50%) scale(0.6);} #introduction .box2 .con_bx2 .p_bx.p4 .bg_bx {transform:translate(-50%, -50%) scale(0.6); -webkit-transform:translate(-50%, -50%) scale(0.6);} } @media all and (max-width:390px){ /* sec4 */ #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx {top: -323px;} } @media all and (max-width:360px){ /* sec4 */ #introduction .box2 .con_bx2 .p_bx.p2 .bg_bx {top: -340px;} }