/* **************************************** ** sub_common ** **************************************** */ /*--------------- layout ----------------*/ .sub_cont{position:relative; width:100%; margin:79px auto;} .sub_cont.no_padding{margin:0 auto;} .sub_cont .group{clear:both; box-sizing:border-box; margin: 80px auto 50px;} .sub_cont .group:last-child{margin-bottom:0px !important;} .sub_cont .group.no-padding{margin-bottom:0px !important;} .sub_cont section{display:block; margin:0; padding:0;} #sub_container{margin:0px auto; position:relative; min-height:500px; width:100%;} .sub_cont .subtitle_wrap{position:relative; text-align:center; margin-bottom:70px; display:none;} .sub_cont .subtitle_wrap h2{margin-bottom:40px; font-weight:400; color:#333;} .sub_cont .subtitle_wrap h2:after{content: ''; position: absolute; top:70px; left:50%; margin-left:-30px; width:60px; height:4px; background-color:#ddd;} .sub_cont .subtitle_wrap h6{font-weight:300; line-height:1.4; color:#666;} .sub_cont .wid_half{} .sub_cont ul,.sub_cont ol{margin-bottom:0;} .pc-br-none br{display:none;} .br-left-none{border-left:none !important;} .grid{display:grid} .columns2{grid-template-columns: repeat(2, 1fr)} .columns3{grid-template-columns: repeat(3, 1fr)} .columns4{grid-template-columns: repeat(4, 1fr)} .columns5{grid-template-columns: repeat(5, 1fr)} .columns6{grid-template-columns: repeat(6, 1fr)} .columns7{grid-template-columns: repeat(7, 1fr)} .columns8{grid-template-columns: repeat(8, 1fr)} .align-center{align-items: center} .flex{display: flex} .space-between{justify-content: space-between} @media all and (max-width:1280px){ #sub_container .container{max-width:100%;} } @media all and (max-width:1024px){ } @media all and (max-width:980px){ .sub_cont{margin:0 auto;} .sub_cont .group{margin-bottom:70px !important;} .br-none br{display:none;} } @media all and (max-width:820px){ .sub_cont{margin:0 auto;} .sub_cont .group{margin-bottom:60px !important;} .br-none br{display:none;} .pc-br-none br{display:block;} .sm-columns1{grid-template-columns: repeat(1, 1fr);} .sm-columns2{grid-template-columns: repeat(2, 1fr)} .sm-columns3{grid-template-columns: repeat(3, 1fr)} .sm-columns4{grid-template-columns: repeat(4, 1fr)} .sm-columns5{grid-template-columns: repeat(5, 1fr)} .sm-columns6{grid-template-columns: repeat(6, 1fr)} .sm-columns6{grid-template-columns: repeat(7, 1fr)} .sm-columns6{grid-template-columns: repeat(8, 1fr)} .sm-flex{display: flex} } @media all and (max-width:768px){ .sub_cont{margin:0 auto;} .sub_cont .group{margin-bottom:50px !important;} .sub_cont .wid_half{width:100% !important;} } @media all and (max-width:640px){ .sub_cont{margin:0 auto;} .sub_cont .group{margin-bottom:40px !important;} } @media all and (max-width:520px){ .sub_cont{margin:0 auto;} .sub_cont .group{margin-top:40px !important; margin-bottom:30px !important;} } @media all and (max-width:480px){ .sub_cont .group{margin-bottom:20px !important;} } .jbMenu {width: 100%;} .jbFixed {position: fixed; top: 89px; z-index: 999;} .MenuFixed {position: fixed; top: 0; z-index: 999;} /*--------------- font ----------------*/ .sub_cont h1{font-size:3.125em;}/*50px*/ .sub_cont h2{font-size:2.500em;}/*40px*/ .sub_cont h3{font-size:2.250em;}/*36px*/ .sub_cont h4{font-size:1.500em;}/*24px*/ .sub_cont h5{font-size:1.250em;}/*20px*/ .sub_cont h6{font-size:1.125em;}/*18px*/ .sub_cont p{font-size:1.1em;color:#555;}/*16px*/ .sub_cont h1,.sub_cont h2,.sub_cont h3,.sub_cont h4,.sub_cont h5,.sub_cont h6{font-weight:normal;line-height:1.5em;letter-spacing:-0.03em;word-break:keep-all;} @media all and (max-width:1280px){ } @media all and (max-width:980px){ .jbFixed {position: fixed; top: 59px; z-index: 99;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .sub_cont h1{font-size:2.813em;}/*45px*/ .sub_cont h2{font-size:2.125em;}/*38px*/ .sub_cont h3{font-size:1.875em;}/*30px*/ } @media all and (max-width:640px){ } @media all and (max-width:520px){ .sub_cont h1{font-size:2.500em;}/*40px*/ .sub_cont h2{font-size:1.875em;}/*30px*/ .sub_cont h3{font-size:1.700em;}/*24px*/ } @media all and (max-width:480px){ } @media all and (max-width:360px){ } /*--------------- align,display,float ----------------*/ .sub_cont .f_left{float:left;}.sub_cont .f_right{float:right;} .sub_cont .fl_left{position:relative;} .sub_cont .fl_left > li{float:left;} .sub_cont .fl_left.two_li > li{width:50%;} .sub_cont .fl_left.three_li > li{width:33.33%;} .sub_cont .fl_left.four_li > li{flex:1} .sub_cont .fl_left.five_li > li{width:20%;} .sub_cont .fl_left:after,.sub_cont .f_left:after,.sub_cont .f_right:after{content:'';clear:both;display:block;} .sub_cont .flex_container{position:static;margin:0 auto;} .sub_cont .flex_container h2{margin-bottom:20px;} .sub_cont .dis_flex{display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; grid-template-columns: repeat(3, 1fr)} .sub_cont .flex_container.lots{padding:0 10px;} .sub_cont .flex_container.lots .dis_flex{margin-left:-10px;margin-right:-10px;} .sub_cont .flex_container.lots .dis_flex > .obj{padding-left:10px;padding-right:10px;} .sub_cont .middle{align-items:center !important;} .sub_cont .dis_flex .nav-item.obj{padding:0;} .sub_cont .dis_flex.two > .obj{} .sub_cont .dis_flex.three > .obj{flex:1;} .sub_cont .dis_flex.four > .obj{flex:0 0 25%;-ms-flex:0 0 25%;max-width:25%;} .sub_cont .dis_flex.five > .obj{flex:0 0 20%;-ms-flex:0 0 20%;max-width:20%;} .sub_cont .dis_flex > .obj > .inner{position:relative;margin:0 auto;padding:0 20px;} .sub_cont .in_flex{display:flex;display:-ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;} .sub_cont .in_flex.two > .obj{flex:0 0 50%;-ms-flex:0 0 50%;max-width:50%;} .sub_cont .in_flex.pd_btn >.obj{padding:0 2px;} .sub_cont .shadow_none{box-shadow:none !important;} /*--------------- color ----------------*/ .sub_cont .co_ff{color:#fff !important;} .sub_cont .co_00{color:#000 !important;} .sub_cont .co_yellow{color:#ffc200 !important;} .sub_cont .co_red{color:#f24c4c !important;} .sub_cont .co_point{color:#553dcd !important;} .sub_cont .co_point2{color:#5e9e47 !important;} /*--------------- margin,padding ----------------*/ .sub_cont .mgt5{margin-top:5px;}.sub_cont .mgt10{margin-top:10px;}.sub_cont .mgt20{margin-top:20px;}.sub_cont .mgt30{margin-top:30px;}.sub_cont .mgt40{margin-top:40px;}.sub_cont .mgt50{margin-top:50px;} .sub_cont .mgl5{margin-left:5px;}.sub_cont .mgl10{margin-left:10px;}.sub_cont .mgl20{margin-left:20px;}.sub_cont .mgl30{margin-left:30px;} .sub_cont .mgb10{margin-bottom:10px;}.sub_cont .mgb20{margin-bottom:20px;}.sub_cont .mgb30{margin-bottom:30px;}.sub_cont .mgb50{margin-bottom:50px;}.sub_cont .mgb70{margin-bottom:70px;} .sub_cont .pdr5{padding-right:5px;} .middle {display: inline-block; vertical-align: middle;} /*--------------- list ----------------*/ .sub_cont .dot_list{list-style:none;margin:0;padding:0;} .sub_cont .dot_list li{float:none;position:relative;padding:5px 0 0 10px;word-break:keep-all;color:#777;} .sub_cont .dot_list li:before{content:'';position:absolute;top:15px;left:0px;width:3px;height:3px;border-radius:50%;background:#aaa;} .sub_cont .dot_list.co_white li{color:#fff;} .sub_cont .dot_list.co_white li:before{background:rgba(255,255,255,0.7);} /*--------------- box,title,price ----------------*/ .sub_cont .info_box{position:relative;padding:20px;background:#f6f9fd;border:1px solid #ddd;} .sub_cont .table_box{position:relative;padding:20px;background:#fafafa;} #sub-container #content .sub_title{text-align:center;margin:80px 0 30px 0;} #content .sub_title h2{font-size:2.500em;color:#000;font-weight:normal;} .top_title{position:relative;margin-bottom:10px;} .sub_cont .price{color:#000 !important;} .sub_cont .price em{font-size:0.875em;color:#777;padding-left:3px;font-weight:normal;} .sub_cont h2.title{margin-bottom:50px;font-size:36px;font-weight:400;color:#333} .sub_cont h2.title:after{content: '';position: absolute;top:70px;left:50%;margin-left:-30px;width:60px;height:4px;background-color:#ddd;} .sub_cont h4.title{font-size:18px;font-weight:300;line-height:1.4;color:#666;} .sub_cont .point_tgroup{background:#fafafa;padding:15px 30px;border:1px solid #eee;} .point_tgroup .t_point{position:relative;display:inline-block;margin-top:13px;margin-bottom:20px;z-index:1;color:#222;} .point_tgroup .t_point:after{content:'';display:block;width:100%;height:8.5px;background:rgba(255,233,87,0.7);position:absolute;bottom:2px;z-index:-1;} .point_tgroup p{padding:3px 0;} .image_cont{width:100%;position:relative;display:table;background-color:#f4f4f4;} .image_cont .inner{display:table-cell;vertical-align:middle;} .border-right{border-right:1px solid #ddd} @media all and (max-width:1280px){ } @media all and (max-width:980px){ .sub_cont .point_tgroup{padding:15px 20px;} .point_tgroup p{padding:0;} .point_tgroup .t_point{margin-top:10px;margin-bottom:10px;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .sub_cont .point_tgroup{padding:10px 15px;} .point_tgroup .t_point{margin-top:0px;margin-bottom:5px;} } @media all and (max-width:640px){ } @media all and (max-width:520px){ .sub_cont .flex_container h2{margin-bottom:10px;font-size:20px;} } @media all and (max-width:480px){ } /* **************************************** ** sub_contents ** **************************************** */ .sub_visual_img{background-image:url('/images/sub/sub_visual_server.jpg');} .sub_visual_img.server{background: url(/images/sub/sub_bg6.png) no-repeat,#f4f4ff;} .sub_visual_img.colocation{background-image:url('/images/sub/sub_visual_colocation.jpg'); background-size: cover;} .sub_visual_img.addsvc{background-image:url('/images/sub/sub_visual_cscenter.png');} .sub_visual_img.cscenter{background-image:url('/images/sub/sub_visual_cscenter.png');} .sub_visual_img.myidc{background-image:url('/images/sub/sub_visual_myidc.jpg'); background-size: cover;} /*--------------- sub_menu:location ----------------*/ .sub_visual_img{width:100%; height:300px; margin-top:90px; display:table; background-position:top center; background-repeat:no-repeat;} .sub_visual_img h1{display:table-cell; padding-top:0; text-align:center; vertical-align:middle; font-size:40px; color:#000; font-weight:400; letter-spacing:-0.5px;} .sub_tab_memu{width:100%; height:71px; border-bottom:1px solid #ddd;} .sub_tab_memu.tab_fixed{position:fixed; top:120px; background:#fff; z-index:99;} .sub_tab_memu .sub_tab_memu_inner{width:1160px; margin:0 auto; text-align:center; padding:0px 20px;} .sub_tab_memu .sub_tab_memu_inner > ul{display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 18px;} .sub_tab_memu .sub_tab_memu_inner > ul:after{content:''; display:block; clear:both;} .sub_tab_memu .sub_tab_memu_inner > ul > li{width:180px; height:70px; line-height:70px; text-align:center;} .tab_widthT{margin-left:20px;} .sub_tab_memu .sub_tab_memu_inner > ul > li.sub_active {border-bottom: 3px solid #553dcd;} .sub_tab_memu .sub_tab_memu_inner > ul > li a {font-size:1.063em; color:#333; display:block;} .sub_tab_memu .sub_tab_memu_inner > ul > li.sub_active a {color: #553dcd;} @media all and (max-width:1280px){ .sub_tab_memu .sub_tab_memu_inner{width:100%;padding:0px;} .sub_tab_memu .sub_tab_memu_inner > ul > li{width:auto;padding:0 20px;} } @media all and (max-width:980px){ .sub_visual_img{height:250px;} .sub_visual_img h1{display:table-cell;padding-top:0px;font-size:35px;} .sub_tab_memu{display:none;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .sub_visual_img{height:200px;} .sub_visual_img h1{font-size:30px;} .sub_tab_memu .sub_tab_memu_inner > ul > li{padding:0 15px;} } @media all and (max-width:640px){ .sub_visual_img{height:150px;} .sub_visual_img h1{font-size:25px;} } @media all and (max-width:520px){ .sub_visual_img{height:100px;} .sub_visual_img h1{font-size:20px;} } @media all and (max-width:480px){ .sub_visual_img{height:80px;} .sub_visual_img h1{font-size:18px;} } .gird{display: grid;} .flex{display: flex;} .flex-wrap{flex-wrap: wrap;} .flex-space-between{display: flex;flex-direction: row;justify-content: space-between;align-items: center;} .grid2 {display: grid; grid-template-columns: repeat(2, 1fr);} .grid3 {display: grid; grid-template-columns: repeat(3, 1fr);} .grid4 {display: grid; grid-template-columns: repeat(4, 1fr);} .grid5 {display: grid; grid-template-columns: repeat(5, 1fr);} .grid6 {display: grid; grid-template-columns: repeat(6, 1fr);} .grid7 {display: grid; grid-template-columns: repeat(7, 1fr);} .img-responsive {max-width: 100%;} .nav-wrap .nav-sub{display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; margin: 0 0 30px;} .nav-wrap ul.nav-sub{} .nav-wrap ul.nav-sub li{border-radius: 10px; border: 1px solid #ddd;} .nav-wrap ul.nav-sub li a{color: #333; font-size: 18px; display: block; width: 120px; text-align: center; border-radius: 10px; padding: 10px;} .nav-wrap ul.nav-sub li.active{border: 2px solid #553dcd;} .nav-wrap ul.nav-sub li.active > a{color: #553dcd;} @media all and (max-width:820px){ .nav-wrap {margin-bottom: 20px;} .nav-wrap .nav-sub {gap: 5px; margin: 0;} .nav-wrap ul.nav-sub li{padding: 10px;} .nav-wrap ul.nav-sub li {flex: 1; border-radius: 5px; padding: 10px;} .nav-wrap ul.nav-sub li a {font-size: 15px; width: auto; padding: 0;} } /*--------------- 카테고리 ----------------*/ /* .sub_top_bg{width: 100%; margin: 0 auto; padding: 0 20px; background: url(/images/sub/sub_bg1.png) no-repeat,#f4f4ff; border-top: 1px solid #ddd;} .sub_top .title{display: flex; flex-direction: row; justify-content: space-between; align-items: center;} .sub_top .title .txt h3{color: #553dcd; font-weight: 500; font-size: 40px;} .sub_top .title .txt p {font-size: 18px; color: #333; margin-top: 20px;} */ .sub_top_bg {width: 100%; margin: 0 auto; padding: 30px 20px 60px;} .sub_top .title .txt {gap: 20px; align-items: center; display: flex; justify-content: center; margin-top: 25px;} .sub_top .title .txt h3 {color: #fff; font-weight: bold; font-size: 40px;} .sub_top .title .txt p {font-size: 17px; color: #eee; margin-left: 20px; font-weight: 300;} .sub_top .title .location{display: flex; color: #fff; justify-content: end;} .sub_top .title .location li{display: inline-block; position: relative; margin-left: 35px; font-size: 15px; vertical-align: middle;} .sub_top .title .location li:after {content: ''; position: absolute; top: 50%; right: -22px; width: 6px; height: 11px; background: url(/images/sub/icon_arrow01.png) no-repeat 0 0; transform: translateY(-50%);} .sub_top .title .location li:last-child:after {display: none;} .sub_top_bg01{background-image: url(/images/sub/sub_bg01.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg02{background-image: url(/images/sub/sub_bg02.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg03{background-image: url(/images/sub/sub_bg03.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg04{background-image: url(/images/sub/sub_bg04.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg05{background-image: url(/images/sub/sub_bg05.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg06{background-image: url(/images/sub/sub_bg06.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg07{background-image: url(/images/sub/sub_bg07.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_top_bg08{background-image: url(/images/sub/whoisidc3.jpg); background-attachment: fixed; background-repeat: no-repeat;} .sub_category {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center;background: #fff;} .sub_category ul.cate_pc{display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 18px;} .sub_category ul.cate_pc li{width: 200px; height: 70px; line-height: 70px;} .sub_category ul.cate_pc li a{display: block;} .sub_category ul.cate_pc li.active{border-bottom: 3px solid #553dcd;} .sub_category ul.cate_pc li.active a{color:#553dcd} .scroll__wrap {overflow-x:auto; white-space:nowrap; font-size:0; border-bottom:1px solid #ddd;} .scroll__wrap .scroll--element {display: inline-block;} .scroll__wrap .active a{border-bottom: 2px solid #5444c9; color: #5444c9;} .scroll__wrap .scroll--element a{font-size: 15px; text-align: center; padding: 10px 15px; display: block;} .scroll__wrap .scroll--element + .scroll--element {} .topmenu{ overflow-x:auto; white-space:nowrap; } .cate_m {overflow: hidden;} .cate_m ul {display: flex; list-style: none; margin: auto; padding: 0; height: 100%;} .cate_m ul li {text-align: center; cursor: pointer;} .cate_m ul li a{font-size: 15px; padding: 10px 15px; display: block; } .cate_m ul li.activetop a{border-bottom: 2px solid #5444c9;} .topmenu ul li ul li ul li, .activetop > a {color: #5444c9;} /*.topmenu ul li ul li ul li, .activetop>a:after {content: ""; display: block; width:100%; border-bottom: 2px solid #5444c9; margin: 5px}*/ .cscenter_top_bg{width: 100%; margin: 0 auto; padding: 50px 20px; background: url(/images/sub/sub_bg1.png) no-repeat,#f4f4ff; border-top: 1px solid #ddd;} .cscenter_top_bg .title .txt h3 {color: #553dcd; font-weight: 500; font-size: 40px; text-align: center;} .information{margin-top: 50px;} .information .wrap{border: 1px solid #ddd; padding: 50px 80px; border-radius: 10px;} .information .wrap .cs{display: flex; align-items: center;} .information .wrap .cs .icon{width: 80px; height: 80px; line-height: 80px; background: #553dcd; border-radius: 50%; display: block; margin: 0 15px 0 0; text-align: center;} .information .wrap .cs .txt{} .information .wrap .cs .txt p{font-size: 25px; color: #000; font-weight: 500; line-height: 25px;} .information .wrap .cs .txt h2{font-weight: 600; color: #382aae; margin: 15px 0 0; line-height: 1;} .information .wrap .cs .txt h2 > small{font-weight: 300; font-size: 18px; color: #333;} .information .wrap .info{} .information .wrap .info p{font-size: 20px; margin-bottom: 10px;} .information .wrap .info p:last-child{margin-bottom: 0;} .information .wrap .info p > strong{display: inline-block; width: 75px; text-align: center; background: #eee; padding: 8px 10px; margin-right: 5px; font-size: 15px; border-radius: 10px; font-weight: 500;} .information .wrap .bt{} .information .wrap .bt a {display: inline-block; background: #553dcd; color: #fff; padding: 25px 40px; border-radius: 5em; font-size: 18px;} .prod{gap: 30px; margin-bottom: 20px;} .prod .item{background: #fff; border: 1px solid #ddd; padding:30px 25px; border-radius: 10px;} .prod .item:hover {top: -20px; box-shadow: 0 10px 20px rgb(0 0 0 / 16%); transition: all 0.2s linear; box-sizing: border-box;} .prod .item .text .prod_logo{margin-bottom: 10px;} .prod .item .text h3{font-weight: 500; font-size: 30px; line-height:35px; margin-bottom: 10px;} .prod .item .text h3 > small{font-size: 20px; color: #555; font-weight: 400;} .prod .item .text h3 > strong{color:#553dcd} .prod .item .text .price-box{text-align: right; margin: 10px 0 20px;} .prod .item .price-box p{font-size: 25px; color: #333; font-weight: 600;} .prod .item .price-box p span{font-size: 15px; font-weight: 400; color: #777; padding-left: 0;} .prod .item .text ul{display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin: 10px 10px 30px; align-items: center;} .prod .item .cloud_box{display: grid; gap: 20px; align-items: center; grid-template-columns: 1fr 4fr; margin-bottom: 10px;} .prod .item .cloud_box .cloud_title h3{font-weight: 500; font-size: 28px;} .prod .item .cloud_box .icon_box {padding: 5px;} .prod .item .cloud_explanation{margin-bottom: 10px; height: 45px;} .prod .item .h60{height: 60px;} .prod .item .cloud_explanation .button{display: block; background: #eee; border-radius: 5px; padding: 5px 20px; font-size: 14px;} .prod .item .cloud_explanation ul.link{display: flex; justify-content: space-between; margin: 0; align-items: center;} .prod .item .cloud_explanation p{font-size: 14px; line-height: 20px; margin: 5px 0 0;} .prod-button{margin: 20px 0 0;} .prod .item .logo_wrap ul{display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0 0 15px;} .prod .item .logo_wrap ul li > img{width:90px} .p1{width:50%; margin:auto;} .remote{padding: 80px 0; background: #f8f8f8; position: relative; z-index: -2;} .remote .box{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px;} .remote .box ul{display: grid; grid-template-columns: 1fr 5fr; align-items: center; background: #fff; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); padding: 20px; border-radius: 10px; gap: 20px;} .remote .box ul li{} .remote .box ul li.icon{padding: 10px;} .remote .box ul li h3{font-size:25px; font-weight: 500; margin-bottom: 5px;} .remote .box ul li p{font-size: 17px;} .remote_list {display: grid; padding-top: 30px; gap: 10px;} .remote_item {position: relative;} .remote_inner {display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; height: 100%; padding: 30px; border: 1px solid #e5e5e5; background: #fff; z-index: -2;} .remote_inner::before {content: ""; position: absolute; top: -1px; left: 50%; width: 20%; height: 2px; background-color: #77dae7; transform: translate(-50%, 0);} .remote_inner > img{width:60px;} .remote_inner h3{text-align: center; font-size: 23px; line-height: 30px; padding: 15px 0; font-weight: 500; color: #000;} .remote_inner span {position: absolute; top: 50%; left: 50%; font-weight: 800; font-size: 90px; color: #f5f5f5; line-height: 1; transform: translate(-50%, -50%); z-index: -1;} .remote_inner p{text-align: center; font-size: 16px; line-height: 25px; color: #333; font-family: 'Noto Sans KR';} .remote_brand{} .remote_brand ul{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px;} .remote_brand ul li{border: 1px solid #ddd; padding: 10px 30px;} .DAmo01{padding: 80px 0; background: #f8f8f8; position: relative; z-index: -2;} .DAmo01 .box{display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: center; justify-content: center;} .DAmo01 .box .txt ul{gap: 10px; margin-top: 20px;} .DAmo01 .box .txt ul li{padding: 20px; text-align: center; font-size: 20px; border-radius: 5px; background: #fff; box-shadow: 0 5px 5px rgb(0 0 0 / 5%);} .DAmo02{padding:50px 0} .DAmo02 .box{margin-top: 70px;} .DAmo02 .box .img{} .DAmo02 .box .txt{border-top: 2px solid #ddd; border-bottom: 1px solid #ddd;} .DAmo02 .box .txt ul{display: flex;} .DAmo02 .box .txt ul li{border-right: 1px dotted #ddd; padding: 20px 20px 50px; flex: 1;} .DAmo02 .box .txt ul li:last-child{border-right:0} .DAmo02 .box .txt ul li span{font-size: 20px; line-height: 50px; text-align: center; font-weight: 600; border-radius: 5px 0 0 5px;} .DAmo02 .box .txt ul li p{display: inline-block; font-size: 17px;} .DAmo03{display:flex; align-items:center; padding-top:50px;} .DAmo_title{position:relative; width:23%; max-width:240px; color:#fff; z-index:10;} .DAmo_title::before{content:""; display:block; padding-bottom:100%; border-radius:50%; background-color:#5444c9; background-size:cover;} .DAmo_title_inner{display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%);} .DAmo_title_inner > h5{font-size: 25px; letter-spacing: 0;} .DAmo_title::after{content:""; display:block; position:absolute; top:50%; right:0; width:10px; height:10px; border:2px solid #fff; border-radius:50%; background-color:#4c3eff; transform:translate(50%, -50%);} .point_box{display:flex; position:relative; ; width:100%;} .point_box::before{content:""; display:block; position:absolute; top:50%; left:-100px; width:300px; height:300px; background: linear-gradient(to right, rgb(0 0 0 / 5%), rgb(255 255 255)); border-radius: 50em; transform:translate(0, -50%);} .point_box_title{display:flex; align-items:center; justify-content:center; position:relative; width:100%; max-width:155px; padding-bottom:50px;} .point_box_title::before{content:""; position:absolute; top:50%; left:0; width:100%; height:0; border-bottom:1px dashed #ccc;} .point_box_title::after{content:"";} .point_box_icons{display:flex; width:100%; ; max-width:910px; padding:0 5px;} .point_box_icons-item{position:relative; width:calc(25% + 10px); margin:0 -5px;} .point_box_icons-item::before{content:""; display:block; padding-bottom:100%; border-radius:50%; box-shadow:0px 0px 20px rgba(0,0,0,.08);} .point_box_icons-item:first-child::after{content:""; display:block; position:absolute; top:50%; left:0; width:10px; height:10px; border:1px solid #4c3eff; border-radius:50%; background-color:#fff; transform:translate(-50%, -50%);} .point_box_icons-inner{display:flex; align-items:center; justify-content:center; flex-direction:column; position:absolute; top:50%; left:50%; padding-top:10px; transform:translate(-50%, -50%);} .point_box_icons-inner span{text-align: center; font-size: 20px; line-height: 25px; color: #555; font-weight: 300; margin-top:10px;} .DB_list {display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 30px; gap: 10px;} .DB_item {position: relative;} .DB_inner {display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding: 30px 20px; border: 1px solid #e5e5e5; background: #fff; z-index: -2;} .DB_inner::before {content: ""; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px; background-color: #5444c9; transform: translate(-50%, 0);} .DB_inner span {position: absolute; top: 50%; left: 50%; font-weight: 800; font-size: 90px; color: #f5f5f5; line-height: 1; transform: translate(-50%, -50%); z-index: -1;} .DB_inner p{text-align: center; font-size: 18px; line-height: 25px; color: #333;} .custom_wrap {border-top: 2px solid #333; border-bottom: 1px solid #ddd; padding: 60px 0; background: #fff;} .custom_wrap .box {border-right: 1px solid #ddd; display: block; padding: 0 50px; margin: 0;} .custom_wrap .box h3{font-size: 22px; font-weight: 500;} .custom_wrap .box .img{width: 20%; margin: 20px auto;} .custom_wrap .box:last-child{border-right: 0;} .custom_wrap .box p {color: #555; padding: 0; font-size: 17px;} .custom_wrap .box span {color: #555; letter-spacing: -0.5px;} .code .box-wrap {gap: 20px; margin: 30px 0;} .code .box{border-bottom: 1px solid #ddd;} .code .box .dt {background: #f4f4fe; padding: 20px; border-top: 2px solid #333; border-bottom: 1px solid #ddd; font-size: 20px; line-height: 25px; text-align: center; letter-spacing: -1px; color: #222; font-weight: 500;} .code .box .dt_dd{padding: 20px; font-size: 17px;} .code-analysis .box {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; margin: 50px 0;} .code-analysis .box .img img{border-radius: 20px;} .code-analysis .box .txt h5{font-size: 27px; font-weight: bold; margin-bottom: 10px; letter-spacing: -1px; color: #333;} .code-analysis .box .txt{font-size: 20px; color: #555;} .code-analysis .box .dt_dd ul li{padding: 10px 0 0 10px;} .code-analysis .box .dt_dd ul li:before{top: 22px;} .vpn_solution{} .vpn_solution .box{display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; justify-items: right;} .vpn_solution .box .txt{} .vpn_solution .box .txt h2{font-weight: bold; margin-bottom: 20px;} .vpn_solution .box .txt p{margin-bottom: 20px; font-size: 18px; font-family: 'Noto Sans KR';} .serverhosting .big_tab{width: 60%; margin: 0 auto 30px;} .serverhosting .big_tab ul{display: flex; margin: 0; gap: 10px;} .serverhosting .big_tab ul li.activeClass{border: 2px solid #553dcd; color: #553dcd;} .serverhosting .big_tab ul li{flex: 1; border: 1px solid #ddd; background: #fff; color: #333; font-size: 18px; display: block; text-align: center; border-radius: 10px; padding: 10px;} .serverhosting .big_tab ul li a{font-weight:400;} .serverhosting .tab-contents{background: #fff;} .serverhosting .tab-contents .container{padding:0} @media all and (max-width:1200px){ .DAmo02 .box{grid-template-columns: 1fr 1.5fr;} } @media all and (max-width:1024px){ .information .wrap{padding: 50px 30px;} .prod .item .text h3{font-size: 23px; line-height: 30px;} .prod .item .cloud_box .cloud_title h3{font-size: 26px;} .dt_dd ul li{font-size: 15px;} .sub_top_bg{padding: 20px 10px 50px;} .sub_top_bg01{background: url(/images/sub/sub_bg01.jpg) no-repeat -25rem -10rem;} .sub_top_bg02{background: url(/images/sub/sub_bg02.jpg) no-repeat -20rem -25rem;} .sub_top_bg03{background: url(/images/sub/sub_bg03.jpg) no-repeat -20rem -25rem;} .sub_top_bg04{background: url(/images/sub/sub_bg04.jpg) no-repeat -28rem -5rem;} .sub_top_bg05{background: url(/images/sub/sub_bg05.jpg) no-repeat -10rem -10rem;} .sub_top_bg06{background: url(/images/sub/sub_bg06.jpg) no-repeat -5rem -10rem;} .sub_top_bg07{background: url(/images/sub/sub_bg07.jpg) no-repeat -20rem -25rem;} .remote .box ul li h3{font-size: 18px;} .remote .box ul li p {font-size: 15px;} .DAmo01 .box{gap: 20px;} .DAmo02 .box{gap: 20px;} .sub_category ul.cate_pc li{height: 60px; line-height: 60px;} } @media all and (max-width:930px){ .information .wrap{padding: 50px 20px;} .information .wrap .cs .txt p{font-size: 20px; line-height: 25px;} .information .wrap .cs .txt h2{font-size: 30px; line-height: 30px;} .information .wrap .info p{font-size: 18px;} .information .wrap .bt a {padding: 20px 30px; font-size: 15px;} } @media all and (max-width:980px){ .vpn_solution .box{display: block;} .vpn_solution .box .res_mo .img{padding: 0 30px 30px; text-align: center;} .vpn_solution .box .txt h2 {margin-bottom: 10px;} .vpn_solution .box .txt p {margin-bottom: 15px; font-size: 16px;} .DAmo01 .box{display: block;} .DAmo01 .box .img{width: 50%; margin: 50px auto;} .DAmo02 .box .txt ul li p{font-size: 17px; padding: 0 10px;} .code-analysis .box{gap: 30px;} .code-analysis .box .txt{font-size: 17px;} } @media all and (max-width:820px){ .sub_top_bg {width: 100%; margin: 0 auto; padding: 0; height: auto; line-height: normal;} .sub_top_bg .title {display: block; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px 0 30px; text-align: center;} .sub_top_bg .title .txt h3 {font-size: 25px;} .sub_top_bg .title .txt p {font-size: 14px; margin-top:10px; margin-left: 0;} .sub_top_bg .title .img{display: none;} .sub_top .title .txt{display: block; margin-top: 0;} .sub_top .title .location li{font-size: 13px;} .sub_top_bg01{background: url(/images/sub/sub_bg01M.jpg) no-repeat -10rem -18rem;} .sub_top_bg02{background: url(/images/sub/sub_bg02M.jpg) no-repeat 0rem -20rem;} .sub_top_bg03{background: url(/images/sub/sub_bg03M.jpg) no-repeat -10rem -30rem;} .sub_top_bg04{background: url(/images/sub/sub_bg04M.jpg) no-repeat -10rem -10rem;} .sub_top_bg05{background: url(/images/sub/sub_bg05M.jpg) no-repeat -5rem -20rem;} .sub_top_bg06{background: url(/images/sub/sub_bg06M.jpg) no-repeat -5rem -15rem;} .sub_top_bg07{background: url(/images/sub/sub_bg07.jpg) no-repeat -30rem -35rem;} .sub_category{} .sub_category ul.cate_pc {display: grid; font-size:15px;} .sub_category ul.cate_pc li {width: auto; height: 50px; line-height: 50px;} .sub_category ul.cate_pc li a {font-size: 14px;} .cate_m ul li a{font-size: 14px;} .flex-space-between{display: block;} .information{margin-top: 20px;} .information .wrap{padding: 30px;} .information .wrap .cs{justify-content: center; width: 100%; margin-bottom: 15px;} .information .wrap .cs .icon{width: 60px; height: 60px; line-height: 60px;} .information .wrap .cs .icon .img-responsive{width: 40px;} .information .wrap .cs .txt p{font-size: 18px;} .information .wrap .cs .txt h2{font-size: 25px; margin: 5px 0 0; line-height: 25px;} .information .wrap .cs .txt h2 > small{font-size: 16px;} .information .wrap .info {text-align: center; display: flex; justify-content: center; gap: 30px;} .information .wrap .info p {font-size: 17px; margin-bottom: 0; text-align: center;} .information .wrap .info p > strong {display: block; width:auto; background: #eee; padding: 8px 10px; margin: 5px 0; font-size: 15px;} .information .wrap .bt a{display: block; padding: 15px 30px; font-size: 15px; margin: 20px auto 0; text-align: center;} .prod{display: block;} .prod .item{padding: 20px; border-radius: 10px; margin-bottom: 20px;} .prod .item .text h3 {font-size: 20px; line-height: 30px; margin-bottom: 5px;} .prod .item .text h3 > small{font-size: 15px;} .prod .item .text ul{grid-template-columns: 1fr 2fr; gap: 20px;} .prod .item .cloud_explanation p {font-size: 13px; margin:0;} .prod .item .text .price-box p{font-size: 20px;margin: 10px 0;} .prod .item .text .price-box span{font-size: 13px;} .prod .item .cloud_box .button{display: inline-block; font-size: 13px;} .prod .item .cloud_box{gap: 15px; grid-template-columns: 1fr 3fr;} .prod .item .cloud_box .cloud_title h3{font-size: 20px; line-height: 24px;} .prod .item .price-box p{font-size: 20px;} .prod .item .cloud_explanation{height: auto;} .prod .item .cloud_explanation{height: auto;} .p1{width:100%; margin:auto;} .cscenter_top_bg{padding: 30px 20px;} .cscenter_top_bg .title .txt h3{font-size: 25px;} .remote{padding: 50px 0;} .remote .box{grid-template-columns: 1fr; margin-top: 20px;} .remote .box ul{gap: 20px;} .remote .box ul li.icon{padding:0} .remote_brand h3{margin-bottom: 10px;} .remote_brand ul{gap: 5px; margin-top: 15px;} .remote_brand ul li{padding: 5px;} .DAmo01{padding: 50px 0;} .DAmo01 .box{display: block;} .DAmo01 .box .img{width: 60%; margin: auto; padding: 30px 50px;} .DAmo01 .box .txt ul{margin-top: 10px; grid-template-columns: repeat(2, 1fr);} .DAmo01 .box .txt ul li{font-size: 16px; padding: 15px;} .DAmo02 .box{display: block;margin-top: 30px;} .DAmo02 .box .img {padding: 0 30px; text-align: center;} .DAmo02 .box .txt ul {display: grid; grid-template-columns: 1fr 1fr;} .DAmo02 .box .txt ul li{border-top: 1px dotted #ddd; padding: 10px 10px 20px;} .DAmo02 .box .txt ul li:nth-child(2), .DAmo02 .box .txt ul li:nth-child(4){border-right:0;} .DAmo02 .box .txt ul li span{font-size: 15px; line-height: 40px;} .DAmo02 .box .txt ul li p {font-size: 16px; padding: 0;} .DAmo03{display: block; padding-top: 20px;} .DAmo_title{width: 100%; max-width: 220px; margin:auto;} .DAmo_title::after, .point_box_title, .point_box::before, .point_box_icons-item:first-child::after{display: none} .point_box_icons {flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; margin-top: 20px;} .point_box_icons-item{width: 100%; max-width: 170px} .DB_list{grid-template-columns: repeat(2, 1fr); gap: 5px;} .code .box-wrap{display: block; margin: 20px 0;} .code .box{margin-bottom: 15px;} .code .box .dt{padding: 10px 20px; font-size: 18px;} .code-analysis .box{display: block; margin: 30px;} .code-analysis .box .img img{border-radius: 10px;} .code-analysis .box .txt h5 {font-size: 20px;} .code-analysis .box .txt {padding: 15px 10px 0; background: #fff; font-size: 16px;} .code-analysis .box .dt_dd ul li{padding: 5px 0 0 10px;} .code-analysis .box .dt_dd ul li:before{top: 15px;} } @media all and (max-width:520px){ .prod .item .cloud_explanation .button{padding: 5px 15px; font-size: 12px;} .sub_top_bg .title{padding: 30px 0;} .sub_top .title .location{display: none;} .sub_top_bg01{background: url(/images/sub/sub_bg01M.jpg) no-repeat -20rem -20rem;} .sub_top_bg02{background: url(/images/sub/sub_bg02M.jpg) no-repeat -10rem -25rem;} .sub_top_bg03{background: url(/images/sub/sub_bg03M.jpg) no-repeat -30rem -35rem;} .sub_top_bg04{background: url(/images/sub/sub_bg04M.jpg) no-repeat -20rem -13rem;} .sub_top_bg05{background: url(/images/sub/sub_bg05M.jpg) no-repeat -20rem -20rem;} .sub_top_bg06{background: url(/images/sub/sub_bg06M.jpg) no-repeat -10rem -20rem;} .sub_top_bg07{background: url(/images/sub/sub_bg07M.jpg) no-repeat -15rem -35rem;} .DAmo01 .box .img{width: auto;} } @media all and (max-width:320px){ .information .wrap {padding: 30px 20px; margin: 0 auto;} .information .wrap .cs {align-items: center;} .information .wrap .cs .icon {width: 50px; height: 50px; line-height: 50px;} .information .wrap .cs .icon .img-responsive {width: 30px;} .information .wrap .cs .txt p {font-size: 16px; line-height: 16px;} .information .wrap .cs .txt h2 {font-size: 20px; margin: 5px 0 0;} .information .wrap .cs .txt h2 > small {font-size: 13px;} .information .wrap .info {gap: 15px;} .information .wrap .info p {font-size: 15px;} .information .wrap .info p > strong{margin: 0 0 5px; font-size: 15px; padding: 8px;} .information .wrap .bt a {padding: 10px 0; font-size: 15px; margin: 10px auto 0;} .sub_top .title .txt br{display: none;} .sub_category ul.cate_pc li a{font-size: 13px;} } /*--------------- 서버호스팅, 코로케이션 ----------------*/ .serverhosting_bg1{background: url(/images/sub/serverhosting_bg.jpg) center center no-repeat; } .serverhosting_bg2{background: url(/images/sub/serverhosting_bg2.jpg) center center no-repeat; } .serverhosting_bg {border-radius: 20px; position: relative; height: 400px; display: flex; flex-wrap: wrap; align-items: center; margin: 50px 50px 0;} .serverhosting_bg .title h2{color: #fff; font-size: 45px; line-height: 55px; margin-left: 100px; font-weight: bold; letter-spacing: -1px;} .serverhosting_bg .title p{margin: 20px 0 0 100px; color: #fff;} .serverhosting_Info {position: relative; background-color: #fff; width: 100%; padding: 40px 20px; border-radius: 20px; margin-top: -60px; z-index: -100px; box-shadow: 5px 5px 20px 5px rgb(0 0 0 / 10%);} .serverhosting_Info ul{display: flex;} .serverhosting_Info ul li {flex: 1; text-align: center; background: url(/images/sub/serverhosting_line.png) right 16px no-repeat;} .serverhosting_Info ul li:last-child {background: none;} .serverhosting_Info ul li > p{margin-top: 10px} .serverhosting_Info ul li > p > strong{font-size: 20px; font-weight: 500; color: #000; margin-bottom: 5px; display: block;} .Server_Described {display: grid; grid-template-columns: 2fr 3fr; gap: 50px; align-items: center; margin: 20px 0;} .Server_Described .LeftInfo h2{font-size: 50px; line-height: 50px; font-weight: bold; margin-bottom: 30px;} .Server_Described .LeftInfo p{font-size: 20px;} .Server_Described .RightInfo {padding: 30px 0; text-align: center; border: 1px solid #ddd; border-radius: 20px;} .Server_Described .RightInfo ul{display: flex} .Server_Described .RightInfo ul li {flex: 1; padding: 15px 20px; background: url(/images/sub/serverhosting_line.png) right 16px no-repeat;} .Server_Described .RightInfo ul li:last-child {background: none;} .Server_Described .RightInfo ul li p{font-size: 20px; line-height: 25px; margin-top: 10px; color: #000;} .server_reason{display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin-top: 50px;} .server_reason .point{} .server_reason .point .img-responsive{padding: 30px;} .server_reason .point p{text-align: center; font-size: 20px; line-height: 30px; padding: 10px 0; color: #555;} .explanation{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 80px 20px; margin: 120px 0 0;} .explanation .txt h2{font-weight: 500; margin-bottom: 20px;} .explanation .txt p{font-size: 20px; color: #555; line-height: 30px; margin-right: 50px; letter-spacing: -0.5px;} .explanation .icon ul{gap: 30px;} .explanation .icon ul li{} .explanation .icon ul li > dl{margin:0} .explanation .icon ul li > dl > dt {width: 150px; height: 150px; line-height: 150px; background: #f4f4ff; border-radius: 50%; display: block; margin: 0 20px 20px; text-align: center;} .explanation .icon ul li > dl > dd h5{text-align: center; font-size: 18px;} .explanation .icon ul li > dl > dd h5 > strong{font-size:20px; font-weight: 500; color: #000;} .firewall-icon{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 80px 20px; margin: 120px 0 0;} .firewall-icon .txt h2{font-weight: 600; margin-bottom: 10px;} .firewall-icon .txt p{font-size: 20px; color: #555; line-height: 30px; margin: 0 auto 50px;} .firewall-icon .icon ul{gap: 20px;} .firewall-icon .icon ul li{} .firewall-icon .icon ul li > dl{margin:0} .firewall-icon .icon ul li > dl > dt {width: auto; height: auto; line-height: normal; display: block; margin: 0 20px 20px; text-align: center;} .firewall-icon .icon ul li > dl > dd h5{text-align: center; font-size: 17px; color: #555;} .firewall-icon .icon ul li > dl > dd h5 > strong{font-size:20px; font-weight: 500; color: #000; margin-bottom: 5px; display: block;} .hosting-wrap{margin: 50px 0;} .hosting-wrap .box {gap: 10px;} .hosting-wrap .box .obj a{display: block; border: 1px solid #ddd;border-radius: 10px;padding: 30px 20px; height: 100%;background: #f8f8f8;} .hosting-wrap .box .obj a:hover {top: -20px; box-shadow: 0 10px 20px rgb(0 0 0 / 16%); transition: all 0.2s linear; box-sizing: border-box;} .hosting-wrap .box .obj a:hover a::before {opacity: 1; transition: all 0.2s linear;} .hosting-wrap .box .obj h5 {background: url(/images/main/title_arrow.gif) no-repeat right 7px;} .hosting-wrap .box .obj p {font-size: 14px; margin-top: 10px; color: #999; text-align: left;} .hosting-wrap .box .obj span{width: 50%;display: block;margin: 30px auto 0;} .explan{display: flex; align-items: center; justify-content: space-between; gap: 50px;} .explan h2{line-height: 1.3; font-weight: 500; margin-bottom: 20px;} .explan h3{line-height: 1.3; font-weight: 500; margin-bottom: 20px; font-size:33px;} .explan h3 > strong{color:#553dcd; font-weight: 500;} .explan p{font-size: 19px; color: #333; line-height: 30px;} .explan .btn{margin: 30px 0 0; background: #553dcd; padding: 15px 50px;} .explan .btn a {color: #fff; font-size: 20px;} .explan .txt{width:50%;} .explan .txt ul{margin: 20px 0; gap: 10px;} .explan .txt ul li{background: #f4f4ff; padding: 20px 10px; border-radius: 10px;} .addition_procedure{padding:70px 0; background:#fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;} .addition_procedure .procedure_wrap{margin:30px auto 0 auto;} .procedure_wrap{padding:0;} .procedure_wrap ul{gap: 20px;} .procedure_wrap ul li .cont{text-align:center; word-break:keep-all;} .procedure_wrap ul li .cont span.icon{display:block; margin:0 auto 10px auto; width: 60px;} .procedure_wrap .cont{padding:35px 0; border-radius:30px; background:#f4f4ff; text-align:center; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; position:relative;} .procedure_wrap .cont.active{border:1px solid #226dc8;} .procedure_wrap .cont.active h5{color:#226dc8;} .procedure_wrap .cont:after{content:''; position:absolute; top:50%; right:-16px; margin-top:-16px; width:32px; height:32px; z-index: 9; background:url('/images/sub/process_arrow.png');} .procedure_wrap ul li:last-child .cont:after{background:none;} .procedure_wrap ul li .cont h5{font-size:22px; line-height:1.3; color: #000;} .procedure_wrap ul li .cont h5 br{display:none;} .map-wrap{margin:50px 0 0;} .map-wrap h3{margin:0 0 20px;} .map-wrap .map_info {gap: 30px; margin: 20px 0 0; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch;} .map-wrap .map_info .address, .subway, .bus{flex: 1; background: #f8f8f8;} .map-wrap .map_info h3{font-size: 25px; line-height: 60px; border-bottom: 2px solid #333; background: #fff; margin:0;} .map-wrap .map_info p {padding: 20px; font-size: 17px;} .map-wrap .map_info .subway p > strong{background: #41b353; padding: 5px 10px; border-radius: 5em; font-weight: 400; font-size: 15px; color: #fff; margin-right: 3px;} .build{display: block; box-shadow: 0 0 20px rgb(0 0 0 / 10%); padding: 50px; border-radius: 30px;} .build .txt{} .build .txt h3{font-size: 30px; font-weight: 500; color: #333;} .build .txt h3 > strong{color:#553dcd} .build .txt p{color: #000; font-size: 19px; margin-bottom: 20px;} .build .txt span{display: block; margin: 20px 0 50px; color: #555;} .build .ex ul {gap: 20px;} .build .ex ul li{background: #f8f8f8; padding: 30px; border-radius: 20px;} .build .ex ul li h4{margin-bottom: 10px; font-size: 22px; font-weight: 600;} .build .ex ul li h4 > .fa-solid {font-size: 17px;} .build .ex ul li p{font-size: 17px; line-height: 25px; color: #444;} .build .ex ul li p > strong{color: #553dcd; font-weight: 400;} .build_wrap{} .build_wrap .title_box{display: grid;align-items: end;gap: 80px;} .build_wrap .title_box .title{} .build_wrap .title_box .title > span{font-size: 18px;color: #5444c9;font-weight: 600;text-transform: uppercase;} .build_wrap .title_box .title > h3{font-weight: bold;} .build_wrap .title_box .title > p{color: #333;margin-top: 10px;} .build_wrap .title_box .right_title{} .build_wrap .title_box .right_title > small{display: block;color: #888;margin-top: 10px;} .build_wrap .point_list{margin: 50px 0 80px;} .build_wrap .point_list ul{display: grid;gap: 30px;} .build_wrap .point_list ul li{} .build_wrap .point_list ul li > .icon_box{display: block;background: #5444c9;border-radius: 50em;width: 70px;height: 70px;line-height: 75px;text-align: center;margin: auto;position: relative;} .build_wrap .point_list ul li > .icon_box > i{color: #fff; font-size: 20px;} .build_wrap .point_list ul li > .point_txt{background: #f6f7f9;height: 100%;padding: 50px 30px 0;margin-top: -30px;border-radius: 10px;} .build_wrap .point_list ul li > .point_txt > h5{text-align: center;font-size: 23px;font-weight: bold;margin-bottom: 10px;color: #000;} .build_wrap .point_list ul li > .point_txt > p{font-size: 16px;font-family: 'Noto Sans KR';} .security_server{} .security_server .txt {display: grid; grid-template-columns: 1fr 2fr; margin: 0 0 50px;} .security_server .txt h3{font-weight: bold; line-height: 50px; font-size: 40px;} .security_server .txt p{font-size: 18px; color: #444;} .security_server .ex{gap: 30px;} .security_server .caution, .safety{border: 1px solid #ddd; padding: 20px; border-radius: 20px;} .security_server .caution h3, .safety h3 {font-size: 20px; border-radius: 2em; margin-bottom: 20px; padding: 10px 20px; display: inline-block; font-weight: 500; color: #000;} .security_server .caution h4, .safety h4{font-size: 21px; color: #000; margin: 30px 0 10px;} .security_server .caution p, .safety p {padding: 10px; color: #333;} .security_server .caution h3{background: #fef1f1;} .security_server .caution p{background: #fef1f1;} .security_server .safety h3{background: #dbf1fe;} .security_server .safety p{background: #dbf1fe;} .addsvc_box{padding: 50px 20px; margin: 120px 0 0; background: #f8f8f8;} .addsvc_box .txt h2{font-weight: 600; margin-bottom: 20px; font-size: 37px;} .addsvc_box .txt p{font-size: 21px; color: #555; line-height: 30px;} .addsvc_box .icon{background: #fff; padding: 50px; border-radius: 10em; box-shadow: 5px 10px 15px rgb(0 0 0 / 5%);} .balancing_service{} .balancing_service .l4_lvs{gap:10px;} .balancing_service .l4_lvs h3{text-align: center; font-size: 23px; background: #f8f8f8; padding: 10px;} .balancing_service .l4_lvs h3 > strong{color: #553dcd;} .balancing_service .l4_lvs .l4, .balancing_service .l4_lvs .lvs{} .balancing_service .l4_lvs .l4 ul, .balancing_service .l4_lvs .lvs ul{gap: 10px; margin: 20px 0 0;} .balancing_service .l4_lvs .l4 ul li, .balancing_service .l4_lvs .lvs ul li{padding: 10px 0; text-align: center;} .balancing_service .l4_lvs .l4 ul li > dl, .balancing_service .l4_lvs .lvs ul li > dl{margin: 0;} .balancing_service .l4_lvs .l4 ul li > dl > dt, .balancing_service .l4_lvs .lvs ul li > dl > dt{width: 120px; height: 120px; line-height: 120px; background: #f4f4fe; border-radius: 50%; display: block; margin: 0 auto 20px auto; text-align: center;} .balancing_service .l4_lvs .l4 ul li > dl > dt > img, .balancing_service .l4_lvs .lvs ul li > dl > dt > img{width: 60%;} .balancing_service .l4_lvs .l4 ul li > dl > dd, .balancing_service .l4_lvs .lvs ul li > dl > dd{font-size: 15px; color: #777; word-break: keep-all;} .balancing_service .l4_lvs .l4 ul li > dl > dd h5, .balancing_service .l4_lvs .lvs ul li > dl > dd h5{margin-bottom: 10px; color: #553dcd; font-size: 20px; font-weight: 500;} .support .support_list ul{gap: 20px; margin-top: 30px; grid-template-columns: repeat(4, 1fr);} .support .support_list ul li{background: #fff; border-radius: 5px; padding: 30px; border: 1px solid #eee; box-shadow: 5px 5px 0 0 #eee;} .support .support_list ul li > h4{font-weight: bold; margin-bottom: 10px; color: #333; font-size: 20px;} .support .support_list ul li > p{color:#555; word-break: break-all;} .colocation_reason{padding:0;} .colocation_reason ul{display: flex; gap: 10px;} .colocation_reason ul li{flex: 1;} .colocation_reason .cont{border-radius:10px;border:1px solid #ddd;position: relative;text-align: center;padding: 20px;background: #f8f8f8;} .colocation_reason .cont:after{content:'';position:absolute;top:50%;right:-21px;margin-top:-16px;width:32px;height:32px;background:url('/images/sub/process_arrow.png'); z-index: 9;} .colocation_reason ul li:last-child .cont:after{background:none;} @media all and (max-width:1280px){ .firewall-icon .icon ul{gap:0} .firewall-icon .icon ul li > dl > dt{width: auto; height: auto; line-height: normal;} .security_server .txt{margin: 0 40px 50px;} .security_server .txt h3{font-size: 35px;} } @media all and (max-width:1024px){ .hosting-wrap .box .obj a{height: 100%;} .map-wrap{margin: 0;} .map-wrap .map_info {gap: 20px;} .map-wrap .map_info .address, .subway, .bus{margin-bottom: 15px;} .map-wrap .map_info h3{font-size: 21px; line-height: 50px;} .map-wrap .map_info p {padding: 20px 10px; font-size: 14px;} .map-wrap .map_info .subway p > strong{font-size: 13px;} .explan{margin: 0 20px;} .server_reason{margin: 20px 15px;} .server_reason .point .img-responsive {padding: 20px;} .server_reason .point p{font-size: 16px; line-height: 20px;} .explanation .icon ul{gap: 20px;} .explanation .txt p{margin-right: 20px;} .firewall-icon .icon ul li > dl > dt{width: auto; height: auto; line-height: normal; padding: 10px;} } @media all and (max-width:820px){ .serverhosting_bg1{height: 200px !important;} .serverhosting_bg{height: 280px; justify-content: center; margin: 30px 20px 0;} .serverhosting_bg .title h2{margin-left:0; text-align: center; font-size: 30px; line-height: 40px;} .serverhosting_bg .title p{margin:10px 20px 0; color: #fff; text-align: center;} .serverhosting_Info{padding: 20px; margin-top: -30px;} .serverhosting_Info ul {display: grid; grid-template-columns: 1fr 1fr; justify-content: center;} .serverhosting_Info ul li {text-align: center; background: none; border-bottom: 1px dashed #ddd; border-right: 1px dashed #ddd; margin: 0; padding: 15px;} .serverhosting_Info ul li:nth-child(2), .serverhosting_Info ul li:nth-child(4), .serverhosting_Info ul li:nth-child(6){border-right:0} .serverhosting_Info ul li:nth-child(5), .serverhosting_Info ul li:nth-child(6){border-bottom:0} .serverhosting_Info ul li > .icon{width:60px;} .serverhosting_Info ul li > p {margin-top: 0; font-size: 15px; margin-left: 10px;} .serverhosting_Info ul li > p > strong{font-size: 18px;} .Server_Described{display: block;} .Server_Described .LeftInfo{text-align: center;} .Server_Described .LeftInfo h2{font-size: 35px; margin-bottom: 15px;} .Server_Described .LeftInfo p {font-size: 17px;} .Server_Described .RightInfo{padding: 20px 0; margin: 20px 0;} .Server_Described .RightInfo ul{flex-direction: column; display: grid; grid-template-columns: repeat(2, 1fr);} .Server_Described .RightInfo ul li{background: none;} .Server_Described .RightInfo ul li p {font-size: 17px; line-height: 22px;} .server_reason{grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 0;} .server_reason .point .img-responsive {padding: 0 10px 10px;} .server_reason .point p{font-size: 15px; line-height: 20px;} .explanation{margin-top: 80px; padding: 50px 0;} .explanation .icon ul{gap: 20px;} .explanation .icon ul li > dl > dt {width: 120px; height: 120px; line-height: 80px; padding: 20px; margin: 10px auto;} .explanation .txt p{font-size: 14px; line-height: 20px; margin: 15px 0; text-align: center;} .explanation .txt h2{margin-bottom: auto; text-align: center;} .explanation .icon ul li > dl > dd h5{font-size: 15px; line-height: 20px;} .firewall-icon{margin-top: 50px; padding: 50px 0;} .firewall-icon .icon ul{gap: 10px; grid-template-columns: repeat(3, 1fr);} .firewall-icon .icon ul li > dl > dt {width: 80px; height: 80px; line-height: 40px; padding: 10px; margin: 10px auto;} .firewall-icon .txt p{font-size: 15px; line-height: 25px; text-align: center; width: 100%; margin: 0 auto 30px; letter-spacing: -1px; color: #555;} .firewall-icon .txt h2{font-weight: 600; margin-bottom: 10px; text-align: center;} .firewall-icon .icon ul li > dl > dd h5{font-size: 13px; line-height: 17px;} .firewall-icon .icon ul li > dl > dd h5 > strong{font-size: 17px;} .explan{display: grid; gap: 20px; margin: 0; justify-content: normal;} .explan .img{width: 80%; margin: auto;} .explan h2{text-align: center;} .explan h3{text-align: center; font-size:20px; margin-bottom: 10px;} .explan p{font-size: 16px; line-height: 25px; text-align: center;} .explan .btn a {color: #fff; font-size: 18px;} .explan .btn{display: block; margin: 20px 0 0;} .explan .txt{width:100%;} .explan .txt ul{margin: 20px 0 0; grid-template-columns: repeat(2, 1fr);} .explan .txt ul li{line-height: 18px; padding: 15px; font-size: 15px;} .addition_procedure .procedure_wrap{margin:20px auto 0 auto;} .procedure_wrap ul{gap:5px;} .procedure_wrap .cont{padding: 20px 5px; border-radius: 10px; height: 100%; display: block; align-items: center;} .procedure_wrap ul li .cont span.icon {width: 40px;} .procedure_wrap ul li .cont h5 {font-size: 14px;} .procedure_wrap .cont:after {right: -10px; margin-top: -9px; width: 18px; height: 18px; background-size: 18px 18px; z-index: 999;} .map-wrap .map_info{display: block;} .map-wrap .map_info p {padding: 20px; font-size: 16px; background: #f8f8f8; height: auto;} .build_wrap .title_box {display: block; margin-bottom: 20px;} .build_wrap .title_box .title {margin-bottom: 20px; text-align: center;} .build_wrap .title_box .right_title{text-align: center;} .build_wrap .point_list{margin: 50px 0 0;} .build_wrap .point_list ul{display: block;} .build_wrap .point_list ul li > .icon_box{width: 50px; height: 50px; line-height: 55px; margin: 30px auto 0;} .build_wrap .point_list ul li > .icon_box > i{font-size: 18px;} .build_wrap .point_list ul li > .point_txt{height: 100%; padding: 50px 30px 30px;} .build_wrap .point_list ul li > .point_txt > h5{font-size: 18px;} .build_wrap .point_list ul li > .point_txt > p{font-size: 15px;} .build{padding: 30px 20px 10px;} .build .txt {padding: 10px 10px 0;} .build .txt h3 {font-size: 26px;} .build .txt p {font-size: 16px; margin: 10px 0 20px;} .build .txt span {margin: 10px 0 30px;} .build .ex ul{display: block;} .build .ex ul li{margin-bottom: 20px; padding: 25px;} .build .ex ul li h4{font-size: 20px;} .build .ex ul li p{font-size: 15px;} .security_server .txt{display: block; padding: 20px; margin: 0 0 20px;} .security_server .txt h3 {font-size: 25px; text-align: center; line-height: 35px; margin-bottom: 15px;} .security_server .txt p{font-size: 15px;} .security_server .ex {display: block; margin: 0;} .security_server .caution, .safety{margin-bottom: 20px;} .security_server .caution h3, .safety h3{font-size: 15px;} .security_server .caution h4, .safety h4{font-size: 18px; margin: 20px 0 10px;} .addsvc_box {margin: 40px 0 0; padding: 50px 0;} .addsvc_box .txt {text-align: center;} .addsvc_box .txt h2{font-size: 25px;} .addsvc_box .txt p{font-size: 16px; line-height: 25px; margin-bottom: 20px;} .addsvc_box .txt br{display: none} .addsvc_box .icon {text-align: center; width: 150px; height: 150px; line-height: 150px; margin: 40px auto 0; padding:0;} .addsvc_box .icon img{width: 50%;} .balancing_service .l4_lvs{display: block;} .balancing_service .l4_lvs .l4{} .balancing_service .l4_lvs .l4, .balancing_service .l4_lvs .lvs{margin: 15px;} .balancing_service .l4_lvs h3{font-size: 19px;} .balancing_service .l4_lvs .l4 ul, .balancing_service .l4_lvs .lvs ul{gap: 5px; margin: 20px 0;} .balancing_service .l4_lvs .l4 ul li, .balancing_service .l4_lvs .lvs ul li {border: 0; padding: 0; text-align: center;} .balancing_service .l4_lvs .l4 ul li > dl > dt, .balancing_service .l4_lvs .lvs ul li > dl > dt {width: 70px; height: 70px; line-height: 70px; background: #f4f4fe; border-radius: 50%; display: block; margin: 0 auto 10px auto; text-align: center;} .balancing_service .l4_lvs .l4 ul li > dl > dt > img, .balancing_service .l4_lvs .lvs ul li > dl > dt > img {width: 55%;} .balancing_service .l4_lvs .l4 ul li > dl > dd, .balancing_service .l4_lvs .lvs ul li > dl > dd{font-size: 13px;} .balancing_service .l4_lvs .l4 ul li > dl > dd h5, .balancing_service .l4_lvs .lvs ul li > dl > dd h5{font-size: 15px; margin-bottom: 5px;} .support {margin: 20px 0;} .support .support_list{padding: 10px 0;} .support .support_list ul{gap: 15px; margin-top: 10px; grid-template-columns: 1fr 1fr;} .support .support_list ul li {padding: 15px; border-radius: 10px;} .support .support_list ul li > p {color: #555; font-size: 14px;} .colocation_reason ul {display: block;} .colocation_reason ul li{margin-bottom: 10px;} .colocation_reason .cont{padding: 15px;} .colocation_reason .cont:after{display:none;} } @media all and (max-width:520px){ .explanation .icon ul li > dl > dt {width: 100px; height: 100px; line-height: 50px; padding: 20px; margin: 10px auto;} } @media all and (max-width:320px){ .firewall-icon{padding: 50px 0;} .firewall-icon .icon ul{grid-template-columns: repeat(2, 1fr);} .explan h3{font-size: 18px;} .explan p{font-size: 15px; line-height: 20px;} .explan .btn a{font-size: 16px;} } .hosting .hosting_best{padding:170px 0px 80px; background:url('/images/main/main_bg.png') no-repeat center center/cover;} .hosting .colo_best{padding:170px 0px 80px; background:url('/images/main/main_bg.png') no-repeat center center/cover;} .product_wrap .dis_flex > .obj > .inner{padding:30px; background:#fff; border:1px solid #d9d9d9; border-radius:10px; transition:transform 0.3s;} .product_wrap .dis_flex > .obj > .inner:hover{border:1px solid #553dcd; box-shadow:6px 6px 15px rgba(0,0,0,0.2); -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; transform:translate(0px, -10px);} .product_wrap .lots > .dis_flex > .obj > .inner{padding:20px 20px 40px 20px;} .product_wrap .best{position:absolute; top:-1px; left:-1px; width:70px; height:40px; font-size:15px; color:#fff; line-height:40px; background:#ff4800; border-radius:10px 0 0 0; text-align:center} .product_wrap .hit{position:absolute; top:-1px; left:-1px; width:70px; height:40px; font-size:15px; color:#fff; line-height:40px; background:#0063a9; border-radius:10px 0 0 0; text-align:center} .product_wrap .box_conts{} .product_wrap .box_conts h3.p_title{font-size:25px; font-weight:500; color:#333;} .product_wrap .box_conts .p_logo{height:50px} .product_wrap .box_conts .price-box{text-align: right; margin-bottom: 20px;} .product_wrap .box_conts .price-box p.p_through{height: 20px; line-height: 20px;} .product_wrap .box_conts .price{font-size:18px; font-weight:300; text-decoration:line-through; color: #555 !important;} .product_wrap .box_conts .price_dw{font-size:32px; color:#382aae; font-weight:600;} .product_wrap .box_conts .price_dwb{font-size:32px; color:#333; font-weight:600; text-align: right; margin-bottom: 20px;} .product_wrap .box_conts .price.small{font-size:24px;} .product_wrap .box_conts .price.small em{font-size:16px; padding-right:10px;} .product_wrap .box_conts span.won{font-size:15px; font-weight:400; color:#777; padding-left:5px;} /*.product_wrap .box_conts .p_img{margin:20px auto; height:90px; text-align:center; overflow:hidden;}*/ .product_wrap .box_conts .p_img{margin:0; text-align:center; padding: 20px;} .product_wrap .box_conts .p_img img{max-height:170px} .product_wrap .box_conts dl{display:block; margin-inline-start:0px; margin-inline-end:0px; font-size: 15px; font-weight: 300;} .product_wrap .box_conts dl.min-h{/*min-height:70px; */ font-size: 18px;} .product_wrap .box_conts dl dt{float:left; width:40px; font-weight:500; overflow:hidden; clear:both; text-align:left; text-overflow:ellipsis; white-space:nowrap; margin-right: 5px;} .product_wrap .box_conts dl dd{color:#777; letter-spacing: 0;} .product_wrap .box_conts dl.long_dt dt,.product_wrap dl.long_dt dd{line-height:1.5;} .product_wrap .box_conts dl.long_dt dt{width:100px;} .product_wrap .box_conts dl.long_dt dd{margin-left:110px;} .product_wrap dl.left_none{} .product_wrap dl.left_none dt,.product_wrap dl.left_none dd{width:100%; margin:0; float:none;} .product_wrap dl.left_none dt{margin-bottom:2px;} .product_kind{position:relative;} .product_kind .tab-content{padding:50px 0 0;} .product_kind .nav-tabs .obj{padding-left:2px; padding-right:2px;} .product_kind .nav-tabs .obj a{width:100%;} .product_kind .product_more{width:100%; padding:0 15px; margin:50px auto 0 auto;} .product_kind .product_more i{padding-left:10px; font-size:1.2em;} .product_wrap .image_cont h2{margin-bottom:10px; font-size:33px;} .image_cont.serverhosting_image{padding:100px 0; background-image:url('/images/sub/serverhosting_image.jpg'); color:#fff;} .serverhosting_image .image{margin:50px auto 30px auto;} .serverhosting_image .content{width:70%; margin:0 auto;} .serverhosting_image .content ul{} .serverhosting_image .content ul li.obj{padding:0px;} .serverhosting_image .content ul li h5{margin:0 5px; padding:20px 0; border:1px solid rgba(255,255,255,0.48); color:#fff; background:rgba(0,0,0,0.11); display:block;} .image_cont.colocation_image{padding:100px 0; background-image:url('/images/sub/colocation_image.jpg'); color:#fff;} .colocation_image .content{margin-top:50px;} .colocation_image .content ul li.obj .cont{color:#fff; padding:40px 0; border:1px solid rgba(255,255,255,0.33); background:rgba(0,0,0,0.11); display:block; position:relative;} .colocation_image .content ul li .cont:before{content:''; position:absolute; top:50%; left:-60px; width:80px; height:80px; margin-top:-40px; border-radius:50%; background-image:url('/images/sub/image_plus.png'); background-color:rgba(255,255,255,0.48); background-position:center center; background-repeat:no-repeat;} .colocation_image .content ul li:first-child .cont:before{content:none;} .colocation_image .content p{color:#fff; padding-top:10px;} .pd-bt0{padding-bottom:0px !important;} .hosting_cont .flex_container{position:relative; margin-top:20px;} .hosting_cont .dis_flex .obj{padding-left:5px; padding-right:5px;} .hosting_cont .dis_flex .obj .inner{display:block; padding:40px 20px; text-align:left; transition: transform 0.3s;} .hosting_cont .dis_flex .obj a:hover{box-shadow:10px 10px 20px rgba(0,0,0,0.2);} .hosting_cont .dis_flex .obj .inner h5{background:url('/images/main/title_arrow.gif') no-repeat right 7px;} .hosting_cont .dis_flex .obj .inner p{font-size:0.938em; margin-top:15px; color:#999; text-align:left;} .hosting_cont .dis_flex .obj .inner .image{display:block; margin:40px auto ; text-align:center;} .hosting_cont .dis_flex .obj .inner .image img{max-width:150px;} .hosting_cont .dis_flex .obj .inner:hover{border:1px solid #226dc8; -webkit-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; -ms-transition:all 0.3s ease-out; transition:all 0.3s ease-out; transform: translate(0px, -10px);} .hosting.product_wrap .tab_wrap .dis_flex.two.nav-tabs, .addition.product_wrap .tab_wrap .dis_flex.two.nav-tabs{display:inline-flex;justify-content:center;margin-left:0px;margin-right:0px;} @media all and (max-width:1280px){ .hosting .hosting_best,.hosting .colo_best{padding:150px 20px 60px;} .sub_cont .group.product_kind.container, .sub_cont.hosting.detail_wrap .bottom_btn{padding:0 15px;} .product_wrap .image_cont h2{margin-bottom:7px;font-size:30px;} .hosting .hosting_best .flex_container, .product_kind .flex_container, .hosting .colo_best .flex_container, .detail_wrap .detail_top .flex_container, .whoisidc .whoisidc_bottom .flex_container, .sub_cont.myidc .group.container .table_wrap, .sub_cont.myidc .group.container .tab-content, .sub_cont.myidc .group.container form .board_search, .sub_cont.request .group.container .table_wrap, .sub_cont.consult .group.container .table_wrap{position:relative;padding:0;} .sub_cont .group.container form .board_search, .sub_cont .group.container form .table_wrap, .sub_cont .group.container .table_wrap, .sub_cont .faq_cont.container, .sub_cont.whoisidc .group.container, .sub_cont.myidc .group.container, .sub_cont.request .group.container{} .hosting_cont .flex_container{} .hosting .hosting_best .dis_flex.three, .product_kind .dis_flex.three, .hosting_cont .dis_flex.five, .colo_best .dis_flex.three, .detail_wrap .detail_top .flex_container .dis_flex.two, .whoisidc .whoisidc_bottom .dis_flex.three{display:inline-block;width:100%;flex-wrap:nowrap;margin-left:0px;margin-right:0px;} .product_wrap .box_conts .p_img{padding: 0 20px;} } @media all and (max-width:1024px){ .product_wrap .box_conts dl{font-size: 11px;} } @media all and (max-width:980px){ .sub_cont .flex_container .grid3{grid-template-columns: repeat(1, 1fr);} .hosting .hosting_best,.hosting .colo_best{padding:50px 20px 50px; background:#e8f1f6;} .hosting .hosting_best .dis_flex > .obj > .inner{padding:50px 20px;} .product_wrap .dis_flex > .obj > .inner{padding:40px 20px;} .hosting .hosting_best .dis_flex.three > .obj, .product_kind .dis_flex.three > .obj, .hosting_cont .dis_flex.five > .obj, .colo_best .dis_flex.three > .obj, .detail_wrap .detail_top .flex_container .dis_flex.two > .obj, .whoisidc .whoisidc_bottom .dis_flex.three > .obj{padding-left:0px; padding-right:0px; padding-top:10px; padding-bottom:10px; width:100%; max-width:100%; -ms-flex:0 0 100%; flex:0 0 100%; flex:0 0 100%;} .product_wrap .box_conts{position:relative;} .product_wrap .box_conts .p_logo{} .product_wrap .box_conts .p_logo2{width:150px; height:150px; line-height:150px; position:absolute; top:0px; left:0px; text-align:center; border-radius:50%; background:#eee;} .hosting .hosting_best .dis_flex > .obj > .inner .box_conts h3.p_title{padding-left:50px; height:50px;} .product_wrap .box_conts h3.p_title{font-size:20px; padding-left:0px; margin: 10px 0 0;} .product_wrap .box_cont.alone h3.p_title, .product_wrap .box_cont.alone h6, .box_kind.management .box_cont .cont_inner h3.p_title{padding-left:200px;} .product_wrap .box_cont.alone h6{margin-top:10px;} .product_wrap .box_conts .price{font-size:16px;} .product_wrap .box_conts p.p_through{padding-left:200px;} .product_wrap .box_conts .price_dw, .product_wrap .box_conts .price_dwb{font-size:30px; padding-left:200px;} .product_wrap .box_conts .prod_img_txt_box{display: grid; grid-template-columns: 1fr 4fr; gap: 20px; align-items: center; margin: 20px 0;} .product_wrap .box_conts .p_img{/*position:absolute; top:50px; left:0px; margin:0 auto;*/padding:0} .product_wrap .box_conts .price.small{font-size:20px;} .product_wrap .box_conts .price.small em{font-size:15px; padding-right:5px;} .product_wrap .box_conts span.won{font-size:14px; padding-left:0px;} .product_wrap .box_conts .p_img img{max-height:120px;} .product_wrap .box_conts dl{margin: 0; padding-left:0;} .product_wrap .box_conts dl.left_none dt{margin-bottom:10px; width:100%;} .product_wrap .box_conts dl.left_none dd{margin-left:0px;} .product_wrap .box_conts dl.long_dt dt{width:80px;} .product_wrap .box_conts dl.long_dt dd{margin-left:80px;} .product_wrap .box_conts .in_flex.two.pd_btn{} .product_kind .tab-content{padding:40px 0 0 0;} .image_cont.serverhosting_image, .image_cont.colocation_image{padding:80px 20px;} .serverhosting_image .content{width:90%;} .hosting_cont .dis_flex.five .obj .inner{position:relative; display:inline-block; width:100%; padding:30px !important;} .hosting_cont .dis_flex.five .obj .inner h5{padding-left:100px;} .hosting_cont .dis_flex.five .obj .inner p{padding-left:100px; margin-top:5px;} .hosting_cont .dis_flex.five .obj .inner p br{display:none;} .hosting_cont .dis_flex.five .obj .inner span.image{width:100px; height:100px; border-radius:50%; background:#fafafa; position:absolute; top:50%; margin-top:-50px; left:20px; display:inline-block;} .hosting_cont .dis_flex.five .obj .inner span.image img{max-width:80px;} .colo_best .tab_wrap, .sub_cont.addition.product_wrap .tab_wrap{width:40%; margin:0 auto;} .product_wrap .image_cont h2{margin-bottom:5px; font-size:24px;} .hosting_cont .flex_container .obj a{display: flex;align-items: center;border: 1px solid #ddd;padding: 15px 20px;margin-bottom:10px;gap: 20px;border-radius: 10px;} .hosting_cont .flex_container .obj a > .text{text-align: left;width: 100%;} .hosting_cont .flex_container .obj a > .text h5{background: url(/images/main/title_arrow.gif) no-repeat right 7px;} .hosting_cont .flex_container .obj a > .image{width: 15%;} } @media all and (max-width:800px){ .hosting .hosting_best .dis_flex > .obj > .inner{padding:40px 15px;} } @media all and (max-width:768px){ .hosting .hosting_best,.hosting .colo_best{padding:30px 15px 30px;} .hosting .hosting_best .dis_flex > .obj > .inner{padding:30px 15px;} .product_kind .tab-content{padding:30px 0 0 0;} .product_wrap .dis_flex > .obj > .inner{padding:30px 15px;} .image_cont.serverhosting_image, .image_cont.colocation_image{padding:70px 15px;} .sub_cont .group.container form .board_search, .sub_cont .group.container form .table_wrap, .sub_cont .group.container .table_wrap, .sub_cont .faq_cont.container, .sub_cont.whoisidc .group.container, .sub_cont.myidc .group.container, .sub_cont.request .group.container{} .bg_explain.whoisidc, .bg_explain.whoisidc2{padding:50px 15px;} .serverhosting_image .content ul li h5{margin:0 2px; padding:15px 0; font-size:16px;} .colocation_image .content{margin-top:40px;} .colocation_image .content ul li.obj .cont{padding:30px 0;} .colocation_image .content ul li .cont:before{width:60px; height:60px; margin-top:-30px; left:-30px; background-size:40px 40px;} .product_wrap .box_conts .p_logo2{width:100px; height:100px; line-height:100px;} .product_wrap .box_cont.alone h3.p_title, .product_wrap .box_cont.alone h6, .box_kind.management .box_cont .cont_inner h3.p_title{padding-left:150px;} .product_wrap .best, .product_wrap .hit{width:50px; height:30px; line-height:30px; font-size:13px;} .product_wrap .box_conts .p_logo{height:30px} .product_wrap .box_conts .p_logo img{max-height:30px;} .hosting .hosting_best .dis_flex > .obj > .inner .box_conts h3.p_title{font-size:18px; height:30px; padding-left:40px; font-weight:500; margin-bottom:5px;} .product_wrap .box_conts .p_img{top:40px; left: 5px; padding:0;} .colocation_image .content p{padding-top:5px;} .product_wrap .box_conts p.p_through{padding-left:150px;} .product_wrap .box_conts .price_dw,.product_wrap .box_conts .price_dwb{font-size:24px; padding-left:150px;} .product_wrap .box_conts .p_img img{max-height:120px;} .product_wrap .box_conts dl{margin: 0; padding-left: 0;} .product_wrap .box_cont.alone .box_conts dl{margin-bottom:20px;} .product_wrap .box_conts dl.left_none dt{margin-bottom:5px;} .product_wrap .box_conts dl.left_none dd{} .colo_best .tab_wrap{width:60%;} .product_wrap .image_cont h2{font-size:22px;} .product_wrap .image_cont h6{font-size:1em;} .hosting_cont .dis_flex .obj .inner p{font-size:1em; margin-top:10px;} .hosting_cont .dis_flex.five .obj .inner{padding:20px !important;} .hosting_cont .dis_flex.five .obj .inner span.image{width:60px; height:60px; margin-top:-30px; left:15px;} .hosting_cont .dis_flex.five .obj .inner span.image img{max-width:50px;} .hosting_cont .dis_flex.five .obj .inner h5{padding-left:80px;} .hosting_cont .dis_flex.five .obj .inner p{padding-left:80px; margin-top:0px;} .hosting .hosting_best .dis_flex.three > .obj, .product_kind .dis_flex.three > .obj, .hosting_cont .dis_flex.five > .obj, .colo_best .dis_flex.three > .obj, .detail_wrap .detail_top .flex_container .dis_flex.two > .obj, .whoisidc .whoisidc_bottom .dis_flex.three > .obj{padding-left:0px; padding-right:0px; padding-top:5px; padding-bottom:5px;} } @media all and (max-width:640px){ .image_cont.serverhosting_image, .image_cont.colocation_image{padding:50px 15px;} .colocation_image .content .dis_flex.three{margin-left:0px; margin-right:0px;} .colocation_image .content .dis_flex.three > .obj{padding-left:0px; padding-right:0px; padding-top:10px; padding-bottom:10px; width:100%; max-width:100%; -ms-flex:0 0 100%; flex:0 0 100%; flex:0 0 100%;} .colocation_image .content{margin-top:30px;} .colocation_image .content ul li .cont:before{top:-15px; left:50%; margin-left:-30px;} .serverhosting_image .content ul li h5{padding:10px 0; font-size:15px;} .product_wrap .box_conts dl.min-h{min-height:50px;} } @media all and (max-width:520px){ .hosting .hosting_best,.hosting .colo_best{padding:25px 15px 25px;} .product_wrap .best, .product_wrap .hit{width:45px; height:25px; line-height:25px; font-size:12px;} .product_kind .tab-content{padding:10px 0 0 0;} .colo_best .tab_wrap{width:80%;} .hosting_cont .dis_flex.five .obj .inner{padding:20px 10px !important;margin: 0;} .serverhosting_image .content ul li h5{font-size:14px;} .product_wrap .image_cont h2{font-size:20px;} .product_wrap .box_conts .p_logo{height:25px; display: inline-block;} .product_wrap .box_conts .p_logo img{max-height:25px;} .product_wrap .box_conts .price.small em{font-size:14px;} .product_wrap .box_conts span.won{font-size:13px;} .hosting .hosting_best .dis_flex > .obj > .inner .box_conts h3.p_title{font-size:17px; height:25px; padding-left:30px; margin-bottom:0px;} .product_wrap .box_conts h3.p_title{font-size:20px; font-weight:500; left: 20px; display: inline-block; margin: 0 5px 0;} .product_wrap .box_conts .p_img img{max-height:100px;} } @media all and (max-width:480px){ .product_wrap .box_conts .p_logo2{width:80px; height:80px; line-height:80px; left:50%; margin-left:-40px;} .product_wrap .box_conts .p_logo2 img{width:60px;} .product_wrap .box_cont.alone h3.p_title, .product_wrap .box_kind.management .box_cont h3.p_title{padding:90px 0 0 0;} .product_wrap .box_cont.alone .box_conts p.p_through, .product_wrap .box_cont.alone .box_conts .price_dw, .product_wrap .box_cont.alone .box_conts .price_dwb, .product_wrap .box_cont.alone .box_conts dl, .product_wrap .box_cont.alone h6, .product_wrap .box_kind.management .box_cont .box_conts p.p_through, .product_wrap .box_kind.management .box_cont .box_conts .price_dw, .product_wrap .box_kind.management .box_cont .box_conts .price_dwb, .product_wrap .box_kind.management .box_cont .box_conts dl, .product_wrap .box_kind.management .box_cont h6{padding-left:0;} .product_wrap .box_conts p.p_through{padding-left:100px;} .product_wrap .box_conts .price_dw,.product_wrap .box_conts .price_dwb{font-size:20px; padding-left:100px;} .product_wrap .box_conts .p_img img{max-height:100px; max-width:80px;} .product_wrap .box_conts .prod_img_txt_box{margin: 20px 0;} .product_wrap .box_conts dl{padding-left:0; width: 200px;} .sub_cont.addition .box_cont.alone .cont_inner .footer_btn.button{width:100%; margin-left:auto; margin-right:auto; left:auto;} .product_wrap .image_cont h2{font-size:18px;} .product_wrap .image_cont h5{font-size:1em;} .serverhosting_image .content ul li h5{font-size:14px;} .product_wrap .box_conts dl dt{font-size:13px;} .product_wrap .box_conts dl dd{font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} } @media all and (max-width:320px){ .nav-wrap ul.nav-sub li{padding: 5px;} .product_wrap .box_conts .prod_img_txt_box {grid-template-columns: 1fr; gap: 0;} .product_wrap .box_conts dl{margin:10px 0 0; width: 230px;} .explanation .icon ul {gap: 10px;} .explanation .icon ul li > dl > dt{width: 90px; height: 90px;} } /* 제품상세보기 */ .detail_wrap{} .detail_wrap .detail_top{margin: 50px auto;} .detail_wrap .detail_top .obj{display:table; position:relative; width:100%;} .detail_wrap .detail_top .obj .grid2{gap:50px} .detail_top .obj .pd_image{display: grid; background: #fff; align-items: center; justify-content: center; border: 1px solid #ddd; padding: 30px;} .detail_top .pd_explain{vertical-align:top; width:100%;} .detail_top .price1 h4{text-align: right; margin: 20px 0; font-weight: bold; color: #382aae; font-size: 25px;} .detail_top .price1 h4 > small{color: #333; font-weight: 400;} .detail_wrap .detail_top .pd_small_img ul{gap: 10px; margin: 10px 0 0;} .detail_wrap .detail_top .pd_small_img ul li {border: 1px solid #ddd; padding: 20px; background: #fff;} .detail_top .pd_explain .detail_list {color: #555;} .detail_top .pd_explain .detail_list .spec, .guide, .com{display: flex; gap: 30px; border-bottom: 1px solid #ddd; padding: 20px 0;} .detail_top .pd_explain .detail_list .spec h5, .guide h5, .com h5{font-weight: 500; font-size:18px; color:#333;} .detail_top .pd_explain .detail_list .spec .txt{} .detail_top .pd_explain .detail_list .spec .txt ul{} .detail_top .pd_explain .detail_list .spec .txt li {font-weight: 400; letter-spacing: 0;} .detail_top .pd_explain .detail_list .spec .txt li > strong{padding-right: 10px;} .detail_top .pd_explain .detail_list .guide{line-height: 30px;} .pd_explain h3{padding:20px 0 0; background:#fff; margin-bottom:10px; display:flex; align-items:center;} .pd_explain h3 .pd_company{padding:0 10px; margin-right:15px; font-size:15px; height:30px; line-height:30px; box-sizing:border-box; border:1px solid #382aae; color:#382aae; background:#fff;} .pd_explain ol.dot_list li{padding:15px 10px; border-bottom:2px dotted #ddd;} .pd_explain ol.dot_list li strong{color:#333; padding-right:20px;} .pd_explain ol.dot_list li:before{top:50%;} .detail_wrap .detail_box{position:relative; margin-top:100px;} .detail_box .info_box:first-child{padding:50px 20px 20px 20px; background:#f8f8f8; border:1px solid #ddd; border-top:2px solid #553dcd;} .detail_box .info_box h5{position:absolute; top:-20px; left:20px; padding:0 20px; background:#fff; border:2px solid #553dcd; color:#553dcd; height:40px; line-height:40px; border-radius:20px;} .detail_box .info_box dl{} .detail_box .info_box dl dt{} .detail_box .info_box dl dd{} .detail_box .info_box.bottom{background:#fff; border:1px solid #ddd;} .detail_box .info_box.bottom h6{color:#553dcd;} .image_cont.pd_detail_image{height:250px; background:#eee url('/images/sub/pd_detail_image.jpg') no-repeat top center; color:#fff;} .btn-wrap{display: flex; flex-direction: row; justify-content: space-between; align-items: center;} .list_btn a {display: inline-block; padding: 10px 30px; background: #f8f8f8; border: 1px solid #ddd; font-size: 18px;} .estimate_wrap{gap:10px} .estimate_wrap .btn1, btn2{margin: 0; padding: 0;} .estimate_wrap .btn1 a, .estimate_wrap .btn2 a{display: inline-block; border: 1px solid #553dcd; padding: 10px 100px; font-size: 18px;} .estimate_wrap .btn1 a{background: #f4f4ff; color: #553dcd;} .estimate_wrap .btn2 a{background: #553dcd; color: #fff;} @media all and (max-width:1280px){ } @media all and (max-width:980px){ .detail_wrap .detail_top, .detail_wrap .detail_box{padding:0 20px;} .image_cont.pd_detail_image{height:auto;padding:70px 20px;} } @media all and (max-width:820px){ .detail_wrap .detail_top{margin: 0;} .detail_wrap .detail_top .pd_small_img ul li{padding: 10px;} .detail_top .grid2{display: block;} .detail_top .obj .pd_image{margin:30px auto 0;} .detail_top .pd_explain .detail_list .spec, .guide, .com{display: block;} .detail_top .pd_explain .detail_list .spec h5, .guide h5, .com h5{font-size: 16px; margin-bottom:10px;} .detail_box .info_box:first-child{margin:0; padding: 40px 20px 20px;} .detail_box .info_box dl {margin:0;} .pd_explain h3{padding: 30px 0 0; margin: 0;} .detail_top .pd_explain .detail_list .guide{line-height: 20px;} .detail_top .pd_explain .detail_list {font-size: 13px;} .btn-wrap{} .list_btn a{padding: 10px 20px; font-size: 16px;} .estimate_wrap{gap: 5px;} .estimate_wrap .btn1 a, .estimate_wrap .btn2 a{padding: 10px 20px; font-size: 15px;} .detail_box .info_box.bottom{padding: 10px 15px; margin-top: 10px;} } @media all and (max-width:768px){ .detail_wrap .detail_top, .detail_wrap .detail_box{padding:0 15px;} .detail_wrap .detail_top .obj{min-height:auto;} .image_cont.pd_detail_image{padding:60px 15px;} } @media all and (max-width:640px){ .image_cont.pd_detail_image{padding:50px 15px;} } @media all and (max-width:520px){ .image_cont.pd_detail_image{padding:30px 15px;} } @media all and (max-width:480px){ } /* 서비스 신청하기 */ .application_top.process_wrap .cont.active{border:1px solid #553dcd;background:#fff;} .application_top.process_wrap .cont.active h5{color:#553dcd;} .application_wrap{display:inline-block;width:100%;position:relative;} .application_wrap section{float:left;} .application_wrap section.table_wrap{width:820px;position:relative;} .application_wrap.estimate section.table_wrap, .sub_cont.manager_info .application_wrap section.table_wrap{width:100%;margin-bottom:50px;} .sub_cont.consult .application_wrap section.table_wrap{width:100%;} .application_wrap.estimate section.table_wrap:last-child, .sub_cont.manager_info .application_wrap section.table_wrap:last-child{margin-bottom:0;} .application_wrap section.right_paywrap{position:absolute;top:0px;right:0px;z-index:0;width:300px;height:100%;min-height:500px;background:#fff;border:1px solid #ddd;} .right_paywrap .pay_cont{width:100%;height:100%;background:#f8f8f8;padding:30px;} .right_paywrap.on{position:fixed;bottom:0;left:50%;margin-left:280px;} .pay_cont h5{margin:0 0 20px 0;} .pay_cont .paycont_inner{position:relative;padding:0;margin-bottom:50px;box-sizing:border-box;border-top:1px solid #333;border-bottom:1px solid #333;} .paycont_inner dl{padding:15px 0;width:100%;display:flex;border-top:1px solid #ddd;margin:0;} .paycont_inner dl:first-child{border-top:none;} .paycont_inner dl dt{flex:1 auto;width:30%;color:#333;font-size:1.063em;} .paycont_inner dl dd{text-align:right;} .paycont_inner dl.small{padding:10px;border-top:none;background:rgba(255,255,255,0.7);} .paycont_inner dl.small dt{font-size:1em;color:#777;} .paycont_inner dl.small dd{font-size:0.938em;color:#999;} .paycont_bottom{text-align:center;} .paycont_bottom .bottom_price{padding-top:18px;text-align:right;position:relative;} .paycont_bottom .bottom_price span{color:#5444c9 !important;font-size:2.2em;font-weight:600;} .paycont_bottom .bottom_price span em{color:inherit;font-weight:normal;font-size:18px;} .paycont_bottom .bottom_price p{font-size:16px;color:#555;position:absolute;right:0px;top:0px;} .paycont_bottom ol{margin:10px auto 0 auto;width:100%;display:inline-block;} .paycont_bottom ol li{float:none;margin:5px auto;} .paycont_bottom ol li .button{width:100%;} .application_wrap .server_info{} .application_wrap .server_info .dot_list em{padding-right:5px;color:#333;} .server_info .long_select{width:220px;} .agree_cont{position:relative;} .agree_cont .button{position:absolute;right:0px;top:0px;} @media all and (max-width:1280px){ .application_wrap, .sub_cont.colocation .group.container{padding:0 20px;} .application_wrap .table_wrap, .sub_cont.colocation .group.container .application_wrap, .sub_cont .group.container .application_wrap.estimate .table_wrap, .sub_cont.colocation .group.container .application_wrap .table_wrap{padding:0;} .sub_cont.consult .application_wrap section.table_wrap{width:100%;} .sub_cont.colocation .application_wrap .table_wrap{width:70%;padding-right:30px;} .sub_cont.colocation .application_wrap.estimate .table_wrap{margin-bottom:40px;} .sub_cont.colocation .application_wrap .right_paywrap{width:30%;} } @media all and (max-width:980px){ .application_wrap section.table_wrap, .application_wrap.estimate section.table_wrap, .manager_info .application_wrap section.table_wrap, .sub_cont.manager_info .application_wrap section.table_wrap, .sub_cont.colocation .application_wrap.estimate .table_wrap{width:100%;overflow-x:scroll;margin-bottom:30px;} } @media all and (max-width:800px){ .sub_cont.colocation .application_wrap .table_wrap{width:100%;padding-right:0;} .sub_cont.colocation .application_wrap .right_paywrap{width:100%;position:relative;} .right_paywrap .pay_cont{padding:20px;} } @media all and (max-width:768px){ .application_wrap, .sub_cont.colocation .group.container{padding:0;} .application_wrap .table_wrap .box_radio .mgl30{margin-left:20px;} .application_wrap section.table_wrap, .application_wrap.estimate section.table_wrap, .manager_info .application_wrap section.table_wrap, .sub_cont.manager_info .application_wrap section.table_wrap, .sub_cont.colocation .application_wrap.estimate .table_wrap{margin-bottom:20px;} } @media all and (max-width:640px){ } @media all and (max-width:520px){ .application_wrap .table_wrap .box_radio .mgl30{margin-left:10px;} } @media all and (max-width:480px){ } /*--------------- 부가서비스 ----------------*/ .sub_cont .box_cont{margin-left:-30px;margin-right:-30px;} .sub_cont .box_cont .cont_inner{padding:50px;margin:0 30px;padding:50px;border:1px solid #d9d9d9;box-shadow:0px 0px 0px rgba(0,0,0,0.2);border-radius:10px;position:relative;min-height:420px;transition: transform 0.3s;} .sub_cont .box_cont .cont_inner:hover{border:1px solid #226dc8;box-shadow:6px 6px 15px rgba(0,0,0,0.2);-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;transform:translate(0px, -10px);} .sub_cont .box_cont .cont_inner.short{min-height:auto;} .box_cont .cont_inner .footer_btn.button{margin:0 auto;position:absolute;bottom:50px;width:300px;left:50%;margin-left:-150px;} .box_cont .price{margin:10px 0 10px 0;font-weight:bold;} .box_cont .price em{font-weight:400;font-size:0.5em;color:#333;padding:0 0 0 5px;} .box_cont .price em small{padding-left:3px;color:#777;} .image_cont.firewall_image{height:350px;background:#eee url('/images/sub/firewall_image.jpg') no-repeat top center;color:#fff;} .image_cont.backup_image{height:350px;background:#eee url('/images/sub/mana_image.jpg') no-repeat top center;color:#fff;} .image_cont.backup_image2{padding:80px 0;background:#eee url('/images/sub/backup_image.jpg') no-repeat top center;color:#fff;} .image_cont.backup_image3{height:350px;background:#eee url('/images/sub/backup_img.jpg') no-repeat top center;color:#fff;} .addition{margin-top:80px;margin-bottom:0} .addition .addition_service{} .addition_service ul{margin:50px 0 auto; display: flex;} .addition_service ul li{flex: 1;} .addition_service ul li dl{padding:0 20px;} .addition_service ul li dl dt{width:200px;height:200px;line-height:200px;background:#f4f4fe;border-radius:50%;display:block;margin:0 auto 30px auto;} .addition_service ul li dl dd{color:#777;word-break:keep-all;font-size: 18px;letter-spacing: -1px;} .addition_service ul li dl dd h5{margin-bottom: 10px;color: #333;font-size: 23px;font-weight: 500;} .bg_explain{padding:100px 0;background-image:url('/images/sub/firewall_explain_bg.jpg');background-attachment:fixed;background-repeat:no-repeat;background-position:center center;} .bg_explain .explain_cont{margin:50px auto 0 auto;} .explain_cont ul li:nth-child(3n+1){clear:both;} .explain_cont dl{padding:30px 0;margin:20px;text-align:center;border:1px solid rgba(255,255,255,0.33);background:rgba(0,0,0,0.11);position:relative;} .explain_cont dl:before{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:#fff;margin-left:-5px;} .explain_cont dl dt{color:#fff;font-size:1.250em;margin-bottom:10px;} .explain_cont dl dd{color:rgba(255,255,255,0.7);} .addition_process{padding:70px 20px;background:#f4f4f4;} .addition_process .process_wrap{margin:30px auto 0 auto;} .bottom_big{width:100%;margin:50px auto;} .bottom_big.b-padding{position: relative;margin:30px auto;width:1160px;} .bottom_big a.button{float:left;margin:0 10px;width:300px;} .bottom_big a.button span{font-size:1.250em;} @media all and (max-width:1280px){ .image_cont.firewall_image, .image_cont.backup_image, .image_cont.backup_image3{height:320px;} .addition_service ul li dl dt{width:180px;height:180px;line-height:180px;} } @media all and (max-width:980px){ .addition{margin-top:50px;} .sub_cont .image_cont{padding-left:20px;padding-right:20px;} .sub_cont .image_cont br{display:none;} .sub_cont.addition .box_kind .box_cont.alone, .sub_cont.addition .addition_service{width:100%;padding:0 20px;} .sub_cont .box_cont{margin-left:0;margin-right:0;} .sub_cont .box_cont .cont_inner{padding:50px 20px;margin:0 auto;min-height:auto;} .addition_service ul{margin:50px 0 auto;} .addition_service ul li dl {padding: 0 10px;} .addition_service ul li dl dt{width:120px;height:120px;line-height:120px;margin:0 auto 20px auto;} .addition_service ul li dl dt img{width:55%;} .addition_service ul li dl dd h5{font-size: 20px; line-height: 25px;} .addition_service ul li dl dd{font-size: 16px;} .addsvc_box .txt h2{font-size: 25px;} .addsvc_box .txt p{line-height: 25px;} .bg_explain{padding:80px 20px;} .bg_explain .explain_cont{margin:40px auto 0 auto;} .bg_explain .explain_cont .fl_left.three_li li{width:50%;} .bg_explain .explain_cont .fl_left.three_li li:nth-child(2n+1){clear:both;} .bg_explain .explain_cont .fl_left.three_li li:nth-child(3n+1){clear:unset;} .explain_cont dl{padding:20px 0;margin:15px;} .image_cont.firewall_image, .image_cont.backup_image, .image_cont.backup_image3{height:300px;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .addition{margin-top:30px;} .sub_cont.addition .box_kind .box_cont.alone, .sub_cont.addition .addition_service{padding:0 15px;} .sub_cont .box_cont .cont_inner{padding:30px 15px;} .addition_service ul{margin:40px 0 auto;} .sub_cont .addition_service .fl_left.four_li > li{width:50%;} .sub_cont .addition_service .fl_left.four_li > li:nth-child(2n+1){clear:both;} .addition_service ul li dl{padding:0;} .bg_explain{padding:60px 15px;} .bg_explain .explain_cont{margin:30px auto 0 auto;} .image_cont.firewall_image, .image_cont.backup_image, .image_cont.backup_image3{height:280px;} .addition_process .process_wrap{margin:20px auto 0 auto;} .addition_service ul li dl dd h5{margin-bottom:5px;font-weight:500;font-size:18px;} .addition_service ul li dl dd{font-size:16px;} } @media all and (max-width:640px){ .addition_service ul li dl dt{width:90px;height:90px;line-height:90px;margin:0 auto 10px auto;} .addition_service ul li dl dd{padding:0 10px;} .bg_explain{padding:50px 15px;} .bg_explain .explain_cont .fl_left.three_li li{width:100%;float:none;clear:both;} .image_cont.firewall_image, .image_cont.backup_image, .image_cont.backup_image3{height:250px;} .addition_service ul{margin:30px 0 auto;} .addition_service ul li dl dd h5{font-size:16px;} .addition_service ul li dl dd{font-size:14px;} } @media all and (max-width:520px){ .sub_cont .addition_service .fl_left.three_li > li{width:100%;} .addition_process .process_wrap{margin:10px auto 0 auto;} .bg_explain{padding:40px 15px;} .addition_service ul{margin:20px auto 0;} .sub_cont .box_cont .cont_inner{padding:20px 15px;} } @media all and (max-width:480px){ .image_cont.firewall_image, .image_cont.backup_image, .image_cont.backup_image3{height:200px;} .bg_explain{padding:30px 15px;} .addition_service ul li dl dd h5{font-size:15px;} .addition_service ul li dl dd{font-size:13px;} } /* 로드밸런싱 */ .sub_cont .box_cont .cont_inner.short .btn_wrap li{padding:0 5px;margin-top:30px;} .cont_inner.short .btn_wrap li .button{width:100%;} .bg_explain.loadbalancing{background-image:url('/images/sub/loadbalancing_explain_bg.jpg');background-position:bottom center;} .sub_cont .box_cont.alone{width:70%;margin:0 auto;} .box_cont.alone .cont_inner .footer_btn.button{position:relative;bottom:auto;} .image_cont.loadbalancing_image{height:350px;background:#eee url('/images/sub/loadbalancing_image.jpg') no-repeat top center;color:#fff;} .addservice_top{position:relative;} .addservice_top ul.two_li{width:45%;margin:0 auto;} .addservice_top ul li{text-align:center;padding:0 5px;} .addservice_top ul li a{display:table;width:100%;height:70px;border:1px solid #226dc8;background:#fff;color:#226dc8;font-size:1.250em;position:relative;} .addservice_top ul li a.on{background:#226dc8;border:1px solid #226dc8;color:#fff;} .addservice_top ul li a.on:after{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:none;border-top:10px solid #226dc8;height:0;width:0;bottom:-10px;content:'';left:50%;margin-left:-10px;position:absolute;} .addservice_top ul li a span{display:table-cell;vertical-align:middle;} /* 윈도우라이센스 */ .winlicence_top > ul{width:50%;margin:0 auto;} .winlicence_tab .bottom_big{margin:70px auto 30px auto;} .image_cont.winlicence_image{height:350px;background:#eee url('/images/sub/winlicence_image.jpg') no-repeat top center;color:#fff;} /* 매니지먼트서비스 */ .box_kind.management .bottom_big{margin:70px auto 30px auto;} .box_kind.management .box_cont .cont_inner .footer_btn.button{position:relative;width:100%;bottom:0;left:0;margin-left:0;} .addservice_top ul.three_li{width:70%;margin:0 auto;} /* 기술지원 */ .request_list.os_db .inner_box{min-height:285px;} .request_list.os_db .inner_box h5 em span{font-size:0.75em;} .bg_explain .dot_text{font-weight:300;} .bg_explain .dot_text span{position:relative;font-weight:600;} .bg_explain .dot_text span:before{content:'';position:absolute;top:-5px;left:50%;width:6px;height:6px;border-radius:50%;margin-left:-3px;background:#fdc928;} /*--------------- 마이IDC ----------------*/ .traffic_cont{display:flex;align-items:center;margin:0 auto 20px auto;padding:10px 15px;background:#fff;border:1px solid #ddd;} .traffic_cont h6{padding:0 20px 0 30px;} .traffic_cont span{margin:0 2px;} .traffic_cont .select_wrap{position:relative;z-index:1;background:#fff;} .traffic_cont .select_wrap select{width:220px;height:40px;} .traffic_cont button{display:table;height:38px;padding:0 20px;background:#2e3138;} .traffic_cont button em{display:table-cell;vertical-align:middle;color:#fff;} /* 기술지원요청 */ .process-wrap {display: flex; gap: 10px; margin-bottom: 20px;} .process-wrap .item {flex: 1; border: 1px solid #ddd; padding: 25px;} .process-wrap .item + .process-wrap .item {margin-left: 16px;} .process-wrap .item > div {display: flex; align-items: center; justify-content: center;} .process-wrap .item .num {color: #7461d3; font-size: 30px; text-align: center;} .process-wrap .item .num:after {content:''; display: inline-block; width: 1px; height: 20px; background-color: #ddd; margin: 0 25px;} .process-wrap .item .desc {display: inline-block; color: #555; font-size: 20px;} .process_wrap{padding:0;} .process_wrap ul{display: flex; justify-content: center; gap:30px;} .process_wrap ul li{flex:1} .process_wrap ul li .cont{text-align:center;word-break:keep-all;} .process_wrap ul li .cont span.icon{display:none !important;width:120px;height:120px;background:#fff;border-radius:50%;display:block;margin:0 auto 10px auto;} .process_wrap ul li .cont span.icon img{max-width:100%;} .process_wrap .cont{padding:30px 0;border-radius:10px;border:1px solid #ddd;background:#fff;text-align:center;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;position:relative;} .process_wrap .cont.active{border:1px solid #226dc8;} .process_wrap .cont.active h5{color:#226dc8;} .process_wrap .cont:after{content:'';position:absolute;top:50%;right:-16px;margin-top:-16px;width:32px;height:32px;background:url('/images/sub/process_arrow.png');} .process_wrap ul li:last-child .cont:after{background:none;} .process_wrap ul li .cont h5{font-size:22px;line-height:1.3;} .process_wrap ul li .cont h5 br{display:none;} .process_wrap ul li .cont p{font-size: 17px; margin-top: 5px;} .select_search{display:flex;display:-ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:center;} .select_search .cont{margin-right:10px;display:inline-flex;align-items:center;} .select_search .cont span{padding:0 2px;} .select_search .cont select{min-width:80px;} .request_cont{width:80%;} .request_list{clear:both;display:inline-block;width:100%;position:relative;} .request_list .inner_box{float:left;width:33.33%;padding:30px;min-height:260px;background:#fff;border:1px solid #ddd;margin-left:-1px;margin-top:-1px;position:relative;} .request_list .inner_box:nth-child(3n+1){clear:both;} .request_list .inner_box:hover{background:#fff;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;} .request_list .inner_box h5{color:#000;position:relative;font-size:20px;} .inner_box h5 strong{font-size:1.1em;font-weight:bold;position:absolute;top:0px;right:0px;text-align:right;} .inner_box h5 strong.relative{font-size:1.5em;position:relative;right:unset;text-align:left;} .inner_box h5 em{font-size:0.7em;color:#777;padding-left:3px;font-weight:normal;} .inner_box .dot_list{margin:10px 0 20px 0;} .request_list .inner_box .dot_list li{font-size:15px;} .request_list .inner_box .button{position:absolute;left:30px;bottom:30px;} /* 클라우드 */ .tabs {margin-top: 50px; padding-bottom: 40px; background-color: #ffffff; margin: 0 auto;} .tab_item {width: calc(100%/2); background-color: #f8f8f8; border: 1px solid #ddd; font-size: 18px; color: #333; display: block; float: left; text-align: center; padding: 20px 0;} .tab_item:hover {opacity: 0.75;} input[name="tab_item"] {display: none;} .tab_content {display: none; padding: 30px; clear: both; overflow: hidden; border: 1px solid #ddd; border-top: 0;} #all:checked~#all_content, #programming:checked~#programming_content, #design:checked~#design_content {display: block;} .tabs input:checked+.tab_item {background-color: #fff; color: #553dcd; border: 1px solid #ddd; border-bottom: 0; border-top: 3px solid #553dcd;} .txt{gap: 20px; align-items: center;} .txt a.button{display: block; background: #eee; border-radius: 5px; padding: 5px 20px; font-size: 15px;} /* 결제내역 */ .sub_cont.payment .info_box .button{position:absolute;right:20px;top:20px;} @media all and (max-width:1280px){ .process_wrap .cont{padding: 30px 0;} .tab-content.winlicence_tab, .winlicence_explain, .box_kind.management{padding:0 20px;} .sub_cont.request .table_wrap .normal tbody td.request_wrap{padding:10px 0;} .sub_cont.request .table_wrap .normal2 tbody td.request_wrap{padding:10px 0;} } @media all and (max-width:980px){ .addition_process{padding:60px 20px;} .process_wrap ul li .cont h5{font-size:20px;} .process_wrap .cont{padding:20px 0;} .image_cont.loadbalancing_image, .image_cont.winlicence_image{height:auto;padding:50px 20px;} .sub_cont.addition.product_wrap .winlicence_top .tab_wrap{width:70%;} .winlicence_tab .box_cont.fl_left.two_li li .cont_inner, .box_kind.management .box_cont.fl_left.two_li li .cont_inner{margin:0 10px;} .winlicence_tab .box_cont .cont_inner .footer_btn.button{position:relative;bottom:auto;} .winlicence_tab .box_cont .cont_inner h3.p_title{padding:50px 0 0 0;display:block;width:100%;position:relative;} .winlicence_tab .box_conts .price_dw, .winlicence_tab .box_conts .price_dwb, .winlicence_tab .box_conts dl.left_none{padding-left:0;} .process_wrap ul{margin-left:-10px;margin-right:-10px;} .box_kind.management .box_cont.fl_left.two_li li{width:100%;margin:10px auto;} .request_list .inner_box{padding:20px;min-height:240px;} .request_list .inner_box h5{font-size:18px;font-weight:500;} .inner_box .dot_list{margin:10px 0 15px 0;} .request_list .inner_box .button{left:20px;bottom:20px;} .process-wrap{display: grid; grid-template-columns: 1fr 1fr;} .process-wrap .item{padding: 15px;} .process-wrap .item > div{justify-content: flex-start;} .process-wrap .item .num{font-size: 18px;} .process-wrap .item .num:after{margin: 0 15px;} .process-wrap .item .desc{font-size: 15px;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .addition_process{padding:50px 20px;} .image_cont.loadbalancing_image, .image_cont.winlicence_image{padding:40px 15px;} .process_wrap ul{ gap: 0;} .process_wrap ul li .cont h5{font-size:17px;} .process_wrap ul li .cont{margin:0 10px;padding:20px 0;} .process_wrap .btn-group .btn-lg, .addition_process .btn-group .btn-lg{margin:30px 5px 0;width:200px;height:50px;line-height:50px;font-size:1em;padding:0;} .tab-content.winlicence_tab, .winlicence_explain, .box_kind.management{padding:0 15px;} .sub_cont.addition.product_wrap .winlicence_top .tab_wrap{width:90%;} .winlicence_tab .box_cont.fl_left.two_li li, .box_kind.management .box_cont.fl_left.two_li li{width:100%;float:none;} .winlicence_tab .box_cont.fl_left.two_li li .cont_inner, .box_kind.management .box_cont.fl_left.two_li li .cont_inner{margin:10px auto;} .process_wrap ul li .cont h5 br{display:block;} .traffic_cont h6{padding:0 20px 0 20px;} .traffic_cont{display: block;margin:0 auto;padding:10px;} .traffic_cont .select_wrap select{width:100%; font-size: 12px;} .traffic_cont .button.small span{padding:0 10px;} .request_list .inner_box{width:50%;padding:15px;min-height:220px;} .request_list .inner_box:nth-child(2n+1){clear:both;} .request_list .inner_box:nth-child(3n+1){clear:unset;} .request_list .inner_box h5{font-size:17px;} .inner_box .dot_list{margin:5px 0 10px 0;} .request_list .inner_box .button{left:15px;bottom:15px;} .request_list .inner_box .dot_list li{font-size:14px;} .select_search select,.select_search .cont select{min-width:50px;background:url('/images/sub/select_arrow_blue.png') no-repeat right 2px center;padding:0 10px 0 5px;background-size:7px auto;} .select_search .cont{margin-right:5px;} .winlicence_tab .box_cont .cont_inner h3.p_title{padding:35px 0 0 0;} .tab_content{padding:0;} .tab_item{padding: 10px 0; font-size: 15px;} } @media all and (max-width:640px){ .process_wrap ul li .cont h5{font-size:16px;} .process_wrap ul li .cont{padding:15px 20px 15px 15px;} .process_wrap .cont:after{right:-12px;margin-top:-12px;width:24px;height:24px;background-size:24px 24px;} } @media all and (max-width:520px){ .addition_process{padding:40px 15px;} .image_cont.loadbalancing_image, .image_cont.winlicence_image{padding:30px 15px;} .process_wrap ul li .cont h5{font-size:14px;} .process_wrap .cont{padding:20px 0;} .process_wrap .btn-group .btn-lg, .addition_process .btn-group .btn-lg{margin:20px 5px 0;width:150px;height:40px;line-height:40px;} .process_wrap ul li .cont{margin: 0; padding: 10px 0;} .process_wrap ul{margin-left:-7px;margin-right:-7px;} .traffic_cont h6{padding:0 10px 0 10px;} .request_list .inner_box{width:100%;margin-left:0px;min-height:auto;clear:both;} .request_list .inner_box:nth-child(2n+1), .request_list .inner_box:nth-child(3n+1){clear:unset;} .request_list .inner_box h5{font-size:16px;} .inner_box .dot_list{margin:5px 0;} .request_list .inner_box .dot_list li{font-size:13px;} .request_list .inner_box .button{position:relative;left:auto;bottom:auto;margin-top:10px;float:right;} .request_table th,.request_table td{width:100%;} .process_wrap .cont:after{right:-9px;margin-top:-9px;width:18px;height:18px;background-size:18px 18px;z-index: 9;} } @media all and (max-width:480px){ .process_wrap .btn-group .btn-lg, .addition_process .btn-group .btn-lg{width:120px;} .addition_process{padding:30px 15px;} .sub_cont.request .top_search .select_search select{min-width:35px;} .select_search .cont{margin-right:3px;} .txt a.button{padding: 5px 15px; font-size: 12px;} } @media all and (max-width:320px){ .process-wrap .item {padding: 10px;} .process-wrap .item .num {font-size: 15px;} .process-wrap .item .num:after {margin: 0px 10px; height: 16px;} .process-wrap .item .desc {font-size: 14px;} } /*--------------- 고객지원센터 ----------------*/ /* 자주묻는질문 */ .faq_cont .tab-pane{min-height: calc(100vh - 136px);} .faq_cont .faq_list{margin:30px auto 0 auto;border-top:2px solid #333;} .faq_cont .faq_list .list_on{background-color:#fff;border-bottom:1px solid #ddd;cursor:pointer;padding:20px 15px;width:100% !important;text-align:left;outline:none;-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;position:relative;} .list_on:after{content:'';width:17px;height:10px;position:absolute;top:50%;margin-top:-5px;right:30px;opacity:0.5;background:url('/images/sub/list_down.png') no-repeat center center;} .active_on:after{background:url('/images/sub/list_up.png') no-repeat center center;} .faq_cont .faq_list .list_on:hover{background-color:#fafafa;} .faq_cont .faq_list .panel{padding:0 15px;background-color:#f4f4f4;max-height:0;overflow:hidden;transition:max-height 0.2s ease-out;border:none;border-radius:0;box-shadow:none;margin:0;} .faq_cont .faq_list .panel .inner{padding:30px;color:#333;} /* 후이즈IDC */ .sub_cont.whoisidc{margin-bottom:70px;} .bg_explain.whoisidc{padding:80px 0 60px;background-image:url('/images/sub/loadbalancing_explain_bg.jpg');background-position:bottom center;} .bg_explain.whoisidc2{padding:80px 0;background-image:url('/images/sub/loadbalancing_explain_bg2.jpg');background-attachment:fixed;background-repeat:no-repeat;background-position:center center;} .bg_explain.whoisidc3{padding:69px 20px;background-image:url('/images/sub/whoisidc3.jpg');background-position:bottom center;} .bg_explain.whoisidc4{padding:80px 0;background:#f4f4ff;} .bg_explain.whoisidc4 h6{padding: 40px 0;} .bg_explain.whoisidc4 h2.point{display: inline-block; background: #553dcd; color: #fff; padding: 5px 20px;} .whoisidc_info{position:relative; width:1000px; margin:0 auto; height:350px; background:url('/images/sub/whoisidc_image01.png') no-repeat top center;} .whoisidc_info .dis_flex.three{padding:50px 0;} .whoisidc_info .dis_flex .inner{display:table; width:260px; height:260px; background:#f6f9fd; border-radius:50%; text-align:center;} .whoisidc_info .dis_flex .inner span{display:table-cell; vertical-align:middle; word-break:keep-all;} .whoisidc_info .dis_flex .inner span h4{position:relative; padding-bottom:7px; margin-bottom:7px; color:#226dc8;} .whoisidc_info .dis_flex .inner span h4:after{content:''; position:absolute; bottom:0px; left:50%; width:50px; height:1px; margin-left:-25px; background:#226dc8;} .bg_explain.whoisidc h3{font-weight:300;} .bg_explain.whoisidc h2{margin-bottom:30px;} .bg_explain.whoisidc .point{position:relative; padding-top:35px; margin-top:20px;} .bg_explain.whoisidc .point:before{content:''; position:absolute; top:0px; left:50%; width:1px; height:30px; background:rgba(255,255,255,0.7);} .whoisidc_bottom .dis_flex .obj dl.inner{padding:30px; border:1px solid #ddd; min-height:640px;} .whoisidc_bottom dl.inner dt{margin:0 auto 20px auto; width:160px; height:160px; line-height:160px; border-radius:50%; background:#f4f4ff; text-align:center;} .whoisidc_bottom dl.inner dt img{} .whoisidc_bottom dl.inner dd{color:#777; word-break:keep-all; padding-bottom:5px; position:relative;} .whoisidc_bottom dl.inner dd h4{color:#333; text-align:center;} .whoisidc_bottom dl.inner dd h5{margin:10px 0 0 0; display:block;} .whoisidc_bottom dl.inner dd ol li{font-size:15px;} .whoisidc_bottom .idc_point{gap: 30px;} .whoisidc_bottom .idc_point .obj{border: 1px solid #ddd; padding: 20px;} /* 후이즈 idc */ .info_wrap {background: #f9f9ff; text-align: center; padding: 50px 0; margin: 30px 0 80px;} .info_wrap .box {border-right: 1px solid #ddd;} .info_wrap .box:last-child {border-right:0} .info_wrap .box ul li h3 {font-size: 25px; font-weight: bold; margin: 20px 0 5px;} .idc {border-top: 2px solid #454545; margin-top: 30px;} .idc ul.idc-point li {display: grid; grid-template-columns: 1fr 5fr; border-bottom: 1px solid #ddd;} .idc .ico_wrap {display: flex; align-items: center; justify-content: center; padding: 20px; border-right: 1px solid #ddd; background: #f9f9ff;} .idc .ico_wrap i{font-size: 25px; margin-right: 10px; color: #553dcd;} .idc .ico_wrap strong {font-size: 18px; font-weight: 500;} .idc .ico_desc{padding: 20px; font-family: 'Noto Sans KR', sans-serif;} .idc .ico_desc strong{display: block; font-size: 17px; color: #553dcd; font-weight: 400; margin: 0 5px 5px;} .idc .ico_desc p{color: #777; font-size: 15px;} .list p{float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #555; letter-spacing: -1px;} .list p:before {content: ''; position: absolute; top: 15px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .map_cont{position:relative; margin:50px auto 30px auto;} .contact_us{position:relative; padding:30px; border:1px solid #ddd; background:#fafafa;} .contact_us dl{border-bottom:1px dotted #ddd; padding-bottom:10px;} .contact_us dl dt{width:40px; float:left;} .contact_us dl dd{color:#777;} .contact_us dl:last-child{display:flex; align-items:center;} .contact_us dl:last-child dt.mgl{margin-left:100px;} .contact_map{background-color: #f8f8f8; padding: 50px 0;} .contact_map .icon-wrap {display: flex; justify-content: center; align-items: center; margin: 30px 0 0;} .contact_map .icon-wrap .icon-item {display: flex; justify-content: center; align-items: center; width: 350px;} .contact_map .icon-wrap .icon-item i {width: 60px; height: 60px; line-height: 60px; background: #fff; flex-shrink: 0; text-align: center; border-radius: 80px; font-size: 20px;} .contact_map .icon-wrap .icon-item .txt {padding-left: 25px;} .contact_map .icon-wrap .icon-item .txt .tit {font-weight: bold; margin-bottom: 5px; color: #333;} .contact_map .icon-wrap .icon-item .txt .desc {font-size: 16px; line-height: 1.47; letter-spacing: 0; font-weight: 400;} .seocho{} .seocho ul{gap: 30px;} .seocho ul.grid3{margin-top:30px;} .seocho ul li{padding: 20px 20px 30px; border-radius: 10px; background: #fff; border: 1px solid #ddd;} .seocho ul li > h4{font-weight: 500; margin: 0 0 0 10px;} .seocho ul li > span{display: block; margin-top:10px; color: #555; font-size: 16px; line-height: 25px; margin: 5px 10px 0; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.5px;} .seocho ul li > .list-group-img{width: 100%; margin: auto; padding-bottom: 20px;} .seocho ul li > .list-group-img img{width:100%;} @media all and (max-width:1280px){ } @media all and (max-width:1024px){ .whoisidc_bottom .dis_flex .obj dl.inner{min-height: auto;} .sub_cont .dis_flex > .obj > .inner{margin: 0 auto 20px;} .whoisidc_bottom .idc_point{gap: 10px;} } @media all and (max-width:980px){ .bg_explain.whoisidc, .bg_explain.whoisidc2{padding:60px 20px;} .sub_cont .dis_flex{grid-template-columns: repeat(5, 1fr);} .sub_cont .faq_cont.container .dis_flex{justify-content:center; gap: 5px;} .sub_cont .faq_cont.container .dis_flex li a{border-radius:0; padding: 10px 0; margin:0;} .whoisidc_info .dis_flex.three{padding:0;} .whoisidc_info{width:100%;height:auto;padding:0 20px;background:none;} .whoisidc_info .dis_flex .obj .inner{width:100%;height:200px;border-radius:0px;padding:0 15px;} .whoisidc_bottom .dis_flex .obj dl.inner{padding:20px;min-height:auto;} .faq_cont .faq_list .panel .inner{padding:20px;} .faq_cont .faq_list .panel{padding:0;} .info_text ul{grid-template-columns: repeat(3, 1fr); gap: 10px;} } @media all and (max-width:820px){ .sub_cont.whoisidc{margin-bottom: 0;} .bg_explain.whoisidc3 {padding: 30px 20px; background-position: center; background-attachment: revert;} .bg_explain.whoisidc4{padding: 50px 0;} .bg_explain.whoisidc4 h6 {padding: 20px 0;} .contact_us dl:last-child dt.mgl{margin-left: 50px;} .seocho ul{display: block;} .seocho ul.grid3{margin-top: auto;} .seocho ul li{margin: 10px 0;} .seocho ul li > span {font-size: 15px; line-height: 23px;} .contact_map{padding: 30px 0 10px;} .contact_map .icon-wrap{display: block; margin: 30px 20px 0;} .contact_map .icon-wrap .icon-item{justify-content: flex-start; margin-bottom: 20px;} .contact_map .icon-wrap .icon-item i{width: 50px; height: 50px; line-height: 50px; font-size: 18px;} .contact_map .icon-wrap .icon-item .txt {padding-left: 15px;} .contact_map .icon-wrap .icon-item .txt .desc {font-size: 15px;} .info_wrap {text-align: left; padding: 0 10px; margin: 30px 0 80px; display: block;} .info_wrap .box {border-right:0; border-bottom: 1px solid #ddd;} .info_wrap .box:last-child {border-bottom:0} .info_wrap .box ul {display: flex; padding: 20px; align-items: center;} .info_wrap .box ul li.img{width: 60px; margin-right: 20px;} .info_wrap .box ul li h3 {font-size: 20px; font-weight: bold; margin: 0;} .info_wrap .box ul li p {font-size: 16px;} .idc{margin-top: 20px;} .idc ul.idc-point li { grid-template-columns: 1fr 4fr;} .idc .ico_wrap{justify-content: center; flex-direction: column; text-align: center; padding: 0 10px;} .idc .ico_wrap i{display: block; margin: 5px; font-size: 20px;} .idc .ico_wrap strong {font-size: 14px; font-weight: 500;} .idc .ico_desc {display: block; padding: 15px;} .idc .ico_desc p{font-size: 12px;} .idc .ico_desc strong{font-size: 14px;} .idc .ico_desc .mt{margin-top:10px;} } @media all and (max-width:768px){ .bg_explain.whoisidc, .bg_explain.whoisidc2{padding:50px 15px;} .contact_us{padding:20px;} .contact_us dl dt{width:30px;} .sub_cont .faq_cont.container .dis_flex li a{font-size:16px;} .faq_cont .faq_list .list_on{padding:10px 35px 10px 10px;word-break:keep-all;} .list_on:after{right:10px;} .faq_cont .faq_list .panel .inner{padding:15px;} .whoisidc_bottom dl.inner dd ol li{font-size:14px;} .map_cont{position:relative;margin:40px auto 20px auto;} .whoisidc_bottom .dis_flex .obj dl.inner{padding:15px;} .whoisidc_bottom dl.inner dt{margin:0 auto 20px auto;width:120px;height:120px;line-height:120px;} .whoisidc_bottom dl.inner dt img{width:80px;} } @media all and (max-width:640px){ .bg_explain.whoisidc, .bg_explain.whoisidc2{padding:40px 15px;} .whoisidc_info .dis_flex.three .obj{flex:0 0 100%;-ms-flex:0 0 100%;max-width:100%;padding-right:0px;padding-left:0px;padding-top:5px;padding-bottom:5px;} .whoisidc_info .dis_flex.three .obj .inner{padding:20px 0;height:auto;} .whoisidc_info .dis_flex.three{margin:0 auto;} .faq_cont .faq_list{margin:20px auto 0 auto;} } @media all and (max-width:520px){ .bg_explain.whoisidc, .bg_explain.whoisidc2{padding:30px 15px;} .bg_explain.whoisidc h2, .bg_explain.whoisidc2 h2{font-size:20px;} .whoisidc_info .dis_flex .inner span h4{font-size:16px;} .whoisidc_info .dis_flex .inner span h5{font-size:14px;} .contact_us{padding:10px;} .contact_us dl dt{width:20px;} .sub_cont .faq_cont.container .dis_flex li a{font-size:14px;} .whoisidc_bottom dl.inner dd ol li{font-size:13px;} .map_cont{position:relative;margin:30px auto 20px auto;} .whoisidc_bottom .dis_flex .obj dl.inner{padding:10px;} .whoisidc_bottom dl.inner dt{margin:0 auto 10px auto;width:100px;height:100px;line-height:100px;} .whoisidc_bottom dl.inner dt img{width:70px;} .info_text ul{grid-template-columns: repeat(1, 1fr); gap: 10px;} } @media all and (max-width:480px){ .bg_explain.whoisidc h2, .bg_explain.whoisidc2 h2{font-size:18px;} .sub_cont .faq_cont.container .dis_flex li a{font-size:13px;} .faq_cont .faq_list{margin:15px auto 0 auto;} .map_cont{margin:20px auto 10px auto;} } /* **************************************** ** table ** **************************************** */ .table_wrap{clear:both;position:relative;} .table_wrap table{width:100%;margin:0 auto;table-layout:auto;} table.normal{border-top:2px solid #5a5a5a;text-align:left;border-spacing:0;} .normal thead th{padding:20px 10px;background:#f4f4fe;color:#333;} .normal tbody th{background:#f4f4fe;color:#333 !important;} .normal.inner tbody th{background:#f4f4f4;} .normal.green thead th,.normal.green tbody th{background:#f4fef0 !important;word-break:keep-all;} .normal tbody th,.normal tbody td{color:#555;word-break:keep-all;} .normal th,.normal td{border-bottom:1px solid #ddd; font-weight:normal;background:#fff;} .normal th:first-child{border-left:none;text-align: center;} .table_wrap tr.t_center th,.table_wrap tr.t_center td{text-align:center;vertical-align:middle;word-break:keep-all;} .table_wrap .bottom_button{margin:20px 0 0 0;} .table_wrap .bottom_button.right a{float:right;} .board_search{text-align:right;margin-bottom:30px;} .board_search select,.board_search input{width:120px;margin-right:5px;} .board_search .button{float:right;margin-left:0;} .table_wrap textarea{width:100%;} .table_wrap .table_text p{display:none;} .table_wrap .tbl_title{margin-bottom:20px;display:block;font-weight:500;} .table_wrap .tbl_title span{font-size:15px;color:#777;display:block;line-height:1.5;font-weight:normal;} .table_wrap .tbl_title em{font-size:15px;color:#777;line-height:1.5;font-weight:normal;} .table_wrap .tbl_title label em{padding-left:5px;} .radio_cont{display:flex;align-items:center;} .radio_cont input{margin:0;} .radio_cont span{padding-left:5px;padding-right:20px;} .table_wrap .phone_input{} .prod .item table.normal{width: 100%; margin-bottom: 20px;} .prod .normal tbody th, .normal tbody td{padding: 15px;} .normal tbody td > .fa-o{color: deepskyblue;} .normal tbody td > .fa-x{color: red;} table.normal2{border-top:2px solid #5a5a5a;text-align:left;border-spacing:0;} .normal2 thead th{padding:20px 10px;background:#f4f4fe;color:#333;} .normal2 tbody th{background:#f4f4fe;color:#333 !important;} .normal2.inner tbody th{background:#f4f4f4;} .normal2 tbody th,.normal2 tbody td{color:#777;word-break:keep-all;} .normal2 th,.normal2 td{border-bottom:1px solid #ddd;border-left:1px solid #ddd; font-weight:normal;background:#fff;} .normal2 th:first-child{border-left:none;text-align: center;} .prod .item table.normal2{margin-bottom: 20px;} .prod .normal2 tbody th, .normal2 tbody td{padding: 15px 20px;} .normal2 tbody td > .fa-o{color: deepskyblue;} .normal2 tbody td > .fa-x{color: red;} .normal2 .table_sky{background: #f4f7fe; color:#333} .normal2 .table_sky > .fa-o{color: #139bfc;} .normal2 .table_sky > strong{color: #139bfc;} .normal2 .table_red{background: #fff4f4; color:#333} .normal2 .table_red > .fa-o{color: #f34a4e;} .normal2 .table_red > strong{color: #f34a4e;} .dt_dd{} .dt_dd ul{} .dt_dd ul li{float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #555; letter-spacing: -1px;} .dt_dd ul li:before {content: ''; position: absolute; top: 15px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .dt_dd ul span{display: block; color: #888; font-size: 15px; margin-top: 10px;} .dt_dd2{margin: 20px 0 0;} .dt_dd2 ul{} .dt_dd2 ul li{float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #777; font-size: 15px;} .dt_dd2 ul li:before {content: ''; position: absolute; top: 15px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #aaa;} .dt_dd3{width:100%;} .dt_dd3 dl{display: grid; grid-template-columns: 10% 90%; margin: 0;} .dt_dd3 dl dt{} .dt_dd3 dl dd{margin-bottom: 5px;} @media all and (max-width:1280px){ } @media all and (max-width:980px){ .table_wrap .tbl_title{margin-bottom:15px;font-size:18px;} .table_wrap .tbl_title span{font-size:14px;} .normal thead th{padding:20px 10px;} .normal tbody th,.normal tbody td{padding:15px 10px;} .board_search{margin-bottom:20px;} .normal2 thead th{padding:20px 10px;} .normal2 tbody th,.normal2 tbody td{padding:15px 10px;} } @media all and (max-width:800px){ .table_wrap .tbl_title{font-size:17px;} } @media all and (max-width:768px){ .table_wrap .table_text {display: flex; justify-content: space-between;} .table_wrap .table_text p{font-size: 18px;display:block;} .table_wrap .tbl_title{margin-bottom:10px;font-size:16px;} .table_wrap .tbl_title span, .table_wrap .tbl_title em{font-size:13px;} .prod .normal tbody th, .normal tbody td{padding: 10px;} .normal thead th{padding:15px 7px;} .normal tbody th,.normal tbody td{padding:10px 7px;} .normal2 thead th{padding:15px 7px;} .normal2 tbody th,.normal2 tbody td{padding:10px 7px;} .board_search{margin:0 auto 10px;display:flex;display:-ms-flexbox;justify-content:center;background:#eee;padding:10px 0 !important;} .board_search select,.board_search input{width:100px;margin-right:3px;} .board_search .button{margin-left:3px;width:50px;text-align:center;} .board_search .button.small span{display:block;padding:0;} .sub_cont .table_wrap{overflow-x:scroll;} .dt_dd2{margin: 10px 10px 0;} .dt_dd2 ul li{font-size: 13px;} .dt_dd3 dl{display: grid; grid-template-columns: 15% 85%;} .dt_dd ul span{font-size: 12px;} } @media all and (max-width:640px){ } @media all and (max-width:520px){ .table_wrap .mail_input{width:100px;} .table_wrap .phone_input{width:70px;} .table_wrap .normal thead th{white-space:nowrap;} .table_wrap .normal2 thead th{white-space:nowrap;} } @media all and (max-width:480px){ .table_wrap .tbl_title span, .table_wrap .tbl_title em{font-size:12px;} .table_wrap .mail_input{width:80px;} .table_wrap .phone_input{width:50px;} .normal thead th{padding:10px 5px;} .normal tbody th,.normal tbody td{padding:10px;} .normal2 thead th{padding:10px 5px;} .normal2 tbody th,.normal2 tbody td{padding:5px 10px;} } /* **************************************** ** button ** **************************************** */ .button{display:table;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:none;} .button span{display:table-cell;vertical-align:middle;position:relative;} .button span img{padding-left:10px;position:absolute;top:50%;margin-top:-6px;} .button.big{height:60px;}.button.big span{padding:0 50px;font-size:1.063em;} .button.middle{height:50px;line-height:50px}.button.middle span{padding:0 50px;} .button.small{height:40px;}.button.small span{padding:0 30px;} .button.mini{height:35px;}.button.mini span{padding:0 15px;} .button.wid100{width:100%;} .button.wid100 span{padding:0; font-size: 18px; font-weight: 500;} .button.gray{color:#555;border:1px solid #777;} .button.gray:hover{background:#555;color:#fff;} .button.bg_gray{color:#fff;border:1px solid #333;background:#333;} .button.bg_gray:hover{border:1px solid #111;background:#111;} .button.bg_lightgray{color:#fff;border:1px solid #acacac;background:#acacac;} .button.bg_lightgray:hover{border:1px solid #777;background:#777;} .button.bg_blue{color:#fff;border:1px solid #553dcd;background:#553dcd;} .button.bg_blue:hover{border:1px solid #452bc8;background:#452bc8;} .button.line_gray{color:#777;border:1px solid #ddd;background:#fafafa;} .button.line_gray:hover{border:1px solid #555;color:#555;background:#fff;} .button.line_blue{background:#fff;border:1px solid #553dcd; color: #553dcd;} .button.line_blue span{color:#553dcd;} .button.line_blue:hover{border:1px solid #0550ab;background:#f4f4ff;} .button.bg_yellow{background:#fdc928;} .button.bg_blue:hover span,.button.bg_gray:hover span,.button.bg_lightgray:hover span{color:#fff !important;} .btn_alone{width:180px;margin:0 auto;} .btn-group-sm >.btn{font-size:14px;} .table_wrap .line_gray{color:#777;border:1px solid #ddd;background:#fafafa;padding: 10px 20px;} @media all and (max-width:800px){ } @media all and (max-width:768px){ .button.big{height:50px;} .button.big span{padding:10px 40px;font-size: 16px;} .button.middle{height:40px;line-height:40px} .button.middle span{padding:0 40px; font-size: 15px;} } @media all and (max-width:640px){ } @media all and (max-width:520px){ .btn-group-sm >.btn{font-size:13px;padding:3px 7px;margin:3px auto;display:block;float:none;} } @media all and (max-width:480px){ .button.big{height:40px;} .button.big span{padding:10px 30px;} .button.middle span{padding:0 20px;} .button.mini{height:30px;}.button.mini span{padding:0 5px;} } /* **************************************** ** tab ** **************************************** */ ul.nav-tabs{list-style:none;align-items:center;margin:0 auto;border-bottom:none;} ul.nav-tabs li{text-align:center;cursor:pointer;-webkit-transition:all 0.3s;transition:all 0.3s;position:relative;flex: 1;} .nav-tabs li a{font-size: 20px;font-weight: normal;display: block;cursor: pointer;text-align: center;color: #555;position: relative;padding: 15px;border: 1px solid #ddd;border-radius: 2em;background: none;} .nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color: #553dcd;font-weight: 500;background: none;margin: 0;outline: none;border: 1px solid #553dcd;border-radius: 2em;} .tab-pane.fade.show.active{opacity:1;} /*.nav-tabs li a:before{content:'';position:absolute;top:50%;left:0px;width:4px;height:4px;border-radius:50%;background:#555;margin-top:-2px;} .nav-tabs li:first-child a:before{content:none;}*/ .tab_wrap{text-align:center;} .group.product_kind .flex_container .dis_flex.nav-tabs > .obj.nav-item{flex:auto;-ms-flex:auto;max-width:100%;padding:0;} .tab_wrap .flex_container .dis_flex .obj{padding:0px !important;flex:1 auto;max-width:max-content;} /* **************************************** ** popup ** **************************************** */ .modal .modal-content .close{font-size:30px;} .modal .modal-content .modal-header h4.modal-title{font-size:20px;font-weight:normal;color:#000;} /* **************************************** ** form contents ** **************************************** */ .sub_cont label{font-weight:normal;margin-bottom:0px;cursor:pointer;} .sub_cont select,.sub_cont input{outline:none;border:1px solid #ddd;color:#777;font-weight:400;height:40px;line-height:40px;padding:0px 10px;vertical-align:middle;} .sub_cont select{background:#fff url('/images/sub/select_arrow_blue.png') no-repeat right 10px center;padding:0 30px 0 10px;} .sub_cont input.mini,.sub_cont select.mini{line-height:35px;height:35px;} /*radio 커스텀*/ .box_radio input[type="radio"]:not(old){vertical-align:middle;margin:0;padding:0;opacity:0;background:url('/images/sub/check_on.png') no-repeat 0 0;background-size:22px 22px;width:0;height:35px;} .box_radio input[type="radio"]:not(old) + label{display:inline-block;text-align:left;height:22px;padding-left:27px;background:url('/images/sub/check_off.png') no-repeat 0 0;background-size:22px 22px;line-height:22px;vertical-align:middle;letter-spacing:-0.5px;} .box_radio input[type="radio"]:not(old):checked + label{background:url('/images/sub/check_on.png') no-repeat 0 0;background-size:22px 22px;} /*checkbox 커스텀*/ .box_checkbox{position:relative;} .box_checkbox input[type="checkbox"]:not(old){vertical-align:middle;margin:0;padding:0;opacity:0;background:url('/images/sub/check_on2.png') no-repeat left center;background-size:22px 22px;width:0;height:35px;} .box_checkbox input[type="checkbox"]:not(old) + label{display:inline-block;position:absolute;top:0;left:0;text-align:left;height:35px;padding-left:30px;background:url('/images/sub/check_off2.png') no-repeat left center;background-size:22px 22px;line-height:35px;vertical-align:middle;letter-spacing:-0.5px;} .box_checkbox input[type="checkbox"]:not(old):checked + label{background:url('/images/sub/check_on2.png') no-repeat left center;background-size:22px 22px;} .box_checkbox label{display:block;} /**/ /*2021-04-20 추가 e-biz------------------------------------------------------- 회원정보 관리 -------------------------------------------------------*/ .content_fullinnerw.bg_wh {background:#fff;} .again_login {font-size:20px; color:#777; text-align:center; margin-top:15px;} .add_pay_tb.td_left tr td .profile_img { display: inline-block; width: 70px; height: 70px; position: relative; overflow: hidden; border-radius: 50%;} .add_pay_tb.td_left tr td .profile_img a { display: inline-block; position: absolute; bottom: 0; left: 0; width: 70px; height: 25px; line-height: 25px; background: rgba(0,0,0,0.4); text-align: center; color: #fff; font-size: 14px;} .mart_10 {margin-top:10px;} .vert_top {vertical-align:top;} .content_inner.member-info .add_pay_tb.td_left tr td {color:#7b7b7b;} /*2021-04-20 e-biz추가--------------------------------------------------- 로그인 -----------------------------------------------------------*/ .content_fullinnerw { width: 100%; padding: 120px 0px 180px 0px; background:#f1f8fe;} .fix-width {width:100%; margin:0 auto;} .finish_tit.padding_no {padding:0px;} .finish_tit { font-size: 50px; line-height: 65px; text-align: center; font-weight: 400; color: #555; padding: 45px 0px;} .finish_tit > span {font-weight:500; color:#1e1e1e;} .login_wrap {width:500px; margin:0 auto; padding-top:80px;} .login_wrap input {width:500px; height:60px; line-height:60px; color:#777; margin-bottom:15px; padding:0px 20px;} .login_wrap button {width:500px; height:60px; line-height:60px; background:#226dc8; color:#fff; font-size:18px;} .login_wrap .check_wrap {font-size: 16px; color: #777; padding:15px 0px 40px 0px;} .login_wrap .check_wrap:after {content:''; display:block; clear:both;} .login_wrap .login_check {float: left;} .login_wrap .login_check > .checks {display:inline-block;} .login_wrap .login_check > .checks:first-child {margin-right:12px;} .login_wrap .find_login {float: right;} .login_wrap .find_login:after {content:''; display:block; clear:both;} .login_wrap .find_login > li {float:left;} .login_wrap .find_login > li a {color: #777;} .login_wrap .find_login > li:after {content:''; display:inline-block; width:1px; height:10px; background:#cdcdcd;margin: 0px 8px;} .login_wrap .find_login > li:last-child:after {display:none;} .login_wrap .etc_login > a {display:block; width:500px; height:60px; line-height:60px; color:#fff; font-size:18px; text-align:center;} .login_wrap .etc_login .naver_login { background:#03cf5d; margin-bottom:15px;} .login_wrap .etc_login .naver_login > img {vertical-align: sub; margin-right: 9px;} .login_wrap .etc_login .no_login { background:#ff9a40; margin-bottom:15px;} .login_wrap .etc_login .no_addpay { background:#2da3ed; } .checks input[type="checkbox"] {width: 107px;height: 22px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;} .checks input[type="checkbox"] + label {display: inline-block;vertical-align: baseline;position: relative;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;} .list-group-item.bg_line{padding:40px 20px;margin-bottom:10px;background:transparent;border:1px solid #ddd} .list-group-item.bg_line.bg_line_height{min-height:430px} .list-group-img{padding-bottom:20px;} .list-group-item.no_line{border:0px solid rgba(255,255,255,0.5)} .list-group-item.bg_line h4{margin-bottom:20px;} /* btn */ .btn-primary {color: #fff;border: 1px solid #553dcd;background: #553dcd;} .btn-primary:hover {background: #684eeb} .btn-lg {margin:50px 10px 0;padding:10px 30px;width:300px;height: 60px;font-size: 1.250em;line-height: 2;border-radius: 0px;vertical-align: middle;} /* popup */ .modal.idc_change .modal-dialog.modal-sm, .modal.idc_change2 .modal-dialog.modal-sm, .modal.idc_change3 .modal-dialog.modal-sm {width:50%;} .modal-dialog.modal-sm .modal-body p.indent {text-indent: -1em; margin-left: 1em;} .modal-dialog.modal-sm .modal-body p.left-margin {margin-left: 1em;} .modal-dialog.modal-sm .modal-body a.outlink {color:#226dc8; text-decoration: underline;} .modal-content{} @media all and (max-width:980px){ .modal.idc_change .modal-dialog.modal-sm, .modal.idc_change2 .modal-dialog.modal-sm, .modal.idc_change3 .modal-dialog.modal-sm {width:100%;} .sub_cont .pagination-lg>li>a, .sub_cont .pagination-lg>li>span{font-size:1em;padding:7px 12px;} .list-group-item.bg_line.bg_line_height{min-height:auto;} .finish_tit{font-size:40px;line-height:45px;padding:30px 0px;} .list-group-item.bg_line{padding:20px;} .content_fullinnerw{padding:100px 0px 150px 0px;} } @media all and (max-width:800px){ } @media all and (max-width:768px){ .sub_cont .pagination-lg>li>a, .sub_cont .pagination-lg>li>span{font-size:0.938em;padding:5px 12px;} .finish_tit{font-size:30px;line-height:35px;padding:20px;} .login_wrap .login_check > .checks{display:flex;display:-ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;align-items:center;} .login_wrap .login_check > .checks label{margin:0;} .login_wrap .check_wrap .checks input[type="checkbox"]{width:35px !important;} .list-group-item.bg_line{padding:15px;} .content_fullinnerw{padding:70px 0px 100px 0px;} .nav-tabs li a{padding:0 15px;} } @media all and (max-width:640px){ .finish_tit{font-size:24px;line-height:1.5;padding:15px;} .login_wrap{width:350px !important;padding-top:50px;} .login_wrap input{width:350px !important;height:50px;line-height:50px;margin-bottom:10px;padding:0px 15px;} .login_wrap button{width:350px !important;height:50px;line-height:50px;font-size:16px;} .login_wrap .check_wrap{font-size:14px;padding:15px 0px 20px 0px;} .login_wrap .etc_login > a{width:350px;height:50px;line-height:50px;font-size:16px;} .content_fullinnerw{padding:50px 0px 100px 0px;} .nav-tabs li a{padding:0 10px;} } @media all and (max-width:520px){ .login_wrap{padding-top:30px;} .finish_tit{font-size:20px;} .nav-tabs li a{font-size:16px;} } @media all and (max-width:480px){ .finish_tit{font-size:18px;} .login_wrap{width:300px !important;padding-top:30px;} .login_wrap input{width:300px !important;} .login_wrap button{width:300px !important;font-size:14px;} .login_wrap .check_wrap{font-size:13px;padding:10px 0px 15px 0px;} .login_wrap .etc_login > a{width:300px;font-size:14px;} .login_wrap .find_login{margin-top:10px;} .sub_cont .pagination-lg>li>a, .sub_cont .pagination-lg>li>span{font-size:11px;padding:5px 7px;} } /* 보안 서브페이지 리뉴얼 230914 */ /*--------------- 방화벽 ----------------*/ .top_tabs{} .top_tabs .tabs input:checked+.tab_item{background-color: #553ecd; color: #fff; border: 0;} .top_tabs .tab_item{background-color: #ffffff; border:0; box-shadow: 0 0px 20px rgb(0 0 0 / 10%);} .top_tabs .tab_content{border: 0; padding: 0;} .top_tabs .p1{width: 80%;margin:auto;} .top_tabs .layout01{margin-top: 60px;} .top_tabs > .sub_cont .group{margin: 40px auto 80px !important;} .top_tabs .tabs{padding-bottom: 0;} .top_tabs .seocho ul li{background: #f6f7f9;padding: 0; border-radius: 10px 10px 0 0; overflow: hidden;} .top_tabs .seocho ul li > .list-group-img{padding-bottom: 0;} .top_tabs .seocho .list_set01{ padding: 20px 30px 20px; border-top: 1px solid #ddd;} .top_tabs .seocho .list_set01 ul li{display: block; color: #555; font-size: 17px; line-height: 25px; letter-spacing: -0.5px; text-align: left; border: 0; border-radius: 0; overflow: unset; float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #555; letter-spacing: -1px;} .top_tabs .seocho .list_set01 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .group > .back_bg{padding: 183px 0;background: #f4f4fe;position: absolute;left: 0;width: 100%;} .Whois_firewall01{padding: 55px 0; background: #f4f4fe; position: relative;} .Whois_firewall01 .box{display: grid; grid-template-columns: 1fr 1fr; gap: 50px; /* align-items: center; */ /* justify-content: center; */} .Whois_firewall01 .box .txt h3{padding-top: 30px; font-size: 30px; font-weight: 500;} .Whois_firewall01 .box .txt h3 b{color: #553dcd;} .Whois_firewall01 .box .txt span{padding: 40px 0 0; display: inline-block; font-size: 18px; word-break: break-word;} .Whois_firewall01 .box .txt span b{color: #553dcd;} .Whois_firewall01 .box .txt .wrap_DB{background: #fff; border-radius: 10px; margin-bottom: 10px; padding: 20px 30px;} .Whois_firewall01 .box .txt .wrap_DB:last-child{margin-bottom: 0;} .Whois_firewall01 .box .txt .wrap_DB .DB_list{padding-top: 0;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner{align-items: unset; border: 0; background: unset; z-index: unset; padding: 0;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner::before{display: none;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner p{text-align: left;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner .DB_bold{font-size: 20px; font-weight: 600;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner .mo_view{display: none;} .item_03 .list_set01{padding: 30px 30px 60px;} .item_03 .list_set01 ul li{display: block; color: #555; font-size: 17px; line-height: 25px; letter-spacing: -0.5px; text-align: left; border: 0; border-radius: 0; overflow: unset; float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #555; letter-spacing: -1px;} .item_03 .list_set01 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .item_03 ul{gap: 30px;} .item_03 ul.grid3{margin-top:30px;} .item_03 ul li{background: #f9f9ff; padding: 0;} .item_03 ul li > h4{font-weight: 500; margin: 0 0 0 10px;} .item_03 ul li > span{display: block; margin-top:10px; color: #555; font-size: 16px; line-height: 25px; margin: 5px 10px 0; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.5px;} .item_03 ul li > .list-group-img{} .item_03 ul li > .list-group-img{width: 100%; margin: auto; padding: 60px 0 20px;} .item_03 ul li > .list-group-img img{width:100%;} .SecureOne-info .box {display: grid;grid-template-columns: 1fr 1fr;gap: 50px;margin: 50px 0;justify-content: space-around;align-items: center;align-content: space-evenly;} .SecureOne-info .box .img{text-align: right;} .SecureOne-info .box .img img{border-radius: 20px;} .SecureOne-info .box .txt h5{font-size: 30px; font-weight: bold; margin-bottom: 30px; letter-spacing: -1px; color: #333;} .SecureOne-info .box .txt h5 b{color: #553dcd;} .SecureOne-info .box .txt{font-size: 20px; color: #555;} .SecureOne-info .box ul li{line-height: 2;} .information .wrap .info_mo{display: none;} .information .wrap .cs .txt .call_align{display: flex; flex-direction: row; justify-content: space-between; align-items: center;} .information .wrap .info_pc{margin: 15px 0 0 25px; line-height: 1;} .information .wrap .info_pc p{font-size: 20px; margin-bottom: 10px;} .information .wrap .info_pc p:last-child{margin-bottom: 0;} .information .wrap .info_pc p > strong{display: inline-block; width: 75px; text-align: center; background: #eee; padding: 8px 10px; margin-right: 5px; font-size: 15px; border-radius: 10px; font-weight: 500;} .information .wrap .info_pc p span{font-size: 20px;} .information .wrap .info_mo p{font-size: 20px; margin-bottom: 10px;} .information .wrap .info_mo p:last-child{margin-bottom: 0;} .information .wrap .info_mo p > strong{display: inline-block; width: 75px; text-align: center; background: #eee; padding: 8px 10px; margin-right: 5px; font-size: 15px; border-radius: 10px; font-weight: 500;} @media all and (max-width:1250px){ .group > .back_bg{display: none;} .Whois_firewall01{padding: 35px;} } @media all and (max-width:930px){ .information .wrap .info_mo p{font-size: 18px;} .SecureOne-info .box .txt h5{font-size: 26px; margin-bottom: 15px;} .SecureOne-info .box ul li{font-size: 18px; } .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner img{padding: 0 30px;} } @media all and (max-width:820px){ .top_tabs .p1{width: 100%;} .top_tabs .seocho .list_set01 ul li{font-size: 16px;} .Whois_firewall01{padding: 50px 10px 50px;} .Whois_firewall01 .box{display: block;} .Whois_firewall01 .box .txt h3{padding-top: 0; font-size: 22px;} .Whois_firewall01 .box .txt span{font-size: 15px; padding: 10px 0 20px;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner .DB_bold{font-size: 18px; font-weight: 600;} .Whois_firewall01 .box .txt .wrap_DB .DB_list .DB_inner .mo_view{display: block; font-size: 15px;} .Whois_firewall01 .box .txt .wrap_DB ol li:last-child{display: none;} .item_03 ul{display: block;} .item_03 ul.grid3{margin-top: auto;} .item_03 ul li{margin: 15px 0;} .item_03 ul li > span {font-size: 15px; line-height: 23px;} .item_03 ul li > .list-group-img{padding: 60px 0 0;} .item_03 .list_set01 {padding: 25px;} .item_03 .list_set01 ul li{font-size: 16px;} .SecureOne-info .box{display: block; margin: 30px 0;} .SecureOne-info .box .img{text-align: center;} .SecureOne-info .box .img img{border-radius: 10px;} .SecureOne-info .box .txt h5 {font-size: 22px; margin: 10px auto;} .SecureOne-info .box .txt {padding: 15px 10px 0; background: #fff; font-size: 16px;} .SecureOne-info .box ul li{font-size: 15px;} .information .wrap .info_pc{display: none;} .information .wrap .info_mo{display: flex; align-items: center; gap: 10px;} .information .wrap .info_mo p {font-size: 17px; margin-bottom: 0; text-align: center;} .information .wrap .info_mo p > strong {display: block; width:auto; background: #eee; padding: 8px 10px; margin: 5px 0; font-size: 15px;} } @media all and (max-width:768px){ .top_tabs .layout01{margin-top: 40px;} } @media all and (max-width:480px){ .top_tabs .layout01{margin-top: 20px;} } @media all and (max-width:320px){ .information .wrap .info_mo {gap: 15px;} .information .wrap .info_mo p {font-size: 15px;} .information .wrap .info_mo p > strong{margin: 0 0 5px; font-size: 15px; padding: 8px;} } /*--------------- 보안관제 ----------------*/ .group > .back_bg2{padding: 660px 0; background: #f4f4fe; position: absolute; left: 0; width: 100%;} .group > .back_bg3{padding: 440px 0; background: #f4f4fe; position: absolute; left: 0; width: 100%;} .p_block_layout{background: #f4f4fe;} .p_block_layout .diagram_wrap{position: relative; background: #fff; width: 100%; border-radius: 10px; margin-top: 50px; padding: 70px 20px; overflow: auto;} .p_block_layout .diagram_wrap .diagram_txt_box{position: relative; width: 1180px;} .p_block_layout .diagram_wrap .diagram_txt_box ul li{position: absolute; display: inline-block; font-size: 20px; padding: 0; letter-spacing: 0px; margin: 0; background: unset; vertical-align: top; line-height: 1; text-align: center;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(1){top: 80px; left: 0;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(2){top: 80px; left: 15.3%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(3){top: 80px; left: 30.3%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(4){top: 80px; left: 47%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(5){top: 80px; left: 62.9%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(6){top: 80px; left: 77.7%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(7){top: 80px; left: 92.8%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(8){top: 260px; left: 15.8%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(9){top: 260px; left: 46.5%;} .p_block_layout .diagram_wrap .diagram_txt_box ul li:nth-of-type(10){top: 260px; left: 92.5%;} .p_block_layout ul{gap: 30px;} .p_block_layout ul.grid3{position: relative; margin-top:30px; background: #f4f4fe;} .p_block_layout ul li{background: #fff; display: block; font-size: 17px; border-radius: 10px; overflow: unset; float: none; position: relative; padding: 5px 10px 5px 10px; word-break: keep-all; color: #555; letter-spacing: -1px; text-align: left;} .p_block_layout .list_set01 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .p_block_layout ul li .list_set01{padding: 50px 30px 30px; border-top: 0; text-align: left;} .p_block_layout ul li .list_set01 h4{font-weight: 600; margin: 0 0 0 10px; color: #000;} .p_block_layout ul li > span{display: block; margin-top:10px; color: #555; font-size: 16px; line-height: 25px; margin: 5px 10px 0; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.5px;} .p_block_layout ul li > .list-group-img{width: 100%; margin: auto; text-align: right; padding: 30px 30px 30px;} .p_block_layout ul li > .list-group-img img{width:100%;} .A3-aegis_bg2{background: url(/images/sub/security_control08.jpg) 57% 57% no-repeat;} .A3-aegis_bg3{background: url(/images/sub/security_control10.jpg) 44% 57% no-repeat;} .A3-aegis_bg {border-radius: 20px; position: relative; height: 400px; display: flex; flex-wrap: wrap; align-items: center; margin: 50px 50px 0;} .A3-aegis_bg .title h2{color: #fff; font-size: 40px; line-height: 55px; margin-left: 100px; font-weight: bold; letter-spacing: -1px;} .A3-aegis_bg3 .title h2{font-size: 35px;margin-left: 0px; text-align: center;} .A3-aegis_bg .title h2 b{color: #dcabff;} .A3-aegis_bg .title p{margin: 20px 0 0 100px; color: #fff; font-size: 20px;} .p_block_layout .list_set02 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .p_block_layout ul li .list_set02{padding: 50px 30px 30px; border-top: 0; text-align: left;} .p_block_layout ul li .list_set02 h4{font-weight: 600; margin: 0 0 60px 0; color: #000;} .p_block_layout ul li:nth-of-type(2) .list_set02 h4{margin: 0 0 20px 0;} .p_block_layout ul li:nth-of-type(4) .list_set02 h4{margin: 0 0 20px 0;} .p_block_layout ul li .list_set02 p{font-size: 17px; } .p_block_layout ul li > .list-group-img2{width: 100%; margin: auto; text-align: right; padding: 5px;} .p_block_layout ul li > .list-group-img2 img{width:100%;} @media all and (max-width:1250px){ .group > .back_bg2{display: none;} .group > .back_bg3{display: none;} .p_block_layout{padding: 30px;} .p_block_layout ul li .list_set01{height: 350px;} .A3-aegis_bg .title h2{font-size: 30px;} .A3-aegis_bg .title p{font-size: 18px;} } @media all and (max-width:820px){ .p_block_layout{padding: 20px;} .p_block_layout .diagram_wrap{margin: 0 auto 20px;} .p_block_layout ul{display: block;} .p_block_layout ul.grid3{margin-top: auto;} .p_block_layout ul li{font-size: 16px; padding: 5px 10px; margin: 0 auto 20px;} .p_block_layout ul li .list_set01{padding: 20px 20px 0 20px; height: unset;} .p_block_layout ul li .list_set01 h4{margin: 0; font-size: 20px;} .p_block_layout ul li > .list-group-img{padding: 0 20px 20px 20px;} .p_block_layout ul li > span {font-size: 15px; line-height: 23px;} .p_block_layout ul li .list_set02{padding: 20px 20px 0;} .p_block_layout ul li .list_set02 h4{font-size: 22px; margin: 0 auto 5px;} .p_block_layout ul li .list_set02 p{font-size: 16px;} .p_block_layout ul li:nth-of-type(2) .list_set02 h4{margin: 0 auto 5px;} .p_block_layout ul li > .list-group-img2{margin-top: 15px;} .A3-aegis_bg{height: 320px; justify-content: center; margin: 0;} .A3-aegis_bg .title h2{margin-left:0; text-align: center; font-size: 22px; line-height: 30px; padding: 0;} .A3-aegis_bg3 .title h2{font-size: 22px;} .A3-aegis_bg .title p{font-size: 15px; margin: 20px 20px 0; color: #fff; word-break: keep-all;} } @media (max-width: 530px){ } @media all and (max-width:320px){ } /*--------------- 컨설팅 ----------------*/ .p2 {width: 80%; margin: auto;} .p2 .normal3 tbody th, .normal3 tbody td{padding: 30px;} .item_04 .list_set01{padding: 60px 50px;} .item_04 .list_set01 h4{text-align: left; font-weight: 600; font-size: 30px; margin-bottom: 10px;} .item_04 .list_set01 ul li{display: block; color: #555; font-size: 17px; line-height: 25px; letter-spacing: -0.5px; text-align: left; border: 0; overflow: unset; float: none; position: relative; padding: 5px 0 0 10px; word-break: keep-all; color: #555; letter-spacing: -1px;} .item_04 .list_set01 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .item_04 ul{gap: 30px;} .item_04 ul.grid2 > li:first-child{background: #f4f7fe; padding: 0; border-radius: 20px;} .item_04 ul.grid2 > li:last-child{background: #fff4f4; padding: 0; border-radius: 20px;} .item_04 ul li > .list-group-img{width: 100%; margin: auto; padding: 0;} .item_04 ul li > .list-group-img img{width:100%;} .Whois_consulting01{padding: 40px 0; background: #f8f8f8; position: relative;} .Whois_consulting01 .box{display: grid;grid-template-columns: 1fr 0.5fr; gap: 50px; align-items: center;} .Whois_consulting01 .box .txt h3{font-size: 26px; font-weight: 500;} .Whois_consulting01 .box .txt h3 b{font-weight: 600;} .Whois_consulting01 .box .txt .wrap_IMG{} .diagnosis-wrap{margin: 50px 0;} .diagnosis-wrap h3{padding-bottom: 30px;} .diagnosis-wrap h3 b{color: #553dcd;} .diagnosis-wrap .box {gap: 25px;} .diagnosis-wrap .box .obj{position: relative;} .diagnosis-wrap .box .obj:after{content: ''; position: absolute; top: 50%; right: -21px; margin-top: -16px; width: 32px; height: 32px; background: url(/images/sub/process_arrow.png); z-index: 9;} .diagnosis-wrap .box .obj:last-child:after{display: none;} .diagnosis-wrap .box .obj div{display: block; border-radius: 30px;padding: 40px 30px 20px; height: 100%;background: #f4f4ff;} .diagnosis-wrap .box .obj div:hover {top: -20px; box-shadow: 0 10px 20px rgb(0 0 0 / 16%); transition: all 0.2s linear; box-sizing: border-box;} .diagnosis-wrap .box .obj div:hover div::before {opacity: 1; transition: all 0.2s linear;} .diagnosis-wrap .box .obj h5 {font-size: 22px; font-weight: 600; padding-bottom: 15px;} .diagnosis-wrap .box .obj ul{height: 120px;} .diagnosis-wrap .box .obj ul li{font-size: 18px; line-height: 1.5;} .diagnosis-wrap .box .obj span{width: 100%;display: block; margin: 0 auto; text-align: right;} .p_block_layout02{background: unset; width: 100%; overflow: auto;} .diagnose_wrap{position: relative; width: 1250px; overflow: hidden;} .diagnose_wrap .diagnose_top_box{position: relative; top: 9px; left: 11%; font-size: 20px;} .diagnose_wrap .diagnose_top_box p{position: absolute; color: #fff; font-weight: 600;} .diagnose_wrap .diagnose_top_box p:nth-of-type(1){} .diagnose_wrap .diagnose_top_box p:nth-of-type(2){left: 35.7%;} .diagnose_wrap .diagnose_top_box p:nth-of-type(3){left: 70.8%;} .diagnose_wrap .diagnose_bottom_box{position: relative; font-size: 20px;} .diagnose_wrap .diagnose_bottom_box .diagnose_left{position: absolute; left: 7.6%; top: 84px; font-weight: 500;} .diagnose_wrap .diagnose_bottom_box .diagnose_left p{position: relative;} .diagnose_wrap .diagnose_bottom_box .diagnose_left p:nth-of-type(1){} .diagnose_wrap .diagnose_bottom_box .diagnose_left p:nth-of-type(2){top: 79px;} .diagnose_wrap .diagnose_bottom_box .diagnose_left p:nth-of-type(3){top: 157px;} .diagnose_wrap .diagnose_bottom_box .diagnose_left p:nth-of-type(4){top: 236px;} .diagnose_wrap .diagnose_bottom_box .diagnose_center{position: absolute; left: 40.5%; top: 84px; font-weight: 500;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p{position: relative;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(1){} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(2){top: 36px;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(3){top: 69px;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(4){top: 105px;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(5){top: 138px;} .diagnose_wrap .diagnose_bottom_box .diagnose_center p:nth-of-type(6){top: 170px;} .diagnose_wrap .diagnose_bottom_box .diagnose_right{position: absolute; left: 80%; top: 84px; font-weight: 500;} .diagnose_wrap .diagnose_bottom_box .diagnose_right p{position: relative;} .diagnose_wrap .diagnose_bottom_box .diagnose_right p:nth-of-type(1){} .diagnose_wrap .diagnose_bottom_box .diagnose_right p:nth-of-type(2){top: 51px;} .diagnose_wrap .diagnose_bottom_box .diagnose_right p:nth-of-type(3){top: 103px;} .diagnose_wrap .diagnose_bottom_box .diagnose_right p:nth-of-type(4){top: 154px;} .diagnose_wrap .diagnose_bottom_box .diagnose_right p:nth-of-type(5){top: 204px;} @media all and (max-width:1250px){ .Whois_consulting01{padding: 50px;} } @media all and (max-width:1100px){ .diagnosis-wrap .box{display: flex; flex-direction: column;} .diagnosis-wrap .box .obj:after {top: auto; bottom: -5%; right: 45%; transform: rotate(90deg);} .diagnosis-wrap .box .obj h5{font-size: 20px;} .diagnosis-wrap .box .obj ul{height: auto;} .diagnosis-wrap .box .obj ul li{font-size: 16px;} } @media all and (max-width:820px){ .p2 .normal3 tbody th, .normal3 tbody td{padding: 10px;} .item_04 .list_set01 {padding: 30px;} .item_04 .list_set01 h4{font-size: 22px;} .item_04 .list_set01 ul li{font-size: 15px;} .item_04 ul.grid2 > li:first-child{margin-bottom: 20px;} .item_04 ul{display: block;} .item_04 ul.grid3{margin-top: auto;} .item_04 ul li{font-size: 16px; margin: 0;} .item_04 ul li > span {font-size: 15px; line-height: 23px;} .Whois_consulting01{padding: 30px;} .Whois_consulting01 .box{display: block;} .Whois_consulting01 .box .txt h3{padding-top: 0; font-size: 20px; text-align: center;} .Whois_consulting01 .box .txt .wrap_IMG {text-align: center; padding-top: 30px;} .diagnosis-wrap{padding: 30px; margin: 0;} .diagnosis-wrap h3{font-size:22px; padding-bottom: 10px;} .p_block_layout .diagram02_wrap{} .p_block_layout .diagram02_wrap .diagram_txt_box ul li{font-size: 16px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(2) {left: 120px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(3) {left: 245px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(4) {left: 395px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(5) {left: 555px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(6) {left: 705px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(7) {left: 835px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(8) {left: -135px;} .p_block_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(9) {left: 190px;} .p_block_layout .diagram02s_wrap .diagram_txt_box ul li:nth-of-type(10) {left: 700px;} } /*--------------- 정보보안 ----------------*/ .malignant_bg2{background: url(/images/sub/information_security05.jpg) 25% 60% no-repeat;} .malignant_bg {border-radius: 20px; position: relative; height: 400px; display: flex; flex-wrap: wrap; align-items: center; margin: 50px 50px 0;} .malignant_bg .title h2{color: #fff; font-size: 40px; line-height: 55px; margin-left: 100px; font-weight: bold; letter-spacing: -1px;} .malignant_bg2 .title h2{font-size: 35px;margin-left: 0px; text-align: center;} .malignant_bg .title h2 b{color: #dcabff;} .malignant_bg .title p{margin: 20px 0 0 100px; color: #fff; font-size: 20px;} .mail_training_layout {} .mail_training_layout h4{font-size: 30px; font-weight: 500; padding-bottom: 30px;} .mail_training_layout .diagram02_wrap{position: relative; display: block; background: #fff; width: 100%; border-radius: 10px; overflow: hidden;} .mail_training_layout .diagram02_wrap .diagram_txt_box{position: absolute;} .mail_training_layout .diagram02_wrap .diagram_txt_box ul li{position: relative; display: inline-block; font-size: 20px; letter-spacing: 0px; padding: 0; letter-spacing: 0px; margin: 0; background: unset; vertical-align: top; line-height: 1; text-align: center;} .mail_training_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(1){top: 80px; left: 4px;} .mail_training_layout .diagram02_wrap .diagram_txt_box ul li:nth-of-type(2){top: 80px; left: 105px;} .mail_training .diagram02_wrap .diagram_txt_box ul li:nth-of-type(3){top: 80px; left: 220px;} .mail_training_layout{width: 100%; overflow: auto;} .mail_training_wrap{position: relative; width: 1250px; overflow: hidden;} .mail_training_wrap .mail_training_top_box{position: relative; top: 44px; font-size: 24px; font-weight: 600; color: #fff; word-spacing: -5px;} .mail_training_wrap .mail_training_top_box ul li{position: absolute;} .mail_training_wrap .mail_training_top_box ul li:nth-of-type(1){left: 5.5%;} .mail_training_wrap .mail_training_top_box ul li:nth-of-type(2){left: 32%;} .mail_training_wrap .mail_training_top_box ul li:nth-of-type(3){left: 58%;} .mail_training_wrap .mail_training_top_box ul li:nth-of-type(4){left: 84.5%;} .mail_training_wrap .mail_training_bottom_box{position: relative; top: 172px; left: 9%; font-size: 17px; font-weight: 400; color: #000; word-spacing: -5px;} .mail_training_wrap .mail_training_bottom_box ul > li{position: absolute; font-size: 20px; font-weight: bold;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(1){top: 28px; left: -0.3%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(2){position: absolute; top: 75px; left: 3%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(3){top: 300px; left: -2.2%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(4){top: 260px; left: 10%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(5){top: -55px; left: 42%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(6){top: 70px; left: 32.9%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(7){top: 301px; left: 22.9%; word-spacing: 1px; } .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(8){top: 26px; left: 57.2%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(9){top: 105px; left: 48%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(10){top: 265px; left: 48%; word-spacing: 1px;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(11){top: 27px; left: 74%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(12){top: 135px; left: 76.9%;} .mail_training_wrap .mail_training_bottom_box ul li:nth-of-type(13){top: 300px; left: 72%;} .mail_training_wrap .mail_training_bottom_box ul li > .bottom_box_list {position: relative; text-align: left; top: 5px; left: -2%; font-size: 17px; font-weight: 400;} .mail_training_wrap .mail_training_bottom_box ul li .bottom_box_list p{line-height: 1.2; word-spacing: 0px;} .mail_training_wrap .mail_training_img{} .mail_training_wrap .mail_training_img img{width: 1250px; padding: 30px 0;} @media all and (max-width:1250px){ .malignant_bg > div{width: 100%; text-align: center;} .malignant_bg2 .title h2{ font-size: 25px; margin-left: 0px; text-align: center;} } @media all and (max-width:820px){ .malignant_bg{height: 320px; justify-content: center; margin: 30px 20px 0;} .malignant_bg .title h2{margin-left:0; text-align: center; font-size: 25px; line-height: 35px; padding: 0 50px;} .malignant_bg2 .title h2{font-size: 20px; padding: 0px 35px;} .malignant_bg .title p{font-size: 16px; margin:10px 20px 0; color: #fff; word-break: keep-all;} .mail_training_layout .diagram02_wrap{overflow: auto;} .mail_training_layout h4{font-size: 25px; padding: 0;} } /*--------------- 엔드포인트 보안 ----------------*/ .top_tabs .seocho .list_set01 h4{ padding-bottom: 5px; font-size: 22px; text-align: left; font-weight: 600;} .explan .new-price-box{margin: 35px 0 20px;} .explan .new-price-box p.price_dw{ font-size: 25px; color: #333; font-weight: 600;} .explan .new-price-box p.price_dw span.won{font-size: 15px; font-weight: 400; color: #777; padding-left: 0;} .group > .back_bg4{padding: 222px 0; background: #f4f4fe; position: absolute; left: 0; width: 100%;} .p_block_layout ul.grid2 {position: relative; margin-top: 30px; background: #f4f4fe;} .p_block_layout .list_set03 ul li:before{content: ''; position: absolute; top: 17px; left: 0px; width: 3px; height: 3px; border-radius: 50%; background: #777;} .p_block_layout ul li .list_set03{padding: 50px 30px 30px; border-top: 0; text-align: left;} .p_block_layout ul li .list_set03 h4{font-weight: 600; margin: 0 0 20px 0; color: #000;} .p_block_layout ul li:nth-of-type(2) .list_set03 h4{margin: 0 0 20px 0;} .p_block_layout ul li:nth-of-type(4) .list_set03 h4{margin: 0 0 20px 0;} .p_block_layout ul li .list_set03 p{font-size: 17px;} .blancco_des{text-align: center; padding: 80px 0 80px; width: 100%; overflow: auto; } .blancco_txt_box{position: relative; width: 1220px; } .blancco_txt_box .blancco_box{text-align: left; font-size: 12px;} .blancco_txt_box .blancco_box .box_left{position: absolute; left: 6.8%; top: 109px;} .blancco_txt_box .blancco_box .box_left p{position: relative;} .blancco_txt_box .blancco_box .box_left p:nth-of-type(1){} .blancco_txt_box .blancco_box .box_left p:nth-of-type(2){top: 14px;} .blancco_txt_box .blancco_box .box_left p:nth-of-type(3){top: 11px;} .blancco_txt_box .blancco_box .box_left p:nth-of-type(4){top: 8px;} .blancco_txt_box .blancco_box .box_left p:nth-of-type(5){top: 5px;} .blancco_txt_box .blancco_box .box_left p:nth-of-type(6){top: 3px;} .blancco_txt_box .blancco_box .box_right{position: absolute; left: 14.3%; top: 108px;} .blancco_txt_box .blancco_box .box_right p{position: relative;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(1){} .blancco_txt_box .blancco_box .box_right p:nth-of-type(2){top: -7px;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(3){top: -10px;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(3):after{content: ""; display: block; border: 2px solid #970c1d; border-radius: 5px; width: 188px; height: 18px; top: 1px; left: -10px; position: absolute; padding: -5px;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(4){top: -12px;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(5){top: -15px;} .blancco_txt_box .blancco_box .box_right p:nth-of-type(6){top: -17px;} .blancco_txt_box .blancco_name{position: absolute; top: 98px; left: 70.9%; text-align: left; font-size: 15px; font-weight: 600;} .blancco_txt_box .blancco_name p{position: relative;} .blancco_txt_box .blancco_name p:nth-of-type(1){top: 395px; left: -250%;} .blancco_txt_box .blancco_name p:nth-of-type(2){top: -26px;} .blancco_txt_box .blancco_name p:nth-of-type(3){top: 23px;} .blancco_txt_box .blancco_name p:nth-of-type(4){top: 321px;} .Whois-data-info .box {display: grid;grid-template-columns: 1fr 1fr;/* gap: 50px; */margin: 50px 0;justify-content: space-around;align-items: center;align-content: space-evenly;} .Whois-data-info .box .img{text-align: center;} .Whois-data-info .box .img img{border-radius: 20px;} .Whois-data-info .box .txt h5{font-size: 26px;font-weight: bold; margin-bottom: 30px;letter-spacing: -1px;color: #333;} .Whois-data-info .box .txt h5 b{color: #553dcd;} .Whois-data-info .box .txt{font-size: 20px; color: #555;} .Whois-data-info .box .txt p{font-size: 20px; word-break: keep-all;} @media all and (max-width:1250px){ .group > .back_bg4{display: none;} .Whois-data-info .box .txt h5{font-size: 24px;} .Whois-data-info .box .txt p{font-size: 18px;} } @media all and (max-width:900px){ .addition_service ul{display: block;} .Whois-data-info .box{display: block; margin: 30px 0;} .Whois-data-info .box .img{text-align: center;} .Whois-data-info .box .img img{border-radius: 10px;} .Whois-data-info .box .txt h5 {font-size: 25px; margin-bottom: 10px; text-align: center;} .Whois-data-info .box .txt {padding: 15px 10px 0; background: #fff; font-size: 16px;} } @media all and (max-width:820px){ .p_block_layout ul li .list_set03 h4{font-size: 20px;} } /*--------------- 보안솔루션 보안 ----------------*/ .server_five{padding: 80px 0;background: #f8f8f8;position: relative;/* z-index: -2; */} .server_five .box{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px;} .server_five .box ul{display: grid; grid-template-columns: 1fr 5fr; align-items: center; background: #fff; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); padding: 20px; border-radius: 10px; gap: 20px;} .server_five .box ul li{} .server_five .box ul li.icon{padding: 10px;} .server_five .box ul li h3{font-size:25px; font-weight: 500; margin-bottom: 5px;} .remote .box ul li p{font-size: 17px;} .server_five_list {display: grid; padding-top: 30px; gap: 10px;} .server_five_item {position: relative;} .server_five_inner {display: flex;flex-direction: column;align-items: center;position: relative;width: 100%;height: 100%;padding: 30px;border: 1px solid #e5e5e5;background: #fff;/* z-index: -2; */} .server_five_inner::before {content: ""; position: absolute; top: -1px; left: 50%; width: 20%; height: 2px; background-color: #77dae7; transform: translate(-50%, 0);} .server_five_inner > img{width:60px;} .server_five_inner h3{text-align: center; font-size: 23px; line-height: 30px; padding: 15px 0; font-weight: 500; color: #000;} .server_five_inner span {position: absolute; top: 50%; left: 50%; font-weight: 800; font-size: 90px; color: #f5f5f5; line-height: 1; transform: translate(-50%, -50%); z-index: -1;} .server_five_inner p{text-align: center; font-size: 16px; line-height: 25px; color: #333; font-family: 'Noto Sans KR';} .protect_layout{} .protect_layout h4{font-size: 30px; font-weight: 600; padding-bottom: 10px;} .protect_layout > p{font-size: 22px; padding-bottom: 25px;} .protect_layout .diagram03_wrap{display: block; background: #fff; width: 100%; border-radius: 10px; overflow: hidden; /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); */} .protect_layout .diagram03_wrap .diagram_txt_box{position: relative; width: 1250px;} .protect_layout .diagram03_wrap .diagram_txt_box p{position: absolute; display: inline-block; padding: 0; letter-spacing: 0px; margin: 0; background: unset; vertical-align: top; text-align: center;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt{position: relative; top: 63px;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt p{font-size: 18px; font-weight: bold; word-spacing: -2px; line-height: 1.2;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt p:nth-of-type(1){left: 5.4%;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt p:nth-of-type(2){left: 33.1%;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt p:nth-of-type(3){left: 56.9%;} .protect_layout .diagram03_wrap .diagram_txt_box .big_txt p:nth-of-type(4){left: 82%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01{position: relative; top: 203px;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p{font-size: 12px; word-spacing: -2px; line-height: 1.2;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(1){left: 2.6%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(2){left: 15.4%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(3){left: 27.5%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(4){left: 39.2%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(5){left: 51.5%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(6){left: 66.4%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(7){left: 78.1%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt01 p:nth-of-type(8){left: 90.3%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02{position: relative; top: 309px;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p{font-size: 12px; word-spacing: -2px; line-height: 1.2;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(1){left: 3%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(2){left: 15.7%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(3){left: 29.1%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(4){left: 40%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(5){left: 53.2%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(6){left: 63.3%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(7){left: 78.1%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt02 p:nth-of-type(8){left: 90.8%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03{position: relative; top: 416px;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p{font-size: 12px; word-spacing: -2px; line-height: 1.2;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(1){left: 3.2%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(2){left: 16.4%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(3){left: 29.1%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(4){left: 41.5%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(5){left: 53.2%;} .protect_layout .diagram03_wrap .diagram_txt_box .small_txt03 p:nth-of-type(6){left: 66.6%;} .protect_layout .diagram03_wrap .diagram_img_box{width: 100%;} .end_point_info{} .end_point_info .box{display: grid;grid-template-columns: 2fr 1fr;align-items: center;gap: 80px; justify-items: right; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 50px 0;} .end_point_info .box .txt{} .end_point_info .box .txt h2{font-weight: bold; font-size: 35px; margin-bottom: 20px;} .end_point_info .box .txt p{margin-bottom: 20px; font-size: 18px; font-family: 'Noto Sans KR';} .end_point_service ul{margin:50px 0 auto;display: flex;} .end_point_service ul li{flex: 1;} .end_point_service ul li dl{padding:0 20px;} .end_point_service ul li dl dt{width: 300px;height: 300px; line-height:300px; background:#f4f4fe;border-radius:50%;display:block;margin:0 auto 30px auto;} .end_point_service ul li dl dt h5{font-size: 25px; font-weight: 500; width: 100%; height: auto; display: inline-block; vertical-align: middle;} .end_point_service ul li dl dd{color:#777;word-break:keep-all;font-size: 18px;letter-spacing: -1px;} .end_point_service .fl_left.three_li{margin: 50px 150px 0;} .end_point_service .fl_left.three_li li:nth-of-type(1) dl dt{background: #fff1f4;} .end_point_service .fl_left.three_li li:nth-of-type(2) dl dt{background: #fff8ee;} .end_point_service .fl_left.three_li li:nth-of-type(3) dl dt{background: #f0fff2;} .end_point_service .fl_left.four_li ul{margin: 0 auto;} .end_point_service .fl_left.four_li > li{width: 25%;} .end_point_service .fl_left.four_li li:nth-of-type(1) dl dt{background: #edfffd;} .end_point_service .fl_left.four_li li:nth-of-type(2) dl dt{background: #eff4ff;} .end_point_service .fl_left.four_li li:nth-of-type(3) dl dt{background: #effafe;} .end_point_service .fl_left.four_li li:nth-of-type(4) dl dt{background: #fff8ff;} .end_point_service h3{font-size: 26px; font-weight: 600; margin-bottom: 20px;} .group > .back_bg5{padding: 391px; background: #f8f8f8; position: absolute; left: 0; width: 100%;} .diagnosis02-wrap h3{padding-bottom: 30px;} .diagnosis02-wrap h3 b{color: #553dcd;} .diagnosis02-wrap .box {gap: 25px;} .diagnosis02-wrap .box .obj{position: relative;} .diagnosis02-wrap .box .obj:after{content: ''; position: absolute; top: 50%; right: -21px; margin-top: -16px; width: 32px; height: 32px; background: url(/images/sub/process_arrow.png); z-index: 9;} .diagnosis02-wrap .box .obj:last-child:after{display: none;} .diagnosis02-wrap .box .obj div{display: block; border-radius: 30px;padding: 40px 30px 20px; height: 100%;background: #f4f4ff;} .diagnosis02-wrap .box .obj div:hover {top: -20px; box-shadow: 0 10px 20px rgb(0 0 0 / 16%); transition: all 0.2s linear; box-sizing: border-box;} .diagnosis02-wrap .box .obj div:hover div::before {opacity: 1; transition: all 0.2s linear;} .diagnosis02-wrap .box .obj h5 {font-size: 22px; font-weight: 600; padding-bottom: 15px;} .diagnosis02-wrap .box .obj ul{height: 120px;} .diagnosis02-wrap .box .obj ul li{font-size: 18px; line-height: 1.5;} .diagnosis02-wrap .box .obj span{width: 100%;display: block;margin: 60px auto 0;text-align: right;} .group02{margin: 0 auto 50px;} .mg200{margin: 0 205px 0;} @media all and (max-width:1280px){ /* .end_point_service ul li dl dt{width:180px;height:180px;line-height:180px;} */ } @media all and (max-width:1250px){ /* .protect_layout */{padding: 30px;} .group > .back_bg5{display: none;} .mg200 {margin: 0;} .end_point_service h3{font-size: 30px; margin-bottom: 40px;} .end_point_service ul {flex-direction: unset; flex-wrap: wrap;} .end_point_service .fl_left.three_li{margin: 0;} .end_point_service .fl_left.four_li > li{width:unset; } .end_point_info .box .txt h2{font-size: 28px;} } @media all and (max-width:1024px){ .server_five .box ul li h3{font-size: 18px;} .server_five .box ul li p {font-size: 15px;} } @media all and (max-width:980px){ .end_point_info h3{font-size: 25px; padding-bottom: 30px;} .end_point_info .box{display: block;} .end_point_info .box div:nth-of-type(2){text-align: center; padding: 0 80px 0;} .end_point_info .box .res_mo .img{padding: 0 30px 30px; text-align: center;} .end_point_info .box .txt h2 {margin-bottom: 10px; font-size: 22px; text-align: center;} .end_point_info .box .txt p {margin-bottom: 15px; font-size: 15px;} .end_point_service ul{flex-direction: column;} .end_point_service ul li dl {padding: 0 10px;} .end_point_service ul li dl dt{width:250px;height:250px;line-height:250px;margin:0 auto 20px auto;} .end_point_service ul li dl dt h5{font-size: 20px;} .end_point_service ul li dl dt img{width:55%;} .end_point_service ul li dl dd h5{font-size: 20px; line-height: 25px;} .end_point_service ul li dl dd{font-size: 16px;} .end_point_service .fl_left.three_li{margin: 0;} .sub_cont .fl_left.three_li > li{width: 100%;} .end_point_service .fl_left.four_li > li{width: 100%;} .diagnosis02-wrap .box{display: flex; flex-direction: column;} .diagnosis02-wrap .box .obj:after {top: auto; bottom: -5%; right: 45%; transform: rotate(90deg);} } @media all and (max-width:820px){ .server_five_inner h3{font-size: 20px;} .server_five_inner p{font-size: 15px;} .server_five_list{padding-top: 10px;} .server_five{padding: 50px 0;} .server_five .box{grid-template-columns: 1fr; margin-top: 20px;} .server_five .box ul{gap: 20px;} .server_five .box ul li.icon{padding:0} .protect_layout .diagram03_wrap{overflow: auto;} .protect_layout ul{display: block;} .protect_layout ul li{margin: 20px 0;} .protect_layout ul li > span {font-size: 15px; line-height: 23px;} .diagnosis02-wrap{padding: 30px;} .diagnosis02-wrap h3{font-size:25px; padding-bottom: 10px;} } @media all and (max-width:768px){ .end_point_service ul li dl{padding:0;} .end_point_service ul li dl dd h5{margin-bottom:5px;font-weight:500;font-size:18px;} .end_point_service ul li dl dd{font-size:16px;} .protect_layout h4{font-size: 25px;} .protect_layout > p{font-size: 17px; word-break: keep-all;} } @media all and (max-width:640px){ /* .end_point_service ul li dl dt{width:90px;height:90px;line-height:90px;margin:0 auto 10px auto;} */ .end_point_service ul li dl dd{padding:0 10px;} } @media (max-width: 530px){ .end_point_service ul{margin:20px auto 0;} } @media all and (max-width:480px){ .end_point_service ul li dl dd h5{font-size:15px;} .end_point_service ul li dl dd{font-size:13px;} } @media all and (max-width:320px){ } /* ---- 2025.07.22 404에러 ---- */ .err-404 { text-align: center; padding: 100px 0;} .err-404 .visual {width:230px; height:230px; background: url('/images/common/404_img.png') no-repeat center; background-size: auto 230px; margin: 0 auto;} .err-404 .con-box { margin-top:50px;} .err-404 .con-box h3 {font-size: 38px; font-weight: 300; color: #0e71c6; letter-spacing: -1px; font-family: inherit; margin: 20px 0;} .err-404 .con-box h5 { font-size: 20px; font-weight: 400; color: #666; line-height: 24px; margin-bottom: 30px; font-family: inherit} .err-404 .con-box a { font-size: 16px; text-decoration: underline; color: #444; font-family: inherit;}