@charset "utf-8"; /************************************ 기본값 셋팅 *************************************/ /*폰트 기본값*/ a, a:link, a:visited, a:hover, a:focus { color: #6a6a6a; } input[type="text"], input[type="checkbox"], input[type="radio"] { background: none; border: none; color: #444; font-size: 16px; } input[type="text"]::placeholder { color: #aaa; font-size: 16px; } select { color: #444; font-size: 16px; } textarea { width: 100%; border: 1px solid transparent; border-radius: 3px; font-size: 16px; font-family: "APPLESDGOTHICNEO", "맑은 고딕"; color: #6a6a6a; line-height: 13px; } th { font-weight: 400; } td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* common layout */ .flex { display: flex; } .fl-a { display: flex; align-items: center; justify-content: space-around; } .fl-b { display: flex; align-items: center; justify-content: space-between; } .fl-jb { display: flex; justify-content: space-between; } .fl-cc { display: flex; align-items: center; justify-content: center; } .fl-jc { display: flex; align-items: center; } /* display */ .tab, .mob { display: none; } .date_input+.ui-datepicker-trigger { display: none; } /*scroll_bar - common_all에 있음*/ body *::-webkit-scrollbar-thumb { background-color: #389cfc; } /*input*/ /* 기존 코드 */ input[type="text"] { width: 100%; height: 20px; padding: 0 4px; border: 1px solid transparent; border-radius: 2px; } input[type="text"]:hover { border: 1px solid #9ccefe; } input[type="text"]:focus { border: 1px solid #9ccefe; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #444 !important; } /* 새롭게 추가, dev, 2024.0327, 회원가입 */ input::placeholder { color: #AAA; } input:-webkit-autofill:hover, input:-webkit-autofill:focus{ transition: none; -webkit-transition:none; -webkit-box-shadow: none; -webkit-text-fill-color: none; } input[type="password"], input[type="text"] { height:auto; } input[type="text"] { padding:initial; } input[type="text"]:focus { border: none; } input[type="password"]:hover, input[type="password"] { border: none; } input[type='password']::-ms-reveal, input[type='password']::-ms-clear { display: none; } /* button */ .button_round { display: flex; align-items: center; justify-content: center; border-radius: 25px; line-height: 1; } .button_wrap .button_list { display: flex; align-items: center; } /*label*/ .check_label { display: inline-block; background: url(../../images/web/input/check_off.svg) no-repeat; background-position: left center; background-size: 12px; padding-left: 14px; } .select_label { display: inline-block; background: url(../../images/web/input/select_bg_off.png) no-repeat; background-position: left 10%; background-size: 14px; padding-left: 18px; } input[type="checkbox"]:checked + .check_label { background: url(../../images/web/input/check_on.svg) no-repeat; background-position: left center; background-size: 12px; color: #389cfc; } input[type="radio"]:checked + .select_label { background: url(../../images/web/input/select_bg_on.png) no-repeat; background-position: left 10%; background-size: 14px; color: #389cfc; } /*tooltip*/ .tooltip { position: relative; cursor: pointer; } .tooltip > span { position: absolute; display: none; background: #3d4b53; width: max-content; padding: 4px 10px; border-radius: 4px; font-size: 11px; text-align: left; font-weight: 400; color: #fff; z-index: 9999; } .tooltip:hover > span { display: block; } .tooltip > span.ct { left: 50%; transform: translateX(-50%); } .tooltip > span.lt { left: 0px; } .tooltip > span.rt { right: 0px; } .tooltip > span.top { bottom: 20px; } .tooltip > span.btm { top: 20px; } /* FRONT PAGE 한정 공통 레이아웃,수정 */ .mainPage .section_summary { display: block; padding: 120px 0 35px 0; font-size: 19px; font-weight: 400; color: #545BFF; line-height: 1; opacity: 0.5; } .mainPage .section_title { margin-bottom: 30px; font-size: 54px; font-weight: 600; font-family: "Noto Sans KR"; letter-spacing: -3px; color: #222; line-height: 1;} .mainPage .section_description { margin-bottom: 50px; font-size: 20px; font-weight: 400; color: #222; line-height: 1.4; } .mainPage .layout_flex .section_description { margin-bottom: 0px; } .section_inner{position :relative; margin: 0 auto; } .layout_flex, .layout_grid, .feature_list { display: flex; flex-wrap: wrap; margin: 0 auto; } .layout_grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #E4DFF1; width: 80px; height: 80px; margin: 12px; border-radius: 10px; } .feature_list li { position: relative; display: flex; margin: 10px; } .feature_list .feature_number, .feature_list .feature_title { display:block; line-height:1; } .feature_list .feature_link { display: block; } .feature_list .feature_title { font-size: 30px; line-height: 1; } .feature_list .feature_description { font-size: 16px; } .image_side { display: flex; align-items: center; justify-content: space-between; } .image_side .image_wrap img { display: block; width:100%; } .image_side .image_text { width: 521px; } .image_side .image_text .image_title { display: block; margin-bottom: 33px; font-size: 34px; font-weight: 700; color: #222; line-height:1; } .image_side .image_text .image_description { font-size: 20px; font-weight: 400; color: #222; word-break: keep-all; line-height: 1.4; } /*grid*/ .grid_wrap { display: flex; } .grid_wrap > div { margin-right: 10px; } .grid_wrap > div:last-child { margin-right: 0; } .mobile_view{display:none;} .mobile_slide { visibility: hidden;} /* // FRONT PAGE 한정 공통 레이아웃,수정 */ /* text,수정 */ .offscreen { display: inline-block; position: absolute; overflow: hidden; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);} .text_left{ text-align:left;} .text_right{ text-align:right;} .text_center{ text-align:center;} .text_bold{ font-weight: 700;} .area_title, .area_description{ color: #222} .area_title{ display:block;} .area_title, .area_description { color: #222; } .area_title { display: block; } /* // text,수정 */ /*background*/ .background_before:before { position: absolute; content: ""; display: block; } /*mainContents*/ #contents { padding-top: 81px; } /* 회원가입 */ .form_container .form_body .form_list .form_input { width:460px; height:56px; } .form_container .form_body .form_list .form_input input { display:block; width:100%; height:100%; padding:0 17px; box-sizing:border-box; border-radius: 4px; border: 1px solid #859AAC; color: #222222; font-family: "Noto Sans KR"; font-size: 16px; } .form_container .form_body .input_box input::placeholder { color: #AAA; } .form_container .form_footer .button_submit { background: linear-gradient(90deg, #6079FF 0.27%, #58AFFF 98.76%); width:100%; padding:20px 0; border-radius: 4px; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1; text-align:center; } /* -- !!!!!!241111 정리 중!!!!!!!! ------------------------------------------------------------------------------------------------------------------ */ /* -- bas10030 / 문의하기 ------------------------------------------------------------------------------------------------------------------ */ .contents.bas10030 { min-height: 0; padding: 20px; } .bas10030 textarea { height: 210px; padding: 10px; } /* -- useConsult / 상담하기 ------------------------------------------------------------------------------------------------------------------ */ .useConsult { } .useConsult .txt_red { color: #FF2E60!important; } .useConsult .txt_green { color: #00AE5B!important; } .useConsult .req { position: relative; } .useConsult .req:after { content: "*"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 10px; height: 14px; /* padding-bottom: 4px; */ font-size: 14px; color: #FF2E60; } .useConsult .cmn_input { width: 100%; } .useConsult .cmn_input .section_frame { position: relative; width: 100%; margin-bottom: 20px; } .useConsult .cmn_input .section_frame:last-child { margin-bottom: 0; } .useConsult .cmn_input .section_frame .alert { display: none; position: absolute; bottom: -22px; left: 0; padding-top: 6px; font-size: 12px; color: #859AAC; } .useConsult .cmn_input .section_frame.alert_on { margin-bottom: 43px; } .useConsult .cmn_input .section_frame.alert_on .alert { display: block; } .useConsult .cmn_input .title, .useConsult .section02 .section_title { display: inline-block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: #4A5E76; } .useConsult .cmn_input .desc { padding-top: 6px; font-size: 12px; color: #859AAC; } .useConsult .cmn_input input { background: #fff; width: 100%; height: 46px; padding: 0 16px; border: 1px solid #859AAC; border-radius: 4px; font-size: 16px; color: #333; } .useConsult .cmn_input input:focus { border: 1px solid #2F44FF; } .useConsult .cmn_input input.bd_red, .useConsult .cmn_input input.bd_red:focus { border: 1px solid #FF2E60; } .useConsult .cmn_input input::placeholder { font-size: 16px; color: #AAA; } .useConsult .cmn_input input:disabled, .cmn_input input:read-only:not(.date_input) { background: #f1f1f1; border: none; } .useConsult .cmn_input .type_txt > div { display: flex; align-items: center; gap: 6px; } .useConsult .cmn_input .type_txt > div span { flex-shrink: 0; font-size: 14px; color: #859AAC; } .useConsult .section00 { padding: 20px; margin: 100px 0 60px; text-align: center; font-size: 20px; line-height: 140%; } .useConsult .section00 > p { margin-top: 42px; } .useConsult .section00 > img { content: url(/images/web/front/front_tit01.png); margin: 0 auto; } .useConsult .section01 { display: flex; flex-direction: column; max-width: 460px; padding: 0 20px; margin: 0 auto 20px; } .useConsult .section02 { display: flex; flex-direction: column; max-width: 460px; padding: 0 20px; margin: 0 auto 32px; } .useConsult .section02 .section_title { font-size: 16px; } .useConsult .section02 .section_terms { width: 100%; padding: 16px; border: 1px solid #859AAC; border-radius: 4px; } .useConsult .section02 .section_terms > .all_chk { display: flex; justify-content: space-between; align-items: center; width: 100%; } .useConsult .section02 .section_terms > .all_chk i { font-size: 18px; cursor: pointer; } .useConsult .section02 .check_label { background-size: 20px; padding-left: 28px; padding-bottom: 2px; margin-right: 0; color: #333; } .useConsult .section02 input[type="checkbox"]:checked + .check_label { background-size: 20px; padding-left: 28px; padding-bottom: 2px; color: #333; } .useConsult .section02 ul.inner { width: 100%; padding-top: 20px; margin-top: 20px; border-top: 1px solid #CACACA; font-size: 14px; line-height: 140%; color: #333; } .useConsult .cmn_section_btn { display: flex; justify-content: center; align-items: center; max-width: 460px; padding: 0 20px; margin: 0 auto 120px; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; } .useConsult .cmn_section_btn span { background: #545BFF; width: 100%; border-radius: 4px; text-align: center; line-height: 54px; } @media (max-width:785px) { .useConsult .section00 { margin: 18px 0 28px; text-align: left; font-size: 16px; } .useConsult .section00 > p { margin-top: 30px; } .useConsult .section00 > img { content: url(/images/web/front/front_tit02.png); display: block; } .useConsult .section02 { margin-bottom: 20px; } } /******************************************* 2024. 02. 20 리뉴얼한 프론트 contents_page ********************************************/ /*sideMenu*/ .scroll_menu { position: fixed; z-index: 1000; top: 50%; right: 0; } .scroll_menu .menu_btn { position: relative; display: flex; background: #fff; width: 56px; height: 56px; border-radius: 4px 0 0 4px; z-index: 110; } .scroll_menu .menu_btn label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .scroll_menu .s_menu { position: absolute; top: 50%; right: 0; display: flex; flex-direction: column; justify-content: space-between; background: #fff; width: 250px; height: 172px; padding: 24px; transition: all 0.5s; overflow: hidden; transform: translateY(-50%); z-index: 100; z-index: -1000; } .scroll_menu .s_menu a { width: max-content; font-weight: bold; color: rgba(0,0,0,0.6); transition: all 0.3s; } .scroll_menu .s_menu a:hover { color: #1a6dff; } .scroll_menu #s_menu:checked ~ .s_menu { width: 0px; height: 0px; } .top_btn { position: fixed; bottom: 100px; right: 28px; display: none; z-index: 20; } .top_btn a { display: block; background: url(../../images/web/front/ico_top.png) 0 0 no-repeat; background-size: cover; width: 48px; height: 48px; text-indent:-9999px; } /*footer*/ #footer { background: #3e454f; text-align: center; } #footer .ft_inr { position: relative; width: 900px; margin: 0 auto; padding: 20px 0; font-size: 13px; color: #909090; } #footer .ft_inr .ft_link ul { display: flex; align-items: center; justify-content: center; } #footer .ft_inr .ft_link ul li { position: relative; width: 150px; line-height: 20px; } #footer .ft_inr .ft_link ul li:after { position: absolute; top: 0; right: 0; content: ""; background: #5d636b; width: 1px; height: 20px; } #footer .ft_inr .ft_link ul li:first-child:before { position: absolute; left: 0; content: ""; background: #5d636b; width: 1px; height: 20px; } #footer .ft_inr .ft_link ul li a { display: block; color: #cacaca; } #footer .ft_inr address { margin-top: 16px; font-style: normal; } #footer .ft_inr address li { position: relative; display: inline-block; padding: 0 16px; line-height: 20px; } #footer .ft_inr address li:before { position: absolute; top: 3px; left: 0; content: ""; background: #606060; width: 1px; height: 10px; } #footer .ft_inr address li:first-child:before { display: none; } #footer .cloudImg { position: absolute; left: 100%; top: 50%; width: 100px; transform: translateY(-50%); } #contents .sectionWrap { background: #fff; } #contents .sectionWrap.bg .section:nth-child(2n-1) { background: #f7f8fa; } #contents .textSection { background: #524747; padding: 50px 0 30px; text-align: center; } #contents .textSection .inner { width: 1200px; margin: 0 auto; } /* 메인화면 - mainPage == index */ .mainPage .sectionWrap { position: relative; } .mainPage .sectionWrap .section .section_inner { display: flex; justify-content: space-between; align-items: center; width: 1200px; height: 940px; margin: 0 auto; } .mainPage .sectionWrap .section .section_inner > div { transform: translateY(100px); transition: 1.5s; opacity: 0 } .mainPage .sectionWrap .section.animateUp .section_inner > div { transform: translateY(0px); opacity: 1 } .mainPage .sectionWrap .section:nth-child(2n) { background: #fff; } .mainPage .sectionWrap .section:nth-child(2n-1) { background: #f7f8fa; } .mainPage .sectionWrap .section:nth-child(2n-1) .img_box { order: 1; } .mainPage .sectionWrap .section:nth-child(2n-1) .txt_box { order: 2; } .mainPage .sectionWrap .section .txt_box .txt1 { margin-bottom: 30px; font-size: 56px; font-weight: bold; letter-spacing: -3px; color: #0c0d15; line-height: 1.25; } .mainPage .sectionWrap .section .txt_box .txt2 { font-size: 20px; letter-spacing: -1px; color: #6d7278; line-height: 30px; } /* 24.03.11 DDP */ /*기본 서비스 - 구성*/ .total .sectionWrap .section { padding: 90px 0; text-align: center; } .total .section_expand { position: relative; } .total .section_expand:after { position: absolute; top: 0; left: 0; content: ' '; display: block; background: #059BBC; width: 100%; height: 476px; } .total .section_expand .section_inner { z-index: 1; max-width: 1276px; margin: 0 auto; } .total .section_expand .service_expand.pc_view .section_summary { display: block; padding: 78px 0 40px 0; font-size: 20px; font-weight: 400; color: #f9f9f9; line-height: 1; opacity: 0.5; } .total .section_expand .service_expand.pc_view .section_title { display: block; margin-bottom: 27px; font-size: 54px; font-weight: 600; font-family: 'Noto Sans KR'; letter-spacing: -3px; color: #fff; line-height: 1; } .total .section_expand .service_expand.pc_view .section_description { margin-bottom: 60px; font-size: 20px; font-weight: 400; color: #fff; line-height: 1.6; } .total .section_expand .service_expand.pc_view .section_message { margin-bottom: 100px; } .total .section_expand .service_expand.pc_view .module_tab .tab_menu, .total .section_expand .service_expand.pc_view .module_tab .tab_button { display: flex; align-items: center; } .total .section_expand .service_expand.pc_view .module_tab .tab_menu { justify-content: space-between; } .total .section_expand .service_expand.pc_view .module_tab .tab_menu .tab_item { background: #059BBC; } .total .section_expand .service_expand.pc_view .module_tab .tab_menu .tab_item .tab_button { font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 700; color: #fff; } .total .section_expand .service_expand.pc_view .module_tab li button { background-size: 50px 50px; } .total .section_expand .service_expand.pc_view .module_tab li:first-child button { background: url('../../images/web/front/expand_type_01.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/expand_type_02.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/expand_type_03.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/expand_type_04.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/expand_type_05.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/expand_type_06.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/expand_type_07.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/expand_type_08.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/expand_type_09.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/expand_type_10.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(11) button { background: url('../../images/web/front/expand_type_11.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab li:nth-child(12) button { background: url('../../images/web/front/expand_type_12.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item .tab_button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; font-size: 24px; font-weight: 600; color: #777; } .total .section_expand .service_expand.pc_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 60px; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 10px; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button { border-radius: 10px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 700; color: #333; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/expand_type_01.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/expand_type_02.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/expand_type_03.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/expand_type_04.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/expand_type_05.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/expand_type_06.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/expand_type_07.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/expand_type_08.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/expand_type_09.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/expand_type_10.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button11 { background: url('../../images/web/front/expand_type_11.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button12 { background: url('../../images/web/front/expand_type_12.png') center 16px no-repeat; } .total .section_expand .service_expand.pc_view .module_tab .tab_content { margin-top: 144px; } .total .section_expand .service_expand.pc_view .module_tab .tab_content li { display: none; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .image_side .image_wrap { width: 520px; height: 370px; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_title { margin-bottom: 24px; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 34px; font-weight: 700; line-height:1; color: #222; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_description { margin-bottom: 64px; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 400; line-height: 1.4; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side { align-items: flex-start; background: #f5f5f5; padding: 48px; border-radius: 20px; box-sizing: border-box; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .image_description li { position: relative; display: block; text-align: left; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .image_description li { width: 608px; margin-bottom: 27px; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .image_description .image_title { position: relative; display: inline-block; width: auto; margin-bottom: 5px; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 700; color: #555; line-height: 1; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .image_description .tag_title { position: absolute; top: 1px; right: -86px; display: inline-block; background: #00997D; width: 76px; padding: 6px 10px; box-sizing: border-box; border-radius: 20px; font-family: "Noto Sans KR"; font-size: 12px; font-style: normal; font-weight: 700; color: #fff; line-height:1; } .total .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .image_description .image_text { width:100%; padding-left: 10px; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 400; line-height: 1.6; word-break: keep-all; letter-spacing: -1px; color: #555; } /* 확장서비스 */ /*.total .section_expand:after { height:325px; } */ .total .section_expand .service_expand.mobile_view .section_summary { display: block; padding: 49px 0 29px 0; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; box-sizing: border-box; color: #FFF; line-height:1; opacity: 0.5; } .total .section_expand .service_expand.mobile_view .section_title { display: block; margin-bottom: 12px; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; color: #FFF; line-height:1; } .total .section_expand .service_expand.mobile_view .section_description { width: 283px; margin: 0 auto 52px auto; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 300; color: #FFF; line-height:1.4; } .total .section_expand .service_expand.mobile_view .section_message { padding: 0 16px; margin-bottom: 71px; box-sizing: border-box; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu, .total .section_expand .service_expand.mobile_view .module_tab .tab_button { display: flex; align-items: center; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu { justify-content: space-between; overflow-x:auto; -ms-overflow-style: none; scrollbar-width: none; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu::-webkit-scrollbar { display: none; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item { background: #059BBC; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item:not(:last-child) { margin-right: 8px; } .total .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item .tab_button { color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; } .total .section_expand .service_expand.mobile_view .module_tab li:first-child button { background: url('../../images/web/front/expand_type_01.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/expand_type_02.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/expand_type_03.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/expand_type_04.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/expand_type_05.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/expand_type_06.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/expand_type_07.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/expand_type_08.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/expand_type_09.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/expand_type_10.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(11) button { background: url('../../images/web/front/expand_type_11.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-child(12) button { background: url('../../images/web/front/expand_type_12.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item .tab_button { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 63px; font-size: 24px; font-weight: 600; color: #777; } .total .section_expand .service_expand.mobile_view .module_tab li:nth-of-type(8) .tab_button, .total .section_expand .service_expand.mobile_view .module_tab li:nth-of-type(9) .tab_button { width: 84px; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 40px; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 6px; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button { border-radius: 6px; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; color: #333; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/expand_type_01.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/expand_type_02.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/expand_type_03.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/expand_type_04.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/expand_type_05.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/expand_type_06.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/expand_type_07.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/expand_type_08.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/expand_type_09.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/expand_type_10.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button11 { background: url('../../images/web/front/expand_type_11.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button12 { background: url('../../images/web/front/expand_type_12.png') center 8px / 30px 30px no-repeat; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content { margin-top: 84px; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content li { display: none; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .image_side .image_wrap { width: 100%; height: auto; padding-bottom: 32px; border-bottom: 1px solid #000; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_title { margin-bottom: 17px; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 700; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); color: #222; line-height:1; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_description { margin-bottom: 21px; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 1.4; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side { display: block; align-items: flex-start; background: #fff; padding: 0; border-radius: initial; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .image_description li { position: relative; display: block; width: 100%; margin-bottom: 0; text-align: left; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .image_description .image_title { position: relative; display: inline-block; width: auto; margin: 24px 0 6px 0 ; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 700; color: #555; line-height: 1; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .image_description .tag_title { position: absolute; top: 0; right: -65px; display: inline-block; background: #00997D; width: 60px; padding: 4px 0; border-radius: 20px; font-family: "Noto Sans KR"; font-size: 10px; font-style: normal; font-weight: 700; text-align: center; box-sizing: border-box; color: #fff; line-height: 1; } .total .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .image_description .image_text { width: 100%; padding-left: 10px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; letter-spacing: -1px; word-break: break-all; color: #555; line-height: 1.6; } /*이용요금*/ /* 2023. 05. 09 추가 */ /* 231107 ver02 */ .price_New .subVisual.version02 { background-image: url(../../images/web/front/subVisual7_ver2.png); height: 240px; letter-spacing: normal; } .price_New .subVisual.version02 .vis_cell .txt1 { margin-bottom: 16px; font-size: 36px; font-weight: bold; line-height: 1; } .price_New .section_frame { position: relative; letter-spacing: normal; } .price_New .section_frame .inner_nav { position: sticky; left: 0; top: 80px; z-index:1; background: #FFF; height: 70px; width: 100%; border-bottom: 1px solid #DDD; } .price_New .section_frame .inner_nav > .flex_jus_bet { max-width: 700px; height: 100%; margin: 0 auto; gap: 110px; font-size: 20px; font-weight: bold; color: #A1A1A1; } .price_New .section_frame .inner_nav p { position: relative; display: flex; justify-content: center; align-items: center; width: calc((100% - 220px) / 3); cursor: pointer; } .price_New .section_frame .inner_nav p.on { color: #0066FF; } .price_New .section_frame .inner_nav p.on:after { position: absolute; content: ""; left: 0; right: 0; bottom: 0px; border-bottom: 3px solid #0066FF; } .price_New .section_frame .inner_frame { display: flex; flex-direction: column; align-items: center; padding: 80px 0; } .price_New .section_frame .inner_frame img { display: block; } .price_New .section_frame .inner_frame .inner_title { text-align: center; color: #333333; } .price_New .section_frame .inner_frame .inner_title .subtitle { font-size: 16px; color: #C2C2C2; } .price_New .section_frame .inner_frame .inner_title .maintitle { margin-top: 40px; font-size: 36px; font-weight: bold; } .price_New .section_frame .inner_frame .inner_title .title_desc { margin-top: 14px; font-size: 16px; } .price_New .section_frame .inner_frame .hashtag { display: flex; justify-content: center; align-items: center; gap: 10px; } .price_New .section_frame .inner_frame .hashtag p { display: flex; justify-content: center; align-items: center; padding: 10px 20px; border: 1px solid #7287A6; border-radius: 20px; font-size: 14px; box-sizing: border-box; color: #7287A6; line-height: 1; } .price_New .section_frame .section01 { background: #FFF; } .price_New .section_frame .section01 .section_total { margin: 30px 0 40px; } .price_New .section_frame .section01 .section_total .total { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(92deg, #48A7FF 5.49%, #7479FF 100%) border-box; background-size: contain; width: 100%; height: 60px; padding: 0 40px; margin-bottom: 14px; border: 2px solid transparent; border-radius: 4px; font-size: 18px; color: #747BFF; } .price_New .section_frame .section01 .section_total .total span { font-size: 24px; font-weight: bold; } .price_New .section_frame .section01 .section_total .flex { align-items: baseline; gap: 2px; } .price_New .section_frame .section01 .section_list { width: 100%; max-width: 880px; } .price_New .section_frame .section01 .section_list ul { display: flex; flex-direction: column; width: 100%; } .price_New .section_frame .section01 .section_list ul li { display: flex; align-items: center; padding: 20px 0 24px; border-bottom: 1px solid #E8E8E8; } .price_New .section_frame .section01 .section_list ul li > p { width: 58%; font-size: 15px; color: #5C5C5C; } .price_New .section_frame .section01 .section_list .section_left { display: flex; align-items: center; width: 42%; gap: 30px; } .price_New .section_frame .section01 .section_list .section_left i:before { font-size: 34px; color: #434950; } .price_New .section_frame .section01 .section_list .section_left p { font-size: 20px; font-weight: bold; color: #333; } .price_New .section_frame .section02 { background: #F2F7F9; } .price_New .section_frame .section02 .inner_title .hashtag p { margin: 30px auto 50px; } .price_New .section_frame .section02 .section_card { width: 100%; max-width: 880px; } .price_New .section_frame .section02 .section_card ul { display: flex; flex-direction: column; width: 100%; gap: 14px; } .price_New .section_frame .section02 .section_card ul li { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 16px 20px; border-radius: 10px; } .price_New .section_frame .section02 .section_card ul li > span.free { display: flex; justify-content: center; align-items: center; background: #5A88FF; height: 30px; padding: 2px 16px 0; border-radius: 42px; font-size: 18px; font-weight: bold; color: #fff; line-height: 1; } .price_New .section_frame .section02 .section_card ul li > span.beta { display: flex; justify-content: center; align-items: center; background: #00AEA4; height: 30px; padding: 2px 16px 0; border-radius: 42px; font-size: 18px; font-weight: bold; color: #fff; line-height: 1; } .price_New .section_frame .section02 .section_card ul li > p { font-size: 20px; font-weight: bold; color: #333; } .price_New .section_frame .section02 .section_card ul li > p span { color: #5A88FF; } .price_New .section_frame .section02 .section_card .section_left { display: flex; align-items: center; gap: 20px; font-size: 15px; color: #5C5C5C; } .price_New .section_frame .section02 .section_card.feature_list .section_left span { display: block; margin-bottom: 5px; font-size: 20px; line-height: 1; } .price_New .section_frame .section02 .section_card.feature_list .section_left p { font-size: 15px; } .price_New .section_frame .section02 .section_card .section_left.image_side .image_text { display: flex; align-items: center; width: 100%; } .price_New .section_frame .section02 .section_card .section_left.image_side .image_text span { margin-bottom: 0; } .price_New .section_frame .section02 .section_card .section_left.image_side .image_description { margin-left: 18px; font-size: 15px; } .price_New .section_frame .section02 .section_card .section_left span { font-size: 20px; font-weight: bold; color: #333; } .price_New .section_frame .section03 { background: #46556C; padding: 64px 0; text-align: center; font-size: 28px; color: #fff; line-height: 150%; } .price_New .section_frame .section03 .btn_more { display: flex; justify-content: center; align-items: center; background: linear-gradient(92deg, #49A8FF 5.49%, #747BFF 100%); height: 52px; margin-top: 40px; padding: 0 56px; border-radius: 8px; font-size: 20px; font-weight: bold; cursor: pointer; } .price_New .section_frame .section04 { background: #FFF; padding: 66px 0 130px; } .price_New .section_frame .section04 .section_qna { width: 100%; max-width: 880px; margin: 50px 0 60px; } .price_New .section_frame .section04 .section_qna ul { display: flex; flex-direction: column; width: 100%; gap: 14px; } .price_New .section_frame .section04 .section_qna ul li { display: flex; flex-direction: column; justify-content: center; background: #F9FAFF; gap: 13px; padding: 25px 40px 30px; border-radius: 10px; transition: all 0.3s; cursor: pointer; } .price_New .section_frame .section04 .section_qna ul li.on { background: #FFFBF2; } .price_New .section_frame .section04 .section_qna ul li:hover { background: #FFFBF2; } .price_New .section_frame .section04 .section_qna ul li .title_row { display: flex; justify-content: space-between; align-items: center; } .price_New .section_frame .section04 .section_qna ul li .title_row p { font-size: 24px; font-weight: bold; color: #333; line-height: 1; } .price_New .section_frame .section04 .section_qna ul li .title_row i { transition: all 0.3s; } .price_New .section_frame .section04 .section_qna ul li .title_row .icon_add02 { font-size: 40px; color: #5A88FF; } .price_New .section_frame .section04 .section_qna ul li .title_row .icon_subtract02 { font-size: 40px; color: #B0B0B0; } .price_New .section_frame .section04 .section_qna ul li .desc_row { display: none; gap: 10px; font-size: 20px; color: #333; line-height: 150%; } .price_New .section_frame .section04 .section_qna ul li .desc_row .layout_flex { flex-wrap: nowrap; } .price_New .section_frame .section04 .section_qna ul li .desc_row.on { display: flex; } .price_New .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 { font-size: 20px; font-weight: bold; color: #15AAA1; line-height: 120%; } .price_New .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 + p { padding-left: 4px; } .price_New .section_frame .section04 .section_experi { display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(../../images/web/front/price_experibg.png) no-repeat; width: 1060px; height: 312px; font-size: 36px; color: #fff; } .price_New .section_frame .section04 .section_experi p:first-child { margin-bottom: 6px; font-size: 28px; } .price_New .section_frame .section04 .section_experi span { display: flex; justify-content: center; align-items: center; background: #2563EB; height: 60px; margin-top: 40px; padding: 0 56px; border: 2px solid #fff; border-radius: 100px; font-size: 20px; font-weight: bold; cursor: pointer; } .price_New .section_more { display: flex; flex-direction: column; align-items: center; margin-top: 40px; font-weight: bold; color: #6A6A6A; text-align: center; } .price_New .section_more .btn_more { display: flex; align-items: center; justify-content: center; background: #0F66FF; height: 44px; margin-top: 20px; padding: 0 42px; border-radius: 8px; color: #fff; cursor: pointer; } .price_New .popupWrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; background: rgba(0,0,0,0.6); z-index: 10000001; } .price_New .popup_more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: #FFFFFF; width: 586px; gap: 30px; padding: 30px 30px 36px; border-radius: 10px; font-size: 14px; color: #6A6A6A; } .price_New .popup_more .title { font-size: 22px; font-weight: bold; color: #0C81CC; } .price_New .popup_more .container_img { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .price_New .popup_more .container_img .section_img { display: flex; justify-content: center; gap: 50px; } .price_New .popup_more .container_img .section_img .img { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .price_New .popup_more .container_img .section_img img { border: 2px solid #C0D3DD; border-radius: 10px; box-shadow: 2px 2px 8px rgba(141, 141, 141, 0.25); } .price_New .popup_more .container_table { display: flex; width: 100%; color: #444444 } .price_New .popup_more .container_table table { width: 100%; border-top: 1px solid #ECECEC; } .price_New .popup_more .container_table td { height: 34px; padding: 0 25px; border-bottom: 1px solid #ECECEC; font-size: 14px; } .price_New .popup_more .container_table td:nth-child(1) { border-right: 1px solid #ECECEC; text-align: center; } .price_New .popup_more .btn_m_close p { display: flex; justify-content: center; align-items: center; background: #6C7E9E; width: 190px; height: 30px; border-radius: 8px; font-weight: bold; color: #fff; cursor: pointer; } .price_New .popup_more .close_top { position: absolute; top: 20px; right: 20px; cursor: pointer; } /*고객지원 - 도입안내*/ .useGuide .sectionWrap .section { padding: 90px 0; text-align: center; } /*고객지원*/ .useGuide.section_head { border-bottom: 1px solid #DDD; } .useGuide .section_inner { max-width: 1276px; margin: 0 auto; } .useGuide .section_title { position: relative; margin: 120px 0 30px 0; font-size: 54px; font-weight: 600; font-family: "Noto Sans KR"; letter-spacing: -3px; color: #222; line-height: 1; } .useGuide .section_description { margin-bottom: 50px; font-size: 20px; font-weight: 400; font-family: "Noto Sans KR"; color: #222; line-height: 1.4; } .useGuide .section_message { padding-bottom: 150px; } /* 고객지원 - 무엇을 도와드릴까요? */ .useGuide .section_help .section_title { margin: 120px 0 33px 0; } .useGuide .section_help .section_description { margin-bottom: 40px; } .useGuide .section_help .section_title:after { position: absolute; top:0; left: 300px; content: " "; display: block; width: 85px; height: 60px; background: url("../../images/web/front/guide_help07.png") no-repeat; } .useGuide .section_help .service_help.pc_view .section_message .help_list { width: 1276px; margin: 0 auto; } .useGuide .section_help .service_help.pc_view .section_message .help_list li { align-items: flex-start; width: 616px; height: auto; margin: 10px; padding: 0 46px; border-radius: 20px; box-shadow: -10px -10px 20px 0px rgba(185, 187, 198, 0.25) inset; } .useGuide .section_help .service_help.pc_view .section_message .help_list li .image_side { width: 100%; } .useGuide .section_help .service_help.pc_view .section_message .help_list li .image_side .image_text { width:auto; } .useGuide .section_help .service_help.pc_view .section_message .help_list > li:nth-child(1) { background: #D9EEFA; } .useGuide .section_help .service_help.pc_view .section_message .help_list > li:nth-child(2) { background: #E6F5F0; } .useGuide .section_help .service_help.pc_view .section_message .help_list > li:nth-child(3) { background: #D9EEFA; } .useGuide .section_help .service_help.pc_view .section_message .help_list > li:nth-child(4) { background: #F1EDF5; } .useGuide .section_help .service_help.pc_view .section_message .help_list li:nth-child(1) .image_text .image_title { margin: -15px 0 14px 0; } .useGuide .section_help .service_help.pc_view .section_message .help_list li:nth-child(1) .image_text .image_description { margin-bottom: 0; } .useGuide .section_help .service_help.pc_view .section_message .help_list li:nth-child(3) .image_text .image_description { width: auto;} .useGuide .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_title { margin: 45px 0 8px 0; color: #555; } .useGuide .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_description { width: 351px; color: #555; font-size: 20px; font-weight: 400; word-break: keep-all; } .useGuide .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_link { position: relative; display: inline-block; margin: 50px 0 40px 0 ; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; color: #555; line-height: 1; } .useGuide .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_link:after { position: absolute; content: " "; top: 9px; right: -30px; display: block; background: url("../../images/web/front/guide_link01.png") no-repeat; width: 27px; height: 10px; } .useGuide .section_help .service_help.pc_view .section_message .help_list .image_side .image_wrap { width: 147px; height: 140px; } .useGuide .section_help .service_help.pc_view .section_message .help_hours li { display: block; background: initial; width: auto; height: auto; margin: 0; padding: 0; border-radius: initial; font-size: 20px; font-weight: 400; box-shadow: initial; color: #555; line-height: 1; } .useGuide .section_help .service_help.pc_view .section_message .help_hours li:not(:last-child) { margin-bottom: 7px } .useGuide .section_help .service_help.pc_view .section_message .help_call { display: inline-block; margin-top: 23px; font-size: 50px; font-weight: 700; color: #555; line-height: 1; } /* 고객지원 - 캐시맵 사용자를 위한 가이드 */ .useGuide .section_guide { position: relative; } .useGuide .section_guide .section_title { margin:0 0 30px 0; padding-top:120px;} .useGuide .section_guide:after { position: absolute; content: " "; display: block; background: #5364FA; width: 100%; height: 354px; top: 0; left: 0; } .useGuide .section_guide .section_inner { z-index: 1; } .useGuide .section_guide .service_guide.pc_view .section_title, .useGuide .section_guide .service_guide.pc_view .section_description { color: #fff; } .useGuide .section_guide .service_guide.pc_view .section_message { padding-bottom: 0; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list li { background: #FFF; width: 618px; height: auto; margin: 10px 10px 0 10px; border-radius: 30px; box-shadow: 0px -10px 30px 5px rgba(147, 166, 193, 0.25) inset; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side { align-items: flex-start; justify-content: space-around; width: 100%; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text { width: auto; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_title { margin: 60px 0 16px 0; color: #555; font-family: "Noto Sans KR"; font-size: 34px; font-style: normal; font-weight: 700;} .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_description { margin-bottom: 107px; color: #555; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_link { position: relative; display: inline-block; background: #5364FA; width: 141px; padding: 8px 20px; border-radius: 43px; color: #FFF; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; color: #fff; line-height: 1; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_link:after { position: absolute; content: " "; top:15px; right: 10px; display: block; background: url("../../images/web/front/guide_link02.png") no-repeat; width: 27px; height: 10px; } .useGuide .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_wrap { width: 158px; height: 184px; margin:117px 0 60px 0; } /* 고객지원 - 더 궁금한 점이 있으신가요? */ .useGuide .section_question .section_title { position: relative; margin: 201px 0 19px 0; } .useGuide .section_question .section_title:after { position: absolute; top:-40px; right:256px; content: " "; display: block; background: url("../../images/web/front/guide_help08.png") no-repeat; width: 94px; height: 91px; } .useGuide .section_question .section_description { margin-bottom: 60px; font-weight: 500; color: #000; font-family: "Noto Sans KR";} .useGuide .section_question .section_message .button_wrap .button_list li { width: 412px; } .useGuide .section_question .section_message .button_wrap .button_list li .button_contact { display: block; background: #EFEFEF; width: 100%; height: 100%; padding: 40px 0; border-radius: 30px; font-family: "Noto Sans KR"; font-size: 28px; font-weight: 500; color: #555; line-height:1; } .useGuide .section_question .section_message .button_wrap .button_list li:not(:last-child) { margin-right: 20px; } /*동영상가이드*/ .video .sectionWrap { width: 1085px; margin: 0 auto; padding: 50px 0; } .video .section { margin-top: 30px; } .video .section_title { margin-bottom: 8px; font-size: 18px; color: #323232; } .video ul { display: flex; width: 100%; padding: 30px 0; border-top: 2px solid #323232; } .video ul li { margin-left: 34px; } .video ul li:first-child { margin-left: 0; } .video ul li .thum { position: relative; width: 245px; height: 135px; } .video ul li .thum:after { position: absolute; top: 0; left: 0; content: ""; background: rgba(0,0,0,0.6) url(../../images/web/front/bg_movie2.png) no-repeat; background-position: center; width: 100%; height: 100%; transition: all 0.4s; opacity: 0; } .video ul li .videoItem { cursor: pointer; } .video ul li .videoItem:hover .thum:after { opacity: 1 } .video ul li .thum img { width: 100%; height: 100%; } .video ul li .info { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; } .video ul li .info .info_txt { max-width: 175px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video .pop_layer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 199; display: flex; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,0.4); } .video .pop_container .pop_hd { position: relative; display: flex; align-items: center; justify-content: space-between; background: #000; height: 65px; padding-left: 38px; line-height: 65px; font-size: 20px; color: #fff; } .video .pop_container .pop_hd .pop_close { width: 20px; height: 20px; margin-right: 20px; cursor: pointer; } .video .pop_container .pop_ct { position: relative; } .video .pop_container .pop_ct .controller a { position: absolute; top: 43%; display: block; width: 60px; height: 0; padding-top: 60px; font-size: 0; text-indent: -9999px; transform: translateY(-5%); } .video .pop_container .pop_ct .controller .lt { background: url(../../images/web/front/p_arw_lt.png) no-repeat 0 0; left: -87px; } .video .pop_container .pop_ct .controller .rt { background: url(../../images/web/front/p_arw_rt.png) no-repeat 0 0; right: -87px; } /*footer*/ #footer { background: #3e454f; text-align: center; } #footer .ft_inr { position: relative; width: 900px; margin: 0 auto; padding: 20px 0; font-size: 13px; color: #909090; } #footer .ft_inr .ft_link ul { display: flex; align-items: center; justify-content: center; } #footer .ft_inr .ft_link ul li { position: relative; width: 150px; line-height: 20px; } #footer .ft_inr .ft_link ul li:after { position: absolute; top: 0; right: 0; content: ""; background: #5d636b; width: 1px; height: 20px; } #footer .ft_inr .ft_link ul li:first-child:before { position: absolute; left: 0; content: ""; background: #5d636b; width: 1px; height: 20px; } #footer .ft_inr .ft_link ul li a { display: block; color: #cacaca; } #footer .ft_inr address { margin-top: 16px; font-style: normal; } #footer .ft_inr address li { position: relative; display: inline-block; padding: 0 16px; line-height: 20px; } #footer .ft_inr address li:before { position: absolute; top: 3px; left: 0; content: ""; background: #606060; width: 1px; height: 10px; } #footer .ft_inr address li:first-child:before { display: none; } #footer .cloudImg { position: absolute; left: 100%; top: 50%; width: 100px; transform: translateY(-50%); } /*subPage*/ /*visual*/ .subVisual { display: flex; /*height: calc(100vh - 72px);*/ align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center; text-align: center; color: #fff; } .subVisual .vis_cell .txt1 { font-size: 50px; font-weight: bold; } .subVisual .vis_cell .txt2 { font-size: 16px; } .joinPage .subVisual { background-image: url(../../images/web/front/subVisual8.svg); height: 450px; } .guideJoinPage .subVisual { background-image: url(../../images/web/front/subVisual1.jpg); } .accountPage .subVisual { background-image: url(../../images/web/front/subVisual2.jpg); } .composPage .subVisual { background-image: url(../../images/web/front/subVisual3.jpg); } .totalPage .subVisual { background-image: url(../../images/web/front/subVisual4.png); } .useGuidePage .subVisual { background-image: url(../../images/web/front/subVisual5.jpg); height: 290px; } .video .subVisual { background-image: url(../../images/web/front/subVisual6.jpg); height: 290px; } .pricePage .subVisual { background-image: url(../../images/web/front/subVisual7.jpg); height: 290px; } .joinPage .subVisual .vis_cell { position: relative; top: -90px; } .joinPage .subVisual .vis_cell .txt2 { font-size: 24px; } /*subContents*/ /*지향점*/ .guideJoinPage .sectionWrap .section { padding: 90px 0; text-align: center; } /*회계*/ .accountPage .sectionWrap .section { padding: 90px 0; text-align: center; } /*회원가입*/ .joinPage .innerWrap { position: relative; z-index: 10; top: -200px; background: #fff; width: 785px; margin: 0 auto; margin-bottom: -110px; padding: 30px; border-radius: 30px; box-shadow: 0px 0px 20px 0px #00000033; } .joinPage .innerWrap .title { display: flex; align-items: center; margin-bottom: 20px; font-weight: bold; font-size: 25px; color: #333; } .joinPage .innerWrap .title img { margin-right: 6px; } .joinPage .innerWrap .stepWrap { display: flex; width: 100%; margin-bottom: 40px; } .joinPage .innerWrap .stepWrap div { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; background: #f8f8f8; height: 62px; border-right: 1px solid #eaeaea; text-align: center; color: #7a8495; } .joinPage .innerWrap .stepWrap div:last-child { border-right: none; } .joinPage .innerWrap .stepWrap div.on { background: #FF8F60; color: #fff; } .joinPage .innerWrap .stepWrap div p { font-size: 12px; } .joinPage .innerWrap .stepWrap div p.bold { font-size: 14px; } .joinPage .innerWrap .inner { display: none; } .joinPage .innerWrap .inner.on { display: block; } .joinPage .innerWrap .inner .section_title { display: flex; justify-content: space-between; align-items: center; font-size: 18px; color: #333; font-weight: bold; } .joinPage .innerWrap .inner .section_title .subTxt { font-size: 12px; color: #7A8495; font-weight: normal; } .joinPage .innerWrap .inner .sectionLine { background: url(../../images/web/front/sectionLine.png); background-repeat: repeat-x; height: 4px; } .joinPage .innerWrap .inner .sectionDiv { margin-top: 6px; } .joinPage .innerWrap .inner .formWrap { width: 585px; margin: 30px auto; } .joinPage .innerWrap .inner .formWrap .item { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .joinPage .innerWrap .inner .formWrap .item:first-child { margin-top: 0; } .joinPage .innerWrap .inner .formWrap .th { font-size: 18px; font-weight: bold; color: #7a8495; } .joinPage .innerWrap .inner .req:after { position: relative; top: -3px; content: url(../../images/web/front/req.svg); margin-left: 4px; } .joinPage .innerWrap .inner .formWrap .inputDiv { position: relative; } .joinPage .innerWrap .inner .formWrap .textWrap { position: absolute; bottom: -20px; display: flex; align-items: center; } .joinPage .innerWrap .inner .formWrap .textWrap .tooltip { margin-left: 3px; margin-top: -2px; } .joinPage .innerWrap .inner .formWrap .errMsg { display: none; font-size: 12px; font-weight: bold; color: #FF4040; } .joinPage .innerWrap .inner .formWrap .errMsg.type2 { color: #2BD23C; } .joinPage .innerWrap .inner .formWrap .tooltipMsg { font-size: 12px; font-weight: bold; color: #D2A32B; } .joinPage .innerWrap .inner .formWrap .infoInput { display: inline-block; line-height: 52px; outline: none; width: 384px; height: 52px; padding: 0 15px; border: 2px solid #bfccde; border-radius: 15px; font-size: 16px; transition: all 0.3s; color: #666; } .joinPage .innerWrap .inner .formWrap .infoInput::placeholder { color: #bfcbde; font-size: 16px; } .joinPage .innerWrap .inner .formWrap .infoInput:hover { border: 2px solid #1167ff; } .joinPage .innerWrap .inner .formWrap .infoInput:focus { border: 2px solid #1167ff; } .joinPage .innerWrap .inner.step4 .formWrap .infoInput { width: 403px; } .joinPage .btn_area { display: flex; align-items: center; justify-content: center; margin-top: 40px; margin-bottom: 30px; } .joinPage .btn_area span { display: flex; align-items: center; justify-content: center; width: 200px; height: 40px; margin: 0 15px; border-radius: 8px; box-shadow: 0px 4px 8px 0px #508CB740; color: #fff; cursor: pointer; } .joinPage .btn_area span.next { background: #609fff; } .joinPage .btn_area span.prev { background: #bfcbde; } .joinPage .btn_area span.next img { position: relative; top: 1px; margin-left: 10px; } .joinPage .btn_area span.prev img { position: relative; top: 1px; margin-right: 10px; } .joinPage .inner.step1 .section_title { justify-content: center; } .joinPage .inner.step1 .formWrap { width: 515px; } .joinPage .inner.step2 label { font-weight: normal; font-size: 12px; color: #7A8495; } .joinPage .inner.step2 .txtBox { height: 270px; margin: 6px 0; padding: 20px 12px; border: 1px solid #BFCBDE; font-size: 13px; overflow-y: auto; color: #666; } .joinPage .inner.step2 .txtBox .article { margin-top: 80px; } .joinPage .inner.step2 .txtBox #article1.article { margin-top: 0; } .joinPage .inner.step2 .txtBox #article8.article { margin-top: 0; } .joinPage .inner.step2 .txtBox .txt1 { font-size: 20px; text-align: center; } .joinPage .inner.step2 .txtBox .txt2 { margin-top: 40px; margin-bottom: 10px; font-weight: bold; } .joinPage .inner.step2 .article > ul { padding-left: 16px; } .joinPage .inner.step2 .article > ul ul { padding-left: 8px; } .joinPage .inner.step4 .rChk { display: inline-block; background: #bfcbde; width: 104px; height: 52px; margin-left: 10px; border-radius: 15px; font-size: 15px; text-align: center; color: #fff; line-height: 52px; cursor: pointer; } .joinPage .inner.step5 .serviceWrap .item { background: #f6f8fb; padding: 16px 20px; margin-top: 20px; border-radius: 8px; } .joinPage .inner.step5 .serviceWrap .item:first-child { margin-top: 10px; } .joinPage .inner.step5 .serviceWrap .serviceTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .joinPage .inner.step5 .serviceWrap .serviceTop .serviceTitle { color: #1167ff; } .joinPage .inner.step5 .serviceWrap .serviceTop .serviceTitle img { margin-right: 4px; } .joinPage .inner.step5 .serviceWrap .serviceTop .chk_box label { display: inline-block; background: url(../../images/web/front/check2_off.svg), #389cfc; background-repeat: no-repeat; background-position: 12px 48%; width: 60px; padding: 0 12px; border-radius: 4px; font-size: 12px; text-align: right; color: #fff;line-height: 25px; } .joinPage .inner.step5 .serviceWrap .serviceTop .chk_box input:checked + label { background: url(../../images/web/front/check2_on.svg), #389cfc; background-repeat: no-repeat; background-position: 12px 48%; } .joinPage .inner.step5 .serviceWrap .serviceInfo { padding-left: 36px; font-size: 12px; color: #666; } .joinPage .inner.step5 .serviceWrap .serviceInfo .servicePrice { display: flex; margin-bottom: 10px; font-size: 14px; } .joinPage .inner.step5 .serviceWrap .serviceInfo .servicePrice p { margin-right: 50px; } .joinPage .inner.step5 .serviceWrap .item.etc { display: flex; } .joinPage .inner.step5 .serviceWrap .serviceEtc { width: 20%; padding: 0 10px; border-right: 1px solid #ddd; text-align: center; font-size: 12px; color: #666; word-break: keep-all; } .joinPage .inner.step5 .serviceWrap .serviceEtc:first-child { border-left: 1px solid #ddd; } .joinPage .inner.step5 .serviceWrap .serviceEtc p { font-size: 16px; color: #1167ff; margin-bottom: 12px; } .joinPage .inner.step6 .section_title { justify-content: center; margin-top: 40px; margin-bottom: 20px; font-size: 20px; } .joinPage .inner.step6 .txtDiv { margin: 30px auto; width: 600px; } .joinPage .inner.step6 .txtDiv p { margin-bottom: 10px; } .joinPage .inner.step6 .txtDiv p:last-child { margin-bottom: 0; } /*alert*/ .alertPop { position: fixed; z-index: 99999; top: 0; left: 0; display: none; width: 100vw; height: 100vh; } /* alertInner width +15px 20220901*/ .alertPop .alertInner { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; width: 365px; padding-bottom: 15px; border: 1px solid #1B3946; border-radius: 4px; overflow: hidden; font-size: 12px; text-align: center; } .alertPop .alertTitle { background: #434c51; color: #fff; font-weight: bold; line-height: 35px; } .alertPop .alertBody { color: #222; padding: 25px; } .alertPop .alertFooter span { display: inline-block; background: linear-gradient(#6584B1, #4D668B); width: 90px; border-radius: 4px; color: #fff; font-size: 11px; font-weight: bold; cursor: pointer; line-height: 27px; } /*loginPage*/ .frontWrap { display: flex; align-items: center; justify-content: center; background: #dde7f3; height: calc(100vh - 133px); min-height: initial; } .frontWrap .content { display: flex; background: #fff; width: 840px; padding: 80px 0; border-radius: 30px; box-shadow: 7px 11px 11px rgba(43,73,150,0.25); } .frontWrap .inr_title { font-weight: bold; font-size: 20px; color: #6d6d6d; } .frontWrap .vBar { width: 2px; border-right: 2px dotted #D9D9D9; } .loginWrap .left_bx { flex: 1; padding: 0 64px; text-align: center; } .loginWrap .form_wrap .subTit { font-size: 18px; font-weight: 600; margin-top: 30px; } .loginWrap .form_wrap input { width: 100%; height: 34px; padding-left: 40px; border: 1px solid #c4c4c4; border-radius: 8px; font-size: 14px; color: #6d6d6d; box-shadow: 0.2px 0.2px 3px 0px #77777740 inset; } .loginWrap .form_wrap input::placeholder { color: #cecece; } .loginWrap .form_wrap input:focus { border-color: #389CFC; } .loginWrap .form_wrap .l_inp { position: relative; margin-top: 10px; } .loginWrap .form_wrap .bgIcon { position: absolute; left: 12px; top: 6px; } .loginWrap .form_wrap .saveId { margin-top: 3px; font-size: 11px; text-align: left; color: #b3b3b3; } .loginWrap .form_wrap .idpw_forget { margin-top: 10px; margin-bottom: 30px; font-size: 12px; } .loginWrap .form_wrap .idpw_forget span { color: #2F80ED; } .loginWrap .form_wrap .b_area { margin-top: 14px; } .loginWrap .form_wrap .b_area input { background: #0077EA; width: 100%; height: 40px; padding: 0; border: none; border-radius: 7px; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; box-shadow: 4px 4px 8px rgba(44, 73, 150, 0.25); line-height: 42px; } .loginWrap .fav { font-size: 15px; font-weight: bold; color: #3E4E66; line-height: 20px; } .loginWrap .fav img { margin-right: 4px; margin-top: -2px; } .loginWrap .fav img { display: inline-block; margin-right: 4px; margin-top: -2px; } .loginWrap .right_bx { flex: 1; padding: 0 52px; text-align: center; } .loginWrap .right_bx .txtWrap { margin-top: 30px; padding: 0 24px; font-size: 15px; } .loginWrap .right_bx .txtWrap .bold { color: #3E4E66; } .loginWrap .right_bx .txtWrap .btn { display: inline-block; width: 100%; margin-top: 10px; border: 1px solid #6b7f9d; border-radius: 8px; box-shadow: 3px 3px 4px 0px #245CAF40; color: #6b7f9d; font-size: 15px; font-weight: bold; cursor: pointer; line-height: 40px; } .frontWrap .pwFindWrap { padding: 80px 0px; } .frontWrap .pwFindWrap .section { flex: 1; padding: 0 30px; text-align: center; } .frontWrap .pwFindWrap .inr_title { margin-bottom: 30px; } .pwFindWrap .join1 { display: flex; flex-direction: column; justify-content: center; background: #FBFCFF; width: 100%; height: 220px; padding: 35px 14px; border-top: 1px solid #7ba4cb; border-bottom: 1px solid #7ba4cb; } .pwFindWrap .join1 label { color: #7a8495; font-size: 16px; font-weight: bold; } .pwFindWrap .join1 li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .pwFindWrap .join1 li:last-child { margin-bottom: 0;} .pwFindWrap .inputWrap { display: flex; align-items: center; width: 230px; } .pwFindWrap .inputWrap input { width: 100%; height: 40px; padding: 0 8px; border: 1px solid #bdcbde; border-radius: 4px; border-radius: 8px; } .pwFindWrap .inputWrap span { margin: 0 8px; } .pwFindWrap .subTxt { margin-top: 15px; font-size: 14px; color: #7a8495; text-align: center; } .pwFindWrap .btn_set { margin-top: 50px; } .pwFindWrap .btn_set .btn { display: inline-block; background: #0077EA; width: 280px; height: 45px; border-radius: 10px; font-size: 16px; font-weight: bold; color: #fff; text-align: center; box-shadow: 3px 3px 4px 0px #245CAF40; line-height: 45px; } /************************************************************************************************************** 2024. 03. 26 dev, 운영 프런트페이지와 동기화 ***************************************************************************************************************/ /* header,pc,리뉴얼 */ .header { position: fixed; top: 0; width: 100%; z-index: 1000; background: #fff; box-shadow: 0px 4px 4px rgba(166, 166, 166, 0.25); } /* 2024.11.20 추가 플로팅버튼 CSS */ #header .floating { position: fixed; bottom: 101px; right: 60px; } #header .floating .floating_wrap { display: flex; flex-direction: column; gap: 10px; max-width: 173px; } #header .floating .floating_wrap img { width: 100%; } #header .floating .floating_wrap .floating_section { display: flex; flex-direction: column; background: #7455FF; padding: 0 12px 12px 12px; border-radius: 10px; } #header .floating .floating_wrap .floating_section.pos { position: relative; background: #F9A200; padding: 57px 12px 12px 12px; } #header .floating .floating_wrap .floating_section span { background: #fff; border-radius: 6px; padding: 15px 0; margin-top: 12px; color: #FE4342; text-align: center; font-size: 14px; font-weight: 900; } #header .floating .floating_wrap .floating_section .color_purple { color: #7455FF } #header .floating .floating_wrap .floating_section.pos img:first-child { position: absolute; left: 1px; bottom: 160px; width: 160px; height: 110px; } #header .floating .floating_wrap .floating_section img { width: 116px; height: 82px; margin: 0 auto; } #header .floating .floating_wrap .floating_section.pos img { width: 136px; } #header .floating .guset_exper { position: relative; } #header .floating .guset_exper .exper_buttons { position: absolute; top: 5px; right: 20px; transform: translateX(-50%); display: none; background: #fff; width: 124px; padding: 20px; border-radius: 16px; text-align: center; box-shadow: 0px 0px 10px 0px rgba(60, 91, 117, 0.25); } #header .floating .guset_exper .exper_buttons.on { display: block; } #header .floting_mobile { position: fixed; bottom: 0; width: 100%; } #header .floting_mobile .floatung_btn { display: flex; border-top: 1px solid #CDCDCD; } #header .floting_mobile .floatung_btn .btn_scetion { background: #5364FA; width: 100%; padding: 13px 0; text-align: center; } #header .floting_mobile .floatung_btn .btn_scetion:last-child { background: #fff; } #header .floting_mobile .floatung_btn .btn_scetion:last-child p { color: #5364FA } #header .floting_mobile .floatung_btn .btn_scetion p { font-size: 12px; color: #F5F5F5; } #header .floting_mobile .floatung_btn .btn_scetion span { font-size: 14px; font-weight: 700; } #header-front .header_inner{ display: flex; align-items: center; max-width: 1517px; height:81px; margin: 0 auto;} #header-front .header_inner .page_logo img, #header-front .header_inner .logo_box img { width: 157px; } #header-front .header_inner .nav > ul { display: flex; align-items: center; margin-left: 30px; } #header-front .header_inner .nav > ul > li > a { color: #000; margin: 0 20px; } #header-front .header_inner .menu_box { display: flex; align-items: center; margin-left: auto; } #header-front .header_inner .menu_box button { width: 120px; height: 28px; font-size: 13px; margin-left: 8px; border-radius: 4px; } #header-front .header_inner .menu_box .remote_box { display: flex; } #header-front .header_inner .menu_box .login_box { display: flex; } #header-front .header_inner .menu_box .remote_box button { background: #ececec; color: #8c8c8c; } #header-front .header_inner .menu_box .login_box button { background: #0F66FF; color: #fff; } #header-front .header_inner .logo_box { display:inline-block;} #header-front .header_inner .logo_box .page_head { display:none; } #header-front .header_inner .menu_box .login_box button { background:initial; color:inherit;} #header-front .header_inner .header_contents { display:inline-flex; width:100%;} #header-front .header_contents { margin-left:56px;} #header-front .header_pc .header_left .nav { display:block; height:100%;} #header-front .header_pc .header_left .header_gnb { display:flex; height:100%;} #header-front .header_pc .header_left .nav > ul { margin-left:0; } #header-front .header_pc .header_left .nav > ul > li > a { margin:0; } #header-front .header_pc { display:flex; width:100%;} #header-front .header_pc .header_left, #header-front .header_pc .header_right { position:relative; display:flex; align-items:center;} #header-front .header_pc .header_right { margin-left:auto;} #header-front .header_pc .header_gnb li { display:inline-block; } #header-front .header_pc .header_gnb li:not(:last-child){ padding-right:30px;} #header-front .header_pc .header_gnb .link_text { position:relative; display:block;} #header-front .header_pc .header_gnb .gnb_checked .link_text:after{ content:" "; position:absolute; bottom:-29px; display:block; width:100%; height:2px; border-radius: 2px; background: #5364FA} #header-front .header_pc .header_gnb .gnb_text{ font-size: 16px; font-weight: 700; color: #333; font-family: "Noto Sans KR";} #header-front .header_pc .header_gnb .gnb_checked .gnb_text{ color:#5364FA;} /* #header-front .header_pc .header_right .menu_box .login_box .user_member{ display:none;} */ #header-front .header_pc .header_right .menu_box .login_box .menu_list { display:flex; align-items:center; color: #607EFF; } #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap { position:relative;} #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap .guest_buttons { opacity:0; position:absolute; top:37px; left:0; background:#fff; width:100%; padding:10px 0; border-radius: 16px; text-align:center; box-shadow: 6px 1px 16px -5px rgba(0,0,0,0.17); -webkit-box-shadow: 6px 1px 16px -5px rgba(0,0,0,0.17); -moz-box-shadow: 6px 1px 16px -5px rgba(0,0,0,0.17); transition:opacity 0.5s ease; } #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap .guest_buttons li{ display: block; margin-right:0; } #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap .guest_buttons li:not(:last-child){ margin-bottom:15px; } #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap .guest_buttons li a { display:block;} #header-front .header_pc .header_right .menu_box .login_box .menu_list .button_wrap .guest_buttons li .button_text { color: #363636; font-family: "Noto Sans KR"; font-size:16px; font-weight:700; } #header-front .header_pc .header_right .menu_box .login_box .menu_list li{ display:flex; align-items:center;} #header-front .header_pc .header_right .menu_box .login_box .menu_list li:not(:last-child){ margin-right:30px;} #header-front .header_inner .menu_box .menu_list .button_menu { overflow: hidden; white-space: nowrap; box-sizing: border-box; } #header-front .header_inner .menu_box .menu_list .button_menu span { position: absolute; display: flex; animation: scroll-left 5s linear infinite; } #header-front .header_inner .menu_box .menu_list .button_menu.button_round { position:relative; z-index:1; width: 134px; height:36px; margin-left:0; border-radius:25px; background: linear-gradient(90deg, #6079FF 0.27%, #58AFFF 98.76%); font-size:16px; color:#fff; font-weight: 400;} #header-front .header_inner .menu_box .menu_list .button_menu.button_round .button_text { display: flex; align-items: center; justify-content: center; width: 100%; height:100%; padding-top:4px; line-height: 1; } #header-front .header_inner .menu_list .menu_text { display:block; color: #607EFF; font-size: 16px; font-weight: 700; font-family: "Noto Sans KR"; line-height:1;} #header-front .page_navigation , #header-front .header_mobile { display:none; } #header-front #guide_li { position: relative; cursor: pointer; } #header-front #guide_li .dropDown { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); background: #fff; display: none; width: 124px; padding: 20px; border-radius: 16px; text-align: center; } #header-front #guide_li .dropDown { box-shadow: 6px 1px 16px -5px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 6px 1px 16px -5px rgba(0, 0, 0, 0.17); -moz-box-shadow: 6px 1px 16px -5px rgba(0, 0, 0, 0.17); transition: opacity 0.5s ease; } #header-front #guide_li.on .dropDown { display: block; } /* #header-front #guide_li .dropDown.on { display: block; } */ #header-front #guide_li .dropDown li { font-family: "Noto Sans KR"; padding-right: 0; font-weight: 700; color: #363636; line-height: 1.4; cursor: pointer; } #header-front #guide_li .dropDown li:first-child { margin-bottom: 15px; } /* 캐시맵top 회원가입 버튼 롤링 css */ @keyframes scroll-left { from { transform: translateX(100%); } to { transform: translateX(-100%); } } /* 홈,페이지 메인 섹션,PC */ .mainPage .section_inner{ max-width:1276px; margin:0 auto;} .mainPage .pc_view .section_message{ padding-bottom:150px;} .mainPage .section_title .text_bold { color: #5364FA; } .mainPage .section_visual{ height:auto; background: #E7EBF6; } .mainPage .section_visual .section_visualMain.pc_view{ position:relative; height:766px; padding-left:56px;} .mainPage .section_visual .section_visualMain.pc_view .visual_title, .mainPage .section_visual .section_visualMain.pc_view .visual_description, .mainPage .section_visual .section_visualMain.pc_view .main_description, .mainPage .section_visual .section_visualMain.pc_view .main_service{ position:relative;} .mainPage .section_visual .section_visualMain.pc_view .visual_title{ position:relative; z-index:1; padding-top:130px; font-size: 34px; font-family: "Noto Sans KR"; font-weight: 100; color: #222; line-height: 1.3;} .mainPage .section_visual .section_visualMain.pc_view .visual_description, .mainPage .section_visual .section_visualMain.pc_view .visual_description .text_bold{ font-size: 60px; font-family: "Noto Sans KR"; color: #222; } .mainPage .section_visual .section_visualMain.pc_view .visual_description { z-index:1; margin:15px 0 22px 0; font-weight: 400; line-height:1; letter-spacing: -4px; } .mainPage .section_visual .section_visualMain.pc_view .main_image { position:absolute; top:168px; right:133px; } .mainPage .section_visual .section_visualMain.pc_view .main_image .main_visual.image_wrap{ width: 658px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_text01 { transition: opacity 0.5s ease-in-out; } .mainPage .section_visual .section_visualMain.pc_view .animation_image .image_text{ position:absolute; width: 105px; height: 44px; transition: transform 0.3s ease; opacity:0;} .mainPage .section_visual .section_visualMain.pc_view .animation_image .image_item:hover img{ transition: transform 0.5s ease-in-out; transform: scale(1.2) translate(-10%, 10%) ; } .mainPage .section_visual .section_visualMain.pc_view .animation_image .image_item:hover + .image_text { opacity:1; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_item01.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image02 .image_item02.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image03 .image_item03.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image04 .image_item04.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image05 .image_item05.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image06 .image_item06.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image07 .image_item07.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image08 .image_item08.image_wrap { position:absolute; width: 43px; height: 29px; transition: transform 1.1s ease; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_item01.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image04 .image_item04.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image05 .image_item05.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image06 .image_item06.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image08 .image_item08.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image03 .image_text03.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image05 .image_text05.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image08 .image_text08.image_wrap { z-index:2; } .mainPage .section_visual .section_visualMain.pc_view .animation_image03 .image_item03.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image07 .image_item07.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image07 .image_text07.image_wrap { z-index: 1; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_text01.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image02 .image_text02.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image04 .image_text04.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation_image06 .image_text06.image_wrap { z-index:3; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_item01.image_wrap { top: 102px; left: 216px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image02 .image_item02.image_wrap { top: 208px; left: 229px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image03 .image_item03.image_wrap { top: 246px; left: 322px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image04 .image_item04.image_wrap { top: 147px; left: 290px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image05 .image_item05.image_wrap { top: 55px; left: 320px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image06 .image_item06.image_wrap { top: 137px; left: 373px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image07 .image_item07.image_wrap { top: 231px; left: 382px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image08 .image_item08.image_wrap { top: 7px; left: 237px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image01 .image_text01.image_wrap { top: 72px; left: 181px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image02 .image_text02.image_wrap { top: 177px; left: 194px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image03 .image_text03.image_wrap { top: 215px; left: 285px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image04 .image_text04.image_wrap { top: 117px; left: 255px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image05 .image_text05.image_wrap { top: 23px; left: 285px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image06 .image_text06.image_wrap { top: 108px; left: 339px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image07 .image_text07.image_wrap { top: 204px; left: 349px; } .mainPage .section_visual .section_visualMain.pc_view .animation_image08 .image_text08.image_wrap { top: -22px; left: 200px; } @keyframes fadeInAndMoveUp { 0% { transform: translateY(0); } 100% { transform: translateY(-70px); } } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image01 .image_item01.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image02 .image_item02.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image03 .image_item03.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image04 .image_item04.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image05 .image_item05.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image06 .image_item06.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image07 .image_item07.image_wrap, .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image08 .image_item08.image_wrap { animation: fadeInAndMoveUp 1s ease forwards; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image01 .image_text01.image_wrap { top: 2px; z-index:3; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image02 .image_text02.image_wrap { top: 108px; z-index:3; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image03 .image_text03.image_wrap { top: 146px; z-index:2; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image04 .image_text04.image_wrap { top: 46px; z-index:3; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image05 .image_text05.image_wrap { top: -46px; z-index:2; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image06 .image_text06.image_wrap { top: 32px; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image07 .image_text07.image_wrap { top: 130px; z-index: 1; } .mainPage .section_visual .section_visualMain.pc_view .animation .animation_image08 .image_text08.image_wrap { top: -94px; z-index: 2;} .mainPage .section_visual .section_visualMain.pc_view .main_image img{ display:block; width:100%; } .mainPage .section_visual .section_visualMain.pc_view .main_description{ display:inline-block; margin-bottom:50px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; line-height:1.6; } .mainPage .section_visual .section_visualMain.pc_view .main_service .button_list li:not(:last-child){ margin-right:12px; } .mainPage .section_visual .section_visualMain.pc_view .main_service .tooltip_box { position: absolute; bottom: 35px; left: 25px; display: none; } .mainPage .section_visual .section_visualMain.pc_view .main_service .button_service { position:relative; padding:11px 16px; box-sizing:border-box; font-size: 19px; font-weight: 600; font-family: "Noto Sans KR"; color: #5C58FF; border: 2px solid #5C58FF; border-radius: 44px; line-height:1; letter-spacing: -2px; } .mainPage .section_visual .section_visualMain.pc_view .main_service .button_service:hover .tooltip_box { display: block; } .mainPage .section_visual .section_visualMain .main_service .button_list li:last-child .button_service { border: 2px solid #0276FF; color: #0276FF; } .mainPage .section_visual .section_visualMain .main_service .button_list li:last-child .button_service img { padding-right: 3px; } .mainPage > .front_bg1 { display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(/images/web/front/front_bg01.png) no-repeat center; width: 100%; height: 247px; gap: 30px; text-align: center; font-size: 24px; font-weight: 700; color: #fff; } .mainPage > .front_bg1 > span { background: #545BFF; width: 178px; border-radius: 8px; text-align: center; line-height: 60px; cursor: pointer; } /* 홈,한눈에 보는 캐시맵 서비스,pc */ .mainPage .section_core .service_core.pc_view img { margin-bottom: 200px; } .mainPage .section_core .service_core.pc_view .section_summary { padding: 144px 0 30px 0; } .mainPage .section_core .service_core.pc_view .section_title { margin-bottom: 16px; } .mainPage .section_core .service_core.pc_view .section_description { margin-bottom: 53px;} .mainPage .section_core .service_core.pc_view .section_message.layout_flex { align-items:flex-start; justify-content:space-between;} .mainPage .section_core .service_core.pc_view .section_message.layout_flex .layout_left, .mainPage .section_core .service_core.pc_view .section_message.layout_flex .layout_right { width: 628px; border-radius: 20px; background: #F2F7F9;} .mainPage .section_core .service_core.pc_view .section_message.layout_flex .layout_left .image_wrap img, .mainPage .section_core .service_core.pc_view .section_message.layout_flex .layout_right .image_wrap img { display:block; width:100%;} .mainPage .section_core .service_core.pc_view .section_message.layout_flex .layout_right .image_wrap{ width: 48px; height: 48px; } .mainPage .section_core .service_core.pc_view .section_message.layout_flex .image_wrap { width: 34px; height: 34px; } .mainPage .section_core .service_core.pc_view .section_message .layout_grid { width:416px;} .mainPage .section_core .service_core.pc_view .section_message .layout_right .layout_grid li{background: #E0ECEE;} .mainPage .section_core .service_core.pc_view .section_message .area_title { display:block; padding:40px 0 15px 0; font-family: "Noto Sans KR"; font-size: 26px; font-weight: 600; line-height:1;} .mainPage .section_core .service_core.pc_view .section_message .area_description { margin-bottom:24px; font-weight:400;} .mainPage .section_core .service_core.pc_view .section_message .area_information { padding-bottom:20px;} .mainPage .section_core .service_core.pc_view .section_message .unit_title { display:block; font-size: 14px; font-family: "Noto Sans KR"; font-weight: 600; color: #333; } .mainPage .section_core .service_core.pc_view .section_message .text_more { position:relative; display:inline-block; margin:0 auto 5px auto; padding:10px; box-sizing:border-box; color: #999; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 700; text-align:center; } .mainPage .section_core .service_core.pc_view .section_message .text_more:after { position: absolute; top: 50%; right: -19px; display: block; content: " "; background: url(../../images/web/front/main_link.png) no-repeat; width: 24px; height: 8px; transform: translateY(-50%); } /* 홈,캐시맵을 선택해야하는 이유,pc */ .mainPage .section_choice { position:relative; background: #F0F4FF;} .mainPage .section_choice.background_before:before { top:0; left:0; width:100%; height: 384px; background: #5364FA; } /* .mainPage .section_choice .service_choice.pc_view .section_summary { color: #FFF;} */ /* .mainPage .section_choice .service_choice.pc_view .section_title { margin-bottom:50px; color:#fff; font-weight:200; } */ /* .mainPage .section_choice .service_choice.pc_view .section_title .text_bold { font-size: 56px; font-weight: 600; color:#fff;} */ /* .mainPage .section_choice .service_choice.pc_view .module_tab { border-radius: 30px; background: #FFF; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.15);} */ .mainPage .section_choice .service_choice.pc_view .module_tab .tab_menu, .mainPage .section_choice .service_choice.pc_view .module_tab .tab_button{ display:flex; align-items:center; } .mainPage .section_choice .service_choice.pc_view .module_tab .tab_menu { justify-content:space-between; padding: 24px 24px 0 24px; box-sizing:border-box;} .mainPage .section_choice .service_choice.pc_view .module_tab .tab_item .tab_button { width: 210px; height: 74px; justify-content:center; color: #777; font-size: 24px; font-weight:600; } .mainPage .section_choice .service_choice.pc_view .module_tab .tab_item.tab_active .tab_button { position: relative; color:#5364FA; font-weight:700; text-align: center; } .mainPage .section_choice .service_choice.pc_view .module_tab .tab_item.tab_active .tab_button:after { position: absolute; content: ""; bottom: 5px; width: 130px; border-bottom: 4px solid #5364fa; border-radius: 9px; } .mainPage .section_choice .service_choice.pc_view .module_tab .tab_content { padding:48px; box-sizing:border-box;} .mainPage .section_choice .service_choice.pc_view .module_tab .tab_content li { display:none; } .mainPage .section_choice .service_choice.pc_view .module_tab .tab_content .image_side .image_wrap{ width: 604px; height: 416px;} .mainPage .section_choice .service_choice.pc_view .module_tab .tab_content .tab_item .image_description{ line-height:1.4;} .mainPage .section_choice .service_choice.pc_view .module_tab .tab_content .tab_main.tabContent_active { display:block;} /* 홈,번거로운 업무를 손쉽게 효과적으로,pc */ .mainPage .section_benefit { background: #FAFAFA;} .mainPage .section_benefit .service_benefit.pc_view .benefit_list li {width: 608px; height: 206px; border-radius: 20px; background: #FFF; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05); margin:10px;} .mainPage .section_benefit .service_benefit.pc_view .benefit_list .image_side .image_wrap{ width: 110px; height: 110px; margin-right:48px; } .mainPage .section_benefit .service_benefit.pc_view .benefit_list .image_side .image_text{ width:374px;} .mainPage .section_benefit .service_benefit.pc_view .benefit_list .image_side .image_text .image_title{ font-size: 24px; margin-bottom: 11px;} .mainPage .section_benefit .service_benefit.pc_view .benefit_list .image_side .image_text .image_description{ font-size: 16px; } /* 홈,스마트워크시대,pc */ .mainPage .section_smartWorks .service_smartWorks.pc_view .section_summary { padding: 118px 0 18px 0;} .mainPage .section_smartWorks .service_smartWorks.pc_view .section_title { margin-bottom: 10px; font-weight: 600; line-height: 1.3;} .mainPage .section_smartWorks .service_smartWorks.pc_view .section_description { margin-bottom:533px;} .mainPage .section_smartWorks .service_smartWorks.pc_view .section_message { padding-bottom:0;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list{ position:absolute; top:108px; right:0; width:974px;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li{ height:auto; justify-content:flex-start; align-items: flex-start; width:304px; padding:0 24px 24px 24px; box-sizing:border-box; border-radius: 20px; background:initial;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li .feature_number{ margin: 20px 0 26px 0; font-size: 40px; font-weight: 600;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li .feature_title{ position:relative; margin-bottom:25px; font-weight: 600; color: #4A4A4A; line-height:1.4; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li .feature_description{ position:relative; font-weight: 400; color: #4A4A4A;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li .feature_description:before{ content:" "; display:block; position:absolute; top:-14px; left:0; width:54px; height:4px;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:first-child { margin-left:332px; background: #EBF5FF;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:first-child .feature_number{ color: #C8DBEE; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:first-child .feature_description:before{ background: #C8DBEE;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(2) { background: #EAF5E7;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(2) .feature_number { color: #C6DDC0; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(2) .feature_description:before{ background: #C6DDBF;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(3) { background: #EBE8F9; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(3) .feature_number { color: #C8C3E0; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(3) .feature_description:before{ background: #C8C3E0;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(4) { background: #FFF5EB; } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(4) .feature_number { color: #EED4BA } .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:nth-child(4) .feature_description:before{ background: #EED4BA;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:last-child { background: #FFEFF7;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:last-child .feature_number { color: #F2C7DD;} .mainPage .section_smartWorks .service_smartWorks.pc_view .feature_list li:last-child .feature_description:before{ background: #F2C7DD;} /* 홈,필요한 기능만 골라쓰는 맞춤형 업무환경,pc */ .mainPage .section_custom { background: #F0F4FF;} .mainPage .service_custom.pc_view .section_title{ line-height: 1.3; } .mainPage .service_custom.pc_view .section_description{ line-height: 1.4; } .mainPage .service_custom.pc_view .layout_flex, .mainPage .service_custom.pc_view .feature_list{ flex-wrap:nowrap;} .mainPage .service_custom.pc_view .layout_flex{ justify-content:space-between; padding-top:206px;} .mainPage .service_custom.pc_view .layout_flex .layout_left{ display: flex; justify-content: flex-start; flex-direction: column;} .mainPage .service_custom.pc_view .layout_flex .layout_left .section_summary{ padding: 5px 0 20px 0;} .mainPage .service_custom.pc_view .feature_list li{ align-items:flex-start; justify-content: flex-start; background:#fff; width: 370px; height:auto; margin: 0 10px; border: 1px solid #333; border-radius: 30px; transition: background-color 0.5s ease;} .mainPage .service_custom.pc_view .feature_list li:hover{ background: #2D3355; } .mainPage .service_custom.pc_view .feature_list li:hover .feature_title, .mainPage .service_custom.pc_view .feature_list li:hover .feature_description, .mainPage .service_custom.pc_view .feature_list li:hover .feature_text{ color: #FFF; } .mainPage .service_custom.pc_view .feature_list li .feature_link { display:block; width:100%; padding:0 40px; box-sizing:border-box; } .mainPage .service_custom.pc_view .feature_list li .feature_title{ margin:60px 0 20px 0; font-size: 38px; font-weight: 700; color: #222;} .mainPage .service_custom.pc_view .feature_list li .feature_description{ height:76px; font-size: 18px; font-weight: 400; color: #222; word-break: break-all; letter-spacing: 0; line-height:1.4;} .mainPage .service_custom.pc_view .feature_list .feature_button.button_round { display:flex; align-items:center; justify-content:center; width: 152px; height: 34px; margin:20px 0 107px 0 ; font-weight: 600; font-size: 18px; color: #FFF; border-radius: 19px; background: #5364FA; } .mainPage .service_custom.pc_view .feature_list li .feature_text{ display:inline-block; vertical-align:top; position:relative; margin-bottom:60px; font-weight: 600; color: #999999;} .mainPage .service_custom.pc_view .feature_list li .feature_text:after{ content:" "; position:absolute; display:block; right:-28px; bottom:8px; width:24px; height:8px; background:url("../../images/web/front/main_link.png") no-repeat; } /* 홈,캐시맵 서비스의 파트너,pc */ .mainPage .section_partners { background: #5364FA; } .mainPage .section_partners .section_inner { max-width:1406px; } .mainPage .section_partners .service_partners.pc_view .section_summary { padding: 133px 0 40px 0; color:#fff;} .mainPage .section_partners .service_partners.pc_view .section_description { margin-bottom: 52px; color:#fff;} .mainPage .section_partners .service_partners.pc_view .section_title { margin-bottom: 9px; color:#fff; font-size: 40px; font-weight: 100; } .mainPage .section_partners .service_partners.pc_view .text_bold{ color:#fff;} .mainPage .section_partners .service_partners.pc_view .module_slider { position:relative;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper.partners_swiper { max-width:1276px; height:264px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-slide { width: 628px; border-radius: 20px; background: #FFF; } .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit { position:relative; height:264px; padding:0 30px; text-align:left; color: #000; font-weight: 600} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_title { display:block; margin:35px 0 20px 0; font-size: 30px; line-height:1; } .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_rate {margin-bottom:45px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_rate .image_wrap { width: 85px; height: 15px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_rate .image_wrap img{ display:block; width:100%;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_logo { position:absolute; top:0; right:30px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_logo.popcorn .image_wrap { width: 184px; height: 39px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_logo.kmieg .image_wrap { width: 113px; height: 44px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_logo.rec .image_wrap { width: 134px; height: 53px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_logo.rec .image_wrap img{ display:block; width:100%;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_opinions { font-size: 18px; font-weight: 500; color: #000 } .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_opinions .partners_category{ display:block; margin-bottom:5px; } .mainPage .section_partners .service_partners.pc_view .module_slider .swiper_unit .partners_opinions .partners_benefit { word-break: keep-all; line-height:1.3;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-prev:after, .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-next:after{ content:" "; display:none;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-prev .button_slide, .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-next .button_slide { position:relative; z-index:2;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-prev .button_slide:after, .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-next .button_slide:after{ content:" "; z-index:2; position:absolute; display:block; width:45px; height:45px; } .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-prev .button_slide:after{ background: url("../../images/web/front/slider_button_prev.png") no-repeat; left:-26px;} .mainPage .section_partners .service_partners.pc_view .module_slider .swiper-button-next .button_slide:after{ background: url("../../images/web/front/slider_button_next.png") no-repeat; left:-21px;} /* 홈,캐시맵 모바일 APP,pc */ .mainPage .service_apps.layout_flex{ justify-content:space-between;} .mainPage .service_apps.layout_flex .layout_left{ padding-top:89px; } .mainPage .service_apps.pc_view .section_title { margin-bottom: 16px; line-height: 1.3;} .mainPage .service_apps.pc_view .section_description { margin-bottom:42px; font-weight: 300; color:#000; } .mainPage .service_apps.pc_view .button_wrap .button_list li a{ display:inline-block; width:100%; } .mainPage .service_apps.pc_view .button_wrap .button_list li:not(:last-child){ margin-right:15px;} .mainPage .service_apps.pc_view .button_wrap .button_list li .button_contact { height:50px;} .mainPage .service_apps.pc_view .button_wrap .image_wrap{ width: 232px; height: 50px;} .mainPage .service_apps.pc_view .button_wrap .image_wrap img{ display:block; width:100%;} /* 개별 페이지, 회원가입,pc */ .joinPage { display:flex; align-items:center; flex-direction:column; } .joinPage .form_container { width:460px; } .joinPage .form_container .form_header, .joinPage .form_container .form_body, .joinPage .form_container .form_footer { width:100%; } .joinPage .form_container .form_header { padding-bottom:37px; } .joinPage .form_container .form_header .form_logo { width:200px; margin:0 auto; } .joinPage .form_container .form_header .form_logo .image_wrap { width:100%; } .joinPage .form_container .form_header .form_logo .image_wrap img { display:block; width:100%; } .joinPage .form_container .form_body .form_list .form_item:not(:last-child) { margin-bottom:24px; } .joinPage .form_container .form_body .form_list .form_item { position:relative; } .joinPage .form_container .form_body .form_list .form_item .form_title { position:relative; display:block; margin-bottom:10px; color: #4A5E76; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 700; line-height: 1; cursor:auto; } .joinPage .form_container .form_body .form_list .form_item .form_title.required { position:relative; } .joinPage .form_container .form_body .form_list .form_item .form_title.required:after { position: absolute; top: 50%; content: " "; background: url("../../images/web/front/required.png") center center no-repeat ; width: 8px; height: 8px; margin-left: 4px; transform: translateY(-50%); } .joinPage .form_container .form_body .form_list .form_item .input_box input { display:block; width:100%; padding:10px; box-sizing:border-box; border: 1px solid #859AAC; border-radius: 4px; color: #222222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; } .joinPage .form_container .form_body .form_list .form_item .form_checkbox { position:absolute; top:0; right:0; display:inline-block; } .joinPage .form_container .form_body .form_list .form_item .form_checkbox .check_title { position:relative; padding:0 0 3px 19px ; color: #4A5E76; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 500; line-height:1; } .joinPage .form_container .form_body .form_list .form_item .form_checkbox .check_title:before { position:absolute; content:" "; top:50%; left:0; display:block; background:url("../../images/web/input/check_off04.png") no-repeat; background-size: 16px 16px; width:16px; height:16px; transform: translateY(-50%); } .joinPage .form_container .form_body .form_list .form_item .form_checkbox input { display:none; } .joinPage .form_container .form_body .form_list .form_item .form_checkbox input[type="checkbox"]:checked + .check_title:before { position:absolute; content:" "; display:block; background:url("../../images/web/input/check_on04.png") no-repeat; background-size:16px 16px; width:16px; height:16px; padding-top:2px; } .joinPage .form_container .form_body .form_list .form_item .form_box { width:100%; } .joinPage .form_container .form_body .form_list .form_item .form_box.split_input { font-size:0; } .joinPage .form_container .form_body .form_list .form_item .form_box.split_input .input_box { display:inline-block; vertical-align:top; width:calc( 100% - 84px ); } .joinPage .form_container .form_body .form_list .form_item .form_group .input_box.focus input { border:1px solid #2F44FF; } .joinPage .form_container .form_body .form_list .form_item .form_group.input_error .input_box input{ border: 1px solid #FF2E60; } .joinPage .form_container .form_body .form_list .form_item .form_group.input_error .text_wrap, .joinPage .form_container .form_body .form_list .form_item .form_group.input_confirm .text_wrap { display:block; } .joinPage .form_container .form_body .form_list .form_item .text_wrap { display:none; margin-left:10px; } .joinPage .form_container .form_body .form_list .form_item .text_guide { margin:8px 0 0 10px; color: #555; font-family: "Noto Sans KR"; font-size: 12px; font-weight: 400; line-height:1; } .joinPage .form_container .form_body .form_list .form_item .text_wrap .message_box .errMsg, .joinPage .form_container .form_body .form_list .form_item .text_wrap .message_box .okMsg { margin-top:5px; font-size: 12px; font-weight: bold;} .joinPage .form_container .form_body .form_list .form_item .text_wrap .message_box .errMsg { color: #F00; } .joinPage .form_container .form_body .form_list .form_item .text_wrap .message_box .okMsg { color: #2F44FF; } .joinPage .form_container .form_body .form_list .form_item .form_box .button_check { display:inline-flex; align-items:center; justify-content:center; background: #464856; width:76px; height:46px; margin-left:8px; border-radius: 4px; color: #FFF; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.3; } .joinPage .form_container .form_body .form_list .form_item .user_agreement { padding:16px; box-sizing:border-box; border-radius: 4px; border: 1px solid #859AAC; } .joinPage .form_container .form_body .form_list .form_item .agreement_all.form_checkbox, .joinPage .form_container .form_body .form_list .form_item .agreement_each.form_checkbox { position:static; display:block; } .joinPage .form_container .form_body .form_list .form_item .agreement_all.form_checkbox .check_title, .joinPage .form_container .form_body .form_list .form_item .agreement_each.form_checkbox .check_title { padding-left:28px; color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1; } .joinPage .form_container .form_body .form_list .form_item .agreement_all.form_checkbox .check_title:before, .joinPage .form_container .form_body .form_list .form_item .agreement_each.form_checkbox .check_title:before, .joinPage .form_container .form_body .form_list .form_item .agreement_all.form_checkbox input[type="checkbox"]:checked + .check_title:before, .joinPage .form_container .form_body .form_list .form_item .agreement_each.form_checkbox input[type="checkbox"]:checked + .check_title:before { background-size:20px 20px; width:20px; height:20px; } .joinPage .form_container .form_body .form_list .form_item .agreement_all.form_checkbox { padding-bottom:24px; border-bottom:1px solid #859AAC; } .joinPage .form_container .form_body .form_list .form_item .agreement_list { margin-top:12px; } .joinPage .form_container .form_body .form_list .form_item .agreement_list .button_agreement { background:url("../../images/web/front/arrow_right02.png") center center no-repeat; background-size:20px 20px; width:20px; height:20px; transition: transform 0.5s ease; } .joinPage .form_container .form_body .form_list .form_item .agreement_list .button_agreement.opened { transform: rotate(90deg) ; } .joinPage .form_container .form_body .form_list .form_item .agreement_list .terms_title { display:block; margin:25px 0; font-size:14px; color: #666; font-weight: bold; text-align:center; } .joinPage .form_container .form_body .form_list .form_item .agreement_list .agreement_item:not(:last-child) { margin-bottom:14px; } .joinPage .form_container .form_body .form_list .form_item .agreement_list .agreement_item .agreement_title { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; } .joinPage .form_container .form_body .form_list .form_item .agreement_terms { display:none; height:270px; padding:18px; box-sizing:border-box; border: 1px solid #859AAC; color: #666; font-size: 13px; overflow-y:auto; } .joinPage .form_container .form_body .form_list .form_item .agreement_terms .intro_title { display:block; margin: 25px 0; font-size: 14px; color: #666; font-weight: bold; text-align: center; } .joinPage .form_container .form_body .form_list .form_item .terms_list .row_item:not(:last-child) { margin-bottom:10px; } .joinPage .form_container .form_body .form_list .form_item .terms_list .terms_order { display:block; font-weight:bold; } .joinPage .form_container .form_body .form_list .form_item .terms_list .terms_row, .joinPage .form_container .form_body .form_list .form_item .terms_list .terms_order, .joinPage .form_container .form_body .form_list .form_item .terms_list .description_item:not(:last-child), .joinPage .form_container .form_body .form_list .form_item .terms_list .inner_title, .joinPage .form_container .form_body .form_list .form_item .terms_list .inner_item:not(:last-child), .joinPage .form_container .form_body .form_list .form_item .terms_list .sub_item:not(:last-child), .joinPage .form_container .form_body .form_list .form_item .terms_list .detail_item:not(:last-child) { margin-bottom:5px; } .joinPage .form_container .form_body .form_list .form_item .terms_list .sub_list, .joinPage .form_container .form_body .form_list .form_item .terms_list .detail_list { margin:5px 0 0 10px; } .joinPage .form_container .form_body .form_list .form_item .terms_list .inner_list { margin-left:15px; } .joinPage .form_container .form_footer { margin:32px 0; } .joinPage .form_container .form_footer .button_submit { padding:16px 0; } /* 개별 페이지, 회원가입 완료,pc */ .joinPage .welcome { width:460px; margin:150px auto 0 auto; } .joinPage .welcome .welcome_header { background:url("../../images/web/front/join_welcome.png") top center no-repeat; background-size:90px 90px; padding-top:119px; border-bottom:1px solid #AAA; line-height:1; text-align:center; } .joinPage .welcome .welcome_header .welcome_title { display:block; margin-bottom:8px; font-size: 30px; color: #222; font-family: "Noto Sans KR"; font-weight: 700; } .joinPage .welcome .welcome_header .welcome_status { margin-bottom:29px; font-size: 20px; color: #222; font-family: "Noto Sans KR"; font-weight: 700; } .joinPage .welcome .welcome_body { padding:32px 0; box-sizing:border-box; border-bottom:1px solid #AAA; } .joinPage .welcome .welcome_body .welcome_notice { margin-bottom:16px; } .joinPage .welcome .welcome_body .welcome_notice li { position:relative; padding-left:20px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.4; } .joinPage .welcome .welcome_body .welcome_notice li:before { position:absolute; top:8px; left:6px; content:" "; display:block; background:#222; width:4px; height:4px; border-radius:100%; } .joinPage .welcome .welcome_body .welcome_notice li:not(:last-child) { margin-bottom:5px; } .joinPage .welcome .welcome_body .welcome_notice .text_break { display:none; } .joinPage .welcome .welcome_body .button_wrap .button_list { display:flex; align-items:center; justify-content:center; } .joinPage .welcome .welcome_body .button_wrap .button_list li { position:relative; display:flex; align-items:center; justify-content:center; width:158px; height:48px; border-radius: 4px; border: 1px solid #464856; } .joinPage .welcome .welcome_body .button_wrap .button_list li:not(:last-child) { margin-right:10px; } .joinPage .welcome .welcome_body .button_wrap .button_list li .link_store { position:relative; display: flex; align-items: center; justify-content: center; width:100%; height:100%; color:#464856; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; line-height:1; text-align:center; } .joinPage .welcome .welcome_body .button_wrap .button_list li .link_store:before { position:absolute; top:50%; left:21px; content:" "; display:block; width:18px; height: 22px; transform:translateY(-50%); } .joinPage .welcome .welcome_body .button_wrap .button_list li:last-child .link_store:before { left:11px; } .joinPage .welcome .welcome_body .button_wrap .button_list li:first-child .link_store { padding-left:25px } .joinPage .welcome .welcome_body .button_wrap .button_list li:last-child .link_store { padding-left:26px } .joinPage .welcome .welcome_body .button_wrap .button_list li:first-child .link_store:before { background:url("../../images/web/front/ico_apple.png") no-repeat; background-size:18px 22px; } .joinPage .welcome .welcome_body .button_wrap .button_list li:last-child .link_store:before { background:url("../../images/web/front/ico_google.png") no-repeat; background-size:18px 22px; } .joinPage .welcome .welcome_footer { padding-top:32px; } .joinPage .welcome .welcome_footer .button_list .button_item { width:100%; height:44px; } .joinPage .welcome .welcome_footer .button_list .button_item:not(:last-child) { margin-bottom:12px; } .joinPage .welcome .welcome_footer .button_list .button_login, .joinPage .welcome .welcome_footer .button_list .button_home { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius: 4px; font-size: 16px; font-weight: 700; font-family: "Noto Sans KR"; line-height:1; text-align:center; } .joinPage .welcome .welcome_footer .button_list .button_login { border: 2px solid #6079FF; color: #607BFF; } .joinPage .welcome .welcome_footer .button_list .button_home { background: linear-gradient(90deg, #6079FF 0.27%, #58AFFF 98.76%); color: #FFF; } /* 개별 페이지, 로그인,pc */ .loginPage .form_container .form_footer .form_request .faq_list { display:flex; align-items:center; justify-content:center; } .loginPage .form_container .form_container, .loginPage .form_container .form_body .form_list li:not(:last-child) { margin-bottom:15px; } .loginPage .form_container .form_body .form_list .form_id, .loginPage .form_container .form_body .form_list .form_password { width:460px; max-width:460px; } .loginPage .form_container .form_body .input_box { width:100%; border-radius: 4px; border: 1px solid #859AAC; overflow:hidden; } .loginPage .form_container .form_body .input_box input { display:block; width:100%; height:auto; padding: 14px 17px; box-sizing:border-box; color: #222222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; } .loginPage { display:flex; justify-content:center; margin-top: 140px; } .loginPage .form_container .form_header .form_logo { width:240px; margin:0 auto 65px auto; } .loginPage .form_container .form_header .form_logo .image_wrap { width:100%; } .loginPage .form_container .form_header .form_logo .image_wrap img { display:block; width:100%; } .loginPage .form_container .form_body .text_result { display:none; margin-top:5px; } .loginPage .form_container .form_body .text_result .text_error { color: #F00; font-family: "Noto Sans KR"; font-size: 12px; font-weight: bold; line-height: 1; } .loginPage .form_container .form_body .form_control { margin:16px 0 32px 0; } .loginPage .form_container .form_body .form_control .form_save .text_save { position:relative; display:inline-block; vertical-align:top; padding:0 0 2px 23px ; box-sizing:border-box; color: #4A5E76; font-family: "Noto Sans KR"; font-size:14px; font-weight: 500; line-height:1; } .loginPage .form_container .form_body .form_control .form_save .text_save:before { position:absolute; content:" "; top:50%; left:0; display:block; background:url("../../images/web/input/check_off04.png") no-repeat; background-size: 15px 15px; width:15px; height:15px; transform: translateY(-50%); } .loginPage .form_container .form_body .form_control .form_save input[id="saveId"]:checked + .text_save:before { position:absolute; content:" "; display:block; width:15px; height:15px; background:url("../../images/web/input/check_on04.png") no-repeat; background-size:15px 15px; } .loginPage .form_container .form_footer .form_request .faq_list { margin-top:32px; } .loginPage .form_container .form_footer .form_request .faq_list li:nth-child(2) { position:relative; margin:0 32px; } .loginPage .form_container .form_footer .form_request .faq_list li:nth-child(2):before, .loginPage .form_container .form_footer .form_request .faq_list li:nth-child(2):after { position:absolute; content:" "; display:block; top:3px; width:1px; height:12px; background: #AAA; } .loginPage .form_container .form_footer .form_request .faq_list li:nth-child(2):before { left:-16px; } .loginPage .form_container .form_footer .form_request .faq_list li:nth-child(2):after { right:-16px; } .loginPage .form_container .form_footer .form_request .faq_list .faq_title { display:inline-block; vertical-align:top; color: #4A5E76; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 500; line-height:1; } /* 개별 페이지, 아이디 찾기,pc */ .findIdPage { display:flex; justify-content:center; margin-top:140px; } .findIdPage .form_container .form_footer .form_request .faq_list { display:flex; align-items:center; justify-content:center; } .findIdPage .form_container .form_container, .findIdPage .form_container .form_body .form_list li:not(:last-child) { margin-bottom:16px; } .findIdPage .form_container .form_body .form_list .form_name, .findIdPage .form_container .form_body .form_list .form_email { width:460px; max-width:460px; } .findIdPage .form_container .form_body .input_box { width:100%; border-radius: 4px; border: 1px solid #859AAC; overflow:hidden; } .findIdPage .form_container .form_body .input_box input { display:block; width:100%; padding: 14px 17px; box-sizing:border-box; color: #222222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; } .findIdPage .form_container .form_header .form_logo { width:240px; margin:0 auto 47px auto; } .findIdPage .form_container .form_header .form_logo .image_wrap { width:100%; } .findIdPage .form_container .form_header .form_logo .image_wrap img { display:block; width:100%; } .findIdPage .form_container .form_header .form_description { margin-bottom:27px; color: #000; font-family: "Noto Sans KR"; line-height:1; text-align:center; } .findIdPage .form_container .form_header .form_description .page_title { margin-bottom:14px; font-size: 30px; font-weight: 700; } .findIdPage .form_container .form_header .form_description .page_guide { margin-bottom:20px; font-size: 20px; font-weight: 700; } .findIdPage .form_container .form_header .form_description .page_help { color: #4A5E76; font-size: 14px; font-weight: 400; } .findIdPage .form_container .form_body .text_result { display:none; margin-top:5px; } .findIdPage .form_container .form_body .text_result .text_error { color: #F00; font-family: "Noto Sans KR"; font-size: 12px; font-weight: bold; line-height: 1; } .findIdPage .form_container .form_footer { margin-top:16px; } .findIdPage .form_container .form_footer .form_request { margin-top:37px; text-align:center; } .findIdPage .form_container .form_footer .form_request .text_notice { color: #4A5E76; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; } .findIdPage .form_container .form_footer .form_request .link_page { color: #607AFF; font-size: 16px; font-weight: 500; text-decoration:underline; } .findIdPage .modal_wrapper { visibility: hidden; z-index: 10000001; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); transition: all 0.5s ease-in-out; } .findIdPage .modal_wrapper.no_background { visibility: hidden; z-index: 10000001; position: fixed; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.5s ease-in-out; } .findIdPage .modal_wrapper.active { visibility: visible; } .findIdPage .modal_wrapper .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; background: #FFF; width:385px; border-radius: 16px; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25); } .findIdPage .modal_wrapper .modal .modal_contents { position:relative; color: #0E0E0E; font-family: "Noto Sans KR"; font-size: 16px; text-align:center; } .findIdPage .modal_wrapper .modal .modal_contents .text_alert { margin-top:40px; font-weight: 400; line-height:1; } .findIdPage .modal_wrapper .modal .modal_contents .text_userId { font-weight: 700; } .findIdPage .modal_wrapper .modal .modal_bottom { margin:38px 0 22px 0; text-align:center; } .findIdPage .modal_wrapper .modal .modal_bottom .button_cancel { display: flex; align-items:center; justify-content:center; background: #464856; width:100px; height:30px; margin:0 auto; border-radius: 4px; color: #FFF; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1; } .findIdPage .modal_wrapper .modal .modal_button { border:1px solid; position:absolute; top:0; right:0; display:block; width:10px; height:10px; } /* 개별 페이지, 비밀번호 찾기,pc */ .findPwdPage { display:flex; justify-content:center; margin-top:140px; } .findPwdPage .form_container .form_footer .form_request .faq_list { display:flex; align-items:center; justify-content:center; } .findPwdPage .form_container .form_container, .findPwdPage .form_container .form_body .form_list li:not(:last-child) { margin-bottom:16px; } .findPwdPage .form_container .form_body .form_list .form_id { width:460px; max-width:460px; } .findPwdPage .form_container .form_body .input_box { width:100%; border-radius: 4px; border: 1px solid #859AAC; overflow:hidden; } .findPwdPage .form_container .form_body .input_box input { display:block; width:100%; padding: 14px 17px; box-sizing:border-box; color: #222222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; } .findPwdPage .form_container .form_body .input_box input::placeholder { color: #AAA; } .findPwdPage .form_container .form_header .form_logo { width:240px; margin:0 auto 47px auto; } .findPwdPage .form_container .form_header .form_logo .image_wrap { width:100%; } .findPwdPage .form_container .form_header .form_logo .image_wrap img { display:block; width:100%; } .findPwdPage .form_container .form_header .form_description { margin-bottom:27px; color: #000; font-family: "Noto Sans KR"; line-height:1; text-align:center; } .findPwdPage .form_container .form_header .form_description .page_title { margin-bottom:14px; font-size: 30px; font-weight: 700; } .findPwdPage .form_container .form_header .form_description .page_guide { margin-bottom:20px; font-size: 20px; font-weight: 700; } .findPwdPage .form_container .form_header .form_description .page_notice li:not(:last-child) { margin-bottom:5px; } .findPwdPage .form_container .form_header .form_description .page_help { color: #4A5E76; font-size: 14px; font-weight: 400; } .findPwdPage .form_container .form_body .text_result { display:none; margin-top:5px; } .findPwdPage .form_container .form_body .text_result .text_error { color: #F00; font-family: "Noto Sans KR"; font-size: 12px; font-weight: bold; line-height: 1; } .findPwdPage .form_container .form_footer { margin-top:35px; } .findPwdPage .form_container .form_footer .form_request { margin-top:37px; text-align:center; } .findPwdPage .form_container .form_footer .form_request .text_notice { color: #4A5E76; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; } .findPwdPage .form_container .form_footer .form_request .link_page { color: #607AFF; font-size: 16px; font-weight: 500; text-decoration:underline; } /* 개별 페이지, 기본 서비스,pc */ .composPage .section_core { position: relative; } .composPage .section_core:after { content: ' '; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 476px; background: #5364fa; } .composPage .section_core .section_inner { z-index: 1; max-width: 1276px; margin: 0 auto; } .composPage .section_core .service_core.pc_view .section_summary { opacity: 0.5; display: block; padding: 78px 0 40px 0; font-size: 20px; font-weight: 400; color: #f9f9f9; line-height: 1; } .composPage .section_core .service_core.pc_view .section_title { display: block; margin-bottom: 27px; font-size: 54px; font-weight: 600; font-family: 'Noto Sans KR'; color: #fff; line-height: 1; letter-spacing: -3px; } .composPage .section_core .service_core.pc_view .section_description { margin-bottom: 60px; font-size: 20px; font-weight: 400; color: #fff; line-height: 1.6; } .composPage .section_core .service_core.pc_view .section_message { margin-bottom: 100px; } .composPage .section_core .service_core.pc_view .module_tab .tab_menu, .composPage .section_core .service_core.pc_view .module_tab .tab_button { display: flex; align-items: center; } .composPage .section_core .service_core.pc_view .module_tab .tab_menu { justify-content: space-between; } .composPage .section_core .service_core.pc_view .module_tab .tab_menu .tab_item { background: #5364fa; } .composPage .section_core .service_core.pc_view .module_tab .tab_menu .tab_item .tab_button { color: #fff; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 700; } .composPage .section_core .service_core.pc_view .module_tab li button { background-size: 50px 50px; } .composPage .section_core .service_core.pc_view .module_tab li:first-child button { background: url('../../images/web/front/service_type01.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/service_type02.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/service_type03.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/service_type04.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/service_type05.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/service_type06.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/service_type07.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/service_type08.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/service_type10.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/service_type09.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item .tab_button { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100px; height: 100px; color: #777; font-size: 24px; font-weight: 600; } .composPage .section_core .service_core.pc_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 60px; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 10px; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button { color: #5364fa; border-radius: 10px; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 700; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/service_type_checked01.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/service_type_checked02.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/service_type_checked03.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/service_type_checked04.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/service_type_checked05.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/service_type_checked06.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/service_type_checked07.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/service_type_checked08.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/service_type_checked10.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/service_type_checked09.png') center 16px no-repeat; } .composPage .section_core .service_core.pc_view .module_tab .tab_content { margin-top: 144px; } .composPage .section_core .service_core.pc_view .module_tab .tab_content li { display: none; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .image_side .image_wrap { width: 520px; height: 370px; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_title { margin-bottom: 20px; color: #222; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 34px; font-weight: 700; line-height:1;} .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_description { margin-bottom: 61px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); line-height: 1.4; text-align: center; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .image_side { align-items: flex-start; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents { background: #F5F5F5; border-radius: 20px; padding:50px; box-sizing:border-box; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .offer_list, .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .image_side .offer_list { width:608px; margin-top:5px; text-align:left; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item, .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item { display:block ; position:relative; display:block; padding-left:15px; color: #222; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing:0px; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item:not(:last-child), .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:not(:last-child) { margin-bottom:10px; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item:before, .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:before { position:absolute; top:13px; left:0; content:" "; display:block; background:#222; width:4px; height:5px; border-radius:100%; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .offer_list.additional { width:100%; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available { text-align:left; margin-top:40px; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .area_title { margin-bottom: 25px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .service_item { display:flex; align-items:center; padding:19px 0; box-sizing:border-box; border-top:1px solid #D9D9D9; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .service_item:last-child { border-bottom:1px solid #D9D9D9 ; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_title { display:inline-block; width:180px; margin-right:20px; color: #555; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_title .tag_title { display:flex; align-items:center; justify-content:center; width:76px; margin-top:8px; padding:6px 10px; box-sizing:border-box; background:#00997D; border-radius:20px; color:#fff; font-family: "Noto Sans KR"; font-size: 12px; font-style: normal; font-weight: 700; line-height:1; } .composPage .section_core .service_core.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_message { color: #555; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; line-height: 1.8; } /* 개별 페이지, 확장서비스,pc */ .totalPage .sectionWrap .section { padding: 90px 0; text-align: center; } .totalPage .section_expand { position: relative; } .totalPage .section_expand:after { content: ' '; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 476px; background: #059BBC; } .totalPage .section_expand .section_inner { z-index: 1; max-width: 1276px; margin: 0 auto; } .totalPage .section_expand .service_expand.pc_view .section_summary { opacity: 0.5; display: block; padding: 78px 0 40px 0; font-size: 20px; font-weight: 400; color: #f9f9f9; line-height: 1; } .totalPage .section_expand .service_expand.pc_view .section_title { display: block; margin-bottom: 27px; font-size: 54px; font-weight: 600; font-family: 'Noto Sans KR'; color: #fff; line-height: 1; letter-spacing: -3px; } .totalPage .section_expand .service_expand.pc_view .section_description { margin-bottom: 60px; font-size: 20px; font-weight: 400; color: #fff; line-height: 1.6; } .totalPage .section_expand .service_expand.pc_view .section_message { margin-bottom: 100px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_menu, .totalPage .section_expand .service_expand.pc_view .module_tab .tab_button { display: flex; align-items: center; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_menu { justify-content: space-between; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_menu .tab_item { background: #059BBC; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_menu .tab_item .tab_button { color: #fff; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 700; } .totalPage .section_expand .service_expand.pc_view .module_tab li button { background-size: 50px 50px; } .totalPage .section_expand .service_expand.pc_view .module_tab li:first-child button { background: url('../../images/web/front/expand_type_13.png') 31px 21px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/expand_type_01.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/expand_type_02.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/expand_type_03.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/expand_type_04.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/expand_type_05.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/expand_type_06.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/expand_type_07.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/expand_type_08.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/expand_type_09.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(11) button { background: url('../../images/web/front/expand_type_10.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(12) button { background: url('../../images/web/front/expand_type_11.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab li:nth-child(13) button { background: url('../../images/web/front/expand_type_12.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item .tab_button { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100px; height: 100px; color: #777; font-size: 24px; font-weight: 600; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 60px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 10px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button { color: #333; border-radius: 10px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 700; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/expand_type_13.png') 31px 21px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/expand_type_01.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/expand_type_02.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/expand_type_03.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/expand_type_04.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/expand_type_05.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/expand_type_06.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/expand_type_07.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/expand_type_08.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/expand_type_09.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button11 { background: url('../../images/web/front/expand_type_10.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button12 { background: url('../../images/web/front/expand_type_11.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_item.tab_active .tab_button.tab_button13 { background: url('../../images/web/front/expand_type_12.png') center 16px no-repeat; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content { margin-top: 144px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content li { display: none; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .image_side .image_wrap { width: 520px; height: 370px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_title { margin-bottom: 24px; color: #222; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 34px; font-weight: 700; line-height:1;} .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_description { margin-bottom: 61px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); line-height: 1.4; text-align: center; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side { align-items: flex-start; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents { background: #F5F5F5; border-radius: 20px; padding:50px; box-sizing:border-box; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list p.bold { font-size: 24px; color: #555; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list p.mg_l10 { margin-bottom: 30px; font-size: 18px; color: #555; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list, .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .offer_list { width:608px; margin-top:5px; text-align:left; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item, .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item { display:block ; position:relative; display:block; padding-left:15px; color: #222; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; line-height: 1.6; letter-spacing:0px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item:not(:last-child), .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:not(:last-child) { margin-bottom:10px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list .offer_item:before, .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:before { position:absolute; top:13px; left:0; content:" "; display:block; background:#222; width:4px; height:5px; border-radius:100%; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .offer_list.additional { width:100%; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available { text-align:left; margin-top:40px; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .area_title { margin-bottom: 25px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .service_item { display:flex; align-items:center; padding:19px 0; box-sizing:border-box; border-top:1px solid #D9D9D9; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .service_item:last-child { border-bottom:1px solid #D9D9D9 ; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_title { display:inline-block; width:180px; margin-right:20px; color: #555; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_title .tag_title { display:flex; align-items:center; justify-content:center; width:76px; margin-top:8px; padding:6px 10px; box-sizing:border-box; background:#00997D; border-radius:20px; color:#fff; font-family: "Noto Sans KR"; font-size: 12px; font-style: normal; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.pc_view .module_tab .tab_content .area_contents .service_available .service_item .service_message { color: #555; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 400; line-height: 1.8; } /* 개별 페이지, 이용요금,pc */ .pricePage .sectionWrap { max-width: 870px; margin: 0px auto; padding: 50px 0 100px; } .pricePage .section { margin-top: 80px; } .pricePage .section:first-child { margin-top: 0px; } .pricePage .section .section_title { font-size: 29px; color: #0c81cc; display: flex; align-items: center; margin-bottom: 20px; } .pricePage .section .section_title img { cursor: pointer; margin-left: 10px; display: none; } .pricePage .section1 { font-size: 14px; } .pricePage .section1 table { table-layout: fixed; width: 100%; text-align: center; color: #444; font-size: 14px; } .pricePage .section1 table thead td { border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; } .pricePage .section1 table tr { height: 36px; } .pricePage .section1 table td { padding: 0 40px; border: 1px solid #ececec; } .pricePage .section1 table td:first-child { border-left: none; } .pricePage .section1 table td:last-child { border-right: none; } .pricePage .section1 table tbody td:nth-child(1) { text-align: left; } .pricePage .section1 table .tr_bar { height: 12px; background: #f6f6f6; } .pricePage .section1 table .txt { color: #000cff; } .pricePage .section2 { margin-top: 50px; } .pricePage .section2 .item { margin-bottom: 40px; color: #5c5c5c; } .pricePage .section2 .item:last-child { margin-bottom: 0px; } .pricePage .section2 .item .itemTop { display: flex; justify-content: space-between; border-bottom: 1px solid #d0ddf5; padding: 5px 0; font-size: 14px; } .pricePage .section2 .item .item_title img { position: relative; margin-right: 3px; top: -1px; } .pricePage .section2 .item .item_title { font-size: 16px; } .pricePage .section2 .item .item_txt { padding: 10px; padding-left: 120px; line-height: 22px; font-size: 14px; letter-spacing: 0px; } .pricePage .section2 .item .badge { display: flex; align-items: center; justify-content: center; color: #fff; width: 90px; height: 20px; border-radius: 3px; } .pricePage .section2 .item .badge.free { background: #8f8a72; } .pricePage .section2 .item .badge.beta { background: #6d6071; } .pricePage .section3 table td { border-bottom: 1px solid #ececec; height: 36px; padding: 0 24px; font-size: 14px; } .pricePage .section3 table td:nth-child(1) { border-right: 1px solid #bbb; } .pricePage .section3 table td:nth-child(2) { text-align: right; } .pricePage .section3 table thead td { border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; text-align: center!important; } .pricePage .section4 .txt { padding-left: 20px; } /* 2023. 05. 09 추가 */ .pricePage .section_more { display: flex; flex-direction: column; align-items: center; margin-top: 40px; font-weight: bold; color: #6A6A6A; text-align: center; } .pricePage .section_more .btn_more { display: flex; align-items: center; justify-content: center; background: #0F66FF; height: 44px; margin-top: 20px; padding: 0 42px; border-radius: 8px; color: #fff; cursor: pointer; } .pricePage .popupWrap { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; background: rgba(0,0,0,0.6); z-index: 10000001; } .pricePage .popup_more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: #FFFFFF; width: 586px; gap: 30px; padding: 30px 30px 36px; border-radius: 10px; font-size: 14px; color: #6A6A6A; } .pricePage .popup_more .title { font-size: 22px; font-weight: bold; color: #0C81CC; } .pricePage .popup_more .container_img { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .pricePage .popup_more .container_img .section_img { display: flex; justify-content: center; gap: 50px; } .pricePage .popup_more .container_img .section_img .img { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .pricePage .popup_more .container_img .section_img img { border: 2px solid #C0D3DD; border-radius: 10px; box-shadow: 2px 2px 8px rgba(141, 141, 141, 0.25); } .pricePage .popup_more .container_table { display: flex; width: 100%; color: #444444 } .pricePage .popup_more .container_table table { width: 100%; border-top: 1px solid #ECECEC; } .pricePage .popup_more .container_table td { height: 34px; padding: 0 25px; border-bottom: 1px solid #ECECEC; font-size: 14px; } .pricePage .popup_more .container_table td:nth-child(1) { border-right: 1px solid #ECECEC; text-align: center; } .pricePage .popup_more .btn_m_close p { display: flex; justify-content: center; align-items:center; background: #6C7E9E; width: 190px; height: 30px; border-radius: 8px; font-weight: bold; color: #fff; cursor: pointer; } .pricePage .popup_more .close_top { position: absolute; top: 20px; right: 20px; cursor: pointer; } /* 231107 ver02 */ .pricePage .subVisual.version02 { background-image: url(../../images/web/front/subVisual7_ver2.png); height: 240px; letter-spacing: normal; } .pricePage .subVisual.version02 .vis_cell .txt1 { margin-bottom: 16px; font-size: 36px; font-weight: bold; line-height: 1; } .pricePage .section_frame { position: relative; letter-spacing: normal; } .pricePage .section_frame .inner_nav { position: sticky; left: 0; top: 81px; z-index:1; background: #FFF; height: 72px; width: 100%; border-bottom: 1px solid #DDD; } .pricePage .section_frame .inner_nav > .fl-jb { max-width: 700px; height: 100%; margin: 0 auto; gap: 110px; font-size: 20px; font-weight: bold; color: #A1A1A1; } .pricePage .section_frame .inner_nav p { position: relative; display: flex; justify-content: center; align-items: center; width: calc((100% - 220px) / 3); cursor: pointer; } .pricePage .section_frame .inner_nav p.on { color: #0066FF; } .pricePage .section_frame .inner_nav p.on:after { position: absolute; content: ""; left: 0; right: 0; bottom: 0px; border-bottom: 3px solid #0066FF; } .pricePage .section_frame .inner_frame { display: flex; flex-direction: column; align-items: center; padding: 80px 0; transition: all 0.5s ease-in-out; } .pricePage .section_frame .inner_frame img { display: block; } .pricePage .section_frame .inner_frame .inner_title { text-align: center; color: #333333; transition: all 0.5s ease-in-out; } .pricePage .section_frame .inner_frame .inner_title .subtitle { font-size: 16px; color: #C2C2C2; } .pricePage .section_frame .inner_frame .inner_title .maintitle { margin-top: 40px; font-size: 36px; font-weight: bold; } .pricePage .section_frame .inner_frame .inner_title .title_desc { margin-top: 14px; font-size: 16px; } .pricePage .section_frame .inner_frame .hashtag { display: flex; justify-content: center; align-items: center; gap: 10px; } .pricePage .section_frame .inner_frame .hashtag p { display: flex; justify-content: center; align-items: center; padding: 10px 20px; box-sizing:border-box; border: 1px solid #7287A6; border-radius: 20px; font-size: 12px; color: #7287A6; line-height: 1; } .pricePage .section_frame .section01 { background: #FFF; } .pricePage .section_frame .section01 .section_total { margin: 30px 0 40px; } .pricePage .section_frame .section01 .section_total .total { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(92deg, #48A7FF 5.49%, #7479FF 100%) border-box;; background-size: contain; width: 100%; height: 60px; padding: 0 40px; margin-bottom: 14px; border: 2px solid transparent; border-radius: 4px; font-size: 18px; color: #747BFF; } .pricePage .section_frame .section01 .section_total .total span { font-size: 24px; font-weight: bold; } .pricePage .section_frame .section01 .section_total .flex { align-items: baseline; gap: 2px; } .pricePage .section_frame .section01 .section_list { width: 100%; max-width: 880px; } .pricePage .section_frame .section01 .section_list ul { display: flex; flex-direction: column; width: 100%; } .pricePage .section_frame .section01 .section_list ul li { display: flex; align-items: center; padding: 20px 0 24px; border-bottom: 1px solid #E8E8E8; } .pricePage .section_frame .section01 .section_list ul li > p { width: 58%; font-size: 15px; color: #5C5C5C; } .pricePage .section_frame .section01 .section_list .section_left { display: flex; align-items: center; width: 42%; gap: 30px; } .pricePage .section_frame .section01 .section_list .section_left i:before { font-size: 34px; color: #434950; } .pricePage .section_frame .section01 .section_list .section_left p { font-size: 20px; font-weight: bold; color: #333; } .pricePage .section_frame .section02 { background: #F2F7F9; } .pricePage .section_frame .section02 .inner_title .hashtag p { margin: 30px auto 50px; } .pricePage .section_frame .section02 .section_card { width: 100%; max-width: 880px; } .pricePage .section_frame .section02 .section_card ul { display: flex; flex-direction: column; width: 100%; gap: 14px; } .pricePage .section_frame .section02 .section_card ul li { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 16px 20px; border-radius: 10px; } .pricePage .section_frame .section02 .section_card ul li > span.free { display: flex; justify-content: center; align-items: center; background: #5A88FF; height: 30px; padding: 2px 16px 0; border-radius: 42px; font-size: 18px; font-weight: bold; color: #fff; line-height: 1; } .pricePage .section_frame .section02 .section_card ul li > span.beta { display: flex; justify-content: center; align-items: center; background: #00AEA4; height: 30px; padding: 2px 16px 0; border-radius: 42px; font-size: 18px; font-weight: bold; color: #fff; line-height: 1; } .pricePage .section_frame .section02 .section_card ul li > p { font-size: 20px; font-weight: bold; color: #333; } .pricePage .section_frame .section02 .section_card ul li > p span { color: #5A88FF; } .pricePage .section_frame .section02 .section_card .section_left { display: flex; align-items: center; gap: 20px; font-size: 15px; color: #5C5C5C; } .pricePage .section_frame .section02 .section_card.feature_list .section_left span { display:block; margin-bottom:5px; font-size:20px; line-height:1; } .pricePage .section_frame .section02 .section_card.feature_list .section_left p { font-size:15px; } .pricePage .section_frame .section02 .section_card .section_left.image_side .image_text { display:flex; align-items:center; width:100%; } .pricePage .section_frame .section02 .section_card .section_left.image_side .image_text span { margin-bottom:0; } .pricePage .section_frame .section02 .section_card .section_left.image_side .image_description { margin-left: 18px;font-size: 15px; } .pricePage .section_frame .section02 .section_card .section_left span { font-size: 20px; font-weight: bold; color: #333; } .pricePage .section_frame .section03 { background: #46556C; padding: 60px 0; text-align: center; font-size: 28px; color: #fff; line-height: 150%; } .pricePage .section_frame .section03 .btn_more { display: flex; justify-content: center; align-items: center; background: linear-gradient(92deg, #49A8FF 5.49%, #747BFF 100%); height: 52px; margin-top: 40px; padding: 0 56px; border-radius: 8px; font-size: 20px; font-weight: bold; cursor: pointer; } .pricePage .section_frame .section04 { background: #FFF; padding: 66px 0 130px; } .pricePage .section_frame .section04 .section_qna { width: 100%; max-width: 880px; margin: 50px 0 60px; } .pricePage .section_frame .section04 .section_qna ul { display: flex; flex-direction: column; width: 100%; gap: 14px; } .pricePage .section_frame .section04 .section_qna ul li { display: flex; flex-direction: column; justify-content: center; background: #F9FAFF; gap: 13px; padding: 25px 40px 30px; border-radius: 10px; transition: all 0.3s; cursor: pointer; } .pricePage .section_frame .section04 .section_qna ul li.on { background: #FFFBF2; } .pricePage .section_frame .section04 .section_qna ul li:hover { background: #FFFBF2; } .pricePage .section_frame .section04 .section_qna ul li .title_row { display: flex; justify-content: space-between; align-items: center; } .pricePage .section_frame .section04 .section_qna ul li .title_row p { font-size: 24px; font-weight: bold; color: #333; line-height: 1; } .pricePage .section_frame .section04 .section_qna ul li .title_row i { transition: all 0.3s; } .pricePage .section_frame .section04 .section_qna ul li .title_row .icon_add02 { font-size: 40px; color: #5A88FF; } .pricePage .section_frame .section04 .section_qna ul li .title_row .icon_subtract02 { font-size: 40px; color: #B0B0B0; } .pricePage .section_frame .section04 .section_qna ul li .desc_row { display: none; gap: 10px; font-size: 20px; color: #333; line-height: 150%; } .pricePage .section_frame .section04 .section_qna ul li .desc_row .layout_flex { flex-wrap:nowrap; } .pricePage .section_frame .section04 .section_qna ul li .desc_row.on { display: flex; } .pricePage .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 { font-size: 20px; font-weight: bold; color: #15AAA1; line-height: 120%; } .pricePage .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 + p { padding-left:4px; } .pricePage .section_frame .section04 .section_experi { display: flex; flex-direction: column; justify-content: center; align-items: center; background: url(../../images/web/front/price_experibg.png) no-repeat; width: 1060px; height: 312px; font-size: 36px; color: #fff; } .pricePage .section_frame .section04 .section_experi p:first-child { margin-bottom: 6px; font-size: 28px; } .pricePage .section_frame .section04 .section_experi span { display: flex; justify-content: center; align-items: center; background: #2563EB; height: 60px; margin-top: 40px; padding: 0 56px; border: 2px solid #fff; border-radius: 100px; font-size: 20px; font-weight: bold; cursor: pointer; } /* 개별 페이지, 고객지원,pc */ .useGuidePage .sectionWrap .section { padding: 90px 0; text-align: center; } .section_head.useGuide { border-bottom:1px solid #DDD; } .useGuidePage .section_inner { max-width: 1276px; margin: 0 auto; } .useGuidePage .section_title { position:relative; margin:120px 0 30px 0; font-size: 54px; font-weight: 600; font-family: "Noto Sans KR"; color: #222; line-height: 1; letter-spacing: -3px;} .useGuidePage .section_description { margin-bottom: 50px; font-size: 20px; font-weight: 400; color: #222; line-height: 1.4; font-family: "Noto Sans KR"; } .useGuidePage .section_message { padding-bottom: 150px; } .useGuidePage .section_help .section_title { margin:120px 0 33px 0;} .useGuidePage .section_help .section_description { margin-bottom: 40px; } .useGuidePage .section_help .section_title:after { position:absolute; content:" "; display:block; width: 85px; height: 60px; top:0; left:300px; background:url("../../images/web/front/guide_help07.png") no-repeat; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list { width:1276px; margin:0 auto; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li { align-items:flex-start; width: 616px; height: auto; margin:10px ; padding:0 46px; border-radius: 20px; box-shadow: -10px -10px 20px 0px rgba(185, 187, 198, 0.25) inset; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li .image_side { width:100%; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li .image_side .image_text{ width:auto;} .useGuidePage .section_help .service_help.pc_view .section_message .help_list > li:nth-child(1) { background: #D9EEFA; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list > li:nth-child(2) { background: #E6F5F0; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list > li:nth-child(3) { background: #D9EEFA; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list > li:nth-child(4) { background: #F1EDF5; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li:nth-child(1) .image_text .image_title { margin: -15px 0 14px 0; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li:nth-child(1) .image_text .image_description { margin-bottom:0; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list li:nth-child(3) .image_text .image_description { width:auto;} .useGuidePage .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_title { margin:45px 0 8px 0; color: #555; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_description { width: 351px; color: #555; font-size: 20px; font-weight: 400; word-break: keep-all; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_link { position:relative; display:inline-block; margin:50px 0 40px 0 ;color: #555; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; line-height:1;} .useGuidePage .section_help .service_help.pc_view .section_message .help_list .image_side .image_text .image_link:after { position:absolute; content:" "; top:9px; right:-30px; display:block; width:27px; height:10px; background:url("../../images/web/front/guide_link01.png") no-repeat; } .useGuidePage .section_help .service_help.pc_view .section_message .help_list .image_side .image_wrap { width: 147px; height: 140px; } .useGuidePage .section_help .service_help.pc_view .section_message .help_hours li { display:block; width:auto; height:auto; margin:0; color: #555; font-size: 20px; font-weight: 400; border-radius:initial; background:initial; box-shadow:initial; margin:0; padding:0; line-height:1;} .useGuidePage .section_help .service_help.pc_view .section_message .help_hours li:not(:last-child) { margin-bottom:7px } .useGuidePage .section_help .service_help.pc_view .section_message .help_call { display:inline-block; margin-top:23px; color: #555; font-size: 50px; font-weight: 700; line-height:1; } .useGuidePage .section_guide { position:relative; } .useGuidePage .section_guide .section_title { margin:0 0 30px 0; padding-top:120px;} .useGuidePage .section_guide:after { position:absolute; content:" "; display:block; width:100%; height:354px; top:0; left:0; background: #5364FA;} .useGuidePage .section_guide .section_inner{ z-index:1; } .useGuidePage .section_guide .service_guide.pc_view .section_title, .useGuidePage .section_guide .service_guide.pc_view .section_description { color:#fff; } .useGuidePage .section_guide .service_guide.pc_view .section_message { padding-bottom:0; } .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list li { width: 618px; height:auto; margin:10px 10px 0 10px; border-radius: 30px; background: #FFF; box-shadow: 0px -10px 30px 5px rgba(147, 166, 193, 0.25) inset; } .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side { align-items:flex-start; justify-content:space-around; width:100%; } .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text { width:auto;} .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_title { margin:60px 0 16px 0; color: #555; font-family: "Noto Sans KR"; font-size: 34px; font-style: normal; font-weight: 700;} .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_description { margin-bottom:107px; color: #555; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400;} .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_link { position:relative; display:inline-block; width:141px; padding: 8px 20px; color:#fff; border-radius: 43px; background: #5364FA; color: #FFF; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 400; line-height:1;} .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_text .image_link:after { position: absolute; content: " "; top:15px; right: 10px; display: block; width: 27px; height: 10px; background: url("../../images/web/front/guide_link02.png") no-repeat; } .useGuidePage .section_guide .service_guide.pc_view .section_message .guide_list .image_side .image_wrap { width: 158px; height: 184px; margin:117px 0 60px 0; } .useGuidePage .section_question .section_title { position:relative; margin:201px 0 19px 0;} .useGuidePage .section_question .section_title:after { position:absolute; content:" "; display:block; width: 94px; height: 91px; top:-40px; right:256px; background:url("../../images/web/front/guide_help08.png") no-repeat; } .useGuidePage .section_question .section_description { margin-bottom: 60px; font-weight: 500; color: #000; font-family: "Noto Sans KR";} .useGuidePage .section_question .section_message .button_wrap .button_list li { width:412px; } .useGuidePage .section_question .section_message .button_wrap .button_list li .button_contact { display:block; width:100%; height:100%; padding:40px 0; color: #555; font-family: "Noto Sans KR"; font-size: 28px; font-weight: 500; border-radius: 30px; background: #EFEFEF; line-height:1; } .useGuidePage .section_question .section_message .button_wrap .button_list li:not(:last-child){ margin-right:20px;} /* footer,pc */ .footer { height: 243px; background: #F5F5F5; padding-top:40px; box-sizing: border-box; } .footer .mobile_view { display:none;} .footer .footer_inner { position: relative; display: flex; align-items: center; width: 1276px; margin: 0 auto; } .footer .company_info .company_main { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; } .footer .company_info .company_main .image_wrap{ display:block; width:158px; } .footer .company_info .company_main .image_wrap img{ display:block; width:100%; } .footer .company_info .company_main .company_paper { display:flex; padding-right:52px; } .footer .company_info .company_main .company_paper li .link_text{ color: #333; font-family: "Noto Sans KR"; font-size: 15px; font-weight: 500; line-height: 1; } .footer .company_info .company_main .company_paper .line_link { position:relative; margin:0 32px; } .footer .company_info .company_main .company_paper .line_link:before, .footer .company_info .company_main .company_paper .line_link:after { content:" "; position:absolute; top:4px; display:block; width:1px; height:12px; background: #333; } .footer .company_info .company_main .company_paper .line_link:before { left:-16px; } .footer .company_info .company_main .company_paper .line_link:after { right:-16px; } .footer .company_info .company_main .company_paper .line_link .link_text.text_bold { font-weight: 700; } .footer .company_info .section_link { display:flex; align-items:center; } .footer .company_info .section_link:not(:nth-of-type(3)) { margin-bottom:12px; } .footer .company_info .section_link li{ color: #444; font-family: "Noto Sans KR"; font-size:13px; font-weight: 400; line-height:1; letter-spacing: 0px; } .footer .company_info .section_link li:not(:last-child) { margin-right:32px; } .footer .company_info .section_link .line { position:relative; } .footer .company_info .section_link .line:before, .footer .company_info .section_link .line:after { position:absolute; content:" "; top:3px; display:block; width:1px; height:10px; background: #444; } .footer .company_info .section_link .line:before { left:-16px; } .footer .company_info .section_link .line:after { right:-16px; } .footer .company_info .section_link:nth-of-type(2) .line:after, .footer .company_info .section_link:nth-of-type(3) .line:after { content:none; } .footer .copyright { margin: 24px 0 0 0; color: #444; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 400; line-height:1; } .footer .section_certificate { position: absolute; top: 0; right: 40px; } .footer .section_certificate .image_wrap{ width: 132px; } @media screen and (max-width: 1000px) { #header-front .header_inner .nav > ul > li > a { margin: 0 14px; } } @media (max-width:768px) { body { position:relative; min-width:100%; } #contents { padding-top:0; width:100%; } .mainPage .section_inner { max-width:375px; margin:0 auto; } .pc_view { display:none; } .mobile_view { display:block; } /* 모바일 모달 */ .modal_wrapper { visibility: hidden; z-index: 10000001; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); transition: all 0.5s ease-in-out; } .modal_wrapper.active { visibility: visible; } .modal_wrapper .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; border-radius: 10px; } .modal_wrapper .modal .modal_contents { position:relative; } .modal_wrapper .modal .modal_button { border:1px solid; position:absolute; top:0; right:0; display:block; width:10px; height:10px; } /* header, mobile */ .header { position:relative; z-index:8; background: #E7EBF6; box-shadow:none; } #header-front { position:relative; } #header-front .header_pc { display:none;} #header-front .header_contents .header_pc { display:none;} #header-front .header_inner { max-width:100%; justify-content:space-between; -webkit-box-pack:justify; -ms-flex-pack:justify; width:100%; height:48px; padding:16px; box-sizing:border-box; -webkit-box-sizing:border-box; } #header-front .header_inner .page_logo { display:none; } #header-front .logo_box .logo{ display:block; width:105px; height:24px;} #header-front .header_inner .logo_box img{ display:block; width:100%;} #header-front .header_inner .header_contents { width:auto; margin-left:0; } #header-front .page_navigation { display:flex; align-items:center; } #header-front .page_navigation .page_title { display:inline-block; vertical-align:top; margin:2px 0 0 16px; color: #000; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } #header-front .header_mobile { display: block;} #header-front .header_mobile .button_navigation { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; } #header-front .header_mobile .button_navigation .image_wrap { width:24px; height:24px; } #header-front .header_mobile .button_navigation .image_wrap img { display:block; width:100%; } .mainPage { overflow:hidden;} .mainPage .section_benefit .service_benefit.mobile_view .section_summary{ display:block; padding: 64px 0 25px 0; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing:0; } .mainPage .section_core .service_core.mobile_view .section_title, .mainPage .section_choice .service_choice.mobile_view .section_title, .mainPage .section_benefit .service_benefit.mobile_view .section_title, .mainPage .section_custom .service_custom.mobile_view .section_title{ margin-bottom:15px; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; letter-spacing: 0; } .mainPage .section_choice .service_choice.mobile_view .section_description { margin-bottom:24px; color: #222; font-family: "Noto Sans KR"; font-size: 15px; font-weight: 400; } .mainPage .section_core .service_core.mobile_view .section_message, .mainPage .section_choice .service_choice.mobile_view .section_message, .mainPage .section_benefit .service_benefit.mobile_view .section_message, .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message, .mainPage .section_custom .service_custom.mobile_view .section_message, .mainPage .section_apps .service_apps.mobile_view .section_message { padding-bottom:64px; } .mainPage > .front_bg1 > p { text-align: center; font-size: 18px; word-break: keep-all; } /* 홈, mainPage, mobile */ .mainPage .section_choice.background_before:before{ background:initial; } .mainPage .section_choice .section_inner.slide_view { max-width:100%; } .mainPage .section_visual .section_visualMain.mobile_view .visual_title { padding-top:76px; color: #222; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 300; line-height:1.4; } .mainPage .section_visual .section_visualMain.mobile_view .visual_description { margin-top:5px; color: #222; font-family: "Noto Sans KR"; font-size: 32px; font-weight: 400; line-height:1; } .mainPage .section_visual .section_visualMain.mobile_view .visual_description .text_bold { color: #222; font-family: "Noto Sans KR"; font-size: 32px; font-weight: 700; line-height:1; } .mainPage .section_visual .section_visualMain.mobile_view .main_image .main_visual { width:100%; padding-top:10px; } .mainPage .section_visual .section_visualMain.mobile_view .main_image .main_visual img { display:block; width:100%; image-rendering: -moz-crisp-edges; } .mainPage .section_visual .section_visualMain.mobile_view .main_description { padding-bottom:80px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.5; } .mainPage .section_visual .section_visualMain.mobile_view .main_description .text_bold { color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 700; } /* 홈, 한눈에 보는 캐시맵 서비스, mobile */ .mainPage .section_core .service_core.mobile_view { padding:0 16px; box-sizing:border-box; } .mainPage .section_core .service_core.mobile_view .section_summary { display:block; padding: 67px 0 25px 0; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing:0; } .mainPage .section_core .service_core.mobile_view .section_description { width:267px; margin:0 auto 35px auto ; color: #222; font-family: "Noto Sans KR"; font-size:16px; font-weight: 400; letter-spacing:-1px; line-height:1.3; } .mainPage .section_core .service_core.mobile_view .section_message { display:block; border-radius: 20px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_left, .mainPage .section_core .service_core.mobile_view .section_message .layout_right { background: #F2F7F9; padding:0 15px; box-sizing:border-box; border-radius: 20px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_left .area_title, .mainPage .section_core .service_core.mobile_view .section_message .layout_right .area_title { display:block; padding:24px 0 8px 0; color: #222; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; line-height:1; } .mainPage .section_core .service_core.mobile_view .section_message .layout_grid li { width:60px; height:60px; margin:9px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_right .layout_grid li { background: #E0ECEE; } .mainPage .section_core .service_core.mobile_view .section_message .layout_grid .image_wrap { width:25px; height:25px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_right .layout_grid .image_wrap { width:36px; height:36px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_grid .image_wrap img { display:block; width:100%; } .mainPage .section_core .service_core.mobile_view .section_message .area_description { margin-bottom:9px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; } .mainPage .section_core .service_core.mobile_view .section_message .area_information .unit_title { display:block; margin-top:3px; color: #333; font-family: "Noto Sans KR"; font-size: 11px; font-weight: 700; line-height:1; } .mainPage .section_core .service_core.mobile_view .section_message .layout_left { margin-bottom:16px; } .mainPage .section_core .service_core.mobile_view .section_message .text_more { position: relative; display: block; width:100%; padding: 10px; box-sizing: border-box; color: #999; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 700; text-align: center; } .mainPage .section_core .service_core.mobile_view .section_message .text_more:after{ position: absolute; top: 50%; right: 30%; display: block; content: " "; background: url(../../images/web/front/main_link.png) no-repeat; width: 24px; height: 8px; transform: translateY(-50%); } /* 홈, 캐시맵를 선택해야하는 이유, mobile */ .mainPage .section_choice { background:initial; } .mainPage .section_choice .service_choice.mobile_view { position:relative; background: #F0F4FF; } .mainPage .section_choice .service_choice.mobile_view .section_summary, .mainPage .section_choice .service_choice.mobile_view .section_title { position:relative; z-index:1; letter-spacing:0; } .mainPage .section_choice .service_choice.mobile_view .section_summary { padding: 70px 0 25px 0; font-family: "Noto Sans KR"; font-size: 12px; } .mainPage .section_choice .service_choice.mobile_view .section_title { margin-bottom:36px; color: #3E3E3E; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 400; line-height:1; } .mainPage .section_choice .service_choice.mobile_view .section_title .text_bold { color: #3E3E3E; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } /* .mainPage .section_choice .service_choice.mobile_view:after { position:absolute; content:" "; top:0; right:0; display:block; background: #5364FA; width:100%; height:236px; } */ /* .mainPage .section_choice .service_choice.mobile_view .section_message { background: #FFF; } */ .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider { position:relative; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width: 360px; margin: 0 auto; overflow-x:auto; -ms-scroll-snap-type: inline mandatory; scroll-snap-type: inline mandatory; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider::-webkit-scrollbar{ background: #EFEFEF; height:4px; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider::-webkit-scrollbar-thumb { background: #5364FA; border-radius: 5px; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider::-webkit-scrollbar-track { padding-left:16px; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li{ position: relative; z-index: 1; background: #FFF;/* width: 310px; height: 416px; */ padding:16px; -webkit-box-sizing:border-box; box-sizing:border-box; margin:0 16px 16px 0; /* -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);*/ border-radius: 20px; scroll-snap-align: center; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li:afetr{ position:absolute; content:" "; top:0; right:0; display:block; background: #5364FA; width:100%; height:67px; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li:first-child { margin-left:16px;} .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li:last-child { margin-right:16px;} .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li .image_wrap { width: 305px; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li .image_wrap img{ display:block; width:100%; height: 470px } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li .image_text .image_title { display:block; margin:37px 0 15px 0; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1.3; } .mainPage .section_choice .service_choice.mobile_view .module_slider .card_slider li .image_text .image_description { color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.5; } /* 홈, 번거로운 업무를 손쉽게 효과적으로, mobile */ .mainPage .section_benefit .service_benefit.mobile_view .section_summary { padding: 71px 0 25px 0; } .mainPage .section_benefit .service_benefit.mobile_view .section_title { line-height:1.3; } .mainPage .section_benefit .service_benefit.mobile_view .section_description { margin-bottom:38px; font-size:16px;} .mainPage .section_benefit .service_benefit.mobile_view .section_message { padding:0 16px 64px 16px; box-sizing:border-box;} .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list { display:block;} .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list li { display:block; background:#fff; width:auto; height:auto; margin:auto; padding:16px 10px; box-sizing:border-box; border-radius: 10px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);} .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list li:not(:last-child) { margin-bottom:8px; } .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list .image_side { align-items:flex-start;} .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list .image_side .image_text { width:247px; } .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list .image_side .image_wrap { width: 66px; height: 66px; } .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list .image_side .image_text .image_title { margin-bottom:3px; color: #4A4A4A; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:normal; } .mainPage .section_benefit .service_benefit.mobile_view .section_message .benefit_list .image_side .image_text .image_description { color: #4A4A4A; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; } /* 홈, 스마트워크시대, mobile */ .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_summary { display: block; padding: 71px 0 25px 0; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0;} .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_title { margin-bottom:20px; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; letter-spacing: 0; line-height:1.3; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_description { margin-bottom:28px; color: #222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list { padding:0 32px; box-sizing:border-box; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li { position:relative; display:block; background:initial; width:auto; height:174px; padding:18px 24px 24px 24px; box-sizing:border-box; margin:auto; border-radius: 20px; text-align:left; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:not(:last-child) { margin-bottom:9px;} .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(1) { background: #EBF5FF; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(2) { background: #EAF5E7; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(3) { background: #EBE8F9; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(4) { background: #FFF5EB; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(5) { background: #FFEFF7; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li .feature_number { position:relative; display:inline-block; margin-bottom:38px; font-family: "Noto Sans KR"; font-size: 30px; font-weight: 700; line-height:1; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li .feature_number:after { position:absolute; left:0; content:" "; display:block; width: 54px; height: 4px; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(1) .feature_number { color: #C8DBEE; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(2) .feature_number { color: #C6DDBF; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(3) .feature_number { color: #C8C3E0; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(4) .feature_number { color: #EED4BA; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(5) .feature_number { color: #F2C7DD; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(1) .feature_number:after { top:57px; background: #C8DBEE; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(2) .feature_number:after { top:57px; background: #C6DDBF; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(3) .feature_number:after { top:57px; background: #C8C3E0; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(4) .feature_number:after { top:57px; background: #EED4BA;} .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li:nth-of-type(5) .feature_number:after { top:57px; background: #F2C7DD; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li .feature_title { position:absolute; top:23px; left:74px; display:block; color: #4A4A4A; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; line-height:1; } .mainPage .section_smartWorks .service_smartWorks.mobile_view .section_message .feature_list li .feature_description { color: #4A4A4A; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; letter-spacing: -1px; } /* 홈, 필요한 기능만 골라쓰는 맞춤형 업무환경, mobile */ .mainPage .section_custom .service_custom.mobile_view .section_summary { display: block; padding: 76px 0 14px 0; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 0; } .mainPage .section_custom .service_custom.mobile_view .section_title { line-height:1.2; } .mainPage .section_custom .service_custom.mobile_view .section_description { margin-bottom:49px; color: #222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; } .mainPage .section_custom .service_custom.mobile_view .layout_flex { display:block; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right { padding:0 24px; box-sizing:border-box; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li { display:block; background:#fff; width:auto; height:auto; margin:0; border-radius: 27px; border: 0.9px solid #333; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li:not(:last-child) { margin-bottom:16px; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_link { display:block; width:100%; padding:0 32px; box-sizing:border-box; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_title { padding:32px 0 14px 0; box-sizing:border-box; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1;} .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_description { color: #222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_button { background: #5364FA; width: 132px; height: 30px; margin:21px 0 51px 0; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height: 1; } .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_text { position:relative; display:inline-block; margin-bottom: 32px; font-size:14px;} .mainPage .section_custom .service_custom.mobile_view .layout_flex .layout_right .feature_list li .feature_text:after { position: absolute; left:78px; bottom:4px; content: " "; display: block; background: url(../../images/web/front/main_link.png) no-repeat; width: 24px; height: 8px; } /* 홈, 캐시맵 서비스의 파트너, mobile */ .mainPage .section_partners .service_partners.mobile_view { background: #5364FA; padding:0 16px; box-sizing:border-box; } .mainPage .section_partners .service_partners.mobile_view .section_summary { display:block; padding: 67px 0 25px 0; color: #FFF; font-family: "Noto Sans KR"; font-size: 12px; font-weight: 400; line-height: 1; opacity: 0.5; } .mainPage .section_partners .service_partners.mobile_view .section_title { margin-bottom:21px; color: #FFF; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 400; line-height:1.3; letter-spacing:0; } .mainPage .section_partners .service_partners.mobile_view .section_description { margin-bottom:38px; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; } .mainPage .section_partners .service_partners.mobile_view .section_title .text_bold { color: #FFF; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; } .mainPage .section_partners .service_partners.mobile_view .section_message { padding-bottom:97px; overflow:hidden; } .mainPage .section_partners .service_partners.mobile_view .module_slider { position:relative; background: #FFF; width: 344px; margin:0 auto; border-radius: 20px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .swiper_unit { position:relative; background: #fff; padding:0 24px; box-sizing:border-box; border-radius: 20px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .swiper_unit .partners_title { display:block; padding:24px 0 29px 0; box-sizing:border-box; color: #000; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_logo { position:absolute; top:26px; right:24px;} .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_logo.popcorn .image_wrap { width:128px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_logo .image_wrap { width: 90px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_logo .image_wrap img { display:block; width:100%; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_rate { margin-bottom:8px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_opinions { padding-bottom:48px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_opinions .partners_category, .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-slide .partners_opinions .partners_benefit { color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; letter-spacing:-1px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-prev:after, .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-next:after { content:none; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-prev .button_slide, .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-next .button_slide{ position:relative; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-prev .button_slide:after, .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-next .button_slide:after{ position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); content:" "; display:block; width:20px; height:20px; border-radius:50%; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-prev .button_slide:after { left: -24px; background: rgba(0, 0, 0, 0.2) url("../../images/web/front/slider_button_prev01.png") center center no-repeat; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-button-next .button_slide:after { left: 0; background: rgba(0, 0, 0, 0.2) url("../../images/web/front/slider_button_next01.png") center center no-repeat; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-pagination { bottom:-37px; } .mainPage .section_partners .service_partners.mobile_view .module_slider .swiper-pagination .swiper-pagination-bullet { background:#fff; width:10px; height:10px; } /* 홈, 캐시맵 모바일 APP, mobile */ .mainPage .section_apps .service_apps.mobile_view { padding:0 28px 72px 28px; box-sizing:border-box; } .mainPage .section_apps .service_apps.mobile_view .section_title { margin-bottom:7px; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; letter-spacing: 0; line-height:1.5; } .mainPage .section_apps .service_apps.mobile_view .section_description { margin-bottom:55px; color: #000; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 500; } .mainPage .service_apps.layout_flex .layout_left { padding-top:56px; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list { display:block;} .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li { width:100%; border: 1px solid #242424; border-radius: 6px; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li .button_text { position:relative; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li .button_text:after { position:absolute; top:0; ; content:" "; display:block; width:35px; height:35px; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li:nth-of-type(1) .button_text { padding-left:23px; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li:nth-of-type(2) .button_text { padding-left:21px; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li:nth-of-type(1) .button_text:after { left:-19px; background:url("../../images/web/front/logo_Apple.png") center center no-repeat; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li:nth-of-type(2) .button_text:after { left:-20px; background:url("../../images/web/front/logo_GooglePlay.png") center center no-repeat; } .mainPage .section_apps .service_apps.mobile_view .button_wrap .button_list li:not(:last-child) { margin-bottom:8px; } .mainPage .section_apps .service_apps.mobile_view .layout_left .button_wrap .link_store { display:block; width:100%;} .mainPage .section_apps .service_apps.mobile_view .layout_left .button_wrap .link_store .button_contact { display:block; width:100%; height:50px; border-radius: 6px;} .mainPage .section_apps .service_apps.mobile_view .layout_left .button_wrap .link_store .button_contact .button_text { color: #242424; font-family: Roboto; font-size: 28px; font-weight: 400; line-height: 1; } #header-front .header_inner .logo_box .page_head { display:block; } .section_head .logo_box h1 { display:none; } .section_head .page_head .page_navigation, .section_head .page_head .page_navigation .link_prev { display:flex; } .section_head .page_head .page_navigation { align-items:center; } .section_head .page_head .page_navigation .link_prev { width:24px; height:24px; margin-right:16px; } .section_head .page_head .page_navigation .link_prev img { display:block; width:100%; } .section_head .page_head .page_navigation .page_title { color: #000; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } /* 개별 페이지, 기본 서비스, mobile */ .composPage .section_core:after { height:325px; } .composPage .section_core .service_core.mobile_view .section_summary { display:block; padding:49px 0 29px 0; box-sizing:border-box; color: #FFF; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1; opacity: 0.5; } .composPage .section_core .service_core.mobile_view .section_title { display:block; margin-bottom:8px; color: #FFF; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .composPage .section_core .service_core.mobile_view .section_description { width:283px; margin:0 auto 52px auto; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1.4; } .composPage .section_core .service_core.mobile_view .section_message { padding:0 16px; margin-bottom: 71px; box-sizing:border-box; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu, .composPage .section_core .service_core.mobile_view .module_tab .tab_button { display: flex; align-items: center; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu { justify-content: space-between; overflow-x:auto; -ms-overflow-style: none; scrollbar-width: none; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu::-webkit-scrollbar{ display:none; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu .tab_item { background: #5364fa; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu .tab_item:not(:last-child) { margin-right:12px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_menu .tab_item .tab_button { color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; } .composPage .section_core .service_core.mobile_view .module_tab li button { background-size: 30px 30px; } .composPage .section_core .service_core.mobile_view .module_tab li:first-child button { background: url('../../images/web/front/service_type01.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/service_type02.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/service_type03.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/service_type04.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/service_type05.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/service_type06.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/service_type07.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/service_type08.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/service_type10.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/service_type09.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item .tab_button { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 60px; height: 63px; color: #777; font-size: 24px; font-weight: 600; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 40px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 6px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button { color: #5364fa; border-radius: 6px; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/service_type_checked01.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/service_type_checked02.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/service_type_checked03.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/service_type_checked04.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/service_type_checked05.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/service_type_checked06.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/service_type_checked07.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/service_type_checked08.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/service_type_checked10.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/service_type_checked09.png') center 8px / 30px 30px no-repeat; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content { margin-top: 84px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content li { display: none; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .image_side .image_wrap { width: 100%; height: auto; padding-bottom:32px; border-bottom:1px solid #000; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_title { margin-bottom: 17px; color: #222; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 700; line-height:1;} .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_description { margin-bottom: 21px; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 1.4; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .image_side { display:block; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .offer_list, .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list { width:100%; margin-top:5px; padding-bottom:22px; text-align:left; border-bottom:1px solid #000; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item, .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item { display:block ; position:relative; display:block; padding-left:15px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing:0px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item:not(:last-child), .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:not(:last-child) { margin-bottom:7px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item:before, .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:before { position:absolute; top:9px; left:5px; content:" "; display:block; background:#222; width:3px; height:4px; border-radius:100%; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .offer_list.additional { width:100%; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available { text-align:left; margin-top:22px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .area_title { margin-bottom: 16px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .service_item { display:block; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .service_item:not(:last-child){ margin-bottom:27px; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_title { display:flex; align-items:center; width:100%; margin:0 20px 8px 0; color: #555; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_title .tag_title { display:inline-flex; align-items:center; justify-content:center; background:#00997D; width:58px; height:18px; margin-left:10px; border-radius:20px; color:#fff; font-family: "Noto Sans KR"; font-size: 10px; font-style: normal; font-weight: 700; line-height:1; } .composPage .section_core .service_core.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_message { padding-left:10px; color: #555; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing:0; word-break: keep-all; } /* 개별 페이지, 확장 서비스, mobile */ .totalPage .section_expand:after { height:325px; } .totalPage .section_expand .service_expand.mobile_view .section_summary { display:block; padding:49px 0 29px 0; box-sizing:border-box; color: #FFF; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1; opacity: 0.5; } .totalPage .section_expand .service_expand.mobile_view .section_title { display:block; margin-bottom:12px; color: #FFF; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.mobile_view .section_description { width:283px; margin:0 auto 52px auto; color: #FFF; font-family: "Noto Sans KR"; font-size: 15px; font-weight: 300; line-height:1.4; } .totalPage .section_expand .service_expand.mobile_view .section_message { padding:0 16px; margin-bottom: 71px; box-sizing:border-box; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu, .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_button { display: flex; align-items: center; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu { justify-content: space-between; overflow-x:auto; -ms-overflow-style: none; scrollbar-width: none; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu::-webkit-scrollbar{ display:none; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item { background: #059BBC; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item:not(:last-child) { margin-right:8px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_menu .tab_item .tab_button { color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:first-child button { background: url('../../images/web/front/expand_type_01.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(2) button { background: url('../../images/web/front/expand_type_02.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(3) button { background: url('../../images/web/front/expand_type_03.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(4) button { background: url('../../images/web/front/expand_type_04.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(5) button { background: url('../../images/web/front/expand_type_05.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(6) button { background: url('../../images/web/front/expand_type_06.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(7) button { background: url('../../images/web/front/expand_type_07.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(8) button { background: url('../../images/web/front/expand_type_08.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(9) button { background: url('../../images/web/front/expand_type_09.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(10) button { background: url('../../images/web/front/expand_type_10.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(11) button { background: url('../../images/web/front/expand_type_11.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-child(12) button { background: url('../../images/web/front/expand_type_12.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item .tab_button { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 60px; height: 63px; color: #777; font-size: 24px; font-weight: 600; } .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-of-type(8) .tab_button, .totalPage .section_expand .service_expand.mobile_view .module_tab li:nth-of-type(9) .tab_button { width: 84px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item .tab_button .service_title { display: block; margin-top: 40px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active { background: #fff; border-radius: 6px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button { color: #333; border-radius: 6px; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button01 { background: url('../../images/web/front/expand_type_01.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button02 { background: url('../../images/web/front/expand_type_02.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button03 { background: url('../../images/web/front/expand_type_03.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button04 { background: url('../../images/web/front/expand_type_04.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button05 { background: url('../../images/web/front/expand_type_05.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button06 { background: url('../../images/web/front/expand_type_06.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button07 { background: url('../../images/web/front/expand_type_07.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button08 { background: url('../../images/web/front/expand_type_08.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button09 { background: url('../../images/web/front/expand_type_09.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button10 { background: url('../../images/web/front/expand_type_10.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button11 { background: url('../../images/web/front/expand_type_11.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_item.tab_active .tab_button.tab_button12 { background: url('../../images/web/front/expand_type_12.png') center 8px / 30px 30px no-repeat; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content { margin-top: 84px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content li { display: none; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .tab_main.tabContent_active { display: block; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .image_side .image_wrap { width: 100%; height: auto; padding-bottom:32px; border-bottom:1px solid #000; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .tab_item .image_description { line-height: 1.4; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_title { margin-bottom: 17px; color: #222; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 700; line-height:1;} .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_description { margin-bottom: 21px; text-shadow: 0px 0px 20px rgba(197, 202, 231, 0.25); font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 1.4; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side { display:block; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .offer_list, .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list { width:100%; margin-top:5px; padding-bottom:22px; text-align:left; border-bottom:1px solid #000; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item, .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item { display:block ; position:relative; display:block; padding-left:15px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing:0px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item:not(:last-child), .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:not(:last-child) { margin-bottom:7px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .offer_list .offer_item:before, .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .image_side .offer_list .offer_item:before { position:absolute; top:9px; left:5px; content:" "; display:block; background:#222; width:3px; height:4px; border-radius:100%; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .offer_list.additional { width:100%; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available { text-align:left; margin-top:22px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .area_title { margin-bottom: 16px; color: #222; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .service_item { display:block; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .service_item:not(:last-child){ margin-bottom:27px; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_title { display:flex; align-items:center; width:100%; margin:0 20px 8px 0; color: #555; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_title .tag_title { display:inline-flex; align-items:center; justify-content:center; background:#00997D; width:58px; height:18px; margin-left:10px; border-radius:20px; color:#fff; font-family: "Noto Sans KR"; font-size: 10px; font-style: normal; font-weight: 700; line-height:1; } .totalPage .section_expand .service_expand.mobile_view .module_tab .tab_content .area_contents .service_available .service_item .service_message { padding-left:10px; color: #555; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing:0; word-break: keep-all; } /* 개별 페이지, 이용요금, mobile */ .pricePage .subVisual { display:block; } .pricePage .subVisual.version02 { background: url('../../images/web/front/mainVisual_mobile01.png') center center no-repeat; background-size: cover; height:220px; } .pricePage .subVisual.version02 .vis_cell .txt1 { display:block; padding:60px 0 22px 0; margin-bottom:0; color: #FFF; font-family: "Noto Sans KR"; font-size: 30px; font-weight: 700; line-height:1; letter-spacing:-1px; } .pricePage .subVisual.version02 .vis_cell .txt2 { color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 300; line-height:1.4; } .pricePage .section_frame .inner_nav { top:0; height:auto; } .pricePage .section_frame .inner_nav > .fl-jb { max-width:100%; height:auto; gap:initial; margin:auto; color: #A1A1A1; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 700; line-height:1; } .pricePage .section_frame .inner_nav .fl-jb .fl-jb_text { position:relative; display:inline-block; width: 33.3333%; padding:17px 0; vertical-align:top; } .pricePage .section_frame .inner_nav .fl-jb_text.active { color: #0066FF; } .pricePage .section_frame .inner_nav .fl-jb_text.active:after { position: absolute; content: ""; left: 0; right: 0; bottom: 0px; border-bottom: 3px solid #0066FF; } .pricePage .section_frame .inner_frame { padding:0; } .pricePage .section_frame .inner_frame .inner_title .subtitle, .pricePage .section_frame .inner_frame .inner_title .maintitle { display:block; } .pricePage .section_frame .inner_frame .inner_title .subtitle { display:block; padding:60px 0 24px 0; color: #D3D3D3; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 300; line-height:1; } .pricePage .section_frame .inner_frame .inner_title .maintitle { margin:0 0 10px 0; color: #333; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .pricePage .section_frame .inner_frame .inner_title .title_desc { margin:0 0 32px 0; color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1.3; } .pricePage .section_frame .inner_frame .hashtag { flex-wrap:wrap; justify-content:flex-start; } .pricePage .section_frame .inner_frame .hashtag p { padding: 5px 8px; box-sizing:border-box; } .pricePage .section_frame .inner_frame .hashtag .tag_text { display: flex; justify-content: center; align-items: center; padding: 5px 8px; box-sizing: border-box; border: 1px solid #7287A6; border-radius: 20px; font-size: 14px; color: #7287A6; line-height: 1; } .pricePage .section_frame .inner_frame.section02 .hashtag { justify-content: center; margin-bottom:24px; } .pricePage .section_frame .section01 .section_total { margin:0; padding:0 16px; box-sizing:border-box; } .pricePage .section_frame .section01 .section_total .total { padding:0 16px; box-sizing:border-box; margin-bottom:8px; } .pricePage .section_frame .section01 .section_list { margin-top:32px; border-top:1px solid #E8E8E8; } .pricePage .section_frame .section01 .section_list ul li, .pricePage .section_frame .section01 .section_list .section_left, .pricePage .section_frame .section01 .section_list .section_title { display:flex; } .pricePage .section_frame .section01 .section_list ul li { justify-content:center; flex-direction:column; padding:0; } .pricePage .section_frame .section01 .section_list .section_left { width:100%; justify-content:space-between; align-items:center; padding:15px 24px; box-sizing:border-box; } .pricePage .section_frame .section01 .section_list .section_left .section_title { align-items:center; } .pricePage .section_frame .section01 .section_list .section_left .section_title .section_category { margin-left:16px; color: #333; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .pricePage .section_frame .section01 .section_list .section_left .button_slide.button_show { vertical-align:top; width:20px; height:20px; background: url('../../images/web/front/arrow_bottom01.png') center center / 24px 24px no-repeat; background-size:cover; } .pricePage .section_frame .section01 .section_list .section_left .button_slide.button_hide { vertical-align:top; width:20px; height:20px; background: url('../../images/web/front/arrow_top01.png') center center / 24px 24px no-repeat; background-size:cover; } .pricePage .section_frame .section01 .section_list .desc_row { display:none; background: #F3F3F3; width:100%; padding:19px 24px; box-sizing:border-box; } .pricePage .section_frame .section01 .section_list .desc_row .service_description { color: #5C5C5C; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.2; } .pricePage .section_frame .section02 { background:#fff; } .pricePage .section_frame .section02 .section_card { padding-bottom:64px; } .pricePage .section_frame .section02 .section_card ul { gap:initial; } .pricePage .section_frame .section02 .section_card ul li { flex-direction:column; padding:0; border-radius:initial; border-top:1px solid #E8E8E8; } .pricePage .section_frame .section02 .section_card ul li:last-child { border-bottom:1px solid #E8E8E8; } .pricePage .section_frame .section02 .section_card .section_left { width:100%; justify-content: space-between; gap:initial; padding: 15px 24px; box-sizing: border-box; } .pricePage .section_frame .section02 .section_card .section_left .section_title { display:flex; align-items:center; } .pricePage .section_frame .section02 .section_card .section_left .section_title .image_wrap { width:34px; margin-right:16px; } .pricePage .section_frame .section02 .section_card .section_left .section_title .image_wrap img { display:block; width:100%; } .pricePage .section_frame .section02 .section_card .section_left .button_slide.button_show { vertical-align:top; width:20px; height:20px; background: url('../../images/web/front/arrow_bottom01.png') center center / 24px 24px no-repeat; background-size:cover; } .pricePage .section_frame .section02 .section_card .section_left .button_slide.button_hide { vertical-align:top; width:20px; height:20px; background: url('../../images/web/front/arrow_top01.png') center center / 24px 24px no-repeat; background-size:cover; } .pricePage .section_frame .section02 .section_card .desc_row { display:none; background: #F3F3F3; width:100%; padding:19px 24px; box-sizing:border-box; } .pricePage .section_frame .section02 .section_card .desc_row .service_description { color: #5C5C5C; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.2; } .pricePage .feature_list li { margin:0; } .pricePage .section_frame .section02 .section_card .desc_row .service_price { display:block; margin-top:24px; color: #333; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .pricePage .section_frame .section02 .section_card .desc_row .service_price .text_color { color: #5A88FF; } .pricePage .section_frame .section02 .section_card.feature_list .section_left .section_category { margin-bottom:0; color: #333; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; } .pricePage .section_frame .section02 .section_card.feature_list .desc_row .service_beta { display:inline-block; vertical-align:top; background: #00AEA4; margin-top:22px; padding:8px 16px; box-sizing:border-box; color: #FFF; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 500; line-height:1; border-radius: 42px; } .pricePage .section_frame .section02 .section_card.feature_list .desc_row .service_beta.free { background: #5A88FF; } .pricePage .section_frame .section03 { height:225px; } .pricePage .section_frame .section03 .text_ad { padding:56px 0 20px 0;color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 300; line-height:1.6; } .pricePage .section_frame .section03 .button_more { background: linear-gradient(92deg, #49A8FF 5.49%, #747BFF 100%); width: 200px; height: 41px; text-align:center; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; border-radius: 8px; } .pricePage .section_frame .section04 .section_qna { margin:0; padding-bottom:64px;} .pricePage .section_frame .section04 .section_qna ul { gap:initial; } .pricePage .section_frame .section04 .section_qna ul li { background:#fff; padding:0; border-radius:initial; gap:initial; border-top:1px solid #E8E8E8; } .pricePage .section_frame .section04 .section_qna ul li:last-child { border-bottom:1px solid #E8E8E8; } .pricePage .section_frame .section04 .section_qna ul li .title_row p { color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1.3; } .pricePage .section_frame .section04 .section_qna ul li .title_row { padding:16px 24px; box-sizing:border-box; } .pricePage .section_frame .section04 .section_qna ul li .title_row .icon_add02, .pricePage .section_frame .section04 .section_qna ul li .title_row .icon_subtract02 { font-size:25px; } .pricePage .section_frame .section04 .section_qna ul li .desc_row { background: #F3F3F3; padding:8px 18px; box-sizing:border-box; } .pricePage .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 { font-size:25px; } .pricePage .section_frame .section04 .section_qna ul li .desc_row .icon_alpha01 + p { color: #333; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.5; word-break: break-all; } .pricePage .section_frame .section04 .section_qna ul li.on, .pricePage .section_frame .section04 .section_qna ul li:hover { background:#fff; } /* 개별 페이지, 고객지원, mobile */ .useGuidePage .section_help .service_help.mobile_view .section_title { margin:0; padding:115px 0 23px 0; box-sizing:border-box; color:#222; font-family: "Noto Sans KR"; font-size: 30px; font-weight: 700; line-height:1; letter-spacing: 0; } .useGuidePage .section_help .service_help.mobile_view .section_title:after { top:49px; left:50%; transform:translateX(-50%); } .useGuidePage .section_help .service_help.mobile_view .section_description { margin-bottom:50px; color: #000; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 500; line-height: 1.5; } .useGuidePage .section_help .service_help.mobile_view .section_message { padding-bottom: 64px } .useGuidePage .section_help .service_help.mobile_view .section_message .help_list { padding:0 16px; box-sizing:border-box; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li { display:block; background:initial; width:100%; height:162px; margin:0; padding-left:24px; border-radius: 20px; box-shadow: -10px -10px 20px 0px rgba(185, 187, 198, 0.25) inset; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:not(:last-child) { margin-bottom:8px; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:first-child { background: #EFEFEF; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:nth-child(2) { background: #E6F5F0; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:nth-child(3) { background: #D9EEFA; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:last-child { background: #F1EDF5; } .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:nth-child(3) .image_link, .useGuidePage .section_help .service_help.mobile_view .section_message .layout_grid li:last-child .image_link { margin-top:17px; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side { align-items:flex-start; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text { width:auto; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text .image_title { margin:21px 0 12px 0; color: #555; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height: 1; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text .image_description { width:218px; color: #555; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text .help_call { display:block; padding:28px 0 20px 0; color: #555; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text .image_link { position:relative; display:inline-block; vertical-align:top; margin-top:30px; color: #555; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; line-height:1; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_text .image_link:after { position: absolute; content: " "; top: 50%; right: -33px; display: block; width: 27px; height: 10px; background: url(../../images/web/front/guide_link03.png) no-repeat; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .useGuidePage .section_help .service_help.mobile_view .section_message .help_info.image_description .help_hours li { background:#EFEFEF; height:auto; padding:0; box-shadow:none; line-height: 1; } .useGuidePage .section_help .service_help.mobile_view .section_message .help_info.image_description .help_hours li:not(:last-child) { margin-bottom: 5px; } .useGuidePage .section_help .service_help.mobile_view .section_message .image_side .image_wrap { width: 68px; height: 64px; margin: 26px 24px 0 0px; } .useGuidePage .section_guide:after { height:482px; } .useGuidePage .section_guide .service_guide.mobile_view .section_title { margin-bottom:0; padding: 75px 0 14px 0;color: #FFF; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 500; letter-spacing:0; } .useGuidePage .section_guide .service_guide.mobile_view .section_description { margin-bottom:30px; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 300; line-height:1.5; } .useGuidePage .section_guide .service_guide.mobile_view .section_message { padding-bottom:0; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid, .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li, .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_side { display:block; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid { padding:0 21px; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li { background:#fff; width:auto; height:361px; margin:0; border-radius: 30px; box-shadow: 0px -10px 30px 5px rgba(147, 166, 193, 0.25) inset; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li:not(:last-child) { margin-bottom:8px; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_side { padding:0 25px; box-sizing:border-box; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_side .image_text { width:100%; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_side .image_text .image_title { padding:35px 0 12px 0; margin-bottom:0; color: #555; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 700; line-height:1; text-align:left; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_side .image_text .image_description { color: #555; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1; text-align:left; letter-spacing: 0px; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_wrap { width: 120px; height: 140px; margin:34px auto;} .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li:nth-child(2) .image_wrap { width:140px; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_link { position:relative; display:block; background: #5364FA; width: 181px; padding:10px 0 10px 33px; box-sizing:border-box; margin:0 auto; color: #FFF; font-family: "Noto Sans KR"; font-size: 20px; font-weight: 300; text-align:left; line-height:1; border-radius:43px; } .useGuidePage .section_guide .service_guide.mobile_view .layout_grid li .image_link:after { position: absolute; content: " "; bottom: 14px; right: 43px; display: block; width: 28px; height: 10px; background: url(../../images/web/front/guide_link02.png) no-repeat; } .useGuidePage .section_question .service_question.mobile_view .section_title { position:relative; padding:190px 0 11px 0; margin:0; color: #222; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height:1; } .useGuidePage .section_question .service_question.mobile_view .section_title:after { position: absolute; content: " "; background-size: 68px 65px; width: 68px; height: 65px; top: 104px; left: 50%; transform: translateX(-50%); } .useGuidePage .section_question .service_question.mobile_view .section_description { margin-bottom:44px; color: #222; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 400; line-height:1.4; } .useGuidePage .section_question .service_question.mobile_view .section_message { padding-bottom:66px; } .useGuidePage .section_question .service_question.mobile_view .section_message .button_wrap .button_list li { width:100%; } .useGuidePage .section_question .service_question.mobile_view .section_message .button_wrap .button_list li:not(:last-child) { margin-bottom:8px; } .useGuidePage .section_question .service_question.mobile_view .section_message .button_wrap .button_list li .button_contact { height:64px; padding:0; font-size: 24px; border-radius: 15px; } .useGuidePage .section_question .service_question.mobile_view .button_wrap .button_list { display:block; width:auto; padding:0 32px; } /* 개별 페이지,회원가입,mobile */ .joinPage { display:block; } .joinPage .form_container { max-width:375px; width:375px; margin:0 auto; padding:50px 20px 0 20px; box-sizing:border-box; } .joinPage .form_container .form_header { padding-bottom:52px; } .joinPage .form_container .form_body .form_list .form_item .form_checkbox .check_title:before { background-size: 17px 17px; width: 17px; height: 17px; } .joinPage .form_container .form_body .form_list .form_item .user_agreement { padding:16px 16px 9px 16px; } .joinPage .form_container .form_body .form_list .form_item:last-child .form_title { font-size:16px; } /* 개별 페이지,회원가입완료,mobile */ .joinPage .welcome { display:flex; flex-direction:column; justify-content:space-between; width:375px; height:calc( 100dvh - 77px ); max-width:375px; margin:50px auto 0 auto; padding:0 20px; box-sizing:border-box; } .joinPage .welcome .welcome_header { background-size: 100px 100px; padding-top: 130px; } .joinPage .welcome .welcome_header .welcome_title { margin-bottom: 13px; } .joinPage .welcome .welcome_body .welcome_notice .text_break { display:block; } .joinPage .welcome .welcome_footer { padding-top:0; } .joinPage .welcome .welcome_footer .button_list .button_item:first-child { display:none; } /* 개별 페이지,로그인,mobile */ .loginPage { display:block; margin-top:80px; } .loginPage .form_container { max-width:375px; width:375px; margin:0 auto; padding:0 20px; box-sizing:border-box; } .loginPage .form_container .form_header .form_logo { width:200px; } .loginPage .form_container .form_body .form_list .form_id, .loginPage .form_container .form_body .form_list .form_password { width:100%; } .loginPage .form_container .form_body .form_list .form_input { width:100%; height:46px; } .loginPage .form_container .form_footer .button_submit { padding:16px 0;} .loginPage .form_container .form_footer .form_request .faq_list .faq_title { font-size:14px; } /* 개별 페이지,아이디 찾기,mobile */ .findIdPage { display: flex; justify-content: center; margin-top: 80px; } .findIdPage .form_container { max-width:375px; width:375px; margin:0 auto; padding:0 20px; box-sizing:border-box; } .findIdPage .form_container .form_header .form_logo { width:200px; } .findIdPage .form_container .form_header .form_description .page_guide, .findIdPage .form_container .form_header .form_description .page_help { line-height:1.3; } .findIdPage .form_container .form_header .form_description .page_guide { font-size:17px; } .findIdPage .form_container .form_body .form_list .form_name, .findIdPage .form_container .form_body .form_list .form_email { width:100%; } .findIdPage .form_container .form_body .form_list .form_input { width:100%; height:46px; } .findIdPage .form_container .form_footer .form_request .text_notice { font-size:14px; } .findIdPage .form_container .form_footer .button_submit { padding:16px 0;} .findIdPage .modal_wrapper .modal { width: 330px; } /* 개별 페이지,비밀번호 찾기,mobile */ .findPwdPage { display: flex; justify-content: center; margin-top: 80px } .findPwdPage .form_container { max-width:375px; width:375px; margin:0 auto; padding:0 20px; box-sizing:border-box; } .findPwdPage .form_container .form_header .form_logo { width:200px; } .findPwdPage .form_container .form_header .form_description .page_guide { font-size: 16px; } .findPwdPage .form_container .form_header .form_description .page_help { line-height:1.3; } .findPwdPage .form_container .form_body .form_list .form_id, .findPwdPage .form_container .form_body .form_list .form_input { width:100%; height:46px; } .findPwdPage .form_container .form_footer .form_request .text_notice { font-size:14px; } .findPwdPage .form_container .form_footer .button_submit { padding:16px 0;} /* 모바일 헤더 메뉴 슬라이드, mobile */ .mobile_slide.active { visibility: visible } .mobile_slide.active .mobile_sideBar { right: 0; visibility: visible } .mobile_slide .mobile_sideBar { position: fixed; top: 0; right: -100%; z-index: 20000; background: #fff; width: 100%; max-width: 100%; height: 100vh; visibility: hidden; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; -ms-scroll-chaining: none; overscroll-behavior: contain; transition: .5s ease; -webkit-transition: .5s ease; -o-transition: .5s ease; } .mobile_slide .mobile_sideBar::-webkit-scrollbar { display:none; } .mobile_slide .mobile_sideBar .mobile_top { display:flex; display:-webkit-box; display:-ms-flexbox; align-items:center; -webkit-box-align:center; -ms-flex-align:center; justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify; height:48px; padding: 16px; box-sizing: border-box; -webkit-box-sizing: border-box; border-bottom:1px solid #DDD; } .mobile_slide .mobile_sideBar .mobile_top .mobile_head { width:105px; height: 24px; } .mobile_slide .mobile_sideBar .mobile_top .mobile_head .image_wrap, .mobile_slide .mobile_sideBar .mobile_top .button_close .image_wrap { display:block; width:100%; height:100%;} .mobile_slide .mobile_sideBar .mobile_top .mobile_head .image_wrap img, .mobile_slide .mobile_sideBar .mobile_top .button_close .image_wrap img { display:block; width:100%; } .mobile_slide .mobile_sideBar .mobile_top .button_close { width:18px; height:18px; margin-right:4px; } .mobile_slide .mobile_group { display:flex; flex-direction:column; justify-content:space-between; align-items:center; height:calc( 100dvh - 48px ); padding:16px 20px 0 20px; -webkit-box-sizing:border-box; box-sizing:border-box; } .mobile_slide .mobile_group .mobile_list { width:100%; } .mobile_slide .mobile_group .mobile_list li { width:100%; padding:21px 0; box-sizing:border-box; } .mobile_slide .mobile_group .mobile_list .mobile_link { position:relative; display:block; width:100%; color: #555; font-family: "Noto Sans KR"; font-size: 17px; font-weight: 500; line-height:1; } .mobile_slide .mobile_group .mobile_list .mobile_link:after{ position:absolute; content:" "; top:0; right:0; display:block; background:url("../../images/web/front/arrow_right01.png") no-repeat; width:18px; height:18px; } .mobile_slide .mobile_group .mobile_notice .button_wrap { width:100%; } .mobile_slide .mobile_group .mobile_notice .button_wrap .button_bottom { display:block; background: -webkit-gradient(linear, left top, right top, color-stop(0.27%, #6079FF), color-stop(98.76%, #58AFFF)); background: -o-linear-gradient(left, #6079FF 0.27%, #58AFFF 98.76%); background: linear-gradient(90deg, #6079FF 0.27%, #58AFFF 98.76%); width:100%; height:44px; line-height:44px; border-radius: 4px; color: #FFF; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; } .mobile_slide .mobile_group .mobile_notice .welcome_body { padding:32px 0; box-sizing:border-box; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice { margin-bottom:16px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice li { position:relative; padding-left:20px; color: #222; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 400; line-height:1.4; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice li:before { position:absolute; top:8px; left:6px; content:" "; display:block; background:#222; width:4px; height:4px; border-radius:100%; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice li:not(:last-child) { margin-bottom:5px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice .text_break { display:none; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list { display:flex; align-items:center; justify-content:center; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li { position:relative; display:flex; align-items:center; justify-content:center; width: calc((100% - 10px) / 2); height:48px; border-radius: 4px; border: 1px solid #464856; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:not(:last-child) { margin-right:10px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li .link_store { position:relative; display: flex; align-items: center; justify-content: center; width:100%; height:100%; color:#464856; font-family: "Noto Sans KR"; font-size: 18px; font-weight: 700; line-height:1; text-align:center; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li .link_store:before { position:absolute; top:50%; left:21px; content:" "; display:block; width:18px; height: 22px; transform:translateY(-50%); } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:last-child .link_store:before { left:11px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:first-child .link_store { padding-left:25px } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:last-child .link_store { padding-left:26px } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:first-child .link_store:before { background:url("../../images/web/front/ico_apple.png") no-repeat; background-size:18px 22px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .button_list .button_list li:last-child .link_store:before { background:url("../../images/web/front/ico_google.png") no-repeat; background-size:18px 22px; } .mobile_slide .mobile_group .mobile_notice .welcome_body .welcome_notice .text_break { display:block; } /* 클라우드 호스팅 안내 팝업, mobile */ .modal_cloud { align-items: center; background: #FFFFFF; width:320px; padding: 10px; box-sizing:border-box; font-size: 14px; color: #6A6A6A; } .modal_cloud .modal_contents { position:relative; } .modal_cloud .modal_contents .modal_title { display:block; margin:13px 0 10px 0 ; font-size:14px; color: #0C81CC; font-weight: bold; text-align:center; } .modal_cloud .modal_contents .button_cloud.button_top { position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; } .modal_cloud .modal_contents .button_cloud.button_top .image_wrap { width:100%; } .modal_cloud .modal_contents .button_cloud.button_top .image_wrap img { display:block; width:100%; } .modal_cloud .modal_contents .service_list { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; } .modal_cloud .modal_contents .service_list li { width:70px; height:92px; margin:5px; } .modal_cloud .modal_contents .service_list .service_unit { display:flex; align-items:center; flex-direction:column; height:100%;} .modal_cloud .modal_contents .service_list .service_unit .imgae_wrap { width:60px; margin:0 auto; border: 2px solid #C0D3DD; border-radius: 10px; box-shadow: 2px 2px 8px rgba(141, 141, 141, 0.25); } .modal_cloud .modal_contents .service_list .service_unit .imgae_wrap img { display:block; width:100%; } .modal_cloud .modal_contents .service_list .service_unit .service_title, .modal_cloud .modal_contents .description_list .description_text, .modal_cloud .modal_contents .table_wrap .table_service { display:block; color: #4A4A4A; font-family: "Noto Sans KR"; font-weight: 400; text-align:center;} .modal_cloud .modal_contents .service_list .service_unit .service_title { font-size:10px; } .modal_cloud .modal_contents .description_list .description_text, .modal_cloud .modal_contents .table_wrap .table_service{ font-size:12px; } .modal_cloud .modal_contents .table_wrap .table_service tr { border-top:1px solid #ECECEC; } .modal_cloud .modal_contents .table_wrap .table_service tr:last-child { border-bottom:1px solid #ECECEC; } .modal_cloud .modal_contents .table_wrap .table_service th { border-right:1px solid #ECECEC; } .modal_cloud .modal_contents .table_wrap .table_service th, .modal_cloud .modal_contents .table_wrap .table_service td { padding:4px; box-sizing:border-box; } .modal_cloud .modal_contents .table_wrap .table_service th { text-align:center;} .modal_cloud .modal_contents .table_wrap .table_service td { text-align:left; } .modal_cloud .modal_contents .description_list { margin-bottom:10px; } .modal_cloud .modal_contents .description_list .description_text { display:inline-block; vertical-align:top; text-align:left; } .modal_cloud .modal_bottom, .modal_cloud .modal_bottom .button_cloud.button_bottom { display: flex; justify-content: center; align-items: center; } .modal_cloud .modal_bottom .button_cloud.button_bottom { background: #6C7E9E; width: 190px; height: 30px; border-radius: 8px; font-weight: bold; color: #fff; } .modal_cloud .modal_bottom { margin-top:15px; } /* footer, mobile */ .footer { height:auto; padding:0; } .footer .footer_inner { width:100%; } .footer .mobile_view { display:block; width:100%; } .footer .mobile_view .company_info { max-width:375px; margin:0 auto; padding:0 24px; box-sizing:border-box; } .footer .mobile_view .company_info .company_main { display:block; } .footer .mobile_view .company_info .company_main h2 { padding:65px 0 26px 0; box-sizing:border-box; } .footer .mobile_view .company_info .section_link li { display:block; } .footer .mobile_view .company_info .company_paper li a{ color: #444; font-family: "Noto Sans KR"; font-size: 14px; font-weight: 500; line-height:1; } .footer .company_info .company_main { margin-bottom:26px; } .footer .company_info .company_main .company_paper { padding-right:0; } .footer .company_info .company_main .company_paper .line { position:relative; margin: 0 15px; } .footer .company_info .company_main .company_paper .line:before, .footer .company_info .company_main .company_paper .line:after { position: absolute; content: " "; top: 4px; display: block; width: 1px; height: 12px; background: #444; } .footer .company_info .company_main .company_paper .line:before { left:-7px; } .footer .company_info .company_main .company_paper .line:after { right:-8px; } .footer .company_info .company_main .company_paper .line .text_bold { font-family: "Noto Sans KR"; font-size:14px; font-weight: 700; } .footer .company_info .section_link { display:block; line-height:1; } .footer .company_info .section_link li { margin:0 0 7px 0; color: #444; font-family: NanumBarunGothic; font-size: 13px; font-weight: 400; line-height:1; } .footer .company_info .section_link .line:before { top:1px; } .footer .company_info .section_link .text_address { line-height:1.4; } .footer .company_info .section_link:not(:nth-of-type(3)) { margin:0 0 7px 0; } .footer .company_info .section_link.inline { display:flex; align-items:center; } .footer .company_info .section_link.inline li { color: #444; font-weight: 600; } .footer .company_info .section_link.inline li:not(:last-child) { margin-right:15px; } .footer .company_info .section_link .line:before { left:-8px; } .footer .company_info .section_link.inline .text_bold { display:inline-block; margin-bottom:0;} .footer .company_info .copyright { margin-bottom:86px; color: #444; font-family: NanumGothic; font-size: 12px; font-weight: 400; line-height:1; } /* 서비스 이용약관, mobile */ .termsPage .terms_title { padding:28px 24px 15px 24px ; -webkit-box-sizing:border-box; box-sizing:border-box; color: #333; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height: 1; } .termsPage .terms_container { border-top: 1px solid #E8E8E8; } .termsPage .terms_container .terms_list .terms_item { border-bottom: 1px solid #E8E8E8; } .termsPage .terms_container .terms_list .terms_item .terms_subject { display:flex; align-items:center; justify-content: space-between; width: 100%; padding: 15px 24px; box-sizing: border-box; } .termsPage .terms_container .terms_list .terms_item .terms_subject .button_slide.button_show { vertical-align: top; width: 20px; height: 20px; background: url("../../images/web/front/arrow_bottom01.png") center center / 24px 24px no-repeat; background-size: cover; } .termsPage .terms_container .terms_list .terms_item .terms_subject .button_slide.button_hide { vertical-align: top; width: 20px; height: 20px; background: url("../../images/web/front/arrow_top01.png") center center / 24px 24px no-repeat; background-size: cover; } .termsPage .terms_container .terms_list .terms_item .terms_category { display:block; color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; text-align:center; } .termsPage .terms_container .terms_unit .terms_order { display:block; padding:20px 0 10px 0; box-sizing:border-box; color: #555; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 700; line-height: 1; } .termsPage .terms_container .terms_unit .description_list .description_item, .termsPage .terms_container .terms_unit .description_list .description_item .inner_title, .termsPage .terms_container .terms_unit .description_list .description_item .inner_list, .termsPage .terms_container .terms_unit .terms_description { color: #555; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 400; } .termsPage .terms_container .terms_unit .description_list .description_item, .termsPage .terms_container .terms_unit .description_list .description_item .inner_list .inner_item, .termsPage .terms_container .terms_unit .description_list .description_item .inner_title { margin-bottom:4px; } .termsPage .terms_container .terms_unit .description_list .description_item:last-child{ margin-bottom:0; } .termsPage .terms_container .terms_unit .description_list, .termsPage .terms_container .terms_unit .description_list .description_item .inner_list { line-height:1.3; } .termsPage .terms_container .terms_unit .description_list .description_item .inner_list { margin-left:15px; } .termsPage .terms_container .terms_list .terms_item:last-child { margin-bottom:0; } .termsPage .terms_container .terms_list .terms_item .terms_row { display:none; } .termsPage .terms_container .terms_list .terms_item .terms_row .row_list { padding:0 24px 10px 24px; box-sizing:border-box; } .termsPage .terms_container .text_conclusion { padding:20px 24px; box-sizing:border-box; color: #555; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 700; line-height:1;} /* 개인정보처리방침, mobile */ .agreementPage .agreement_title { padding:28px 24px 15px 24px ; -webkit-box-sizing:border-box; box-sizing:border-box; color: #333; font-family: "Noto Sans KR"; font-size: 24px; font-weight: 700; line-height: 1; } .agreement_intro { padding:0 24px; box-sizing:border-box; margin-bottom:30px; } .agreement_intro .intro_title { display: block; margin:20px 0 10px 0; color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; text-align:left; } .agreement_intro .description_list .description_item:not(:last-child) { margin-bottom:10px; } .agreementPage .agreement_container { border-top: 1px solid #E8E8E8; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_row { display:none; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_row .row_list { padding:0 24px 10px 24px; box-sizing:border-box; } .agreementPage .agreement_container .agreement_list .agreement_item { border-bottom: 1px solid #E8E8E8; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_subject { display:flex; align-items:center; justify-content: space-between; width: 100%; padding: 15px 24px; box-sizing: border-box; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_subject .button_slide.button_show { vertical-align: top; width: 20px; height: 20px; background: url("../../images/web/front/arrow_bottom01.png") center center / 24px 24px no-repeat; background-size: cover; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_subject .button_slide.button_hide { vertical-align: top; width: 20px; height: 20px; background: url("../../images/web/front/arrow_top01.png") center center / 24px 24px no-repeat; background-size: cover; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_category { display:block; color: #333; font-family: "Noto Sans KR"; font-size: 16px; font-weight: 700; text-align:center; } .agreementPage .agreement_container .agreement_unit .agreement_order { display:block; padding:20px 0 10px 0; box-sizing:border-box; color: #555; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 700; line-height: 1; } .agreement_intro .description_list, .agreementPage .agreement_container .agreement_list .agreement_item .agreement_row .row_list .row_item .row_text, .agreementPage .agreement_container .agreement_unit .description_list .description_item, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_title, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list, .agreementPage .agreement_container .agreement_unit .agreement_description, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .sub_item .detail_title, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .sub_item .detail_list { color: #555; font-family: "Noto Sans KR"; font-size: 13px; font-weight: 400; } .agreementPage .agreement_container .agreement_unit .description_list .description_item, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .inner_item, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_title, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .sub_item .detail_list { margin-bottom:4px; } .agreementPage .agreement_container .agreement_unit .description_list .description_item:last-child{ margin-bottom:0; } .agreement_intro .description_list, .agreementPage .agreement_container .agreement_list .agreement_item .agreement_row .row_list .row_item .row_text, .agreementPage .agreement_container .agreement_unit .description_list, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list, .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .sub_item .detail_list { line-height:1.3; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list { margin-left:15px; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .inner_item .sub_list { margin-left:14px; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .inner_item .sub_title { display:block; margin-bottom:4px; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .inner_item .sub_list .sub_item { letter-spacing: 0; word-break: break-all; line-height:1.3; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .inner_item .sub_list .sub_item:not(:last-child) { margin-bottom:4px; } .agreementPage .agreement_container .agreement_unit .description_list .description_item .inner_list .sub_item .detail_list { margin:4px 0 0 15px; } .agreementPage .agreement_container .agreement_list .agreement_item:last-child { margin-bottom:0; } .agreementPage .agreement_container .agreement_list .agreement_item .agreement_row .row_list .row_item .row_text { display:inline-block; vertical-align:top; } /* topBtn, mobile */ .top_btn { right:14px; bottom: 73px; z-index: 2;} .top_btn a { width: 44px; height: 44px; } } @media screen and (max-width:376px) { /* 캐시맵 서비스의 파트너 */ .mainPage .section_partners .service_partners.mobile_view .module_slider { width:320px; } .mainPage .section_core .service_core.mobile_view .section_message .layout_grid li { width: calc((100% - 54px) / 3); } }