/** * Created by PhpStorm. * Date : 2021-11-12 * Developer : SeHwan Hwang * Description : wp_responsive.css * ⓒ 2021. WebPlanet Co. All Rights Reserved. */ @charset "utf-8"; /**********************************************************************************************************************/ /* 작성방법 */ /* 1. 모든 스타일은 클래스명 .wp_wrap 을 시작으로 작성한다. 2. 공통 스타일의 클래스명은 cm_ 접두어를 사용한다. */ /**********************************************************************************************************************/ @media (max-width: 1400px) { /**********************************************************************************************************************/ /* HEADER */ /**********************************************************************************************************************/ .wp_wrap header .mnu_main_pop .main_pop_inner .pop_mnu_cls button { margin-right: 0; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - MAIN */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ABOUT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - WORK */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CAREERS */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CONTACT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* FOOTER */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ } @media (max-width: 1250px) { /* 박스 이너 */ .wp_wrap .cm_inner { width: 100%; padding: 0 10px; } } @media (max-width: 1200px) { /**********************************************************************************************************************/ /* HEADER */ /**********************************************************************************************************************/ .wp_wrap header .mnu_main_pop .main_pop_inner .search_bx_wrap .search_bx form { display: flex; justify-content: space-between; width: 80%; padding: 5px 0; border-bottom: 2px solid #ccc; } .main_pop_inner .search_bx_wrap .search_bx { display: flex; justify-content: center; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - MAIN */ /**********************************************************************************************************************/ /* 올뎃 서비스 영역********************************************** */ .wp_wrap #p_main #s_service .service_inner .service_tit h3 { margin-bottom: 25px; } .wp_wrap #p_main #s_service .service_inner .service_card .card:nth-of-type(3) { padding-top: 20px; } .wp_wrap #p_main #s_service .service_inner .service_card .card:nth-of-type(4) { padding-bottom: 20px; } .f_start { display: flex; justify-content: center !important; } .f_end { display: flex; justify-content: center !important; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ABOUT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - WORK */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CAREERS */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CONTACT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* FOOTER */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ } @media (max-width: 1000px) { .f_start { display: flex; justify-content: center !important; } .f_end { display: flex; justify-content: center !important; } } @media (max-width: 992px) { /**********************************************************************************************************************/ /* HEADER */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - MAIN */ /**********************************************************************************************************************/ .wp_wrap footer .footer_top .footer_cont .footer_utill { width: 60%; } .wp_wrap .cm_tab .tab_inner .tab_cont .tab_container .tab_des p { font-size: 26px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ABOUT */ /**********************************************************************************************************************/ .wp_wrap .cm_tit2 { font-size: 46px; } /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_VISION///////////////////////////////////////////////////////*/ .wp_wrap #p_about #s_vision .vision_des .des_box { display: flex; flex-direction: column; justify-content: space-between; } .wp_wrap #p_about #s_vision .vision_des .des_box .vision_txt { padding: 20px 0; } /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_VISION 종료///////////////////////////////////////////////////////*/ .wp_wrap #p_about #s_intro .intro_tit { flex-direction: column; align-items: flex-start; } .wp_wrap #p_about #s_intro .intro_tit .tit_des { padding: 10px 0; } .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des { align-items: flex-start; flex-direction: column; } .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des li.explanation_txt { padding: 10px 0; } .wp_wrap #p_about #s_business .work_container .work_cont .work_list li.f_start { align-items: center; } .wp_wrap #p_about #s_business .work_container .work_cont .work_list li.f_end { align-items: center; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - WORK */ /**********************************************************************************************************************/ .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu li a { font-size: 21px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CAREERS */ /**********************************************************************************************************************/ /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_CULTURE///////////////////////////////////////////////////////*/ /* 리스트영역 */ .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li { padding: 30px 28px; } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li:nth-child(1) { justify-content: center; } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li:nth-child(2) { justify-content: center; } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li:nth-child(3) { justify-content: center; } .wp_wrap #p_careers #s_culture .culture_inner .culture_list li { flex-direction: column; margin: 25px 0; } .wp_wrap #p_careers #s_culture .culture_inner .culture_list li .txt_tit p { font-size: 28px; font-family: var(--font-no); } .wp_wrap #p_careers #s_culture .culture_inner .culture_list li .txt_des p { font-size: 19px; font-family: var(--font-no); } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li .box_inner .img_txt p { padding: 10px 10px; font-size: 16px; } /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_CULTURE 종료///////////////////////////////////////////////////////*/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CONTACT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* FOOTER */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ } @media (max-width: 860px) { .wp_wrap #p_main #s_work .work_inner .work_card .card a .img_frame { width: 320px; height: 270px; padding: 20px 0; } } @media (max-width: 768px) { /**********************************************************************************************************************/ /* HEADER */ /**********************************************************************************************************************/ /* HEADER - 메뉴 영역 */ .wp_wrap header .header_inner .mnu_box .gnb { display: none; } /* 모바일 버튼 */ .wp_wrap header .header_inner .mnu_box .mo_mnu { display: block; } /* -------------------------------------------2022.07.20 추가사항 - 햄버거메뉴, 메뉴팝업추가 ---------------------------------- */ /* 햄버거 메뉴 */ .wp_wrap header .header_inner .ham_menu_btn { display: none; } .wp_wrap header .mnu_main_pop { display: none; } /* -------------------------------------------2022.07.20 추가사항 - 햄버거메뉴, 메뉴팝업추가 ---------------------------------- */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - MAIN */ /**********************************************************************************************************************/ .wp_wrap footer .footer_top .footer_cont .footer_utill { width: 70%; } .wp_wrap #p_main #s_service .service_inner .service_card .card .card_inner { width: 100%; } /* 올뎃 서비스 영역********************************************** */ .wp_wrap #p_main #s_service .service_inner .service_tit h3 { margin-bottom: 25px; } .wp_wrap #p_main #s_service .service_inner .service_card .card:nth-of-type(2) { padding-top: 20px; } .wp_wrap #p_main #s_service .service_inner .service_card .card:nth-of-type(5) { padding-bottom: 20px; } /* 올뎃 워크 영역********************************************** */ .wp_wrap #p_main #s_work .work_inner .work_tit h3 { margin-bottom: 25px; } /* 올뎃 메디어 영역********************************************** */ .wp_wrap #p_main #s_media .media_inner .media_tit h3 { margin-bottom: 25px; } /* 프로젝트 문의하기 영역 ******************************************** */ .wp_wrap #p_main #s_inquiry { margin-bottom: 40px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ABOUT */ /**********************************************************************************************************************/ .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des li.explanation_txt { width: unset; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - WORK */ /**********************************************************************************************************************/ .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu li a { font-size: 16px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CAREERS */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CONTACT */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* FOOTER */ /**********************************************************************************************************************/ /**********************************************************************************************************************/ } @media (max-width: 700px) { .wp_wrap #p_main #s_work .work_inner .work_card .card a .img_frame { width: 260px; height: 270px; padding: 20px 0; } } @media (max-width: 576px) { /**********************************************************************************************************************/ /* HEADER */ /**********************************************************************************************************************/ /* HEADER - inner */ .wp_wrap header .header_inner { padding: 20px 0; align-items: center; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - MAIN */ /**********************************************************************************************************************/ /* 공통부분 */ .wp_wrap .cm_tit2 { font-size: 30px; } .wp_wrap .cm_tit3 { font-size: 22px; } .wp_wrap .cm_tit4 { font-size: 22px; } .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu li { width: 33.3333%; text-align: center; } .wp_wrap .cm_tab .tab_inner .tab_cont .tab_container .tab_des p { text-align: center; font-size: 20px; } /* 비디오영역 */ .wp_wrap #p_main #s_video { /*height: 40vh;*/ } .wp_wrap #p_main #s_video .video_inner .video_box h2 { font-size: 24px; } /* 올뎃서비스 카드영역 */ .wp_wrap #p_main #s_service .service_inner .service_card .card .card_inner { width: 100%; height: auto; } /* 올뎃캠퍼스영역 */ .wp_wrap #p_main #s_campus .campus_inner { padding: 70px 0; } .wp_wrap #p_main #s_campus .campus_inner .txt_box .main_txt { font-size: 22px; } .wp_wrap #p_main #s_campus .campus_inner .txt_box .sub_txt { font-size: 15px; } .wp_wrap #p_main #s_campus .campus_inner .txt_box .sub_txt { padding: 20px 0 40px; } .wp_wrap #p_main #s_campus .campus_inner .img_box { order: 1; } .wp_wrap #p_main #s_campus .campus_inner .txt_box { order: 2; text-align: center; } /* 올뎃서비스영역 */ .wp_wrap #p_main #s_service .service_inner { padding: 70px 0; } .wp_wrap #p_main #s_service .service_inner .service_card .card { padding: 20px 0; } .wp_wrap #p_main #s_service .service_inner .service_card .card .card_inner .card_tit p { font-size: 22px; } /* 올뎃워크 영역 */ .wp_wrap #p_main #s_work .work_inner { padding: 70px 0; } .wp_wrap #p_main #s_work .work_inner .work_card { margin: 10px 0; } .wp_wrap #p_main #s_work .work_inner .work_card .card a .img_frame { width: 200px; height: 220px; padding: 20px 0; } /* 올뎃파트너 영역 */ .wp_wrap #p_main #s_partners .partners_inner { padding: 70px 0; } .wp_wrap #p_main #s_partners .partners_inner .partners_card { margin: 10px 0; } /* 올뎃 미디어영역 */ .wp_wrap #p_main #s_media .media_inner { padding: 70px 0; } /* 프로젝트 문의하기 영역 */ .wp_wrap #p_main #s_inquiry .inquiry_inner .txt_box { padding: 50px 0; } .wp_wrap #p_main #s_inquiry .inquiry_inner .txt_box .btn_box { display: flex; justify-content: center; padding: 30px 0 0; } .wp_wrap #p_main #s_inquiry .inquiry_inner .txt_box .main_txt { text-align: center; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ABOUT */ /**********************************************************************************************************************/ .wp_wrap #p_about { padding: 120px 0 40px; } .wp_wrap .cm_tab .tab_inner .tab_cont { display: flex; flex-direction: column; align-items: center; } .wp_wrap .cm_tab .tab_inner .tab_tit .cm_tit2 { text-align: center; } /* //////////////////////////////////////////////////////PAGE - ABOUT - INTRODUCE///////////////////////////////////////////////////////*/ .wp_wrap #p_about #s_intro { padding: 50px 0; } .wp_wrap #p_about #s_intro .intro_tit { flex-direction: column; align-items: flex-start; } .wp_wrap #p_about #s_intro .intro_tit .tit_box { padding: 20px 0; } .wp_wrap #p_about #s_intro .intro_tit .tit_des p { font-size: 15px; } .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des { flex-direction: column; } .wp_wrap #p_about #s_explanation .explanation_list>li { padding: 40px 0px; border-bottom: 1px solid #BEBEBE; } .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des { display: flex; justify-content: space-between; align-items: flex-start; } .wp_wrap #p_about #s_explanation .explanation_list li .explanation_des li.explanation_tit { color: #282828; font-size: 24px; font-family: var(--font-no); padding: 10px 0; } /* //////////////////////////////////////////////////////PAGE - ABOUT - INTRODUCE 종료///////////////////////////////////////////////////////*/ /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_VISION///////////////////////////////////////////////////////*/ .wp_wrap #p_about #s_vision { padding: 0px; } .wp_wrap #p_about #s_vision .vision_cont .cont_tit { padding: 20px 0; } .wp_wrap #p_about #s_vision .vision_cont .cont_tit p { font-size: 28px; } .wp_wrap #p_about #s_vision .vision_cont .cont_box p { font-size: 20px; } .wp_wrap #p_about #s_vision .vision_des .des_box .vision_tit p { font-size: 22px; } .wp_wrap #p_about #s_vision .vision_des .des_box .vision_txt p { font-size: 14px; } /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_VISION 종료///////////////////////////////////////////////////////*/ /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_BUSINESS///////////////////////////////////////////////////////*/ .wp_wrap .cm_tit4 { text-align: center; } .wp_wrap #p_about #s_business .work_container .work_cont .work_list li .list_inner { width: 100%; padding: 20px 0; border-top: 1px solid #bebebe; } .wp_wrap #p_about #s_business .work_container .work_cont .work_list li { padding: 10px; } .wp_wrap #p_about #s_business .friends_container .friends_cont .friends_list li .list_inner .friends_tit p { font-size: 15px; text-align: center; } .wp_wrap #p_about #s_business .friends_container .friends_cont .friends_list li .list_inner .friends_img img { width: 100%; } /* //////////////////////////////////////////////////////PAGE - ABOUT - Tab_BUSINESS 종료///////////////////////////////////////////////////////*/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - WORK */ /**********************************************************************************************************************/ .wp_wrap #p_work { padding: 120px 0 40px; } /* 탭메뉴 */ .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu { width: 50%; padding: 25px 0; } .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu li a { color: #282828; font-size: 15px; font-family: var(--font-no); } .wp_wrap #p_work .cm_tab .tab_inner .tab_cont .tab_mnu { width: 100%; padding: 25px 0; } .wp_wrap #p_work .cm_tab .tab_inner .tab_cont .tab_mnu li { margin-top: 20px; } /* 리스트 */ .wp_wrap #p_work #s_work .work_inner .work_list li { margin: 20px 0; padding: 10px; } /* 페이지네비게이션 */ .wp_wrap #p_work #s_work .pager_box .pager a { font-size: 16px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CAREERS */ /**********************************************************************************************************************/ .wp_wrap #p_careers { padding: 120px 0 40px; } /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_CULTURE///////////////////////////////////////////////////////*/ /* 리스트영역 */ .wp_wrap #p_careers #s_culture .culture_inner .culture_list li { flex-direction: column; margin: 25px 0; } .wp_wrap #p_careers #s_culture .culture_inner .culture_list li .txt_tit p { font-size: 22px; font-family: var(--font-no); } .wp_wrap #p_careers #s_culture .culture_inner .culture_list li .txt_des p { font-size: 16px; font-family: var(--font-no); } .wp_wrap .cm_tab .tab_inner .tab_cont .tab_mnu li { padding: 0px; } /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_CULTURE 종료///////////////////////////////////////////////////////*/ /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_WELFARE///////////////////////////////////////////////////////*/ .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_tit h3 { font-size: 32px; text-align: center; } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li { /* padding: 60px 40px 0 40px; */ } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li:last-child { padding: 60px 40px; } .wp_wrap #p_careers #s_welfare .welfare_cont:last-child .welfare_list li:last-child { padding-bottom: 0; } .wp_wrap #p_careers #s_welfare .welfare_cont .welfare_list li .box_inner .img_txt p { height: auto; } .wp_wrap #p_careers #s_welfare .welfare_cont:last-child .welfare_list li:nth-child(1) { justify-content: center; } .wp_wrap #p_careers #s_welfare .welfare_cont:last-child .welfare_list li:nth-child(2) { justify-content: center; } .wp_wrap #p_careers #s_welfare .welfare_cont:last-child .welfare_list li:nth-child(3) { justify-content: center; } /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_WELFARE종료///////////////////////////////////////////////////////*/ /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_EMPLOYMENT///////////////////////////////////////////////////////*/ .wp_wrap #p_careers #s_employment .btn_box { display: flex; justify-content: center; } /* //////////////////////////////////////////////////////PAGE - CAREERS - Tab_EMPLOYMENT 종료///////////////////////////////////////////////////////*/ /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - ANNOUNCEMENT */ /**********************************************************************************************************************/ .wp_wrap #p_announcement { padding: 100px 0 10px; } .wp_wrap #p_announcement #s_announcement .announcement_inner .announcement_tit { margin: 20px 0 40px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - CONTACT */ /**********************************************************************************************************************/ .wp_wrap #p_contact { padding: 120px 0 40px; } /* map 영역 */ .wp_wrap #p_contact #s_contact .contact_inner .map_box { margin-top: 20px; } .wp_wrap #p_contact #s_contact .contact_inner .map_box .map_inner iframe { height: 200px; } /* form */ .wp_wrap #p_contact #s_contact .contact_inner .contact_container .contact_inp form textarea { height: 120px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* POP UP PAGE - EMAIL_POP(푸터페이지에 있어요!) */ /**********************************************************************************************************************/ .wp_wrap #email_pop { z-index: 999; } .wp_wrap #email_pop .pop_inner { width: 96%; height: auto; } .wp_wrap #email_pop .pop_inner .pop_cont .txt_tit { padding: 20px 0; } .wp_wrap #email_pop .pop_inner .pop_cont .txt_tit p { text-align: center; } .wp_wrap #email_pop .pop_inner .pop_cont .txt_des p { font-size: 10px; text-align: center; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* PAGE - PRIVACY(서브 폴더에 있어요!) */ /**********************************************************************************************************************/ .wp_wrap #p_privacy { padding: 120px 0 40px; } .wp_wrap #p_privacy #s_privacy .privacy_inner .privacy_tit { margin: 0; } .wp_wrap #p_privacy #s_privacy .privacy_inner .privacy_container p { padding: 10px 0; font-size: 12px; } /**********************************************************************************************************************/ /**********************************************************************************************************************/ /* FOOTER */ /**********************************************************************************************************************/ .wp_wrap footer { padding: 30px 0 0px; } .wp_wrap footer .footer_top .footer_cont { display: flex; justify-content: space-between; flex-direction: column; } .wp_wrap footer .footer_top .footer_cont .footer_logo { display: flex; justify-content: center; } .wp_wrap footer .footer_top .footer_cont .footer_utill { width: 100%; padding: 20px 0 0; } .wp_wrap footer .footer_top .footer_cont .footer_utill li a { font-size: 10px; font-family: var(--font-no); } .wp_wrap footer .footer_bot .footer_info { display: flex; flex-direction: column; align-items: center; } .wp_wrap footer .footer_bot .footer_info li { font-size: 12px; } .wp_wrap footer .footer_bot .footer_info li::after { display: none; } /* copy */ .wp_wrap footer .footer_bot .footer_copy { padding: 10px 0; } .wp_wrap footer .footer_bot .footer_copy p { font-size: 10px; text-align: center; } /**********************************************************************************************************************/ } @media (max-width: 400px) { .wp_wrap #p_main #s_work .work_inner .work_card .card a .img_frame { width: 140px; height: 160px; padding: 20px 0; } }