@charset "utf-8"; /*서브 섹션 타이틀*/ .m_sec_tit{width: fit-content; margin-bottom: 50px;font-size: 25px} /*.m_sec_tit::before{content: ''; position: absolute; left: 0; top: -8px; width: 10px; height: 10px; border-radius: 50%; background: #8a51ff}*/ /*나의 위치*/ .this_location{padding: 12px; font-size: 12px; background: #171955; color: #fff} .this_location span{display: table-cell; vertical-align: middle} .this_location span + span::before{content: '\f105'; padding: 0 6px; font-family:FontAwesome;} /*로그인 영역*/ .members_sec{ min-height: calc(100vh - 36px); padding: 40px 16px; background: #fafafa} .members_sec:not(#members_join, #join_form) article{position: absolute; left: 50%; top: calc(50% - 36px); transform: translate(-50%, -50%); width: 550px} .member_wrap{max-width: 550px; margin: 0 auto} .member_wrap input[type="text"], .member_wrap input[type="password"]{width: 100%} .member_wrap .submit{border-radius: 3px; background: #8a51ff; color: #fff} .member_wrap .tit_box{} .member_wrap .tit_box .tit{font-size: 18px} .member_wrap .tit_box .txt{margin-top: 6px; font-size: 14px; color: #ff8429} #login_form{ text-align: center;} #login_form .title_box .title{font-size: 22px} #login_form .title_box .txt{margin-top: 10px; font-size: 14px; color: #777} #login_form .m_login_form{margin-top: 32px} #login_form .m_login_form > div + div{margin-top: 32px} #login_form .login_input{} #login_form .login_input .acount{display: block; } #login_form .login_input .acount + .acount{margin-top: 8px} #login_form .login_input .acount ~ .auto_login{margin-top: 8px} #login_form .login_input .acount ~ .submit{width: 100%; margin-top: 16px; padding: 18px; } #login_form .login_input .auto_login{} #login_form .login_input .auto_login input[type="checkbox"]{width: 10px; height: 10px} #login_form .login_input .auto_login label{font-size: 14px; color: #777} #login_form .socail_login{} #login_form .socail_login p{width: 100%; overflow: hidden} #login_form .socail_login p + p{margin-top: 8px } #login_form .socail_login span{float: left; height: 36px; line-height: 36px} #login_form .socail_login .img_box{width: 50px;} #login_form .socail_login .img_box img{width: 18px} #login_form .socail_login .link{width: calc(100% - 50px); font-size: 14px} #login_form .socail_login span.naver{background: #17a200} #login_form .socail_login span.naver ~ .link{background: #1cc300; color: #fff} #login_form .socail_login span.kakao{background: #ffd200 } #login_form .socail_login span.kakao ~ .link{background: #ffe52e } #login_form .find_acount{display: table; table-layout: fixed; width: 100%} #login_form .find_acount span{display: table-cell; font-size: 14px; color: #777} #login_form .find_acount span + span{border-left: 1px solid #e1e1e1} /*개인정보 약관*/ #members_join{} #members_join .join_info{padding: 24px 16px; border-radius: 10px; border: 1px solid #f1f1f1; background: #fff} #members_join .join_info + .join_info{margin-top: 48px} #members_join .join_info .check{margin-top: 24px; text-align: center} #members_join .join_info .check input[type="checkbox"]{} #members_join .join_info .check label{font-size: 14px; color: #333} #members_join .tit_box ~ .wrapper{margin-top: 22px} #members_join .textarea_box{} #members_join .textarea_box textarea{background: #fff} #members_join .table_box{} #members_join .table_box .tline{margin: unset; border: 1px solid #f1f1f1} #members_join .table_box .tline tr{font-size: 14px} #members_join .table_box .tline tr + tr{border-top: 1px solid #f1f1f1;} #members_join .table_box .tline th{width: 100px; background: #f0f0f0} #members_join .table_box .tline td{padding: 16px;} #members_join .next_btn{text-align: center} #members_join .next_btn .btn{padding: 16px 32px} #members_join .next_btn .cancel{border: 1px solid #c8c8c8; border-radius: 3px; font-size: 14px; } /* 회원가입 */ .mbskin form > p {text-align:center;} .fregister_agree label {vertical-align: middle;} .fregister_agree label input {width:15px; height:15px;} #fregister h2 {letter-spacing:-1px;} .inner_wrap {width:100%;} #join_form{} #join_form .member_wrap{padding: 24px 16px; border: 1px solid #f1f1f1; border-radius: 10px; background: #fff} #join_form .title{font-size: 18px} #join_form form{margin-top: 24px} #join_form input[type="text"], #join_form input[type="password"], #join_form textarea{background: #fbfbfb} #join_form .wrapper{} #join_form .wrapper > li{} #join_form .wrapper > li + li{margin-top: 24px} #join_form .name{font-size: 15px} #join_form .name b{color: #616161} #join_form .input{margin-top: 8px} #join_form .input input:not([type="checkbox"]){} #join_form .input input:not([type="checkbox"]) + input:not([type="checkbox"]){margin-top: 8px} #join_form .input input:not([type="checkbox"]) ~ i{margin-top: 8px; font-size: 14px; color: #777} #join_form .captcha_li{} #join_form .captcha_li .input{} #join_form .captcha_li img{} #join_form .captcha_li input[type="text"]{width: calc(100% - ((140px + 50px) + 9px));} #join_form .captcha_li .kcaptcha_auto_btn {} #join_form .sub_btn{margin-top: 48px; text-align: center} #join_form .sub_btn .btn{padding: 16px 32px} #join_form .sub_btn .cancel{border: 1px solid #c8c8c8; border-radius: 3px; font-size: 14px; } /*아이디 비밀번호 찾기*/ .find_acount_sec{padding: 24px 16px; border-radius: 10px; border: 1px solid #f1f1f1; background: #fff} .find_acount_sec article{margin-top: 24px} .find_acount_sec .wrapper{border-radius: 9px; padding: 16px; background: #f9f9f9;} .find_acount_sec .wrapper > li{margin-top: 16px} .find_acount_sec .wrapper input[type="text"]{border-color: #e7e7e7 !important} .find_acount_sec .captcha_box{} .find_acount_sec .captcha_box::after{content: ''; display: block; clear: both} .find_acount_sec .captcha_box .itmes{float: left; } .find_acount_sec .captcha_box .itmes + .itmes{margin-left: 5px} .find_acount_sec .captcha_box input[type="text"]{width: calc((100% - 140px - 50px) - 10px) !important;} .find_acount_sec .captcha_box .kcaptcha_auto_btn{border-color: #e7e7e7} .find_acount_sec .btn_box{margin-top: 32px; text-align: center;} .find_acount_sec .btn_box .btn{padding: 10px 35px; border-radius: 5px; border: 1px solid; font-size: 12px} .find_acount_sec .btn_box .clear{border-color: #8a51ff; background: #8a51ff; color: #fff} .find_acount_sec .btn_box .cancel{border-color: #cfcfcf; background: #f1f0f0} /* 솔루션 리스트 */ .snbselect{display:none;} .item .hp_btn {width: 100%;margin-top:5px;text-align:center;border-top:1px solid #ddd; display: table;word-break:keep-all;} .item .hp_btn a {display: table-cell; font-size: 11px; padding:8px 5px; background: #f4f4f4; border-left: 1px solid #ddd; letter-spacing: -1.1px; margin-bottom: -2px; word-break: keep-all; line-height: 12px; color:#666;} .item .hp_btn a:first-child {border-left:0;} /* .item .hp_btn a:nth-child(1) {color:#2b8ede;} .item .hp_btn a:nth-child(2) {color:#4ab30a;} .item .hp_btn a:nth-child(3) {color:#ea540c;border-right:0;} */ .homepage_list .listskin .item {border: 1px solid #ddd;} .homepage_list .listskin .item:active {border-color: #e65555;} .aside span.counsel_write a {font-size:15px; background:#b9231c; color:#fff; padding:2px 15px; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; margin-top:15px; display:table;margin: 15px auto 20px; line-height: 30px;transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } .hp_title {margin-top:10px; text-align: center; font-size: 16px; font-weight: bold; letter-spacing:-1px; color:#333; padding-bottom:3px;} .hp_price p{ font-family: 'Roboto',sans-serif; text-align: center; font-size: 28px; color: #d22222; font-weight: 700; line-height: 1;margin-bottom:8px; position:relative;} .hp_price p span {color:#d22222; font-size: 14px; margin-left: 2px; font-weight: normal;bottom: 2px; position: relative; } .item .img span.t {position:absolute;top:0; right:0; padding:5px 0;font-weight:bold;font-size:12px; margin-top:-1px; margin-right:5px; width: 40px;line-height: 1; letter-spacing: 0;} .item .img span.t.hot {right:58px;color:#fff; background:#e65555; right: 45px;} .item .img span.t.new {right:58px;color:#fff; background:#039fec; right: 45px;} .item .img span.t.sale {left:5px; top:5px; color:#fff; background:#f56702;} /* 탭 */ #aside .aside{position:relative; overflow:hidden;} #aside .aside h2{display:none;padding:20px;height:100px;font-size:20px;font-weight:500;color:#fff;background:#009223;} /* #aside .aside ul{display:table;margin:0 auto 30px;padding:0 40px;overflow:hidden;} #aside .aside ul li{float:left; background: #f9f9f9;} #aside .aside ul li a strong{display:block;padding:10px 20px;line-height:25px;font-size:14px;font-weight:500;text-align:right;color:#777;border-bottom:2px solid #f1f1f1;} #aside .aside ul li.sel {background:#444;} #aside .aside ul li.sel a strong{color:#fff; font-weight:bold; border-bottom:2px solid #444;} */ @media (min-width: 1280px){ .homepage_list .listskin{clear:both;} .homepage_list .listskin ul{margin:0 -10px;overflow:hidden;} .homepage_list .listskin li{float:left;width:25%;} .homepage_list .listskin .item{position:relative;margin:0 10px 30px 10px;} .homepage_list .listskin .chk{position:absolute;z-index:10;top:10px;left:10px;} .homepage_list .listskin .img{display:table;width:100%;} .homepage_list .listskin .img a{display:table-cell;width:100%;text-align:center;vertical-align:middle;} .homepage_list .listskin .img img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;transition:transform 0.4s;}2019-09-10 .homepage_list .listskin .inner{padding:20px 0;text-align:center;} .homepage_list .listskin .tit{display:block;font-size:20px;font-weight:400;color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:all 0.2s;} .homepage_list .listskin .tit:hover{color:#000;} .homepage_list .listskin .cate a{display:block;font-size:16px;font-weight:300;color:#777;overflow:hidden;} } @media all and (max-width:1280px){ .homepage_list .listskin{clear:both;} .homepage_list .listskin ul{margin:0 -10px;overflow:hidden;} .homepage_list .listskin li{float:left;width:25%;} .homepage_list .listskin .item{position:relative;margin:0 10px 30px 10px;} .homepage_list .listskin .chk{position:absolute;z-index:10;top:10px;left:10px;} .homepage_list .listskin .img{display:table;width:100%;} .homepage_list .listskin .img a{display:table-cell;width:100%;text-align:center;vertical-align:middle;} .homepage_list .listskin .img img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;transition:transform 0.4s;} .homepage_list .listskin .inner{padding:20px 0;text-align:center;} .homepage_list .listskin .tit{display:block;font-size:20px;font-weight:400;color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:all 0.2s;} .homepage_list .listskin .tit:hover{color:#000;} .homepage_list .listskin .cate a{display:block;font-size:16px;font-weight:300;color:#777;overflow:hidden;} .hp_title {font-size: 14px;} .hp_price p{ font-family: 'Roboto',sans-serif; text-align: center; font-size: 22px; color: #d22222; font-weight: 700; line-height: 1; } .hp_price span {color: #666; font-size: 13px; margin-left: 2px; font-weight: normal; } } @media all and (max-width:970px){ .homepage_list .listskin li{float:left;width:33.33%;} } @media all and (max-width:748px){ /* 탭 */ .snb{display:block;} .snbselect{display:none;padding:10px 0;} .snbselect select{padding:10px;width:100%;height:40px; color:#333; border: 1px solid #a9a9a9; border-radius:0px;-webkit-appearance: none; -moz-appearance: none; -ms-border-radius:0;appearance: none;} /**{transition:all 0.4s;}*/ .homepage_list .listskin{clear:both;} .homepage_list .listskin ul{overflow:hidden; margin: -5px;} .homepage_list .listskin li{float:left;width:50%;} .homepage_list .listskin .item{position:relative;margin:10px 5px 0;} .homepage_list .listskin .chk{position:absolute;z-index:10;top:10px;left:10px;} .homepage_list .listskin .img{display:table;width:100%;} .homepage_list .listskin .img a{display:table-cell;width:100%;height:160px;text-align:center;vertical-align:middle;} .homepage_list .listskin .img img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;transition:transform 0.4s;} .homepage_list .listskin .inner{padding:10px 0;text-align:center;} .homepage_list .listskin .tit{display:block;font-size:17px;font-weight:400;color:#333;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:all 0.2s;} .homepage_list .listskin .tit:hover{color:#000;} .homepage_list .listskin .cate a{display:block;font-size:12px;font-weight:300;color:#777;overflow:hidden;} .hp_price p{ font-family: 'Roboto',sans-serif; text-align: center; font-size: 22px; color: #d22222; font-weight: 700; line-height: 1;} .hp_price span {color: #666; font-size: 13px; margin-left: 2px; font-weight: normal;} .aside span.counsel_write a {font-size:13px;} } @media screen and (max-width: 550px){ .members_sec:not(#members_join, #join_form) article{width: calc(100% - 32px)} } /*회원정보 확인 or 비밀번호 확인*/ .notice_ck_pass{position: relative; height: calc(100vh - 53px); background: #fafafa} .notice_ck_pass input[type="password"]{width: 100%} .notice_ck_pass article{position: absolute; top: calc(50% - 48px); left: 50%; transform: translate(-50%, -50%); width: 500px; padding: 24px 16px; border-radius: 10px; background: #fff} .notice_ck_pass h3{font-size: 20px} .notice_ck_pass h3 ~ form{margin-top: 24px; padding-top: 16px; border-top: 1px solid #ededed} .notice_ck_pass .info_t{margin-bottom: 16px; text-align: center; font-size: 14px; color: #888} .notice_ck_pass .sub_btn{display: flex; justify-content: space-between; margin-top: 40px} .notice_ck_pass .sub_btn .btn{width: calc((100% / 2) - 2px); height: 40px; border-radius: 3px} .notice_ck_pass .sub_btn .clear{background: #8a51ff; color: #fff} .notice_ck_pass .sub_btn .cancel{color: #777} #acount_ch_ck{} #acount_ch_ck .acount_date{} #acount_ch_ck .acount_date > *{display: flex; align-items: center} #acount_ch_ck .acount_date > * + *{margin-top: 8px} #acount_ch_ck .acount_date .label{width: 65px; color: #444; font-size: 14px} #acount_ch_ck .acount_date input.input_date{flex: 1} @media screen and (max-width: 500px){ #notice_passform article{width: calc(100% - 32px)} } /*홈페이지 상세정보*/ .cycle-slideshow {z-index:0;} .n_title01 h3 {text-align:center; font-size:26px; letter-spacing:-3px;font-weight: 600;font-family:'Notokr',sans-serif;} .n_title01 h3 span.num {display: inline-block; margin-right: 10px; font-size: 30px; color: #b9221b; font-family: 'Roboto',sans-serif; font-weight: 400; position: relative; top: 1px;margin-right:5px; color: #b9221b;} .n_title01 h3 span.color {color: #b9221b;} #home_info {margin-top:30px} #home_info .hpi_left h3 {font-family:'Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif; } .hpi_top {margin-bottom:20px; } .hpi_left {width:28%; float:left; position:relative;} .preview_slider_wrap {border:1px solid #333; } .preview_slider_wrap img { width:210px;height:175px;object-fit:cover} .hpi_iside {height:26px; line-height:26px; margin-bottom:10px; font-size:12px;margin:5px; padding:0 6px; background:#ff8a00; color:#fff; display:inline-block; position:absolute; border:0; z-index:2; } .hpi_iside i {margin-right:5px; font-size:11px;} .hpi_iside .prev_next {float:right;} .hpi_left:hover .preview_slider_wrap{border:1px solid #666;} .hpi_img {margin-bottom:10px;position:relative;} .hpi_img img {max-width:100%; max-height:100%;} .hpi_itit {width: 100%; line-height: 19px; padding: 20px 12px; text-align: center; color: #848484; border: 3px solid #e1e1e1; margin-top: 20px;} .hpi_itit strong {font-size: 18px; display: block; line-height: 1; color: #e53935; margin-bottom: 10px;} .hpi_itit span{word-break: keep-all;} /* swiper */ .swiper-container {width: 100%;height: 100%;} /*.swiper-slide {text-align: center; display: -webkit-box;display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center; align-items: center;}*/ .swiper-top {width:auto; overflow:hidden; } .swiper-wrapper a div img {width:100%;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:10px !important;opacity:0.3;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:10px !important;opacity:0.3;} @media (min-width: 970px){ .swiper-top {width:100% !important; } } /*메인/상세페이지 공통사용*/ .hpi_demo {margin-top:-1px;width:100%; background:#333;} .hpi_demo a{font-size: 13px;float: left; color: #fff; width: 33.333333%; text-align: center; font-weight: 100; padding:20px 0; opacity: 0.7;} .hpi_demo a i {display:block; margin-bottom:5px;} .hpi_demo a:nth-child(2) { cursor:pointer; border-left: 1px solid #555; border-right: 1px solid #555;} .hpi_demo a:nth-child(3) { cursor:pointer; } .hpi_demo a:hover { opacity:1; font-weight:500;} .swiper-slide img {vertical-align:top; width: 100%; height: 175px;} .swiper-container{height:290px; overflow:hidden; } .hpi_right h3 {font-size:32px; margin:0 0 20px 0; position:relative; letter-spacing:-2px; } .in_pad{padding:0 20px; } .swiper-button-next, .swiper-button-prev {color:#666 !important;} .slide_btn {display:block;width:26px;height:38px;position:absolute;top:44%;opacity:0.7;z-index:999;} .slide_btn:hover {opacity:1;} .btn_sl {background:url(../img/slider_l.png) no-repeat;left:20px;} .btn_sr {background:url(../img/slider_r.png) no-repeat;right:20px;} #hpi_demo_mobile {display:none;position:absolute;top:36%;left:38%;width:450px;background:#f3f3f3;border:2px solid #b9221b;z-index:9999;} #hpi_demo_mobile .demo_close {cursor:pointer;float:right;font-size:20px;} #hpi_demo_mobile .demo_close i {color:#333;vertical-align:top;} #hpi_demo_mobile .demo_close i:hover {color:#f33;} #hpi_demo_mobile dt {text-align:center;padding:10px;font-size:18px;font-weight:bold;border-bottom:1px dashed #c4c4c4;} #hpi_demo_mobile dt span {color:#b9221b;} #hpi_demo_mobile dd {text-align:center;padding:10px 0;} #hpi_demo_mobile dd:nth-child(2) a {color:#b9221b;} #hpi_demo_mobile dd:nth-child(3) {padding:0;} #hpi_demo_mobile dd .mobile_mockup {height:700px;background:url(../img/mobile_mockup.png) no-repeat;text-align:center;} #hpi_demo_mobile dd .mobile_mockup #mobile_iframe_wrap {width:375px;height:578px;margin:0 auto;} #hpi_demo_mobile dd .mobile_mockup #mobile_iframe {width:100%;height:100%;border:0;margin-top:122px;} #hpi_demo_mobile dd:nth-child(4) {font-weight:bold;} #hpi_demo_mobile dd:nth-child(5) a {display:inline-block;background:#b9221b;color:#fff;border-radius:4px;padding:8px 10px;} .hpi_right .responsive{float: right; border: 2px solid #b9231c; padding: 5px 10px; margin-top: 10px;color: #fff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; color: #b9231c; font-weight: bold; line-height: 1;} .hpi_right {width:70%; float:right;position:relative;} .hpi_right h3 {float: left; font-size:30px;padding:0 0 10px 0;margin-bottom:20px;position:relative;font-family: 'Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif; letter-spacing: -3px;} .hpi_right h3 span {font-size:20px; color: #666; letter-spacing: -1px; font-weight: 200; } .hpi_right h3 .responsive {position:absolute;top:-45px;right:-40px;} .hpi_type {clear:both; text-align: center; padding:0 15px;} .hpi_type h4 {font-weight:normal;font-size:16px;padding:0 10px 10px;} .hpi_type ul {display: inline-block; width:100%; border:1px solid #ddd;} .hpi_type ul li {width:47.6%; float:left;} .hpi_type ul li dl dd {float:left; font-size:13px; font-weight:300; height: 32px; float: left;text-align:left;line-height:23px;cursor:default;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; color:#666;} .hpi_type ul li:nth-child(2), .hpi_type ul li:nth-child(4) { margin-left:20px;} .hpi_type ul li dl dt{float:left; padding:3px 0;width:60px; text-align:center; margin-right:8px;color:#fff;font-size:13px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; background:#666;font-weight: 400; line-height: 14px;font-family: 'Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif;} .hpi_type ul li.not {background:#ccc;color:#888!important;border-color:#ccc;} .hpi_type ul li.repling {position:relative;cursor:pointer;color:#e74d54;} .hpi_type ul li.repling dl {display:none;width:224px;padding:10px;position:absolute;left:-2px;top:-146px;background:#fff;border:1px solid #c4c4c4;cursor:default;} .hpi_type ul li.repling dl dt {font-size:14px;font-weight:bold;} .hpi_type ul li.repling dl dd {font-weight:normal;} .hpi_type ul li.repling dl dd a {color:#e74d54;} .hpi_basic {clear:both;} .hpi_basic .hpi_ctit {color:darkcyan;background:#fcfafc;} .hpi_basic .hpi_price {background:rgba(*0,139,139,0.1)} .hpi_basic .hpi_price th, .hpi_basic .hpi_price td {padding:13px 10px;} .hpi_basic .hpi_price td strong {font-size:35px;line-height:35px;} .hpi_manage {display:none;clear:both;} .hpi_manage .hpi_ctit {color:#b9221b;background:#f9f8f6;} .hpi_manage .hpi_price {background:rgba(*51,122,183,0.1)} .hpi_manage .hpi_price th,.hpi_manage .hpi_price td {padding:0 10px;} .hpi_manage .hpi_price tr:nth-child(4) th, .hpi_manage .hpi_price tr:nth-child(4) td {padding:13px 10px;} .hpi_manage .hpi_price td > span {margin-right:20px;} .hps_bmbtn {border-bottom:1px solid #3e3e3e;position:relative;height:42px;} .hps_bmbtn a {float:left;display:inline-block;text-align:center;width:150px;border:1px solid #3e3e3e;border-bottom:0;line-height:41px;font-size:15px;background:#fff;cursor:pointer;position:absolute;} .hps_bmbtn a:hover {font-weight:bold;} .hps_bmbtn .hps_basic {color:#0075c8;} .hps_bmbtn .hps_manage {color:#b9221b;left:150px;} .hps_bmbtn .hps_manage.only {left:0;} .hps_bmbtn .none {background:#fcfcfc;border:1px solid #ddd;border-bottom:0;line-height:40px;} .hpi_arrow {/* position:absolute; */top:33px; left:110px; padding:5px 15px; display:inline-block;color:#ff5400;border:1px solid #ff5400; border-radius:10px;font-size:15px;text-align:center; font-weight:bold; -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .hpi_arrow span {font-size:14px;font-weight:normal;color:#fff;margin-left:5px;} .hpi_totoal {margin-top:10px} .hpi_totoal > strong {font-size: 19px;margin-right: 30px;} .hpi_ctxt p {line-height:20px;text-align:center;margin-bottom:20px; background:#f8f8f8;padding:15px;font-size: 14px;} .hpi_ctxt p i {padding-right:10px;} /*price*/ .hpi_ctxt > div {position:relative;} .hpi_ctxt .price_line{line-height: 35px;margin-left:10px} .hpi_ctxt .price_line strike {color:#999; font-size:16px;letter-spacing: 0;font-family: 'Roboto','Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif;} .hpi_ctxt .sale_arrow {color:#ff5400; font-size:21px; line-height: 35px;font-family: 'Roboto','Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif;font-weight:800; margin-right:20px; padding-right:15px; background:url(../img/sale.png) right center no-repeat;} .hpi_ctxt .price { font-size:23px;font-family:'Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif;font-weight:400; color:#ff5400;} .hpi_ctxt .price strong { padding-right:2px; font-size:32px;font-weight:800;font-family:'Roboto','Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif; line-height:1;} .hpi_ctxt .price_info {border-top:1px dashed #ddd;padding:15px 4px; margin-bottom:20px;background: #f9f9f9;} .hpi_ctxt .price_info li {font-size:14px;line-height:24px;letter-spacing:-1px; position:relative; padding-left:10px;} .hpi_ctxt .price_info li:before {left: 0;top: 0;content: '-';margin-right:0.4em;} .hpi_ctxt .price_info li b{font-weight:500;} .hpi_ctxt .price_info li span {margin-left:10px;font-size:12px;color:#888;letter-spacing:-1px;} .hpi_ctxt .price_info li.p_btn b {color:#b9221b/*f44*/;cursor:pointer;} .hpi_ctxt .price_info li.p_btn div {width:574px;display:none;position:absolute;border:1px solid #c4c4c4;background:#fff;color:#444;z-index:1;} .hpi_ctxt .price_info li.p_btn div table {width:100%;border-collapse:collapse;} .hpi_ctxt .price_info li.p_btn div table th, .hpi_ctxt .price_cont li.p_btn div table td {padding:6px 15px;} .hpi_ctxt .price_info li.p_btn div table th {text-align:center;background:#f8f8f8;} .hpi_ctxt .price_info li.p_btn div table thead th:nth-child(1) {background:none;} .hpi_ctxt .price_info li.p_btn div table th:nth-child(3) {background:#5ba4e6;color:#fff;} .hpi_ctxt .price_info li.p_btn div table td {text-align:center;} .hpi_ctxt .total_price {position:relative;padding:30px 15px; } .hpi_ctxt .total_price ul li {float:left;text-align:center;} .hpi_ctxt .total_price ul li:nth-child(1) {font-weight:bold; font-size:19px;margin-top: 10px; line-height: 1;} .hpi_ctxt .total_price ul li:nth-child(1) i {font-size:13px; margin-right:5px;} .hpi_ctxt .total_price ul li:nth-child(2), .hpi_ctxt .total_price ul li:nth-child(3) {float: right; } .hpi_ctxt .total_price ul li.hpia_01 {width:100%; display:block; text-align:center; } .hpi_ctxt .price_manage {position:relative; min-height:150px;} .hpi_ctxt .total_txt{position:relative; float:left; left:15px; font-weight: bold; font-size: 19px; margin-top: 10px; /* margin-top: 32px; */ line-height: 1;} .hpi_ctxt .price_tab {padding:25px 15px 15px;width:100%;border-bottom:1px dashed #ccc;} .hpi_ctxt .price_tab li {float:left; width:17%; cursor:pointer; padding-left:20px;font-size:15px;background:url(../img/pt_sel_off.png) left center no-repeat;} .hpi_ctxt .price_tab li:nth-child(2){border-left:0; border-right:0;} .hpi_ctxt .price_tab li.on {font-weight:bold;color:#ff5400;background:url(../img/pt_sel_on.png) left center no-repeat;} .hpi_ctxt .price_cont {position: relative; /* padding: 30px 0; */ display: inline-block; float:right;} /* .hpi_ctxt .price_cont li {display:none;} .hpi_ctxt .price_cont li.p_standard {display:block;} */ .hpi_ctxt .price_cont02 {} .hpi_ctxt .price_cont02 li {text-align:right;float:right;} .hpi_ctxt .p_cont span {font-size:15px; color:#666;} .hpi_ctxt .p_cont {color: #ff5400;font-size: 16px;font-family: 'Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif;font-weight: 400;} .hpi_ctxt .p_cont strong{padding-right: 2px;font-size: 32px; font-weight: 800; font-family: 'Roboto','Notokr',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',sans-serif; line-height: 1;} .hpi_ctxt .rent_block div {min-height: 60px;padding:5px 0 10px;} .design_box {clear:both;width:100%;} .design_box li {width:50%;height:300px;float:left;padding:0 10px;object-fit:cover;} .design_box li img {width:100%;height:240px;object-fit:cover;} .design_box li div {text-align:center;line-height:24px;height:24px;} .design_box li div.mobile_img {height:240px;} .hpi_btn {clear:both; display: table; width: 100%;} .hpi_btn a {width:32.3%; border:1px solid #ddd; float:left; margin-left:1.5%; padding:15px; display:table-cell; text-align:center;font-size:14px; word-break: keep-all;} .hpi_btn a:nth-child(1) {margin-left:0;} .hpi_btn a:nth-child(1):hover {background:#03cf5d; border-color:#03cf5d; color:#fff;} .hpi_btn a:nth-child(2):hover {background:#fee100; border-color:#fee100; color:#4b3738;} .hpi_btn a:nth-child(3) {font-weight:bold;color:#fff !important; background: -webkit-linear-gradient(45deg, #ad0c04, #c11108); /* For Safari 5.1 to 6.0 */ /* .hpi_btn a {font-weight:bold;color:#fff !important; background: -webkit-linear-gradient(45deg, #ad0c04, #c11108); */ background: -o-linear-gradient(45deg, #ad0c04, #c11108); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(45deg,#ad0c04, #c11108); /* For Firefox 3.6 to 15 */ background: linear-gradient(45deg, #ad0c04, #c11108); padding: 16px; border:0;} .hpi_btn a:nth-child(3):hover {background:#b9231c; } .hpia_01 {font-size:13px;} .hpia_02 {margin:3px 20px 0 0;padding:0 15px;} .hpi_bot {border-top:1px dashed #c4c4c4;border-bottom:1px solid #e0e0e0;} .hpi_contact {float:left;width:100%; padding:15px 0;} .hpi_contact a:hover {color:#333;} .hpi_contact ul li {float:left;width:48%;margin-right:2%;line-height:38px;font-size:14px;padding:0 20px 0 40px;} .hpi_contact ul li img {margin-right:5px;} .hpi_contact ul li span {color:#ff5400;float:right; font-weight:bold;} .hpi_contact ul li span a {color:#666;font-weight:normal;} .hpi_estimate {float:left;width:25%;position:relative;padding:20px;background:#f3f3f3;} .hpi_estimate dl dt {font-size:15px; color:#666;font-weight:bold;line-height:1;text-align:center; margin-bottom:10px;} .hpi_estimate dl dt i {font-size:12px;} .hpi_estimate > dl > dd {float:left;width:50%;} .hpi_estimate > dl > #estimate_manage dt {margin-bottom:0;} .hpi_estimate > dl > dd a:nth-child(1){border-right:0;} .hpi_estimate > dl > dd > a {display:block;text-align:center;font-size:13px;line-height:40px;border:1px solid #ababab;color:#666; background:#fff;} .hpi_estimate dl dd a:hover {cursor:pointer;background:#666; color:#fff !important;border:1px solid #666;} .hpi_estimate #estimate_manage div {background:#fff; position:absolute;top:94px;right:20px;width:235px;display:none;border-bottom: 3px solid #e3e3e3; } .hpi_estimate #estimate_manage div dl{padding:15px;border:1px solid #c4c4c4;} .hpi_estimate #estimate_manage div dl dt {float:left;width:100%;line-height:1; margin-bottom:10px; } .hpi_estimate #estimate_manage div dl dd {float:left;width:33.3333%;background:#fff; } .hpi_estimate #estimate_manage div dl dd > a {display:block;line-height:40px;text-align:center;border:1px solid #d1d1d1;} .hpi_estimate #estimate_manage div dl dd:nth-child(3) a{border:1px solid #e84855;} .hpi_estimate #estimate_manage div dl dd:nth-child(2) a{border-right:1px solid #e84855;} .hpi_estimate #estimate_manage div dl dd:nth-child(4) a{border-left:1px solid #e84855;} .hpi_estimate #estimate_manage div dl dd > a:hover {color:#e84855 !important; background:#fff;border:1px solid #e84855; } .hpi_estimate #estimate_manage div dl dd:nth-child(3):hover a{border:none;border-top:1px solid #e84855; border-bottom:1px solid #e84855;} /*관련 홈페이지*/ .similar_list {width: 100%;height: 400px;padding-top:30px !important; clear:both;text-align:center} .similar_list div.swiper-slide a p {color:#3c3c3c;font-size:16px;font-weight:400;padding:20px 10px;} .similar_list .swiper-slide {height:300px;display: block;} .similar_list .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} .similar_list .swiper-button-next, .similar_list .swiper-button-prev {top: 46%;} .hp_content {margin:30px 0;} .hp_portfolio{margin:15px 0 30px;} /*구축절차*/ #n_process {margin-top: -60px;} .process {width: 100%; overflow: hidden; background-color:#fff;} .process .clearfix {margin-top:30px;} .process dd {font-size: 15px;} .process .p_cont {position:relative; margin-top:15px; padding-bottom:30px; display:inline-block; width:100%;} .process .p_list {position:relative; float:left; text-align:center; width:16.66666%;} .process .process_bm {width:36%; float:left; } .process .process_bm div{float:left; padding-top: 7px;} .process .process_bm_center {margin:0 auto; width:100%; margin-left:224px;} .process .process_bm:nth-child(1) ul{ border-right: 1px dotted #ddd; } .process .process_bm div {width:55px;} .process .process_bm div strong {font-size: 19px; display: block; text-align: center;} .process .process_bm div i { display:block; float: left; width:55px; height:55px; margin-bottom:5px;} .process .process_bm:nth-child(1) div i {background:url(../img/process_bm_icon01.png) no-repeat;} .process .process_bm:nth-child(2) div i {background:url(../img/process_bm_icon02.png) no-repeat;} .process .process_bm ul { display: inline-block; float: left; width: 70%; letter-spacing: -1px;} .process .process_bm ul li{position:relative; padding:5px 0 0 20px;float: left; font-size: 16px; line-height: 26px; color: #666; width:100%; margin-left: 35px;} .process .process_bm ul li:after {content:''; position:absolute; left:10px; top:16px; background:#ccc; width:3px; height:3px;} .process .p_list:first-child:after {display:none;} .process .p_list2{ margin-top: 0;margin-bottom:15px;} .process .p_list:after {content:''; position:absolute; left:0; top:72px; width:20px; height:20px; background:url(../img/n_process_arrow.png) 0 no-repeat;} .process .p_list i{ display:inline-block; line-height:75px;width:80px; height:80px; background:#555; margin-bottom:12px; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px;} .process .p_list i img {position: relative; top: 25px;} .process .p_list h4 {font-size:28px; font-weight:200; font-family:'Roboto', sans-serif; letter-spacing:-1px; color:#aaa; line-height:1; margin-bottom:8px; } .process .p_list p {font-size:17px; color:#333; letter-spacing:-1px; font-weight:bold;line-height: 1;} .process .p_list .p_list_txt {margin-top:5px; font-size:16px; color:#999; font-weight:normal;} .process .process_info {font-size:16px; background:#f7f6f6; text-align:center; padding:20px; margin:0 30px; color:#666; word-wrap: break-word; text-overflow: clip; word-break: keep-all; line-height: 22px; letter-spacing: -1px; -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .process .process_info span {font-weight:bold; color:#ff5400;} .process .process_info .num {border:1px solid #ff5400; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; padding:4px 4px 2px 4px; font-size:12px;} .process .process_info .num:nth-child(2) {margin-left:5px;} /*홈페이지 서비스*/ #home_service {background:#f9f8f6;margin-top:50px; padding:0 30px;} #home_service .n_title01 h3 {padding-top:50px;} #home_service .n_title01 h3 span {color:#b9221b;} #home_service .hps_cont {} #home_service .hps_list {margin-bottom:50px;} #home_service .hps_list dl {width:100%;text-align:center;} #home_service .hps_list dl dt {font-size:18px;font-weight:bold;margin-bottom:40px;} #home_service .hps_list dl dt span {color:#f33;} #home_service .hps_list dl dd {float:left;width:33.33%;font-size:15px;padding-top:135px; color:#666;} #home_service .hps_list dl dd:nth-child(2) {background:url(../img/hps01.png) no-repeat top;} #home_service .hps_list dl dd:nth-child(3) {background:url(../img/hps02.png) no-repeat top;} #home_service .hps_list dl dd:nth-child(4) {background:url(../img/hps03.png) no-repeat top;} #home_service .hps_list02 {padding-bottom:60px; } #home_service .hps_list02 dl {float:left;width:49.5%;height:330px; padding:40px 30px;text-align:center;background:#fff;border: 1px solid #e9e7e4; margin-left:1%; position:relative;} #home_service .hps_list02 dl:after {content:'';position:absolute; left:0; bottom:0; height:3px; background:#dedbd6; width:100%;} #home_service .hps_list02 .hps_basic{margin-left:0;} #home_service .hps_list02 dl dt {font-size:21px;margin-bottom:20px; } #home_service .hps_list02 dl dd {text-align: left; padding:10px 0 10px 35px;font-size:15px;border-bottom:1px dashed #ddd;line-height:18px; position:relative;z-index:1; background:url(../img/home_service_chk.png) no-repeat 10px center;word-break: keep-all;} #home_service .hps_list02 dl dd:nth-child(2){border-top:1px dashed #ddd;} #home_service .hps_list02 .hps_basic dt {color:#0075cb;line-height:1;} #home_service .hps_list02 .hps_manage dt {color:#f45002;line-height:1;} #home_service .hps_manage dd:nth-child(3):after{content:''; position:absolute; left:37px; bottom:12px; width:77.5%; background:#ffe64e; height:4px;z-index: -1;} #home_service .hps_manage dd:nth-child(3) span {color:#000;} #home_service .hps_manage dd span strong {color:#f24f00;} /*홈페이지 넷프로특징*/ #home_feature {} #home_feature .hpf_01 .n_title02:first-child{border:0;padding-top:0;} #home_feature .inner_wrap > div {margin-bottom:40px;background:#fff;} .hpf_cont {border:1px solid #ddd;margin-top:20px;padding:20px;} .hpf_cont img {width:70px; display: inline-block;} .hpf_cont img:after {content:''; width: 80px;height: 80px; background: #eee; padding: 20px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .hpf_cont p {padding-left:30px; text-align: left; font-size:16px; letter-spacing:-1px; word-break: keep-all;} .hpf_cont .hpf_01_img {width:80px; height:80px; display:inline-block; background:#f9f8f6 url(/theme/basic/mobile/img/hpf_01_img.png) center no-repeat ; -webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .hpf_ctit {width:100%;padding-bottom:20px;margin-bottom:20px;border-bottom:1px dashed #ddd; text-align:center; line-height:22px;} .hpf_ctit > span {font-size:16px;} .hpf_ctit strong {display:block;font-weight:normal;font-size:16px;} .hpf_ctit strong span {color:#ff5400;font-weight:bold;} .hpf_ctit strong small {font-size:16px;color:#666;font-weight:normal;} /*hpf_02-03*/ .hpf_01 p {display: inline-block; margin:0; color: #666; line-height:26px;position: relative; top: -20px;} .hpf_01 .hpf_cont {display: inline-block; width: 100%;text-align:center;background:url(../img/hpf_01.png) no-repeat 20px;} .hpf_compare > div {float:left;width:38%;text-align:center;} .hpf_compare dt, .hpf_compare li:first-child {font-size:16px;font-weight:bold;color:#fff;background:#b9221b;text-align:center;} .hpf_compare dt, .hpf_compare dd, .hpf_compare li {padding:10px 20px;line-height:27px;border-bottom:1px solid #ddd;} .hpf_compare dt.radius_left {border-radius:20px 0 0 0;} .hpf_compare dt.radius_right {border-radius:0 20px 0 0;} .hpf_compare dd, .hpf_compare li {font-size:14px;} .hpf_compare dt:last-child, .hpf_compare dd:last-child, .hpf_compare li:last-child {border-bottom:0;} .hpf_compare dd {background:#fff;} .hpf_compare .hpf_c01 {height:180px;font-size:14px;padding-left:20px;} .hpf_compare .hpf_cleft {text-align:right;} .hpf_compare .hpf_cleft .hpf_c01 {line-height:30px;background:#f9f8f6;} .hpf_compare .hpf_cmid {width:24%;background:#f9f8f6;} .hpf_compare .hpf_cmid .hpf_c01 {line-height:180px;} .hpf_compare .hpf_cright {text-align:left;} .hpf_compare .hpf_cright .hpf_c01 {text-align:left;background:#f9f8f6;} .hpf_compare .hpf_cright strong {float:right;margin:-5px 60px 0 0;background:#4eb5ce;color:#fff;padding:3px 10px;border-radius:100px;} .hpf_compare .hpf_cright span {color:#f45002; font-weight:bold;} .hpf_compare .hpf_ctit {width:100%;margin-bottom:20px;text-align:center; line-height: 22px;} .hpf_compare .hpf_ctit strong {display:block;} /*hpf_03*/ /*hpf_04*/ .hpf_04 .hpf_list dl {float:left;width:50%;padding:20px 0 20px 160px;} .hpf_04 .hpf_list dl:first-child {background:url(../img/hpf_04_01.png) 20px center no-repeat ;} .hpf_04 .hpf_list dl:last-child {background:url(../img/hpf_04_02.png) 20px center no-repeat ; height: 184px;} .hpf_04 .hpf_list dl dt {font-size:19px;font-weight:bold;margin-bottom:10px;} .hpf_04 .hpf_list dl dd {font-size:14px;line-height:2em;} /*hpf_05*/ .hpf_05 .hpf_list ul {background:#f7f7f7;padding:20px;} .hpf_05 .hpf_list ul li:first-child {border-top:0; padding-top:0; margin-top:0;} .hpf_05 .hpf_list ul li {border-top:1px dashed #c6c6c6;margin-top:15px;font-size:16px;padding-top:10px;} .hpf_05 .hpf_list ul li span {display:inline-block; text-align:center; color:#fff; width:80px; line-height:30px; background:#ff5400;font-size:16px; font-weight:800;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;margin-right:10px;} .hpf_05 .hpf_list ul li span b {position:relative; bottom:-2px; font-size:18px; font-family:'Roboto', sans-serif; display:inline-block;} /*hpf_06*/ .hpf_06 .hpf_cont div dl dt {font-size:15px;margin-bottom:10px;font-weight:bold;position:relative; display: inline-block; padding: 5px 12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #0075cb;color:#0075cb;} .hpf_06 .hpf_cont dd, .hpf_06 .hpf_cont li, .hpf_cont td {font-size:14px;color:#666;line-height: 21px; padding:0 12px;} .hpf_06 .hpf_cont dd span {color:#ff5400;} .hpf_06 .hpf_cont > div {margin-bottom:40px;} .hpf_06 .hpf_cont > div:last-child {margin-bottom:0;} .hpf_06 .hpf_cont > div:nth-child(1) > div {float:left;width:50%;} .hpf_06 .hpf_cont > div:nth-child(1) > div dl {margin-bottom:20px;} .hpf_06 .hpf_cont > div:nth-child(1) > div dl:last-child {margin-bottom:0;} .hpf_06 .hpf_cont > div:nth-child(1) > div:first-child {border-right:1px dotted #ddd;} .hpf_06 .hpf_cont > div:nth-child(1) > div:last-child {padding-left:20px;} .hpf_06 .hpf_cont > div:nth-child(1) > div:last-child dd ul {margin:10px 0 20px;} .hpf_06 .hpf_cont > div:nth-child(1) > div:last-child dd ul li {padding-left:20px;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl {border-top: 2px solid #b9221b; float:left;width:50%;margin:10px 0 20px;text-align:center;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl dt {background:#f9f8f6; border:0; display:block;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl dd {border-bottom:1px solid #ddd; padding:10px 0; line-height: 20px;border-left:1px solid #ddd;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl dd.border_none {border-left:0;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl dt {font-size:15px; color: #b9221b; border-right:1px solid #ddd;padding:10px;border-bottom:1px dashed #ddd;margin-bottom: 0;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd dl:last-child dt , .hpf_06 .hpf_cont > div:nth-child(3) dl dd dl:last-child dd {border-right:0;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd ul li {line-height:20px;margin-top: 8px;} .hpf_06 .hpf_cont > div:nth-child(2) dl dd ul li i {color:#ff5400;margin-right:5px;} /* 게시판 웹*/ .s_search_form .search{display: flex; overflow: hidden; border: 1px solid #ddd; border-radius: 50px} .s_search_form select, .s_search_form button[type="submit"], .s_search_form input[id="stx"]{height: 45px; border: none} .s_search_form select:focus{ outline: none;} .s_search_form input[id="stx"]:focus{background: transparent} .s_search_form select{width: 100px; padding-left: 18px} .s_search_form input[id="stx"]{width: calc(100% - (100px + 55px))} .s_search_form button[type="submit"]{width: 55px; background: #fff; color: #333;} .s_search_form button[type="submit"]::before{content: '\f002'; font-family:FontAwesome;} .notice_wrap{margin-top: 16px;} .notice_wrap .notice_page_date{font-size: 14px} .notice_wrap .notice_page_date .all{color: #555} .notice_wrap .notice_page_date .inner_box{margin-top: 12px; text-align: right} .notice_wrap .notice_page_date .inner_box::after{content: ''; display: block; clear: both} .notice_wrap .notice_page_date .inner_box .now{float: left; margin-top: 5px; color: #555} .notice_wrap .notice_page_date .inner_box .dft_btn{padding: 6px 20px; border-radius: 3px; background: #8a51ff; color: #fff;} .notice_wrap .notice_page_date ~ .d_notice_table{margin-top: 16px} .d_notice_table{font-size: 14px; border-bottom: 1px solid #ededed;} .d_notice_table thead{border-bottom: 4px solid #7232f3;} .d_notice_table th{padding: 16px 8px;} .d_notice_table td{padding: 12px 8px} .d_notice_table th{background: #8a51ff; color: #fff;} .d_notice_table tbody tr + tr{border-top: 1px solid #ededed} /* 작성폼 */ /* .m_write_form input[type="file"] { display:none; } .m_write_form .file label { width: 100px; line-height: 40px; text-align: center; cursor: pointer; margin: 0 10px 0 0; background: #fff; border: 1px solid #cacaca; border-radius: 5px; font-size: 15px; font-weight: 400; color: #121212; } .m_write_form .file label:hover { border:1px solid #ff8429; color:#ff8429; } */ .m_content .sub_btn { text-align:center; } .m_content .sub_btn a, .m_content .sub_btn button { display:inline-block; padding:7px 20px; margin:0 5px; line-height: 28px; background: #e0e0e0; border-radius: 5px; } .m_content .sub_btn a:hover , , .m_content .sub_btn button:hover { background:#bdbdbd; } .m_content .sub_btn .submit { background:#ff8429; color:#fff; } .m_content .sub_btn .submit:hover { background:#e46a10; } .m_content .sub_btn .list_btn { color: #fff; background: #606060; border: 1px solid #606060; } .m_content .sub_btn .list_btn:hover { background:#424242; } .m_content .sub_btn .write_btn { color: #606060; border: 1px solid #d9d9d9; } .m_content .sub_btn a:last-child, , .m_content .sub_btn button:last-child { margin-right:0; } /* 고객지원 게시판 view */ #as_view_sec{padding: 16px 16px 0 16px} #as_view_sec ~ #notice_as_list{padding-bottom: 40px} #as_view_sec .user_view{padding: 40px 0;} #as_view_sec .clear_tag{float: right; margin-bottom: 22px; padding: 4px 18px; border-radius: 3px; font-size: 14px; background: #8a51ff; color: #fff} #as_view_sec .clear_tag ~ .cont_box{clear: both} #as_view_sec .top_title_wrap{padding-bottom: 16px; border-bottom: 1px solid #ededed} #as_view_sec .top_title_wrap > div + div{margin-top: 32px} #as_view_sec .top_title_wrap .tit_date .type_tag{font-size: 14px; letter-spacing: -1px; color: #ff8040;} #as_view_sec .top_title_wrap .tit_date .day_date{width: 100%; margin-top: 22px; font-size: 14px; letter-spacing: -1px; text-align: right; color: #999} #as_view_sec .top_title_wrap .tit_date .tit{margin-top: 5px; font-size: 20px} #as_view_sec .top_title_wrap .att_com{font-size: 14px;} #as_view_sec .top_title_wrap .att_com + .att_com{margin-top: 8px} #as_view_sec .top_title_wrap .att_com > p{display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-radius: 3px; border-left: 2px solid #c8c8c8; background: #fafafa; color: #5d5d5d} #as_view_sec .top_title_wrap .att_com > p + p{margin-top: 8px} #as_view_sec .top_title_wrap .att_com > p i{font-size: 12px; color: #b5b5b5} #as_view_sec .cont_box{} #as_view_sec .cont_box .content_wri{min-height: 450px} #as_view_sec .cnt_img_box{} #as_view_sec .cnt_img_box > img + img{margin-top: 16px} #as_view_sec .payment_view{padding: 16px; border: 1px solid #ededed; border-radius: 5px} #as_view_sec .payment_view .apply_pay{} #as_view_sec .payment_view .apply_pay .pay_data{margin-top: 16px; font-size: 14px} #as_view_sec .payment_view .apply_pay .pay_data .bank{font-size: 12px; color: #999} #as_view_sec .payment_view .apply_pay ~ .finish_date{margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed} #as_view_sec .payment_view .app_date{} #as_view_sec .payment_view .app_date .tit{} #as_view_sec .payment_view .app_date .app_list{margin-top: 16px} #as_view_sec .payment_view .app_date .app_list > li{} #as_view_sec .payment_view .app_date .app_list > li + li{margin-top: 12px} #as_view_sec .payment_view .app_date .app_tit{font-size: 12px; color: #888;} #as_view_sec .payment_view .app_date .price{margin-top: 2px; font-size: 14px} #as_view_sec .payment_view .app_prev_date{margin-top: 16px; padding: 16px; border-radius: 3px; background: #fafafa} #as_view_sec .payment_view .app_prev_date{display: flex; justify-content: space-between; align-items: center} #as_view_sec .payment_view .app_prev_date .name_tit{margin-bottom: 5px; font-size: 14px; color: #888} #as_view_sec .payment_view .app_prev_date .pay_btn{display: block; width: 100px; border-radius: 3px; text-align: center; line-height: 40px; font-size: 14px; background: #8a51ff; color: #fff} #as_view_sec .app_clear_date{} #as_view_sec .app_clear_date .name_tit{font-size: 14px; color: #888} #as_view_sec .app_clear_date > p{} #as_view_sec .app_clear_date > p + p{margin-top: 10px} #as_view_sec .app_clear_date > p::after{content: ''; display: block; clear: both} #as_view_sec .app_clear_date > p i, #m_view_sec .app_clear_date > p b{float: left} #as_view_sec .app_clear_date > p i{width: 70px} #as_view_sec .app_clear_date > p b{} #as_view_sec .app_clear_date .total{display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid #ededed;font-size:14px} #as_view_sec .bot_link_btn{font-size: 14px; text-align: center; color: #666} #as_view_sec .bot_link_btn::after{content: ''; display: block; clear: both} #as_view_sec .bot_link_btn > a{float: left} #as_view_sec .bot_link_btn > a::before{content: '\f0c9'; margin-right: 4px; font-family:FontAwesome;} #as_view_sec .bot_link_btn > div{float: right; } #as_view_sec .as_pay_box {float: left;text-align: center;width: 100%;margin: 20px 0 20px;border-bottom: 1px solid #ededed; padding-bottom: 40px;} #as_view_sec .as_pay_box > a.pay_btn {border-color: #8a51ff;background: #8a51ff;color: #fff;padding: 6px 20px;border-radius: 3px;font-size:14px} #as_view_sec .payment_view.total_paybox {float:left;width:100%;margin-bottom:20px;font-size:14px} #as_view_sec .payment_view.total_paybox p {line-height:20px} #as_view_sec .payment_view.total_paybox p > b.tit {padding:0 4px;color:#888} /*신규 제작 뷰 페이지*/ #reqest_view_sec{padding: 16px} #reqest_view_sec ~ #notice_request_list{padding-bottom: 40px} #reqest_view_sec .top_title_box{} #reqest_view_sec .top_title_box .tit_date{} #reqest_view_sec .top_title_box .tit_date .ca_name{color: #ff8040} #reqest_view_sec .top_title_box .tit_date .top_title{margin-top: 5px; font-size: 20px} #reqest_view_sec .top_title_box .tit_date .day_date{margin-top: 22px; font-size: 14px; letter-spacing: -1px; text-align: right; color: #999} #reqest_view_sec .top_title_box .tit_date + div{margin-top: 32px; } #reqest_view_sec .top_title_box .att_com{} #reqest_view_sec .top_title_box .att_com ~ .att_com{margin-top: 8px} #reqest_view_sec .top_title_box .att_com p{display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-radius: 3px; border-left: 2px solid #c8c8c8; background: #fafafa; color: #5d5d5d} #reqest_view_sec .top_title_box .att_com p + p{margin-top: 8px} #reqest_view_sec .top_title_box .att_com p i{font-size: 12px; color: #b5b5b5} #reqest_view_sec .cont_box{margin-top: 16px; border-top: 1px solid #ededed} #reqest_view_sec .wri_date_wrap{min-height: 350px; padding: 40px 0} #reqest_view_sec .user_app_date{padding: 16px; font-size: 14px; background: #fafafa; color: #444} #reqest_view_sec .user_app_date p::before{content: '·'; margin-right: 4px} #reqest_view_sec .user_app_date p + p{margin-top: 4px} #reqest_view_sec .bot_btn_wrap{display: flex; justify-content: space-between; align-items: center; margin-top: 40px; font-size: 14px; color: #666} #reqest_view_sec .bot_btn_wrap .util{} #reqest_view_sec .bot_btn_wrap .util a + a{margin-left: 4px} /*공지사항 뷰페이지*/ #comp_notice_view{padding: 16px 16px 80px 16px} #comp_notice_view .top_title_wrap{padding-bottom: 16px; border-bottom: 1px solid #ededed} #comp_notice_view .top_title_wrap .tit_date + div{margin-top: 32px} #comp_notice_view .top_title_wrap .tit_date .type_tag{font-size: 14px; letter-spacing: -1px; color: #ff8040;} #comp_notice_view .top_title_wrap .tit_date .day_date{margin-top: 22px; font-size: 14px; letter-spacing: -1px; text-align: right; color: #999} #comp_notice_view .top_title_wrap .tit_date .tit{margin-top: 5px; font-size: 20px} #comp_notice_view .top_title_wrap .att_com{font-size: 14px;} #comp_notice_view .top_title_wrap .att_com + .att_com{margin-top: 8px} #comp_notice_view .top_title_wrap .att_com > p{display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-radius: 3px; border-left: 2px solid #c8c8c8; background: #fafafa; color: #5d5d5d} #comp_notice_view .top_title_wrap .att_com > p + p{margin-top: 8px} #comp_notice_view .top_title_wrap .att_com > p i{font-size: 12px; color: #b5b5b5} #comp_notice_view .cont_box{min-height: 500px; padding-top: 40px} #comp_notice_view .bot_link_btn{font-size: 14px; color: #666} /*고객 설명 박스*/ .custum_info_top{padding: 40px; background: #f9f9f9} .custum_info_top:has(.img_box){display: flex; align-items: center;} .custum_info_top .com_txt{padding-left: 40px; } .custum_info_top .only_txt{word-break: keep-all; font-size: 14px; color: #616161} .custum_info_top .only_txt p + p{margin-top: 8px} .custum_info_top.list_txt .info_tit{display: flex; justify-content: space-between; align-items: center; font-size: 16px;} .custum_info_top.list_txt .info_tit img{width: 32px;} .custum_info_top.list_txt .list{margin-top: 16px; font-size: 12px} .custum_info_top.list_txt .list li + li{margin-top: 4px} .custum_info_top.list_txt .list li{padding-left: 5px; color: #616161} .custum_info_top.list_txt .list li::marker{content: '·'} @media screen and (max-width: 700px){ .custum_info_top{padding: 20px} .custum_info_top:has(.img_box){display: block} .custum_info_top .img_box{text-align: right} .custum_info_top .img_box img{width: 40px} .custum_info_top .com_txt{padding: unset; margin-top: 16px} } /*신규 제작 문의 게시판*/ #notice_request_sec .custum_info_top .txt_box{font-size: 14px; line-height: 22px; color: #616161;} @media screen and (max-width: 500px){ #notice_request_sec .custum_info_top{flex-direction: column;} #notice_request_sec .custum_info_top .img_box{position: unset} #notice_request_sec .custum_info_top .txt_box{margin-top: 24px} } /* 게시판 댓글 */ #comment_box .cmt_btn {width:100%;text-align:left;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font-weight:bold;margin:30px 0 0px;padding:0 0 15px} #comment_box .cmt_btn span.total {position:relative;display:inline-block;margin-right:5px;font-size:1em;color:#aaa} #comment_box .cmt_btn span.cmt_more {float:right;display:inline-block;width:15px;height:10px;background:url('/img/sub/btn_cmt.png') no-repeat right 2px;margin-top:5px} #comment_box .cmt_btn_op span.cmt_more {background-position:right -8px} #comment_box .cmt_btn b {font-size:1.4em;color:#000} #comment_box .cmt_btn span.total:after {position:absolute;bottom:-17px;left:0;display:inline-block;background:#aaa;content:"";width:100%;height:2px} #comment_box #cmt_empty {height: 100px;text-align: center;padding-top: 45px;} #comment_box .bo_vc h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #comment_box .bo_vc article {margin:20px 0;position:relative;border-bottom:1px solid #f0f0f0} #comment_box .bo_vc article:after {display:block;visibility:hidden;clear:both;content:""} #comment_box .bo_vc article .profile_img img {border-radius:50%} #comment_box .bo_vc article .pf_img {float:left;margin-right:10px} #comment_box .bo_vc article .pf_img img {border-radius:50%;width:50px;height:50px} #comment_box .bo_vc article .cm_wrap {float:left;max-width:870px;width:90%} #comment_box .bo_vc article .cm_wrap span {padding:0 5px;} #comment_box .bo_vc header {position:relative;width:100%} #comment_box .bo_vc header:after {display:block;visibility:hidden;clear:both;content:""} #comment_box .bo_vc header .profile_img {display:none} #comment_box .bo_vc header .icon_reply {position:absolute;top:15px;left:-20px} #comment_box .bo_vc .name, .bo_vc .guest, .bo_vc .sv_member, .bo_vc .sv_guest {font-weight:bold} #comment_box .bo_vc_hdinfo {color:#777} #comment_box .bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #comment_box .bo_vc .cmt_contents {line-height:1.8em;padding:0 0 20px} #comment_box .bo_vc p a {text-decoration:underline} #comment_box .bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479} #comment_box .bo_vc_empty {margin:0;padding:80px 0 !important;color:#777;text-align:center} #comment_box .bo_vc .bo_vc_winfo {float:left} #comment_box .bo_vc .bo_vl_opt {position:absolute;top:0;right:0} #comment_box .bo_vc_w {position:relative;margin:10px 0;display:block} #comment_box .bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""} #comment_box .bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #comment_box .bo_vc_w #char_cnt {display:block;margin:0 0 5px} #comment_box .bo_vc_w textarea { width:100%; min-height:100px; padding:20px; resize: none; border:1px solid #cacaca; border-radius:5px; font-size:16px; color:#121212; font-family:'NotoSansKR',sans-serif; } #wr_secret {} #comment_box .bo_vc_w_info {margin:10px 0;} #comment_box .bo_vc_w_info div {width:100%} #comment_box .bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""} /* #comment_box .bo_vc_w_info .frm_input {margin-right:5px} */ #comment_box .bo_vc_w_info input {height:45px; line-height:45px; margin:0 10px 0 0; padding:0 10px; border:1px solid #cacaca; border-radius:5px; font-size:16px; font-weight:400; color:#121212; letter-spacing:-0.5px; font-family:'NotoSansKR',sans-serif; } #comment_box .bo_vc_w_info input{width:48%;margin-left:1%;margin-right:0.5%;} #comment_box .bo_vc_w_info input:last-child{width:48%;margin-left:0.5%;margin-right:1%;} #comment_box .bo_vc_w_info #captcha {padding-top:10px;display:block;clear:both} #comment_box .bo_vc_w .btn_confirm {clear:both;margin-top:10px; text-align:center;} #comment_box .bo_vc_w .btn_confirm label {display:inline-block;margin-right:10px;border-radius:3px;font-size:1.5em;text-align:center} #comment_box .bo_vc_w .btn_submit {height:45px;padding:0 20px; font-weight:500; font-size:1.0em;} #comment_box .bo_vc_w .btn_confirm .secret_cm label {font-size:1em !important} #comment_box .bo_vc_w .btn_confirm .secret_cm input[type="checkbox"] + label > span { display:inline-block; width:30px; height:30px; vertical-align: middle; background:url('/img/sub/check_gray_icon.png')no-repeat center; border:2px solid #ddd; margin-right:5px; border-radius:5px; cursor:pointer; } #comment_box .bo_vc_w .btn_confirm .secret_cm input[type="checkbox"]:checked + label > span { background:#ff8429 url('/img/sub/sub07_check_icon.png')no-repeat center; border:2px solid #ff8429; } #comment_box .bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""} #comment_box .secret_cm {display:inline-block;float:left} #comment_box .bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:right;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999} #comment_box .bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent} #comment_box .bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent} #comment_box .bo_vc_act li {text-align:center;border-bottom:1px solid #f0f0f0} #comment_box .bo_vc_act li:last-child {border-bottom:0} #comment_box .bo_vc_act li a {display:inline-block;padding:5px;font-size:13px} #comment_box .bo_vc_act li a:hover {color:#3a8afd} #comment_box a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} .btn_b01:hover, .btn_b01:hover {color:#000;} #comment_box .captcha_box {margin-top:10px;} #comment_box .sub_btn { text-align: center; margin:20px 0 50px; } .cnt_cmt {padding: 0 6px;background-color: #efefef;font-size: 8px;line-height: 12px;} .cont_addinfo { list-style: initial; list-style-position: inside; padding-left: 10px; color: #999; margin: 10px 0; } /*리스트 페이지*/ .com_notice_list{padding: 40px 0 80px 0} .com_notice_list .top_util{padding: 0 16px} .com_notice_list .top_util .tab_active{display: flex; margin-top: 16px; text-align: center} .com_notice_list .top_util .tab_active > li{flex: 1; color: #999} .com_notice_list .top_util .tab_active a{padding-bottom: 10px} .com_notice_list .top_util .tab_active > li.active{border-bottom: 2px solid #8a51ff; color: #333} .com_notice_list .notice_page_date{padding: 0 16px} .com_notice_list tbody{} .com_notice_list tbody .tit a{display: block} .com_notice_list tbody .tit .tit_t_wri * + *{margin-left: 2px} .com_notice_list tbody .name, .com_notice_list tbody .view, .com_notice_list tbody .cond{text-align: center; color: #333} .com_notice_list tbody .tit.text_data{} .com_notice_list tbody .tit.text_data .homepage_order_box{font-size: 12px} .com_notice_list tbody .tit.text_data .homepage_order_box span{} .com_notice_list tbody .tit.text_data .homepage_order_box span + span{margin-left: 5px} .com_notice_list tbody .tit.text_data .tit_t_wri{margin-top: 8px} .com_notice_list tbody .tit.text_data .day{margin-top: 16px; font-size: 12px; color: #999} .com_notice_list tbody tr:has(.notice_td){background: #f7f7f7} .com_notice_list tbody .notice_td{padding: 32px 8px} .com_notice_list tbody .notice_td .tag_box{font-size: 12px} .com_notice_list tbody .notice_td .tag_box * + *{margin-left: 5px} .com_notice_list tbody .notice_td .tag_box .tag{color: #888} .com_notice_list tbody .notice_td .tit_t_wri{margin-top: 8px} .com_notice_list tbody .notice_td .day{margin-top: 16px; font-size: 12px; color: #999} .com_notice_list tbody tr:has(.tit.reply){background: #fafafa} .com_notice_list tbody .tit.reply a{position: relative; padding-left: 16px} .com_notice_list tbody .tit.reply a::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; background: url(http://netpro2.netpro.co.kr/img/sub/sub05_reanswer_icon.png) no-repeat} .com_notice_list tbody .tit.reply a > *{display: inline-block} .com_notice_list tbody .tit.reply a > * + *{margin-left: 5px} #notice_as_list .page_btn{padding: 0 16px} #comp_notice_list .notice_page_date{margin-top: calc(16px * 2)} #comp_notice_list .notice_page_date .now{margin-top: 16px; color: #777} @media screen and (max-width: 500px){ .com_notice_list .top_util .tab_active{font-size: 14px} } /* 고객센터 글쓰기 */ div.container:has(#as_notice_wri){padding: 0 0 3em 0 !important; } #as_notice_wri{padding-bottom: 40px} #as_notice_wri .submit_wri_form{margin-top: 40px;} #as_notice_wri input[type="text"], #as_notice_wri input[type="password"]{width: 100%; border-radius: 3px} #as_notice_wri .bot_txt{margin-top: 5px; font-size: 12px; color: #ff8040} #as_notice_wri .top_title{padding-bottom: 8px; border-bottom: 2px solid #333; font-size: 20px} #as_notice_wri .label_tit{margin-bottom: 4px; font-size: 14px; color: #777} #as_notice_wri .date_wrapper{margin-top: 16px;} #as_notice_wri .date_wrapper.vert > li + li{margin-top: 20px} #as_notice_wri .wri_date_box{ background: #fff} #as_notice_wri .wri_date_box + .wri_date_box{margin-top: 60px} #as_notice_wri .top_title{padding-bottom: 8px; border-bottom: 2px solid #333; font-size: 20px} #as_notice_wri .label_tit{margin-bottom: 4px; font-size: 14px; color: #777} #as_notice_wri .date_wrapper{margin-top: 16px;} #as_notice_wri .date_wrapper.vert > li + li{margin-top: 20px} #as_notice_wri .bot_txt{margin-top: 5px; font-size: 12px; color: #ff8040} #as_notice_wri .wri_form_info{font-size: 14px; color: #333} #as_notice_wri .wri_date_box{ background: #fff} #as_notice_wri .wri_date_box + .wri_date_box{margin-top: 60px} #as_notice_wri .my_hp_date{} #as_notice_wri .my_hp_date input[type="radio"]{display: none} #as_notice_wri .my_hp_date input[type="radio"] ~ label{display: block;} #as_notice_wri .my_hp_date li{width: 100%; padding: 16px; border: 1px solid #ededed; opacity: 50%; text-align: center} #as_notice_wri .my_hp_date li.active{opacity: 100%; border-color: #bbb} #as_notice_wri .my_hp_date li.active .hp_date{background: #f1f1f1} #as_notice_wri .my_hp_date li + li{margin-top: 16px} #as_notice_wri .my_hp_date .type{text-align: left} #as_notice_wri .my_hp_date .hp_date{margin-top: 8px; padding: 8px 0; background: #f9f9f9} #as_notice_wri .my_hp_date .tit{} #as_notice_wri .my_hp_date .tit::after{content: '-'; display: block; color: #333} #as_notice_wri .my_hp_date .name{} #as_notice_wri .my_hp_date .url{} #as_notice_wri .ck_request input[type="checkbox"]{display: none} #as_notice_wri .ck_request label{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; opacity: 50%; text-align: center} #as_notice_wri .ck_request .info_txt{font-size: 14px; word-break: keep-all} #as_notice_wri .ck_request .ck_wrap > li{position: relative; height: 100px; border: 1px solid #ededed; background: #fff} #as_notice_wri .ck_request .ck_wrap > li + li{margin-top: 16px} #as_notice_wri .ck_request .ck_wrap > li.active{border-color: #bbb} #as_notice_wri .ck_request .ck_wrap > li.active label{opacity: 100%} #as_notice_wri .ck_request .price{margin-top: 8px} #as_notice_wri .ck_request .total_price{margin-top: 16px; padding: 16px; border-top: 1px solid #ededed; background: #fafafa} #as_notice_wri .ck_request .total_price .date{display: flex; justify-content: space-between; align-items: center} #as_notice_wri .ck_request .total_price .info_txt{position: relative; padding-left: 10px; margin-top: 16px; color: #888} #as_notice_wri .ck_request .total_price .info_txt::before{content: '※'; position: absolute; left: 0;} #as_notice_wri .writing_data{} #as_notice_wri .writing_data .ck_span{width: 100%; margin-bottom: 4px; text-align: right; color: #444} #as_notice_wri .writing_data .title_value{} #as_notice_wri .writing_data .title_value input[type="text"]{height: 42px;} #as_notice_wri .writing_data .date_wrapper .date_wrap + .date_wrap{margin-top: 16px} #as_notice_wri .writing_data .wri_cnt_date{} #as_notice_wri .writing_data .wri_cnt_date > li{overflow: hidden} #as_notice_wri .writing_data .wri_cnt_date > li + li{margin-top: 16px} #as_notice_wri .writing_data .wri_cnt_date .tit, #as_notice_wri .writing_data .wri_cnt_date .date_value{float: left} #as_notice_wri .writing_data .wri_cnt_date .tit{width: 90px; line-height: 42px; font-size: 14px; text-align: center; background: #333; color: #fff} #as_notice_wri .writing_data .wri_cnt_date .date_value{width: calc(100% - 90px); height: 42px} #as_notice_wri .writing_data .wri_cnt_date .link_li input[type="text"]{border-radius: 0 3px 3px 0} #as_notice_wri .writing_data .wri_cnt_date .file_li .date_value{padding: 0 8px; line-height: 42px; border: 1px solid #ddd; font-size: 12px; color: #888;} #as_notice_wri .clear_btn{margin-top: 3em; text-align: center;} #as_notice_wri .clear_btn .btn{height: 45px; border-radius: 3px; border: 1px solid #999; font-size: 14px;} #as_notice_wri .clear_btn .submit{width: calc((100% - 90px) - 4px); border-color: #8a51ff; background: #8a51ff; color: #fff} #as_notice_wri .clear_btn .del{width: 90px;background: transparent; } @media screen and (max-width: 1200px){ #as_notice_wri .submit_wri_form{padding: 0 1em} } /*신규제작문의 글쓰기*/ #reqeust_notice_wri{padding-bottom: 40px} #reqeust_notice_wri input[type="text"], #reqeust_notice_wri select{width: 100%} #reqeust_notice_wri .submit_wri_form{margin-top: 40px} #reqeust_notice_wri .wri_date_box{} #reqeust_notice_wri .wri_date_box + .wri_date_box{margin-top: 60px} #reqeust_notice_wri .top_title{padding-bottom: 8px; border-bottom: 2px solid #333; font-size: 20px} #reqeust_notice_wri .in_tit{margin-bottom: 4px; font-size: 14px; color: #777} #reqeust_notice_wri .bot_imp_txt{margin-top: 5px; font-size: 12px; color: #ff8040} #reqeust_notice_wri .date_wrap{margin-top: 16px} #reqeust_notice_wri .date_wrap.list > li{} #reqeust_notice_wri .date_wrap.list > li + li{margin-top: 16px} #reqeust_notice_wri .writing_box{} #reqeust_notice_wri .writing_box input[type="text"] ~ textarea{margin-top: 16px} #reqeust_notice_wri .relay_date_box{} #reqeust_notice_wri .relay_date_box .file_li{} #reqeust_notice_wri .relay_date_box .file_box{} #reqeust_notice_wri .relay_date_box .file_box::after{content: ''; display: block; clear: both} #reqeust_notice_wri .relay_date_box .file_box label, #reqeust_notice_wri .relay_date_box .file_box .file{float: left; line-height: 38px;} #reqeust_notice_wri .relay_date_box .file_box label{width: 70px; text-align: center; font-size: 14px; background: #333; color: #fff} #reqeust_notice_wri .relay_date_box .file_box .file{width: calc(100% - 70px); padding: 0 8px; border: 1px solid #ededed; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: #c8c8c8} #reqeust_notice_wri .clear_btn{margin-top: 40px} #reqeust_notice_wri .clear_btn .btn{padding: 14px 0; font-size: 14px; border: 1px solid #999} #reqeust_notice_wri .clear_btn .submit{width: calc((100% - 95px) - 4px); border-color: #8a51ff; background: #8a51ff; color: #fff} #reqeust_notice_wri .clear_btn .del{display: inline-block; width: 95px; text-align: center;} @media screen and (max-width: 1210px){ #reqeust_notice_wri .submit_wri_form{padding: 0 16px} } /**/ /* .m_content .question_tabs { position:relative; border: 1px solid #d9d9d9; margin:0 0 20px; } .m_content .question_tabs:before { content:''; position:absolute; top:50%; width:100%; height:1px; background:#d9d9d9; } .m_content .question_tabs:after { content:''; display:block; clear:both; } .m_content .question_tabs li { float: left; width: 33.3%; text-align: center; line-height: 45px; font-size: 15px; font-weight: 500; color: #343433; cursor: pointer; border-right:1px solid #d9d9d9; } .m_content .question_tabs li:nth-of-type(3) { border-right:none; } .m_content .question_tabs li:nth-of-type(6) { border-right:none; } .m_content .question_tabs li.active { background: #ff8429; color: #fff; } .m_content .question_tabs li a {color:#343433} .m_content .question_tabs li.active a {color:#fff} */ /*홈페이지 구축사례 */ .s_portfolio_sec{padding: 40px 16px 80px 16px} .s_portfolio_sec article{margin-top: 60px} .s_portfolio_sec .tab_active{margin: -6px 0 0 -2px; font-size: 14px} .s_portfolio_sec .tab_active > li{display: inline-block; margin: 6px 0 0 2px; border-radius: 32px; border: 1px solid #ededed} .s_portfolio_sec .tab_active > li a{display: block; padding: 8px 28px;} .s_portfolio_sec .tab_active > li.active{background: #8a51ff; color: #fff} .s_portfolio_sec .s_portfolio_art{transform: translateY(50px); opacity: 0; animation: portfolio_ani 1s forwards;} .s_portfolio_wrapper{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 42px 32px} .s_portfolio_wrapper > li{border-bottom: 1px solid #e3e3e3} .s_portfolio_wrapper .img_box{overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);} .s_portfolio_wrapper .img_box img{width: 100%; aspect-ratio: 16 / 12;} .s_portfolio_wrapper .date_box{overflow: hidden; padding: 24px 10px 16px 10px;} .s_portfolio_wrapper .date_box span{clear: both} .s_portfolio_wrapper .date_box .name{float: left; font-size: 18px} .s_portfolio_wrapper .date_box .link{float:right; margin-top: 8px; font-size: 14px; color: #777} .s_portfolio_wrapper .date_box .link a{position: relative; padding-right: 27px} .s_portfolio_wrapper .date_box .link a::before{content: ''; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url(https://www.netpro.co.kr/mobile/img/viewIcon.png) no-repeat right -2px} .s_portfolio_wrapper .keyword{width: 100%; margin: 20px 0; overflow: auto} .s_portfolio_wrapper .keyword::-webkit-scrollbar{height: 0; background: transparent} .s_portfolio_wrapper .keyword .scroll_box{display: flex; gap: 0 5px; width: 100%;} .s_portfolio_wrapper .keyword .scroll_box li{padding: 4px 14px; border-radius: 14px; font-size: 14px; white-space: nowrap; background: #8a51ff; color: #fff} @keyframes portfolio_ani{ to{transform: translateY(0); opacity: 1;} } @media screen and (max-width: 510px){ .s_portfolio_wrapper{grid-template-columns: 50% 50%;} .s_portfolio_wrapper .date_box{padding: 16px 0 8px 0;} .s_portfolio_wrapper .date_box .link{font-size: 12px} .s_portfolio_wrapper .date_box .link a{padding-right: 19px} .s_portfolio_wrapper .date_box .link a::before{background-size: 15px; background-position-y: 1px} } @media screen and (max-width: 390px){ .s_portfolio_wrapper{grid-template-columns: 100%;} .s_portfolio_wrapper .date_box{padding: 24px 0 8px 0;} } /*홈페이지 구축 절차, 혜택*/ .order_section article{} .order_list_detail{} .order_list_detail{} .order_list_detail > ul.wrapper{} .order_list_detail > ul.wrapper > li:not(:first-of-type){padding-top: 30px; border-top: 1px solid #ddd} .order_list_detail > ul.wrapper > li:not(:last-of-type){padding-bottom: 30px} .order_list_detail > ul.wrapper > li::after{content: ''; display: block; clear: both} .order_list_detail > ul.wrapper > li > div{float: left} .order_list_detail .step_num{width: 120px; color: #b1b1b1} .order_list_detail .step_num i{letter-spacing: 3px; font-size: 17px; } .order_list_detail .step_num b{font-size: 32px} .order_list_detail .step_wri{position: relative; width: calc(100% - 120px)} .order_list_detail .step_wri > img{position: absolute; top: 0; right: 0; width: 60px} .order_list_detail .step_wri > p.tit{font-size: 19px} .order_list_detail .info_wri{margin-top: 24px} .order_list_detail .info_wri > div{} .order_list_detail .info_wri .txt{font-size: 14px} .order_list_detail .info_wri .txt .list{position: relative; padding-left: 14px} .order_list_detail .info_wri .txt .list + .list{margin-top: 5px} .order_list_detail .info_wri .txt .list::before{content: '-';position: absolute; left: 0} .order_list_detail .info_wri .util_txt{margin-top: 16px; font-size: 14px} .order_list_detail .info_wri .util_txt a{display: inline-block; padding: 8px 16px; margin-top: 5px; border: 1px solid #ddd; color: #616161} .order_list_detail .info_wri .util_txt .link::before{content: '\f08e'; margin-right: 5px; font-family:FontAwesome; font-size: 12px;} .order_list_detail .info_wri .util_txt .wallet::before{content: '\f555'; margin-right: 5px; font-family:FontAwesome; font-size: 12px;} #process_sec{padding: 40px 16px 80px 16px} #process_sec .top_tit_box{text-align: center} #process_sec .top_tit_box .title{font-size: 22px} #process_sec .top_tit_box .txt{margin-top: 24px; font-size: 15px; color: #616161} #process_sec .top_link_box{width: fit-content; margin-top: 60px} #process_sec .top_link_box::after{content: ''; display: block; clear: both} #process_sec .top_link_box p{float: left; color: #9e79ef} #process_sec .top_link_box p + p::before{content: '·'; margin: 0 10px} #process_sec .top_link_box span{} #process_sec .top_link_box .img_box{margin-right: 5px} #process_sec .top_link_box .img_box img{width: 18px;} #process_sec .top_link_box .txt{font-size: 14px} #process_sec .top_link_box .txt a{} #process_sec .order_list{margin-top: 60px; padding: 60px 0; border-top: 1px solid #ededed; text-align: center} #process_sec .order_list .wrapper{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px 16px} #process_sec .order_list .wrapper > li{} #process_sec .order_list .wrapper > li:nth-of-type(odd) .img_box{background: #fce5d6} #process_sec .order_list .wrapper > li:nth-of-type(odd) .num{color: #ed7822} #process_sec .order_list .wrapper > li:nth-of-type(even) .img_box{background: #ede7f8} #process_sec .order_list .wrapper > li:nth-of-type(even) .num{color: #7d48db} #process_sec .order_list .order_type{position: relative; width: fit-content; margin: 0 auto;} #process_sec .order_list .order_type .num{position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; line-height: 30px; box-shadow: 0 0 0.3em rgba(0,0,0,0.2); background: #fff} #process_sec .order_list .order_type .img_box{display: block; position: relative; width: 100px; height: 100px; border-radius: 50%} #process_sec .order_list .order_type .img_box img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)} #process_sec .order_list .caption{margin-top: 16px; color: #a493c3} #process_sec .order_list .caption .tit{line-height: 20px;} #process_sec .order_list .caption .bot{} #process_sec .order_list .info_txt{margin-top: 42px; color: #616161} #process_sec .step_1 .util_txt .link{margin-left: 5px; color: #7844e6 !important; border-color: #7844e6 !important} #process_sec .step_4 .util_txt{} #process_sec .step_4 .util_txt::after{content: ''; display: block; clear: both;} #process_sec .step_4 .list_box_one{} #process_sec .step_4 .list_box_one .tit{box-shadow: 0 0 4px #ffc6b9; color: #ff7d5e;} #process_sec .step_4 .list_box_one .list_wrapper li{background-color: #ffe5df; color: #e9451f} #process_sec .step_4 .list_box_two{} #process_sec .step_4 .list_box_two .list_wrapper li{background-color: #d3d4f9; color: #3500a5;} #process_sec .step_4 .list_box_two .tit{box-shadow: 0 0 4px #d3d4f9; color: #9169e7; } #process_sec .step_4 .com_list_box{float: left; width: calc((100% / 2) - 15px); text-align: center} #process_sec .step_4 .com_list_box:nth-of-type(2n){float: right} #process_sec .step_4 .com_list_box .tit{padding: 16px 0; border-radius: 5px; font-size: 19px} #process_sec .step_4 .com_list_box .list_wrapper{margin-top: 11px} #process_sec .step_4 .com_list_box .list_wrapper li{padding: 16px 0;; border-radius: 5px;} #process_sec .step_4 .com_list_box .list_wrapper li + li{margin-top: 5px} @media screen and (max-width: 650px){ .order_list_detail .step_wri > img{width: 30px} #process_sec .top_link_box p{width: calc(100% / 2)} #process_sec .top_link_box p::before{content: '·'; margin: 0 10px} #process_sec .top_link_box p:nth-of-type(n + 3){margin-top: 19px} #process_sec .step_1 .util_txt .link{display: block; width: fit-content; margin: unset; margin-top: 20px !important;} #process_sec .step_4 .com_list_box{float: unset; width: 100%} #process_sec .step_4 .com_list_box + .com_list_box{margin-top: 30px} } @media screen and (max-width: 500px){ .order_list_detail > ul.wrapper > li > div{float: unset} .order_list_detail .step_wri{width: 100%; margin-top: 30px} #process_sec .order_list .order_type .img_box img{width: 43px} } #benefit_sec{padding: 40px 16px 80px 16px} #benefit_sec .top_title_box{text-align: center; margin-bottom: 60px} #benefit_sec .top_title_box .title{font-size: 27px} #benefit_sec .top_title_box .title i{color: #ff5f00} #benefit_sec .top_title_box .bot{margin-top: 16px; color: #888} #benefit_sec .step_1 .step_wri::after{content: ''; display: block; clear: both} #benefit_sec .step_1 .step_wri > div{float: left} #benefit_sec .step_1 .step_wri > div:nth-of-type(2){float: right} #benefit_sec .step_1 .step_wri > div:nth-of-type(2) img{width: 350px} #benefit_sec .step_3 .util_txt{margin-top: 60px;} #benefit_sec .step_3 .util_txt .tit{padding: 11px 0; text-align: center; background-color: #f9f9f9;} #benefit_sec .step_3 .util_txt::after{content: ''; display: block; clear: both} #benefit_sec .step_3 .util_txt > div{float: left; width: calc((100% / 2) - 24px); border: 1px solid #ededed} #benefit_sec .step_3 .util_txt > div:nth-of-type(2){float: right} #benefit_sec .step_3 .util_txt > div.active{position: relative; border: 2px solid #f53f41} #benefit_sec .step_3 .util_txt > div.active .tag_box{position: absolute; right: -20px; top: -45px; padding: 12px; border-radius: 5px; background: #f53f41; color: #fff} #benefit_sec .step_3 .util_txt > div.active .tag_box::before{content: ''; position: absolute; bottom: -22px; border-top: 13px solid #f53f41; border-bottom: 10px solid transparent; border-right: 10px solid transparent;} #benefit_sec .step_3 .util_txt table{margin: unset; border: none; border-top: 1px solid #ededed} #benefit_sec .step_3 .util_txt th, #benefit_sec .step_3 .util_txt td{padding: 8px} #benefit_sec .step_3 .util_txt tr{border: none;} #benefit_sec .step_3 .util_txt tr + tr{ border-top: 1px solid #ededed} #benefit_sec .step_3 .util_txt th, #benefit_sec .step_3 .util_txt td{border: none; font-size: 13px} #benefit_sec .step_3 .util_txt th{background: #fffafa; color: #555} #benefit_sec .step_3 .util_txt td{} @media screen and (max-width: 780px){ #benefit_sec .step_1 .step_wri > div, #benefit_sec .step_1 .step_wri > div:nth-of-type(2){float: unset} #benefit_sec .step_1 .step_wri > div:nth-of-type(2){margin-top: 30px} #benefit_sec .step_1 .step_wri > div:nth-of-type(2) img{width: 350px} } @media screen and (max-width: 700px){ #benefit_sec .step_3 .util_txt > div, #benefit_sec .step_3 .util_txt > div:nth-of-type(2){float: unset} #benefit_sec .step_3 .util_txt > div{width: 100%; border: 1px solid #ededed} #benefit_sec .step_3 .util_txt > div:nth-of-type(2){margin-top: 24px} #benefit_sec .step_3 .util_txt > div.active .tag_box{right: 10px;} } @media screen and (max-width: 500px){ #benefit_sec .step_1 .step_wri > div:nth-of-type(2){text-align: center} #benefit_sec .step_1 .step_wri > div:nth-of-type(2) img{width: 70%} } /*자주 묻는 질문*/ #notice_faq_sec{padding-bottom: 80px} #notice_faq_sec .m_search .search select, #notice_faq_sec .m_search .search input[type="text"], #notice_faq_sec .m_search .search button{font-size: 12px} #notice_faq_sec .faq_tab{margin-top: 16px; text-align: center} #notice_faq_sec .faq_tab li{display: inline-block; margin: 5px; padding: 4px 12px; border: 1px solid #ededed; border-radius: 25px;} #notice_faq_sec .faq_tab li.active{border-color: transparent; background: #8a51ff; color: #fff} #notice_faq_sec .faq_tab li a{display: block;} .faq_container{margin-top: 25px; border-top: 2px solid #131313; border-bottom: 1px solid #ddd } .faq_container .q_box{overflow: hidden; padding: 16px 0} .faq_container .q_box:not(:first-of-type){border-top: 1px solid #ddd} .faq_container .q_box span{float: left;} .faq_container .q_box .q{width: 28px; height: 28px; border-radius: 50%; line-height: 28px; text-align: center; background: #ff723e; color: #fff;} .faq_container .q_box .wri{width: calc(100% - 28px); margin-top: calc((28px - 16px) / 2); padding-left: 10px; font-size: 14px} .faq_container .a_box{padding: 8px; font-size: 13px; background: #fafafa} .faq_container .a_box p{} .faq_container .a_box p + p{} @media screen and (max-width: 1210px){ .faq_container .q_box{padding: 16px} .faq_container .a_box{padding: 8px 16px} } @media screen and (max-width: 600px){ #notice_faq_sec .m_search .search{display: flex; justify-content: space-between;} #notice_faq_sec .m_search .search select{width: 90px} #notice_faq_sec .m_search .search input[type="text"]{width: calc((100% - 90px - 70px) - 8px)} #notice_faq_sec .m_search .search button{width: 70px} } @media screen and (max-width: 500px){ #notice_faq_sec .faq_tab{font-size: 14px} } /*웹호스팅 신청*/ #hosting_ap_sec{padding: 16px calc(16px - 10px) 16px calc(16px - 10px); background: #f9fafc} #hosting_ap_sec article{ } #hosting_ap_sec .hs_ap_choice{padding: 10px} #hosting_ap_sec .hs_ap_choice ~ .bullet{transform: unset; width: fit-content !important; margin: 16px auto 0 auto} #hosting_ap_sec .list_wrapper{} #hosting_ap_sec .list_wrapper > li{padding: 16px; transition: all 0.5s; transform: scale(90%); border-radius: 5px; opacity: 50%; box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%); background: #fff} #hosting_ap_sec .list_wrapper > li.swiper-slide-active{transform: scale(1); opacity: 100%;} #hosting_ap_sec .list_wrapper .top_info{font-size: 14px; text-align: right; color: #aaa} #hosting_ap_sec .list_wrapper .tag_title{} #hosting_ap_sec .list_wrapper .tag_title .tag{width: fit-content; padding: 4px 22px; border-radius: 16px; border: 1px solid;} #hosting_ap_sec .list_wrapper .tag_title .txt{margin-top: 8px; font-size: 14px} #hosting_ap_sec .price_total{display: flex; justify-content: space-between; align-items: flex-start; margin-top: 12px} #hosting_ap_sec .price_total select{width: 80px; height: 32px} #hosting_ap_sec .price_total .data_box{} #hosting_ap_sec .price_total .data_box > li{display: none} #hosting_ap_sec .price_total .data_box > li.active{display: block} #hosting_ap_sec .basic .tag{border:1px solid #5f65db; background:#fbfbfd; color:#5f65db; } #hosting_ap_sec .basic .btn{background: #5f65db; color: #fff} #hosting_ap_sec .pre .tag{border:1px solid #9f0dd5; background:#fcfbfd; color:#9f0dd5; } #hosting_ap_sec .pre .btn{background: #9f0dd5; color: #fff} #hosting_ap_sec .only .tag{border-color: #0fad96; background: #f3fdfc; color: #0fad96} #hosting_ap_sec .only .btn{background: #0fad96; color: #fff} #hosting_ap_sec .only .price_total select{width: 110px} #hosting_ap_sec .price_total .dc_date{font-size: 14px} #hosting_ap_sec .price_total .dc_date .sale{color: #bbb} #hosting_ap_sec .price_total .dc_date .percent{letter-spacing: -1px; color: #f74141;} #hosting_ap_sec .price_total .price{margin-top: 4px; font-size: 18px} #hosting_ap_sec .price_total .price small{color: #555} #hosting_ap_sec .sever_date{margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed; font-size: 14px} #hosting_ap_sec .sever_date > div{margin-top: 8px} #hosting_ap_sec .sever_date .name{width: 50px; letter-spacing: -1px; color: #999} #hosting_ap_sec .sever_date .txt{} #hosting_ap_sec .list_wrapper .btn{display: block; padding: 12px 0; margin-top: 32px; border-radius: 3px; font-size: 14px; text-align: center;} #hosting_info_sec{padding-bottom: 80px} #hosting_info_sec article{} #hosting_info_sec article:first-of-type{padding-bottom: 40px} #hosting_info_sec article:not(:first-of-type){padding: 40px 0 40px 0} #hosting_info_sec article + article{} #hosting_info_sec .title_box{margin-bottom: 45px; padding-top: 80px; text-align: center} #hosting_info_sec .title_box h3{} #hosting_info_sec .title_box p{} #hosting_info_sec .cpn_table_wrap{margin-top: 32px} #hosting_info_sec .cpn_table_wrap .cpn_table{text-align: center; font-size: 14px} #hosting_info_sec .cpn_table_wrap .cpn_table tr *{padding: 10px 0; width: calc(100% / 7)} #hosting_info_sec .cpn_table_wrap .cpn_table thead th{background: #f9f9f9; color: #333} #hosting_info_sec .cpn_table_wrap .cpn_table tbody th{background: #fffafa} #hosting_info_sec .cpn_table_wrap .cpn_table tbody tr + tr{border-top: 1px solid #ededed} #hosting_info_sec .cpn_table_wrap .cpn_table tbody tr.active{position: relative} #hosting_info_sec .cpn_table_wrap .cpn_table tbody tr.active::after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid red} #hosting_info_sec .cpn_table_wrap .cpn_table tbody th{color: #333} #hosting_info_sec .cpn_table_wrap .cpn_table tbody td{font-weight: normal; color: #888} #hosting_info_sec .top_tit{font-size: 22px; text-align: center} #hosting_info_sec .top_tit ~ .bot{margin-top: 4px; font-size: 14px; text-align: center; color: #999;} #hosting_info_sec .content_box{*margin-top: 60px} #hosting_info_sec .info_wrap{position: relative;} #hosting_info_sec .info_wrap::before{content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; opacity: 10%; background: url(/images/sub/domainhosting_img01.png) no-repeat right 76% } #hosting_info_sec .info_wrap .title_box h3{font-size: 25px} #hosting_info_sec .info_wrap .title_box p{margin-top: 10px; font-size: 17px} #hosting_info_sec .info_wrap .txt_box{text-align: center; font-size: 14px} #hosting_info_sec .info_wrap .txt_box p{line-height: 22px; word-break: keep-all; color: #393939} #hosting_info_sec .info_wrap .txt_box p + p{margin-top: 10px} #hosting_info_sec .compare_wrap{} #hosting_info_sec .compare_wrap .compare_content{text-align: center} #hosting_info_sec .compare_wrap .compare_content > ul{} #hosting_info_sec .compare_wrap .compare_content > ul > li{transition: all 0.3s; transform: scale(90%); opacity: 50%} #hosting_info_sec .compare_wrap .compare_content > ul > li.swiper-slide-active{transform: scale(100%); opacity: 100%} #hosting_info_sec .compare_wrap .compare_content > ul > li.my{} #hosting_info_sec .compare_wrap .enter_name{padding: 16px 16px 0 16px; font-size: 18px} #hosting_info_sec .compare_wrap .date_box{} #hosting_info_sec .compare_wrap .date_box::before{content: '-'; display: block} #hosting_info_sec .compare_wrap .hs_price{} #hosting_info_sec .compare_wrap .hs_price .tit{font-size: 14px; color: #999} #hosting_info_sec .compare_wrap .hs_price .price{margin-top: 2px} #hosting_info_sec .compare_wrap .compare_date{margin-top: 22px} #hosting_info_sec .compare_wrap .compare_date::after{content: ''; display :block; clear: both} #hosting_info_sec .compare_wrap .compare_date > div{float: left; width: calc(100% / 2)} #hosting_info_sec .compare_wrap .compare_date > div:not(:first-of-type, :nth-of-type(3)) .name{border-left: 1px solid #eee} #hosting_info_sec .compare_wrap .compare_date > div + div + div{width: calc(100% / 3)} #hosting_info_sec .compare_wrap .compare_date > div p{padding: 12px 0} #hosting_info_sec .compare_wrap .compare_date .name{background: #f9f9f9} #hosting_info_sec .compare_wrap .compare_date .date{} #hosting_info_sec .backup_wrap{position: relative} #hosting_info_sec .backup_wrap::before{content: ''; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; opacity: 10%; background: #000; background: url(../img/domainhosting_backup.png) no-repeat left top; } #hosting_info_sec .backup_wrap .art_tit_box{} #hosting_info_sec .backup_wrap .art_tit_box *{} #hosting_info_sec .backup_wrap .info_text{margin-top: 32px; text-align: center; color: #333} #hosting_info_sec .backup_wrap .sos_box{margin-top: 24px; padding: 16px; border-radius: 10px; text-align: center; font-size: 14px; background: #f9f9f9; color: #666} #hosting_info_sec .backup_wrap .sos_box p + p{margin-top: 5px} #hosting_info_sec .backup_wrap .sos_box .this_btn{width: 100%; height: 32px; margin-top: 20px; border-radius: 5px; background: #5d2bc9; color: #fff} #hosting_info_sec .nameserver_wrap{} #hosting_info_sec .nameserver_wrap .table_wrap{margin-top: 32px; border-bottom: 1px solid #ededed; text-align: center; font-size: 14px} #hosting_info_sec .nameserver_wrap .table_wrap::after{content: ''; display: block; clear: both} #hosting_info_sec .nameserver_wrap .table_wrap > div{float: left; width: calc(100% / 2)} #hosting_info_sec .nameserver_wrap .table_wrap > div *{padding: 6px 0} #hosting_info_sec .nameserver_wrap .table_wrap > div + div *{border-left: 1px solid #ededed} #hosting_info_sec .nameserver_wrap .table_wrap .th{background: #F7FAFF} #hosting_info_sec .nameserver_wrap .table_wrap .td{border-top: 1px solid #ededed; color: #777} #hosting_info_sec .nameserver_wrap .info_text{margin-top: 16px; font-size: 14px; color: #777} #hosting_info_sec .nameserver_wrap .info_text p{position: relative; padding-left: 10px;} #hosting_info_sec .nameserver_wrap .info_text p + p{margin-top: 5px} #hosting_info_sec .nameserver_wrap .info_text p::before{content: '·'; position: absolute; left: 0;} #roadview_popup{} #roadview_popup .wrapper{padding: 16px; border-radius: 16px; background: #fff} #roadview_popup .title_box{display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #ededed} #roadview_popup .title_box .close{font-size: 16px; background: transparent;} #roadview_popup .sos_box{padding: 16px; border-radius: 12px; font-size: 14px; background: #fafafa; color: #333} #roadview_popup .sos_box p + p{margin-top: 5px} @media screen and (max-width: calc(1200px + 32px)){ #hosting_info_sec .container{padding: 40px 16px !important} } @media screen and (max-width: 650px){ #hosting_info_sec .cpn_table_wrap{overflow: auto} #hosting_info_sec .cpn_table_wrap .cpn_table{width: 650px} } @media screen and (max-width: 500px){ #hosting_info_sec .backup_wrap::before{background-size: 200px} } /*-----------------------*/ #hs_app_layer{} #hs_app_layer .wrapper{width: 1200px; height: calc(100vh - 150px); padding: 24px 16px; overflow: auto; overflow-x: hidden; background: #fff} #hs_app_layer .title_box{text-align: center} #hs_app_layer .title_box .tit{font-size: 20px} #hs_app_layer .title_box .bot{margin-top: 10px; color: #888;} #hs_app_layer .list_wrapper{margin-top: 32px} #hs_app_layer .list_wrapper > li{padding: 30px; border-radius: 10px; box-shadow: 0 0 14px rgba(0, 0, 0, 10%);} #hs_app_layer .list_wrapper > li + li{margin-top: 32px} #hs_app_layer .list_wrapper > li .link{display: block; width: 80%; margin: 16px auto 0 auto; padding: 10px 0; border: 1px solid #7844e6; font-size: 14px; text-align: center; color: #7844e6; } #hs_app_layer .tit_box{margin-bottom: 30px; text-align: center} #hs_app_layer .tit_box .tag{font-size: 16px;} #hs_app_layer .tit_box .tag b{padding: 8px 28px; border: 1px solid; border-radius: 1em} #hs_app_layer .tit_box .tag ~ p{margin-top: 10px; font-size: 14px} #hs_app_layer .basic .tag b{color: #5f65db; border-color: #5f65db} #hs_app_layer .pre .tag b{color: #9f0dd5; border-color: #9f0dd5} #hs_app_layer .inner{padding: 16px 0; border-top: 1px solid; border-bottom: 1px solid; border-color: #ededed} #hs_app_layer .inner .top_info{margin-bottom: 10px; text-align: right; color: #b592ff} #hs_app_layer .data_box{} #hs_app_layer .data_box > p{font-size: 14px} #hs_app_layer .data_box > p + p{margin-top: 10px} #hs_app_layer .data_box span{display: table-cell; vertical-align: middle} #hs_app_layer .data_box span.name{width: 60px; text-align: left; color: #939393} #hs_app_layer .data_box span.txt{} #hs_app_layer .data_box span.txt::before{content: '·'; margin-right: 12px} #hs_app_layer .price_span{} #hs_app_layer .price_span s, .hs_app_layer .price_span i{} #hs_app_layer .price_span s ~ i{margin-left: 5px} #hs_app_layer .price_span .sale{color: #c9c9c9} #hs_app_layer .price_span .price{} #hs_app_layer .price_span .percent{color: #fb2e43} #hs_app_layer .price_span .regularly{color: #1171d4} @media screen and (max-width: 750px){ .hosting_art_1::before{background-size: 150px; background-position-y: top} } @media screen and (max-width: 600px){ #hosting_info_sec .info_wrap::before{background: url(/images/sub/domainhosting_img01.png) no-repeat right 20%; background-size: 50%} } /*도메인 신청*/ main:has(#domain_wrap){} #domain_wrap{padding: 40px 0 80px 0} #domain_wrap section + section{margin-top: 80px} #domain_find{} #domain_find .fieldset{} #domain_find .fieldset .tit_tab{text-align: center} #domain_find .fieldset .tit_tab .tab{} #domain_find .fieldset .tit_tab .tab button{font-size: 18px; background: transparent; color: #999} #domain_find .fieldset .tit_tab .tab button.on{font-size: 20px; color: #333} #domain_find .fieldset .tit_tab .tab button + button::before{content: '·'; padding: 0px 12px; font-size: 20px; color: #999} #domain_find .fieldset .tit_tab h3{margin-top: 4px; font-size: 25px;} #domain_wrap h3, #domain_find h3{margin:20px 0; font-size: 25px; text-align:center} /* 다른데서도 사용하기 위해 추가 */ #domain_find .fieldset .search_box{margin-top: 16px} #domain_find .fieldset .search_box > div{position: relative} #domain_find .fieldset .search_box > div:not(:first-of-type){display: none} #domain_find .fieldset .search_box input[type="text"]{width: 100%; height: 45px; padding-right: 45px; padding-left: 16px; border-radius: 38px} #domain_find .fieldset .search_box button[type="button"]{position: absolute; right: calc(45px / 2); top: 50%; transform: translateY(-50%); background: transparent} #domain_find .fieldset .search_box button[type="button"]::before{content: '\f002'; font-family:FontAwesome;} /* 도메인 결과 css 추가 by dev 20240129 */ .tbl1{border-top:2px solid #333;} .tbl1 td{border-bottom:1px solid #eeeeee; border-top:0px solid #333; font:15px/1.5em Pretendard; padding:7px; } .tbl1 th{border-top:0px solid #333;} .tbl1 th{background-color:#f8f8f8;font-size:14px;color:#333;padding:10px 0;text-align:left; padding-left:10px;} .tbl1.table_brd td{border-left:1px solid #dddddd;border-bottom:1px solid #dddddd;} .tbl1.table_brd th{border-bottom:1px solid #dddddd} .tbl1 td input{border:1px solid #cdcdcd;padding:3px;} .tbl1 td input[type=text] {width:100%;margin:4px;} .tbl1 td label {display:inline;} .tbl1 td input.hp {width:28%;} .tbl1 td input#k_address2, .tbl1 td input#e_address1, .tbl1 td input#e_a_address2, .tbl1 td input#e_address2{display:block} .tbl1 td input#k_address1, .tbl1 td input#k_a_address1{margin:1px 0;display:block} #e_address2,#e_a_address2{margin-top:1px} .tbl1 td select { display:inline-block; border:1px solid #ddd; padding:3px;width:55px;height:38px;vertical-align:middle;font-size:14px;} .tbl1 td a{text-decoration:none} .tbl1 tbody tr:nth-child(2n) { background:#fff } td span.txt_color1{display:block;;color:#3366cc;} td span.txt_color2{color:#fc400b;} span.txt_color3{color:#6E9AD8;} .tbl1 td.txt_color4{font-weight:500;} #domain_find .clear_box, .domain_wrap .clear_box {text-align:center} #domain_find .clear_box .btn, .domain_wrap .clear_box .btn{padding: 8px 24px; border-radius: 3px; font-size: 14px} #domain_find .clear_box .clear, .domain_wrap .clear_box .clear{background: #8a51ff; color: #fff} #domain_info {margin-top: 35px; padding-top: 35px; border-top: 1px solid #ededed} .domain_wrap .popup_layer {position:relative !important;padding:unset;background:unset;} /* 도메인 주소검색 */ .domain-searchResult { display:none;} #userTerms.modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } #userTerms .modal-content { max-width:710px; background-color: #fefefe; margin:11% auto; padding: 1rem 2rem; border: 1px solid #888; width: 80%; height: 50%; min-height: 450px; } #userTerms .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; border: 0; padding: 0; margin: 0; } #userTerms .close:hover, #userTerms .close:focus { color: black; cursor: pointer; } #userTerms .modalTitle { display:flex; justify-content:space-between; align-items:center; padding-bottom: 0.5rem; } #userTerms .modalTitle h3 { font-size:18px; } #userTerms .modalText { height:100%; max-height:85%; } #userTerms .modalText textarea { width:100%; height:100%; overflow-y:scroll; border:2px solid #000; padding:1.5rem; } #domain_info .point_box{margin-bottom: 32px; padding: 24px 16px; border-radius: 10px; background: #fafafa} #domain_info .top_title{text-align: center;} #domain_info .top_title .tit{margin-bottom: 16px; font-size: 18px} #domain_info .top_title .tit::after{content: '-'; display: block} #domain_info .top_title .tit ~ *{font-size: 14px} #domain_info .top_title .info{word-break: keep-all; color: #888} #domain_info .top_title .ex{margin-top: 16px; color: #888} #domain_info .top_info_list{color: #888} #domain_info .top_info_list > *{position: relative; padding-left: 10px; font-size: 14px} #domain_info .top_info_list > *::before{content: '·'; position: absolute; left: 0} #domain_info .top_info_list > * + *{margin-top: 10px} #domain_info .domain_tab{display: table; width: 100%} #domain_info .domain_tab button{display: table-cell; vertical-align: bottom; width: calc(100% / 4); height: 40px; border-radius: 10px 10px 0 0; font-size: 15px; background: #fafafa; color: #777} #domain_info .domain_tab button.on{height: 50px; background: #8a51ff; color: #fff} #domain_info .domain_tab ~ .type_title{} #domain_info .type_wrapper{} #domain_info .type_wrapper > div:not(:first-of-type){display: none} #domain_info .type_wrapper .paging_box{margin-top: 16px; text-align: center;} #domain_info .type_wrapper .list_wrapper{} #domain_info .type_wrapper .list_wrapper > li{padding: 45px 16px 24px 16px; border: 1px solid #ededed; border-radius: 0 0 10px 10px; background: #fff} #domain_info .type_wrapper .type_box{text-align: center} #domain_info .type_wrapper .type_box .type{font-size: 18px} #domain_info .type_wrapper .type_box .info{margin-top: 14px; font-size: 14px} #domain_info .type_wrapper .compare_list{margin-top: 32px; border-top: 2px solid #e5e5e5; font-size: 14px} #domain_info .type_wrapper .compare_list > li{display: table; width: 100%} #domain_info .type_wrapper .compare_list > li + li{border-top: 1px solid #ededed} #domain_info .type_wrapper .compare_list > li.my_on{} #domain_info .type_wrapper .compare_list > li span{display: table-cell; vertical-align: middle; padding: 16px 0; text-align: center;} #domain_info .type_wrapper .compare_list .name{width: 120px; background: #f5f5f5; color: #666} #domain_info .type_wrapper .compare_list .price{color: #444;} #domain_info .type_wrapper .compare_list > li.my_on .name{background: #8a51ff; color: #fff} #domain_info .type_wrapper .compare_list > li.my_on .price{color: #8a51ff;} @media screen and (max-width: 1210px){ #domain_wrap{padding: 40px 16px 80px 16px} } /*ssl 신청*/ #ssl_sec{padding: 40px 16px 0 16px} #ssl_sec article{margin-top: 80px} #ssl_sec .top_tit_box{text-align: center; } #ssl_sec .top_tit_box .tit{font-size: 27px} #ssl_sec .top_tit_box .bot{margin-top: 16px} #ssl_sec .info_art{} #ssl_sec .info_art .info_list_box{position: relative} #ssl_sec .info_art .info_list_box .wrapper{} #ssl_sec .info_art .info_list_box .wrapper > li{display: table; width: 100%; overflow: hidden; border-radius: 8px} #ssl_sec .info_art .info_list_box .wrapper > li + li{margin-top: 20px} #ssl_sec .info_art .info_list_box .wrapper > li span{display: table-cell; vertical-align: middle} #ssl_sec .info_art .info_list_box img{position: absolute; right: 0; top: -75px; width: 80px} #ssl_sec .info_art .info_list_box .name_tit{width: 210px; text-align: center; background: linear-gradient(to bottom, #7f4cd7, #7d48db); color: #fff} #ssl_sec .info_art .info_list_box .txt{padding: 24px; font-size: 14px; background: #fafafa; color: #616161} #ssl_sec .info_art .info_list_box .txt > p{} #ssl_sec .info_art .info_list_box .txt > p + p{margin-top: 16px} #ssl_sec .info_art .info_txt_box{margin-top: 45px} #ssl_sec .info_art .info_txt_box .tit{padding-bottom: 16px; border-bottom: 1px solid #ddd; font-size: 19px} #ssl_sec .info_art .info_txt_box .tit::before{content: '\f0d7'; margin-right: 8px; font-family:FontAwesome; color: #7f4cd7} #ssl_sec .info_art .info_txt_box .txt{padding-top: 16px; font-size: 14px; line-height: 18px; color: #616161} #ssl_sec .apply_art{} #ssl_sec .apply_art .tab_btn{border: 1px solid #9f9f9f; overflow: hidden; text-align: center} #ssl_sec .apply_art .tab_btn button{float: left; width: calc(100% / 2); padding: 16px 0; color: #555;} #ssl_sec .apply_art .tab_btn button.on{background: #2e2f36; color: #fff} #ssl_sec .apply_art .wrapper{margin-top: 50px} #ssl_sec .apply_art .wrapper > li{display: none; overflow: hidden} #ssl_sec .apply_art .wrapper > li.active{display: block} #ssl_sec .apply_art .name_box, #ssl_sec .apply_art .list_wrapper{float: left} #ssl_sec .apply_art .name_box{position: relative; width: 190px; font-size: 19px} #ssl_sec .apply_art .name_box::before{content: '\f072'; position: absolute; left: 0; bottom: -40px; font-family:FontAwesome;} #ssl_sec .apply_art .list_wrapper{width: calc(100% - 190px)} #ssl_sec .apply_art .list_wrapper > li{} #ssl_sec .apply_art .list_wrapper > li + li{margin-top: 16px} #ssl_sec .apply_art .list_wrapper .list_tit_box{font-size: 17px;} #ssl_sec .apply_art .list_wrapper .list_tit_box .num{} #ssl_sec .apply_art .list_wrapper .list_tit_box .num b{padding-bottom: 2px; border-bottom: 2px solid #5d2bc9} #ssl_sec .apply_art .list_wrapper .list_tit_box .list_tit{margin-top: 10px} #ssl_sec .apply_art .list_wrapper .list_txt_box{margin-top: 10px; font-size: 14px; color: #858585} #ssl_sec .apply_art .list_wrapper .list_txt_box p{position: relative; padding-left: 9px;} #ssl_sec .apply_art .list_wrapper .list_txt_box p::before{content: '-'; position: absolute; left: 0;} #ssl_sec .apply_art .list_wrapper .list_txt_box p + p{margin-top: 3px} #ssl_sec .apply_art .ssl_apply_box{margin-top: 10px; padding: 24px; background: #fafafa} #ssl_sec .apply_art .ssl_apply_box form[name="fwrite"]{display: table; table-layout: fixed; width: 100%} #ssl_sec .apply_art .ssl_apply_box form[name="fwrite"] > div{display: table-cell; vertical-align: middle} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt{} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_tit{font-size: 17px} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_txt{margin-top: 16px; font-size: 14px; color: #737373;} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_txt p + p{margin-top: 8px} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_txt .top{} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_txt .mid{} #ssl_sec .apply_art .ssl_apply_box .ssl_info_txt .ssl_ap_txt .bot{} #ssl_sec .apply_art .ssl_apply_box .btn_confirm{text-align: center} #ssl_sec .apply_art .ssl_apply_box .btn_confirm .btn{padding: 6px 30px; border: 2px solid #5d2bc9; font-weight: 700; font-size: 17px; background: transparent; color: #5d2bc9} #ssl_sec .clear_art{padding-top: 50px; border-top: 1px solid #333;} #ssl_sec .clear_art::after{content: ''; display: block; clear: both} #ssl_sec .clear_art > div{} #ssl_sec .clear_art .clear_tit_box{float: left} #ssl_sec .clear_art .clear_tit_box .clear_tit{position: relative; font-size: 22px; padding-bottom: 25px} #ssl_sec .clear_art .clear_tit_box .clear_tit::before{content: ''; position: absolute; left: 0; bottom: 0; width: 50px; height: 2px; border-radius: 2px; background: #5d2bc9} #ssl_sec .clear_art .clear_tit_box .clear_txt{font-size: 14px; padding-top: 25px} #ssl_sec .clear_art .img_box{float: right; width: 50%; border-radius: 24px; overflow: hidden; box-shadow: 2em 2em 2em rgb(0 0 0 / 10%);} #ssl_sec .clear_art .img_box img{width: 100%} #ssl_sec ~ #clear_submit .dft_btn{background: #333} @media screen and (max-width: 650px){ #ssl_sec .apply_art .name_box, #ssl_sec .apply_art .list_wrapper{float: unset; width: 100%} #ssl_sec .apply_art .name_box::before{top: 50%; right: 0; transform: transalteY(-50%); left: unset; bottom: unset} #ssl_sec .apply_art .list_wrapper{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed;} } @media screen and (max-width: 590px){ #ssl_sec .info_art .info_list_box .name_tit{width: 140px} #ssl_sec .info_art .info_list_box img{top: -40px; width: 50px; } #ssl_sec .clear_art .clear_tit_box, #ssl_sec .clear_art .img_box{float: unset} #ssl_sec .clear_art .clear_tit_box{text-align: center} #ssl_sec .clear_art .clear_tit_box .clear_tit::before{left: 50%; transform: translateX(-50%)} #ssl_sec .clear_art .img_box{width: 70%; margin: 40px auto 0 auto;} } @media screen and (max-width: 500px){ #ssl_sec .info_art{margin-top: 100px} #ssl_sec .info_art .info_list_box .wrapper > li span{display: block} #ssl_sec .info_art .info_list_box .name_tit{width: 100%; padding: 8px 0} #ssl_sec .info_art .info_list_box img{top: -65px} #ssl_sec .apply_art .ssl_apply_box form[name="fwrite"] > div{display: block} #ssl_sec .apply_art .ssl_apply_box .btn_confirm{margin-top: 34px} } /*sms 신청*/ #sms_ch_sec{padding: 16px calc(16px - 10px) 16px calc(16px - 10px); background: #f9fafc} #sms_ch_sec .list_wrap{padding: 10px} #sms_ch_sec .list_wrap > ul > li{position: relative; transition: all 0.5s; transform: scale(90%); padding: 32px 16px 16px 16px; border-radius: 5px; opacity: 50%; box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%); background: #fff;} #sms_ch_sec .list_wrap > ul > li.swiper-slide-active{transform: scale(1); opacity: 100%;} #sms_ch_sec .list_wrap .tag{position: absolute; right: 16px; top: 16px; padding: 2px 14px; border-radius: 14px; border: 1px solid; font-size: 14px;} #sms_ch_sec .list_wrap .price{font-size: 18px} #sms_ch_sec .list_wrap .info_date{padding-top: 16px; margin-top: 16px; border-top: 1px solid #ededed; font-size: 14px} #sms_ch_sec .list_wrap .info_date > div{} #sms_ch_sec .list_wrap .info_date > div + div{margin-top: 8px} #sms_ch_sec .list_wrap .info_date .tit{width: 70px; letter-spacing: -1px; color: #555} #sms_ch_sec .list_wrap .info_date .txt{} #sms_ch_sec .list_wrap .btn{width: 100%; height: 40px; margin-top: 32px; border-radius: 3px} #sms_ch_sec .list_wrap .light .tag{border-color: #999; background: #f9f9f9} #sms_ch_sec .list_wrap .light .btn{border: 1px solid #999; background: #f9f9f9} #sms_ch_sec .list_wrap .standard .tag{border-color: #623ad6; background: #f8f6ff; color: #623ad6} #sms_ch_sec .list_wrap .standard .btn{background: #623ad6; color: #fff} #sms_ch_sec .list_wrap .business .tag{border-color: #f96464; background: #fff8f8; color: #f96464} #sms_ch_sec .list_wrap .business .btn{background: #f96464; color: #fff} #sms_ch_sec .list_wrap .premium .tag{border-color: #fa6c3f; background: #fffaf9; color: #fa6c3f} #sms_ch_sec .list_wrap .premium .btn{background: #fa6c3f; color: #fff} #sms_ch_sec .list_wrap .platinum .tag{border-color: #0fad96; background: #f3fdfc; color: #0fad96} #sms_ch_sec .list_wrap .platinum .btn{background: #0fad96; color: #fff} #sms_ch_sec .bullet{transform: unset; width: fit-content !important; margin: 16px auto 0 auto} #sms_info_sec{padding: 40px 16px 80px 16px} #sms_info_sec article{margin-top: 50px} #sms_info_sec .top_tit_box{text-align: center} #sms_info_sec .top_tit_box .tit{font-size: 25px} #sms_info_sec .top_tit_box .bot{margin-top: 24px; font-size: 15px; color: #616161} #sms_info_sec .sms_more{} #sms_info_sec .sms_more .wrapper{overflow: hidden} #sms_info_sec .sms_more .wrapper > li{float: left; width: calc((100% / 2) - 15px); padding: 24px; border-radius: 20px; background: #fafafa} #sms_info_sec .sms_more .wrapper > li:nth-of-type(2n){float: right} #sms_info_sec .sms_more .list_tit{font-size: 18px} #sms_info_sec .sms_more .list_tit ~ div{margin-top: 40px; font-size: 14px; color: #616161} #sms_info_sec .sms_more .list_tit ~ div p + p{margin-top: 10px; line-height: 18px;} #sms_info_sec .sms_more .txt_type{} #sms_info_sec .sms_more .txt_type p{overflow: hidden} #sms_info_sec .sms_more .txt_type span{float: left} #sms_info_sec .sms_more .txt_type .name{width: 70px} #sms_info_sec .sms_more .txt_type .txt{width: calc(100% - 70px)} #sms_info_sec .sms_more .deco_img{filter: invert(50%); text-align: right} #sms_info_sec .sms_more .list_type{} #sms_info_sec .sms_more .list_type p{position: relative; padding-left: 13px;} #sms_info_sec .sms_more .list_type p::before{content: '·'; position: absolute; left: 0;} #sms_info_sec .sms_price_art{padding-top: 50px; border-top: 1px solid #ededed; text-align: center} #sms_info_sec .sms_price_art .title{font-size: 25px} #sms_info_sec .sms_price_art form[name="fwrite"]{margin-top: 50px} #sms_info_sec .sms_price_art .wrapper{display: flex; flex-wrap: wrap; justify-content: center; gap: 37px} #sms_info_sec .sms_price_art .wrapper > li{width: calc((100% / 3) - 25px); padding: 40px; border-radius: 15px; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);} #sms_info_sec .sms_price_art .wrapper > li:not(:first-of-type) .btn_confirm .btn{color: #fff} #sms_info_sec .sms_price_art .type_price{} #sms_info_sec .sms_price_art .type_price .type{font-size: 13px;} #sms_info_sec .sms_price_art .type_price .type b{width: 105px; padding: 8px; border-radius: 120px; border: 1px solid;} #sms_info_sec .sms_price_art .type_price .price{margin-top: 16px; font-size: 18px} #sms_info_sec .sms_price_art .type_wri{padding: 20px 0; margin: 20px 0; border-top: 1px solid; border-color: #ededed;font-size: 14px; color: #616161} #sms_info_sec .sms_price_art .type_wri p{} #sms_info_sec .sms_price_art .type_wri p + p{margin-top: 8px;} #sms_info_sec .sms_price_art .btn_confirm{} #sms_info_sec .sms_price_art .btn_confirm .btn{width: 80%; height: 42px; border-radius: 3px;} #sms_info_sec .sms_price_art .wrapper > li.li_1{} #sms_info_sec .sms_price_art .wrapper > li.li_1 .type_price .type b{background: #f9f9f9} #sms_info_sec .sms_price_art .wrapper > li.li_1 .btn_confirm .btn{border: 1px solid #333; background: #f9f9f9} #sms_info_sec .sms_price_art .wrapper > li.li_2{} #sms_info_sec .sms_price_art .wrapper > li.li_2 .type_price .type b{border-color: #623ad6; background: #f8f6ff; color: #623ad6} #sms_info_sec .sms_price_art .wrapper > li.li_2 .btn_confirm .btn{background: #623ad6} #sms_info_sec .sms_price_art .wrapper > li.li_3{} #sms_info_sec .sms_price_art .wrapper > li.li_3 .type_price .type b{border-color: #f96464; background: #fff8f8; color: #f96464} #sms_info_sec .sms_price_art .wrapper > li.li_3 .btn_confirm .btn{background: #f96464} #sms_info_sec .sms_price_art .wrapper > li.li_4{} #sms_info_sec .sms_price_art .wrapper > li.li_4 .type_price .type b{border-color: #fa6c3f; background: #fffaf9; color: #fa6c3f} #sms_info_sec .sms_price_art .wrapper > li.li_4 .btn_confirm .btn{background: #fa6c3f} #sms_info_sec .sms_price_art .wrapper > li.li_5{} #sms_info_sec .sms_price_art .wrapper > li.li_5 .type_price .type b{border-color: #0fad96; background: #f3fdfc; color: #0fad96} #sms_info_sec .sms_price_art .wrapper > li.li_5 .btn_confirm .btn{background: #0fad96} @media screen and (max-width: 750px){ #sms_info_sec .sms_price_art .wrapper > li{width: calc((100% / 2) - 25px);} } @media screen and (max-width: 630px){ #sms_info_sec .sms_more .wrapper > li{width: 100%} #sms_info_sec .sms_more .wrapper > li, #sms_info_sec .sms_more .wrapper > li:nth-of-type(2n){float: unset} #sms_info_sec .sms_more .wrapper > li + li{margin-top: 15px} } @media screen and (max-width: 500px){ #sms_info_sec .sms_price_art .wrapper{display: unset} #sms_info_sec .sms_price_art .wrapper > li{width: 100%;} #sms_info_sec .sms_price_art .wrapper > li + li{margin-top: 37px} } /*페이먼트*/ #payment_sec{padding: 40px 16px 80px 16px} #payment_sec article{} #payment_sec article + article{margin-top: 90px} #payment_sec .top_tit_box{margin-bottom: 55px; text-align: center} #payment_sec .top_tit_box .tit{font-size: 27px} #payment_sec .top_tit_box .bot{margin-top: 16px; word-break: keep-all; color: #4d4d4d} #payment_sec .art_1{display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; text-align: center} #payment_sec .art_1 > div{width: 350px; padding: 32px 24px 24px 24px; border-radius: 16px; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1)} #payment_sec .art_1 .img_box{} #payment_sec .art_1 .img_box img{height: 50px} #payment_sec .art_1 .img_box img ~ figcaption{margin-top: 8px} #payment_sec .art_1 .info_txt{margin: 32px 0 16px 0; padding: 24px 0; font-size: 15px; background: #f9f9f9; color: #777} #payment_sec .art_1 .info_txt > div{width: fit-content; margin: 0 auto;} #payment_sec .art_1 .info_txt > div + div{margin-top: 8px} #payment_sec .art_1 .info_txt .name_tit{letter-spacing: -1px} #payment_sec .art_1 .info_txt .name_tit::after{content: ': '; margin: 0 5px} #payment_sec .art_1 .btn_box{} #payment_sec .art_1 .btn_box::after{content: ''; display: block; clear: both} #payment_sec .art_1 .btn_box button{float: left; width: calc((100% / 2) - 4px); height: 45px; border-radius: 4px;} #payment_sec .art_1 .btn_box .benefits{background: #534f4b; color: #fff} #payment_sec .art_1 .btn_box .load{margin-left: 8px; background: #534f4b; color: #fff} #payment_sec .art_1 .btn_box .apply{width: 100%; margin-top: 8px; background: #8a51ff; color:#fff;} #payment_sec .art_2 .wrapper{} #payment_sec .art_2 .wrapper > table{margin: unset} #payment_sec .art_2 .wrapper > table + table{margin-top: 24px} #payment_sec .art_2 .wrapper th, #payment_sec .art_2 .wrapper td{padding: 16px 6px; word-break: keep-all; letter-spacing: -1px} #payment_sec .art_2 .wrapper .tit{color: #fff} #payment_sec .art_2 .table_div{} #payment_sec .art_2 .table_div + .table_div{margin-top: 32px} #payment_sec .art_2 .table_div .tit{padding: 16px 6px; text-align: center} #payment_sec .art_2 .table_div.Inicis .tit{background: #44227a} #payment_sec .art_2 .table_div.toss .tit{background: #001154} #payment_sec .art_2 .table_div.korea_buy .tit{background: #0b7ba6} #payment_sec .art_2 .table_div .tbody{text-align: center; border-bottom: 1px solid #ededed; font-size: 14px} #payment_sec .art_2 .table_div .tbody::after{content: ''; display: block; clear: both} #payment_sec .art_2 .table_div .tbody > div{float: left; width: calc(100% / 2)} #payment_sec .art_2 .table_div .tbody > div:nth-of-type(n + 3){width: calc(100% / 3)} #payment_sec .art_2 .table_div .tbody > div:not(:nth-of-type(1), :nth-of-type(3)) .th{position: relative} #payment_sec .art_2 .table_div .tbody > div:not(:nth-of-type(1), :nth-of-type(3)) .th::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 20px); background: #ddd} /*#payment_sec .art_2 .table_div .tbody > div:not(:nth-of-type(1), :nth-of-type(3)) .td{border-left: 1px solid #ddd}*/ #payment_sec .art_2 .table_div .th, #payment_sec .art_2 .table_div .td{padding: 16px 0;} #payment_sec .art_2 .table_div .th{background: #f9f9f9; color: #666} #pg_popup .wrapper{width: 1200px; padding: 24px 16px; border-radius: 15px; background: #fff} #pg_popup .top_tit_box{text-align: center; } #pg_popup .top_tit_box .tit{font-size: 22px} #pg_popup .top_tit_box .bot{margin-top: 14px; font-size: 14px; line-height: 19px; word-break: keep-all;} #pg_popup .wri_date_wrap{margin-top: 40px} #pg_popup .wri_date_wrap .img_box{text-align: center} #pg_popup .wri_date_wrap .img_box img{width: 140px} #pg_popup .wri_date_wrap .img_box figcaption{margin-top: 8px} #pg_popup .wri_date_wrap .img_box ~ .table_div{margin-top: 40px} #pg_popup .table_div{text-align: center; font-size: 14px;} #pg_popup .table_div::after{content: ''; display: block; clear: both} #pg_popup .table_div > div{float: left; width: calc(100% / 3)} #pg_popup .table_div > div:nth-of-type(n + 4){width: calc(100% / 2)} #pg_popup .table_div > div:not(:nth-of-type(1), :nth-of-type(4)) .td{position: relative} #pg_popup .table_div > div:not(:nth-of-type(1), :nth-of-type(4)) .td::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100% - 40px); background: #ededed} #pg_popup .table_div .th, #pg_popup .table_div .td{} #pg_popup .table_div .th{padding: 15px 0; background: #f1f1f1;} #pg_popup .table_div .td{padding: 22px 0;} @media screen and (max-width: 500px){ #payment_sec .art_1 > div{width: 100%} } /*보도자료 자동 송출*/ #sub_press_wrap{padding: 40px 16px 80px 16px} #sub_press_sec article:not(:first-of-type){display: none} #sub_press_sec article > .bullet_box{margin-top: 16px; text-align: center} #sub_press_sec .top_title{margin-bottom: 55px; text-align: center} #sub_press_sec .top_title h2{font-size: 23px} #sub_press_sec .top_title .bot{margin-top: 8px; font-size: 15px; color: #888} #sub_press_sec .tab_box{display: table; width: 100%} #sub_press_sec .tab_box button{display: table-cell; vertical-align: bottom; width: calc(100% / 2); height: 50px; border-radius: 10px 10px 0 0; opacity: 50%; background: #f1f1f1} #sub_press_sec .tab_box button.on{height: 60px; opacity: 100%; background: #8a51ff; color: #fff} #sub_press_sec .tab_box button.on b{color: #fff} #sub_press_sec .list_wrapper{} #sub_press_sec .list_wrapper > li{padding: 24px 16px; border-radius: 0 0 10px 10px ; border: 1px solid #ededed;} #sub_press_sec .list_wrapper .top_info{margin-bottom: 16px; text-align: right; font-size: 12px; color: #888} #sub_press_sec .list_wrapper .top_tit{} #sub_press_sec .list_wrapper .top_tit > .tit{padding: 12px 25px; border-radius: 25px; text-align: center} #sub_press_sec .list_wrapper .top_tit > .bot{margin-top: 12px; font-size: 14px; word-break: keep-all;} #sub_press_sec .list_wrapper .top_tit > .price{margin-top: 26px; font-size: 17px} #sub_press_sec .list_wrapper > li.slide_1 .top_tit > .tit{background: #f2f2ff; color: #5f65db} #sub_press_sec .list_wrapper > li.slide_2 .top_tit > .tit{background: #f3e8ff; color: #9f0dd5} #sub_press_sec .list_wrapper .price_box{display: flex; justify-content: space-between; align-items: flex-start; margin-top: 26px} #sub_press_sec .list_wrapper .price_box .price{} #sub_press_sec .list_wrapper .price_box button{padding: 8px 16px; border-radius: 5px; } #sub_press_sec .list_wrapper .pay_info{margin-top: 10px; padding: 16px; border-radius: 5px; font-size: 14px; text-align: center; background: #fafafa} #sub_press_sec .list_wrapper .pay_info .bot{margin-top: 10px; word-break: break-all; } #sub_press_sec .list_wrapper .link_btn{margin-top: 32px; padding: 12px 0; width: 100%; text-align: center; font-size: 14px; background: #fafafa; color: #888;} #sub_press_sec .list_wrapper .link_btn .fa-arrow{margin-left: 5px; font-size: 12px} #sub_press_sec .info_list{margin-top: 12px; padding-top: 12px; border-top: 1px solid #ededed; font-size: 14px} #sub_press_sec .info_list > li{} #sub_press_sec .info_list > li + li{margin-top: 8px} #sub_press_sec .info_list > li::after{content: ''; display: block; clear: both} #sub_press_sec .info_list span{float: left} #sub_press_sec .info_list .two_num a + a::before{content: '/ '} #sub_press_sec .info_list .tit{width: 80px; letter-spacing: -1px; color: #888} #sub_press_sec .info_list .txt{width: calc(100% - 80px)} /*검색엔진 사이트 등록*/ #search_engine_sec{padding: 40px 16px 80px 16px} #search_engine_sec .this_top_title{text-align: center} #search_engine_sec .this_top_title .title{font-size: 23px} #search_engine_sec .this_top_title .bot{margin-top: 8px; font-size: 15px} #search_engine_sec .inner_wrapper{margin-top: 32px;} #search_engine_sec .inner_wrapper .info_txt{margin-top: 14px; font-size: 14px; color: #999} #search_engine_sec .inner_wrapper .info_txt p{position: relative; padding-left: 12px} #search_engine_sec .inner_wrapper .info_txt p + p{margin-top: 14px} #search_engine_sec .inner_wrapper .info_txt p::before{content: '※'; position: absolute; left: 0; top: 0} #search_engine_sec .tab_btn{overflow: hidden; border-radius: 5px 5px 0 0} #search_engine_sec .tab_btn::after{content: ''; display: block; clear: both} #search_engine_sec .tab_btn .this_btn{float: left; width: calc(100% / 2); height: 50px; opacity: 50%; background: #fafafa} #search_engine_sec .tab_btn .this_btn.on{opacity: 100%; background: #8a51ff; color: #fff} #search_engine_sec .tab_list{} #search_engine_sec .tab_list > li{padding: 16px; border: 1px solid #ededed} #search_engine_sec .tab_list > li:not(:first-of-type){display: none} #search_engine_sec .tab_list > li.type_1{} #search_engine_sec .tab_list > li.type_1 .tag_title{background: #f2f2ff; color: #5f65db} #search_engine_sec .tab_list > li.type_1 .link_btn{background: #5f65db; color: #fff} #search_engine_sec .tab_list > li.type_2{} #search_engine_sec .tab_list > li.type_2 .tag_title{background: #f3e8ff; color: #9f0dd5} #search_engine_sec .tab_list > li.type_2 .link_btn{background: #9f0dd5; color: #fff} #search_engine_sec .tab_list .tag_title{padding: 16px 0; border-radius: 32px; text-align: center; } #search_engine_sec .tab_list .price_data{margin: 24px 0 16px 0; padding-bottom: 16px; border-bottom: 1px solid #ededed} #search_engine_sec .tab_list .price_data .price{} #search_engine_sec .tab_list .price_data .info{font-size: 14px; color: #888} #search_engine_sec .tab_list .content_wri{padding: 16px; font-size: 14px; background: #fafafa} #search_engine_sec .tab_list .content_wri dl{} #search_engine_sec .tab_list .content_wri dl + dl{margin-top: 16px} #search_engine_sec .tab_list .content_wri dl dt{margin-bottom: 3px} #search_engine_sec .tab_list .content_wri dl dd{padding-left: 3px} #search_engine_sec .tab_list .content_wri dl dd::before{content: '·'; margin-right: 5px;} #search_engine_sec .tab_list .link_btn{width: 100%; padding: 14px 0; margin-top: 16px; border-radius: 3px; text-align: center; font-size: 14px;} /*마이페이지*/ #my_service_sec{padding: 40px 16px;} #my_service_sec:has(.mypage_has_all){background: #fafafa} #my_service_sec:has(.all_mypage_pay){padding: 40px 16px 0 16px; background: #fafafa} .all_mypage_pay .order_step_box, .mypage_has_all .order_step_box{margin-bottom: 24px} .mypage_main_wrap .custum_info_top ~ .mypage_div_wrap{margin-top: 40px} .mypage_main_wrap .mypage_div{} .mypage_main_wrap .mypage_div + .mypage_div{margin-top: 60px; padding-top: 60px; border-top: 1px solid #c8c8c8} .mypage_main_wrap .mypage_div:first-of-type{padding-top: unset} .mypage_main_wrap .mypage_div:last-of-type{padding-bottom: unset} .mypage_main_wrap .top_title h4{font-size: 25px; margin-bottom: 40px} .mypage_main_wrap .page_data{display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 14px} .mypage_main_wrap .page_data .now{color: #ed7822} .mypage_main_wrap .page_data p{color: #999} .mypage_main_wrap .page_data .page{} .mypage_main_wrap .page_data .page i + i::before{content: '/'} .mypage_main_wrap .mypage_div .wrapper > li{position: relative; padding: 16px; border-radius: 10px; border: 1px solid #d7d5d5; background: #fff} .mypage_main_wrap .mypage_div .wrapper > li + li{margin-top: 32px} .mypage_main_wrap .mypage_div .wrapper > li > div{} .mypage_main_wrap .mypage_div .wrapper > li > div + div{margin-top: 16px;} .mypage_main_wrap .clear_btn{display: block; margin-top: 22px; padding: 16px 0; border-radius: 3px; font-size: 14px; text-align: center; background: #ed7822; color: #fff} .mypage_main_wrap .py_status{text-align: right} .mypage_main_wrap .py_status_1{color: #ff0000} .mypage_main_wrap .py_status_2{color: #007d0b} .mypage_main_wrap .py_status_3{color: #0000ff} .mypage_main_wrap .py_status_4{color: #b1b1b1} .mypage_main_wrap .py_status_5{color: #ff0000} .mypage_main_wrap .py_status_6{color: #007d0b} .mypage_main_wrap .my_domain, #my_service_sec .mypage_main_wrap .my_id{padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ededed; text-align: center} .mypage_main_wrap .my_domain .link{text-decoration: underline; font-size: 14px} .mypage_main_wrap .my_id .id{font-size: 14px} .mypage_main_wrap .my_domain .id_setting{margin-top: 16px; font-size: 14px} .mypage_main_wrap .my_domain .id_setting span + span::before{content: '|'; margin: 0 5px; color: #dfdfdf} .mypage_main_wrap .clear_date{font-size: 12px} .mypage_main_wrap .clear_date::after{content: ''; display: block; clear: both} .mypage_main_wrap .clear_date span{float: left; width: calc((100% / 2) - 8px); padding: 10px 0; border-radius: 32px; text-align: center; background: #f1f1f1; color: #616161} .mypage_main_wrap .clear_date span:nth-of-type(2n){float: right} .mypage_main_wrap .buy_as{font-size: 14px} .mypage_main_wrap .basic_data .box{font-size: 14px} .mypage_main_wrap .service_data{margin-top: 32px !important; text-align: right} .mypage_main_wrap .service_data .tit::after{content: '-'; display: block;} .mypage_main_wrap .service_data .box{font-size: 14px} .mypage_main_wrap .service_data .box > div + div{} .mypage_main_wrap .service_data .tag{ font-size: 12px} .mypage_main_wrap .service_data .tag span{margin-top: 8px; padding: 2px 10px; border-radius: 4px; background: #8a51ff; color: #fff} .mypage_main_wrap .service_data .tag span + span{margin-left: 2px} .mypage_main_wrap .apply_pay{} .mypage_main_wrap .apply_pay .box{font-size: 14px} .mypage_main_wrap .apply_pay .name{font-size: 12px; color: #777} .mypage_main_wrap .apply_pay .name::after{content: ':'; margin: 0 5px} .mypage_main_wrap .apply_pay .data{} .mypage_main_wrap .service_day_date{text-align: center} .mypage_main_wrap .service_day_date .tit_n::after{content: '-'; display: block} .mypage_main_wrap .service_day_date .tit_n ~ .box{margin-top: 10px;} .mypage_main_wrap .service_day_date .box{font-size: 14px} .mypage_main_wrap .service_day_date .year{color: #ed7822} .mypage_main_wrap .service_day_date .start_end{margin-top: 12px; } .mypage_main_wrap .service_day_date .start_end::after{content: ''; display: block; clear: both} .mypage_main_wrap .service_day_date .start_end span{float: left; width: calc((100% / 2) - 6px); padding: 10px 0; border-radius: 32px; text-align: center; background: #f1f1f1; color: #616161} .mypage_main_wrap .service_day_date .start_end span + span{margin-left: 12px;} .mypage_main_wrap .clear_condition{text-align: right} .mypage_main_wrap .clear_condition .tit{position: relative; color: #bbb} .mypage_main_wrap .clear_condition .tit::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(100% - 70px); height: 1px; background: #e5e5e5} .mypage_main_wrap .clear_condition span{margin-top: 10px;} .mypage_main_wrap .clear_condition .data{color: #ed7822} /* mypage > 도메인관리 add by dev */ .mypage_main_wrap .extend_condition{text-align: right;height:40px;} .mypage_main_wrap .extend_condition .tit{position: relative; color: #bbb} .mypage_main_wrap .extend_condition .tit::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(100% - 70px); height: 1px; background: #e5e5e5} .mypage_main_wrap .extend_condition span{margin-top: 10px;} .mypage_main_wrap .extend_condition span.chk {display:block;float:left} .mypage_main_wrap .extend_condition span.select {display:block;float:right} .mypage_main_wrap .extend_condition span label {font-size:14px;margin-right:5px} .mypage_main_wrap .extend_condition .data{color: #ed7822} .mypage_main_wrap .extend_condition{ text-align:left;} .choice_btn{text-align:center} .choice_btn .btn{padding: 8px 24px; border-radius: 3px; font-size: 14px} .choice_btn .clear{background: #8a51ff; color: #fff} .choice_btn .link{background: #fff; color: #000;border:1px solid #cdcdcd} .mypage_main_wrap .ex_btn{width: 100%; margin-top: 4px; padding: 12px 0; border-radius: 3px; text-align: center; font-size: 14px; } .mypage_main_wrap .domain_apply{border: 1px solid #ededed; font-size: 14px; background: #dbdbdb; color: #595959} .mypage_main_wrap .ftp_ch_btn{background: #888; color: #fff} .mypage_main_wrap .btn_box{display: grid; gap: 4px; text-align: center} .mypage_main_wrap .btn_box .btn{padding: 12px 0; border: 1px solid #ededed; font-size: 14px; background: #fff; color: #444} .mypage_main_wrap .upgrade_info{margin-top: 16px; font-size: 14px; text-align: right} .mypage_main_wrap .service_db{margin-top: 16px; padding: 16px; background: #fafafa;} .mypage_main_wrap .service_db > div + div{margin-top: 32px} .mypage_main_wrap .service_db .tit::before{content: '|'; margin-right: 5px} .mypage_main_wrap .service_db .tit ~ .box{margin-top: 8px} .mypage_main_wrap .buy_data{} .mypage_main_wrap .buy_data .box p{} .mypage_main_wrap .buy_data .box p > span{vertical-align: middle} .mypage_main_wrap .buy_data .name{font-size: 12px; color: #777} .mypage_main_wrap .buy_data .name::after{content: ':'; margin: 0 5px} .mypage_main_wrap .buy_data .data{} .mypage_main_wrap .wri_data{text-align: center} .mypage_main_wrap .wri_data .title::after{content: '-'; display: block; } .mypage_main_wrap .wri_data .box{margin-top: unset; padding: 16px; border-radius: 8px; font-size: 14px; background: #f1f1f1} /*****************************/ .mypage_main_wrap .hp_div_1 .order_data{} .mypage_main_wrap .hp_div_1 .order_data .tag_box{font-size: 14px} .mypage_main_wrap .hp_div_1 .order_data .tag_box::after{content: ''; display: block; clear: both} .mypage_main_wrap .hp_div_1 .order_data .tag_box .tag{padding: 4px 10px; border-radius: 3px; background: #fafafa} .mypage_main_wrap .hp_div_1 .order_data .tag_box .type_tag{float: right} .mypage_main_wrap .hp_div_1 .order_data .tag_box .hs_tag{float: left; background: #555; color: #fff} .mypage_main_wrap .hp_div_1 .order_data .tag_box .buy_tag{background: #8a51ff; color: #fff} .mypage_main_wrap .hp_div_1 .order_data .tag_box .rent_tag{background: #ff5f00; color: #fff} .mypage_main_wrap .hp_div_1 .order_data .tag_box ~ .num_box{margin-top: 32px} .mypage_main_wrap .hp_div_1 .order_data .num_box{text-align: right; font-size: 14px} .mypage_main_wrap .hp_div_1 .order_data .num_box > p + p{margin-top: 4px} .mypage_main_wrap .hp_div_1 .page_wrapper{ padding: 16px; border: 1px solid #ededed; background: #fafafa} .mypage_main_wrap .hp_div_1 .home_name{display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #ddd;} .mypage_main_wrap .hp_div_1 .home_name .info_popup_btn{padding: 2px 12px; border-radius: 3px; font-size: 12px; background: #8a51ff; color: #fff;} .mypage_main_wrap .hp_div_1 .pay_info_data{text-align: right; font-size: 14px} .mypage_main_wrap .hp_div_1 .buy_day .box{color: #777} .mypage_main_wrap .hp_div_1 .service_day_n{} .mypage_main_wrap .hp_div_1 .service_day_n .data_wri{text-align: center;} .mypage_main_wrap .hp_div_1 .service_day_n .data_wri ~ .start_end, .mypage_main_wrap .hp_div_1 .service_day_n .data_wri ~ .ready_tag{margin-top: 10px} .mypage_main_wrap .hp_div_1 .service_day_n .tag_box{width: 100%; padding: 12px 0; border-radius: 24px; text-align: center; font-size: 14px; background: #f1f1f1; color: #616161;} .mypage_main_wrap .hp_div_1 .service_day_n .start_end{} .mypage_main_wrap .hp_div_1 .service_day_n .start_end::after{content: ''; display: block; clear: both} .mypage_main_wrap .hp_div_1 .service_day_n .start_end .tag_box{float: left; width: calc((100% / 2) - 5px)} .mypage_main_wrap .hp_div_1 .service_day_n .start_end .end{margin-left: 10px} /************************************/ .mypage_main_wrap .hp_div_2 .clear_condition > div{display: flex; justify-content: space-between; align-items: center} /************************************/ .mypage_main_wrap .ht_div_1{display: block} .mypage_main_wrap .ht_div_1 .info_data{text-align: right} .mypage_main_wrap .ht_div_1 .info_data .tag{padding: 3px 12px; border-radius: 3px; font-size: 14px; color: #fff} .mypage_main_wrap .ht_div_1 .info_data .rent_tag{background: #ff8329;} .mypage_main_wrap .ht_div_1 .info_data .act_tag{background: #8a51ff} .mypage_main_wrap .ht_div_1 .info_data .sett_tag {background: #308f00} .mypage_main_wrap .ht_div_1 .clear_data{text-align: center; font-size: 12px} .mypage_main_wrap .ht_div_1 .clear_data::after{content: ''; display: block; clear: both} .mypage_main_wrap .ht_div_1 .clear_data span{margin-top: 8px; padding: 8px 0; border-radius: 36px; background: #f1f1f1; color: #616161} .mypage_main_wrap .ht_div_1 .clear_data .time{float: left; width: calc((100% / 2) - 8px)} .mypage_main_wrap .ht_div_1 .clear_data .time:nth-of-type(2n){float: right} .mypage_main_wrap .ht_div_1 .clear_data .time:nth-of-type(2){color: #ed7822} .mypage_main_wrap .ht_div_1 .clear_data .ready{width: 100%} .mypage_main_wrap .ht_div_1 .clear_data .d_day{width: 100%} .mypage_main_wrap .ht_div_2 .service_db .acount{font-size: 14px} .mypage_main_wrap .ht_div_2 .service_db .acount::after{content: '-'; display: block} #my_service_sec .ht_div_2 table{margin: unset} /************************************/ #hp_list_art{} #hp_list_art .ftp_ch_btn{width: 100%; padding: 6px 0; margin-top: 32px; border-radius: 24px; text-align: center; font-size: 14px; background: #8a51ff; color: #fff} /************************************/ #sms_art .sms_tag{margin-bottom: 24px; padding: 2px 12px; border-radius: 3px; text-align: right; font-size: 14px; background: #ed7822; color: #fff} #sms_art .sms_start{text-align: center; font-size: 13px} #sms_art .sms_start span{width: 100%; padding: 10px 0; border-radius: 32px; background: #f1f1f1; color: #616161} /************************************/ #my_service_sec .rf_art_1 > div{} #sms_inquiry_art .tab_box{text-align: center; font-size: 14px} #sms_inquiry_art .tab_box::after{content: ''; display: block; clear: both} #sms_inquiry_art .tab_box span{float: left; width: calc((100% / 2) - 5px); padding: 16px 0; border-radius: 5px; background: #fafafa; color: #777} #sms_inquiry_art .tab_box span + span{margin-left: 10px} #sms_inquiry_art .tab_box span.sel_class{background: #8a51ff; color: #fff} #sms_inquiry_art .find_sms_txt{margin-top: 16px; text-align: right; font-size: 14px} #sms_inquiry_art .find_sms_txt::before{content: '\f002'; margin-right: 5px; font-family:FontAwesome; font-size: 12px} #sms_inquiry_art .wrapper{margin-top: 32px} #sms_inquiry_art .sms_user_time{text-align: center;} #sms_inquiry_art .sms_user_time .title::after{content: '-'; display: block; } #sms_inquiry_art .sms_user_time .name{} #sms_inquiry_art .sms_user_time .tit{text-align: left} #sms_inquiry_art .sms_user_time .box{margin-top: 24px} #sms_inquiry_art .sms_user_time .box::after{content: ''; display: block; clear: both} #sms_inquiry_art .sms_user_time .box > div{float: left; width: calc((100% / 2) - 8px); } #sms_inquiry_art .sms_user_time .box > div:nth-of-type(2n){margin-left: 16px} #sms_inquiry_art .sms_user_time .data{width: 100%; padding: 10px 0; margin-top: 8px; border-radius: 32px; font-size: 12px; background: #f1f1f1;} #my_service_sec .apply_art_1{} #sms_inquiry_art ~ .find_sms_inqury .tit{margin-bottom: 8px} #sms_inquiry_art ~ .find_sms_inqury .new_days > div + div{margin-top: 8px} #sms_inquiry_art ~ .find_sms_inqury .new_days .day_box{display: flex; justify-content: space-between; align-items: center} #sms_inquiry_art ~ .find_sms_inqury .new_days .day_box select{width: calc((100% / 2) - 20px)} #sms_inquiry_art ~ .find_sms_inqury .new_user::after{content: ''; display: block; clear: both} #sms_inquiry_art ~ .find_sms_inqury .new_user .user_input{float: left} #sms_inquiry_art ~ .find_sms_inqury .new_user .user_input + .user_input{margin-left: 5px} #sms_inquiry_art ~ .find_sms_inqury .new_user select{width: 110px;} #sms_inquiry_art ~ .find_sms_inqury .new_user input[type="text"]{width: calc((100% - 110px) - 5px)} /************************************/ .my_sms_info{width: calc(100% - 600px); margin: 0 auto; padding: 16px; border-radius: 10px; background: #fff} .my_sms_info > li + li{margin-top: 24px} .my_sms_info .data_box{display: flex; justify-content: space-between; align-items: center; font-size: 14px} .my_sms_info .data_box .tag{padding: 3px 20px; border-radius: 3px; color: #fff} .my_sms_info .data_box .app_date{} .my_sms_info .data_box .type{background: #ed7822} /************************************/ #sms_charge .wrapper{display: flex; justify-content: center; flex-wrap: wrap; gap: 37px} #sms_charge .wrapper > li{width: calc((100% / 3) - 25px); padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);} #sms_charge .wrapper > li.active{} #sms_charge li.box_light.active{border: 1px solid #333} #sms_charge li.box_standard.active{border: 1px solid #8a51ff} #sms_charge li.box_business.active{border: 1px solid #f96464} #sms_charge li.box_premium.active{border: 1px solid #fa6c3f} #sms_charge li.box_platinum.active{border: 1px solid #0fad96} #sms_charge .wrapper .tag{width: 105px; margin: 0 auto; padding: 8px 0; border-radius: 120px; border: 1px solid; font-size: 13px} #sms_charge .wrapper .price{margin-top: 20px; letter-spacing: -1px;} #sms_charge .box_standard .tag{border-color: #623ad6; background: #f8f6ff; color: #623ad6;} #sms_charge .box_business .tag{border-color: #f96464; background: #fff8f8; color: #f96464;} #sms_charge .box_premium .tag{border-color: #fa6c3f; background: #fffaf9; color: #fa6c3f;} #sms_charge .box_platinum .tag{border-color: #0fad96; background: #f3fdfc; color: #0fad96;} #sms_charge .wrapper .wri_date{padding: 20px 0; margin: 20px 0;border-top: 1px solid #ededed; font-size: 14px;color: #616161} #sms_charge .wrapper .wri_date > p + p{margin-top: 4px} #sms_charge .wrapper .ch_box{} #sms_charge .wrapper .ch_box input[type="radio"]{display: none} #sms_charge .wrapper .ch_box .btn{display: block; padding: 12px 0; border-radius: 3px; border: 1px solid; background: #f9f9f9;} #sms_charge li:not(.box_light) .ch_box .btn{color: #fff} #sms_charge .box_standard .ch_box .btn{border-color:#623ad6; background: #623ad6} #sms_charge .box_business .ch_box .btn{border-color:#f96464; background: #f96464} #sms_charge .box_premium .ch_box .btn{border-color:#fa6c3f; background: #fa6c3f} #sms_charge .box_platinum .ch_box .btn{border-color:#0fad96; background: #0fad96} /************************************/ #my_service_sec .apply_art_1{min-height: 100vh} #my_service_sec .apply_art_1 .choice{text-align: center} #my_service_sec .apply_art_1 .choice > span{position: relative;} #my_service_sec .apply_art_1 .choice > span + span::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30%; background: #ddd} #my_service_sec .apply_art_1 .choice > span:first-of-type{padding-right: 15px} #my_service_sec .apply_art_1 .choice > span:last-of-type{padding-left: 15px} #my_service_sec .apply_art_1 .choice > span:not(:first-of-type, last-of-type){padding: 0 15px;} #my_service_sec .apply_art_1 .days{display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 45px; text-align: center} #my_service_sec .apply_art_1 .days input[type='radio']{display: none} #my_service_sec .apply_art_1 .days label{width: 75px; padding: 5px 0; border-radius: 3px; border: 1px solid #ddd; font-size: 12px; color: #696969} #my_service_sec .apply_art_1 .days input[type='radio']:checked ~ label{font-size: 14px; background: #8a51ff; color: #fff} /************************************/ #ht_art .top_type_tag{position: absolute; right: 16px; top: 16px; padding: 2px 8px; ; border-radius: 3px; color: #fff} #ht_art .top_type_tag.rent{background: #ff8329} #ht_art .top_type_tag.buy{background: #333} #ht_art .ht_div_1 .wrapper > li{padding-top: calc(40px + 16px)} /************************************/ #tax_form_art input[type="text"]{width: 100%} #tax_form_art .wrapper > li + li{margin-top: 16px} #tax_form_art .bot_txt{margin-top: 2px; color: #888} #tax_form_art .top_wri .service_top{margin-bottom: 55px; text-align: center} #tax_form_art .top_wri .service_top .title{width: 90%; margin: 0 auto; position: relative;} #tax_form_art .top_wri .service_top .title strong{padding: 0 16px; background: #fff} #tax_form_art .top_wri .service_top .box::before{content: '-'; display: block; color: #b5b5b5;} #tax_form_art .top_wri .service_top .box{} #tax_form_art .top_wri .service_top .type_url{ padding: 8px; border-radius: 100px; border: none; text-align: center; word-break: keep-all; background: #8a51ff;; color: #fff; } #tax_form_art .top_wri ~ div{margin-top: 44px} #tax_form_art .top_wri .top_info_txt{margin-bottom: 6px; font-size: 13px; text-align: right; color: #666} #tax_form_art .top_wri .top_title ~ div{margin-top: 24px} #tax_form_art .top_wri .wrapper > li::after{content: ''; display: block; clear: both} #tax_form_art .top_wri .wrapper .tit, #tax_form_art .top_wri .wrapper .date_insert{} #tax_form_art .top_wri .wrapper .tit{} #tax_form_art .top_wri .wrapper .tit ~ .date_insert{margin-top: 5px} #tax_form_art .top_wri .wrapper .tit ~ div::after, #tax_form_art .top_wri .wrapper .tit ~ span::after{content: ''; display: block; clear: both} #tax_form_art .top_wri .wrapper .pay_insert select, #tax_form_art .top_wri .wrapper .pay_insert input[type="text"]{float: left} #tax_form_art .top_wri .wrapper .pay_insert select{width: 110px} #tax_form_art .top_wri .wrapper .pay_insert input[type="text"]{width: calc((100% - 110px) - 4px); margin-left: 4px;} #tax_form_art .top_wri .wrapper .phone_input{display: flex; justify-content: space-between; align-items: center; gap: 0 6px} #tax_form_art .tit ~ .default_box{margin-top: 5px} #tax_form_art .addr_input::after{content: ''; display: block; clear: both} #tax_form_art .addr_input input[type="text"], #my_service_sec .addr_input button{float: left} #tax_form_art .addr_input input[type="text"]{width: calc((100% - 130px) - 5px)} #tax_form_art .addr_input button{width: 130px; height: 40px; margin-left: 5px; border-radius: 5px; background: #333; color: #fff} #tax_form_art .file_box label[for="wf_file"]{width: 110px; text-align: center; background: #333; color: #fff} #tax_form_art .file_box label[for="wf_file"], #my_service_sec .file_box .file{vertical-align: middle; height: 40px; border-radius: 5px; border: 1px solid #cacaca; line-height: 40px; font-size: 14px;} #tax_form_art .file_box .file{width: calc((100% - 110px) - 5px); padding: 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff; color: #888} /************************************/ #tax_art .apply_service{text-align: center} #tax_art .apply_service .title::after{content: '-'; display: block; } #tax_art .apply_service a{display: block; margin-top: 8px; padding: 15px 0; border-radius: 32px; font-size: 14px; background: #8a51ff; color: #fff} #tax_art .clear_condition .tit ~ div{display: flex; justify-content: space-between; align-items: center} #tax_art .clear_condition .day{font-size: 13px; color: #666} #tax_art .clear_condition .condition{color: #ed7822} #tax_art .enter_date{overflow: hidden; border-radius: 5px 5px 0 0} #tax_art .enter_date .enter_tit{padding: 12px 16px; background: #f1f1f1; color: #494949} #tax_art .enter_date .enter_list{font-size: 14px} #tax_art .enter_date .enter_list > li{display: table; width: 100%; border-bottom: 1px solid #ededed} #tax_art .enter_date .enter_list > li span{display: table-cell; vertical-align: middle} #tax_art .enter_date .enter_list .name{width: 70px; padding: 12px 8px; text-align: center; background: #f1f1f1; color: #666} #tax_art .enter_date .enter_list .text{padding: 12px 0 12px 8px} #tax_art .total_price{padding-top: 24px; border-top: 1px solid #bbb} #tax_art .total_price::after{content: ''; display: block; clear: both} #tax_art .total_price .name{float: left; color: #666} #tax_art .total_price .price{float: right} /**********/ #tax_popup{max-height: calc(100vh - 90px); overflow-x: hidden; overflow: auto} #tax_popup .att_service{text-align: center} #tax_popup .att_service .tit::after{content: '-'; display: block} #tax_popup .att_service .hp_date{margin-top: 8px; padding: 16px; border-radius: 32px; font-size: 14px; background: #8a51ff; color: #fff} #tax_popup .enter_table{overflow: hidden; border-radius: 5px 5px 0 0} #tax_popup .enter_table .enter_tit{padding: 16px; background: #fafafa; color: #494949} #tax_popup .enter_table .enter_list{} #tax_popup .enter_table .enter_list > li{display: table; width: 100%; border-bottom: 1px solid #ededed} #tax_popup .enter_table .enter_list > li + li{} #tax_popup .enter_table .enter_list > li span{display: table-cell; vertical-align: middle;} #tax_popup .enter_table .enter_list .name{width: 110px; padding: 12px 8px; font-size: 14px; background: #fafafa; color: #888} #tax_popup .enter_table .enter_list .text{padding: 8px 0 8px 8px; font-size: 15px; color: #444} #tax_popup .dev_info{} #tax_popup .dev_info .textarea_div{height: 120px; padding: 8px; border-radius: 5px; border: 1px solid #ededed; overflow-x: hidden; overflow: auto; font-size: 14px} #tax_popup .dev_info .file_date{margin-top: 16px; padding: 6px 16px; border-radius: 5px; border: 1px solid #ededed; background: #fafafa} #tax_popup .dev_info .file_date a{display: block; position: relative; width: 100%; padding-right: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px} #tax_popup .dev_info .file_date a::before{content: '\f019'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family:FontAwesome; color: #888} #tax_popup .total_price{margin-top: 32px; padding-top: 16px; border-top: 1px solid #a5a5a5;} #tax_popup .total_price .price_date{margin-top: 8px} #tax_popup .total_price .price_date::after{content: ''; display: block; clear: both} #tax_popup .total_price .price_date .tit{float: left; color: #888} #tax_popup .total_price .price_date .price{float: right} #tax_popup .close_btn{width: 100%; margin-top: 40px; height: 50px; border-radius: 3px; background: #555; color: #fff} /************************************/ #dif_hs_art{} #dif_hs_art .info_box{} #dif_hs_art .info_box .wrapper{} #dif_hs_art .info_box .wrapper > div{display: table; width: 100%} #dif_hs_art .info_box .wrapper > div + div{margin-top: 16px} #dif_hs_art .info_box .wrapper .name_tit, #dif_hs_art .info_box .wrapper input[type="text"]{display: table-cell; vertical-align: middle} #dif_hs_art .info_box .wrapper .name_tit{width: 75px; font-size: 14px; color: #888} #dif_hs_art .info_box .wrapper input[type="text"]{width: 100%} /************************************/ #ssl_art{} #ssl_art .ssl_clear{margin-top: 16px} #ssl_art .ssl_clear::after{content: ''; display: block; clear: both} #ssl_art .ssl_clear span{float: left; padding: 12px 0; border-radius: 24px; text-align: center; font-size: 14px; background: #f1f1f1; color: #616161} #ssl_art .ssl_clear .first{width: 100%; } #ssl_art .ssl_clear .first ~ span{width: calc((100% / 2) - 4px); margin-top: 8px} #ssl_art .ssl_clear .first ~ span + span{margin-left: 8px} #ssl_order_art{min-height: 100vh;} /************************************/ #real_hosting_info{} #real_hosting_info .inner_back{padding: 16px; border-radius: 5px; background: #fafafa} #real_hosting_info .acount_all{} #real_hosting_info .acount_all .port_info{text-align: right} #real_hosting_info .acount_all .port_info .title{} #real_hosting_info .acount_all .port_info .title::after{content: '-'; display: block} #real_hosting_info .acount_all .port_info .date_box{font-size: 14px} #real_hosting_info .acount_all .port_info .date_box span{} #real_hosting_info .acount_all .port_info .date_box span + span{margin-left: 5px} #real_hosting_info .acount_all .port_info .date_box .tit{color: #999} #real_hosting_info .acount_all .acount_pw_ch_all{margin-top: 16px; padding: 16px; border-radius: 10px; background: #fafafa} #real_hosting_info .acount_all .tab_box{margin-bottom: 19px; padding-bottom: 19px; border-bottom: 1px solid #ededed} #real_hosting_info .acount_all .tab_box::after{content: ''; display: block; clear: both} #real_hosting_info .acount_all .tab_box button{float: left; width: calc((100% / 2) - 3px); height: 35px; border-radius: 3px; font-size: 12px; color: #666} #real_hosting_info .acount_all .tab_box button.on{background: #8a51ff; color: #fff} #real_hosting_info .acount_all .tab_box button + button{margin-left: 6px} #real_hosting_info .acount_all .com_pw_ch_box{} #real_hosting_info .acount_all .com_pw_ch_box > div{display: table; width: 100%} #real_hosting_info .acount_all .com_pw_ch_box > div + div{margin-top: 10px} #real_hosting_info .acount_all .com_pw_ch_box > div > span{display: table-cell; vertical-align: middle} #real_hosting_info .acount_all .com_pw_ch_box > button[type="button"]{width: 100%; height: 40px; margin-top: 20px; border-radius: 3px; background: #555; color: #fff} #real_hosting_info .acount_all .com_pw_ch_box .tit{width: 85px; font-size: 14px; color: #888} #real_hosting_info .acount_all .com_pw_ch_box .date{width: calc(100% - 100px)} #real_hosting_info .acount_all .com_pw_ch_box .date input:not([type="checkbox"], [type="radio"]){width: 100%} #real_hosting_info .acount_all .com_pw_ch_box + .com_pw_ch_box{display: none} #real_hosting_info .acount_info_all{} #real_hosting_info .acount_info_all .wrapper{} #real_hosting_info .acount_info_all .wrapper > div{display: table; width: 100%} #real_hosting_info .acount_info_all .wrapper > div + div{margin-top: 5px} #real_hosting_info .acount_info_all .wrapper .tit, #real_hosting_info .acount_info_all .wrapper input[type="text"]{display: table-cell; vertical-align: middle} #real_hosting_info .acount_info_all .wrapper .tit{width: 50px; font-size: 14px} #real_hosting_info .acount_info_all .wrapper input[type="text"]{width: 100%} #real_hosting_info .acount_info_all .wrapper button[type="submit"]{width: 100%; height: 40px; margin-top: 16px; border-radius: 3px; background: #555; color: #fff} #real_hosting_info .domain_apply_all{} #real_hosting_info .domain_apply_all .top_title{display: flex; justify-content: space-between; align-items: center} #real_hosting_info .domain_apply_all .top_title button[type="button"]{padding: 3px 12px; border-radius: 3px; background: #8a51ff; color: #fff} #real_hosting_info .domain_apply_all .radio_box{text-align: center} #real_hosting_info .domain_apply_all .radio_box > span{} #real_hosting_info .domain_apply_all .radio_box > span + span{margin-left: 22px} #real_hosting_info .domain_apply_all .inner_back{margin-top: 16px} #real_hosting_info .domain_apply_all .inner_back button{width: 100%; height: 40px; margin-top: 10px; border-radius: 3px; background: #555; color: #fff} #real_hosting_info .current_domain_all{max-height: calc(100vh - 210px); overflow: auto;} #real_hosting_info .current_domain_all .top_title{display: flex; justify-content: space-between; align-items: center} #real_hosting_info .current_domain_all .top_title button.close{font-size: 16px; background: transparent; color: #777;} #real_hosting_info .current_domain_all .wrapper{} #real_hosting_info .current_domain_all .wrapper > li{padding: 16px; border-radius: 5px; border: 1px solid #ededed} #real_hosting_info .current_domain_all .dn_type_tag{float: right; margin-bottom: 10px; padding: 4px 18px; border-radius: 12px; font-size: 12px;} #real_hosting_info .current_domain_all .dn_type_tag.fr{background: #8a51ff; color: #fff} #real_hosting_info .current_domain_all .inner_wrapper{clear: both; padding: 16px; border-radius: 5px; text-align: center; background: #fafafa} #real_hosting_info .current_domain_all .domain{margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #ededed} #real_hosting_info .current_domain_all .domain .tit{} #real_hosting_info .current_domain_all .domain .data{margin-top: 2px; text-decoration: underline; font-size: 14px; color: #333;} #real_hosting_info .current_domain_all .day_date{} #real_hosting_info .current_domain_all .day_date .tit{} #real_hosting_info .current_domain_all .day_date .tit::after{content: '-'; display: block} #real_hosting_info .current_domain_all .day_date .day{padding: 12px 0; border-radius: 24px; text-align: center; font-size: 14px; background: #f1f1f1; color: #616161} @media screen and (max-width: 1200px){ /*div.container:has(#my_service_sec){padding: 0 1em}*/ /*서비스 연장신청 or 업그래이드*/ #my_service_sec .apply_art .mypage_clear_btn{padding: 8px 1em} #my_service_sec .apply_art .mypage_clear_btn .wrapper{width: 100%;} /*sms 정보 보가*/ #my_service_sec .my_sms_info{width: 100%} } @media screen and (max-width: 750px){ #sms_charge .wrapper > li{width: calc((100% / 2) - 25px);} } @media screen and (max-width: 480px){ #sms_charge .wrapper > li{width: calc(100% / 1);} } /*단독 마이페이지 카드*/ .innercard_wrap{padding: 24px 16px; border-radius: 10px; border: 1px solid #f1f1f1; background: #fff;} .innercard_wrap .inner_point_box{margin-top: 16px; padding: 16px; border-radius: 10px; background: #fafafa} .innercard_wrap .inner_point_box .in_tit::before{content: '|'; margin-right: 5px} .innercard_wrap .card_title{position: relative; padding-bottom: 8px; padding-left: 8px; font-size: 20px} .innercard_wrap .card_title::before{content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #8a51ff} .innercard_wrap .page_date_info{ font-size: 14px; color: #afafaf;} .innercard_wrap .list_wrapper{margin-top: 32px} .innercard_wrap .list_wrapper .list_box{padding: 16px; border-radius: 12px; border: 1px solid #f1f1f1} .innercard_wrap .list_wrapper .list_box + .list_box{margin-top: 16px} .innercard_wrap .clear_condition{text-align: right} .innercard_wrap .clear_condition .tit{position: relative; color: #bbb} .innercard_wrap .clear_condition .tit::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(100% - 70px); height: 1px; background: #e5e5e5} .innercard_wrap .clear_condition span{margin-top: 10px;} .innercard_wrap .clear_condition .py_status_1{color: #ff0000} .innercard_wrap .clear_condition .py_status_2{color: #007d0b} .innercard_wrap .clear_condition .py_status_3{color: #0000ff} .innercard_wrap .clear_condition .py_status_4{color: #b1b1b1} .innercard_wrap .clear_condition .py_status_5{color: #ff0000} .innercard_wrap .clear_condition .py_status_6{color: #007d0b} .innercard_wrap .service_data{margin-top: 32px; text-align: right} .innercard_wrap .service_data .tit::after{content: '-'; display: block;} .innercard_wrap .service_data .box{font-size: 14px} .innercard_wrap .acount_info{padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #ededed; text-align: center} .innercard_wrap .acount_info .tit{margin-bottom: 8px} .innercard_wrap .acount_info .tit ~ *{font-size: 14px} .innercard_wrap .acount_info .id{width: fit-content; margin: 0 auto; padding: 2px 18px; border-radius: 10px; background: #8a51ff; color: #fff} .innercard_wrap .pay_method{margin-top: 16px} .innercard_wrap .pay_method .tag{margin-top: 4px; font-size: 14px} .innercard_wrap .pay_app{margin-top: 16px} .innercard_wrap .pay_app .box{margin-top: 4px} .innercard_wrap .payment_date{display: flex; justify-content: space-between; align-items: flex-start; gap: 0 8px; text-align: center; font-size: 14px; color: #555} .innercard_wrap .payment_date span{flex: 1; padding: 8px 0; border-radius: 16px; background: #ededed} .innercard_wrap .clear_pay{margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed; font-size: 14px} .innercard_wrap .clear_pay .box{text-align: right; } .innercard_wrap .clear_pay .box p:first-of-type{margin-top: 4px} .innercard_wrap .clear_pay .box .gr_oid{color: #a7a7a7} .innercard_wrap .clear_pay .box .gr_oid ~ *{margin-top: 4px} .innercard_wrap .clear_btn{width: 100%; line-height: 40px; margin-top: 10px; border-radius: 3px; text-align: center; font-size: 14px; background: #555; color: #fff} @media screen and (max-width: 400px){ .innercard_wrap .payment_date{flex-direction: column; gap: 4px 0} .innercard_wrap .payment_date span{flex: unset; width: 100%} } /*디테일 페이지*/ .main_detail{overflow: hidden} /* <- 이거 안 써도 되는건데 어딘가가 빵꾸가 뚫여 있음... 도대체 뭐가 문제인지 모르겠네 자존심 상한다. */ .main_detail img{height: auto} .main_detail article:first-of-type{; padding-bottom: 40px; box-shadow: 0px 15px 16px -10px rgb(0 0 0 / 10%)} .main_detail article:not(:first-of-type){padding-top: 40px;} .detail_head{} .detail_head .homepage_view{position: relative} .detail_head .homepage_view .head{position: relative; height: auto} .detail_head .homepage_view .homepage_tag{position: absolute; left: 10px; top: 10px; z-index: 10; padding: 8px 12px; font-size: 12px; background: #7844e6; color: #fff; border-radius: 5px;} .detail_head .homepage_view .wrapper{} .detail_head .homepage_view .wrapper > li{} .detail_head .homepage_view .paging .swiper-pagination-progressbar-fill{background: #8a51ff} .detail_head .homepage_view .wrapper > li img{} .detail_head .homepage_view .paging{left: unset; top: unset; width: 100%; height: 3px} .detail_head .homepage_data{margin-top: 24px;} .detail_head .homepage_data .title_data{display: flex; justify-content: space-between; align-items: center;} .detail_head .homepage_data .title_box{} .detail_head .homepage_data .title_box .title{font-size: 20px} .detail_head .homepage_data .title_box .responsive_tag{margin-top: 4px; font-size: 16px} .detail_head .homepage_data .type_tab{border-radius: 5px; overflow: hidden;} .detail_head .homepage_data .type_tab button{padding: 8px 24px; font-size: 12px; background: #eef0f3;} .detail_head .homepage_data .type_tab button.on{background: #a495d1; color: #fff} #detail_type_news{} #detail_type_news .news_radio_btn{margin-top: 24px} #detail_type_news .news_radio_btn span{} #detail_type_news .news_radio_btn span + span{margin-left: 8px} #detail_type_news .news_radio_btn input[type="radio"], #detail_type_news .news_radio_btn label{vertical-align: middle} #detail_type_news .news_radio_btn input[type="radio"]{position: unset; appearance: none; border: 1px solid gray; width: 12px; height: 12px; border-radius: 50%;} #detail_type_news .news_radio_btn input[type="radio"]:checked{ border: 4px solid tomato;} #detail_type_news .news_radio_btn label{padding: unset; font-size: 14px} #detail_type_news .news_radio_btn label::before, #detail_type_news .news_radio_btn label::after{content: none} .dtail_buy{position: fixed; left:0; bottom: 0; z-index: 10; transition: all 1s; transform: translateY(100vh); width: 100%; padding: 8px;} .dtail_buy.stop{position: absolute} .dtail_buy.active{transform: translateY(0);} .dtail_buy .btn{display: block; width: 100%; padding: 16px 0; border-radius: 5px 5px 0 0; text-align: center; background: #8a51ff; color: #fff;} .detail_head .homepage_data .price_data{margin-top: 20px;} .detail_head .homepage_data .price_data div.com_price:not(:first-of-type){display: none} .detail_head .homepage_data .com_price{} .detail_head .homepage_data .sale_price{} .detail_head .homepage_data .price{font-size: 18px} .detail_head .homepage_data .price p{} .detail_head .homepage_data .price p + p{margin-top: 4px} .detail_head .homepage_data .price p > span{} .detail_head .homepage_data .price p > span + span{margin-left: 4px} .detail_head .homepage_data .price .value .sale_num{color: #ed7822;} .detail_head .homepage_data .price .value .real_value{color: #ed7822;} .detail_head .homepage_data .price .value .sale_value{color: #ccc} .detail_head .homepage_data .price .bot_txt{font-size: 14px; color: #ed7822;} .detail_head .homepage_data .character{margin-top: 24px; padding: 24px; background: #fbfbfb} .detail_head .homepage_data .character .tit{} .detail_head .homepage_data .character .wrapper{padding-left: 21px; margin-top: 16px} .detail_head .homepage_data .character .wrapper > li{padding-left: 5px; list-style: decimal-leading-zero; font-size: 14px; color: #616161} .detail_head .homepage_data .character .wrapper > li.point { color: #ef7012; font-weight: 600; } .detail_head .homepage_data .character .wrapper > li::marker{font-weight: 900; letter-spacing: -1px ; color: #b59374} .detail_head .homepage_data .character .wrapper > li + li{margin-top: 5px} .detail_head .demo_link_btn{margin-top: 24px; overflow: hidden; font-size: 12px} .detail_head .demo_link_btn span{float: left; width: calc(100% / 3); line-height: 13px; text-align: center; color: #616161; background: #fbfbfb} .detail_head .demo_link_btn span a::before{content: ''; display: block; margin-bottom: 8px; font-family:FontAwesome;} .detail_head .demo_link_btn span:nth-of-type(1){} .detail_head .demo_link_btn span:nth-of-type(1) a::before{content: '\f109'} .detail_head .demo_link_btn span:nth-of-type(2){} .detail_head .demo_link_btn span:nth-of-type(2) a::before{content: '\f3cd'} .detail_head .demo_link_btn span:nth-of-type(3){} .detail_head .demo_link_btn span:nth-of-type(3) a::before{content: '\f4fe'} .detail_head .demo_link_btn span + span{position: relative} .detail_head .demo_link_btn span + span::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 55%; background: #ebebeb} .detail_head .demo_link_btn a{display: block; padding: 8px 0} #package_sec .detail_head .demo_link_btn span:nth-of-type(3) a::before{content: '\f501'} .detail_head .homepage_related{margin-top: 80px} .detail_head .homepage_related .title{position: relative; text-align: center;} .detail_head .homepage_related .title::before{content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); width: calc(100%); height: 1px; background: #ededed} .detail_head .homepage_related .title strong{padding: 0 32px; background: #fff;} .detail_head .homepage_related .related_container{margin-top: 30px; padding: 0 1em} .detail_head .homepage_related .related_container img{aspect-ratio: 5/4;} .detail_head .homepage_related .wrapper{} .detail_head .homepage_related .wrapper > li{display: unset} .detail_head .homepage_related .img_box{border: 1px solid #ededed} .detail_head .homepage_related .caption{margin-top: 12px; font-size: 13px} .detail_head .homepage_related .none_data{padding: calc(55px + 40px) 0 55px 0; text-align: center; color: #888; font-size: 12px} .detail_info{position: relative; max-width: 1200px; margin-left: auto; margin-right: auto;} /*.detail_info::before{content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: calc(100% - 2em); height: 1px; background: #ededed}*/ .detail_info .btn_box{position: relative; padding: 16px; } .detail_info .btn_box::before{content: ''; position: absolute; left: 0; top: -100px; width: 100%; height: 100px; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);} .detail_info .btn_box.on::before{content: none} .detail_info .btn_box button{width: 100%; padding: 16px; border: 1px solid #c8c8c8; border-radius: 5px; background: #8a51ff; color: #fff} .detail_info .btn_box button::after{content: '\f107'; margin-left: 5px; font-family:FontAwesome;} .detail_info .btn_box button.on::after{content: '\f106';} .detail_info .art_title{padding: 0 1em} .detail_info img{width: 100%} .detail_info > ul.wrapper{*margin-top: 40px} .detail_info > ul.wrapper > li{} .detail_info > ul.wrapper > li + li{margin-top: 80px} .detail_info .com_li{} .detail_info .com_li .info_tit{text-align: center; font-size: 20px;} .detail_info .com_li:not(.li_1) .info_tit{margin-bottom: 40px} .detail_info .com_li .info_tit strong{position: relative} .detail_info .com_li .info_tit strong::before{content: ''; position: absolute; left: -10px; top: -7px; width: 7px; height: 7px; border-radius: 50%; background: #8a51ff} .detail_info .li_1{} .detail_info .li_1 .img_box{} .detail_info .li_1 .list_table{position: relative; z-index: -1; margin-top: -11px; padding: 0 1em; color: #fff} .detail_info .li_1 .list_table .list_caption{padding: 30px 0; font-size: 17px; text-align: center;} .detail_info .li_1 .list_table .list_caption i{font-size: 20px; } .detail_info .li_1 .list_wrapper{position: relative; overflow: hidden; border: 2px solid #fff; border-bottom: unset; border-top-right-radius: 20px; border-top-left-radius: 20px;} .detail_info .li_1 .list_wrapper::before{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: calc(100% - 48px); background: rgb(255 255 255 / 20%)} .detail_info .li_1 .list_wrapper .box{width: calc(100% / 2); padding: 24px} .detail_info .li_1 .list_wrapper .box p{display: table; width: 100%; font-size: 14px} .detail_info .li_1 .list_wrapper .box p span{display: table-cell; vertical-align: middle} .detail_info .li_1 .list_wrapper .box p + p{margin-top: 8px} .detail_info .li_1 .list_wrapper .box p span + span{padding-left: 10px} .detail_info .li_1 .list_wrapper .left{float: left} .detail_info .li_1 .list_wrapper .right{position: relative; float: right;} .detail_info .li_1 .list_wrapper .num{width: 20px} .detail_info .li_1 .list_wrapper .num b{width: 100%; height: 20px; border-radius: 50%; text-align: center; line-height: 20px;} .detail_info .li_1 .list_wrapper .txt{width: calc(100% - 20px)} #detail_sec .keyword_art{display: flex; flex-wrap: wrap; gap: 10px; font-size: 14px;} #detail_sec .keyword_art > span{padding: 4px 14px; border: 1px solid #ececec; border-radius: 14px; background-color: #fbfbfb; color: #888;} #detail_sec .homepage_movie_art{text-align: center} #detail_sec .homepage_movie_art .tit{margin-bottom: 16px; font-size: 18px; color: #9f7ddd} #detail_sec .homepage_movie_art iframe{width: 100%} #company_detail_info .li_1 .list_table{background: #7997e0;} #company_detail_info .li_1 .list_table .list_caption{color: #10208e} #company_detail_info .li_1 .list_table .list_caption i{color: #fff} #company_detail_info .li_1 .list_wrapper .num b{background: #10208e; color: #7997e0} #introduce_detail_info .li_1 .list_table{background: #2d315d} #introduce_detail_info .li_1 .list_table .list_caption{color: #8894ff} #introduce_detail_info .li_1 .list_table .list_caption i{color: #fff} #introduce_detail_info .li_1 .list_wrapper .num b{background: #a341d4; color: #2d315d;} #loan_detail_info .li_1 .list_table{background: #2d8770} #loan_detail_info .li_1 .list_table .list_caption{color: #b5f5e5} #loan_detail_info .li_1 .list_table .list_caption i{color: #fff} #loan_detail_info .li_1 .list_wrapper .num b{background: #e1fb98; color: #2d8770;} #news_detail_info .li_1 .list_table{background: #9ca5bb} #news_detail_info .li_1 .list_table .list_caption{color: #fff} #news_detail_info .li_1 .list_table .list_caption i{color: #cbd9ff} #news_detail_info .li_1 .list_wrapper .num b{background: #121341; color: #9ca5bb; } #package_detail_info .li_1 .list_table{background: #6ca4e9} #package_detail_info .li_1 .list_table .list_caption{color: #f4ebbe}/*color: #d1e6ff*/ #package_detail_info .li_1 .list_table .list_caption i{color: #fff} #package_detail_info .li_1 .list_wrapper .num b{background: #f4ebbd; color: #6ca4e9;} #package_detail_info .li_1 .list_wrapper > div{overflow: hidden} #package_detail_info .li_1 .list_wrapper .box_tit{width: calc(100% - 48px); margin: 24px auto 0 auto; padding: 6px 0; text-align: center; border-radius: 30px; background: #fff; color: #6ca4e9} #job_detail_info{margin-top: 40px} #job_detail_info .li_1{display: none} #intermediary_detail_info{margin-top: 32px} #intermediary_detail_info .li_1 .list_table{background: #2a74d0} #intermediary_detail_info .li_1 .list_table .list_caption{color: #fff}/*color: #d1e6ff*/ #intermediary_detail_info .li_1 .list_table .list_caption i{color: #b7deff} #intermediary_detail_info .li_1 .list_wrapper .num b{background: #b7deff; color: #2a74d0;} #community_detail_info .li_1 .list_table{background:#1c6043;} #community_detail_info .li_1 .list_table .list_caption{color: #fff}/*color: #d1e6ff*/ #community_detail_info .li_1 .list_table .list_caption i{color: #bfd8af} #community_detail_info .li_1 .list_wrapper .num b{background: #d1e3c5; color: #1c6043;} #community_detail_info .li_1 .list_wrapper { border: 2px solid #dbebd1; } #shop_detail_info .li_1 .list_table{background:#f7c8c8;} #shop_detail_info .li_1 .pink { color: #f6808b} #shop_detail_info .li_1 .list_table .list_caption{color: #fff}/*color: #d1e6ff*/ #shop_detail_info .li_1 .list_table .list_caption i{color: #be7277} #shop_detail_info .li_1 .list_wrapper .num b{background: #be7277; color:#f7c8c8;} #shop_detail_info .li_1 .list_wrapper { border: 2px solid #dbebd1; } #shop_detail_info .li_1 .list_wrapper .txt { color:#af5f64;} .detail_info .li_2{} .detail_info .li_2 .info_tit{} .detail_info .li_2 .oreder_box{} .detail_info .li_2 .oreder_box .oreder_txt{margin-top: 24px; padding: 0 1em; text-align: center; font-size: 14px; color: #887897} .detail_info .li_2 .oreder_wrapper{display: flex; justify-content: space-between; flex-wrap: wrap; } .detail_info .li_2 .oreder_wrapper > li{text-align: center} .detail_info .li_2 .oreder_wrapper > li:nth-of-type(odd) .img_box{background: #fce5d6} .detail_info .li_2 .oreder_wrapper > li:nth-of-type(odd) .num{color: #ed7822} .detail_info .li_2 .oreder_wrapper > li:nth-of-type(even) .img_box{background: #ede7f8} .detail_info .li_2 .oreder_wrapper > li:nth-of-type(even) .num{color: #7d48db} .detail_info .li_2 .oreder_wrapper .img_box{position: relative} .detail_info .li_2 .oreder_wrapper .img_box img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; } .detail_info .li_2 .order_type{position: relative} .detail_info .li_2 .order_type .num{position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; box-shadow: 0 0 0.3em rgba(0,0,0,0.2); background: #fff} .detail_info .li_2 .order_type .img_box{display: block; width: 120px; height: 120px;border-radius: 50%} .detail_info .li_2 .caption{margin-top: 10px; font-size: 14px; color: #a493c3} .detail_info .li_2 .caption .tit{} .detail_info .li_2 .caption .bot{} .detail_info .li_3{} .detail_info .li_3 .com_container{} .detail_info .li_3 .com_container + .com_container{margin-top: 60px} .detail_info .li_3 .benefits_container.swiper{width: 240px; height: 320px;} .detail_info .li_3 .benefits_card.wrapper{display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px} .detail_info .li_3 .benefits_card.wrapper > li{padding: 20px} .detail_info .li_3 .benefits_card.wrapper .img_box{text-align: center} .detail_info .li_3 .benefits_card > li{display: unset; padding: 16px; border-radius: 20px; box-shadow: 0 0 1em rgba(0,0,0,0.1); background: #fff} .detail_info .li_3 .benefits_card > li.card_box{} .detail_info .li_3 .benefits_card .step{text-align: left; color: #9f7ddd} .detail_info .li_3 .benefits_card .img_box{margin-top: 16px} .detail_info .li_3 .benefits_card .img_box img{width: 80px; height: auto} .detail_info .li_3 .benefits_card .img_box .caption{margin-top: 16px} .detail_info .li_3 .benefits_card .step_list{margin-top: 16px; font-size: 14px} .detail_info .li_3 .benefits_card .step_list p{position: relative; text-align: left; padding-left: 10px} .detail_info .li_3 .benefits_card .step_list p::before{content: '·'; position: absolute; left: 0;} .detail_info .li_3 .benefits_card .step_list p + p{margin-top: 8px} .benefit_list_wrapper{} .benefit_list_wrapper > div{padding: 32px 0} .benefit_list_wrapper > div + div{border-top: 1px solid #ededed} .benefit_list_wrapper .title_box{} .benefit_list_wrapper .title_box::after{content: ''; display: block; clear: both} .benefit_list_wrapper .title_box > div{float: left} .benefit_list_wrapper .title_box .benefit_num{width: 120px} .benefit_list_wrapper .title_box .benefit_num > p{display: inline-block; } .benefit_list_wrapper .title_box .benefit_num .benefit{font-size: 18px; color: #ddd} .benefit_list_wrapper .title_box .benefit_num .num{font-size: 28px; color: #c9c9c9} .benefit_list_wrapper .benefit_tit{width: calc(100% - 120px)} .benefit_list_wrapper .benefit_tit > p{} .benefit_list_wrapper .benefit_tit > p + p{margin-top: 8px; font-size: 15px} .benefit_list_wrapper .benefit_tit .tit_1{font-size: 19px} .benefit_list_wrapper .benefit_tit .tit_2{} .benefit_list_wrapper .benefit_tit .tit_3{} .benefit_list_wrapper .content_box{margin-top: 30px; font-size: 14px} .benefit_list_wrapper .benefit_2{} .benefit_list_wrapper .benefit_2 .one .content_tit .tag{background: #7844e6} .benefit_list_wrapper .benefit_2 .two .content_tit .tag{background: #ef665e} .benefit_list_wrapper .benefit_2 .content_box{display: flex; gap: 20px;} .benefit_list_wrapper .benefit_2 .content_box > div{flex: 1; border-radius: 0 20px 20px 20px; box-shadow: 0 0 1em rgba(0,0,0,0.1);} .benefit_list_wrapper .benefit_2 .content_tit{} .benefit_list_wrapper .benefit_2 .content_tit span{vertical-align: bottom} .benefit_list_wrapper .benefit_2 .content_tit .tag{border-bottom-right-radius: 24px; padding: 24px; color: #fff} .benefit_list_wrapper .benefit_2 .content_tit .tit{font-size: 17px; padding-left: 8px} .benefit_list_wrapper .benefit_2 .one .content_tit .tit i{color: #7844e6;} .benefit_list_wrapper .benefit_2 .two .content_tit .tit i{color: #f33e34;} .benefit_list_wrapper .benefit_2 .list_wrapper{padding: 24px; margin-top: 12px} .benefit_list_wrapper .benefit_2 .list_wrapper p{display: table; width: 100%; color: #616161} .benefit_list_wrapper .benefit_2 .list_wrapper p::after{content: ''; display: block; clear: both} .benefit_list_wrapper .benefit_2 .list_wrapper p + p{margin-top: 8px} .benefit_list_wrapper .benefit_2 .list_wrapper p + p .name, .benefit_list_wrapper .benefit_2 .list_wrapper p + p .txt{padding-top: 8px;} .benefit_list_wrapper .benefit_2 .list_wrapper p + p .txt{ border-top: 1px solid #ededed} .benefit_list_wrapper .benefit_2 .list_wrapper span{display: table-cell; vertical-align: top} .benefit_list_wrapper .benefit_2 .list_wrapper .name{width: 90px;} .benefit_list_wrapper .benefit_2 .list_wrapper .txt{} .benefit_list_wrapper .benefit_3{} .benefit_list_wrapper .benefit_3 .content_box{display: flex; gap: 20px;} .benefit_list_wrapper .benefit_3 .content_box > div{flex: 1; border-radius: 0 20px 20px 20px; box-shadow: 0 0 1em rgba(0,0,0,0.1);} .benefit_list_wrapper .benefit_3 .tit{padding-top: 24px; text-align: center; font-size: 17px} .benefit_list_wrapper .benefit_3 .tit i{color: #333} .benefit_list_wrapper .benefit_3 .one .tit{color: #7844e6 } .benefit_list_wrapper .benefit_3 .two .tit{color: #f33e34} .benefit_list_wrapper .benefit_3 .two .list_wrapper .txt .tag{padding: 2px 6px; margin-left: 3px; border-radius: 4px; border: 1px solid #ffcdcd; color: red} .benefit_list_wrapper .benefit_3 .list_wrapper{padding: 24px; margin-top: 12px} .benefit_list_wrapper .benefit_3 .list_wrapper p{display: table; width: 100%; color: #616161} .benefit_list_wrapper .benefit_3 .list_wrapper p::after{content: ''; display: block; clear: both} .benefit_list_wrapper .benefit_3 .list_wrapper p + p{margin-top: 8px} .benefit_list_wrapper .benefit_3 .list_wrapper p + p .name, .benefit_list_wrapper .benefit_3 .list_wrapper p + p .txt{padding-top: 8px;} .benefit_list_wrapper .benefit_3 .list_wrapper p + p .txt{ border-top: 1px solid #ededed} .benefit_list_wrapper .benefit_3 .list_wrapper span{display: table-cell; vertical-align: top} .benefit_list_wrapper .benefit_3 .list_wrapper .name{width: 90px;} .benefit_list_wrapper .benefit_3 .list_wrapper .txt{} .benefit_list_wrapper .benefit_4{} .benefit_list_wrapper .benefit_4 .content_box{display: flex; justify-content: space-between; align-items: center; gap: 0 24px} .benefit_list_wrapper .benefit_4 .demo_info, .detail_info .benefit_4 .img_box{} .benefit_list_wrapper .benefit_4 .demo_info{} .benefit_list_wrapper .benefit_4 .tit_box{font-size: 19px} .benefit_list_wrapper .benefit_4 .tit_box span{vertical-align: middle} .benefit_list_wrapper .benefit_4 .tit_box .num{width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; background: #5d2bcc; color: #fff} .benefit_list_wrapper .benefit_4 .tit_box .tit{} .benefit_list_wrapper .benefit_4 .list_wrapper{margin-top: 16px; color: #616161} .benefit_list_wrapper .benefit_4 .list_wrapper p{position: relative; padding-left: 10px;} .benefit_list_wrapper .benefit_4 .list_wrapper p + p{margin-top: 4px} .benefit_list_wrapper .benefit_4 .list_wrapper p::before{content: '·'; position: absolute; left: 0;} .benefit_list_wrapper .benefit_4 .img_box{} .benefit_list_wrapper .benefit_4 .img_box img{width: 400px} .benefit_promotion{display: flex; gap: 10px; margin-top: 30px;} .benefit_promotion > div{position: relative; flex: 1; gap: 20px; overflow: hidden;} .benefit_promotion .img{aspect-ratio: 1/1; overflow: hidden;} .benefit_promotion .img img{display: block; width: 100%; min-height: 100%;} .benefit_promotion .text{position: absolute; left: 0; right: 0; bottom: 0; color: #fff; padding: 1em; padding-top: 40%; text-align: left; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.8) 80%); line-height: 1.4;} .benefit_promotion .text > small{display: block; font-size: 0.7em; text-align: right; color: #ef7012; margin-top: 5px; font-weight: 600;} .benefit_promotion .text > small > a{color: inherit;} .benefit_promotion .text > small i{margin-right: 5px;} .benefit_list_wrapper .benefit_5{} .benefit_list_wrapper .benefit_5 .oreder_wrapper{display: flex; justify-content: center; flex-wrap: wrap; gap: 0 50px; text-align: center} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li{text-align: center} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li:nth-of-type(odd) .img_box{background: #fce5d6} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li:nth-of-type(odd) .num{color: #ed7822} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li:nth-of-type(even) .img_box{background: #ede7f8} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li:nth-of-type(even) .num{color: #7d48db} .benefit_list_wrapper .benefit_5 .oreder_wrapper .img_box{position: relative} .benefit_list_wrapper .benefit_5 .oreder_wrapper .img_box img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; } .benefit_list_wrapper .benefit_5 .order_type{position: relative} .benefit_list_wrapper .benefit_5 .order_type .num{position: absolute; left: 0; top: 0; z-index: 1; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; box-shadow: 0 0 0.3em rgba(0,0,0,0.2); background: #fff} .benefit_list_wrapper .benefit_5 .order_type .img_box{display: block; width: 120px; height: 120px;border-radius: 50%} .benefit_list_wrapper .benefit_5 .caption{margin-top: 10px; font-size: 14px; color: #a493c3} .benefit_list_wrapper .benefit_5 .caption .tit{} .benefit_list_wrapper .benefit_5 .caption .bot{} .benefit_list_wrapper .benefit_6{} .benefit_list_wrapper .benefit_6 .content_box{padding: 24px; box-shadow: 0 0 1em rgba(0,0,0,0.1);} .benefit_list_wrapper .benefit_6 .content_box > div + div{margin-top: 16px} .benefit_list_wrapper .benefit_6 .ck_tit{font-size: 16px} .benefit_list_wrapper .benefit_6 .ck_tit::before{content: '\f00c'; margin-right: 5px; font-family:FontAwesome; font-size: 12px;} .benefit_list_wrapper .benefit_6 .ck_tit ~ div{padding: 0 15px; margin-top: 8px; color: #616161} .benefit_list_wrapper .benefit_6 .txt_type{} .benefit_list_wrapper .benefit_6 .list_type{} .benefit_list_wrapper .benefit_6 .list_type > div + div{margin-top: 8px} .benefit_list_wrapper .benefit_6 .list_type .list_tit{} .benefit_list_wrapper .benefit_6 .list_type .list_box{margin-top: 4px} .benefit_list_wrapper .benefit_6 .list_box p{position: relative; padding-left: 10px;} .benefit_list_wrapper .benefit_6 .list_box p::before{content: '·'; position: absolute; left: 0} .benefit_list_wrapper .benefit_6 .list_box p + p{margin-top: 2px} .benefit_list_wrapper .benefit_6 .table_box{} .benefit_list_wrapper .benefit_6 .table_wrapper{} .benefit_list_wrapper .benefit_6 .table_wrapper > li{border: 1px solid #ededed; text-align: center} .benefit_list_wrapper .benefit_6 .table_wrapper > li:nth-of-type(2n){} .benefit_list_wrapper .benefit_6 .table_wrapper > li:nth-of-type(2n) .tit{} .benefit_list_wrapper .benefit_6 .table_wrapper > li:nth-of-type(2n) .txt{} .benefit_list_wrapper .benefit_6 .table_wrapper th, .detail_info .benefit_6 .table_wrapper td{padding: 16px} .benefit_list_wrapper .benefit_6 .table_wrapper .tit{width: 50%; background: #f1f1f1} .benefit_list_wrapper .benefit_6 .table_wrapper .tit + .tit{border-left: 1px solid #fff} .benefit_list_wrapper .benefit_6 .table_wrapper .txt{ line-height: 18px; color: #616161} .benefit_list_wrapper .benefit_6 .table_wrapper .txt + .txt{border-left: 1px solid #ededed} .benefit_list_wrapper .benefit_6 .table_box .bot_list{margin-top: 18px} .benefit_list_wrapper .benefit_6 .table_box .bot_list p{position: relative; padding-left: 25px} .benefit_list_wrapper .benefit_6 .table_box .bot_list p + p{margin-top: 8px} .benefit_list_wrapper .benefit_6 .table_box .bot_list p::before{content: '\21'; position: absolute; left: 0; width: 16px; height: 16px; border-radius: 50%; font-family:FontAwesome; text-align: center; font-size: 10px; line-height: 16px; background: #5d2bc9; color: #fff} .detail_portfolio{max-width: 1200px; margin-left: auto; margin-right: auto;} .detail_portfolio .wrapper{} .detail_portfolio .wrapper > li{} .detail_portfolio .img_box{} .detail_portfolio .wrapper{display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 42px 32px} .detail_portfolio .wrapper > li{border-bottom: 1px solid #e3e3e3} .detail_portfolio .img_box{overflow: hidden; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);} .detail_portfolio .img_box img{width: 100%} .detail_portfolio .date_box{overflow: hidden; padding: 24px 10px 16px 10px;} .detail_portfolio .date_box span{clear: both} .detail_portfolio .date_box .name{float: left; font-size: 18px} .detail_portfolio .date_box .link{float:right; margin-top: 8px; font-size: 14px; color: #777} .detail_portfolio .date_box .link a{position: relative; padding-right: 27px} .detail_portfolio .date_box .link a::before{content: ''; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: url(https://www.netpro.co.kr/mobile/img/viewIcon.png) no-repeat right -2px} .mobile_design_popup{display: none; position: fixed; left: 0; top: 0; z-index: 11; width: 100%; height: 100%; background: rgb(0 0 0 / 70%)} .mobile_design_popup.active{display: block} .mobile_design_popup .inner_box{display: flex; align-items: center; height: 100%} .mobile_design_popup .wrapper > li{flex-direction: column} .mobile_design_popup .img_box{overflow: hidden; border-radius: 5px} .mobile_design_popup .img_box img{} .mobile_design_popup .tit_data{margin-top: 24px; color: #fff} .mobile_design_popup .tit_data .tag{padding: 1px 14px; border-radius: 16px; background: #ff5e5e} .mobile_design_popup .tit_data .tag.default{background: #80aae7} .mobile_design_popup .tit_data .txt{margin-top: 4px} #clear_news_buy{} #clear_news_buy .first_type_radio{padding-bottom: 16px;text-align: center; font-size: 12px} #clear_news_buy .first_type_radio span{} #clear_news_buy .first_type_radio span + span{margin-left: 3px} #clear_news_buy .first_type_radio input{display: none} #clear_news_buy .first_type_radio label{padding: 5px 16px; border-radius: 5px; background: #eef0f3} #clear_news_buy .first_type_radio input:checked ~ label{background: #a495d1; color: #fff} #clear_news_buy .news_home_btn{margin-top:20px;} #clear_news_buy .total_price{display: flex; justify-content: space-between; align-items: center} #clear_news_buy .total_price .price{font-size: 18px; color: #ed7822} #clear_news_buy .home_wrapper{margin: 32px 0} #clear_news_buy .home_wrapper > div + div{margin-top: 24px} #clear_news_buy .home_wrapper .top_tit{margin-bottom: 8px} #clear_news_buy .home_type_data .home_type{color: #ed7822} #clear_news_buy .info_txt_box{margin: 24px 0 16px; font-size: 14px} #clear_news_buy .info_txt_box dd{color: #777} #clear_news_buy .news_mobile_design{padding-top: 15px; overflow-x: scroll;} #clear_news_buy .news_mobile_design::-webkit-scrollbar{display: none} #clear_news_buy .news_mobile_design img{width: 100%} #clear_news_buy .news_mobile_design .wrap{padding: 0 10px;width:1000px; } #clear_news_buy .news_mobile_design .wrap::after{content: ''; display: block; clear: both} #clear_news_buy .news_mobile_design .wrap > li{float: left; width: 150px; } #clear_news_buy .news_mobile_design .wrap > li + li{margin-left: 16px} #clear_news_buy .news_mobile_design .wrap > li.active .img_box{transform: scale(1); opacity: 100%;} #clear_news_buy .news_mobile_design .wrap > li.active .img_box::before{content: none} #clear_news_buy .news_mobile_design .img_box{position: relative; transform: scale(0.9); overflow: hidden; border-radius: 10px; opacity: 50%; box-shadow: 0 0 0.7em rgba(0,0,0,0.2);} #clear_news_buy .news_mobile_design .img_box::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent} #clear_news_buy .news_mobile_design .radio_box{margin-top: 16px; text-align: center} #clear_news_buy .news_mobile_design .radio_box .tag{padding: 2px 12px; border-radius: 16px; font-size: 12px; background: #ff5e5e; color: #fff} #clear_news_buy .news_mobile_design .radio_box .tag.default{background: #80aae7} #clear_news_buy .news_mobile_design .radio_box .btn{margin-top: 8px} @media screen and (max-width: calc(1200px + 32px)){ /*모바일 여백*/ .detail_head .homepage_data, .detail_info .li_2, .detail_info .li_3, .detail_portfolio, .mobile_design_popup, .benefit_list_wrapper{padding: 0 1em} #detail_sec .keyword_art, #detail_sec .homepage_movie_art{padding: 40px 1em 0 1em} .detail_head .demo_link_btn{padding:0} .detail_head .homepage_related .title::before{width: calc(100% - 2em)} .detail_info .homepage_related .title::before{width: calc(100% - 1em)} #clear_news_buy .choice_wrap{padding: 32px 16px 8px 16px} } @media screen and (max-width: 980px){ .tbl1 td input.hp {width:24%;} .detail_info .benefit_4 .content_box{flex-direction: column; gap: 32px 0} } @media screen and (max-width: 900px){ .detail_info .li_2{padding: unset} .detail_info .li_2 .oreder_wrapper{gap: 30px 0} .detail_info .li_2 .oreder_wrapper > li{width: calc(100% / 3)} .detail_info .li_2 .order_type, .benefit_list_wrapper .benefit_5 .order_type{width: fit-content; margin: 0 auto} } @media screen and (max-width: 830px){ .benefit_list_wrapper .benefits_card.wrapper{grid-template-columns: repeat(2, 1fr); gap: 25px;} } @media screen and (max-width: 710px){ .benefit_list_wrapper .benefit_5 .oreder_wrapper{gap: 30px} } @media screen and (max-width: 700px){ .benefit_list_wrapper .benefit_5 .oreder_wrapper{justify-content: space-between; gap: 30px 0} .benefit_list_wrapper .benefit_5 .oreder_wrapper > li{width: calc(100% / 2)} } @media screen and (max-width: 650px){ .benefit_list_wrapper .benefit_2 .content_box, .benefit_list_wrapper .benefit_3 .content_box{flex-direction: column;} .benefit_promotion{flex-direction: column;} .benefit_promotion > div{max-width: 510px;} .benefit_promotion .img{aspect-ratio: 2/1;} .benefit_promotion > div:nth-child(even){margin-left: auto;} } @media screen and (max-width: 510px){ .detail_info .li_1 .list_wrapper{padding: 24px} .detail_info .li_1 .list_wrapper::before{content: none;} .detail_info .li_1 .list_wrapper .left, .detail_info .li_1 .list_wrapper .right{float: unset} .detail_info .li_1 .list_wrapper .right::before{content: unset} .detail_info .li_1 .list_wrapper .box{width: 100%; padding: unset;} .detail_info .li_1 .list_wrapper .box + .box{margin-top: 8px} #package_detail_info .li_1 .list_wrapper > div + div{margin-top: 32px} #package_detail_info .li_1 .list_wrapper .box_tit{width: 100%; margin-bottom: 16px;} .detail_info .li_2 .order_type .num{width: 25px; height: 25px; font-size: 12px; line-height: 25px} .detail_info .li_2 .order_type .img_box{width: 95px; height: 95px} .benefit_list_wrapper .title_box > div{float: none; width: 100% !important} .benefit_list_wrapper .benefit_tit{margin-top: 16px;} .benefit_list_wrapper .benefit_4 .img_box img{width: 310px} .benefit_list_wrapper .benefit_6 .content_box{padding: 16px} .detail_portfolio .wrapper{grid-template-columns: repeat(2, 1fr);} .detail_portfolio .date_box{padding: 16px 0 8px 0;} .detail_portfolio .date_box .name{font-size: 16px} .detail_portfolio .date_box .link{font-size: 12px} .detail_portfolio .date_box .link a{padding-right: 19px} .detail_portfolio .date_box .link a::before{background-size: 15px; background-position-y: 1px} } @media screen and (max-width: 450px){ .detail_head .homepage_data .title_data{display: initial;} .detail_head .homepage_data .type_tab{display: flex; width: 100%; margin-top: 15px; gap: 5px;} .detail_head .homepage_data .type_tab > button{flex: 1;} .detail_head .homepage_data .price p + p{margin-top: 2px} .detail_head .homepage_data .price p > span + span{margin-left: 5px} } @media screen and (max-width: 390px){ .detail_portfolio .wrapper{grid-template-columns: repeat(1, 1fr);} .detail_portfolio .date_box{padding: 24px 0 8px 0;} } @media screen and (max-width: 360px){ .detail_info .li_2 .oreder_wrapper > li{width: calc(100% / 2)} } /*전체 홈페이지*/ .homepage_all_sec{padding: 40px 16px 80px 16px} .homepage_all_sec .m_sec_tit{text-align: center} .homepage_all_sec .web_btn_box{margin: -6px 0 0 -2px;; font-size: 14px} .homepage_all_sec .web_btn_box span{margin: 6px 0 0 2px; padding: 8px 28px; border-radius: 32px; border: 1px solid #ededed;} .homepage_all_sec .web_btn_box span.active{background: #8a51ff; color: #fff; font-weight: 800;} .homepage_all_sec .web_btn_box ~ .tab_container{margin-top: 32px} .homepage_all_sec .content_wrap{display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); grid-gap: 32px 16px} .homepage_all_sec .content_wrap > li{border-radius: 5px ; overflow: hidden; box-shadow: 0px 0px 10px 0 rgb(0 0 0 / 20%);} .homepage_all_sec .info_img{} .homepage_all_sec .info_img a{position:relative;display: block; background: #cdcdcd;} .homepage_all_sec .info_img img{width: 100%; aspect-ratio: 4/3; opacity: 80%;} .homepage_all_sec .page_data_wrap{} .homepage_all_sec .tit_data{display: flex; justify-content: space-between; align-items: center; padding: 16px 12px;} .homepage_all_sec .tit_data .title{} .homepage_all_sec .web_view{text-align: right} .homepage_all_sec .web_view span{width: 30px; height: 30px; border-radius: 50%; background: #eee; } .homepage_all_sec .web_view a{display: block; width: 100%; height: 100%; text-align: center;} .homepage_all_sec .web_view a::before{content: ''; font-family:FontAwesome; line-height: 30px; font-size: 12px; color: #777} .homepage_all_sec .web_view a[title="PC"]::before{content: '\f390'} .homepage_all_sec .web_view a[title="모바일"]::before{content: '\f3cf'} .homepage_all_sec .price_num{padding: 0 16px} .homepage_all_sec .price_num .sale_num{color: #ed7822;} .homepage_all_sec .price_num .real_value{color: #ed7822;} .homepage_all_sec .price_num .sale_value{color: #ccc} .homepage_all_sec .price_view{margin-top: 16px; border-top: 1px solid #eee; text-align: center; font-size: 14px} .homepage_all_sec .price_view::after{content: ''; display: block; clear: both} .homepage_all_sec .price_view span{position: relative; float: left; width: calc(100% / 2);} .homepage_all_sec .price_view span + span::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; border-left: 2px dotted #000} .homepage_all_sec .price_view a{display: block; padding: 16px 0} .homepage_all_sec .price_view small{color: #777} @media screen and (max-width: 500px){ } /*sms 층전/결제 하기*/ #sms_pay_art .type_card{width: 380px; margin: 0 auto; padding: 40px !important; border-radius: 15px; text-align: center; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1); } #sms_pay_art .type_card .tag{width: 105px; padding: 8px; margin: 0 auto; border-radius: 120px; border: 1px solid; font-weight: 800} #sms_pay_art .type_card .date{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed; font-size: 14px; color: #777} #sms_pay_art .type_card .date p + p{margin-top: 4px} @media screen and (max-width: 500px){ #sms_pay_art .type_card{width: 100%} } /*홈페이지 구매하기 폼*/ .sub_submit_form .order_act{ overflow: hidden} .sub_submit_form .order_act p{} /*서브 클리어 폼*/ .com_order_page{padding: 40px 16px; background: #fafafa} .com_order_page .order_step_box ~ article{margin-top: 24px} .com_order_page .dft_btn.clear{width: 100%; height: 45px; margin-top: 40px; border-radius: 8px; text-align: center; background: #8a51ff; color: #fff} /*.hp_order_sec:has(.m_sec_tit)::before{content: none}*/ .sub_submit_form .info_box{padding: 24px 16px; border-radius: 10px; border: 1px solid #f1f1f1; background: #fff;} .sub_submit_form .info_box + .info_box{margin-top: 44px} .sub_submit_form .top_title{position: relative; padding-bottom: 8px; padding-left: 8px; font-size: 20px} .sub_submit_form .top_title::before, .sub_submit_form .top_title::after{content: ''; position: absolute; } .sub_submit_form .top_title::before{left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #8a51ff} .sub_submit_form .top_title::after{right: 0; bottom: 0; width: calc(100% - 8px); height: 1px; background: #e7e7e7} /*.sub_submit_form form > div > h3::after{content: ''; position: absolute; right: 0; bottom: 0; width: calc(100% - 5px); height: 1px; background: #d3d3d3}*/ .sub_submit_form .bank{position: relative; padding-left: 65px; margin-top: 8px; color: #777} .sub_submit_form .bank::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(https://www.netpro.co.kr/img/sub/kb.jpg) no-repeat left 2px; background-size: 60px} .sub_submit_form .top_title ~ .wrapper{margin-top: 24px} .sub_submit_form .top_title ~ .wrapper > li + li{margin-top: 14px} .sub_submit_form .data_box{display: flex; justify-content: space-between; align-items: center;} .sub_submit_form .service_info .inner_btn{*background: #fff} .sub_submit_form .buy_grid{display: grid;} .sub_submit_form .rent_radio .radio_box{text-align: center} .sub_submit_form .rent_radio .radio_box span{position: relative;} .sub_submit_form .rent_radio .radio_box span + span{margin-left: 16px} .sub_submit_form .basic_form .tit ~ .box{margin-top: 8px} .sub_submit_form .basic_form input[type="text"]{width: 100%} .sub_submit_form .radio_choice span{text-align: center} .sub_submit_form .radio_choice label{display: block} .sub_submit_form .hosting_block{margin-top:10px;} .sub_submit_form .hosting_block input[type="radio"]{display: none} .sub_submit_form .hosting_block input[type="radio"] ~ label{display: block;} .sub_submit_form .hosting_block .buy_grid{grid-gap: 16px; text-align: center} .sub_submit_form .hosting_block .buy_grid > li{position: relative; height: 170px; border-radius: 10px; border: 1px solid #cdcdcd; opacity: 50%; background: #fff} .sub_submit_form .hosting_block .buy_grid > li.active{border-color: #ac87f7; opacity: 100%} .sub_submit_form .hosting_block .buy_grid > li label{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 8px} .sub_submit_form .hosting_block .price_data{margin-top: 8px} .sub_submit_form .hosting_block .price_data .final{position: relative; } .sub_submit_form .hosting_block .final::before{content: '\f103'; display: block; margin: 8px 0; font-family:FontAwesome;} .sub_submit_form .domain_info{} .sub_submit_form .domain_info .tit{font-size: 17px} .sub_submit_form .domain_info .tit ~ div{margin-top: 12px} .sub_submit_form .domain_info .ck_text_box{display: flex; align-items: center; justify-content: space-between; gap: 0 16px} .sub_submit_form .domain_info .ck_text_box input[type="text"]{flex: 1} .sub_submit_form .domain_info .ck_text_box .ck{color: #777} .sub_submit_form .domain_info .ck_text_box .ck label{letter-spacing: -1px} .sub_submit_form .domain_info #insert_ftp input[type="text"]{width: 100%} .sub_submit_form .domain_info #insert_ftp .point_wrapper > div + div{margin-top: 32px} .sub_submit_form .domain_info #insert_ftp .inner_input{margin-top: 8px} .sub_submit_form .domain_info #insert_ftp .inner_input > li{display: flex; align-items: center} .sub_submit_form .domain_info #insert_ftp .inner_input > li + li{margin-top: 8px} .sub_submit_form .domain_info #insert_ftp .name{width: 110px; font-size: 14px} .sub_submit_form .domain_info #insert_ftp .name::before{content: '·'; margin-right: 3px} .sub_submit_form .point_wrapper{padding: 16px; border-radius: 10px; background: #f6f8fa} .sub_submit_form .point_wrapper > div + div{margin-top: 16px} .sub_submit_form .point_wrapper .point_wri input[type="text"]{width: calc((100% - 100px) - 24px)} .sub_submit_form .point_wrapper .point_wri input[type="checkbox"]{display: none} .sub_submit_form .point_wrapper .point_wri label[for="use_point_all"]{padding: 6px 24px; border: 1px solid #e2dfdd; border-radius: 32px;text-align: center; background: #fff; color: #777} .sub_submit_form .point_wrapper .point_wri input[type="checkbox"]:checked ~ label{border-color: #5d2bc9; background: #5d2bc9; color: #fff} .sub_submit_form .dispatch_info li + li{margin-top: 24px} .sub_submit_form .dispatch_info .tit{margin-bottom: 8px} .sub_submit_form .agreement_wri{} .sub_submit_form .agreement_wri > ul > li + li{margin-top: 40px} .sub_submit_form .agreement_wri .software_agree{overflow-y: scroll; height: 300px; margin-top: 16px; padding: 16px; border: 1px solid #dadfe8; font-size: 13px; color: #555; background: #fff} .sub_submit_form .agreement_wri .agree{margin-top: 16px; text-align: center} .sub_submit_form .agreement_wri .agree label{letter-spacing: -1px} .sub_submit_form .ch_ap_info{} .sub_submit_form .ch_ap_info .top{text-align: center} .sub_submit_form .ch_ap_info .tit::after{content: '-'; display: block} .sub_submit_form .ch_ap_info .tag{padding: 3px 32px; border-radius: 100px; font-size: 14px; background: #8a51ff; color: #fff} .sub_submit_form .ch_ap_info .tag:has(p){padding: 12px 32px; } .sub_submit_form .ch_ap_info .tag p + p{margin-top: 4px} .sub_submit_form .ch_ap_info .point_wrapper{margin: 14px auto 0 auto; font-size: 14px;} .sub_submit_form .ch_ap_info .point_wrapper li + li{margin-top: 8px} .sub_submit_form .ch_ap_info .point_wrapper .name{color: #666} .sub_submit_form .ch_ap_info .point_wrapper .name::before{content: '· '} .sub_submit_form .ch_ap_info .point_wrapper .date::before{content: ':'; margin: 0 5px 0 1px;} .sub_submit_form .deposit_name{} .sub_submit_form .deposit_name input[type="text"]{width: calc((100% - 52px) - 16px)} .sub_submit_form .charged_info{} .sub_submit_form .charged_info .pay_service{text-align: center} .sub_submit_form .charged_info .pay_service .tag_title{padding: 8px 0; border-radius: 16px; background: #8a51ff; color: #fff} .sub_submit_form .charged_info .pay_service .info{font-size: 14px; color: #555} .sub_submit_form .charged_info .pay_service .info::before{content: '-'; display: block} .sub_submit_form .charged_info .charged_list{margin-top: 30px} .sub_submit_form .charged_info .charged_list > li{} .sub_submit_form .charged_info .charged_list > li + li{margin-top: 14px} .sub_submit_form .charged_info .charged_list .tit{font-size: 15px; color: #888} .sub_submit_form .charged_info .charged_list .price{margin-top: 2px} .sub_submit_form .charged_info .charged_list .price .app_list{font-size: 14px; color: #555;} .sub_submit_form .charged_info .charged_request{margin-top: 14px; padding: 16px; background: #fafafa} .sub_submit_form .charged_info .charged_request .tit{font-size: 14px; color: #888} .sub_submit_form .charged_info .charged_request .price{margin-top: 3px; } /*************************/ .sub_submit_form .this_info_layer{} .sub_submit_form .this_info_layer .service_data{text-align: center} .sub_submit_form .this_info_layer .service_data .title{width: fit-content; margin: 0 auto} .sub_submit_form .this_info_layer .service_data .title::after{content: '-'; display: block} .sub_submit_form .this_info_layer .service_data .data{padding: 4px 0; border-radius: 14px; background: #8a51ff; color: #fff} .sub_submit_form .this_info_layer .price_data{margin-top: 16px; padding: 16px; border-radius: 10px; background: #fafafa} .sub_submit_form .this_info_layer .price_data .inner_tit{} .sub_submit_form .this_info_layer .price_data .inner_list{margin-top: 16px} .sub_submit_form .this_info_layer .price_data .inner_list > li{} .sub_submit_form .this_info_layer .price_data .inner_list > li:not(.clear_price){margin-bottom: 16px} .sub_submit_form .this_info_layer .price_data .inner_list > li::after{content: ''; display: block; clear: both} .sub_submit_form .this_info_layer .price_data .inner_list > li + li{} .sub_submit_form .this_info_layer .price_data .inner_list span{} .sub_submit_form .this_info_layer .price_data .inner_list .tit{float: left; color: #777} .sub_submit_form .this_info_layer .price_data .inner_list .data{float: right} .sub_submit_form .this_info_layer .price_data .inner_list .clear_price{padding-top: 16px; border-top: 1px solid #ededed} /*************************/ .hp_order_sec .ch_ap_info .tit .color{color: #ff9140} .hp_order_sec .ch_ap_info .mobile_price_data{margin-top: 16px; padding: 16px; border-radius: 5px; text-align: center; font-size: 14px; background: #f6f8fa} .hp_order_sec .ch_ap_info .mobile_price_data .price{position: relative; margin: 10px auto 0 auto; padding-top: 10px; } .hp_order_sec .ch_ap_info .mobile_price_data .price::before{content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 50%; height: 1px; background: #ddd} .hp_order_sec .ch_ap_info .mobile_price_data .price .color{*color: #ff9140} .hp_order_sec .ch_ap_info .mobile_price_data .price .bot_date{margin-top: 14px; font-size: 14px; color: #ff9140} .hp_order_sec .bot_txt{margin-top: 6px; font-size: 12px; color: #ff9140} .hp_order_sec .first_ck_box{display: none; position: fixed; left: 0; top: 0; z-index: 31; width: 100%; height: 100%; padding: 0 1em; background: rgb(0 0 0 / 70%)} .hp_order_sec .first_ck_box .info_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1200px; max-height: calc(100vh - 150px); overflow-x: hidden; overflow: auto} .hp_order_sec .first_ck_box .clear_box{margin-top: 45px; text-align: center} .hp_order_sec .first_ck_box .clear_box .btn{padding: 8px 24px; border-radius: 3px; font-size: 14px} .hp_order_sec .first_ck_box .clear_box .clear{background: #8a51ff; color: #fff} .hp_order_sec .first_ck_box .clear_box .del{background: #ededed} .hp_order_sec .ck_ch_info .bd_top{margin-top: 35px} .hp_order_sec .logo_info{} .hp_order_sec .logo_info .btn_box{display: flex; justify-content: center; align-items: flex-start; gap: 0 8px; text-align: center; color: #777} .hp_order_sec .logo_info .btn_box input[name="wr_logotype"]{display: none} .hp_order_sec .logo_info .btn_box label{padding: 6px 24px; border: 1px solid #ededed; border-radius: 3px; background: #fff} .hp_order_sec .logo_info .btn_box input[name="wr_logotype"]:checked ~ label{border-color: #5d2bc9; background: #5d2bc9; color: #fff} .hp_order_sec .logo_info .btn_box ~ ul{margin-top: 24px} .hp_order_sec .logo_info .find_logo{} .hp_order_sec .logo_info .file_box{position: relative} .hp_order_sec .logo_info .file_box input[type="file"]{display: none} .hp_order_sec .logo_info .file_box .wr_logofile{width: 100%; background: #fff} .hp_order_sec .logo_info .file_box label[for="wr_logofile"]{position: absolute; left: 0; top: 0; width: 100%; height: 100%} .hp_order_sec .choice_logo .logo_make > div + div{margin-top: 40px} .hp_order_sec .free_logo{} .hp_order_sec .free_logo .data_box{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; margin-top: 16px;} .hp_order_sec .free_logo .data_box .logo_text{grid-column: 1/5;} .hp_order_sec .free_logo .data_box label{margin-bottom: 5px; color: #777} .hp_order_sec .free_logo .data_box input[type="text"]{width: 100%} .hp_order_sec .not_free_logo .name{margin-bottom: 5px} .hp_order_sec .not_free_logo input[type="text"]{width: 100%} .hp_order_sec .ck_ch_info .hosting_ck{display: table; table-layout: fixed; width: 100%} .hp_order_sec .ck_ch_info .hosting_ck .inner_btn{position: relative; display: table-cell; padding: 0 16px; word-break: keep-all; text-align: center} .hp_order_sec .ck_ch_info .hosting_ck .inner_btn + .inner_btn::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: #ddd} .hp_order_sec .ck_ch_info .hosting_ck .inner_btn input[type="radio"]{} .hp_order_sec .ck_ch_info .hosting_ck .inner_btn input[type="radio"] ~ label{display: block; margin-top: 10px} .hp_order_sec .ck_ch_info .hosting_ck .bot{margin-top: 5px} .hp_order_sec .ck_ch_info .info_wrapper{padding: 16px; margin-top: 24px; background: #f6f8fa} .hp_order_sec .ck_ch_info .info_wrapper p{position: relative; padding-left: 8px; font-size: 14px;} .hp_order_sec .ck_ch_info .info_wrapper p::before{content: '·'; position: absolute; left: 0 } .hp_order_sec .ck_ch_info .info_wrapper p + p{margin-top: 6px} .hp_order_sec .ck_ch_info .view_wrapper{margin-top: 44px} .hp_order_sec .ck_ch_info .hs_info_date{text-align: center; margin-bottom: 16px} .hp_order_sec .ck_ch_info .hs_info_date .name{width: fit-content; margin: 0 auto; padding: 4px 36px; border-radius: 30px; font-size: 14px; color: #fff} .hp_order_sec .ck_ch_info .hs_info_date .name.stad_name{background: #5f65db;} .hp_order_sec .ck_ch_info .hs_info_date .name.pre_name{background: #9f0dd5;} .hp_order_sec .ck_ch_info .hs_info_date .bot{margin-top: 16px; padding: 16px; border-radius: 10px; font-size: 13px; background: #f6f8fa} .hp_order_sec .ck_ch_info .hs_info_date .bot p{color: #777} .hp_order_sec .ck_ch_info .hs_info_date .bot p b{color: #333} /*임대형*/ #hp_order_c_art{} #hp_order_c_art .service_info{} #hp_order_c_art .service_info .radio_box{display: flex; justify-content: center; flex-wrap: wrap; gap: 16px} #hp_order_c_art .service_info .radio_box span{ text-align: center} #hp_order_c_art .service_info .radio_box input[type="radio"]{display: none} #hp_order_c_art .service_info .radio_box input[type="radio"] ~ label{display: block; width: 100px; padding: 8px 0; border-radius: 3px; color: #fff; opacity: 20%; background: #8a51ff} #hp_order_c_art .service_info .radio_box input[type="radio"]:checked ~ label{opacity: 100%} #hp_order_c_art .rent_info_wrap{margin-top: 44px} #hp_order_c_art .rent_info_wrap .btn_box{} #hp_order_c_art .rent_info_wrap .btn_box::after{content: ''; display: block; clear: both} #hp_order_c_art .rent_info_wrap .btn_box button[type="button"]{float: left; padding: 10px 0; width: calc(100% / 2); color: #555;} #hp_order_c_art .rent_info_wrap .btn_box button[type="button"].active{font-weight: 800; background: #333; color: #fff} #hp_order_c_art .rent_info_wrap .info_date{padding: 16px; background: #f6f8fa} #hp_order_c_art .rent_info_wrap .info_date > li{} #hp_order_c_art .rent_info_wrap .info_date > li:not(:first-of-type){display: none} #hp_order_c_art .rent_info_wrap .info_date p{position: relative; padding-left: 8px; font-size: 14px} #hp_order_c_art .rent_info_wrap .info_date p + p{margin-top: 8px} #hp_order_c_art .rent_info_wrap .info_date p::before{content: '·'; position: absolute; left: 0} #hp_order_c_art .ck_ch_info_2 .buy_grid{grid-template-columns: repeat(4, 1fr)} /*************************/ /*구매형*/ #hp_order_d_art .rent_choice_box{} #hp_order_b_art .rent_choice_box .type_tit{margin-bottom: 18px; text-align: center; font-size: 18px} #hp_order_b_art .rent_choice_box .btn_box{margin-bottom: 35px;} #hp_order_b_art .rent_choice_box .rent_type ~ div{margin-top: 35px} #hp_order_b_art .rent_choice_box .rent_type{display: table; table-layout: fixed; margin: 0 auto; text-align: center} #hp_order_b_art .rent_choice_box .rent_type .inner_btn{position: relative; display:table-cell; padding: 0 32px} #hp_order_b_art .rent_choice_box .rent_type .inner_btn:first-of-type{padding-left: unset} #hp_order_b_art .rent_choice_box .rent_type .inner_btn:last-of-type{padding-right: unset} #hp_order_b_art .rent_choice_box .rent_type .inner_btn + .inner_btn::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: #e1e1e1} #hp_order_b_art .rent_choice_box .rent_type input[type="radio"] ~ label{display: block; margin-top: 8px} #hp_order_b_art .rent_choice_box .rent_month{display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: 230px; margin: 0 auto; text-align: center} #hp_order_b_art .rent_choice_box .rent_month input[type="radio"]{display: none} #hp_order_b_art .rent_choice_box .rent_month input[type="radio"] ~ label{width: 70px; padding: 8px 0; border-radius: 3px; font-size: 12px; opacity: 30%; background: #8a51ff; color: #fff} #hp_order_b_art .rent_choice_box .rent_month input[type="radio"]:checked ~ label{opacity: 100%; font-weight: 800} #hp_order_b_art .rent_choice_box .info_wri_box{} #hp_order_b_art .rent_choice_box .info_wri_box{font-size: 14px} #hp_order_b_art .rent_choice_box .info_wri_box > li{margin-top: 8px} #hp_order_b_art .rent_choice_box .info_wri_box .name{font-size: 12px; letter-spacing: -1px; color: #777} #hp_order_b_art .rent_choice_box .info_wri_box .name::after{content: ':'} #hp_order_b_art .rent_choice_box .first_price{/* display: none; */ padding-top: 24px; margin-top: 24px; border-top: 1px solid #e1e1e1; text-align: right} #hp_order_b_art .rent_choice_box .first_price .inner_tit{font-size: 14px} #hp_order_b_art .rent_choice_box .first_price .date{margin-top: 4px} #hp_order_b_art .rent_choice_box .first_price .date b{font-size: 17px; color: #ff8429} #hp_order_b_art .buy_hs_ck .buy_grid{grid-template-columns: repeat(2, 1fr);} /*************************/ .hosting_order_art .goods_type{text-align: center} .hosting_order_art .goods_type .in_top_title{margin-bottom: 24px; font-size: 18px;} .hosting_order_art .goods_type .tag{margin-bottom:10px} .hosting_order_art .goods_type .tag + .tag{margin-left: 32px} .hosting_order_art .goods_type .tag input[type="radio"]{display: none} .hosting_order_art .goods_type .tag label{padding: 8px 30px; border-radius: 30px; opacity: 50%; color: #fff} .hosting_order_art .goods_type .tag input[type="radio"]:checked ~ label{opacity: 100%} .hosting_order_art .goods_type .tag label.pre{background: #9f0dd5} .hosting_order_art .goods_type .tag label.basic{background: #5f65db} .hosting_order_art .type_info{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px} .hosting_order_art .type_info .box{padding: 30px; border-radius: 10px; box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);} .hosting_order_art .type_info .tit_box{text-align: center} .hosting_order_art .type_info .tit_box .tit{width: fit-content; margin: 0 auto;} .hosting_order_art .type_info .tit_box .bot{margin-top: 10px; font-size: 14px;} .hosting_order_art .type_info .type_1 .tit_box .tit{color: #5f65db;} .hosting_order_art .type_info .type_2 .tit_box .tit{color: #9f0dd5;} .hosting_order_art .type_info .wri_box{margin-top: 16px; padding-top: 16px; border-top: 1px solid #ededed} .hosting_order_art .type_info .wri_box p::after{content: ''; display: block; clear: both} .hosting_order_art .type_info .wri_box p + p{margin-top: 16px} .hosting_order_art .type_info .wri_box span{float: left} .hosting_order_art .type_info .wri_box .name{width: 85px; color: #939393} .hosting_order_art .type_info .wri_box .data{} .hosting_order_art .type_info .wri_box .data::before{content: '·'; margin-right: 5px} .hosting_order_art .hosting_block .buy_grid{grid-template-columns: repeat(4, 1fr)} /*패키지 상품*/ #hp_order_p_art .hosting_block .buy_grid{grid-template-columns: repeat(2, 1fr)} #hp_order_p_art2 .hosting_block .buy_grid{grid-template-columns: repeat(4, 1fr)} @media screen and (max-width: 1200px){ .hp_order_sec .first_ck_box .info_box{width: calc(100% - 32px)} } @media screen and (max-width: 500px){ #hp_order_c_art .ck_ch_info_2 .buy_grid, #hp_order_p_art2 .hosting_block .buy_grid{ grid-template-columns: repeat(2, 1fr);} .sub_submit_form .logo_info .btn_box{justify-content: space-between} .sub_submit_form .logo_info .btn_box span{width: calc(100% / 3)} .sub_submit_form .logo_info .btn_box label{width: 100%; padding: 6px 0;} /********/ #hp_order_b_art .rent_choice_box .rent_month{width: 100%; } #hp_order_b_art .rent_choice_box .rent_month span{width: calc((100%/ 3) - 6px)} #hp_order_b_art .rent_choice_box .rent_month input[type="radio"] ~ label{width: 100%} /********/ .hosting_order_art .goods_type .tag + .tag{margin-left: 16px;} .hosting_order_art .type_info{grid-template-columns: repeat(1, 1fr);} .hosting_order_art .hosting_block .buy_grid{grid-template-columns: repeat(2, 1fr);} } /* 게시판 */ #bo_w .tbl_frm01 caption {display:none;} #bo_w {width:100%;} #bo_w #container_title {font-size:18px; text-align:center;} .tbl_frm01 table {width:100%;} .tbl_frm01 table th {padding: 15px; background: #ececec; color: #000; font-size: 1.167em; text-align: left;} /* 주문 */ #simple_order{padding: 40px 16px 0 16px; background: #fafafa} #simple_order article{} #simple_order .link_box{margin-bottom: 40px; text-align: center} #simple_order .link_box .tit{font-size: 18px} #simple_order .link_box .wrapper{margin-top: 16px} #simple_order .link_box .wrapper::after{content: ''; display: block; clear: both} #simple_order .link_box .wrapper > span{float: left; width: calc(100% / 3); border: 1px solid #f3dcff; font-size: 14px; color: #9776db;} #simple_order .link_box .wrapper > span a{display: block; padding: 20px 0} #simple_order .link_box .wrapper > span.active{border-color: #7844e6; font-weight: 900; color: #7844e6} #simple_order .radio_choice{} #simple_order .radio_choice .wrapper{text-align: center} #simple_order .radio_choice .wrapper > span:first-of-type{padding-right: 15px} #simple_order .radio_choice .wrapper > span:last-of-type{padding-left: 15px} #simple_order .radio_choice .wrapper > span:not(:first-of-type, :last-of-type){padding: 0 15px} #simple_order .radio_choice .wrapper > span{position: relative;} #simple_order .radio_choice .wrapper > span + span{} #simple_order .radio_choice .wrapper > span + span::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 30%; background: #ddd} @media screen and (max-width: 1210px){ } @media screen and (max-width: 500px){ #simple_order .link_box .wrapper > span{width: calc(100% / 2)} #simple_order .radio_choice .wrapper > span:first-of-type{padding-right: 12px} #simple_order .radio_choice .wrapper > span:last-of-type{padding-left: 12px} #simple_order .radio_choice .wrapper > span:not(:first-of-type, :last-of-type){padding: 0 12px} #simple_order .radio_choice label{font-size: 12px} } /*공지사항*/ /* input css */ /*input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } input[type="radio"] + label { display: inline-block; position: relative; padding-left:23px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top:0; width:18px; height:18px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%; } input[type="radio"] + label:active:before, .order_box input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } input[type="radio"]:checked + label:before {border-color: #c11108; } input[type="radio"]:checked + label:after { content: ''; position: absolute; top:5px; left:5px; width:8px; height: 8px; background: #c11108; border-radius: 100%;}*/ input[type="radio"]{appearance: none; border: 1px solid gray; width: 12px; height: 12px; border-radius: 50%;} input[type="radio"] ~ label{vertical-align: middle; font-size: 14px} input[type="radio"]:checked{ border: 4px solid tomato;} /* input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0} input[type="checkbox"] + label {display: inline-block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;} input[type="checkbox"] + label:before { content: ' '; display: inline-block; width: 18px; height: 18px; line-height: 18px; margin: -2px 5px 0 0; text-align: center; vertical-align: middle; border: 1px solid #cacece; border-radius : 3px; } input[type="checkbox"] + label:active:before, input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);} input[type="checkbox"]:checked + label:before {content: '\2714'; color: #99a1a7; border-color: #c11108; font-size:12px; color:#c11108;} */ input[type="checkbox"]{position: relative; appearance: none; width: 14px; height: 14px; border-radius: 2px; border: 1px solid #a5a5a5; } input[type="checkbox"], label{vertical-align: middle;} input[type="checkbox"] ~ label{ font-size: 14px} input[type="checkbox"]:checked{border-color: #5d2bc9; background: #5d2bc9;} input[type="checkbox"]:checked::before{content: '\f00c'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 10px; font-family:FontAwesome; color: #fff} /* .order_box textarea {width:100%;height:90px; font-size: 13px; padding: 10px;} .order_box #msg_certify {margin:5px 0 0;padding:5px;border:1px solid #dbecff;background:#eaf4ff;text-align:center;} .order_box .frm_info {display:block;padding:5px 0;margin-left:25%;text-align:left;color:#999;font-size:13px; line-height: 18px;} .order_box .frm_info span {} .order_box i.fa-exclamation {color:#ff8043;margin-right:5px;font-size:10px;} .order_box .btn_frmline2 {display:inline-block;float:left;margin-left:5px;padding:0 5px;height:40px;border:0;background:#1ec679; border:1px solid #12b46a; color:#fff;text-decoration:none;vertical-align:top;border-radius:3px} .order_box .btn_frmline {height:40px;padding:0 10px} .order_box .rgs_name_li button {margin:5px 0 0} .order_box .bd_yellow02 input, .order_box .bd_yellow02 input {border-color:#ffb879;} */ /* 파일 선택 */ .order_box .form_02 ul .file_input label { display: inline-block; text-align:center !important;height:40px; line-height:40px !important; color: #fff; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #666; cursor: pointer; max-width:90px; margin-right:10px; font-size:13px !important;} .order_box .form_02 ul .file_input label input { position:absolute; width:0; height:0; overflow:hidden;} .order_box .form_02 ul .file_input input[type=text] { vertical-align:middle; display:inline-block; font-size:11px; padding:0 0 0 10px; border:1px solid #ddd;} /* 결제 하기 */ .order_step_box{ text-align: right} .order_step_box ~ {margin-top: 16px} .order_step_box span{vertical-align: middle; letter-spacing: -1px; font-size: 12px; color: #777; } .order_step_box span.active{font-weight: 800; font-size: 14px; color: #8a51ff}/*ff9140*/ .order_step_box span + span::before{content: '\f105'; display: inline-block; margin: 0 10px; font-family:FontAwesome; font-size: 11px; color: #c9c9c9} .order_info {margin-top:40px; padding:15px;background:#fff8f0; width:100%; word-break: keep-all;} .order_info li {line-height:22px; text-align:center; color:#666;} .order_info li span {color:#ec6404; font-weight:bold;} /*최종 결제 페이지*/ #payment_result_art{} #payment_result_art .false_container{margin-bottom: 24px} #payment_result_art .od_info{} #payment_result_art .od_info > div + div{margin-top: 50px} #payment_result_art .apply_date{padding: 25px 16px 50px 16px; background: #8a51ff; color: #fff} #payment_result_art .apply_date > li{} #payment_result_art .apply_date .top_tit{} #payment_result_art .apply_date .in_box{font-size: 14px;line-height:18px;} #payment_result_art .apply_date .apply_title{margin-bottom: 65px;} #payment_result_art .apply_date .apply_title .top_tit{position: relative; font-size: 19px} #payment_result_art .apply_date .apply_title .top_tit::before{content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: calc((100% - 65px) - 16px); height: 1px; background: #fff} #payment_result_art .apply_date .apply_title .in_box{margin-top: 24px} #payment_result_art .apply_date .apply_title .tit:after{content: ':'; margin: 0 3px 0 9px;} #payment_result_art .apply_date .making_date{ text-align: center} #payment_result_art .apply_date .making_date .top_tit{padding: 16px 0; border-radius: 32px; background: #7543db;} #payment_result_art .apply_date .making_date .in_box::before{content: '-'; display: block} #payment_result_art .apply_date .making_date .in_box p + p{margin-top: 5px} #payment_result_art .price_date_wrap{width: calc(100% - 32px); margin: -25px auto 0 auto; padding: 16px; border-radius: 10px; box-shadow: 0 0 24px 5px rgb(0 0 0 / 3%); background: #fff} #payment_result_art .price_date_wrap .buy_how{text-align: right} #payment_result_art .price_date_wrap .top_tit{font-size: 14px; color: #717171} #payment_result_art .price_date_wrap .data{margin-top: 5px; } #payment_result_art .price_date_wrapper > ul{} #payment_result_art .price_date_wrapper > ul > li + li{margin-top: 24px} #payment_result_art .price_date_wrapper .date_box{margin-top: 16px; padding-top: 32px; border-top: 1px dashed #a9a9a9;} #payment_result_art .price_date_wrapper .date_box .data::before{content: '·'; margin-right: 5px; color: #878787} #payment_result_art .price_date_wrapper .info_txt{margin-top: 24px; padding: 8px; border: 1px solid #e5e5e5; border-radius: 5px; text-align: center; background: #f5f5f5; color: #777} #payment_result_art .price_date_wrapper > ul > li.bank_li{} #payment_result_art .price_date_wrap .btn_confirm{margin-top: 45px; text-align: center; font-size: 14px} #payment_result_art .price_date_wrap .btn_confirm::after{content: ''; display: block; clear: both} #payment_result_art .price_date_wrap .btn_confirm a{float: left; width: calc((100% / 2) - 4px); padding: 16px 0; border-radius: 5px;} #payment_result_art .price_date_wrap .btn_confirm a:nth-of-type(2n){float: right} #payment_result_art .price_date_wrap .btn_confirm .home{background: #8a51ff; color: #fff} #payment_result_art .price_date_wrap .btn_confirm .btn_m{background: #666; color: #fff} #pay_success{display: flex; align-items: center; justify-content: center; flex-direction: column; position: fixed; left: 0; top: 0; width: 100%; height: 100%; letter-spacing: -1px; background: rgb(255 255 255 / 70%);} #pay_success .ck_icon{position: relative; width: 90px; height: 90px; border-radius: 50%; margin-bottom: 20px; background: #8a51ff;} #pay_success .ck_icon span{position: absolute; height: 5px; border-radius: 3px; background: #fff} #pay_success .ck_icon span:first-of-type{width: 20px; top: 48%; left: 42%; transform-origin: left; transform: translate(-50%, -50%) rotate(45deg) scale(0, 1); animation: span_1 0.5s forwards} #pay_success .ck_icon span:last-of-type{width: 35px; top: 64%; left: 64%; transform-origin: left; transform: translate(-50%, -50%) rotate(-41deg) scale(0, 1); animation: span_2 0.5s forwards; animation-delay: 0.3s} @keyframes span_1{ to{transform: translate(-50%, -50%) rotate(45deg) scale(1, 1);)} } @keyframes span_2{ to{transform: translate(-50%, -50%) rotate(-41deg) scale(1, 1);)} } @media screen and (max-width: 1210px){ #my_service_sec:has(#payment_result_art){padding: 40px 0} #payment_result_art .false_container{padding: 0 16px;} } /* 모바일 테이블 - 가로스크롤 */ .od_table {margin:20px 0;overflow-x: auto;} .od_table table {width: 100%;min-width: 768px;} .order_box .writeForm .sms_table {padding:20px 0;} .order_box .writeForm .sms_table label {float:none;width:unset; padding: 0;} /* 나의 서비스 관리 테이블 */ .my_table {padding:20px 0;} .my_table tr.tr_border, .order_box .my_table tr.tr_border2 {border-top:2px solid;} .my_table .btn02, .my_table .btn01 {padding:4px 7px;margin:2px} .my_table td p {margin:0;} .my_table .span_style01 { color:#ff8429; margin:0 10px; } .my_table .span_style02 { color:#ff8429; } .my_table .span_style03 { display: inline-block; color:#ff8429; border:1px solid #ff8429; padding:5px 10px; line-height:1; margin: 5px; font-size: 13px; } .my_table .span_style04 { color:#5f5f5f; } .order_box .writeForm .my_table input[type=radio] {float:none;width:auto;} .order_box .writeForm .my_table label {float:none;width:auto;padding:0 0 0 20px;} .hpay_info:first-child li {color:#337ab7} .order_box .writeForm ul.hpay_info {width: 30%;} .order_box .searchForm button.btn02 {padding:9px 15px} .order_box .searchForm input[type=text] {float:unset;} .order_box .sel_class { background-color:#ff8429; color:#fff; } .order_box .sel_class > a {color:#fff} @media all and (max-width:500px){ .bo_cate_direct li { width: 50%; } } .center {text-align:center} .sbuy {padding:2px 8px;color:#fff;background:#333;border-radius:4px} .srent {padding:2px 8px;color:#fff;background:#ff8329;border-radius:4px} @media (max-width: 969px){ .order_box .block, #hosting_block ul {padding:0 !important;} .order_box .writeForm h2, .order_box .writeForm h2 {font-size:16px; } .order_box .writeForm li, .order_box .writeForm ul li input, .order_box .writeForm ul li label, .order_box .writeForm ul li select {width:100%} .order_box .wd80 .order_tit {width:78px !important; } .order_box .price .color_gray {line-height:28px !important;} .order_box .writeForm ul li .price_tit {width:78px !important; line-height:28px;} .order_box .writeForm ul li.left {width:50%;} .order_box .writeForm ul li ul li label {line-height:18px;} .order_step h2 {font-size:19px;} .order_step .step_box ul li {font-size:13px;} .order_step .step_box ul:after {left:-7px; width:45px;} .order_box .chkbox label {float:none; width:auto; display: inline;} .order_box .chkbox input {float:none; width:auto; margin-left:10px;} .order_box .chkbox span.color_orange {font-size:12px;} .order_box .float_none li label {float:none; width:100% !important;} .file_input label {} .file_input input[type=text] {width:calc(100% - 100px) !important;} .order_box .account div {margin:0; width:auto;} .order_box .account div img {/* display:block; */ } .order_box .writeForm ul li label.line-height {line-height:19px;} .order_box .writeForm ul.bd_top li label {line-height:16px;} .order_box .writeForm ul li label {font-size:12px;} .order_box .od_info li label {width:50px !important; font-size:12px; } .order_box .od_info .account {/* float:right; width: calc(100% - 50px); */} } /* 기본폼 */ .form_01{} .form_01 .write_div{margin:5px 0;position:relative} .form_01 li{margin:10px 0;position:relative;list-style:none} textarea, .frm_input {border:1px solid #e2dfdd;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:0 10px;height:40px;} textarea {width:100%;height:200px;padding:10px} textarea:focus, .frm_input:focus{outline:none;background:#f3f3f3} .frm_input {height:40px;line-height: 40px;} .full_input{width:100%} .form_01 .frm_file {display:block;margin-bottom:5px;width:100%} .form_01 select{height:40px;border-radius:3px;background-color:#fff} .form_01 .frm_info{font-size:0.92em;color:#4162ff;text-align:left;margin:3px 0 10px;display:block;line-height:1.3em} .spackage {padding:2px 8px;color:#fff;background:#0900c1;border-radius:4px;font-size:14px} /* register skin */ .mbskin {margin:73px 15px;} /* 이미지 등비율 리사이징 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;} #captcha #captcha_img {height:40px;border:1px solid #898989;;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;width:40px;height:40px;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;;border-radius:3px} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} #captcha #captcha_info {display:block;margin:3px 0 5px ;font-size:0.95em;letter-spacing:-0.1em} #captcha_key + span {padding-top:5px; position:relative;left: 0; top: 0;} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:block;margin:0 0 5px} /* 구글리캡챠 크기 조정 scale */ #captcha.recaptcha{width:213px;height:55px;overflow:hidden} #rc-imageselect, .g-recaptcha {transform:scale(0.7);-webkit-transform:scale(0.7);transform-origin:0 0;-webkit-transform-origin:0 0;} /* ckeditor 태그 기본값 */ #bo_v_con ul{display: block;list-style-type: disc;margin-top: 1em;margin-bottom: 1em;margin-left: 0;margin-right: 0;padding-left: 40px;} #bo_v_con ol{display: block;list-style-type: decimal;margin-top: 1em;margin-bottom: 1em;margin-left: 0;margin-right: 0;padding-left: 40px;} #bo_v_con li{display: list-item;} /*kcaptcha*/ #captcha_image {width:140px;height:48px;} .kcaptcha_auto_btn {background: #fff url('/img/sub/rpesh_icon.png')no-repeat center;cursor: pointer;display: inline-block;width: 50px;height: 48px;border: 1px solid #cacaca;border-radius: 5px;vertical-align:bottom;} #wr_keystring {width:200px;vertical-align: top;height:48px;} .blind { position: absolute;width: 1px;height: 1px;clip: rect(0 0 0 0);margin: -1px;overflow: hidden;} /* 카테고리 분류 */ .bo_cate_ul {display: flex; justify-content: center; flex-wrap: wrap; width: fit-content; border-right: none; border-bottom: none; } .bo_cate_ul li { padding:5px 20px; line-height: 30px; text-align: center; border: 1px solid #d9d9d9; cursor: pointer; font-size: 14px; color: #616161; position: relative; } .bo_cate_ul .active { border-color: #ff7200; color: #ff7200; z-index: 1; } .bo_cate_ul .active > a {font-weight: 700; color: #ff7200; } .bo_cate_faq { border-right: none; border-bottom: none; font-size: 0; margin-left: 1px; margin-top: 1px;margin-bottom:10px; } .bo_cate_faq li { width:33.33%;display: inline-block; padding:5px; line-height: 30px; text-align: center; border: 1px solid #d9d9d9; cursor: pointer; font-size: 14px; color: #333333; position: relative; margin-left: -1px; margin-top: -1px;} .bo_cate_faq .active { background-color:#ff7200; border-color: #ff7200; z-index: 1; } .bo_cate_faq .active > a {color: #fff; } .page_btn {margin-top: 40px; text-align: center;display: flex;align-items: center;justify-content: center;gap: 0 0.2em;} .page_btn a {display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border: 1px solid #d9d9d9;font-size: 13px;font-weight: bold;color: #666666;margin-right: 5px;} /* .page_btn { margin:40px 0 40px; text-align: center; } .page_btn a {display: inline-block;width: 30px;height: 30px;margin-right: 5px;border: 1px solid #d9d9d9;font-size: 13px;font-weight: bold;color: #666666;line-height: 15px;vertical-align: middle;padding: 0.5em 0;} */ .page_btn .page_now { background:#8a51ff; color:#fff; border:1px solid #8a51ff; } .page_btn a:last-child { margin-right:0; } .page_btn a img { vertical-align: sub; } /* 모바일 메인 팝업 */ #main_pop {z-index:10000;position:relative;/* margin:20px; */width:calc(100% - 40px);height:0} #main_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .main_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;top:0;left:0;} .main_pops_con {width:100%;min-height:200px;} .main_pops_con img{width:100%;height:auto;} .main_pops_footer {padding:0;background:#fff;color:#333;text-align:left;position:relative} .main_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .main_pops_footer button {padding:10px;border:0;color:#333} .main_pops_footer .main_pops_reject {background:#fff;text-align:left;cursor:pointer} .main_pops_footer .main_pops_close {background:#fff;position:absolute;top:0;right:0;cursor:pointer} /*단독 미디어 쿼리 같음*/ @media all and (min-width:748px) and (max-width:970px){ .hpi_demo {width:100%;} .hpi_itit {float:left; width:calc(100% - 310px);} } @media all and (max-width:970px){ .preview_slider_wrap {width:100%;} .hpi_left, .hpi_right {width:100%;} .hpi_itit {clear:both; width:100%;} .hpi_demo a i {display:block;} .hpi_btn a {font-size:14px; width:100%;margin-bottom:5px;margin-left:0} .hpi_contact {width:100%;} .hpi_estimate {width:100%; margin-top: 10px;} .hpi_type {padding:0;} .hpi_ctxt .total_price ul li:nth-child(4) {clear:both;} .hpi_right h3 {margin-top:30px; font-size:25px; float:left;width: 80%;} .hpi_right .responsive {margin-top:38px; font-size:13px;} .hpi_right{clear:both; width:100%;} .hpi_ctxt .price_tab li {font-size:14px; width:33.33%;} .hps_bmbtn a {width: 120px;} .hps_bmbtn .hps_manage {left:120px;} .process .process_bm {width:100%;} .p_list.p_list04 {clear:both;} .process .process_bm_center {margin-left:0;} .process .p_list {width:33.33%;} .hpf_06 .hpf_cont > div:nth-child(1) > div {width:100%;} .hpf_06 .hpf_cont > div:nth-child(1) > div:first-child {border:0;} .process .p_list h4 {font-size:20px;} .process .p_list p {font-size:16px;} .p_list.p_list04, .p_list.p_list05, .p_list.p_list06 {margin-top:20px;} #home_service .hps_list dl dd:nth-child(2), #home_service .hps_list dl dd:nth-child(3), #home_service .hps_list dl dd:nth-child(4) {background-size:100px;} #home_service .hps_list dl dd {padding-top: 115px;} } @media all and (max-width:748px){ #home_service {padding: 0 15px;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:10px !important;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:10px !important;} } @media all and (max-width:690px){ .hpi_ctxt .total_price ul li:nth-child(1) {float:left;} .hpi_ctxt .total_price ul li {float:none;text-align: left;} .hpi_ctxt .total_price ul li.price {text-align: right; margin-top: -10px; padding-top: 10px; float: right; display: block;} .hpi_ctxt .total_txt {font-size:15px;} .hpi_arrow {position:relative; left:0; top:-10px; font-size:13px;} .hpi_type ul li dl dt {font-size:11px; width:55px; margin-right:3px;} .hpi_type ul li:nth-child(2), .hpi_type ul li:nth-child(4) {margin-left:0;} .hpi_type ul li dl dd {font-size:11px;} .hpi_btn a {width:49.2%;} .hpi_btn a:nth-child(3) {width:100%; margin-left:0; margin-top:1%;} .hpi_contact ul li { width:100%; line-height:18px; padding:3px 0; font-size:13px;} .hpi_contact ul li img {width:20px; height:20px;} .process .p_list i {width:60px; height:60px; margin-bottom:0;} .process .p_list i img {top:19px; width: 19px;} .process .p_list.p_list02 img {width:15px;} .process .p_list p {font-size:14px; } .process .p_list .p_list_txt {font-size:13px;} .process .process_info {font-size:13px;} #home_service .n_title01 h3, .n_title01 h3 {font-size:22px; line-height:28px; letter-spacing:-2px;} #home_service .hps_list dl dt {font-size:14px; line-height: 25px; font-weight:normal; color:#888; margin-bottom:20px;} #home_service .hps_list dl dd:nth-child(2), #home_service .hps_list dl dd:nth-child(3), #home_service .hps_list dl dd:nth-child(4) {background-size:55px; background-position-x: left;} #home_service .hps_list dl dd {float:none; width:100%; height: 68px; padding:10px 0 10px 68px; font-size: 14px; line-height: 18px; text-align: left;} #home_service .hps_list {margin-bottom:25px;} #home_service .hps_list02 dl {width:100%; height:auto; float:none; margin-left:0; margin-top:3%;padding: 20px 15px;} #home_service .hps_list02 dl:first-child {margin-top:0;} #home_service .hps_list02 dl dt {font-size:18px; font-weight:bold;} #home_service .hps_list02 dl dd {font-size:13px;} #home_service .hps_manage dd:nth-child(3):after {display:none;} #home_service .hps_manage dd:nth-child(3) span {border-bottom: 3px solid #ffe64e;} .hpi_ctxt .total_price ul li:nth-child(1) {font-size:15px;} .hpi_ctxt .price_info ul li {font-size:13px;} } @media all and (max-width:500px){ .design_box li {width:100%;height:300px;float:left;padding:0 10px;object-fit:cover;} .design_box li img {width:100%;height:240px;object-fit:cover;} } @media all and (max-width:385px){ .hpi_right h3 {font-size:21px;} .hpi_right h3 span {font-size:16px;} .hpi_right .responsive {margin-top:34px; font-size:12px;} } /*테이블 태그 디자인*/ .table_desgin, .table_desgin tr, .table_desgin th{border: unset} .table_desgin th, .table_desgin td{padding: 12px 0; text-align: center; font-size: 13px} .table_desgin thead th + th, .table_desgin tbody th + th, .table_desgin tbody td + td{border-left: 1px solid #fff} .table_desgin{margin-bottom: unset} .table_desgin tr{border-top: 1px solid #fff} .table_desgin th{background: #8a51ff; color: #fff} .table_desgin td{background: #f1f1f1} /*푸터에서 정지하는 클리어 버튼*/ #clear_submit{position: fixed; left: 0; bottom: 0; z-index: 30; transform: translateY(100vh); width: 100%; padding: 8px; animation: 1s clear_submit_up forwards; animation-delay: 0.2s} #clear_submit.stop{position: absolute} #clear_submit .dft_btn{display: block; width: 100%; padding: 16px 0; border-radius: 5px 5px 0 0; text-align: center; font-size: 16px; background: #8a51ff; color: #fff;} #clear_submit .submit_container{display: flex; justify-content: space-between; align-items: center; width: 1200px; margin: 0 auto} #clear_submit .value_price{color: #fff; text-align: left} #clear_submit .clear_box .btn{padding: 8px 24px; border-radius: 3px; font-size: 14px} #clear_submit .clear_box .clear{background: #8a51ff; color: #fff} #clear_submit .clear_box .del{background: #ededed} @media screen and (max-width: 1200px){ #clear_submit .submit_container{width: 100%; padding: 0 1em} } @keyframes clear_submit_up{ to{transform: translateY(0); } } /*결제 혹은 옛날 정보 찾기*/ .find_or_buy_util{position: fixed; left: 0; top: 0; z-index: 50; transition: all 0.5s; width: 100%; height: 100%; visibility: hidden; opacity: 0; background: rgb(0 0 0 / 70%)} .find_or_buy_util .wrapper{position: absolute; left: 0; bottom: 0; transition: all 0.5s; transform: translateY(100vh); padding: 45px 1em 16px 1em; width: 100%; border-radius: 24px 24px 0 0; box-shadow: 0 0 10px 10px rgb(0 0 0 / 10%); background: #fff} .find_or_buy_util .wrapper::before{content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 50px; height: 2px; border-radius: 16px; background: #ededed} .find_or_buy_util .list_info{padding-top: 16px; border-top: 1px solid #ededed} .find_or_buy_util .list_info > li + li{margin-top: 24px; } .find_or_buy_util .this_clear{display: block; width: 100%; margin-top: 40px; padding: 16px 0; border-radius: 5px; text-align: center; font-size: 14px; background: #333; color: #fff} /*팝업 레이어*/ .popup_layer{display: none; justify-content: center; align-items: center; position: fixed !important; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; padding: 0 1em; background: rgb(0 0 0 / 70%)} .popup_layer > .wrapper{width: 100%} /* 팝업레이어 추가 by dev ==> .popup_layer는 카카오 주소검색 레이어와 중복오류 */ .domain_wrap .popup_btn{padding: 2px 12px; border-radius: 3px; font-size: 12px; background: #8a51ff; color: #fff;} .netpro_poplayer{display: none; justify-content: center; align-items: center; position: fixed !important; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; padding: 0 1em; background: rgb(0 0 0 / 70%)} .netpro_poplayer > .wrapper{width: 100%} /*단독 정보 카드*/ .single_card{width: 1200px; margin: 0 auto; padding: 16px; border-radius: 10px; border: 1px solid #d7d5d5; background: #fff} .single_card > div + div{margin-top: 16px} .single_card .first_data{display: flex; justify-content: space-between; align-items: flex-end;} .single_card .first_data .order_time{} .single_card .first_data .order_time .tit{color: #696969} .single_card .first_data .order_time .data{} .single_card .first_data .type{padding: 3px 18px; font-size: 14px; border-radius: 5px; background: #ff8329; color: #fff;} .single_card .condition_data{text-align: right} .single_card .condition_data .tit{position: relative; color: #bbb} .single_card .condition_data .tit::before{content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(100% - 70px); height: 1px; background: #e5e5e5} .single_card .condition_data .data{margin-top: 8px; font-size: 14px; } .single_card .point_wrapper{padding: 16px; background: #fafafa} .single_card .point_wrapper > div + div{margin-top: 32px} .single_card .in_wrapper{} .single_card .in_wrapper > div + div{margin-top: 16px} .single_card .my_domain{text-align: center} .single_card .my_domain .tit{} .single_card .my_domain .tit::after{content: '-'; display: block; } .single_card .my_domain .hp_data{} .single_card .my_domain .hp_name{width: fit-content; margin: 0 auto; padding: 4px 32px; border-radius: 32px; font-size: 14px; background: #8a51ff; color: #fff;} .single_card .my_domain .url{margin-top: 16px; padding: 5px 0; border-radius: 35px; background: #f1f1f1} .single_card .my_domain .url p{} .single_card .my_domain .url p + p{margin-top: 5px} .single_card .my_domain .url .tag{margin-right: 5px; padding: 1px 10px; border: 1px solid #ff8329; font-size: 12px; background: #fff; color: #ff8329} .single_card .my_domain .url a{font-size: 15px; color: #5f5f5f} .single_card .basic_date .tit{margin-bottom: 8px} .single_card .basic_date .tit::before{content: '|'; margin-right: 5px;} .single_card .basic_date .date{font-size: 14px} @media screen and (max-width: 1200px){ .single_card{width: 100%} } /* 패키지 제품 페이지 CSS 옮김 20231024 */ .package_design{} .package_design .list_container + .list_container{margin-top: 80px} .package_design .list_wrapper{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; margin-top: 16px} .package_design .list_wrapper > li{box-shadow: 0 0 10px 0px rgb(0 0 0 / 7%); overflow: hidden; border-radius: 7px} .package_design .title{padding: 10px 16px; font-size: 14px; background: #6ca4e9; color: #fff} .package_design .title strong::before{content: '|'; margin-right: 3px} .package_design .title ~ .info_txt{margin: 10px 0 30px 0;} .package_design .title ~ .info_txt .text{margin-top: 5px; font-size: 14px; color: #888} .package_design .img_box{box-shadow: 0 -3px 10px 0 rgb(0 0 0 / 20%);} .package_design .list_wrapper img{width: 100%; } .package_design .goods_date{margin-top: 8px; padding: 16px 8px} .package_design .goods_date .name{border-bottom: 1px solid #ededed; margin-bottom: 16px; padding-bottom: 10px; font-size: 14px} .package_design .url_box{overflow: hidden; font-size: 14px; text-align: center; font-size: 12px} .package_design .url_box a{float: left; width: calc(100% / 2);} .package_design .url_box a::before{content: ''; margin-right: 5px; font-family:FontAwesome; font-size: 12px; color: #9f9f9f} .package_design .url_box a.pc::before{content: '\f390'; } .package_design .url_box a.m::before{content: '\f3cd';} .package_design .url_box .single{width: 100%} .package_design .url_box .layer_btn{height: 32px; margin-top: 12px; border-radius: 5px; font-size: 12px;} .package_design #news_internet_m .name{display: flex; justify-content: space-between; align-items: center} .package_design #news_internet_m .tag{padding: 1px 11px; border-radius: 32px; color: #fff;} .package_design #news_internet_m .tag.d{background: #80aae7} .package_design #news_internet_m .tag.b{background: #ff5e5e} @media screen and (max-width: 1200px){ .package_design{padding: 0 1em} .package_design .list_wrapper{grid-template-columns: repeat(3, 1fr);} } @media screen and (max-width: 860px){ .package_design .list_wrapper{grid-template-columns: repeat(2, 1fr);} } @media screen and (max-width: 360px){ .package_design .list_wrapper{grid-template-columns: repeat(1, 1fr);} } #clear_package_buy{background: transparent} #clear_package_buy .data_wrap{} #clear_package_buy .data_wrap > div + div{margin-top: 8px} #clear_package_buy .data_wrap .op_box{position: relative} #clear_package_buy .data_wrap .op_box .list_items{display: none; margin-top: -1px; max-height: 150px; padding: 16px; overflow-y: scroll; border: 1px solid #ededed; background: #fff} #clear_package_buy .data_wrap .op_box .list_items.on{display: block} #clear_package_buy .data_wrap .op_box .list_items > li + li{margin-top: 8px} #clear_package_buy .data_wrap .op_box .tit{position: relative; padding: 12px 16px; border: 1px solid #ededed;} #clear_package_buy .data_wrap .op_box .tit::before{content: '\f0dd'; position: absolute; right: 16px; top: 40%; transform: translateY(-50%); font-family:FontAwesome;} #clear_package_buy .data_wrap .op_box label{letter-spacing: -1px} #clear_package_buy .last_op_ch{padding: 16px; background: #fafafa} #clear_package_buy .last_op_ch .date_box{padding-top: 16px; margin-top: 16px; border-top: 1px solid #f1f1f1} #clear_package_buy .last_op_ch .date_box > li + li{margin-top: 16px} #clear_package_buy .last_op_ch .date_box .op_tit{font-size: 13px; color: #6d6d6d;} #clear_package_buy .last_op_ch .date_box .op_date{margin-top: 4px; letter-spacing: -1px; font-size: 14px} #clear_package_buy .this_clear{margin-top: 16px} /* 패키지 제품 끝 */ /*개인정보 취급방침, 이용 약관*/ .sub_h3_style { border-bottom:none; margin-bottom:16px; font-weight:700; font-size: 3.6em; } .sub_tail_wrap{padding: 40px 16px 80px 16px; font-size: 10px} .sub_tail_wrap > div { } .sub_tail_wrap .content { } .sub_tail_wrap h2 { margin:50px 0 20px; font-size:2.0em; font-weight:500; line-height:1; } .sub_tail_wrap p { font-size:1.6em; font-weight:400; margin-bottom:15px; color:#; } .sub_tail_wrap ul { padding:20px 0; border-top:1px dashed #6c6c6c; border-bottom:1px dashed #6c6c6c; } .sub_tail_wrap li { font-size:1.6em; color:#6c6c6c; line-height:30px; } .sub_tail_wrap dl { margin:0 0 20px; } .sub_tail_wrap dt { margin: 25px 0 5px; font-size:1.6em; font-weight:400; color:#161616; } .sub_tail_wrap dd { padding-left:20px; font-size:1.6em; font-weight:300; color:#6c6c6c; line-height: 24px; margin-bottom:10px; } .sub_tail_wrap table { border:1px solid #ececec; } .sub_tail_wrap table th { width:33%; background:#ececec; line-height:50px; font-size:1.6em; font-weight:500; border-right:1px solid #fff; } .sub_tail_wrap table th:last-child { border-right:none; } .sub_tail_wrap table td { text-align:center; font-size:1.6em; padding:15px 40px; border-top:1px solid #ececec; border-right:1px solid #ececec; } .sub_tail_wrap dt.txtIndent { padding-left:1em; } .sub_tail_wrap dd.txtIndent { padding-left:3em; } .sub_tail_wrap dl.listType dt:not(:first-child) { margin-top:0.7em; } .sub_tail_wrap dl table { width: 97%; margin: 0 auto; } @media screen and (max-width: 500px){ .sub_tail_wrap{font-size: 8px} } #simple_order .sub_submit_form .tab_active{display: flex; margin-top: 16px; text-align: center} #simple_order .sub_submit_form .tab_active > li{flex: 1; color: #999} #simple_order .sub_submit_form .tab_active a{padding-bottom: 10px} #simple_order .sub_submit_form .tab_active > li.active{border-bottom: 2px solid #8a51ff; color: #333} /* 프리미엄 추가 */ a.btn_custom{display: block; width:100%; padding: 8px 24px; font-size: 12px; background: #7844e6; border-radius: 5px; margin: 15px 0; text-align: center; color: #fff;} /* 맞춤제작/구축[신청하기] 버튼 */ .price_view_btn{margin-top: 16px; border-top: 1px solid #eee; text-align: center; font-size: 14px} .price_view_btn > a{display: block; padding: 16px 0; background-color: #512ba1; color: #fff;} /* new, hot 아이콘 */ .iconNew{position:absolute;left:10px;top:0;width:60px;height:60px;background: url(../../images/icons/icon_new2.png) no-repeat;background-size:cover;z-index:1000;} .iconHot{position:absolute;left:0;top:0;width:60px;height:60px;background: url(/images/icons/icon_hot.png) no-repeat;background-size:cover;z-index:1000;}