@charset "utf-8"; @import url(../css/main.css); @import url(../css/common.css); @import url(../css/sub.css); @import url(../css/tablet.css); /* @media (min-width:767px){ #sub-header_m .m_depth .dep2{ display:none; } } */ @media (max-width:800px){ /* #waterfall *{box-sizing:border-box } #waterfall .no_data{width:200%;margin-top:0;font-size:14px} #waterfall{column-count:2;column-gap:.1rem;height:auto !important} #waterfall li{ position:static!important;width:100% !important;margin-bottom:1rem;border-radius:10px;overflow:hidden;will-change:transform} #waterfall li .cont_wrap{margin:5px;padding-bottom:50px;overflow:hidden} #waterfall li .cont_wrap .state{top:15px;left:15px;height:25px;line-height:25px} #waterfall li .cont_wrap .state2{left:72px;width:auto;padding:0 9px} #waterfall li .cont_wrap .premium{right:auto;top:45px;left:15px} #waterfall li .cont_wrap .premium_icon{top:0;right:0} #waterfall li .cont_wrap:hover{transform:none;box-shadow:none !important} #waterfall li .sample_cont{overflow:hidden;border-radius:10px} #waterfall li .sample_img{position:static} #waterfall li .sample_img .more_sample{position:absolute;bottom:0;left:0;width:100%;height:40px;opacity:1;background:none} #waterfall li .sample_img .more_sample .more_link{position:relative;left:auto;top:auto;width:100%} #waterfall li .sample_img .more_sample .more_link a{float:left;width:33.33%;height:40px;border:none;border-radius:0;font-size:13px;line-height:40px;background:#3179E1} #waterfall li .sample_img .more_sample .more_link a img{display:none} #waterfall li .sample_img .more_sample .more_link a:last-child{margin:0;background:#555} #waterfall li .sample_img .more_sample .more_link a:hover{border-color:#3179E1;background:#3179E1} #waterfall li .sample_img .mb_link{position:absolute;top:0;left:0;display:block;width:100%;height:calc(100% - 40px)} #waterfall li .sample_tit b{font-size:16px} #waterfall li .sample_price{text-align:center} #waterfall li .sample_price .o_cost{float:none;display:none} #waterfall li .sample_price .s_cost{float:none;font-size:18px} #waterfall li .sample_price .s_cost font{font-size:12px}*/ #company_map .con .detail_info{padding:0 8% 6%} #company_map .con .detail_info li{width:100% !important} #company_map .con .detail_info li:nth-child(2),#company_map .con .detail_info li:nth-child(3){margin-bottom:20px} #company_map .con .route{padding:0 8% 6%} #company_map .con .location_info > div{width:100% !important;margin-bottom:30px} #company_map .con .location_info > div:last-child{margin-bottom:0px} /* #company_map .con .detail_info li .tit{width:100px} */ #company_map .con .detail_info li .txt br{display:none} /*디자인스킨 리스트 기존스타일 무시 - css 오버라이딩 해당부분 삭제시 기존스타일로 변경됨*/ #waterfall li .sample_img .more_sample{height:40px} #waterfall li .sample_img .more_sample .more_link #openPop{height:40px} #waterfall li .sample_img .more_sample .more_link #openPop img{display:none} #skin_sch_cate_area{margin-bottom:20px} #paging.skin_paging{margin-bottom:15px;padding:10px} } @media (max-width:767px){ #header.scroll{border-bottom:1px solid #ddd} .a_link_box{position:absolute;bottom:0;width:100%;height:110px;opacity:0} *{word-break:keep-all} .sub_inner, .main_banner .main_inner ul li .txt_area, #allmenu .inner, #header .header_inner{width:100%;box-sizing:border-box;padding:0 15px} /* 플로팅배너 */ #floating{bottom:70px} /* 하단 퀵메뉴 */ #bottom_quick{height:60px} #bottom_quick .quick_btn p{width:55px;height:30px;line-height:30px} #bottom_quick .top_btn p{width:45px;height:30px;line-height:30px} #bottom_quick .bottom_quick_info{height:60px} #bottom_quick .quick_menu{padding:0} #bottom_quick .quick_list{width:50%} #bottom_quick .quick_list ul{top:-22px} #bottom_quick .customer{width:50%} #bottom_quick .customer span{padding-left:40px;font-size:20px;line-height:60px} #bottom_quick .customer span::before{width:30px;height:30px;line-height:30px;font-size:14px} #bottom_quick .quick_list ul li a img{width:40px;height:40px} #bottom_quick .quick_contact a{font-size:18px;line-height:60px} #bottom_quick .quick_contact a span{display:none} #bottom_quick.active .bottom_quick_wrap{bottom:-60px} /*서브*/ #sub-header_m.fixed{top:61px !important} .sub_sec{padding:70px 20px} .sub_sec .new_title{margin-bottom:30px} .sub_sec .new_title h2{font-size:35px} .sub_sec .new_title .txt br{display:none} br.normal{display:block} br.view_1400{display:none} br.view_1280{display:none} br.view_1024{display:none !important} br.view_767{display:block !important} br.view_500{display:none} br.view_400{display:none} br.view_319{display:none} /* 견적서보기 */ #price_tag_popup .service_list{flex-wrap:wrap} #price_tag_popup .service_list li{width:100px;padding:10px} #price_tag_popup .makeway_info dl{width:100%} #price_tag_popup .makeway_info .pc_price_table{display:none} #price_tag_popup .makeway_info .mb_price_table{display:block} #price_tag_popup .makeway_info .m_dl dt,#price_tag_popup .makeway_info .m_dl dd{height:auto;padding-top:0} #price_tag_popup .makeway_info dl dt{width:30% !important} #price_tag_popup .makeway_info dl dd{width:70% !important} #openPop{padding:7px 14px;font-size:13px} #price_tag_popup .pdt_info_cont > div{width:100%} #price_tag_popup .pdt_info_cont > div:last-child{width:100%;padding:10px 0 0 0} /*---------------0908 knr 추가 홈페이지 제작전---------------------------*/ #home_before .check_list_tab{margin-bottom:20px} #home_before .check_list_tab li{width:auto;height:45px;padding:0 20px;font-size:15px;line-height:45px} #home_before .tab_cont{height:auto} #home_before .tab_cont > div{float:none} #home_before .tab_cont .txt_box_area{width:100%;padding:30px 20px 20px;text-align:center;justify-content:center} #home_before .tab_cont .txt_box_area:before{width:calc(100% - 40px);height:1px;top:auto;right:20px;bottom:0} #home_before .tab_cont .cont_box_area{width:100%;padding:30px 20px} #home_before .tab_cont .txt_box_area .s_tit{font-size:15px} #home_before .tab_cont .txt_box_area .tit{font-size:25px;line-height:25px} #home_before .tab_cont .txt_box_area .txt{font-size:15px} #home_before .tab_cont .cont_box_area .cont_list li{font-size:15px} #home_before .tab_cont .cont_box_area .cont_tit{font-size:17px} #home_before .tab_cont .cont_box_area .cont_txt{font-size:15px;line-height:24px} /*건별유지보수 텝메뉴*/ #maintain_price .tabs{width:90%} #maintain_price .tabs li{width:48%;margin:0 1%} .info_wrap .defective_info p{width:100%} /* 버튼 */ .common_btn{margin-top:35px} /* #template .common_btn{margin-top:30px} */ .common_btn a{padding:20px 45px;font-size:16px} .common_btn a img{width:7px;margin-left:15px;transition:.2s} .common_btn a:hover{box-shadow:3px 3px 15px rgba(0, 0, 0, 0.15)} /*실시간견적문의 버튼*/ .reque_con_padding{text-align:left} .reque_con_padding label{display:inline-block} .reque_con_padding label .checkmark{top:0 !important} .reque_con_padding label p{display:inline-block;padding-left:20px;margin:0 !important} .reque_con .memo_btn{top:0;left:110px} .box.design .memo_cont{box-sizing:border-box} .box.design .memo_cont ul li{margin-bottom:10px;font-size:13px;color:#888} #live_result .price_result_wrap{line-height:30px} #live_result .price_result_wrap .tit{font-size:20px} #live_result .price_result_wrap .price_result{font-size:25px} /* IE6,7,9,10 */ @media screen and (min-width:640px), screen\9{.reque_con .memo_cont{position:relative !important}} /* ================================================================================= Header ================================================================================= */ #header .header_inner{height:60px} #header .header_inner .logo{width:160px;height:22px;background:url(../img/makeway_logo_Top.svg) no-repeat;background-size:contain !important;left:15px} #header .header_inner{} /*230809 추가*/ #header .nav_open_btn{right:15px} /* 탭메뉴영역 */ .head_tab{width:22px;height:60px;right:15px} .head_tab span.lines{width:16px;height:2px} .head_tab span.lines::after, .head_tab span.lines::before{width:22px;height:2px} .head_tab span.lines::after{top:-8px} .head_tab span.lines::before{top:8px} /* allmenu영역 */ #allmenu .logo{display:none} #allmenu .inner{} #allmenu .menu01{/* margin-top:7vh */} #allmenu .menu01 > li{float:left;margin:5px 0;line-height:30px} #allmenu .menu01 > li > a{width:130px;font-size:18px} #allmenu .menu01 > li > a::before{/* display:none;*/} /* #allmenu .menu01 > li > a img{width:15px} */ #allmenu .menu02{margin:10px 0} #allmenu .menu02 li a{font-size:15px} /* 정보 */ #allmenu .info_wrap{margin-bottom:20px} #allmenu .info{/* margin-top:10vh;*/} #allmenu .info .ico{margin-right:2%} #allmenu .info .ico > div{margin-right:100px} #allmenu .ico a{padding:15px 0} #allmenu .ico img{width:18px;height:18px} #allmenu .ico p{font-size:14px;margin-left:5px} #allmenu .info2{margin-top:20px;flex-direction:column} #allmenu .info2 .email{margin-right:0;margin-bottom:10px} #allmenu .info2 .call p{font-size:16px} /* #allmenu .info_box{margin-bottom:20px} */ /* 플로팅배너 */ #floating > div, #floating > a{width:40px;height:40px;margin-bottom:7px} /* 자동견적 */ #floating .auto_contact p{font-size:13px} #floating .auto_contact::after{top:2px;left:-12px} @media (hover:hover){ #floating .auto_contact:hover::after{width:20px;height:24px} } /* 빠른문의 */ #floating .contact p{font-size:13px} #floating .contact::after{top:0px;left:-13px} @media (hover:hover){ #floating .contact:hover::after{width:24px;height:26px} } /* 전화 */ #floating .call p{font-size:20px;margin-left:11px} #floating .call:hover{padding:0 18px} #floating .call img{width:23px} /* 카카오톡 */ #floating .kakao img{width:23px} /* TOP */ #floating .top img{width:18px} /*------------------견적문의 신규------------------*/ .new_form_area{padding:50px 0 0} /*라디오 버튼*/ .new_form_area .radio_area li{width:49%} .new_form_area .radio_area li:nth-child(-n + 2){margin-bottom:2%} .new_form_area .radio_area li:nth-child(3){margin:0} .new_form_area .radio_area_3box li:nth-child(4){margin-left:1.33%} .new_form_area .radio_area_3box li:nth-child(5){margin-left:0} .new_form_area .w_box .production_txt{margin:10px 0 20px} /*체크버튼*/ .new_form_area .f_chk_area li{width:49%} .new_form_area .f_chk_area li:nth-child(-n + 2){margin-bottom:2%} .new_form_area .f_chk_area li:nth-child(3){margin:0} .new_form_area .c_input, .new_form_area .c_select{font-size:15px} .new_form_area .c_textarea{font-size:15px;line-height:26px} .new_form_area .radio_area label{font-size:15px} .r_radio_area li label{font-size:15px} .new_form_area .form_inner_box .w_box .l_box{width:100%;margin-bottom:30px;float:none} .new_form_area .form_inner_box .w_box .r_box{width:100%;float:none} .new_form_area .file .filebox .input_file{width:calc(100% - 100px)} .new_form_area .file .filebox label{width:100px} #help_txt_box .ex_img_box img{width:90%} /*------------------견적문의 신규 끝------------------*/ /* 제작문의 클릭 시 나오는 제작문의 폼 */ /* 문의하기폼 */ #fixed_contact_form .modal{width:100%;height:100vh} #fixed_contact_form .modal .inner{width:calc(100% - 30px);height:calc(100% - 30px);overflow-y:auto} #fixed_contact_form .modal .inner .center_wrap{padding:20px 15px} /* 닫기버튼 */ .close_btn{top:30px;right:20px} .close_btn img{width:18px;height:18px} /* 상단텍스트 */ #fixed_contact_form .modal .top_title{margin:25px 0 20px 0} #fixed_contact_form .modal .top_title h2{margin-bottom:5px;font-size:25px} #fixed_contact_form .modal .top_title p{font-size:15px} #fixed_contact_form .modal .top_title p br{display:block} /* 입력폼 */ #fixed_contact_form .modal_wrap .box > input{padding:13px 10px} #fixed_contact_form .modal_wrap .box > input::placeholder{font-size:13px} #fixed_contact_form .modal_wrap .box > input:-ms-input-placeholder{font-size:13px} /* 업체명/성명+연락처 */ #fixed_contact_form .modal_wrap .box.username, #fixed_contact_form .modal_wrap .box.bd_hp{width:100%} #fixed_contact_form .modal_wrap .box.username{margin-right:0} /* 파일 */ #fixed_contact_form .modal_wrap .box.bd_file input{font-size:12px} #fixed_contact_form .modal_wrap .box.bd_file label{font-size:13px} /* 추가내용 */ #fixed_contact_form .modal_wrap .box.bd_content textarea{height:100px;padding:13px 10px;font-size:13px} #fixed_contact_form .modal_wrap .box.bd_content textarea::placeholder{font-size:12px} /* 동의폼 */ #fixed_contact_form .modal_wrap .box.agree_check{margin:10px 0 20px 0} #fixed_contact_form .modal_wrap .box.agree_check label span{width:18px;height:18px} #fixed_contact_form .modal_wrap .box.agree_check label span::after{left:5px;top:5px;width:6px;height:4px} #fixed_contact_form .modal_wrap .box.agree_check label p{margin-left:22px;font-size:14px} /* 버튼 */ #fixed_contact_form .modal_wrap .req_btn a{font-size:16px;padding:15px 0 15px 5px;letter-spacing:5px} /* 템플릿 제작문의 신청 */ #template_contact_form .modal{width:100%;height:100vh} #template_contact_form .modal .inner{width:calc(100% - 30px);height:calc(100% - 30px);overflow-y:auto} #template_contact_form .modal .inner .center_wrap{padding:20px 15px} /* 닫기버튼 */ .close_btn{top:30px;right:20px} .close_btn img{width:18px;height:18px} /* 상단텍스트 */ #template_contact_form .modal .top_title{margin:25px 0 20px 0} #template_contact_form .modal .top_title h2{margin-bottom:5px;font-size:25px} #template_contact_form .modal .top_title p{font-size:15px} #template_contact_form .modal .top_title p br{display:block} /* 입력폼 */ #template_contact_form .modal_wrap .box > input{padding:13px 10px} #template_contact_form .modal_wrap .box > input::placeholder{font-size:13px} #template_contact_form .modal_wrap .box > input:-ms-input-placeholder{font-size:13px} /* 업체명/성명+연락처 */ #template_contact_form .modal_wrap .box.username, #template_contact_form .modal_wrap .box.bd_hp{width:100%} #template_contact_form .modal_wrap .box.username{margin-right:0} /* 파일 */ #template_contact_form .modal_wrap .box.bd_file input{font-size:12px} #template_contact_form .modal_wrap .box.bd_file label{font-size:13px} /* 추가내용 */ #template_contact_form .modal_wrap .box.bd_content textarea{height:100px;padding:13px 10px;font-size:13px} #template_contact_form .modal_wrap .box.bd_content textarea::placeholder{font-size:12px} /* 동의폼 */ #template_contact_form .modal_wrap .box.agree_check{margin:10px 0 20px 0} #template_contact_form .modal_wrap .box.agree_check label span{width:18px;height:18px} #template_contact_form .modal_wrap .box.agree_check label span::after{left:5px;top:5px;width:6px;height:4px} #template_contact_form .modal_wrap .box.agree_check label p{margin-left:22px;font-size:14px} /* 버튼 */ #template_contact_form .modal_wrap .req_btn a{font-size:16px;padding:15px 0 15px 5px;letter-spacing:5px} .chk_area > div{width:60px} /* ====================================================================================== 메인구성 ====================================================================================== */ /* =========================================================== common =========================================================== */ section{padding:70px 0 50px 0} .sub_inner .txt_area{margin-bottom:30px} .sub_inner .txt_area::before{/* content:'';position:absolute;height:30px;width:1px;left:50%;top:-60px;transform:translateX(-50%);background-color:#3179E1;*/display:none} .sub_inner .txt_area p{font-size:16px} .sub_inner .txt_area p br{display:block} .sub_inner .txt_area h2{font-size:30px;margin-top:15px;line-height:1.2em} .sub_inner .txt_area h2::before{width:14px;height:30px;left:-30px} .sub_inner .txt_area h2::after{width:14px;height:30px;right:-30px} #sub-header_m .m_depth .dep2{display:none} #sub-header_m .m_depth > li:hover > a img{transform:none} #sub-header_m .m_depth li.active > a img{transform:rotate(180deg)} /* =========== company ============ */ #company{} #company .txt_area{margin-bottom:50px} #company .txt_area h2::after{background:url(../img/main/title_obj_L_color.svg) no-repeat;width:13px;height:32px;right:-30px} #company .txt_area h2::before{background:url(../img/main/title_obj_R_color.svg) no-repeat;width:13px;height:32px;left:-30px} #company .con_box ul{display:block;overflow:hidden} #company .con_box ul li{float:left;/* width:50%;*/} /* #company .con_box ul li:nth-child(-n+2){margin-bottom:100px} */ #company .con_box ul li img{width:50px} #company .con_box ul li p{font-size:14px;margin-top:25px;margin-bottom:5px} #company .con_box ul li h2.number{font-weight:600;font-size:25px} #company .con_box ul li h2 span{font-size:16px;margin-left:2px} #company .con_box ul li::after{height:70%;top:50%;transform:translateY(-50%)} #company .con_box ul li::before{position:absolute;content:'';width:50%;height:1px;background:#E9E9E9;top:0;left:50%;transform:translateX(-50%)} #company .con_box ul li:nth-child(-n+4):before{display:none} /* #company .con_box ul li:nth-child(2)::after{display:none} */ #company .con_box ul li:last-child:after{display:none} #company .con_box .common_btn{margin-top:50px} .contact_box .input_box .input_cont input[type="text"]:focus+.new_tit{transform:translateY(-150%)} /* ================== 하단내용 ================== */ #footer .sub_inner{padding:30px 15px 15px 15px} /* 상단 */ #footer .top{padding-bottom:30px} #footer .top .txt h2{color:#fff;font-weight:600;font-size:18px;margin-bottom:3px} #footer .top .txt p{font-size:14px} #footer .top .common_btn{margin-top:15px} #footer .top .common_btn a{font-size:16px;padding:15px 35px} #footer .top .common_btn a img{width:7px} /* 하단1 */ /* 정보 */ #footer .bottom_1{/* margin-top:30px;*/} #footer .bottom_1 .info p{font-size:14px;margin:2px 30px 2px 0} #footer .bottom_1 .info p:last-child{margin-right:0} #footer .bottom_1 .info p span{margin:2px 10px 2px 0} /* 고객센터 */ #footer .bottom_1 .customer{width:100%;/* margin-top:40px;*/margin-top:20px;text-align:center} #footer .bottom_1 .customer p{font-size:16px;margin-bottom:3px} #footer .bottom_1 .customer h2{font-size:30px;margin-bottom:10px;line-height:1em} #footer .bottom_1 .customer span{font-size:14px} /* 하단2 */ #footer .bottom_2{margin-top:20px;flex-direction:column} #footer .bottom_2 .link{display:flex;align-items:center;flex-direction:column} /* #footer .bottom_2 .links{order:2} */ #footer .bottom_2 .links a{border:1px solid #6B6B6B;/* padding:15px 0;*/padding:12px 0;text-align:center;width:130px;color:#bababa;display:inline-block;transition:.2s;font-size:14px} #footer .bottom_2 .links a:hover{border:1px solid #fff;color:#fff} #footer .bottom_2 .links a:first-child{margin-right:0px} /* #footer .bottom_2 .link .certification{margin-left:0;order:1;margin-bottom:20px} */ #footer .bottom_2 .link .certification img{margin-bottom:6px} #footer .bottom_2 .link .certification a > img{width:60px} #footer .bottom_2 .link .certification .kosa{width:53px;margin-left:5px} #footer .bottom_2 .link .certification .women{width:28px;margin-left:5px} /* sns */ #footer .bottom_2 ul{margin-top:15px} #footer .bottom_2 ul li{margin-right:10px} /* copy */ #footer .copy{padding:10px;font-size:14px} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ============================================서브====================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* 서브 비쥬얼 영역 */ #sub_visual{overflow:hidden;margin-top:60px;height:300px;margin-bottom:0} #sub-header_m{top:309px} #sub_visual .cover_wrap{overflow:hidden} #sub_visual.policy .cover_wrap,#sub_visual.policy{height:170px} #sub_visual.policy .visual_title{top:50% !important} #sub_visual .visual_title{top:calc(50% - 25px) !important;padding:0 15px;box-sizing:border-box} #sub_visual .visual_title h1{font-size:35px} #sub_visual .visual_title p{font-size:17px;margin-top:10px} /* 회사소개 전용 서브배너 */ #sub_visual .only_company{left:15px} #sub_visual .only_company .wrap{top:calc(50% - 50px)} #sub_visual .only_company h2{font-size:35px} #sub_visual .only_company .s_tit{margin-bottom:10px;font-size:14px;} #sub_visual .only_company .t_txt{max-width:80%;width:100%;margin-top:10px;font-size:16px;letter-spacing: -1.25px;} #sub_visual .only_company .t_txt br{display:none} #sub_visual .only_company .scroll{height:100px} #sub_visual .only_company .scroll p{font-size:13px;margin-left:10px} #sub_visual .only_company .scroll .object{height:100px} /*페이지별 상단 타이틀 230823*/ .new_sub_txt_area .new_tit{font-size:24px} .new_sub_txt_area .tel_num{height:50px;margin:10px auto 0;font-size:20px;line-height:50px} .new_sub_txt_area .tel_num span{font-size:14px} .new_sub_txt_area .chk_list{padding:30px 20px} .new_sub_txt_area .chk_list li{font-size:14px;line-height:24px} /*서브타이틀 신규*/ .new_sub_tit_area{margin-bottom:50px;text-align:center} .new_sub_tit_area .sub_tit_box{margin-bottom:20px} .new_sub_tit_area .new_txt{text-align:center;position:relative;bottom:auto;right:auto} .new_sub_tit_area .chk_list{text-align:left} .new_sub_tit_area .chk_list li{font-size:15px;line-height:26px} .new_sub_tit_area .chk_list li .link_btn, .price_note li .link_btn{display:block;margin:0} .new_sub_tit_area .chk_list li .link_btn img, .price_note li .link_btn img{width:10px} /* 공통 */ /* 메인텍스트영역 */ .sub_txt_area{padding-top:70px} .sub_txt_area h2{font-size:30px;line-height:1em} .sub_txt_area h2::before{width:11px;height:30px;left:-30px} .sub_txt_area h2::after{width:11px;height:30px;right:-30px} .sub_txt_area p{font-size:16px;margin-top:15px} .sub_txt_area p.txt2{margin-top:10px} .sub_txt_area p.txt3{margin-top:0} .sub_txt_area p br{display:block} /* 콘텐츠 섹션 */ .sub_sec .title{margin-bottom:30px} .sub_sec .title h2{font-size:30px;word-break:keep-all} .sub_sec .title.bottom h2{color:#fff} .sub_sec .title h2::after{width:18px;height:11px;top:-15px} /* Section 01 ==> 적응형/반응형 비교 */ /* #homepage1 .con{display:block} #homepage1 .home{width:100%} #homepage1 .home.adaptive{margin-bottom:50px} #homepage1 .home.adaptive{margin-right:0} */ #homepage1 .home{} /*#homepage1 .home .top{padding:0 0 30px 0}*/ /* #homepage1 .home.adaptive{} */ #homepage1 .home.responsive{} #homepage1 .home .top h3{font-size:20px} #homepage1 .home .top p{margin-top:10px;font-size:16px} /* #homepage1 .home .top p br.view_1024{display:block} */ #homepage1 .home .top p br{display:none} #homepage1 .home .top img{width:100%} #homepage1 .home .bottom{text-align:left} #homepage1 .home .bottom .txt:first-child{margin:30px 0 20px 0} #homepage1 .home .bottom .txt span{font-size:16px;margin-bottom:7px} #homepage1 .home .bottom .txt p{font-size:15px;word-break:keep-all} /* Section add ==> 제작 전 확인 */ /* 탭영역 */ #home_before .con .tab_wrap{width:100%;-webkit-overflow-scrolling:touch;position:relative;margin-bottom:0;overflow:auto} #home_before .con .tab_area{width:768px;justify-content:flex-start;padding-bottom:10px} #home_before .con .tab_area li{margin-right:5px;width:145px} #home_before .con .tab_area li .icon_box{width:70px;height:70px} #home_before .con .tab_area li .icon_box .icon{width:25px;height:25px} #home_before .con .tab_area li p{font-size:15px;margin-top:10px} /* 내용 */ #home_before .con .con_area{margin-top:20px} #home_before .con .con_area .tab_con .img_area{height:250px} #home_before .con .con_area .tab_con .txt_area{margin-top:30px} #home_before .con .con_area .tab_con .txt_area span.num{font-size:18px;margin-bottom:15px} #home_before .con .con_area .tab_con .txt_area h2{font-size:20px;margin-bottom:20px;padding-bottom:20px} #home_before .con .con_area .tab_con .txt_area p.txt{font-size:14px} #home_before .con .con_area .tab_con .txt_area p.txt span{margin-bottom:25px} #home_before .con .con_area .tab_con .txt_area .dots_box{padding:15px;margin:15px 0} #home_before .con .con_area .tab_con .txt_area .dots_box p{font-size:14px;margin-bottom:5px;padding-left:7px;margin-right:15px} #home_before .con .con_area .tab_con .txt_area .dots_box span::before{width:2px;height:2px;left:-7px} /* Section 02 ==> 제작과정(공통) */ #serv_progress{background:linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ),url(../img/sub/home_progress_BG_m.png) center center no-repeat} #serv_progress.shop{background:linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ),url(../img/sub/home_progress_BG_shop_m.jpg) center center no-repeat} #serv_progress.shop{background:linear-gradient( rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75) ),url(../img/sub/home_progress_BG2_m.jpg) center center no-repeat} #serv_progress .con{padding-top:20px} #serv_progress .con ul li, #serv_progress .con ul.list_4way li{width:33.33%;/* height:180px;*/} #serv_progress .con ul li:nth-child(-n+9){margin-bottom:50px} /* #serv_progress.pro .con ul li:nth-child(-n+5){margin-bottom:50px} #serv_progress .con ul li:nth-last-child(1){margin-bottom:0} */ #serv_progress .con ul li:nth-child(3n):after, #serv_progress .con ul.list_4way li:nth-child(3n):after{display:none !important} #serv_progress .con ul li:nth-child(4n):after, #serv_progress .con ul.list_4way li:nth-child(4n):after{display:block} #serv_progress .con ul li:nth-child(3n):after, #serv_progress .con ul.list_4way li:nth-child(3n):after{display:block} #serv_progress .con ul li span{font-size:13px;margin-bottom:7px} #serv_progress .con ul li h3{font-size:18px} #serv_progress .con ul li img{margin:15px 0;width:44px} #serv_progress .con ul li p{font-size:15px} /* Section 03 ==> 무료제공(공통) */ #serv_function .con ul{width:95%;margin:0 auto} #serv_function .con ul li{width:33.3%;margin-bottom:30px;/* height:190px;*/} #serv_function .con ul li:nth-child(-n+5){margin-bottom:30px} #serv_function .con ul li:nth-last-child(2){margin-bottom:30px} #serv_function .con ul li h3{font-size:18px;/* margin-top:-7px;*/} #serv_function .con ul li img{width:90px} #serv_function .con ul li p{font-size:15px;word-break:keep-all;margin-top:7px} /* Section 04 ==> 제작 전 준비(공통) */ #serv_materials .con ul{} #serv_materials .con ul li{padding:30px 15px;box-sizing:border-box;float:left;/* margin-right:0;margin-bottom:2%;*/display:inline-block;background:#fff;/* width:100%;*/vertical-align:middle} /* #serv_materials.home .con ul li:nth-child(3){margin-right:0} */ #serv_materials .con ul li h2{font-size:18px;margin-top:15px} #serv_materials .con ul li p{font-size:15px;margin-top:10px} /* Section 05 ==> 가격안내(공통) */ #serv_price.sub_sec .title{margin-bottom:30px} /* 2022.10.07 kyh */ #serv_price .common_price_table.pc{width:750px} #serv_price.shop .common_price_table thead td.shopping{width:35%} /* #serv_price .table_wrap{padding-top:0} */ /* #serv_price .table_wrap .touch_info{display:none} #serv_price .common_price_table.pc, .info_wrap.pc{display:none} */ /* 모바일일때 */ /* #serv_price .common_price_table.mobile{display:inline-table} .info_wrap.mobile{display:block} */ /* #tem_contact{background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.55) ),url(../img/sub/home_progress_BG2_m.jpg) center center no-repeat} */ #serv_price .common_price_table tbody tr:last-of-type{border-bottom:0} #serv_price .common_price_table.mobile{margin-bottom:40px} #serv_price .common_price_table.mobile.recom{margin-top:40px} #serv_price .common_price_table.mobile.last{margin-bottom:0} /* thead */ #serv_price .common_price_table thead td{padding:25px 0;font-size:16px} #serv_price .common_price_table thead td.recom::after{padding:12px 0;font-size:14px} /* thead */ #serv_price .common_price_table thead h2.tit{font-size:20px;margin-bottom:20px} #serv_price .common_price_table thead h2.tit span{font-size:16px} #serv_price .common_price_table thead p.origin_price{font-size:14px;margin-bottom:5px} #serv_price .common_price_table thead h3.sale_price{margin-bottom:20px;font-size:28px} /* 별도문의섹션 */ #serv_price .common_price_table thead h3.sale_price.con{font-size:25px;margin-bottom:20px} #serv_price .common_price_table thead h2.tit.con{/* margin-bottom:0;*/} #serv_price .common_price_table thead h3.sale_price span{font-size:14px} #serv_price .common_price_table thead a.contact{padding:12px 40px 8px;font-size:15px} /* tbody */ #serv_price .common_price_table tbody tr{font-size:15px} #serv_price .common_price_table tbody th{padding:13px 5px 12px;font-weight:500} #serv_price .common_price_table tbody td{padding:14px 5px;/* width:70%;*/} #serv_price .common_price_table.mobile tbody td{text-align:left;padding:13px 5px 13px 10px} /* #serv_price .common_price_table.mobile tbody th{width:40%} */ /* 기본기능 */ #serv_price .common_price_table tbody td{padding:13px 10px 12px} #serv_price .common_price_table tbody tr.func th{text-align:center} #serv_price .common_price_table tbody td.function{padding:20px 10px} #serv_price .common_price_table tbody .taget_td{font-size:14px} #serv_price .common_price_table tbody td.function span{margin-left:15px;margin-right:20px;width:120px} #serv_price .common_price_table tbody td.function span::before{width:11px;height:6px;left:-15px} #serv_price .common_price_table tbody td.function p{margin-top:18px} .info_caption{font-size:14px} /* 하단내용 */ .info_wrap .info{padding:25px 20px;margin:20px 0 0 0;font-size:15px;line-height:1.5rem;background:#fff;border:1px solid #ddd} .info_wrap .info p{padding-left:20px;position:relative} .info_wrap .info p span{position:absolute;left:0} #bt_inq_area{padding:100px 20px} #bt_inq_area .btn_area{max-width:450px} #bt_inq_area .btn_area li{height:55px} #bt_inq_area .btn_area li img{width:20px} #bt_inq_area .btn_area li span{font-size:15px} /* .info_wrap .info_caption li span::before{left:-15px}*/ /*0906 김누리 추가*/ #serv_price.main .info_wrap .info{border:1px solid #ddd;background:#fff} /*----홈페이지/쇼핑몰 핵심기능----*/ .provide_list{margin-top:50px} .provide_list li{width:49%;padding:50px 20px} .provide_list li .txt{font-size:16px; color:#666} .provide_list li .txt br{display:none} .provide_list li .option_txt{margin-top:5px;position:unset} /*홈페이지제작 - 쇼핑몰제작 필수사항 공통*/ .provide_new_list li{padding:30px 20px;flex-direction: column;gap:15px} .provide_new_list .img_box{max-width:280px;width:100%} .provide_new_list .txt_box .num{margin:0 auto 10px} .provide_new_list .txt_box{width:100%;text-align:center} .provide_new_list .txt_box .txt{max-width:350px;width:100%;margin:0 auto} /* ======================================= 쇼핑몰 ======================================= */ /* Section 01 ==> 맞춤형 쇼핑몰 추천 */ #shopping1 .con ul{display:flex} #shopping1 .con ul li{padding:35px 10px} #shopping1 .con ul li span{font-size:16px} #shopping1 .con ul li img{margin:25px 0;width:55px} #shopping1 .con ul li h2{font-size:19px} #shopping1 .con ul li h2 br{display:none} /* Section 04 ==> 제작 전 준비(공통) */ /* Section 05 ==> 가격안내(공통) */ /* #serv_price.shop .common_price_table tbody td{width:70%} */ /* ======================================= 웹프로그램 ======================================= */ /* Section 01 ==> 맞춤형 프로그램 */ #program1 .con ul li{margin-bottom:50px} #program1 .con ul li h2{margin-top:20px;font-size:20px} #program1 .con ul li p{margin-top:10px;font-size:15px} /* Section 02 ==> 제작과정(공통) */ #serv_progress.pro .con ul li{width:33.3%;/* height:180px;*/} #serv_progress.pro .con ul li:nth-child(-n+4){margin-bottom:50px} #serv_progress.pro .con ul li:nth-child(3n):after{display:block} #serv_progress.pro .con ul li:nth-last-child(-n+3){margin-bottom:0} /* #serv_progress .con ul li:nth-child(-n+5){margin-bottom:0} */ /* #serv_progress.pro .con ul li:nth-child(5):after{display:none} */ /* Section 03 ==> 웹솔루션 체험 */ /* #pro_solution .con{display:block} #pro_solution .con .solu_box{width:100%;margin-left:0;margin-bottom:2%} */ .wave_cont02{margin-top:10px} .wave_cont li{width:200px;height:80px;padding:10px;margin-right:10px;font-size:17px} /* Section 03 ==> 웹솔루션 체험 */ #pro_solution .con .solu_box{padding:30px 15px} #pro_solution .con .solu_box img{width:100%} #pro_solution .con .solu_box h2{margin-bottom:5px;font-size:22px} #pro_solution .con .solu_box p{font-size:16px} #pro_solution .con .solu_box .btns{margin-top:30px} #pro_solution .con .solu_box .btns a{padding:15px 0;font-size:15px} #pro_solution .con .solu_box .btns a::after{width:6px;height:13px} #pro_solution .con .solu_box .btns a:hover::after{opacity:1;transform:translateX(-50% + 10px)} #pro_solution .con .solu_box .btns a:hover p{margin-left:-10px} #pro_solution .con .solu_box .btns a img{margin-left:15px} /* Section 04 ==> 다양한 프로그램 경험 */ #pro_exper .con ul li{padding:25px 5px} #pro_exper .con ul li img{width:23px} #pro_exper .con ul li p{font-size:16px;margin-top:10px} /* ======================================= 웹호스팅 ======================================= */ /* 탭영역 */ #host_main_tab li a{padding:11px 0;font-size:16px} /* Section 01 ==> (호스팅) 호스팅 선택 이유 */ #hosting1 .con{padding-top:10px} #hosting1 .con ul{overflow:hidden} #hosting1 .con ul li::after{display:none} #hosting1 .con ul li span{font-size:16px} #hosting1 .con ul li img{width:70px;margin:25px 0} #hosting1 .con ul li p{font-size:17px} /* Section 02 ==> (호스팅) 웹/서버 비교 */ #hosting2{background:#F8F8FB} #hosting2 .con{/* display:block;*/} #hosting2 .con .box{/* width:100%;*/padding:40px 15px} #hosting2 .con .box img{width:210px} #hosting2 .con .box h2{font-size:20px;margin-top:30px} #hosting2 .con .box p{font-size:15px;margin-top:15px} /* Section 03 ==> (웹호스팅) 가격안내 */ .hosting_table_m.recom{margin-top:50px} /*웹포스팅 vs 서버호스팅*/ .hosting_cont_area .cont_box .cont_tit{margin-bottom:10px;font-size:20px} .hosting_cont_area .cont_box .cont_txt{font-size:16px} .hosting_cont_area .cont_box .cont_tit2{font-size:16px;text-align:left} /* ======================================= 유지관리 ======================================= */ /* Section 01 ==> (유지관리) 책임 유지보수 */ #maintain1 .con ul li{ font-size:20px; /* width:100%;*/ padding:45px 10px; } #maintain1 .con ul li.one{background:linear-gradient( rgba(65, 65, 65, 0.85), rgba(65, 65, 65, 0.85) ),url(../img/sub/main_img_1.jpg) center center no-repeat} #maintain1 .con ul li.two{background:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ),url(../img/sub/main_img_2.jpg) center center no-repeat} #maintain1 .con ul li.three{background:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ),url(../img/sub/main_img_3.jpg) center center no-repeat} #maintain1 .con ul li.four{background:linear-gradient( rgba(65, 65, 65, 0.85), rgba(65, 65, 65, 0.85) ),url(../img/sub/main_img_4.jpg) center center no-repeat} #maintain1 .title{margin-top:50px} /*#maintain1 .title::after{position:absolute;content:'';width:1px;height:100px;background:#707070;bottom:-100px;transform:translateX(-50%);left:50%}*/ #maintain1 .title h2::after{display:none} #maintain1 .title p::before{height:14px} /* Section 02 ==> 가격안내(공통) */ /* 터치 스크롤 안내 */ #serv_price .table_wrap{position:relative} #serv_price .table_wrap .touch_info{display:flex} #serv_price .table_wrap{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;/* overflow 와 afte 속성으로 인해 +45px padding-top:45px;*/} #serv_price.host .table_wrap{padding-top:0} #serv_price .table_wrap .touch_info{display:block;width:auto;top:20%} /* 2022.10.17 kyh */ /* #serv_price .common_price_table.pc{width:740px} */ #serv_price .common_price_table.pc.shopping{width:100%} #serv_price .table_wrap .touch_info.shopping{display:none} #serv_price .common_price_table.pc.shopping{width:100%} #serv_price.shop .common_price_table thead td.shopping{width:37%} /* Section 03 ==> (유지관리) 가격안내_건별유지관리/디자인 */ #maintain_price.pro{padding:0 0 70px 0 !important} /* 건별유지관리 */ #maintain_price .main_price_table{font-size:15px} #maintain_price .main_price_table thead th{padding:14px 0 10px;font-size:16px} #maintain_price .main_price_table thead td{padding:14px 0 10px;font-size:16px} #maintain_price .main_price_table tbody th{padding:13px 0 12px} #maintain_price .main_price_table tbody td{padding:13px 5px 12px 20px} #maintain_price .main_price_table tbody td.price{padding:13px 10px 12px} #maintain_price .main_price_table tbody td br{display:block} .sub_sec .new_title.new_title_margin{margin-top:80px} #serv_price .th_tit {padding: 14px 0 10px;font-size: 16px;} /* ======================================= 디자인샘플 ======================================= */ /* Section 01 ==> 맞춤형 템플릿 */ #template1 .con .box h2{margin-top:10px} /* Section 02 ==> 디자인 변경 예시 */ #tem_example .con{flex-direction:column} #tem_example .con .box{padding:30px 15px;flex:0 0 auto} #tem_example .con .box .object span{padding:10px 40px;font-size:15px} #tem_example .con .box h2{margin:15px 0 30px 0;font-size:20px} #tem_example .con .box img{width:100%;box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)} /* before */ #tem_example .con .box.before{padding-top:10px;padding-bottom:70px} #tem_example .con .box.before::before{right:auto;left:50%;top:auto;bottom:-25px;transform:translateX(-50%);background:url(../img/sub/template_arrow_rotate.svg) no-repeat;box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1)} /* after */ #tem_example .con .box.after{padding-top:70px} #tem_example .con .box h2 br{display:none} /* Section 03 ==> 최고의 서비스 환경 */ #tem_service{padding-bottom:30px !important} #tem_service .con .function{padding:40px 0} #tem_service .con .function:first-child{padding-top:0} #tem_service .con .function h3.title{margin-bottom:30px;font-size:23px} #tem_service .con .function h3.title span.basic{margin-right:0} #tem_service .con .function ul{overflow:hidden} #tem_service .con .function ul li{/* width:120px;*//* width:140px;*//* height:110px;*/} #tem_service .con .function ul li img{width:55px} #tem_service .con .function ul li p{font-size:16px;margin-top:10px} #tem_service .con .function ul li .price_info .basic_price{font-size:16px} /* Section 04 ==> 타사 기능 비교 */ /*221208 추가*/ .compare_sec .title .txt{font-size:14px} #tem_difference .con .differ_pc thead td{padding:15px;font-size:16px} #tem_difference .con .differ_pc thead td.our{width:30%;font-size:16px} #tem_difference .con .differ_pc tbody th{padding:8px 10px 5px 20px;font-size:16px} #tem_difference .con .differ_pc tbody td{padding:17px 10px 15px;font-size:16px} #tem_difference .con .differ_pc tbody td.our{font-size:18px} #tem_difference .con .differ_pc tbody td p{font-size:16px} #tem_difference .con .differ_pc tbody td img{display:inline-block;padding-top:6px} /* PC 표 */ /* #tem_difference.function .tbl_scroll_txt{display:block} #tem_difference.function .touch_info{display:block} #tem_difference.function .touch_info p{width:70%;margin:0 auto} #tem_difference.function .con{overflow-x:scroll} #tem_difference.function .con .differ_pc{display:block;width:740px;overflow:auto;-webkit-overflow-scrolling:touch} */ /* 디바이스 분기점 비교 kyh 22.12.23 */ #tem_difference.compare_sec .con .differ_pc thead td{width:28%} #tem_difference.compare_sec .con .differ_pc thead td.our{width:28%} #tem_difference.compare_sec .con .differ_pc thead td.device{width:44%} /* mobile 표 */ .mobile_table{width:100%;overflow:auto;display:block;-webkit-overflow-scrolling:touch} .mobile_table .touch_info{top:25%} .mobile_table table.differ_mobile{width:750px} .mobile_table table.differ_mobile tbody td.our{font-size:16px} .mobile_table table.differ_mobile tbody td.our p{font-size:14px} /* Section 05 ==> 템플릿 제작 과정 */ #tem_process .con ul li{/* width:50%;*/} /* #tem_process .con ul li:nth-last-of-type(-n+5){margin-bottom:40px} #tem_process .con ul li:nth-last-of-type(-n+2){margin-bottom:0} #tem_process .con ul li:nth-child(2n):after{display:none !important} #tem_process .con ul li:nth-child(3n):after{display:block} #tem_process .con ul li:nth-of-type(-n+5):after{display:block} #tem_process .con ul li:nth-child(5n):after{display:block} */ /* Section 05 ==> 템플릿 제작 과정 */ /* #tem_process .con ul{width:80%;margin:0 auto} */ #tem_process .con ul li{float:left;width:33.3%;position:relative;/* height:33vw;*/text-align:center;margin-bottom:40px} #tem_process .con ul li img{width:20vw} #tem_process .con ul li p{font-size:15px;margin-top:10px} #tem_process .con ul li::after{width:8px;height:16px;top:calc(50% - 30px)} #tem_process .con ul li:nth-last-of-type(-n+5){margin-bottom:50px} #tem_process .con ul li:nth-last-of-type(-n+2){margin-bottom:50px} #tem_process .con ul li:last-child{margin-bottom:0} #tem_process .con ul li:nth-child(3n):after{display:none} #tem_process .con ul li:nth-child(4n):after{display:block} /* ======================================= 스킨 ======================================= */ /* 탭메뉴 #list_tab_area{margin-bottom:40px} #list_tab_area ul li a{padding:8px 16px;font-size:15px} */ /* 콘텐츠영역 */ #template_list .con .tem_box .box{margin-top:40px} #template_list .con .tem_box .box:nth-child(3){margin-top:40px} /* hover했을때 나타남 */ #template_list .con .tem_box .box .hover .btn_box a{font-size:14px} #template_list .con .tem_box .box .hover .btn_box a img{width:16px;margin-left:2px} #template_list .con .tem_box .box .hover .btn_box a:first-child{margin-bottom:0} #template_list .con .tem_box .box .hover .btn_box a:nth-child(2){display:none} /* 템플릿 소개 */ #template_list .con .tem_box .box .tem_info .img_box{height:220px} #template_list .con .tem_box .box .tem_info .txt_area p{font-size:14px;margin-top:20px} #template_list .con .tem_box .box .tem_info .txt_area h2{font-size:18px} /* 페이지영역 */ #page_area{margin-top:50px} #page_area ul li{margin:0 3px;width:30px;height:30px} #page_area ul li a{font-size:14px;width:30px;height:30px} .cont_txt_box .new_txt_box{max-width:480px} .cont_txt_box .new_txt_box .n_box{width:100%;padding:20px 15px;font-size:18px} .cont_txt_box .new_txt_box .arr{width:100%;margin:10px 0} .cont_txt_box .new_txt_box .arr img{transform:rotate(90deg)} #price_tab_area ul li{width:calc(50% - 5px)} #price_tab_area ul li a{padding:8px;font-size:14px} /* ======================================= 템플릿 상세내용 ======================================= */ /* 터치 스크롤 안내 */ #tem_detail_2 .touch_info, #tem_detail_5 .touch_info{display:none} h2.tem_title{font-size:25px;margin-bottom:30px} /* 좌측 */ #tem_detail_1 .con .img_box{height:65vw} #tem_detail_1 .con .img_box .sale_mark{left:10px;top:-8px;width:45px;height:58px;background-size:cover} #tem_detail_1 .con .img_box .sale_mark .discount{padding:10px 0 0;font-size:14px;line-height:14px } #tem_detail_1 .con .img_box .sale_mark .discount span{font-size:11px} #tem_detail_1 .con .img_box .sale_mark .discount_tit{display:none} /* hover했을때 나타남 */ #tem_detail_1 .con .img_box .hover .btn_box a{padding:7px 0;font-size:14px} #tem_detail_1 .con .img_box .hover .btn_box a img{width:30px} #tem_detail_1 .con .img_box .hover .btn_box a:first-child{margin-bottom:10px} /* 우측 */ #tem_detail_1 .con .txt_box{margin-top:30px} /* top */ #tem_detail_1 .con .txt_box .top{padding-bottom:10px;margin-bottom:20px} #tem_detail_1 .con .txt_box .top .info span{padding:6px 15px;font-size:13px} #tem_detail_1 .con .txt_box .top .info img{width:35px} #tem_detail_1 .share.on .facebook_s{right:45px} #tem_detail_1 .share.on .twiter_s{right:90px} #tem_detail_1 .share.on .google_s{right:135px} #tem_detail_1 .con .txt_box .top h2.tem_title_1{font-size:25px;margin-top:10px} #tem_detail_1 .con .txt_box .top h2.tem_title_1 .sample_price{overflow:hidden;float:none;display:block;margin-top:10px;padding-top:10px;border-top:1px dotted #ddd;line-height:30px} #tem_detail_1 .con .txt_box .top h2.tem_title_1 .sample_price .o_cost{float:left;font-size:18px} #tem_detail_1 .con .txt_box .top h2.tem_title_1 .sample_price .s_cost{float:right} #tem_detail_1 .con .txt_box .top h2.tem_title_1 .sample_price .o_cost:after{top:7px} /* middle */ #tem_detail_1 .con .txt_box .middle{padding:30px 20px} #tem_detail_1 .con .txt_box .middle ul li{margin-bottom:15px;font-size:14px;padding-left:13px} #tem_detail_1 .con .txt_box .middle ul li br{display:block} #tem_detail_1 .con .txt_box .middle ul li::before{width:10px;height:6px} #tem_detail_1 .con .txt_box .middle ul li:last-child{margin-bottom:0} /* bottom */ #tem_detail_1 .con .txt_box .bottom{margin-top:15px} #tem_detail_1 .con .txt_box .bottom a{/*padding:17px 0;*/width:49%;font-size:15px} /*0916 knr 추가*/ #tem_detail_1 .con .txt_box .bottom #openPop{font-size:15px} /* Section 02 ==> 메뉴구성 */ #tem_detail_2{padding:50px 0 !important} #tem_detail_2 .tem_title{font-size:25px;margin-bottom:30px} #tem_detail_2 .con{border:1px solid #D9D9D9;padding:30px 15px;box-sizing:border-box} /* 사이트맵 구성 */ #tem_detail_2 .con .site_map{width:100%;/* overflow:auto;-webkit-overflow-scrolling:touch;*/display:block;padding-bottom:45px} #tem_detail_2 .con .site_map .site_map_inner{/* width:768px;*/} #tem_detail_2 .con .site_map ul li{padding:10px 0;margin-bottom:5px;font-size:14px} #tem_detail_2 .con .site_map ul li.depth1{font-size:15px} #tem_detail_2 .con .site_map ul li.check p::after{width:10px;height:5px;left:-10px} #tem_detail_2 .con .site_map p.ps_text{right:auto;left:23px;font-size:14px;margin-bottom:10px} #tem_detail_2 .con .site_map p.ps_text::before{width:13px;height:8px;left:-15px} /* 하단 참고사항 */ #tem_detail_2 .ps_area{margin-top:25px;padding:20px 15px} #tem_detail_2 .ps_area p{font-size:14px;padding-left:20px} /* Section 03 ==> 제작범위 */ /* 설명 */ #tem_detail_3 .con .txt_area{padding:30px 20px} #tem_detail_3 .con .txt_area ul li{padding:20px 0} #tem_detail_3 .con .txt_area ul li h2{font-size:17px;padding-left:28px;margin-bottom:10px} #tem_detail_3 .con .txt_area ul li h2::after{font-size:13px;width:22px;height:22px;line-height:22px} #tem_detail_3 .con .txt_area ul li p{font-size:14px} #tem_detail_3 .con .txt_area ul li span{font-size:13px} /* Section 04 ==> 기본제공기능 */ #tem_detail_4 .con{padding:40px 0} #tem_detail_4 .con ul{display:block;overflow:hidden} #tem_detail_4 .con ul li{width:120px;height:110px} /* #tem_detail_4 .con ul li:nth-last-child(-n+2){margin-bottom:0} */ #tem_detail_4 .con ul li img{width:66px} #tem_detail_4 .con ul li p{font-size:14px;margin-top:10px} /* Section 05 ==> 웹호스팅 및 유지관리 */ #tem_detail_5 .con{width:100%;/* overflow:auto;*/display:block;-webkit-overflow-scrolling:touch} #tem_detail_5 .tem_table{/* width:768px;*/font-size:14px} #tem_detail_5 .tem_table thead th{padding:13px 0;font-size:14px} #tem_detail_5 .tem_table thead th span{font-size:13px} #tem_detail_5 .tem_table tbody td{padding:13px 0} /* Section 06 ==> 자주 묻는 질문 */ #tem_detail_6{padding-bottom:70px !important} #tem_detail_6 .con ul li a{padding:15px 0} #tem_detail_6 .con ul li a p{font-size:15px;padding:0 30px} #tem_detail_6 .con ul li a p::before{left:10px;font-size:15px} #tem_detail_6 .con ul li .arrow{right:15px;width:5px;height:5px} #tem_detail_6 .con ul li .arrow::after{width:5px;height:5px} /* answer */ #tem_detail_6 .con ul li .answer{padding:25px 20px;font-size:14px} /* ======================================= 포트폴리오 ======================================= */ /* 탭메뉴 */ #port_list #list_tab_area{margin-bottom:30px} #port_list #list_tab_area ul li a{padding:8px 0} #list_tab_area.port{} #list_tab_area.port ul{height:40px} #list_tab_area.port ul li{height:40px;font-size:14px;line-height:40px} #port_list .con .port_box .box{margin-top:40px} #port_list .con .port_box .box:nth-child(3){margin-top:40px} #port_list .con .port_box .box h2.port_title{margin-top:5px;font-size:18px} #port_list .con .port_box .box p.port_cate{font-size:14px} /* 마우스오버 */ #port_list .con .port_box .box .more_box span{padding:10px 45px 10px 25px;font-size:14px} #port_list .con .port_box .box .more_box .plus_white{width:8px;height:8px;margin-left:25px} #port_list .con .port_box .box .more_box .plus_white::before{width:9px;height:1px;margin:-1px 0 0 -5px} #port_list .con .port_box .box .more_box .plus_white::after{width:1px;height:9px;margin:-5px 0 0 -1px} /* 네비게이션 바 */ #foot_navi{margin-top:30px} #foot_navi ul li{padding:15px 0} #foot_navi ul li a{font-size:13px} #foot_navi ul li.next img{margin-right:5px} #foot_navi ul li.list img{margin-right:2px} #foot_navi ul li.prev img{margin-left:5px} /* ======================================= 견적문의 ======================================= */ .page_input_list li .text br{display:block} /* 문의 탭 영역 */ #contact_tab ul li{width:auto;font-size:19px;padding:0 0 5px;margin:0 8px} /* 견적문의 */ #contact_1,#contact_2{padding-top:0px;margin-top:0px} .contact_box .sub_txt_area{margin-bottom:30px} /*0908 knr 추가*/ .contact_box .input_box .new_tit{font-size:16px;left:5px} .contact_box .info_wrap .box{margin-bottom:15px} .contact_box .info_wrap .input_box:last-child{margin-bottom:0} .contact_box .info_wrap .input_box.site{margin-bottom:10px} #privacy_new_box_wrap .privacy_new_box #privacy_close_btn img{width:18px;height:auto} .info_wrap_live .input_box_wrap .input_box:nth-child(3){margin-bottom:20px} /* 문의폼 공통사항 */ .contact_box .info_wrap{padding:25px 15px 0} .contact_box .info_wrap_live{padding:25px 15px} .contact_box .info_wrap .box.compa, .contact_box .info_wrap .box.num, .contact_box .info_wrap .box.homepage, .contact_box .info_wrap .box.visit_date, .contact_box .info_wrap .box.visit_add{margin-right:1%} /* .contact_box .info_wrap .box{margin-bottom:30px !important} */ /* 텍스트 */ .contact_box .tit{font-size:17px;margin-bottom:15px} /* input */ .input_cont .estimate_select{height:47px;font-size:16px} .contact_box .info_wrap input[type="text"]{padding:13px 15px;font-size:16px} .contact_box .info_wrap input[type="text"]::placeholder{font-size:13px} .contact_box .info_wrap input[type="text"]:-ms-input-placeholder{font-size:13px} .contact_box .info_wrap textarea{padding:13px 10px;height:100px;font-size:16px} .contact_box .info_wrap textarea::placeholder{font-size:13px} .contact_box .info_wrap textarea:-ms-input-placeholder{font-size:13px} /* 문의유형 */ .contact_box .info_wrap.live .reque_check{justify-content:flex-start} .contact_box .info_wrap .box.req{margin-bottom:30px;padding-bottom:30px} /* 문의유형 체크박스 */ .reque_con{text-align:left} .box.type .reque_con{margin-right:6.5%;text-align:left} .box.design .reque_con{margin-right:10%;text-align:left} .reque_con label p{padding-left:22px;font-size:14px} .reque_con label p span.template{font-size:13px} .reque_con label .checkmark{top:-1px;left:0;width:18px;height:18px} .reque_con label .checkmark::after{left:5px;top:4px;width:6px;height:4px} .box.design .memo_cont{padding:20px} /* 파일첨부 */ .file .filebox p{font-size:14px;margin-bottom:10px} .file .filebox .input_file{width:calc(99% - 150px);padding:13px 10px;height:45px;font-size:15px} .file .filebox label{/* width:28%;*/width:150px;padding:12px 0;height:45px;font-size:15px} /* 하단 수집동의 영역 */ .contact_box .agree_wrap .box.privacy{padding-bottom:10px} .agree_wrap{margin-top:20px} .agree_wrap .privacy_textarea{padding:20px;font-size:12px;height:150px} /* 동의체크 */ .privacy_message{width:100% !important;margin-top:0 !important;padding:0} .contact_box .privacy_message .tit{font-size:15px;padding-left:27px} .privacy_message.reque_con label .checkmark{top:1px;width:21px;height:21px} .privacy_message.reque_con label .checkmark::after{left:7px;top:5px} /* 방문시간 */ select.selectConType3{padding:13px 10px;font-size:14px} .select_wrap::after{width:5px;height:11px;top:18px;right:10px} /* =================================================== 실시간 견적 =================================================== */ /*0830 김누리 추가*/ .price_note_before{padding:20px;margin-bottom:50px} .price_note_before .price_note_tit{font-size:17px} .price_note_before li{margin-bottom:10px;font-size:15px;line-height:26px} .contact_box .info_wrap.live .box{padding:30px 0} /* 텍스트 */ .contact_box .tit_live{margin-bottom:10px;font-size:20px;font-weight:500;line-height:1.2em;text-align:left} /* 페이지 리스트 */ .page_input_list{background:#F8F8FB;padding:25px 20px;box-sizing:border-box} .page_input_list li{/* flex-direction:column;*/padding:15px 0;font-size:14px} .page_input_list li .text{width:55%} .page_input_list li .input_area{justify-content:flex-end;margin-top:10px;width:25%} .contact_box .info_wrap.live .page_input_list input[type="number"]{width:30px;padding:8px;font-size:13px} .page_input_list li p{margin-left:5px;font-size:13px} /* =================================================== 견적서 =================================================== */ #live_result{padding:50px 0 70px 0 !important} #live_result .result_wrap{padding:50px 15px 30px 15px;margin-bottom:30px} /* 상단 */ #live_result .top{flex-direction:column} #live_result .top .name{order:2} #live_result .top .name h2{font-size:21px;text-align:center} #live_result .top .name h2 span.nm{min-width:100px} #live_result .top .name h2 span.nm::before{bottom:-2px} #live_result .top .logo{text-align:center} #live_result .top .logo img{width:150px} /* 사업자 정보 및 귀하 정보 */ #live_result .info{margin:40px 0;flex-direction:column} #live_result .info table{width:100%;font-size:13px} #live_result .info table.our{width:100%} #live_result .info table tr{border-bottom:1px solid #D2D2D2} #live_result .info table tr td{padding:10px 0} #live_result .info table tr td:first-child{width:25%} /* 사업자정보 */ #live_result .info table.our{border-top:1px solid #666;margin-bottom:30px} #live_result .info table.our::after{width:60px;height:60px;right:auto;left:35%;top:-11px} /* 고객정보 */ #live_result .info table.customer tr td:first-child{width:25%} #live_result .info table.customer{border-top:1px solid #666} #live_result .info table.customer td.name{justify-content:flex-start} #live_result .info table.customer td.name p{padding-left:15px} /* 견적내용 */ #live_result .table_wrap{width:100%;overflow:auto;display:block;-webkit-overflow-scrolling:touch} #live_result table.result{width:700px;font-size:14px} #live_result table.result thead td{padding:10px 0} /* tbody */ #live_result table.result tbody td{padding:10px 0} #live_result table.result tbody td span.price_origin{font-size:15px} #live_result table.result tbody td span.price_total{font-size:15px} /* 견적 총 금액 */ #live_result .price_result_wrap{flex-direction:column;margin-top:30px;padding:25px 15px} #live_result .price_result_wrap h2.tit{font-size:20px} #live_result .price_result_wrap .price_area{margin-top:10px} #live_result .price_result_wrap .price_area h2{font-size:25px} #live_result .price_result_wrap .price_area span.won{font-size:15px;margin-left:2px} #live_result .price_result_wrap .price_area span.vat{margin-left:10px;font-size:13px} /* bottom */ #live_result .bottom{width:100%;padding:0 15px;box-sizing:border-box} #live_result .bottom a{padding:15px 0;font-size:16px} /* =================================================== 게시판 공통사항 =================================================== */ .board_table thead tr td{padding:10px 0;font-size:14px} .board_table tbody tr td{padding:10px 0;font-size:14px} .board_table tbody tr td.title p{/* width:50vw;*/width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .board_table tbody tr td.writer{font-size:12px} /* 모바일일때 보여지는 date & situation */ .board_table tbody tr td.title .only_m{display:flex;margin-top:5px} /* =================================================== 1:1문의 =================================================== */ #board_customer{padding:30px 0 70px 0 !important} #board_customer .board_table tbody tr td.title p::before{width:16px;height:16px} #board_customer .board_table tbody tr td.title.secret p{padding-left:16px} #board_customer .board_table tr td.situation, #board_customer .board_table tr td.nm{display:none} /* 사이즈규격 */ #board_customer .board_table thead tr td.nm{width:0%} #board_customer .board_table thead tr td.title{width:70%} #board_customer .board_table thead tr td.writer{width:30%} /* 글쓰기 버튼 */ #board_customer .write_btn{margin:20px 0} #board_customer .write_btn a{padding:10px 40px;font-size:14px} /* 페이지 영역 */ #board_customer #page_area{margin-top:30px} /* 검색영역 */ #search_area{margin-top:30px} #search_area .wrap{width:100%;padding:15px} #search_area select{padding:10px;font-size:14px;width:25%} #search_area select::after{width:6px;height:12px;top:25px;right:20px} #search_area input[type="text"]{margin:0 3px;width:75%;padding:10px} #search_area .search_btn{font-size:14px; /* select,input +6px 오차로 인해 상하 각 3px 추가 */ padding:13px 0} /* =================================================== 자주 묻는 질문 =================================================== */ /* 탭영역 */ #board_qna .qna_tab li{display:inline-block;min-width:50px;width:auto;height:35px;padding:0 10px;line-height:35px;margin:1% .2% !important;font-size:13px} #board_qna .qna_tab li:nth-last-child(-n+3){margin-top:1%} #board_qna .qna_tab li:nth-child(3){margin-right:0} /* 콘텐츠 영역 */ #board_qna > .con{margin-top:30px} #board_qna .qna_con li .top{padding:15px 0} #board_qna .qna_con li .top p.question{width:5%;font-size:15px} #board_qna .qna_con li .top p.cate{width:90%;font-size:14px} #board_qna .qna_con li .top p.title{width:90%;margin-top:5px;margin-left:5%;margin-right:5%;font-size:15px} #board_qna .qna_con li .slide{padding:15px 15px 15px 0} #board_qna .qna_con li .slide p.answer{font-size:15px} #board_qna .qna_con li .slide p.con{font-size:15px} /* 페이지영역 */ #board_qna #page_area{margin-top:30px} /* =================================================== 공지사항 =================================================== */ #board_news .board_table thead tr td.nm{width:10%} #board_news .board_table thead tr td.writer{width:25%} #board_news .board_table tr td.nm{display:none} #board_news .board_table tbody tr td.title p{/* width:60vw;*/} /* 글쓰기 버튼 */ .write_btn, #board_news .write_btn{margin:20px 0 !important} .write_btn a, #board_news .write_btn a{padding:10px 40px !important} /* =================================================== 프로젝트 수주현황 =================================================== */ /*new 프로젝트 수주현황*/ #new_pjt_list .pjt_tit{font-size:16px} #new_pjt_list .pjt_logo{height:70px} /* =================================================== 진행중 프로젝트 =================================================== */ #board_proj_ing #proj_ing li{width:49%;padding:25px 20px} #board_proj_ing #proj_ing li:nth-child(3){margin-top:2%} #board_proj_ing #proj_ing li:nth-child(3n){margin-right:2%} #board_proj_ing #proj_ing li:nth-child(2n){margin-right:0} /* #board_proj_ing #proj_ing li:last-child{display:none} */ #board_proj_ing #proj_ing p.type{width:100px;font-size:13px;margin-bottom:10px;line-height:30px} #board_proj_ing #proj_ing h2{/* margin-bottom:20px;*/font-size:15px} #board_proj_ing #proj_ing p.date{font-size:13px} #board_proj_ing #page_area{margin-top:30px} /* =================================================== 회사소개 =================================================== */ /* =========== 회사정보 ============ */ /* 아이콘영역 */ #company_info{padding:30px 0 70px 0 !important} /* 추가내용 */ #company_info .info_point{display:flex;margin-top:30px} #company_info .info_point .box{width:100%;margin-left:0;margin-top:15px;height:150px} #company_info .info_point .box::before{width:40px;height:40px;top:-30px} #company_info .info_point .center{left:0;width:100%;text-align:center} #company_info .info_point .box p{padding-bottom:10px;font-size:16px} #company_info .info_point .box h2{font-size:25px} /* #company_info .ico_box ul{display:block;overflow:hidden} #company_info .ico_box ul li{width:49%;float:left;padding:30px 10px;margin-right:2%;margin-bottom:2%} #company_info .ico_box ul li:nth-child(2n){margin-right:0} #company_info .ico_box ul li:last-child{margin-right:0} #company_info .ico_box ul li:nth-last-of-type(-n+2){margin-bottom:0} #company_info .ico_box ul li img{width:50px} #company_info .ico_box ul li p{font-size:14px;margin-top:25px;margin-bottom:5px} #company_info .ico_box ul li h2{font-size:25px} #company_info .ico_box ul li h2 span{font-size:14px} #company_info .info_img{text-align:center;padding:50px 15px} #company_info .info_img::after{display:none} #company_info .info_img h2{margin-bottom:20px;font-size:20px} #company_info .info_img p{font-size:14px} #company_info .txt_info{margin-top:30px;font-size:14px} #company_info .txt_info p{font-size:16px}*/ #company_info .com_detail_info{margin-top:30px} #company_info .com_detail_info ul li{padding:15px 0;font-size:15px} #company_reason .sub_txt_area{padding-top:0} #company_history .sub_txt_area{padding-top:0} #company_map .sub_txt_area{padding-top:0} /* =========== 선택이유 ============ */ /* #company_reason .sub_txt_area h2::after, #company_reason .sub_txt_area h2::before{display:none} */ #company_reason .com_tab{margin-top:0;padding-top:30px;width:450px;margin:0 auto;text-align:center;display:block} #company_reason .com_tab li{float:none;display:inline-block;width:110px;height:110px;font-size:16px;line-height:110px} /* 콘텐츠 */ #company_reason .com_con{margin-top:30px} #company_reason .com_con li span{font-size:18px;margin-bottom:10px} #company_reason .com_con li h2{font-size:23px;margin-bottom:15px} #company_reason .com_con li p{font-size:16px} #company_reason .com_con li p br{display:none} #company_reason .com_con li img{width:100%;margin-top:30px} /* =========== 연혁 ============ */ #company_history{} #company_history .sub_txt_area{margin-bottom:30px} /* #company_history .sub_txt_area h2::before, #company_history .sub_txt_area h2::after{display:none} */ /* 콘텐츠 */ #company_history .con ul li{padding:25px 0;/* flex-direction:column;*/} #company_history .con ul li .years{font-size:25px;/* text-align:center;*//* width:100%;*/} #company_history .con ul li .years span{font-size:20px} #company_history .con ul li .info{width:100%;/* margin-top:10px;*//* text-align:center;*/ margin-top:10px} #company_history .con ul li .info p:nth-of-type(-n+2){margin-top:5px} #company_history .con ul li .info p{margin-top:7px;font-size:15px} /* =========== 인증서 ============ */ #company_about .con ul li{padding:20px 15px 15px} #company_about .sub_txt_area{padding-top:0;margin-bottom:30px} #company_about .sub_txt_area h2{line-height:1.2em} /* #company_about .sub_txt_area h2 br{display:block} */ #company_about .con ul li{} #company_about .con ul li p{font-size:15px} #company_about .con ul li p br{display:none} /* 오시는길 */ /* #company_map .sub_txt_area h2{line-height:1.2em} */ #company_map .con{margin-top:30px} /* =========== 찾아오는길 ============ */ #company_map .con .route{/* margin-bottom:20px;*//* padding-bottom:20px;*/} #company_map .con .route h2{font-size:25px} #company_map .con .route ul{margin-top:20px} #company_map .con .route ul li{margin-bottom:20px;flex-direction:column} #company_map .con .route ul li .wrap{width:100%;margin-bottom:5px} #company_map .con .route ul li span{width:23px;height:23px;line-height:23px;font-size:13px} #company_map .con .route ul li h3{font-size:17px;font-weight:500;line-height:1em;margin-left:5px} #company_map .con .route ul li p{width:100%;font-size:14px} /* 개인정보처리방침 */ #policy{padding-top:50px} #policy br{display:block} #policy_info{padding-top:50px !important;font-size:13px} /*견적문의 완료페이지*/ #cont_complet .tit{font-size:25px} #cont_complet .txt{padding:0 20px;font-size:15px;line-height:26px} #cont_complet .txt br{display:none} /*1201 knr 추가 웹호스팅*/ #hosting_change .title .txt{margin-top:5px;font-size:16px} #hosting_change .title .txt br{display:block} #hosting_change .chg_tbl_wrap{width:100%;overflow-x:scroll} /* #hosting_change .chg_tbl_cont{min-width:550px;width:100%} */ #hosting_change .hosting_chg_tbl th{padding:10px 10px;font-size:16px} #hosting_change .hosting_chg_tbl .td_tit{width:20%;padding:20px 10px;font-size:15px} #hosting_change .hosting_chg_tbl td{font-size:15px} #serv_progress.serv_progress_host .con ul{justify-content:left} #serv_progress.serv_progress_host .con ul li{width:50%} #serv_progress.serv_progress_host .con ul li p br{display:none} #serv_progress.serv_progress_host .con ul li::after{display:block !important} #serv_progress.serv_progress_host .con ul li:nth-child(2n):after{display:none !important} #serv_progress.serv_progress_host .con ul li:nth-child(-n+6){margin-bottom:50px} #serv_progress.serv_progress_host .con ul li:nth-child(7):after{display:none !important} /*1221 knr 추가 제작안내*/ #tem_service .con .function .price_list{padding:10px 10px 30px 10px} #tem_service .con .price_info_wrap .m_br{display:block} #tem_service .con .function ul li .price_info p .setting{letter-spacing:-1px} #tem_service .con .function ul .total_price .price_info .basic_price{font-size:22px} #tem_service .con .function ul .total_price .price_info .price_tit .txt01{font-size:14px} #tem_service .con .function .price_list li img{width:55px;min-height:55px} /*디자인스킨 설명 230526*/ .sample_cont_box .circle_box{width:380px} .sample_cont_box .circle_box .circle{width:200px;height:200px} .sample_cont_box .cont_txt_box .cont_tit{font-size:35px} /*디자인스킨 - 제작사례 260421*/ .skin_slider_wrap .monitor img{max-width:400px;width:100%} .skin_slider_wrap .skin_slider{top:5px} .skin_slider_wrap .swiper-slide{max-width:400px;width:100%;max-height:232px;height:52.2vw; padding:20px;margin:0 10px} .skin_slider_wrap .swiper-slide .more_btn{width:90px;height:90px;bottom: -65px;right: -35px;} .skin_slider_wrap .swiper-slide .more_btn .btn_txt{font-size:14px} .skin_slider_wrap .skin_btn_wrap{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px} .skin_slider_wrap .skin_btn{width:40px;height:40px;position:unset} /*디자인스킨 설명 230526*/ /*블로그 페이지*/ .blog_list li{padding:20px 10px} /* .blog_list li .date{width:60px} .blog_list li .date .year{margin-bottom:0;font-size:16px} .blog_list li .date .day{font-size:20px} */ .blog_list li .date{width:100%;margin-bottom:10px;text-align:right;position:relative} .blog_list li .date p{display:inline-block} .blog_list li .date p.notice{position:absolute;top:0;left:0} .blog_list li .date p.notice img{transform:scale(110%)} .blog_list li .date .year{margin-bottom:0;font-size:16px} .blog_list li .date .day{font-size:16px} /* .blog_list li .blog_tit{width:calc(100% - 60px);padding-right:0} .blog_list li .blog_tit .img_box{width:100px;height:100px} .blog_list li .blog_tit .txt_box{width:calc(100% - 100px)} */ .blog_list li .blog_tit{display:block;width:100%;padding:0} .blog_list li .blog_tit .img_box{max-width:230px;width:100%;height:auto;margin:0 auto 1rem} .blog_list li .blog_tit .img_box img{width:100%} .blog_list li .blog_tit .txt_box{width:100%;padding:0} .blog_list li .blog_tit .tit{margin-bottom:5px;font-size:17px;line-height:140%;white-space:normal} .blog_list li .blog_tit .txt{font-size:15px;line-height:140%} .blog_list li .more_btn{display:none} /*디자인스킨 페이지 상단*/ .sample_cont_box2 .circle_box{max-width:400px} .sample_cont_box2 .circle_box .circle{width:51%;padding-bottom:51%} .sample_cont_box2 .circle_box .circle + .circle{} .sample_cont_box2 .circle_box .circle03{margin:-2% 0 0 0 !important;background:rgba(10,26,63,.9)} .sample_cont_box2 .circle_box .circle04{margin-top:-2%;background:rgba(49,121,225,.9)} .sample_cont_box2 .circle_box .circle03 .circle_inner span{color:#00dbef} .sample_cont_box2 .circle_box .circle04 .circle_inner span{color:#ffc000} .sample_cont_box2 .circle_box .circle .num{width:40px;height:40px;font-size:15px} .sample_cont_box2 .txt_list_box li{width:100%} .sample_cont_box2 .txt_list_box li .list_txt{font-size:17px} .sample_cont_box2 .txt_list_box li:nth-child(n+3){padding-bottom:10px;border-bottom:1px dashed #ddd} .sample_cont_box2 .txt_list_box li:last-child{padding-bottom:0;border-bottom:0} .sample_cont_box2 .cont_txt_box .cont_tit{margin-bottom:15px;font-size:28px} .sample_cont_box2 .cont_txt_box .txt_box{font-size:15px} .sample_cont_box2 .cont_txt_box .txt_box br{display:none} /*회사소개 -- 카운터 영역 추가*/ #count_company .count_list{max-width:30rem;width:100%} #count_company .count_list li{width:50%} #count_company .count_list li:nth-child(n + 3){margin-top:20px} #count_company .count_list li .number{font-size:30px} /*-블로그페이지 250402-*/ .sch_form_area .select_box{min-width:unset;width:105px} .sch_form_area .select_box .select{padding:0 10px;font-size:14px;background: #fff url(../common/img/icon/arrow.png) no-repeat calc(100% - 7px) 50%;} .sch_form_area .input_box{width:calc(100% - 105px)} .sch_form_area .input_box .search_input{padding-right:30px;font-size:15px} .bd_list_top_area.center_bg_sch{padding:0;border:0;background:none} .sch_form_area .input_box .bd_search_btn{width:30px;height:30px;right:5px;background:none} .sch_form_area .input_box .clear_btn{display:none} .sch_form_area .input_box .bd_search_btn .sch_btn{width:26px;padding:5px;} /*디자인스킨*/ #waterfall li{width:49%} #waterfall li .sample_img{height:240px} /*#waterfall li:hover .sample_img img{transform: translateY(calc(240px - 100%))}*/ #waterfall li .more_sample .more_link a, #waterfall li .more_sample .more_link #openPop{font-size:15px;line-height:.7} .new_quick_cont .tel_bt{width:160px} .new_quick_cont .tel_bt .icon{display:none} .new_quick_cont .tel_bt .tel_num{font-size:20px} .new_quick_cont .ft_link_area{width:calc(100% - 160px)} .new_quick_cont .ft_link_area .ft_link_btn{gap:7px} .new_quick_cont .ft_link_area .ft_link_btn .icon{width:16px} .new_quick_cont .ft_link_area .ft_link_btn .icon_tit{font-size:16px} /*디자인스킨 info_260508*/ #sample_info_top .txt_list_box li{width:100%} #sample_info_top .btn_area{max-width:450px} #sample_info_top .btn_area li{height:55px} #sample_info_top .btn_area li img{width:20px} #sample_info_top .btn_area li span{font-size:15px} } @media (max-width:580px){ /* 정기유지관리 */ #serv_price .common_price_table.pc.maintain{width:650px} /* 호스팅이전 체크사항 */ #hosting_change .chg_tbl_cont{min-width:500px;width:100%} #hosting_change .hosting_chg_tbl .td_tit{text-align:center} /* 타사 기능 비교_PC 표 */ #tem_difference.function .tbl_scroll_txt{display:block} #tem_difference.function .touch_info{display:block;width:80%} #tem_difference.function .touch_info p{width:70%;margin:0 auto} #tem_difference.function .con{overflow-x:scroll} #tem_difference.function .con .differ_pc{display:block;width:560px;overflow:auto;-webkit-overflow-scrolling:touch} } @media (max-width:500px){ br.normal{display:block} br.view_1400{display:none} br.view_1280{display:none} br.view_1024{display:none !important} br.view_767{display:none !important} br.view_500{display:block !important} br.view_400{display:none} br.view_319{display:none} #allmenu .info{width:100%} #allmenu .info .ico{width:49%} /* 플로팅배너 */ #floating{bottom:30px;/* bottom:70px;*/right:3px;/* display:none;*/} #floating > div, #floating > a{width:37px;height:37px;box-shadow:3px 3px 8px rgba(0, 0, 0, 0.15);margin-bottom:6px} /* sns */ #footer .bottom_2 ul li img{width:35px;height:35px} /* 하단 퀵메뉴 */ #bottom_quick{height:50px} #bottom_quick .quick_btn p{width:55px;height:30px;line-height:30px} #bottom_quick .top_btn p{width:45px;height:30px;line-height:30px} #bottom_quick .bottom_quick_info{height:50px} #bottom_quick .quick_menu{padding:0} #bottom_quick .customer{width:50%} #bottom_quick .customer span{padding-left:30px;font-size:18px;line-height:50px} #bottom_quick .customer span::before{width:24px;height:24px;line-height:24px;font-size:12px;top:2px !important} #bottom_quick .quick_list{width:50%} #bottom_quick .quick_list ul{width:90px;top:-18px} #bottom_quick .quick_list ul li a img{width:35px;height:35px} #bottom_quick .quick_contact{width:100%} #bottom_quick .quick_contact a{width:50%;font-size:16px;line-height:50px} #bottom_quick .quick_contact a span{width:20px;height:25px;margin-right:0} #bottom_quick.active .bottom_quick_wrap{bottom:-50px} #bottom_quick.attach .quick_list ul{display:none} /* 자동견적 */ #floating .auto_contact p{font-size:12px} #floating .auto_contact::after{width:16px;height:20px;line-height:20px;font-size:18px;top:2px;left:-10px} /* 빠른문의 */ #floating .contact p{font-size:12px} #floating .contact::after{width:18px;height:21px;top:0px;left:-11px} /* 전화 */ #floating .call p{font-size:18px;margin-left:10px} #floating .call:hover{padding:0 13px} #floating .call img{width:21px} /* 카카오톡 */ #floating .kakao img{width:21px} /* TOP */ #floating .top img{width:17px} /* 모바일일때 보여지는 탭메뉴 */ #floating .more_tab .lines::after{top:-6px} #floating .more_tab .lines::before{top:6px} /* 견적서보기 */ #price_tag_popup{padding:0 20px 20px} #price_tag_popup #close_btn{top:20px} /*#price_tag_popup .tit img{width:50%}*/ #price_tag_popup .tit span{display:none} #price_tag_popup .makeway_info{padding:10px 0} #price_tag_popup .makeway_info dl dd{padding-left:10px} #price_tag_popup .price_info{text-align:center} #price_tag_popup .price_info .p_info_cont{display:block} #price_tag_popup .price_info .total_price{position:relative;top:auto;right:auto;text-align:center} #live_result .info table.our::after{width:55px;height:55px;left:39%;top:-10px} /*견적요청 라디오 버튼 간*/ .chk_area{position:absolute;right:20px} #board_6{width:100% !important} /*건별유지보수 텝메뉴*/ #maintain_price .tabs{width:98%} #maintain_price .tabs li{font-size:13px} .sub_inner .txt_area h2 br{display:block} .sub_inner .txt_area h2::before{background:url(../img/main/title_obj_L_color_2.svg) no-repeat;width:17px;height:59px;left:-30px} .sub_inner .txt_area h2::after{background:url(../img/main/title_obj_R_color_2.svg) no-repeat;width:17px;height:64px;right:-30px} .sub_inner .txt_area.white h2::before{background:url(../img/main/title_obj_L_white_2.svg) no-repeat} .sub_inner .txt_area.white h2::after{background:url(../img/main/title_obj_R_white_2.svg) no-repeat} /* =========== company =========== */ #company .con_box ul li{float:left;width:50%} #company .con_box ul li:nth-child(-n+2){margin-bottom:25px} #company .con_box ul li:nth-last-child(-n+2){padding-top:25px} #company .con_box ul li:nth-child(2)::after{display:none} #company .con_box ul li:nth-last-child(-n+2):before{display:block} #company_about .sub_txt_area h2 br{display:block} #company_map .sub_txt_area h2 br{display:block} #company_reason .sub_txt_area h2 br{display:block} #company_map .sub_txt_area h2::before, #company_reason .sub_txt_area h2::before, #company_about .sub_txt_area h2::before{background:url(../img/main/title_obj_L_color_2.svg) no-repeat;width:17px;height:64px;left:-40px} #company_map .sub_txt_area h2::after, #company_reason .sub_txt_area h2::after, #company_about .sub_txt_area h2::after{background:url(../img/main/title_obj_R_color_2.svg) no-repeat;width:17px;height:64px;right:-40px} #company_map .con .detail_info{padding:0 4% 3%} #company_map .con .detail_info li{font-size:15px} #company_map .con .detail_info li img{width:26px;height:26px} #company_map .con .detail_info li .tit{width:40px} #company_map .con .detail_info li .txt{padding:0;line-height:26px} #company_map .con .route{padding:0 4% 3%} #company_map .con .route h2{margin-bottom:25px} #company_map .con .location_info{padding-bottom:10px;font-size:15px} #company_map .con .location_info .loca_info_icon{width:40px} #company_map .con .location_info .loca_info_icon img{width:26px} /* #company_map .con .location_info .loca_cont{padding-left:10px} */ #company_map .con .location_info > div{margin-bottom:20px} #company_map .con .location_info .loca_cont{width:calc(100% - 30px)} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ============================================서브====================================== */ /* ====================================================================================== */ /* ====================================================================================== */ .sub_sec .title h2 br{display:block} #sub_visual{height:250px} #sub-header_m{top:259px} #sub_visual .visual_title p br.view_500{display:block} /* 회사소개 전용 서브배너 */ #sub_visual .only_company h2{font-size:7vw} #sub_visual .only_company .scroll p{font-size:2.5vw} /* Section 01 ==> 적응형/반응형 비교 */ #homepage1 .con{display:block} #homepage1 .home{width:100%} /* #homepage1 .home.adaptive{margin-bottom:50px} #homepage1 .home.adaptive{margin-right:0} */ #homepage1 .home.responsive{margin-bottom:30px} #homepage1 .home.responsive{margin-right:0} #homepage1 .home .top img{max-width:250px;width:100%} #homepage1 .home .top p br.view_1024{display:none} /* Section add ==> 제작 전 확인 */ /* 탭영역 */ #home_before .con .tab_area{width:620px} #home_before .con .tab_area li{width:120px} #home_before .con .con_area .tab_con .txt_area .dots_box p{display:block} /* Section 02 ==> 제작과정(공통) */ #serv_progress .con ul li, #serv_progress .con ul.list_4way li{width:50%;margin-bottom:50px} #serv_progress .con ul.list_4way li:nth-child(-n+4){margin-bottom:50px} #serv_progress .con ul li:nth-child(9){margin-bottom:0} /* #serv_progress .con ul li:nth-child(-n+5){margin-bottom:50px} */ #serv_progress .con ul li:nth-last-child(1){margin-bottom:0} #serv_progress .con ul li:nth-child(2n):after, #serv_progress .con ul.list_4way li:nth-child(2n):after{display:none !important} #serv_progress .con ul li:nth-child(3n):after, #serv_progress .con ul.list_4way li:nth-child(3n):after{display:block !important} #serv_progress .con ul li:nth-child(6):after, #serv_progress .con ul.list_4way li:nth-child(6):after{display:none !important} #serv_progress .con ul li span{font-size:13px;margin-bottom:7px} #serv_progress .con ul li img{margin:12px 0;width:44px} #serv_progress.pro .con ul li{width:50%} #serv_progress.pro .con ul li:nth-child(4){margin-bottom:50px} /* Section 03 ==> 무료제공(공통) */ #serv_function .con ul{width:100%} #serv_function .con ul li{width:50%;margin-bottom:20px} #serv_function .con ul li:nth-child(-n+5){margin-bottom:20px} #serv_function .con ul li:nth-last-child(2){margin-bottom:0} /* Section 04 ==> 제작 전 준비(공통) */ #serv_materials .con ul li, #serv_materials.shop .con ul li{margin-right:0;margin-bottom:2%;width:100%} #serv_materials.home .con ul li:nth-child(3){margin-right:0} /* Section 05 ==> 가격안내(공통) */ #serv_price .table_wrap{padding-top:0} #serv_price .table_wrap .touch_info{display:none} #serv_price .common_price_table.pc, .info_wrap.pc{display:none} #serv_price .common_price_table.pc.pc_tbl_show, .info_wrap.pc.pc_tbl_show{display:table} #serv_price .hosting_table_m.main tbody th{width:10%} #serv_price .common_price_table, #serv_price .common_price_table tbody th, #serv_price .common_price_table tbody td{font-size:14px} #maintain_price .main_price_table{font-size:14px} #maintain_price .main_price_table thead th, #maintain_price .main_price_table thead td{font-size:14px} /* 모바일일때 */ #serv_price .common_price_table.mobile{display:inline-table} #serv_price .common_price_table.mobile tbody th{padding:8px 5px;text-align:center} #serv_price .common_price_table.mobile tbody td{padding:8px 10px;text-align:center} #serv_price .common_price_table.mobile tbody td.function .basic_fun{text-align:left} #serv_price .common_price_table.mobile tbody td.function span{width:110px;margin:0;padding-left:15px;margin-right:15px;box-sizing:border-box} #serv_price .common_price_table.mobile tbody td.function span::before{left:0} #serv_price.main .info_wrap .info{font-size:14px} .info_wrap.mobile{display:block} /* ======================================= 쇼핑몰 ======================================= */ /* Section 01 ==> 맞춤형 쇼핑몰 추천 */ #shopping1 .con ul{display:block} #shopping1 .con ul li{width:100%;margin-right:0%;margin-bottom:2%;padding:20px 10px} #shopping1 .con ul li:last-child{margin-bottom:0} #shopping1 .con ul li h2 br{display:block} /* ======================================= 웹프로그램 ======================================= */ /* Section 03 ==> 웹솔루션 체험 */ #pro_solution .con{display:block} #pro_solution .con .solu_box{width:100%;margin-left:0;margin-bottom:30px} #pro_solution .con .solu_box img{width:300px} /* Section 04 ==> 다양한 프로그램 경험 */ #pro_exper .con ul li{width:49.25%} #pro_exper .con ul li:nth-child(4n){margin-right:1.5%} #pro_exper .con ul li:nth-child(2n){margin-right:0 !important} #pro_exper .con ul li:nth-child(3){margin-top:1.5%} /* #pro_exper .con ul li:nth-last-child(-n+4){margin-bottom:1.5%} #pro_exper .con ul li:nth-last-child(-n+2){margin-bottom:0} */ #pro_exper .con ul li:nth-child(3n){margin-right:1.5% !important} #pro_exper .con ul li:nth-child(6n){margin-right:0 !important} #program1.sub_sec .title h2 strong{letter-spacing:-2px} /* ======================================= 웹호스팅 ======================================= */ /* Section 01 ==> (호스팅) 호스팅 선택 이유 */ #hosting1 .con ul{width:80%;margin:0 auto} #hosting1 .con ul li{width:50%} #hosting1 .con ul li:nth-child(-n+2){margin-bottom:50px} #hosting1 .con ul li::after{display:none} /* Section 02 ==> (호스팅) 웹/서버 비교 */ #hosting2 .con{display:block} #hosting2 .con .box{width:100%} #hosting2 .con .box.web_host{margin-right:0;margin-bottom:2%} .hosting_table_m{display:inline-table;background:#fff} .hosting_table_m thead td{padding:17px 0 11px} .hosting_table_m tbody th{padding:8px 5px 7px;line-height:125%;text-align:center} .hosting_table_m tbody td{padding:8px 10px 7px} /* 호스팅이전 체크사항 */ #hosting_change .hosting_chg_tbl .td_tit{font-size:15px} #hosting_change .hosting_chg_tbl td{padding:10px 10px 10px 15px;font-size:15px} /*웹포스팅 vs 서버호스팅*/ .hosting_cont_area .cont_box{width:100%} .hosting_cont_area .cont_box .cont_txt br{display:none} .hosting_cont_area .cont_box .cont_tit2{margin:20px 0 10px } /* ======================================= 유지관리 ======================================= */ #maintain1 .con ul li{width:100%;padding:30px 10px} #maintain1 .con ul li.one{background:linear-gradient( rgba(65, 65, 65, 0.85), rgba(65, 65, 65, 0.85) ),url(../img/sub/main_img_1.jpg) center center no-repeat} #maintain1 .con ul li.two{background:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ),url(../img/sub/main_img_2.jpg) center center no-repeat} #maintain1 .con ul li.three{background:linear-gradient(rgba(65, 65, 65, 0.85), rgba(65, 65, 65, 0.85) ),url(../img/sub/main_img_3.jpg) center center no-repeat} #maintain1 .con ul li.four{background:linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ),url(../img/sub/main_img_4.jpg) center center no-repeat} /* 건별유지관리 콘텐츠 영역 */ #maintain_price .table_wrap .touch_info{display:block;width:80%;/* top:25%;*/top:8rem} #maintain_price .table_wrap{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;position:relative;margin-bottom:20px} #maintain_price .main_price_table{width:480px} #maintain_price .main_price_table thead th{padding:11px 0 8px} #maintain_price .main_price_table thead td{padding:11px 0 8px} #maintain_price .main_price_table tbody th{padding:8px 5px} #maintain_price .main_price_table tbody td.price{padding:8px 5px} #maintain_price .main_price_table tbody td{padding:8px 5px 8px 10px} /* ======================================= 디자인샘플 ======================================= */ /* Section 01 ==> 맞춤형 템플릿 */ #template1 .con .box{width:100%;margin:0 0 20px;display:block} #template1 .con .box:nth-child(2n){margin-right:0} #template1 .con .box:nth-child(n + 3){margin-top:0} #template1 .con .box .img_box{width:80%;margin:0 auto} #template1 .con .box .txt_box{width:100%;text-align:center} #template1 .con .box p{margin:10px 0 0 0} #template1 .con .box:nth-child(2) .txt_box{text-align:center} #tem_example .con .box h2 br{display:block} #template1 .con .box p br{display:block} /* #tem_process .con ul li img{width:100%} #list_tab_area ul li{width:80px;height:35px;margin:0 1% 2%;line-height:35px} #list_tab_area ul li a{font-size:14px}*/ #tem_service .con .function h3.title{margin-bottom:20px} #tem_service .con .function ul li{padding:15px 10px} #tem_service .con .function ul li p{font-size:15px} #tem_difference .con .differ_pc tbody th{padding:6px 10px 5px 15px;font-size:15px} #tem_difference .con .differ_pc tbody td{padding:10px 10px 7px;font-size:15px} #tem_difference .con .differ_pc tbody td.our{font-size:17px} #tem_difference .con .differ_pc tbody td.our p{font-size:15px} /* Section 03 ==> 최고의 서비스 환경 */ #tem_service .con .function ul{width:100%} /* ======================================= 템플릿 상세내용 ======================================= */ /* 터치 스크롤 안내 */ #tem_detail_2 .touch_info, #tem_detail_5 .touch_info{display:flex} /* Section 02 ==> 메뉴구성 */ /* 사이트맵 구성 */ #tem_detail_2 .con .site_map{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;display:block;padding-bottom:45px} #tem_detail_2 .con .site_map .site_map_inner{width:480px} /* Section 04 ==> 기본제공기능 */ #tem_detail_4 .con ul{width:100%} #tem_detail_4 .con ul li{width:120px;height:110px} /* Section 05 ==> 웹호스팅 및 유지관리 */ #tem_detail_5 .con{width:100%;overflow:auto;display:block;-webkit-overflow-scrolling:touch} #tem_detail_5 .tem_table{width:480px} /* ======================================= 포트폴리오 ======================================= */ #port_list #list_tab_area ul{width:100%} #port_list #list_tab_area ul li{margin:0;display:inline-block;min-width:6 0px;width:auto;height:35px;line-height:35px;padding:0 14px;margin:0 .2% 2%} #port_list #list_tab_area ul li:first-child{margin-left:0} #port_list #list_tab_area ul li a{width:100%;font-size:14px} #port_list .con .port_box .box h2.port_title{font-size:17px;margin-top:5px} #port_list .con .port_box .box p.port_cate{font-size:13px} /* 마우스오버 */ #port_list .con .port_box .box .more_box span{font-size:13px} /* =================================================== 견적문의 =================================================== */ #contact_tab ul li{font-size:17px;letter-spacing:-1.8px} /* 문의유형 체크박스 */ .reque_con{width:50%} .box.category .reque_con{width:50%;margin-right:0} .box.type .reque_con{width:50%;margin-right:0} .box.design .reque_con{width:50%;margin-right:0} .reque_con.chk_lng:nth-of-type(3){margin-top:0} .chk_lng{width:33.33%;margin-top:0} /* .reque_con.reque_con_3{width:20% !important;margin-top:30px !important} */ .reque_con_4{width:70% !important} .reque_con_4 input{width:100% !important} .contact_box .info_wrap .box{width:100%;margin-right:0;margin-bottom:20px} /* .contact_box.live .info_wrap .box.num{margin-bottom:20px}*/ .contact_box .info_wrap .w50p{width:100%;margin-right:0} .contact_box .info_wrap textarea{/* height:200px;*/} .contact_box .info_wrap .box.compa, .contact_box .info_wrap .box.num, .contact_box .info_wrap .box.homepage, .contact_box .info_wrap .box.visit_date, .contact_box .info_wrap .box.visit_add{margin-right:0} /* 파일첨부 */ .file .filebox .input_file{width:calc(98.5% - 100px);font-size:14px} .file .filebox label{width:100px;font-size:14px} /* .file .filebox{overflow:hidden} .file .filebox .input_file{width:100%} .file .filebox label{margin-top:10px;float:right} */ /* .file .filebox .input_file{width:65%} .file .filebox label{width:33%} */ /* =================================================== 실시간 견적 =================================================== */ .page_input_list li{flex-direction:column;padding:15px 0;font-size:14px} .page_input_list li .text{width:100%;padding-left:5px} .page_input_list li .input_area{justify-content:flex-end;margin-top:10px;width:100%} .contact_box .info_wrap.live .page_input_list input[type="number"]{width:25px;padding:8px;font-size:13px} .page_input_list li p{margin-left:5px;font-size:13px} #company_info .com_detail_info ul li.half_1{padding-left:10px} /* =================================================== 회사소개 =================================================== */ /* =========== 회사정보 ============ */ #company_info .info_img{padding:30px 15px} #company_info .com_detail_info ul li.half_1{width:85px} #company_reason .com_tab{margin-top:0;padding-top:30px;width:320px;margin:0 auto;text-align:center;display:block} #company_reason .com_tab li{float:none;display:inline-block;width:90px;height:90px;font-size:15px;line-height:90px} #company_reason .com_con li h2{font-size:20px} #company_reason .com_con li p{font-size:14px} /* #company_reason .sub_txt_area h2::before, #company_reason .sub_txt_area h2::after{display:none} */ /* =========== 인증서 ============ */ #company_about .con ul{display:flex;flex-wrap:wrap;justify-content:space-between} #company_about .con ul li{width:48%} #company_about .con ul li p br{display:none} /* #company_about .con ul li img{width:100%} */ /* #company_about .sub_txt_area h2::before, #company_about .sub_txt_area h2::after{display:none} */ /* =========== 연혁 ============ */ #company_history .con ul li{/* flex-direction:column;*/flex-direction:column;padding:25px 0px 25px 12px} #company_history .con ul li .years{/* text-align:center;*/width:100%;font-size:25px;line-height:1.3em;margin-bottom:20px} #company_history .con ul li .years br{display:none} #company_history .con ul li .info{width:100%;margin-top:0;/* text-align:center;*/} #company_history .con ul li .info p{width:100%} #company_history .con ul li .info p:first-child{margin-top:0} /* #company_history .sub_txt_area h2::before, #company_history .sub_txt_area h2::after{display:none} */ /* =========== 찾아오는길 ============ */ #company_map .sub_txt_area h2{line-height:1.2em} /*#list_tab_area ul li{width:75px;margin:0 .2% 2%}*/ } @media (orientation:landscape) and (max-width:1024px){ /* #floating{flex-direction:row;bottom:10px} #floating > div, #floating > a{margin-bottom:0;margin-right:5px} #floating > div:last-child{margin-right:0} */ } @media (orientation:landscape) and (max-width:767px){ #sub_visual.company{height:500px} #sub_visual .only_company{height:100%} #sub_visual .only_company .wrap{top:calc(50% - 40px)} #sub-header_m.company{top:500px} } @media (orientation:landscape) and (max-width:767px){ #floating{/* flex-direction:row;bottom:10px;*/display:none} #floating > div, #floating > a{margin-bottom:0;margin-right:5px} #floating > div:last-child{margin-right:0} /* 하단 퀵메뉴 */ #bottom_quick{height:50px} #bottom_quick .quick_btn p{width:55px;height:30px;line-height:30px} #bottom_quick .top_btn p{width:45px;height:30px;line-height:30px} #bottom_quick .bottom_quick_info{height:50px} #bottom_quick .quick_menu{padding:0} #bottom_quick .customer{width:50%;padding:0 5px} #bottom_quick .customer span{font-size:18px;line-height:50px} #bottom_quick .customer span::before{top:-6px} #bottom_quick .quick_list{width:50%} #bottom_quick .quick_list ul{width:90px} #bottom_quick .quick_list ul li a{line-height:50px} #bottom_quick .quick_list ul li a img{width:35px;height:35px} #bottom_quick .quick_contact a{font-size:16px;line-height:50px} #bottom_quick .quick_contact a span{display:none} #bottom_quick.active .bottom_quick_wrap{bottom:-50px} } @media (max-width:480px){ /*서브*/ .sub_sec{padding:60px 20px} .sub_sec .new_title h2{font-size:30px} .sub_sec .new_title h2 .m_br{display:block} .sub_sec .new_title .txt{font-size:15px} /*sub 페이지별 상단 타이틀 230823*/ .new_sub_txt_area{padding:30px 20px} .new_sub_txt_area .new_tit{font-size:22px} .new_sub_txt_area .new_txt{font-size:15px} /*서브타이틀 신규*/ .new_sub_tit_area{margin-bottom:30px} .new_sub_tit_area .sub_tit{font-size:30px} .new_sub_tit_area .new_txt{font-size:16px} .new_sub_tit_area .chk_list{padding:2rem 1rem} #sub_visual .only_company{left:0} #sub_visual .only_company .wrap{box-sizing:border-box;padding:0 20px} #sub_visual .only_company .t_txt{max-width:100%} #sub_visual .only_company .scroll{left:10px;bottom:20px} /*----홈페이지/쇼핑몰 핵심기능----*/ .provide_list, .provide_list.list_3way, .provide_list.list_4way{gap:25px 2%} .provide_list li{padding:30px 15px} .provide_list li .num{width:35px;height:35px;top:-17px} .provide_list li .tit{font-size:16px} .provide_list li .icon img{width:50px} .provide_list.list_4way li .tit{font-size:17px} .provide_list li .txt{margin-top:5px;font-size:14px; color:#666} .provide_list.provide_list_mb li{width:100%} #bt_inq_area{padding:80px 20px} #bt_inq_area .btn_area{max-width:220px;gap:10px} #bt_inq_area .btn_area li{width:100%} /*홈페이지제작 - 쇼핑몰제작 필수사항 공통*/ .provide_new_list .txt_box .num{width:35px;height:35px} .provide_new_list .txt_box .tit{font-size:20px} .provide_new_list .txt_box .txt{font-size:16px} /*--------------------- 0908 knr 추가 견적문의end실시간자동견적 ------------------------------------------*/ .privacy_message{text-align:center} .btn_info_cont{display:block;width:100px;font-size:14px} .contact_box .info_wrap .box{margin-bottom:10px} .price_note_before li{font-size:14px} .info_wrap_live .input_box_wrap .input_box:nth-child(3){margin-bottom:10px} .new_form_area .w_agree_box{margin-top:20px;overflow:unset;justify-content:center} .new_form_area .w_box .agree_box{justify-content:center} /*0908 knr 추가*/ #home_before .tab_cont .txt_box_area .txt{display:none} #home_before .tab_cont .cont_box_area .cont_list li{height:auto;padding:10px 20px;line-height:26px} /*디자인스킨 1128*/ #waterfall li .cont_wrap .state{top:5px;left:5px;height:25px;line-height:25px;font-size:12px;letter-spacing:-.5px} #waterfall li .cont_wrap .state2{left:55px;width:auto;padding:0 7px} #waterfall li .cont_wrap .premium{top:35px;left:5px} /* 호스팅 이전과정 */ /* #serv_progress.serv_progress_host .con ul li h3{font-size:16px} */ /* 디자인스킨 제작안내_제작비용 */ #tem_service .con .function ul .total_price .price_info .basic_price{font-size:19px} /* 디자인스킨 제작안내_디바이스분기점 */ .compare_sec .title .txt{display:none} /*디자인스킨 설명 230526*/ .sample_cont_box .circle_box{width:100%} .sample_cont_box .circle_box .circle{width:52%;height:auto;padding-bottom:52%} .sample_cont_box .circle_box .circle02{margin-left:-4%} .sample_cont_box .circle_box .circle .circle_inner{font-size:17px} .sample_cont_box2 .circle_box .circle .num{width:35px;height:35px;font-size:14px} .sample_cont_box2 .txt_list_box li .chk{width:20px} .sample_cont_box2 .txt_list_box li .list_txt{font-size:16px} .sample_cont_box .cont_txt_box .cont_tit{font-size:26px;word-break:keep-all} .sample_cont_box .cont_txt_box .cont_tit br{display:none} .sample_cont_box .cont_txt_box .txt_box{font-size:14px;line-height:24px} /*디자인스킨 - 제작사례 260421*/ .skin_slider_wrap .swiper-slide .more_btn{bottom:-50px;right: 0} .skin_slider_wrap .type_code{width:110px;height:33px;font-size:13px;top:-15px} /*디자인스킨 설명 230526*/ /*------------------견적문의 신규------------------*/ .new_form_area{padding:30px 0 0;border-top:2px solid #333} .new_form_area .box_tit{font-size:16px;margin-bottom:5px;line-height:130%} .new_form_area .c_input, .new_form_area .c_select{height:50px;font-size:14px;line-height:50px} .new_form_area .c_textarea{font-size:14px;line-height:24px} .new_form_area .w_box{margin-bottom:15px} .new_form_area .w_box .l_box{width:100%;margin-bottom:20px;float:none} .new_form_area .w_box .r_box{width:100%;float:none} /*서브페이지,게시판구성*/ .new_form_area .form_inner_box .w_box .l_box{margin-bottom:15px} .new_form_area .w_box .l_box .d_l_box{width:100%;margin-bottom:15px;float:none} .new_form_area .w_box .l_box .d_r_box{width:100%;margin:0;float:none} .new_form_area .w_box .half_chk_box label{height:50px;font-size:14px;line-height:50px} .new_form_area .radio_area li{height:50px} .new_form_area .radio_area label{font-size:14px;line-height:50px} .new_form_area .f_chk_area li{height:50px} .new_form_area .f_chk_area label{font-size:14px;line-height:50px} .new_form_area .w_box .agree_box label{font-size:14px} .new_form_area .w_box .catpcha_box{width:100%;height:55px;position:relative} .new_form_area .w_box .catpcha_box #captcha{position:absolute;left:50%;top:-10px;transform:translateX(-50%) scale(.7)}/*스케일로 크기 줄이고 가운데 맞추기위해 포지션*/ .new_form_area .file .filebox .input_file{height:50px} .new_form_area .file .filebox label{height:50px;line-height:50px;font-size:14px} /*유입경로*/ .r_radio_area li{text-align:center;font-size:14px} .r_radio_area li:nth-child(2n){border-left:1px solid #ddd} /*레이아웃유형*/ #help_txt_box .help_inner .tab_menu li{font-size:14px} /*------------------견적문의 신규 끝------------------*/ /*new 프로젝트 수주현황*/ #new_pjt_list > li{width:100%;margin-right:0} /*블로그 페이지*/ .blog_list li{display:block} .blog_list li .date{width:100%;margin-bottom:10px;text-align:right} .blog_list li .date p{display:inline-block} .blog_list li .date .year{margin-bottom:0;font-size:15px} .blog_list li .date .day{font-size:15px} .blog_list li .blog_tit{display:block;width:100%;padding:0} .blog_list li .blog_tit .img_box{max-width:230px;width:100%;height:auto;margin:0 auto 1rem} .blog_list li .blog_tit .img_box img{width:100%} .blog_list li .blog_tit .txt_box{width:100%;padding:0} .blog_list li .blog_tit .tit{font-size:16px} .blog_list li .blog_tit .txt{display:block;width:100%;font-size:13px;word-break:break-all} /*디자인스킨 페이지 상단*/ .sample_cont_box2{padding:40px 20px} .sample_cont_box2 .circle_box .circle .circle_inner{font-size:15px} .sample_cont_box2 .cont_txt_box .cont_tit{font-size:25px} .sample_cont_box2 .cont_txt_box .txt_box{font-size:14px} .sample_cont_box2 .link_btn li{font-size:15px} /*회사소개 -- 카운터 영역 추가*/ #count_company .count_list li .icon{width:90%;margin-bottom:10px;padding-bottom:90%} #count_company .count_list li .count_tit{font-size:12px} #count_company .count_list li .number{font-size:25px} .cont_txt_box .new_txt_box .n_box{font-size:17px} /*스킨 디테일*/ #tem_detail_1 .con .skin_info_area{padding:30px 20px} #tem_detail_1 .skin_info_area .type_list{right:10px} #tem_detail_1 .skin_info_area .type_list li{width:70px;font-size:14px} #tem_detail_1 .skin_info_area .box_tit{font-size:17px} #tem_detail_1 .skin_info_area .skin_info li .info_tit{font-size:14px} #tem_detail_1 .skin_info_area .skin_info li .info_txt{font-size:14px} #tem_detail_1 .skin_info_area .info_btn_area li{height:50px;font-size:15px;line-height:50px} #tem_detail_1 .skin_info_area .info_btn_area li a, #tem_detail_1 .skin_txt_box .info_btn_area li button{font-size:15px} #tem_detail_1 .skin_info_area .info_btn_area li img{display:none} #tem_detail_1 .skin_info_area .skin_info2 li{font-size:14px} #tem_detail_1 .con .skin_txt_box h2.tem_title_1 .sample_price{width:100%;padding-top:10px;margin-top:10px;border-top:1px solid #ddd;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center} #tem_detail_1 .skin_example .example_list .slide_img_box{margin-bottom:10px} #tem_detail_1 .skin_example .example_list .slide_tit{font-size:14px} .blog_btn_area li{padding:1rem;height:auto;font-size:15px;line-height:120%;box-sizing:border-box;display:flex;align-items:center;justify-content:center} .blog_btn_area2{max-width:300px;justify-content:center;gap:10px 2%} .blog_btn_area2 li{width:49%;font-size:16px} #waterfall li .cont_wrap{padding:10px} #waterfall li .sample_img{height:180px} /*#waterfall li:hover .sample_img img{transform: translateY(calc(180px - 100%));}*/ #waterfall li .sample_tit{margin-bottom:5px;padding-bottom:0;border-bottom:0;font-size:13px} #waterfall li .sample_tit b{width:100%;padding:0;font-size:14px} #waterfall li .sample_price{text-align:center} #waterfall li .sample_price .o_cost{display:none} #waterfall li .sample_price .s_cost{width:100%;font-size:16px;text-align:center;float:none} #waterfall li .sample_price .s_cost font{font-size:13px} #waterfall li .more_sample{height:auto} #waterfall li .more_sample .more_link{padding:0 10px 10px;flex-wrap:wrap;border-radius:0 0 10px 10px;gap:6px} #waterfall li .more_sample .more_link a{width:calc(50% - 3px);border-radius:3px;padding:10px;font-size:13px;font-weight:500} #waterfall li .more_sample .more_link a:nth-child(1){border-radius:3px;background:#e5f1f7;color:#0271b0} #waterfall li .more_sample .more_link a:nth-child(2){background:#cfd3db;color:#0f2149} #waterfall li .more_sample .more_link #openPop{width:100%;padding:10px;border-radius:3px;background:#fbd9ce;font-size:13px;font-weight:500;color:#ea4309} /*프로그램 페이지 - 슬라이드 추가*/ .wave_cont li{width:170px;height:60px;padding:10px;margin-right:5px;font-size:15px} .page_bt_btn{width:200px;height:55px;margin-top:30px} .page_bt_btn img{width:20px} .page_bt_btn span{font-size:15px} /*실시간견적서*/ .result_btns li{height:50px;} .result_btns li img{display:none} .result_btns li span{font-size:14px} .new_quick_cont .tel_bt{width:130px} .new_quick_cont .tel_bt .tel_num{font-size:17px} .new_quick_cont .ft_link_area .ft_link_btn01{width:45%} .new_quick_cont .ft_link_area .ft_link_btn02{width:55%} .new_quick_cont .ft_link_area .ft_link_btn .icon_tit{font-size:15px} .new_quick_cont .ft_link_area{width:calc(100% - 130px)} /*디자인스킨 뷰 - 자주묻는질문 260507*/ .skin_faq_list .faq_tit_box{padding:15px 20px} .skin_faq_list .faq_tit_box .question_box .question{padding-right:30px;font-size:16px} .skin_faq_list .faq_tit_box .arr{right:15px} .skin_faq_list .faq_txt_box{padding:20px} .skin_faq_list .faq_txt_box .txt_box{flex-wrap:wrap;gap:10px} .skin_faq_list .faq_txt_box .faq_text{width:100%} .skin_faq_list .faq_txt_box .faq_text a{word-break:break-all} /*디자인스킨 info_260508*/ #sample_info_top .btn_area{max-width:220px;gap:10px} #sample_info_top .btn_area li{width:100%} } @media (max-width:400px){ br.normal{display:block} br.view_1400{display:none} br.view_1280{display:none} br.view_1024{display:none} br.view_768{display:none} br.view_500{display:none !important} br.view_400{display:block !important} br.view_319{display:none} /*디테일 공유버튼*/ #tem_detail_1 .con .txt_box .top .info .share{transition:all .3s} #tem_detail_1 .con .txt_box .top .info .share.on{padding:5px 10px;border-radius:40px;box-shadow:0 0 10px 5px rgba(0,0,0,.1);background:#fff} #tem_detail_1 .share .facebook_s, #tem_detail_1 .share .twiter_s, #tem_detail_1 .share .google_s{position:relative} #tem_detail_1 .con .txt_box .top .info .share li{position:relative;right:auto;float:left;height:35px} #tem_detail_1 .con .txt_box .top .info .share li+li{margin-left:5px} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ===========================================메인======================================= */ /* ====================================================================================== */ /* ====================================================================================== */ /*디자인스킨*/ .masonry .item{width:48%} /*1221 knr 추가*/ #tem_service .con .function .price_list li{width:50%;padding:20px 10px} #tem_service .con .function ul .total_price{width:50%} #tem_service .con .function ul li .price_info .basic_price .txt01{margin-left:0;font-size:14px} #tem_service .con .function ul li .price_info .basic_price .txt02{font-size:14px;color:rgba(255,255,255,.7);letter-spacing:-1px} /* =========== contact ============ */ .contact_box .sub_txt_area{padding-top:50px} .sub_inner .txt_area.white h2::before, .sub_inner .txt_area h2::before{width:14px;height:55px} .sub_inner .txt_area.white h2::after, .sub_inner .txt_area h2::after{width:14px;height:55px} .sub_inner .txt_area h2{font-size:25px} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ============================================서브====================================== */ /* ====================================================================================== */ /* ====================================================================================== */ .sub_txt_area h2{font-size:25px} .sub_txt_area p{font-size:15px} .sub_txt_area p br{display:none} #sub_visual .visual_title h1{font-size:30px} #sub_visual .visual_title p{font-size:16px} .sub_sec .title h2{font-size:25px} /* 홈페이지제작 기본기능 */ #serv_price .common_price_table.mobile tbody td.function span:nth-child(2n){margin-right:0} /* Section 01 ==> 적응형/반응형 비교 */ /*#homepage1 .home .top img{width:200px}*/ #serv_materials .con ul li p br{display:none} #serv_materials .con ul li p br.view_400{display:block} /* Section add ==> 제작 전 확인 */ #home_before .con .con_area .tab_con .txt_area p br.view_400_319{display:block} /* Section 02 ==> 제작과정(공통) */ /* Section 01 ==> 맞춤형 프로그램 */ #program1 .con ul li{width:100%} #program1 .con ul li:nth-last-child(2){margin-bottom:50px} #program1 .con ul li img{width:180px} /* Section 02 ==> 제작과정(공통) */ /* #serv_progress.pro .con ul li{width:50%;height:200px} */ /* Section 03 ==> 웹솔루션 체험 */ #pro_solution .con .solu_box img{width:100%} /* Section 06 ==> 바로가기 */ #tem_contact .title br.mobile{display:block} /* ======================================= 디자인샘플 ======================================= */ /* Section 01 ==> 맞춤형 템플릿 */ #tem_service{padding-bottom:40px !important} #tem_service .con .function{padding:40px 0} /* Section 02 ==> 디자인 변경 예시 */ #tem_example .con .box .object span{padding:10px 25px} /* Section 03 ==> 최고의 서비스 환경 */ #tem_service .con .function ul{width:100%} #tem_service .con .function ul li{float:left;width:50%;/* margin-bottom:35px;*/height:auto;padding:15px 0} /* Section 05 ==> 템플릿 제작 과정 */ #tem_process .con ul li{width:50%} #tem_process .con ul li:nth-last-of-type(-n+5){margin-bottom:40px} #tem_process .con ul li:nth-last-of-type(-n+2){margin-bottom:0} #tem_process .con ul li::after{top:calc(50% - 30px)} #tem_process .con ul li:nth-child(2n):after{display:none !important} #tem_process .con ul li:nth-child(3n):after{display:block} #tem_process .con ul li:nth-of-type(-n+5):after{display:block} #tem_process .con ul li:nth-child(5n):after{display:block} #tem_process .con ul li img{width:25vw} /* 디바이스 분기점 비교 kyh 22.12.23 */ #tem_difference .con .differ_pc tbody td img{width:18px} #tem_difference.compare_sec .tbl_scroll_txt{display:block} #tem_difference.compare_sec .con{overflow-x:scroll} #tem_difference.compare_sec .touch_info{display:block;width:100%} #tem_difference.compare_sec .touch_info p{width:70%;margin:0 auto} #tem_difference.compare_sec .con .differ_pc{display:block;width:380px;margin:0 auto;overflow:auto;-webkit-overflow-scrolling:touch} #tem_difference.compare_sec .con .differ_pc thead td{width:27%} #tem_difference.compare_sec .con .differ_pc thead td.our{width:27%} #tem_difference.compare_sec .con .differ_pc thead td.device{width:40%} /* ======================================= 템플릿 상세내용 ======================================= */ /* Section 04 ==> 기본제공기능 */ #tem_detail_4 .con ul{width:80%} #tem_detail_4 .con ul li{float:left;width:50%;margin-bottom:35px;height:auto;padding:0} #tem_detail_4 .con ul li:nth-last-child(-n+2){margin-bottom:0} /* */ /* #tem_detail_4 .con ul li img{width:66px} #tem_detail_4 .con ul li p{font-size:14px;margin-top:10px} */ /* 서브메뉴 */ #sub-header_m .m_depth li a{padding:15px 8px} /* ======================================= 스킨 ======================================= */ /* 콘텐츠영역 */ #template_list .con .tem_box .box{width:100%;margin-top:40px;margin-right:0} #template_list .con .tem_box .box:nth-child(2){margin-top:40px} #template_list .con .tem_box .box:nth-child(3n){margin-right:0} /* 페이지영역 */ #page_area{margin-top:50px} #page_area ul li{margin:0 2px;width:25px;height:25px} #page_area ul li a{font-size:14px;width:25px;height:25px} /* datepicker */ .ui-datepicker{width:15em !important} /* 검색영역 */ #search_area select{width:30%} #search_area input[type="text"]{width:50%} #search_area .search_btn{width:20%} #waterfall{column-count:1} /* =================================================== 진행중 프로젝트 =================================================== */ #board_proj_ing #proj_ing li{width:100%;margin-right:0;padding:25px 20px} #board_proj_ing #proj_ing li:nth-child(2){margin-top:2%} #board_proj_ing #proj_ing li:nth-child(3n){margin-right:0%} #board_proj_ing #proj_ing li:last-child{display:none} #company_reason .com_tab{width:100%} /* 추가내용 */ #company_info .info_point .box{height:200px} #company_info .info_point .box p{padding-bottom:10px;font-size:14px} #company_info .info_point .box h2{font-size:25px} #company_map .con .detail_info{padding:0 0 3%} #company_map .con .route{padding:0 0 3%} /* ======================================= 견적문의 ======================================= */ /* 문의 탭 영역 */ #contact_tab ul{margin-top:0} #contact_tab ul{padding-top:60px} #contact_tab ul li{font-size:17px;padding:0 0 5px} .file .filebox .input_file{width:calc(98.5% - 100px)} /* .reque_con:nth-of-type(2){margin-top:20px} */ /* =================================================== 실시간 견적 =================================================== */ #live_result .top{padding-top:35px} #live_result .top .name h2 br{display:block} #live_result .top .name h2 span{margin-bottom:10px} #live_result .info table tr td:first-child{width:40%} #live_result .info table.customer tr td:first-child{width:40%} #live_result .info table.our::after{left:58%} #company_about .con ul li p{font-size:14px} /*견적문의 완료페이지*/ #cont_complet .tit{margin-bottom:10px;font-size:20px} #cont_complet .txt{padding:0 20px;font-size:14px;line-height:24px} .new_form_area .radio_area label .radio{display:none} .new_form_area .f_chk_area label .chk{display:none} #tem_detail_1 .share .facebook_s, #tem_detail_1 .share .twiter_s, #tem_detail_1 .share .google_s{position:absolute} } @media (max-width:360px){ #waterfall li .cont_wrap .state2{left:5px;top:35px}/*1128*/ #waterfall li .cont_wrap .premium{top:66px} .blog_btn_area{max-width:200px;gap:10px} .blog_btn_area li{width:100%} .sample_cont_box2 .circle_box .circle .num{width:30px;height:30px;font-size:12px} .new_quick_cont .ft_link_area .ft_link_btn .icon{display:none} } @media(max-width:320px){ /*서브*/ .sub_sec{padding:60px 15px} .sub_sec .new_title h2{font-size:28px} /*서브타이틀*/ .new_sub_tit_area .sub_tit_box{margin-bottom:10px} .new_sub_tit_area .sub_tit{font-size:26px} .new_sub_tit_area .new_txt{font-size:15px} /*디자인스킨 페이지 상단*/ .sample_cont_box2 .circle_box .circle{width:100%;padding-bottom:40%;border-radius:5px} .sample_cont_box2 .circle_box .circle:before{width:90%;height:90%;border-radius:5px} .sample_cont_box2 .circle_box .circle + .circle{margin:5px 0 0 !important} .sample_cont_box2 .circle_box .circle .num{top:0;left:0;border-radius:3px} .cont_txt_box .new_txt_box .n_box p br{display:none} .new_form_area .w_box .catpcha_box{height:auto;padding:20px;background:#f7f7f7;justify-content: center;gap:10px 2%} .catpcha_box .kcaptcha_image{width:100%} .catpcha_box #mcaptcha_Key{width:calc(98% - 40px);height:40px;} .catpcha_box #captchaReload{width:40px;height:40px} .new_quick_cont .tel_bt{width:110px} .new_quick_cont .tel_bt .tel_num{font-size:14px} .new_quick_cont .ft_link_area{width:calc(100% - 110px)} .new_quick_cont .ft_link_area .ft_link_btn .icon_tit{font-size:14px} } @media (max-width:319px){ br.normal{display:block} br.view_1400{display:none} br.view_1280{display:none} br.view_1024{display:none} br.view_768{display:none} br.view_500{display:none} br.view_400{display:none} br.view_319{display:block} /*디자인스킨*/ #waterfall{column-count:1} #waterfall .no_data{width:100%} /*실시간견적문의 버튼*/ .reque_con_padding label .checkmark{top:2px !important} .reque_con .memo_btn{top:2px;left:103px;width:15px;height:15px;line-height:15px} #contact_tab ul li{margin:0 3px;font-size:16px} /* allmenu영역 */ #allmenu .menu01 > li > a{font-size:17px} #allmenu .menu02 li a{font-size:14px} #allmenu .ico img{width:14px;height:14px} #allmenu .ico p{font-size:13px} /* 하단 퀵메뉴 */ #bottom_quick .customer span{padding-left:27px;font-size:16px} #bottom_quick .quick_contact a{font-size:14px} /* 제작문의 클릭 시 나오는 제작문의 폼 */ #fixed_contact_form .modal .top_title h2{font-size:22px} #fixed_contact_form .modal .top_title p{font-size:14px} #fixed_contact_form .modal_wrap .box > input::placeholder{font-size:12px} #fixed_contact_form .modal_wrap .box > input:-ms-input-placeholder{font-size:12px} /* 파일 */ #fixed_contact_form .modal_wrap .box.bd_file input{font-size:12px} #fixed_contact_form .modal_wrap .box.bd_file label{font-size:13px} #fixed_contact_form .modal_wrap .box.agree_check label p{font-size:13px} /* 버튼 */ #fixed_contact_form .modal_wrap .req_btn a{font-size:14px;padding:15px 0 15px 3px;letter-spacing:3px} /* 템플릿 제작문의 폼 */ #template_contact_form .modal .top_title h2{font-size:22px} #template_contact_form .modal .top_title p{font-size:14px} #template_contact_form .modal_wrap .box > input::placeholder{font-size:12px} #template_contact_form .modal_wrap .box > input:-ms-input-placeholder{font-size:12px} /* 파일 */ #template_contact_form .modal_wrap .box.bd_file input{font-size:12px} #template_contact_form .modal_wrap .box.bd_file label{font-size:13px} #template_contact_form .modal_wrap .box.agree_check label p{font-size:13px} /* 버튼 */ #template_contact_form .modal_wrap .req_btn a{font-size:14px;padding:15px 0 15px 3px;letter-spacing:3px} .sub_inner .txt_area p{font-size:15px;letter-spacing:-0.2px} .sub_inner .txt_area h2{font-size:25px} .common_btn a{padding:20px 35px;/* font-size:15px;*/} /* 서브메뉴 */ #sub-header_m .m_depth li a{padding:12px 8px;font-size:13.5px} #sub-header_m .m_depth li a:before{right:5px} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ===========================================메인======================================= */ /* ====================================================================================== */ /* ====================================================================================== */ /* =========== template ============ */ #template{/* padding-bottom:50px !important;*/} #template .sub_inner{width:100%} /* 아이콘박스 */ #template .con_box .ico_box{margin:40px 0 70px 0} #template .con_box .ico_box ul li{width:50%;margin-bottom:30px} #template .con_box .ico_box ul li:nth-last-child(-n+2){margin-bottom:0px} #template .con_box .ico_box ul li:nth-child(-n+3){margin-bottom:30px} #template .con_box .ico_box ul li img{width:80px} #template .con_box .ico_box ul li p{/* font-size:14px;*/margin-top:7px} /* #template .tem_box .tem_pc ul li .link_box a{width:60px;height:60px} */ #template .tem_box .tem_pc ul li .link_box a{width:90px;height:90px} #template .tem_box .tem_pc ul li .link_box p{font-size:14px} #template .tem_box .tem_pc ul li .link_box img{width:10px} #template .tem_box .tem_pc .tem_next, #template .tem_box .tem_pc .tem_prev{width:35px;height:35px} #template .tem_box .tem_pc .tem_next::after, #template .tem_box .tem_pc .tem_prev::after{font-size:13px} #template .tem_mobile{left:15%} #tem_example .con .box h2{font-size:18px} /* =========== company ============ */ #company{} #company .txt_area{margin-bottom:30px} #company .con_box ul{display:block;overflow:hidden} #company .con_box ul li{float:left;width:50%} #company .con_box ul li:nth-child(-n+2){margin-bottom:15px} #company .con_box ul li:nth-last-child(-n+2){padding-top:15px} #company .con_box ul li p{font-size:13px;margin-top:20px;margin-bottom:3px} #company .con_box ul li h2.number{font-size:22px} #company .con_box ul li h2 span{font-size:14px;margin-left:2px} #company .con_box .common_btn{margin-top:50px} #company_map .sub_txt_area h2::before, #company_history .sub_txt_area h2::before, #company_reason .sub_txt_area h2::before, #company_about .sub_txt_area h2::before{display:none} #company_map .sub_txt_area h2::after, #company_history .sub_txt_area h2::after, #company_reason .sub_txt_area h2::after, #company_about .sub_txt_area h2::after{display:none} /* ====================================================================================== */ /* ====================================================================================== */ /* ====================================================================================== */ /* ===========================================서브======================================= */ /* ====================================================================================== */ /* ====================================================================================== */ /*페이지별 상단 타이틀 230823*/ .new_sub_txt_area .new_tit{font-size:20px} .new_sub_txt_area .tel_num span{display:none} #sub_visual .visual_title p br.normal{display:none} #sub_visual .visual_title p br.view_280{display:block} /* 회사소개 전용 서브배너 */ /* Section 01 ==> 적응형/반응형 비교 */ #homepage1 .home .top p br.view_1024{display:block} #homepage1 .home .bottom .txt p{font-size:14px} #home_before .tab_cont .cont_box_area .cont_list li{font-size:14px} #home_before .tab_cont .cont_box_area .cont_txt{font-size:14px} /*----------0908 knr 추가------------*/ #home_before .check_list_tab li{width:48%;padding:0;float:left} #home_before .check_list_tab li span{display:none} #home_before .check_list_tab li+li{margin-left:2%} #home_before .check_list_tab li:nth-child(odd){margin-left:0} #home_before .con .con_area .tab_con .img_area{height:200px} /* Section 02 ==> 제작과정(공통) */ #serv_progress .con ul li h3{font-size:16px} #serv_progress .con ul li p{box-sizing:border-box;padding:0 10px;font-size:14px} #serv_progress .con ul li p br{display:none} /* Section 03 ==> 무료제공(공통) */ #serv_function .con ul li{/* height:220px;*/margin-bottom:10px} #serv_function .con ul li:nth-child(-n+5){margin-bottom:10px} #serv_function .con ul li h3{margin-top:-10px;font-size:16px} #serv_function .con ul li p{font-size:14px;box-sizing:border-box;padding:0 10px} #serv_function .con ul li p br{display:none} /* Section 04 ==> 제작 전 준비(공통) */ #serv_materials .con ul li h2{font-size:16px} #serv_materials .con ul li p{font-size:14px} /* Section 05 ==> 가격안내(공통) */ #serv_price .common_price_table tbody tr{font-size:14px} #serv_price .common_price_table.mobile tbody th{width:35%;padding:13px 5px 10px} #serv_price .common_price_table.mobile tbody td{padding:13px 10px 9px} #serv_price .common_price_table.mobile tbody td.function .basic_fun{width:100%} #serv_price .common_price_table.mobile tbody td.function span{width:105px;margin-right:6px !important} .info_caption{font-size:14px} /*쇼핑몰/웹프로그램 핵심기능*/ .provide_list li{width:100%} .provide_list.list_2way li{width:100%} .provide_list.list_4way li{width:100%} /* Section 01 ==> 맞춤형 프로그램 */ #program1 .con ul li h2{font-size:18px} #program1 .con ul li p{margin-top:8px;font-size:14px} /* Section 03 ==> 웹솔루션 체험 */ #pro_solution .con .solu_box h2{font-size:20px} /* Section 04 ==> 다양한 프로그램 경험 */ #pro_exper .con ul li{font-size:13px;width:100%;margin-right:0} #pro_exper .con ul li:nth-child(2){margin-top:1.5%} #pro_exper .con ul li p{font-size:15px;margin-top:7px} #pro_solution .con .solu_box .btns a{font-size:14px;padding:12px 0} /* 웹호스팅 */ #hosting1 .con ul{width:100%} #hosting1 .con ul li p{font-size:14px} #hosting2 .con .box p{font-size:14px;word-break:keep-all} /* Section 03 ==> (웹호스팅) 가격안내 */ .hosting_table_m{font-size:14px} .hosting_table_m.main tbody th{width:23%;padding:12px 5px 9px} .hosting_table_m tbody th{width:34%;padding:12px 5px 9px} .hosting_table_m tbody td{padding:12px 5px 9px} #hosting_change .chg_tbl_cont{min-width:420px} /* Section 03 ==> (유지관리) 가격안내_건별유지관리/디자인 */ #maintain_price .main_price_table{/* width:420px;*/font-size:14px} /* ======================================= 디자인샘플 ======================================= */ /* Section 01 ==> 맞춤형 템플릿 */ #template1 .con .box h2{font-size:18px} #template1 .con .box p{font-size:14px} /* Section 03 ==> 최고의 서비스 환경 */ #tem_service .con .function ul{width:100%} #tem_service .con .function ul li p{font-size:14px} /*디자인스킨 1128*/ #waterfall li .cont_wrap .state{top:15px;left:15px;height:25px;line-height:25px} #waterfall li .cont_wrap .state2{left:72px;width:auto;padding:0 9px} #waterfall li .cont_wrap .premium{top:45px;left:15px} /* ======================================= 템플릿 상세내용 ======================================= */ /* Section 04 ==> 기본제공기능 */ #tem_detail_4 .con ul{width:100%} /* Section 04 ==> 타사 기능 비교 */ #tem_difference .con .differ_pc tbody th{font-size:15px} #tem_difference .con .differ_pc tbody td{font-size:15px} #tem_difference .con .differ_pc tbody td p{font-size:15px} #tem_difference .con .differ_pc tbody td.our{font-size:16px} /* Section 05 ==> 템플릿 제작 과정 */ #tem_process .con ul li{height:150px} #tem_process .con ul li::after{width:6px;/* top:calc(50% - 20px);*/height:14px} #tem_process .con ul li p{font-size:14px} #tem_process .con ul li img{width:100px} /* ======================================= 템플릿 상세내용 ======================================= */ #tem_detail_1 .con .txt_box .middle ul li{font-size:13px;margin-bottom:10px} #tem_detail_2 .con .site_map{padding-bottom:55px} #tem_detail_2 .con .site_map ul li.depth1{font-size:14px} #tem_detail_2 .con .site_map ul li{font-size:13px} #tem_detail_2 .con .site_map p.ps_text{font-size:13px;bottom:20px} #tem_detail_2 .ps_area p{font-size:13px} #tem_detail_3 .con .txt_area ul li p{font-size:13px} #tem_detail_3 .con .txt_area ul li span{font-size:12px} #tem_detail_4 .con ul li p{font-size:13px} #tem_detail_5 .tem_table{font-size:13px} /* Section 06 ==> 자주 묻는 질문 */ #tem_detail_6 .con ul li a p{font-size:14px} #tem_detail_6 .con ul li a p::before{font-size:14px} /* answer */ #tem_detail_6 .con ul li .answer{font-size:13px} /* ======================================= 포트폴리오 ======================================= */ #port_list .con .port_box .box{width:100%;margin-right:0} #port_list .con .port_box .box:nth-child(2){margin-top:40px} #port_list .con .port_box .box:nth-child(3n){margin-right:0} /* ======================================= 견적문의 ======================================= */ /* 문의 탭 영역 */ .contact_box .tit{font-size:16px} .reque_con{width:100%} .box.category .reque_con{width:100%} .box.type .reque_con{width:100%} .box.design .reque_con{width:100%} .reque_con label .checkmark{width:15px;height:15px;top:0} .reque_con label p{font-size:13px} /* .reque_con.chk_lng:nth-of-type(3){margin-top:15px} */ .reque_con label p span.template{font-size:12px} .reque_con label .checkmark::after{left:4px;top:4px;width:5px;height:3px} .reque_con_3 label{padding-right:190px} .reque_con_3 .lang_input{width:170px !important} .contact_box .info_wrap input[type="text"]{font-size:14px} .contact_box .input_box .new_tit{font-size:14px} .contact_box .info_wrap input[type="text"]::placeholder{font-size:12px} .contact_box .info_wrap input[type="text"]:-ms-input-placeholder{font-size:12px} .file .filebox p{font-size:13px} .file .filebox label{font-size:13px} /* 파일첨부 */ .file .filebox .input_file{width:calc(98.5% - 80px);font-size:13px} .file .filebox label{width:80px;font-size:13px} .agree_wrap .privacy_textarea{font-size:10px;padding:15px} .contact_box .privacy_message .tit{font-size:14px;padding-left:22px} .privacy_message.reque_con label .checkmark{width:18px;height:18px} .privacy_message.reque_con label .checkmark::after{left:6px} /* =================================================== 실시간 견적 =================================================== */ .contact_box .info_wrap.live .box{padding:30px 0} .contact_box .tit_live{font-size:18px} /* 텍스트 */ /* 페이지 리스트 */ .page_input_list li{font-size:13px} .contact_box .info_wrap.live .page_input_list input[type="number"]{font-size:12px} .page_input_list li p{font-size:12px} /* =================================================== 1:1문의 =================================================== */ #board_customer .write_btn a{font-size:13px;padding:10px 40px} #search_area select{font-size:13px} #search_area .search_btn{font-size:13px} .board_table tbody tr td{font-size:13px} .board_table tbody tr td.title .only_m .date{font-size:12px} .board_table tbody tr td.title .only_m .date{font-size:11px} /* =================================================== 자주 묻는 질문 =================================================== */ #board_qna .qna_con li .top p.cate{font-size:13px} #board_qna .qna_con li .top p.question, #board_qna .qna_con li .top p.title{font-size:14px} /* =================================================== 진행중 프로젝트 =================================================== */ #board_proj_ing #proj_ing li{padding:20px 13px} #board_proj_ing #proj_ing p.type{/* font-size:12px;*/} #board_proj_ing #proj_ing h2{/* font-size:14px;*/} #board_proj_ing #proj_ing p.date{font-size:12px} /* =================================================== 실시간 견적 =================================================== */ #live_result table.result{width:700px;font-size:13px} /* =================================================== 회사소개 =================================================== */ /* #company_info .txt_info{font-size:13px} #company_info .com_detail_info ul li{padding:10px 0;font-size:13px} #company_info .com_detail_info ul li.half_1{padding-left:10px;width:80px} */ #company_info .info_point .box{height:180px} #company_info .info_point .box h2{font-size:20px} #company_info .com_detail_info ul li{/* font-size:13px;*/} /* =========== 선택이유 ============ */ #company_reason .com_tab{width:100%} #company_reason .com_tab li{width:70px;height:70px;line-height:70px} /* 콘텐츠 */ #company_reason .com_con li span{font-size:14px;margin-bottom:10px} #company_reason .com_con li h2{font-size:18px} #company_reason .com_con li p{font-size:13px} /* =========== 연혁 ============ */ #company_history .con ul li .info p{font-size:14px} /* =========== 인증서 ============ */ #company_about .con ul li{/* height:80vw;*/} #company_about .con ul li p{display:inline;/* font-size:13px;*/} /* 오시는길 */ #company_map .con .route h2{font-size:18px} #company_map .con .route ul li span{width:15px;height:15px;line-height:15px;font-size:10px} #company_map .con .route ul li h3{font-size:16px} #company_map .con .route ul li p{font-size:13px} #company_history .sub_txt_area h2::after{right:-20px} #company_history .sub_txt_area h2::before{left:-20px} #company_about .sub_txt_area p br{display:none} #company_map .con .detail_info li{font-size:14px} #company_map .con .location_info{font-size:14px} /* 터치 스크롤 안내 */ .touch_info img{width:80px} .touch_info p{font-size:13px;padding:10px 20px} /* 페이지영역 */ #page_area ul li{margin:0} #page_area ul li a{/* font-size:12px;*/} /* datepicker */ .ui-datepicker{width:14em !important} /* 견적 총 금액 */ #live_result .price_result_wrap{padding:25px 15px 50px 15px} #live_result .price_result_wrap .price_area{position:relative} #live_result .price_result_wrap .price_area span.vat{position:absolute;left:50%;transform:translateX(-50%);bottom:-25px;margin-left:0} #search_area .wrap{padding:10px} #search_area select{padding:7px} #board_proj_list #pro_list li{width:100%;margin-right:0;margin-top:10px} #board_proj_list #pro_list li:nth-of-type(3){margin-top:10px} #board_proj_list #pro_list li:nth-of-type(2){margin-top:10px} #board_proj_list #pro_list li:nth-child(3n){margin-right:0} #live_result .top{padding-top:29px} #live_result .top .logo img{width:120px} #live_result .top .name h2{font-size:19px} /* ================== 하단내용 ================== */ #footer .top{padding-bottom:25px} #footer .top .txt h2{font-size:16px} #footer .top .txt p{font-size:13px} #footer .top .common_btn a{font-size:14px} #footer .top .common_btn a img{width:6px} /* 하단1 */ /* 정보 */ #footer .bottom_1{/* margin-top:25px;*/} #footer .bottom_1 .info p{display:block;margin-right:0;/* font-size:13px;*/} #footer .bottom_1 .customer{margin-top:30px} #footer .bottom_1 .customer p{font-size:14px} #footer .bottom_1 .customer h2{font-size:25px;margin-bottom:5px} #footer .bottom_1 .customer span{/* font-size:13px;*/} /* 하단2 */ #footer .bottom_2{margin-top:30px} #footer .bottom_2 .link{} #footer .bottom_2 .links a{width:110px;/* font-size:13px;*/padding:12px 0} #footer .bottom_2 .links a:first-child{margin-right:0px} /* copy */ #footer .copy{/* font-size:13px;*/} .price_note{padding:20px} .price_note .price_note_tit{font-size:14px} .price_note li{font-size:13px} /*1202 knr 추가*/ #hosting_change .hosting_chg_tbl td{font-size:14px} #hosting_check_list .check_list_area .tit{font-size:15px} #hosting_change .hosting_chg_tbl .td_tit{font-size:14px} #hosting_check_list .check_list_area .txt{font-size:13px;line-height:23px} /* #serv_progress.serv_progress_host .con ul li{width:100%} */ /* #serv_progress.serv_progress_host .con ul li::after{display:none !important} */ #serv_progress.serv_progress_host .con ul li:nth-child(-n+9){margin-bottom:30px} /*디자인스킨 설명 230526*/ .sample_cont_box .circle_box .circle{width:100%;height:100px;border-radius:10px;height:auto} .sample_cont_box .circle_box .circle:before{border-radius:10px} .sample_cont_box .circle_box .circle02{margin:10px 0 0} .sample_cont_box .link_btn{width:100%} .sample_cont_box .link_btn li{width:49%} .sample_cont_box .link_btn li + li{margin-left:2%} /*디자인스킨 설명 230526*/ } /* 모바일 100vh 오류 해결 */ @media only screen and (max-device-width:767px){ #allmenu{height:calc(var(--var, 1vh) * 100)} }