/* --------------------- DoosanENC Released 0000.00.00 --------------------- */ /* --------------------- Published by 4m Creative --------------------- */ /* ================================ Devices Responsive =============================== */ @media screen and (max-width:1600px) { .card_popup .popup_inner .pop_cont .inner_box .list img { width: 100%; object-fit: contain; } } @media screen and (max-width:1680px) { .civil_engineer .section .section_nav { left: 2rem; } } @media screen and (max-width:1550px) { .technology .competence .section_nav.on { left: 1.5rem; } } @media screen and (max-width:1440px) { #pc { overflow-x: auto !important; width: 144rem;} .container .sub_visual h1 { left: 5rem; } #sub .container .inner { padding: 0 5rem; width: 144rem; } #sub .container .footer .inner { padding: 15.21vh 4rem 0; } #sub .footer .inner { padding: 15.21vh 4rem 0; } #sub .civil_engineer .business_lists > .inner { padding: 0!important; } #sub .civil_engineer .business_lists ul { width: 144rem; } #sub .company .bod .inner:last-child { padding: 12rem 5rem 20rem; } #sub .mp03 .outline .section1 p:last-of-type { padding-left: 5rem; } } /* ================================ Mobile Responsive =============================== */ /* 공통 */ @media screen and (max-width:767px) { /* popNoti */ #popNoti {right: initial;left: 50%;top: 10rem;transform: translate(-50%, 0);box-shadow: 2.5px 4.5px 27px 3px rgba(0, 0, 0, 0.2);} .pop_close_wrap {height: 3.5rem;} .pop_close_wrap>button {font-size: 1.1rem;} #popNoti.pop_recruit, #popNoti.pop_auction {max-width: 30rem;width: calc(100% - 4rem);} #popNoti.pop_tempStop {max-width: 30.5rem;width: calc(100% - 4rem);} /* common */ br.br_pc, br.br_t {display: none;} br.br_m {display: block;} #mobile .img_pc {display: none;} #mobile .img_m {display: inline-block;} img { width: 100%; object-fit: contain; } #mobile .g-recaptcha { transform:scale(0.77); transform-origin:0 0; } ::-webkit-scrollbar {height: 2px;} /* selectbox */ #mobile .select_row { height: 4rem; border: .1rem solid #e8e8e8; } #mobile .select_row:after { right: 2rem; width: .85rem; height: .45rem; } #mobile .select_row label { width: 100%; height: 4rem; line-height: 4rem; padding: 0 2rem; font-size: 1.3rem; } #mobile .select_row select { width: 100%; height: 4rem; line-height: 4rem; padding: 0 2rem; } #mobile .select_row select option { font-size: 1.4rem; } /* input */ #mobile .input_row { width: 100%; } #mobile .input_row input { padding: 0 2rem; height: 4rem; font-size: 1.3rem; border: .1rem solid #e8e8e8; } #mobile .input_search input { float: left; width: 33rem; height: 4.6rem; font-size: 1.3rem; } #mobile .input_search a { float: right; } /* textarea */ #mobile .area_row { height: 15.7rem; } #mobile .area_row textarea { padding: 1.5rem 2rem; font-size: 1.4rem; line-height: 1.4; } /* check box type */ #mobile .checkbox_row input[type="checkbox"] + label { font-size: 1.5rem; margin-bottom: 1rem; } #mobile .checkbox_row input[type="checkbox"] + label:last-child { margin-right: 0; } #mobile .checkbox_row input[type="checkbox"] + label:before { margin-right: 1rem; width: 1.8rem; height: 1.8rem; } #mobile .checkbox_row input[type="checkbox"]:checked + label:before { background-size: 1rem .75rem; } /* file */ #mobile .file_row label, #mobile .file_row button { width: 11.1rem; height: 3.5rem; line-height: 3.5rem; font-size: 1.3rem; font-weight: 150; border-radius: 1.7rem; } #mobile .file_row .upload_name { height: 3.5rem; font-size: 1.3rem; padding: 0 2rem; } #mobile .file_row form { align-items: flex-end; } #mobile .file_row .file-list, #mobile .file_row .fileWrap { width: calc(100% - 11rem); height: auto; min-height: 3.5rem; padding: 0 1rem; flex-direction: column; align-items: flex-start; justify-content: center; } #mobile .file-list .filebox, #mobile .fileWrap .filebox { display: flex; max-width: 100%; } #mobile .file-list .filebox p, #mobile .fileWrap .filebox p { max-width: 100%; font-size: 1.3rem!important; line-height: 1.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #mobile .file-list .filebox .delete, #mobile .fileWrap .filebox .delete { flex-shrink: 0; } /* device checker */ #mobile { width: 100%; } #mobile .sub_visual { background-size: cover; } /* header */ #mobile .header { padding: 0 2rem; width: 100vw; } #mobile .header::before { content: ''; width: 100vw; height: 0; top: 6rem; left: 0; position: fixed; background: linear-gradient(to bottom, #005eb8 50%, transparent 50%); z-index: -100; transition: all ease .3s; } #mobile .header.bg { background: #fff;box-shadow: none; } #mobile .header.bg .logo { background: url(../images/common/logo_b.png) no-repeat; } #mobile .header.bg .top_sitemap button span::before { background-color: #222; } #mobile .header .top_sitemap.on button span::before { background-color: #fff; } #mobile .header .header_wrap { width: 100%; height: 6rem; justify-content: space-between; } #mobile .header .logo { width: 7.7rem; height: 2.1rem; margin-right: 0; background-size: contain !important; } #mobile .header .logo.sitemapOn { background: url(../images/common/logo_w_mob.png) no-repeat !important; background-size: contain !important; } #mobile .header .gnb_menu { width: auto; margin-left: initial; display: block; } #mobile .header .gnb, #mobile .header .weve_btn, #mobile .header .lang_select, #mobile .header .right_nav { display: none; } #mobile .header .top_sitemap button { width: 2.7rem; /* height: 1.75rem; */ justify-content: center; overflow: hidden; } #mobile .header .top_sitemap button span { width: 1.9rem; height: .2rem; margin-left: .75rem; margin-bottom: .5rem; } #mobile .header .top_sitemap button span:nth-child(2) { width: 2.7rem; height: .2rem; margin-left: 0; } #mobile .header::after { content: ''; display: block; position: absolute; left: 0; width: 100%; height: 7rem; background: #005eb8; transform: scaleY(0); z-index: -1; bottom: 0; transition: transform ease .3s; transform-origin: 0 100%; } #mobile .header.mobileForm::after { transform: scaleY(1); width: 100%; } #mobile .header.mobileForm::before { height: calc(var(--vh, 1vh) * 100 - 6rem); } #mobile .header .top_sitemap button span:nth-child(1){animation:manuAnimate01_1 0.8s forwards; } #mobile .header .top_sitemap button span:nth-child(2){animation:manuAnimate02_1 0.8s forwards; } #mobile .header .top_sitemap button span:nth-child(3){animation:manuAnimate03_1 0.8s forwards; } #mobile .header .top_sitemap.on button span:nth-child(1){animation:manuAnimate01 0.8s forwards; } #mobile .header .top_sitemap.on button span:nth-child(2){animation:manuAnimate02 0s forwards;} #mobile .header .top_sitemap.on button span:nth-child(3){animation:manuAnimate03 0.8s forwards;} @keyframes manuAnimate01 { 0%{transform: translateY(0px) rotate(0deg);} 50%{transform: translateY(15px) rotate(0deg);} 100%{transform: translateY(15px) rotate(45deg); width: 5rem; margin-left: -.5rem;} } @keyframes manuAnimate01_1 { 0%{transform: translateY(15px) rotate(45deg); width: 4rem; margin-left: 0;} 50%{transform: translateY(15px) rotate(0deg);} 100%{transform: translateY(0px) rotate(0deg); width: 2.6rem; margin-left: 1rem; } } @keyframes manuAnimate02 { 0%{opacity: 1;} 100%{opacity: 0;} } @keyframes manuAnimate02_1 { 0%{opacity: 0;} 100%{opacity: 1;} } @keyframes manuAnimate03 { 0%{transform: translateY(0px) rotate(0deg);} 50%{transform: translateY(-10px) rotate(0deg);} 100%{transform: translateY(-10px) rotate(135deg); width: 5rem; margin-left: -.5rem;} } @keyframes manuAnimate03_1 { 0%{transform: translateY(-10px) rotate(135deg); width: 4rem; margin-left: 0;} 50%{transform: translateY(-10px) rotate(0deg);} 100%{transform: translateY(0px) rotate(0deg); width: 2.6rem; margin-left: 1rem;} } /* sitemap */ #mobile .sitemap { min-width: 100%; top: 6rem; opacity: 1; visibility: visible; height: 0; transition: height ease .3s; z-index: 1000; display: none; } #mobile .sitemap.active { height: calc(var(--vh, 1vh) * 100 - 6rem); display: block; } #mobile .sitemap.active::before { content: ''; width: calc(100% - 4rem); height: .1rem; display: block; top: 0; left: 2rem; position: absolute; z-index: 1; background: rgba(255, 255, 255, .1); } #mobile .sitemap .wrap { flex-direction: column; justify-content: flex-start; overflow: auto; } #mobile .sitemap .wrap .sitemap_main { width: 100%; min-width: 100%; left: 0; } #mobile .sitemap .wrap .sitemap_main .block_le { width: 100%; min-width: 100%; padding: 0; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select { background: #005eb8; padding: 2rem; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .lang_choice li.on a { color: #fff; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .lang_choice li a { padding: 0 1.5rem; color: rgba(255, 255, 255, .53); font-size: 1.4rem; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .lang_choice li:first-child::after { background: rgba(232, 232, 232, .3); height: 1.2rem; top: .1rem; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .btn { width: 11rem; height:3.3rem; border-radius: 3.3rem; border: 1px solid #fff; margin-left: auto; background: url(../images/common/sitemap_weve.png) no-repeat 50% 50%; background-size: 3.8rem 2.35rem;} #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .lang_current { font-size: 1.4rem; } #mobile .sitemap .wrap .sitemap_main .block_le .lang_select .lang_current .ico.global { background: url(../images/common/icon_lang_w.png) 0 0 no-repeat; width: 1.5rem; height: 1.5rem; background-size: contain; } #mobile .sitemap .wrap .sitemap_main .block_le > ul { margin: 0; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > li { padding: 3rem 2rem 1.5rem; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > li > h2 { font-family: 'Montserrat','Pretendard'; font-size: 2.4rem; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > li > h2::after { margin-right: 0; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > li.active > h2::after { opacity: 1; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site { background-color: #000; padding: 0; position: relative; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site > a { color: #fff; font-size: 1.4rem; font-weight: 450; display: block; padding: 3.8rem 2rem; position: relative; border-bottom: .1rem solid #e8e8e8; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site > a:after { content: ''; width: .9rem; height: .45rem; background: url(../images/common/sitemap_familysite.png)50% 50% no-repeat; background-size: contain; display: inline-block; right: 2rem; position: absolute; top: 0; bottom: 0; margin: auto; transition: all ease .3s; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site.open > a:after { transform: rotate3d(1, 0, 0, 180deg); } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site .site_list { position: relative; max-height: 0; overflow: hidden; transition: all ease .3s; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site.open .site_list { max-height: 100rem; transition: all ease .6s; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > .family_site li a { color: #fff; display: block; padding: 2rem; font-size: 1.4rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth { margin-top: 1.5rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li { width: 100%; padding: 1.5rem 0 1rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li:first-child { padding: .5rem 0 1rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li h4 { position: relative; top: 0; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep.active { color: #005eb8; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep::before, #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep::after { content: ''; display: inline-block; width: 1.6rem; height: .1rem; background: #000000; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; transition: all ease .2s; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep::after { transform: rotate(90deg); width: 1.5rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep.active::after { transform: rotate(0deg); } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep.active::before, #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .btn_3dep.active::after { background: #005eb8; opacity: .5; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .block_3depth { padding: 0; font-size: 1.5rem; flex-wrap: nowrap; flex-direction: column; height: 100%; max-height: 0; overflow: hidden; transition: all ease .3s; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .block_3depth.active { max-height: 100rem; height: auto; transition: all ease 1s; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li .block_3depth li { margin-top: 1.5rem; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > .empty h4 a { padding: 0; display: block; } #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li:hover h4 a, #mobile .sitemap .wrap .sitemap_main .block_le .block_2depth > li h4 a:hover { color: unset; } #mobile .sitemap .wrap .sitemap_main .block_le > ul > li.active .block_2depth { max-height: 100rem; transition: max-height ease 1s; } #mobile .sitemap .wrap .sitemap_sub { display: none; } #mobile .sitemap .wrap::-webkit-scrollbar { width: 0px; } #mobile .sitemap .wrap::-webkit-scrollbar-track { border:5px solid #fff; } #mobile .sitemap .wrap::-webkit-scrollbar-thumb { background: #e8e8e8; border-radius: 100%; } /* container*/ #mobile #sub .container .inner { width: calc(100% - 6rem); padding: 0; } #mobile #sub .container .inner::-webkit-scrollbar { height: 2px; } #mobile #sub .container .inner1200 { padding: 0 2rem; } /* pagination */ #mobile .contents .paging {margin-top: 3rem; margin-bottom: 0; display: flex; justify-content: space-between; align-items: center; } #mobile .contents .paging .prev {margin-left: 3vw; width: .7rem; height: 1.2rem;} #mobile .contents .paging .next {margin-right: 3vw; width: .7rem; height: 1.2rem;} #mobile .contents .paging ul { margin: 0 6vw; display: inline-block; vertical-align: middle; display: flex; justify-content: center; width: 65%; } #mobile .contents .paging ul:after { content: ""; display: block; clear: both; } #mobile .contents .paging ul li { position: relative; float: left; margin: 0 2vw; } #mobile .contents .paging ul li a { width: 2rem; height: 2rem; line-height: 1.5; font-size: 1.3rem; vertical-align: middle; } /* sub_visual */ #mobile .container .sub_visual { height: 47.5rem; } #mobile .container .sub_visual .sub_visual_menu.fixed { max-width: 76.8rem; left: 50%; transform: translateX(-50%); } #mobile .container .sub_visual h1 { font-size: 4rem; transform: translateY(1.1rem); left: 0; letter-spacing: 0; } #mobile .container .sub_visual .sub_visual_menu { width: 100%; height: 4.5rem; bottom: 9rem; } #mobile .container .sub_visual .sub_visual_menu .menu_inner { width: 100%; } #mobile .container .sub_visual .sub_visual_menu .home { width: 4.5rem; background-size: 1.15rem 1.15rem; } #mobile .container .sub_visual .sub_visual_menu .depth1 { width: calc(50% - 3.75rem); } #mobile .container .sub_visual .sub_visual_menu .depth2 { width: calc(50% - .75rem); border: 0; } #mobile .container .sub_visual .sub_visual_menu .depth > a { height: 4.5rem; /* line-height: 4.5rem; */ padding-left: 2rem; font-size: 1.4rem; display: flex; align-items: center; line-height: 1.2; } #mobile .container .sub_visual .sub_visual_menu .depth > a:before { top: 2.1rem; right: 2rem; border-left: .35rem solid transparent; border-right: .35rem solid transparent; } #mobile .container .sub_visual .sub_visual_menu .depth1 > a:before { border-top: .35rem solid #777; } #mobile .container .sub_visual .sub_visual_menu .depth2 > a:before { border-top: .35rem solid #fff; } #mobile .container .sub_visual .sub_visual_menu .depth .drop_box { padding: 0 0 0 2rem; transition: padding-top .3s, padding-bottom .3s; } #mobile .container .sub_visual .sub_visual_menu .depth.open .drop_box { padding: 1rem 0 1rem 2rem; } #mobile .container .sub_visual .sub_visual_menu .depth .drop_box li a { padding: .7rem 0; font-size: 1.3rem; } #mobile .container .sub_visual .scroll_down { display: none; } /* tab */ #mobile .tab_small { margin-top: 5.2rem; overflow: hidden; } #mobile .tab_small ul { padding: 0 2rem; } #mobile .tab_small ul li { font-size: 1.4rem; } #mobile .tab_small ul li button { width: 100%; height: 5.5rem; padding-bottom: 0; display: flex; align-items: center; justify-content: center; } #mobile .tab_small .bar { height: .4rem; background: #005eb8; position: absolute; bottom: 0; left: 0; transform: skew(-45deg); transition: all ease .6s; } #mobile .tab_small ul li:hover, #mobile .tab_small ul li.active { color: #005eb8; } /* footer */ #mobile .footer { height: auto!important; } #mobile .footer .inner { display: block; height: auto!important; padding: 0 2rem; } #mobile .footer .inner > div { width: 100%; } #mobile .footer .sec_tit { font-size: 3.5rem; padding-top: 6rem; } #mobile .footer .sec_tit > span { color: #005eb8; } #mobile .footer .sec_tit > span::after { content:''; display: block; width: 100%; height: .4rem; background-color: #005eb8; transform: skew(-40deg); transition: width ease-in-out .5s; } #mobile .footer .family_site { margin-top: 5rem; margin-bottom: 7rem; } #mobile .footer .family_site .site_selected { display: inline-block; font-size: 1.4rem; width: auto; min-width: 11rem; } #mobile .footer .family_site .site_selected::after { border-top: .35rem solid #fff; border-left: .35rem solid transparent; border-right: .35rem solid transparent; vertical-align: middle; margin-left: 1.2rem; } #mobile .footer .family_site .site_list { width: auto; top: 2rem; transition: padding-top .3s, padding-top .3s; } #mobile .footer .family_site.open .site_list { padding: 1rem; } #mobile .footer .family_site .site_list li a { font-size: 1.4rem; padding: 1rem; } #mobile .footer .right { display: none; } #mobile .footer_wrap_inner { height: auto; } #mobile .footer .footer_wrap { height: auto; padding: 5rem 0; } #mobile .footer .footer_wrap .footer_award { position: initial; max-width: 24.1rem; margin-top: 5rem;} #mobile .footer .footer_wrap .footer_award>img { width: 100%; object-fit: contain; } #mobile .footer .footer_wrap ul { width: 100%; display: flex; justify-content: center;align-items: center; padding: 0 2rem; text-align: center; } #mobile .footer .footer_wrap ul li { position: relative; display: inline-block; } #mobile .footer .footer_wrap ul li:not(:last-child)::after { height: 1rem; margin: 0 2.3vw;} #mobile .footer .footer_wrap ul li a { padding: 0; font-size: 1.3rem; } #mobile .footer .footer_wrap p { margin-top: 2.2rem; font-size: 1.2rem; } /* top button */ #mobile #topButton { font-size: 1.4rem; right: 2rem; bottom: 3.5rem; } #mobile #topButton::after { width: 1.8rem; height: 2.3rem; } /* =========================================================================== */ /* =============================== Main Page =============================== */ /* =========================================================================== */ /* 공통 */ #mobile #main #rightnavi { display: none; } #mobile #main #fullpage section { height: auto; overflow: hidden; } #mobile #main #fullpage section .sec_tit { font-size: 3.5rem; left: 0; } #mobile #main #fullpage section .sec_tit::before { width: 4.8rem; height: .4rem; } /* Section01 */ #mobile #main #fullpage .section01 { height: calc(var(--vh, 1vh) * 100); overflow: hidden; transition: height ease .3s; } #mobile #main #fullpage .section01 .swiper .sec01_controller { left: 0; right: 0; bottom: 4rem; margin: auto; width: calc(100% - 7.4rem); height: 4rem; } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 { width: calc(100% - 6rem); } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01:after { width: calc(100% - 10rem); } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 .swiper-pagination-bullet { width: .9rem; height: .9rem; padding: 2rem; } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-pagination-sec01 .swiper-pagination-bullet:after { width: .9rem; height: .9rem; } #mobile #main #fullpage .section01 .swiper .sec01_controller .bullet_hr { left: 3rem; width: 4rem; height: 4rem; } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-button { width: 1.6rem; height: 3rem; } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-button-next { content: url(../images/main/sec01_controller_arrowNext_m.png); } #mobile #main #fullpage .section01 .swiper .sec01_controller .swiper-button-prev { content: url(../images/main/sec01_controller_arrowPrev_m.png); } #mobile #main #fullpage .section01 .swiper-slide h2 { font-size: 3.8rem; } #mobile #main #fullpage .section01 .clip-wrap { width: 100%; height: 100%; position: absolute; z-index: 9; background: #fff; } #mobile #main #fullpage .section01 .clip-css { width: 33.4rem; height: 32.8rem; transform: translateY(0); background: url(../images/main/sec01_bg1.png)no-repeat 50% 50%; background-size: cover; } #mobile #main #fullpage .section01.ani .clip-css { animation: intro_mobile 1s alternate; width: 100%; height: 100%; } #mobile #main #fullpage .section01.active .clip-css { transform: translateY(0); height: 100%; } #mobile #main #fullpage .section01 .swiper-slide .slide-inner img { height: 100vh; object-fit: cover; } /* Section02 */ #mobile #main #fullpage .section02 { padding-bottom: 5.8rem; } #mobile #main #fullpage .section02 .swiper, #mobile #main #fullpage .section02 .swiper-wrapper, #mobile #main #fullpage .section02 .swiper-slide { height: fit-content; } #mobile #main #fullpage .section02 .right .contents .thumb_img { display: none; } #mobile #main #fullpage .section02 .swiper-slide { display: flex; flex-direction: column-reverse; } #mobile #main #fullpage .section02 .mov_txt, #mobile #main #fullpage .section02 .right { display: none; } #mobile #main #fullpage .section02 .big_img { width: 100%; max-width: 100%; height: 62vh; } #mobile #main #fullpage .section02 .big_img img { width: 100%; } #mobile #main #fullpage .section02 .swiper-slide h2 { width: 100%; height: auto; transform: translate(50%,0); top:0; margin: 2rem 0 2rem 2rem; font-size: 4rem; transition: opacity; } #mobile #main #fullpage .section02/* .active */ .swiper-slide.swiper-slide-active h2, #mobile #main #fullpage .section02/* .active */ .swiper-slide.swiper-slide-duplicate-active h2 {opacity: 1; position: relative; left: 2rem; transform: translate(0,0);font-size: 4rem; transition: all ease-in-out .8s } #mobile #main #fullpage .section02 .moving_tab { width: 100%; height: 8.5rem; align-items: start; position: relative; top:0; left: 0; transform: translateY(0); overflow: auto; } #mobile #main #fullpage .section02 .moving_tab .swiper-pagination-sec02 { width: fit-content; margin-left: 1rem; } #mobile #main #fullpage .section02 .swiper-pagination-bullet { width: 18rem; margin-right: 3rem; flex-shrink: 0; top: 2rem; } #mobile #main #fullpage .section02 .swiper-pagination-bullet::after { display: block; position: absolute; bottom: -3.5rem; left: 0; font-size: 1.65rem; font-weight: 400; letter-spacing: -.0825rem; color: #005eb8; opacity: .2; } #mobile #main #fullpage .section02 .swiper-pagination-bullet-active::after { opacity: 1; } #mobile #main #fullpage .section02 .swiper-pagination-sec02 > span:nth-of-type(1)::after { content:'해운대 두산위브더제니스'; } #mobile #main #fullpage .section02 .swiper-pagination-sec02 > span:nth-of-type(2)::after { content:'분당 두산타워'; } #mobile #main #fullpage .section02 .swiper-pagination-sec02 > span:nth-of-type(3)::after { content:'신분당선전철'; } #mobile #main #fullpage .section02 .swiper-pagination-sec02 > span:last-child { margin-right: 1rem; } #mobile #main #fullpage .section02 .swiper-pagination-bullet em { font-size: 1.4rem; padding-bottom: 1.5rem; } #mobile #main #fullpage .section02 .swiper-button { display: none; } #mobile #main #fullpage .section02.active .swiper-pagination-bullet-active b { animation-duration: 4.5s; } /* Section03 */ #mobile #main #fullpage .section03 { background: #f9f9f9; } #mobile #main #fullpage .section03 .inner { transform: translateX(0); opacity: 1; margin: 0; padding: 6rem 0rem; } #mobile #main #fullpage .section03 .sec_tit { position: initial; margin-left: 2rem; margin-bottom: 2rem; } #mobile #main #fullpage .section03 .bus_swiper .left { opacity: 1; width: calc(100% - 2rem); margin: 0 auto; padding: 1rem 1rem 7.5rem; transform: translateY(0); min-height: auto; box-shadow: .25rem .2rem 1rem 0px rgba(54, 63, 72, 0.5); } #mobile #main #fullpage .section03 .bus_swiper .left .img { width: 100%; height: 30rem; overflow: hidden; position: relative; } #mobile #main #fullpage .section03 .bus_swiper .left .img .swiper-pagination { text-align: left; padding-left: 1rem; bottom: 1.5rem; } #mobile #main #fullpage .section03 .bus_swiper .left .img .swiper-pagination .swiper-pagination-bullet { width: .5rem; height: .5rem; border-radius: 50%; background: #fff; opacity: 1; box-sizing: border-box; padding: 0; margin: 0 1.1rem; position: relative; } #mobile #main #fullpage .section03 .bus_swiper .left .img .swiper-pagination .swiper-pagination-bullet-active::after { content:''; display: inline-block; width: 2rem; height: 2rem; border: .15rem solid #fff; border-radius: 50%; position: absolute; top: -.9rem; left: -.9rem; } #mobile #main #fullpage .section03 .bus_swiper .left .tit { font-size: 1.7rem; margin: 1.5rem 0 2rem; } #mobile #main #fullpage .section03 .bus_swiper .left ul li+li { margin-top: 1rem; } #mobile #main #fullpage .section03 .bus_swiper .left ul li b { font-size: 1.3rem; width: 8rem; } #mobile #main #fullpage .section03 .bus_swiper .left ul li b::before { width: .45rem; height: .45rem; transform: rotate(18deg); border-radius: 0; } #mobile #main #fullpage .section03 .bus_swiper .left ul li span { font-size: 1.3rem;font-weight: 200; } #mobile #main #fullpage .section03 .bus_swiper .left ul li span.narrow { letter-spacing: -0.105rem; } #mobile #main #fullpage .section03 .bus_swiper .left > a { font-size: 1.2rem; margin-top: 2.5rem; height: 5.1rem; line-height: 5.1rem; padding: 0 3.5rem;} #mobile #main #fullpage .section03 .bus_swiper .left > a::after { width: .65rem; height: 1.05rem; background-size: .65rem 1.05rem; right: 6.5rem; transform: translateX(3rem); margin-top: -.525rem; } #mobile #main #fullpage .section03 .bus_swiper .left > a:hover::after { transform: translateX(3rem); } #mobile #main #fullpage .section03 .bus_swiper > .swiper-wrapper > .swiper-slide { padding-top: 0; position: relative; } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 { float: none; width: calc(100% - 2rem); margin: 0 auto; display: flex; justify-content: space-between; opacity: 1; transform: translateY(0); } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > .swiper-pagination-bullet { margin-right: 0; } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(1), #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(2), #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(3) { width: calc((100% - .6rem) / 3); } #mobile #main #fullpage .section03 .inner_swiper .swiper-pagination { bottom: 1.6rem; left: 1.6rem; } #mobile #main #fullpage .section03 .inner_swiper .swiper-pagination > span { width: .5rem; height: .5rem; margin-right: 2rem; } #mobile #main #fullpage .section03 .inner_swiper .swiper-pagination > span::before { width: 2rem; height: 2rem; } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span > em { padding-bottom: 1.1rem; } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span > em::after { margin-left: 0; } #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(1) > em::after, #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(2) > em::after, #mobile #main #fullpage .section03 .bus_swiper .swiper-pagination-sec03 > span:nth-of-type(3) > em::after { content:''; } #mobile #main #fullpage .section03 .bus_swiper .right { position: absolute; width: calc(100% - 4rem); height: 30rem; z-index: 9; right: 0; left: 0; margin: auto; top: 1rem; overflow: hidden; transition: all ease .3s .1s; } #mobile #main #fullpage .section03 .bus_swiper .right .swiper-slide { height: 100%; } #mobile #main #fullpage .section03 .bus_swiper .right .swiper-slide.mob-slide { display: block; } /* Section04 */ #mobile #main #fullpage .section04 .inner { padding: 6rem 2rem; } #mobile #main #fullpage .section04 .sec_tit { padding: 0 0 3.5rem 0; position: initial; left: 0; opacity: 1; } #mobile #main #fullpage .section04 .card { height: auto; flex-wrap: wrap; } #mobile #main #fullpage .section04 .card li { width: 100%; height: 15rem; text-align: center; opacity: 1; transform: translateY(0); position: relative; display: flex; flex-direction: column-reverse; justify-content: center; align-items: flex-start; } #mobile #main #fullpage .section04 .card li+li { margin-top: 1rem; } #mobile #main #fullpage .section04 .card li .bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 1; position: absolute; top: 0; left: 0; } #mobile #main #fullpage .section04 .card li:hover .bg { box-shadow: .4rem .3rem 2rem 0 rgba(0, 0, 0, 0.4); } #mobile #main #fullpage .section04 .card li .icon { display: none; } #mobile #main #fullpage .section04 .card li .icon_white { display: block; } #mobile #main #fullpage .section04 .card li .icon, #mobile #main #fullpage .section04 .card li .icon_white { /* transform: translateY(-2.6rem); */ left: 3.5rem; right: initial; top: 50%; bottom: initial; transform: translateY(-50%); } #mobile #main #fullpage .section04 .card li:nth-child(1) .icon, #mobile #main #fullpage .section04 .card li:nth-child(1) .icon_white { width: 5.4rem; } #mobile #main #fullpage .section04 .card li:nth-child(2) .icon, #mobile #main #fullpage .section04 .card li:nth-child(2) .icon_white { width: 5.6rem; } #mobile #main #fullpage .section04 .card li:nth-child(3) .icon, #mobile #main #fullpage .section04 .card li:nth-child(3) .icon_white { width: 5.2rem; } #mobile #main #fullpage .section04 .card li:nth-child(4) .icon, #mobile #main #fullpage .section04 .card li:nth-child(4) .icon_white { width: 5.3rem; } #mobile #main #fullpage .section04 .card li p { position: initial; margin: 0 0 0 13.4rem; transform: translateY(0); text-align: left; font-size: 1.7rem; color: #fff; } #mobile #main #fullpage .section04 .card li:hover p { transform: translateY(0); } #mobile #main #fullpage .section04 .card li h3 { position: relative; transform: translateY(0); margin: 0 0 0 13.4rem; display: flex; align-items: flex-end; } #mobile #main #fullpage .section04 .card li h3 span:first-child { font-size: 3.9rem; } #mobile #main #fullpage .section04 .card li h3 span:last-child { font-size: 1.2rem; opacity: 1;transform: translateY(-2rem); } #mobile #main #fullpage .section04 .card li:hover .icon { display: none; } #mobile #main #fullpage .section04 .card li:hover .icon_white { display: block; } /* Section05 */ #mobile #main #fullpage .section05 { background: linear-gradient(to bottom, #000 29.8rem, #fff 29.9rem, #fff 100%); } #mobile #main #fullpage .section05 .inner { transform:translateY(0); padding: 6rem 1rem; } #mobile #main #fullpage .section05 .sec_tit { position: initial; padding-left: 1rem; } #mobile #main #fullpage .section05 .link { position: initial; margin: 2.2rem 0 3rem 1rem; } #mobile #main #fullpage .section05 .link li:last-child { margin-left: 4rem; } #mobile #main #fullpage .section05 .interview_box { padding-top: 0; flex-direction: column; } #mobile #main #fullpage .section05 .interview_box li { width: 100%; } #mobile #main #fullpage .section05 .link li a { font-size: 1.5rem; } #mobile #main #fullpage .section05 .link li a img { width: 1.25rem; margin-left: 1.4rem; } #mobile #main #fullpage .section05 .interview_box li:not(:first-child) { margin-top: 4rem; } #mobile #main #fullpage .section05 .interview_box li .interview_wrap { height: fit-content; } #mobile #main #fullpage .section05 .interview_box li .interview_wrap .bdt, #mobile #main #fullpage .section05 .interview_box li .interview_wrap .bdb { height: 0.3rem; } #mobile #main #fullpage .section05 .interview_box li .interview_wrap .bdl, #mobile #main #fullpage .section05 .interview_box li .interview_wrap .bdr { width: 0.3rem; } #mobile #main #fullpage .section05 .interview_box li .interview_wrap .interview_thumb img.btn_play { width: 5rem; height: 5rem; } #mobile #main #fullpage .section05 .interview_box li dl { margin: 2rem 0 0 1rem; } #mobile #main #fullpage .section05 .interview_box li dl dt { font-size: 1.6rem; } #mobile #main #fullpage .section05 .interview_box li dl dd { font-size: 1.3rem; padding-top: 1rem; } #mobile #main #fullpage .section05 .interview_box li dl dd span:before { height: 1rem; margin: 0 1.5rem; vertical-align: unset; } /* Section06 */ #mobile #main #fullpage .section06 .inner { flex-direction: column; background: #f9f9f9; padding-bottom: 8rem; } #mobile #main #fullpage .section06 .left { width: 100%; padding: 6rem 2rem 4.5rem; } #mobile #main #fullpage .section06 .left .sub_tit { font-size: 2rem; line-height: 1.6; margin: 1rem 0 3rem; } #mobile #main #fullpage .section06 .left .viewmore { font-size: 1.2rem; width: 10.2rem; } #mobile #main #fullpage .section06 .left .viewmore::after { width: 100%; } #mobile #main #fullpage .section06 .left .viewmore > span { opacity: 1; } #mobile #main #fullpage .section06 .left ul { width: 100%; margin-top: 4rem; justify-content: flex-start; } #mobile #main #fullpage .section06 .left ul li:not(:first-child) { margin-left: 4rem; } #mobile #main #fullpage .section06 .left ul li:hover .icon { transform: none; } #mobile #main #fullpage .section06 .left ul .icon img { width: 7.5rem; height: 7.4rem; } #mobile #main #fullpage .section06 .left ul li .pg_name { font-size: 1.2rem; margin-top: 1.5rem; } #mobile #main #fullpage .section06 .right { width: calc(100% - 2rem); padding: 0 1rem 2rem; background: transparent; } #mobile #main #fullpage .section06 .right .tab { display: none; } #mobile #main #fullpage .section06 .right .tab li { text-align: left; } #mobile #main #fullpage .section06 .right .tab li:nth-child(1) { padding-left: 1rem; } #mobile #main #fullpage .section06 .right .tab li:nth-child(2) { padding-right: 3rem; } #mobile #main #fullpage .section06 .right .tab li a {font-size: 1.35rem;} #mobile #main #fullpage .section06 .right .tab li a::before { width: .4rem; height: .4rem; position: initial; vertical-align: middle; margin-right: 1rem; } #mobile #main #fullpage .section06 .right .contents .tag { font-size: 1.3rem; } #mobile #main #fullpage .section06 .right .contents .tag > .date::before { margin: 0 1.3rem; } #mobile #main #fullpage .section06 .right .contents > ul { height: fit-content; position: initial; display: none; } #mobile #main #fullpage .section06 .right .contents > ul.on { display: block; } #mobile #main #fullpage .section06 .right .contents > ul li { padding: 3.5rem 3rem; border: none; border: .1rem solid #cccccc; background: #fff; transition: all ease .1s; } #mobile #main #fullpage .section06 .right .contents > ul li:not(:first-child) { margin-top: 1rem; } #mobile #main #fullpage .section06 .right .contents > ul li:hover { box-shadow: 1px 2px 18px 2px rgba(34, 34, 34, 0.1); border: .2rem solid #005eb8; } #mobile #main #fullpage .section06 .right .contents > ul li .txt p { font-size: 1.9rem; line-height: 1.59; margin: 2rem 0; padding-right: 0; min-height: 60.41px; } #mobile #main #fullpage .section06 .right .contents > ul li .txt a { font-size: 1.2rem; } #mobile #main #fullpage .section06 .right .contents > ul li .txt a::after { width: .65rem; height: 1.05rem; position: relative; background-size: .65rem 1.05rem; margin-left: 3rem; top: .15rem; transform: none; right: unset; transition: all ease .3s; } #mobile #main #fullpage .section06 .right .contents > ul li .txt a:hover::after { transform: none; animation: none; margin-left: 4rem; } #mobile #main #fullpage .section06 .right .contents > ul li .img { display: none; } /* =========================================================================== */ /* ================================ Sub Page =============================== */ /* =========================================================================== */ /* 공통 */ #mobile .title_area { padding: 6rem 2rem 0; text-align: center; } #mobile .title_area .con_tit { font-size: 3.5rem; padding-bottom: 0; } #mobile .title_area .con_tit > span { display: block; margin: 2rem auto; width: 1.5rem; height: 0.75rem; } #mobile .title_area .con_tit > span::after { border-left: .75rem solid transparent; border-right: .75rem solid transparent; border-top: .75rem solid #1d1f1e; top: 0; } #mobile .title_area .sub_tit { font-size: 2.2rem; padding: 3rem 0 1rem; line-height: 1.36; } #mobile .title_area .sub_tit > b { font-size: 2.3rem; } #mobile .title_area .sub_txt { font-size: 1.5rem; line-height: 1.66; padding-top: 3rem; } #mobile .title_area .download_btn { width: 17.5rem; font-size: 1.3rem; margin-top: 4.5rem; margin-bottom: 3.5rem; } #mobile .bus_outline .title_area .download_btn { margin-bottom: 10rem; } #mobile .title_area .download_btn > i { width: 1.45rem; height: 1.5rem; background: url(../images/common/icon_download.png) no-repeat; background-size: contain; margin-left: 2.1rem; } #mobile .title_area .download_btn::after { margin-top: 1.5rem; } #mobile .tab_box { position: relative; width: 100%; height: 6.5rem; display: flex; justify-content: center; } #mobile .tab_box.shadow_align.right::before { opacity: 0; } #mobile .tab_box.shadow_align.left::after { opacity: 0; } #mobile .tab_box.shadow_align::before, #mobile .tab_box.shadow_align::after { transition: all ease .2s; opacity: 1; content: ''; display: inline-block; position: absolute; height: 100%; width: 3rem; pointer-events: none; border-radius: 20px 0 0 20px; background: transparent; right: 3rem; z-index: 1; box-shadow: -15px 0 15px -20px rgb(0 0 0 / 20%) inset; } #mobile .tab_box.shadow_align::before { right: 0; left: 3rem; box-shadow: 15px 0 15px -20px rgb(0 0 0 / 20%) inset; border-radius: 0 20px 20px 0; } #mobile .tab_box > .inner { overflow-x: auto; position: absolute; top:0; height: 6rem; } #mobile .tab_box ul { width: fit-content; position: absolute; left: 0; top: 1rem; } #mobile .tab_box ul li { flex: initial; flex-shrink: 0!important; width: calc(100% / 3); height: 4.5rem; display: table; } #mobile .tab_box ul.tab_slide li { width: calc((100vw - 6rem) / 3); } #mobile .tab_box ul li:not(:last-child) { border-right: 0; } #mobile .tab_box ul li a { font-size: 1.35rem; } #mobile .tab_box ul li.on { box-shadow: 0px 0rem 1rem .2rem rgba(34, 34, 34, 0.2); } #mobile .tab_box ul li.on a { font-weight: 200; } #mobile .tab_box .control { width: 3rem; height:4.5rem; font-size: 0; position: absolute; top: 1rem; display: block; } #mobile .tab_box .prev { background: url(../images/common/arrow_l_13x21.png) no-repeat 50% 50%; background-size: .65rem 1.05rem; left: 0; } #mobile .tab_box .next { background: url(../images/common/arrow_r_13x21.png) no-repeat 50% 50%; background-size: .65rem 1.05rem; right: 0; } /* ================================ Channel =============================== */ /* News */ #mobile .channel .sub_visual { background-image: url(../images/channel/channel_bg_m.jpg); } #mobile .channel .sub_txt { padding-top: 3rem; } #mobile .channel .news { padding-bottom: 10rem; } #mobile .channel .news .news_list .search { width: 100%; max-width: 22.5rem; margin: 3rem auto 0; } #mobile .channel .news .news_list .search .input_search input { width: calc(100% - 2.8rem); height: 3.6rem; font-size: 1.7rem; border: 0; } #mobile .channel .news .news_list .search .input_search a { width: 2.8rem; height: 3.6rem; background-size: 1.8rem; } #mobile .channel .news .news_list .total {font-size: 1.3rem; width: 100%; max-width: 22.5rem; margin: 1.5rem auto 0; padding-left: .8rem; } #mobile .channel .news .news_list ul li { width: 100%; height: 33.1rem; } #mobile .channel .news .news_list ul li:nth-of-type(3n+2) { margin: 0 0 5rem 0; } #mobile .channel .news .news_list ul li:nth-last-child(n+1):nth-last-child(-n+3) { margin-bottom: 5rem; } #mobile .channel .news .news_list ul li:last-child { margin-bottom: 0!important; } #mobile .channel .news .news_list ul li .img { height: 23.25rem; } #mobile .channel .news .news_list ul li .txt_box { padding: 1.6rem 2rem 2rem; } #mobile .channel .news .news_list ul li .txt_box .tit { font-size: 1.5rem; line-height: 1.4; } #mobile .channel .news .news_list ul li .txt_box .date { font-size: 1.2rem; margin-top: 1rem; } #mobile .channel .news .news_list ul li .bdt, #mobile .channel .news .news_list ul li .bdb { height: .2rem; } #mobile .channel .news .news_list ul li .bdl, #mobile .channel .news .news_list ul li .bdr { width: .2rem; } #mobile .channel .news .news_list .btn_box { margin-top: 4.5rem; } #mobile .channel .news .news_list .btn_line { width: 100%; max-width: 22.2rem; height: 5rem; line-height: 5rem; } #mobile .channel .news .news_list .btn_line a { border-radius: 2.5rem; font-size: 1.5rem; padding: 0 3rem 0 4rem; } #mobile .channel .news .news_list .btn_line a span { width: 1.6rem; height: 1.6rem; } #mobile .channel .news .news_list .btn_line a:hover span { background-size: contain; } #mobile .channel .news .news_list .null { font-size: 1.3rem; padding: 12.5rem 0; } /* 상세페이지 공통 */ #mobile .detail_pg { padding-top: 5rem; } #mobile .tb_view { padding: 5rem 2rem; } #mobile .tb_view .tb_row.row_head .tit { font-size: 2.5rem; } #mobile .tb_view .tb_row.row_head .date { font-size: 1.3rem; padding: 2.5rem 0; } #mobile .tb_view .view_box .view_info { min-height: 10rem; padding: 4rem 0 7.5rem; font-size: 1.4rem; line-height: inherit; } #mobile .tb_view .view_box .view_info .blue { font-size: 1.3rem; line-height: 1.4; padding: 1.5rem 0 0; } #mobile .tb_view .view_box .file_box { padding: 0 0 7rem 0; } #mobile .tb_view .view_box .file_box .file_download a { padding: .5rem 0 .5rem 2.2rem; font-size: 1.4rem; background-size: 1.45rem 1.5rem; } #mobile .tb_view .view_nav dl { height: 4.6rem; } #mobile .tb_view .view_nav dl dt { width: 7.5rem; font-size: 1.3rem; } #mobile .tb_view .view_nav dl dd { width: calc(100% - 7.5rem); } #mobile .tb_view .view_nav dl dd a { font-size: 1.25rem; } #mobile .tb_view .btn_box { margin-top: 6.5rem; } #mobile .tb_view .btn_line { width: 100%; max-width: 21.1rem; height: 4.5rem; line-height: 4.3rem; } #mobile .tb_view .btn_line a { border-radius: 2.25rem; font-size: 1.3rem; } /* SNS */ #mobile .channel .sns { padding-top: 5.5rem; padding-bottom: 10rem; overflow: hidden; } #mobile .channel .sns .inner { width: 100%!important; } #mobile .channel .sns .sns_tit { font-size: 2.2rem; margin-bottom: 2.5rem; padding-left: 2rem; } #mobile .channel .sns .list { width: 80vw!important; overflow: visible; padding-bottom: 15rem; } #mobile .channel .sns .sns_lists { width: fit-content!important; flex-wrap: nowrap; padding-left: .5rem; } #mobile .channel .sns .sns_lists li { width: 80vw!important; margin-right: 0; padding: 0 1.5rem; } #mobile .channel .sns .sns_lists li:nth-child(3n) { margin-right: 0; } #mobile .channel .sns .sns_lists li a { height: fit-content; } #mobile .channel .sns .sns_lists .border.bdt, #mobile .channel .sns .sns_lists .border.bdb { height: .2rem; } #mobile .channel .sns .sns_lists .border.bdl, #mobile .channel .sns .sns_lists .border.bdr { width: .2rem; } #mobile .channel .sns .sns_lists:not(.youtube) li:hover a { box-shadow: 4px 7px 10px 0px rgba(4, 0, 0, 0.16); } #mobile .channel .sns .sns_lists .img { height: fit-content; } #mobile .channel .sns .sns_lists.youtube .img { height: fit-content; } #mobile .channel .sns .sns_lists .img .btn_play { width: 5rem; height: 5rem; } #mobile .channel .sns .sns_lists .txt { overflow: hidden; padding: 1.5rem 2rem; } #mobile .channel .sns .sns_lists .txt p { font-size: 1.5rem; } #mobile .channel .sns .swiper-pagination { position: relative; margin-top: 3rem; width:100vw; } #mobile .channel .sns .swiper-pagination-bullet { background: #005eb8; } #mobile .channel .sns .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 .6rem; } #mobile .channel .sns .btn_line { display: none; } #mobile .channel .sns .sns_wrap { position: relative; } #mobile .channel .sns .sns_wrap+.sns_wrap { margin-top: 0; } #mobile .channel .sns .go_sns { float:none; margin-top: 0; margin-bottom: 0; width: calc(100% - 4.5rem); max-width: 29rem; height: 5rem; border-radius: 2.5rem; line-height: 5rem; font-size: 1.5rem; position: absolute; bottom: 6rem; left: 50%; transform: translateX(-50%); } #mobile .channel .sns .go_sns::before { margin-right: 10px; } #mobile .channel .sns .go_yt:before { width: 2rem; height: 1.45rem; } #mobile .channel .sns .go_insta:before { width: 1.55rem; height: 1.55rem; } #mobile .channel .sns .go_fb:before { width: 1.5rem; height: 1.5rem; } #mobile .channel .sns .go_sns b { font-weight: 400; line-height: 5rem; flex-shrink: 0; } #mobile .channel .sns .popup .pop_close { width: 52px; height: 52px; top: -81px; right: initial; left: 50%; margin-top: 0; margin-left: -26px; } #mobile .channel .sns .popup .pop_wrap { width: calc(100% - 40px); } #mobile .channel .sns .popup iframe { height: 59vw; } /* 자료실 */ #mobile .channel .reference { margin-top: 5rem; } #mobile .channel .reference .video_ad { padding: 6rem 2rem; } #mobile .channel .reference .video_ad .tit { font-size: 3rem; letter-spacing: -.075rem; } #mobile .channel .reference .video_ad .video { max-width: 120rem; margin: 3.5rem auto 0; } #mobile .channel .reference .brochure { padding: 6rem 0 10rem; } #mobile .channel .reference .brochure > img { bottom: 0; right: 0; } #mobile .channel .reference .brochure .inner { flex-direction: column; padding: 0 2rem!important; width: 100%!important; } #mobile .channel .reference .brochure .inner .left { width: 100%; } #mobile .channel .reference .brochure .sec_tit { font-size: 3rem; margin-top: 0; } #mobile .channel .reference .brochure .sec_tit::before { width: 4.8rem; height: .4rem; margin-bottom: 1.5rem; } #mobile .channel .reference .brochure .sub { font-size: 1.9rem; margin: 2.5rem 0 1.5rem; } #mobile .channel .reference .brochure p { font-size: 1.4rem; line-height: 1.64; } #mobile .channel .reference .brochure .btn_wrap { flex-direction: column; margin-top: 3rem; } #mobile .channel .reference .brochure .btn_wrap a { width: 17.5rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.3rem; text-indent: .5rem;} #mobile .channel .reference .brochure .btn_wrap a:first-of-type { margin-right: 0; margin-bottom: 1.5rem; } #mobile .channel .reference .brochure .btn_wrap a i { width: 1.5rem; height: 1.5rem; background-size: contain; } #mobile .channel .reference .brochure .img { margin-top: 6rem; } #mobile .channel .reference .brochure .img img { box-shadow: .35rem .6rem 1.3rem 0px rgba(0, 0, 0, 0.35); } /* CI/BI */ #mobile .channel .cibi { margin-top: 5rem; } #mobile .channel .cibi .sec_tit { font-size: 3rem; } #mobile .channel .cibi .blue { font-size: 1.8rem; } #mobile .channel .cibi .download { width: 17.5rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.3rem; text-indent: .5rem; } #mobile .channel .cibi .download i { width: 1.5rem; height: 1.5rem; background-size: contain; } #mobile .channel .cibi .section01 { padding: 5.5rem 0 6rem; } #mobile .channel .cibi .section01 h3 { font-size: 2.5rem; } #mobile .channel .cibi .section01 .line { height: 2.5rem; margin: 2.4rem auto 2rem; } #mobile .channel .cibi .section01 > p { font-size: 1.5rem; line-height: 1.66; letter-spacing: -.075rem; margin: 1.5rem 0 3rem; padding: 0 3rem; } #mobile .channel .cibi .section01 .logo_wrap ul { flex-direction: column; margin-top: 5.5rem; padding: 0 2rem; } #mobile .channel .cibi .section01 .logo_wrap ul li { width: 100%; height: 17rem; } #mobile .channel .cibi .section01 .logo_wrap ul li:last-child { margin-top: 2rem; } #mobile .channel .cibi .section01 .logo_wrap ul li img { max-width: 21rem; } #mobile .channel .cibi .section02 { padding: 5.5rem 2rem 10rem; } #mobile .channel .cibi .section02 .logo_wrap { margin-top: 5rem; } #mobile .channel .cibi .section02 .logo_wrap > div { flex-direction: column; } #mobile .channel .cibi .section02 .logo_wrap > div > div { width: 100%; } #mobile .channel .cibi .section02 .logo_wrap .weve { padding-bottom: 5.5rem; } #mobile .channel .cibi .section02 .logo_wrap .zenith { padding-top: 5.5rem; } #mobile .channel .cibi .section02 .logo_wrap .weve .logo img { max-width: 16.3rem; } #mobile .channel .cibi .section02 .logo_wrap .zenith .logo img { max-width: 22.4rem; } #mobile .channel .cibi .section02 .logo_wrap > div .logo { height: 21rem; margin-right: 0; } #mobile .channel .cibi .section02 .logo_wrap .txt { padding: 0 ; } #mobile .channel .cibi .section02 .logo_wrap .txt .name { font-size: 2.3rem; margin: 2.8rem 0 1.4rem; } #mobile .channel .cibi .section02 .logo_wrap .txt p { font-size: 1.4rem; line-height: 1.57; letter-spacing: -.07rem; margin-bottom: 2rem; } /* ================================ 고객센터 =============================== */ /* 고객문의 */ #mobile .customer .sub_txt { padding-top: 3rem; } #mobile .customer .sub_visual { background-image: url(../images/customer/customer_bg_m.jpg); } #mobile #sub .customer .inner { padding: 0; width: calc(100% - 4rem); } #mobile .customer .customer_inquiry .section1 { padding: 4.5rem 0; margin-top: 6rem; } #mobile .customer .customer_inquiry .section1 .sec_tit { font-size: 1.7rem; } #mobile .customer .customer_inquiry .section1 .cont_box { margin: 2rem 0 1.5rem; } #mobile .customer .customer_inquiry .section1 .cont_box > div { font-size: 1.3rem; line-height: 1.38; padding: 2rem; height: 12.4rem; } #mobile .customer .customer_inquiry .section1 ul { font-size: 1.2rem; line-height: 1.41; margin-bottom: 3.2rem; } #mobile .customer .customer_inquiry .section1 ul li { padding-left: 1rem; } #mobile .customer .customer_inquiry .section1 .checkbox_row p { font-size: 1.6rem; padding-bottom: 2rem; } #mobile .customer .customer_inquiry .section1 .agree_row input[type="checkbox"] + label { padding-left: 8vw; margin-right: 4vw; letter-spacing: -.075rem; } #mobile .customer .customer_inquiry .section1 .agree_row input[type="checkbox"] + label:last-of-type { margin-right: 0; } #mobile .customer .customer_inquiry .section1 .agree_row input[type="checkbox"] + label:before { position: absolute; left: 0; margin-right: 0; } #mobile .customer .customer_inquiry .section2 { padding: 4.5rem 0 10rem; } #mobile .customer .customer_inquiry .section2 p { font-size: 1.3rem; margin-bottom: 1.5rem; } #mobile .customer .customer_inquiry .section2 .row { flex-direction: column; align-items: initial; } #mobile .customer .customer_inquiry .section2 .row.row_short { max-width: 68.2rem; } #mobile .customer .customer_inquiry .section2 .row+.row { margin-top: 2rem; } #mobile .customer .customer_inquiry .section2 .row .tit_cell { font-size: 1.4rem; width: 100%; flex-shrink: 1; margin-bottom: 1rem; } #mobile .customer .customer_inquiry .section2 .row.cont_row .tit_cell { margin-top: 0; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell input::placeholder { opacity: 0; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell span { font-size: 1.3rem; margin: 0 .5rem; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .input_row input { padding: 0 1rem; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .select_row { margin-left: 1rem; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .select_row::after { right: .5rem; border: .45rem solid transparent; } #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .select_row select, #mobile .customer .customer_inquiry .section2 .row .ipt_cell.email_cell .select_row label { padding: 0 1rem; } #mobile .customer .customer_inquiry .section2 .file_row .upload_name { width: calc(100% - 11.1rem); padding: 0; } #mobile .customer .customer_inquiry .section2 .file_row+.info { font-size: 1.3rem; margin-bottom: 0; } #mobile .customer .customer_inquiry .section2 .btn_box { margin-top: 6.4rem; } #mobile .customer .customer_inquiry .section2 .btn_blk { width: 100%; max-width: 21.1rem; height: 4.5rem; line-height: 4.5rem; } #mobile .customer .customer_inquiry .section2 .btn_blk a { border-radius: 2.25rem; } /* 공지사항 */ #mobile .customer .notice { padding-bottom: 10rem; } #mobile .customer .notice .tb_top { margin-top: 3rem; } #mobile .customer .notice .tb_top .search { width: 100%; max-width: 22.5rem; margin: 3rem auto 0; } #mobile .customer .notice .tb_top .search .input_search input { width: calc(100% - 2.8rem); height: 3.6rem; font-size: 1.7rem; border: 0; } #mobile .customer .notice .tb_top .search .input_search a { width: 2.8rem; height: 3.6rem; background-size: 1.8rem; } #mobile .customer .notice .tb_top .total {font-size: 1.3rem; width: 100%; max-width: 22.5rem; margin: 1.5rem auto 0; padding-left: .8rem; } #mobile .customer .notice .tb_box { margin-top: 1.5rem; border-top: .1rem solid #000; } #mobile .customer .notice .tb_box .tb_row { display: block; width: 100%;} #mobile .customer .notice .tb_box .tb_row.row_head { display: none; } #mobile .customer .notice .tb_box .tb_row.row_body { padding: 2rem 1.5rem; } #mobile .customer .notice .tb_box .tb_row>div { height: auto; line-height: 1; text-align: left; } #mobile .customer .notice .tb_box .tb_row.row_body .num { display: none; } #mobile .customer .notice .tb_box .tb_row.row_body .tit a { font-size: 1.3rem; padding-left: 0; -webkit-line-clamp: 2; white-space: initial; -webkit-box-orient: vertical; display: -webkit-box; line-height: 1.3; } #mobile .customer .notice .tb_box .tb_row.row_body .tit { display: block; width: 100%; } #mobile .customer .notice .tb_box .tb_row.row_body .date { display: inline-block; width: 100%; font-size: 1.1rem; margin-top: .8rem; } #mobile .customer .notice .tb_box .tb_row.row_body .date b { display: inline-block; font-size: 1rem; font-weight: 400; padding-right: .8rem; } #mobile .customer .notice .tb_box .tb_row.null { font-size: 1.3rem; padding: 12.5rem 0; } #mobile .customer .notice .tb_box .tb_row.none { display: none; } /* 사이버 감사실 */ #mobile .customer .pb0 .guide { max-width: 100%; margin: 3rem auto 2rem; padding: 3.5rem 2rem; } #mobile .customer .pb0 .guide dt { font-size: 1.7rem; padding-bottom: 1.5rem; } #mobile .customer .pb0 .guide dd { font-size: 1.3rem; white-space: normal; line-height: 1.6; display: flex; } #mobile .customer .pb0 .guide dd i { display: inline-block; padding-right: .2rem; } #mobile .customer .btn_wrap { flex-direction: column; margin-top: 2.5rem; padding-bottom: 6.5rem; } #mobile .customer .btn_wrap span { padding-bottom: 1.5rem; font-size: 1.2rem; line-height: 1.4; } #mobile .customer .btn_wrap a { width: 100%; max-width: 25rem; height: 7.5rem; border-radius: 3.75rem; font-size: 1.5rem; } #mobile .customer .btn_wrap a:first-of-type { margin-right: 0; margin-bottom: 2rem; } #mobile .customer .btn_wrap a:first-of-type .icon { width: 3.7rem; height: 3.25rem; } #mobile .customer .btn_wrap a:first-of-type .txt > div:last-child { font-size: 1.8rem; } #mobile .customer .btn_wrap a:last-of-type .icon { width: 5rem; height: 3.25rem; } #mobile .customer .btn_wrap a:last-of-type:hover .icon { width: 5rem; height: 3.25rem; background-size: contain; } #mobile .customer .cyber_audit { padding: 0 0 10rem 0; } #mobile .customer .cyber_audit .section1 { background: linear-gradient(to bottom, #f9f9f9, #f9f9f9 42.4rem, #fff 42.5rem, #fff 100% ); } #mobile .customer .cyber_audit section .inner { background: transparent; } #mobile .customer .cyber_audit h2 { font-size: 2.4rem; padding: 8rem 0 0; } #mobile .customer .cyber_audit h3 { font-size: 2.2rem; padding: 6rem 0 3.5rem; } #mobile .customer .cyber_audit .cont ul li { width: calc(100% / 2); height: 12.5rem; border-bottom: 0; } #mobile .customer .cyber_audit .cont ul li:not(:nth-child(3n)) { border-right: 1px solid #e8e8e8; } #mobile .customer .cyber_audit .cont ul li:nth-child(2n) { border-left: 0; } #mobile .customer .cyber_audit .cont ul li:nth-last-child(n+1):nth-last-child(-n+2) { border-bottom: 1px solid #e8e8e8; } #mobile .customer .cyber_audit .section1 .cont ul, .customer .cyber_audit .section2 .cont ul { padding-bottom: 6rem; background: #fff; } #mobile .customer .cyber_audit .section1 .cont ul li:nth-last-child(n+1):nth-last-child(-n+3) { border-top: 1px solid #e8e8e8; } #mobile .customer .cyber_audit .section3 .cont ul { flex-wrap: wrap; } #mobile .customer .cyber_audit .section3 .cont ul li { width: calc(100% / 2); } #mobile .customer .cyber_audit .section1 ul li:nth-child(1) .icon img { width: 3.4rem; height: 3.55rem; } #mobile .customer .cyber_audit .section1 ul li:nth-child(2) .icon img { width: 3.2rem; height: 3.6rem; } #mobile .customer .cyber_audit .section1 ul li:nth-child(3) .icon img { width: 3.5rem; height: 3.55rem; } #mobile .customer .cyber_audit .section1 ul li:nth-child(4) .icon img { width: 4.7rem; height: 3.6rem; } #mobile .customer .cyber_audit .section1 ul li:nth-child(5) .icon img { width: 3.4rem; height: 3.5rem; } #mobile .customer .cyber_audit .section1 ul li:nth-child(6) .icon img { width: 4.65rem; height: 3.6rem; } #mobile .customer .cyber_audit .section2 ul li:nth-child(1) .icon img { width: 3.45rem; height: 3.7rem; } #mobile .customer .cyber_audit .section2 ul li:nth-child(2) .icon img { width: 4.4rem; height: 3.7rem; } #mobile .customer .cyber_audit .section2 ul li:nth-child(3) .icon img { width: 4.15rem; height: 3.55rem; } #mobile .customer .cyber_audit .section3 ul li:nth-child(1) .icon img { width: 4.2rem; height: 3.5rem; } #mobile .customer .cyber_audit .section3 ul li:nth-child(2) .icon img { width: 3.55rem; height: 3.55rem; } #mobile .customer .cyber_audit .section3 ul li:nth-child(3) .icon img { width: 3rem; height: 3.6rem; } #mobile .customer .cyber_audit .section3 ul li:nth-child(4) .icon img { width: 3.5rem; height: 3.5rem; } #mobile .customer .cyber_audit .cont ul li .tit { font-size: 1.4rem; margin-top: 1.2rem; } #mobile .customer .cyber_audit .cont ul li a { width: 11rem; height: 3rem; border-radius: 1.5rem; font-size: 1.2rem; } #mobile .customer .cyber_audit .cont ul li a span { width: 1rem; height: 1rem; background-size: auto; } #mobile .customer .cyber_audit .cont ul li:hover { box-shadow: 3px 3px .45rem 0px rgba(0, 0, 0, 0.23);} #mobile .customer .cyber_audit .cont ul li:hover .tit { font-size: 1.7rem; } #mobile .customer .cyber_audit .cont ul li:hover a { margin-top: 1.25rem; } /* 제보하기 */ #mobile .customer .cyber_report .section1 { padding: 4.5rem 0; margin-top: 6rem; } #mobile .customer .cyber_report .section1 .sec_tit { font-size: 1.7rem; } #mobile .customer .cyber_report .section1 .cont_box { margin: 2rem 0 1.5rem; } #mobile .customer .cyber_report .section1 .cont_box > div { font-size: 1.3rem; line-height: 1.38; padding: 2rem; height: 12.4rem; } #mobile .customer .cyber_report .section1 ul { font-size: 1.2rem; line-height: 1.41; margin-bottom: 3.2rem; } #mobile .customer .cyber_report .section1 ul li { padding-left: 1rem; } #mobile .customer .cyber_report .section1 .checkbox_row p { font-size: 1.6rem; padding-bottom: 2rem; } #mobile .customer .cyber_report .section1 .agree_row input[type="checkbox"] + label { padding-left: 8vw; margin-right: 4vw; letter-spacing: -.075rem; } #mobile .customer .cyber_report .section1 .agree_row input[type="checkbox"] + label:last-of-type { margin-right: 0; } #mobile .customer .cyber_report .section1 .agree_row input[type="checkbox"] + label:before { position: absolute; left: 0; margin-right: 0; } #mobile .customer .cyber_report .section2 { padding: 4.5rem 0 10rem; } #mobile .customer .cyber_report .section2 p { font-size: 1.3rem; margin-bottom: 1.5rem; } #mobile .customer .cyber_report .section2 .row { flex-direction: column; align-items: initial; } #mobile .customer .cyber_report .section2 .row+.row { margin-top: 2rem; } #mobile .customer .cyber_report .section2 .row .tit_cell { font-size: 1.4rem; width: 100%; flex-shrink: 1; margin-bottom: 1rem; } #mobile .customer .cyber_report .section2 .row .ipt_cell { width: 100%; } #mobile .customer .cyber_report .section2 .row.alignTop .tit_cell { margin-top: 0; } #mobile .customer .cyber_report .section2 .txt_row { height: auto; font-size: 1.4rem; } #mobile .customer .cyber_report .section2 .row .ipt_cell.name_cell .checkbox_row { width: 100%; margin-left: 0; margin-top: 1.5rem; } #mobile .customer .cyber_report .section2 .row .ipt_cell.name_cell .info { font-size: 1.2rem; line-height: 1.41; margin-top: 0; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell .input_row input::placeholder { opacity: 0; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell span { font-size: 1.3rem; margin: 0 .5rem; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell > .select_row::after { right: .5rem; border: .45rem solid transparent; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell > .select_row select.selectBox { padding: 0; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell > .select_row label { padding: 0 1rem; } #mobile .customer .cyber_report .section2 .row .ipt_cell.email_cell > .select_row { margin-left: 1rem; } #mobile .customer .cyber_report .section2 .file_row .upload_name { width: calc(100% - 11.1rem); padding: 0; } #mobile .customer .cyber_report .section2 .file_row+.info { font-size: 1.3rem; margin-bottom: 0; } #mobile .customer .cyber_report .section2 .btn_box { margin-top: 6.4rem; } #mobile .customer .cyber_report .section2 .btn_blk { width: 100%; max-width: 21.1rem; height: 4.5rem; line-height: 4.5rem; } #mobile .customer .cyber_report .section2 .btn_blk a { border-radius: 2.25rem; } /* ================================ 기술개발 =============================== */ /* 기술역량 */ /* 지식재산권 */ #mobile .technology .tab_box { margin-top: 3.5rem; } #mobile .technology .ipr { padding-top: 4.5rem; padding-bottom: 10rem; } #mobile .technology .ipr .tb_box { border-top: .1rem solid #000; } #mobile .technology .ipr .tb_box .tb_row { display: block; width: 100%; } #mobile .technology .ipr .tb_box .tb_row.row_head { display: none; } #mobile .technology .ipr .tb_box .tb_row.row_body { padding: 1.5rem; } #mobile .technology .ipr .tb_box .tb_row>div { width: 100%; height: auto; line-height: 1.5; text-align: left; border-right: 0; font-size: 1.3rem; } #mobile .technology .ipr .tb_box .tb_row.row_body .ord, #mobile .technology .ipr .tb_box .tb_row.row_body .cert, #mobile .technology .ipr .tb_box .tb_row.row_body .cell01 { display: none; } #mobile .technology .ipr .tb_box .tb_row.row_body .mob { display: inline-block; } #mobile .technology .ipr .tb_box .tb_row.row_body b.mob { padding-right: 1rem; } #mobile .technology .ipr .tb_box .tb_row.row_body .tit { display: block; width: 100%; margin-top: 1rem; padding-left: 0; line-height: 1.53; } #mobile .technology .ipr .tb_box .tb_row .class { width: 39%; max-width: 8rem; display: inline-block; } #mobile .technology .ipr .tb_box .tb_row .num { width: 50%; display: inline-block; } #mobile .technology .ipr .tb_box .tb_row .patent_num { display: inline-block; width: 65%; max-width: 20.7rem; } #mobile .technology .ipr .tb_box .tb_row .date { display: inline-block; width: 48%; } #mobile .technology .ipr .tb_box .tb_row .download a { width: 1.15rem; height: 1.2rem; } #mobile .technology .ipr .tb_box .tb_row.row_body .cell02, #mobile .technology .ipr .tb_box .tb_row.row_body .cell03, #mobile .technology .ipr .tb_box .tb_row.row_body .cell04, #mobile .technology .ipr .tb_box .tb_row.row_body .cell05 { display: inline-block; letter-spacing: -.0325rem; } #mobile .technology .ipr .tb_box .tb_row.row_body .cell06, #mobile .technology .ipr .tb_box .tb_row.row_body .cell07 { display: block; padding-left: 0; } #mobile .technology .ipr.ipr02 .tb_box .tb_row { position: relative; } #mobile .technology .ipr.ipr02 .tb_box .tb_row .download { width: 29%; position: absolute; top: 1.5rem; left: calc(65% + 1rem); } #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell02, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell03, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell04, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell05 { width: 100%; } #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell03 { width: 42%; } #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell04 { width: 57%; } } /* responsive */ @media screen and (max-width:380px) { #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell02, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell03, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell04, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell05 { width: 100%; } #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell02, #mobile .technology .ipr.ipr03 .tb_box .tb_row.row_body .cell04 { padding-right: 1rem; } } @media screen and (max-width:359px) { #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell02, #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell03, #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell04, #mobile .technology .ipr.ipr04 .tb_box .tb_row.row_body .cell05 { width: 100%; } } @media screen and (max-width:330px) { #mobile .technology .ipr .tb_box .tb_row .patent_num { width: 100%; } #mobile .technology .ipr.ipr02 .tb_box .tb_row .download { width: 100%; position: initial; padding-top: 1rem; } #mobile .channel .sns .go_sns { padding: 0 5vw; } } @media screen and (max-width:305px) { #mobile .technology .ipr .tb_box .tb_row .class, #mobile .technology .ipr .tb_box .tb_row .num { width: 100%; } } /* ================================ 사업영역 =============================== */ /* 마스터피스 - 개요 */ /* 공통 */ #mobile #sub .masterpiece .inner { width: 100%; padding: 0 2rem ; } #mobile .masterpiece { overflow: hidden; } #mobile .masterpiece .sub_visual { height: calc(100vh - 2.5rem); } #mobile .masterpiece .masterpiece_menu { padding: 0 1rem; width: 100%; height: 5rem; bottom: -2.5rem; background: transparent; z-index: 999; } #mobile .masterpiece .masterpiece_menu ul { flex-direction: column; width: calc(100% - 2rem); position: absolute; max-height: 5rem; overflow: hidden; transition: max-height .6s ease; } #mobile .masterpiece .masterpiece_menu ul.open { max-height: 20rem; } #mobile .masterpiece .masterpiece_menu ul li { padding-left: 2.5rem; height: 5rem; background: rgba(0,0,0,.8); } #mobile .masterpiece .masterpiece_menu ul li.on::after { content:''; display: inline-block; width: .7rem; height: .35rem; background: url(../images/common/select_arrow_w.png) no-repeat 50% 50%; background-size: contain; position: absolute; top: 2.3rem; right: 2.5rem; } #mobile .masterpiece .masterpiece_menu ul.open li.on::after { transform: rotate(180deg); } #mobile .masterpiece .masterpiece_menu ul li.mb { display: block; } #mobile .masterpiece .masterpiece_menu ul li.on { background: #005eb8; order: -1; } #mobile .masterpiece .masterpiece_menu ul li a { font-size: 1.5rem; height: 5rem; } #mobile .masterpiece .masterpiece_menu ul li a b { margin-right: 1.2rem; } #mobile .masterpiece .outline { padding-top: 6.5rem; } #mobile .masterpiece .outline .interviewBtn { width: calc(100% - 10rem); max-width: 30rem; height: 6.5rem; border-radius: 3.2rem; bottom: 10rem; right: initial; left: 50%; transform: translateX(-50%); } #mobile .masterpiece .outline .interviewBtn .icon { flex-shrink: 0; width: 3.35rem; height: 3.15rem; background: url(../images/business/icon_interview_m.png) no-repeat 50% 50%; background-size: contain; margin-right: 2rem; } #mobile .masterpiece .outline .interviewBtn p { font-size: 1.2rem; font-weight: 350; } #mobile .masterpiece .outline .interviewBtn span { font-size: 1.5rem; } #mobile .masterpiece .outline .section0 .tit_area .tit_blue { font-size: 1.4rem; } #mobile .masterpiece .outline .section0 .tit_area h2 { font-size: 4rem; margin: 1rem 0 1.5rem; } #mobile .masterpiece .outline .section0 .tit_area p { font-size: 1.5rem; line-height: 1.5; } #mobile .masterpiece .outline .section0 .cont_area { padding: 0; margin: 3rem 0 4.5rem; } #mobile .masterpiece .outline .section0 .cont_area ul { flex-direction: column; align-items: flex-start; } #mobile .masterpiece .outline .section0 .cont_area ul li { padding: 1.5rem 0 1rem; width: 100%; } #mobile .masterpiece .outline .section0 .cont_area ul li:first-child { padding-left: 0; } #mobile .masterpiece .outline .section0 .cont_area ul li::after { width: 100%; height: .1rem; left:0; bottom:0; } #mobile .masterpiece .outline .section0 .cont_area ul li:last-child::after { display: block; } #mobile .masterpiece .outline .section0 .cont_area .tit_blue { font-size: 1.4rem; } #mobile .masterpiece .outline .section0 .cont_area p { font-size: 1.4rem; margin-top: .5rem; } #mobile .masterpiece .outline .section { flex-direction: column; } #mobile .masterpiece .outline section .line { display: none; } #mobile .masterpiece .outline section p { font-size: 1.5rem; font-weight: 150; line-height: 1.46; letter-spacing: -.03rem; } #mobile .masterpiece .outline section h3 { font-size: 3rem; margin-bottom: 2rem; letter-spacing: -.06rem; white-space: normal; } #mobile .masterpiece .outline section .left h3, #mobile .masterpiece .outline section .left p, #mobile .masterpiece .outline section .right h3, #mobile .masterpiece .outline section .right p { padding: 0; } #mobile .masterpiece .outline section .img { width: calc(100% + 2rem); margin-left: -1rem; } #mobile .masterpiece .outline section .img+span { font-size: 1.3rem; margin-top: 1rem; margin-left: -1rem; } #mobile .masterpiece .outline section .video { width: calc(100% + 2rem); margin-left: -1rem; } /* 해운대 */ #mobile .mp01 .sub_visual { background-image: url(../images/business/masterpiece01_outline_visual.jpg); background-size: cover; } #mobile .mp01 .outline .bg-blue { padding: 5.5rem 0; } #mobile .mp01 .outline section h3 span::before { height: 0.8rem; } #mobile .mp01 .outline .section0 { margin-bottom: 4.5rem; } #mobile .mp01 .outline .section1 { margin-bottom: 5.5rem; } #mobile .mp01 .outline .section1 .img { margin-top: 4.5rem; } #mobile .mp01 .outline .section2 { flex-direction: column-reverse; } #mobile .mp01 .outline .section2 .right { padding-right: 0; padding-left: 0; margin-bottom: 4.5rem; } #mobile .mp01 .outline .section3 { margin-top: 4.5rem; } #mobile .mp01 .outline .section3 .left { padding-left: 0; padding-right: 0; } #mobile .mp01 .outline .section3 .right { margin-right: 0; margin-top: 4.5rem; } #mobile .mp01 .outline .section4 { margin-top: 5.5rem; } #mobile .mp01 .outline .section5 { margin: 4.5rem 0 5.5rem; } #mobile .mp01 .outline .section5 .left, #mobile .mp01 .outline .section5 .right { width: 100%; } #mobile .mp01 .outline .section6 { margin: 5.5rem 0; } #mobile .mp01 .outline .section6 .cont_area { flex-direction: column; } #mobile .mp01 .outline .section6 .cont_area p { font-size: 1.5rem; line-height: 1.46; padding: 0; text-align: center; } #mobile .mp01 .outline .section6 .cont_area p:last-child { margin-top: 2rem; } #mobile .mp01 .outline .section7 { padding-bottom: 10rem; } /* 분당두산타워 */ #mobile .mp02 .sub_visual { background-image: url(../images/business/masterpiece02_outline_visual.jpg); } #mobile .mp02 .outline .section1 { margin: 4.5rem 0; } #mobile .mp02 .outline .section1 .right { padding-left: 0; margin-top: 4.5rem; } #mobile .mp02 .outline .section2 { margin: 4.5rem 0; } #mobile .mp02 .outline .section2 h3 { padding-left: 0; } #mobile .mp02 .outline .section2 h3::after { display: none; } #mobile .mp02 .outline .section2 p { padding-left: 0; } #mobile .mp02 .outline .section3 { align-items: flex-start; } #mobile .mp02 .outline .section3 .left p { margin-top: 4.5rem; } #mobile .mp02 .outline .section3 .right { margin-top: 0; } #mobile .mp02 .outline .section3 .right .img { display: none; } #mobile .mp02 .outline .section3 .right p { margin-top: 2rem; } #mobile .mp02 .outline .bg-green { padding: 5.5rem 0; margin-top: 5.5rem; background: #f2faf6; } #mobile .mp02 .outline .section5 { margin-top: 4.5rem; } #mobile .mp02 .outline .section5 .left { width: 100%; padding-left: 0; } #mobile .mp02 .outline .section5 .right { width: 100%; padding-left: 0; } #mobile .mp02 .outline .section6 { margin-top: 0; padding-bottom: 0; } #mobile .mp02 .outline .section6 p { position: relative; top: 0; left: 0; padding-left: 0rem; order: 1; margin-bottom: 4.5rem; } #mobile .mp02 .outline .section6 .left { order: 2; margin-bottom: 2.5rem; } #mobile .mp02 .outline .section6 .right { padding-left: 0; order: 3; } @media screen and (max-width:1720px) { .civil_engineer .outline .section .graybx { width: 4vw; /* background: transparent; */ } .civil_engineer .section_nav.on { left: 1.35vw; } } @media screen and (max-width:1480px) { .civil_engineer .outline .section .graybx { background: transparent; } } #mobile .mp02 .outline .section7 { padding-top: 5.5rem; } #mobile .mp02 .outline .section7 h3 { margin-bottom: 2rem; } #mobile .mp02 .outline .section8 { padding: 5.5rem 0 10rem; } /* 신분당선 */ #mobile .mp03 .sub_visual { background-image: url(../images/business/masterpiece03_outline_visual.jpg); } #mobile .mp03 .outline .bg-green { padding: 5.5rem 0 10rem; } #mobile .mp03 .outline .bg-gray { padding: 28.5rem 0 5.5rem; margin-top: -24rem; } #mobile .mp03 .outline .section1 h3 { padding-left: 0; margin-bottom: 2rem; } #mobile .mp03 .outline .section1 h3::after { display: none; } #mobile .mp03 .outline .section1 .cont_area { flex-direction: column; padding-left: 0; margin-top: 0; } #mobile .mp03 .outline .section1 p:first-of-type { order: 0; padding-left: 0; } #mobile .mp03 .outline .section1 p:last-of-type { order: 2; padding-left: 0; margin-top: 4.5rem; } #mobile .mp03 .outline .section1 ul { flex-direction: column; margin-top: 4.5rem; } #mobile .mp03 .outline .section1 ul li+li { margin-top: 2.5rem; } #mobile .mp03 .outline .section3 { margin: 5.5rem 0 4.5rem; } #mobile .mp03 .outline .section3 .right { margin-top: 4.5rem; width: 100%; } #mobile .mp03 .outline .section4 { flex-direction: column-reverse; } #mobile .mp03 .outline .section4 .left { margin-top: 4.5rem; width: 100%; } #mobile .mp03 .outline .section5 { margin: 4.5rem 0 5.5rem; } #mobile .mp03 .outline .section6 { flex-direction: column-reverse; } #mobile .mp03 .outline .section6 .left { margin-top: 4.5rem; } #mobile .mp03 .outline .section7 { margin: 4.5rem 0 5.5rem; } #mobile .mp03 .outline .section7 .right { margin-top: 4.5rem; padding-left: 0; } /* 마스터피스 - 인터뷰 - 공통 */ #mobile .interview .sub_visual h1 { transform: translateY(calc(-50% + -2.3rem)); font-size: 4rem; line-height: 1.3; } #mobile .interview .sub_visual h1 span { font-size: 2.4rem; margin-top: 2rem; } #mobile .interview .sub_visual ul { width: calc(100% - 2rem); height: fit-content; bottom: -15.25rem; flex-direction: column; box-shadow: .25rem .45rem 2.15rem 0 rgba(0, 0, 0, .17); } #mobile .interview .sub_visual ul li { width: 100%; } #mobile .interview .sub_visual ul li:first-child { height: 15rem; } #mobile .interview .sub_visual ul li:first-child::after { backdrop-filter: blur(.2rem); background: rgba(0, 0, 0, .4); } #mobile .interview .sub_visual ul li:first-child p { position: absolute; } #mobile .interview .sub_visual ul li:first-child p em { font-size: 2.3rem; } #mobile .interview .sub_visual ul li:last-child p { font-size: 1.8rem; line-height: 1; position: relative; left: 2.5rem; right: unset; top: unset; bottom: unset; margin: 0; padding: 2.5rem 0 2.9rem; } #mobile .interview .sub_visual ul li:last-child p span { font-size: 1.5rem; display: inline-block; } #mobile .interview .sub_visual ul li:last-child p::before { width: 2.25rem; height: .3rem; left: .3rem; margin-bottom: 1rem; } #mobile .interview .contents { padding: 20rem 0 10rem; } #mobile .interview .contents:before { display: none; } #mobile .interview .contents .wrap { padding: 0 2rem; display: flex; flex-direction: column; } #mobile .interview .contents .wrap .img { width: 100%; margin-top: 0; margin-bottom: 4.5rem; padding-bottom: 0; } #mobile .interview .contents .wrap .img img { width: 100%; transition: all ease 1s; } #mobile .interview .contents .wrap .img:hover img { transform: scale(1.1); } #mobile .interview .contents .wrap .dl50, #mobile .interview .contents .wrap .dl100 { width: 100%; } #mobile .interview .contents .wrap dl { padding-left: 0; margin-bottom: 3.5rem; } #mobile .interview .contents .wrap dl dt { font-size: 1.8rem; white-space: normal; line-height: 1.3; } #mobile .interview .contents .wrap dl dt span { display: block; position: relative; line-height: 1; font-size: 2.1rem; margin-bottom: .8rem; } #mobile .interview .contents .wrap dl dd { font-size: 1.5rem; margin-top: .8rem; line-height: 1.5; } #mobile .interview .contents .wrap dl dd span { font-size: 1.3rem; margin-top: .5rem; line-height: 1.3; } #mobile .interview .contents .wrap a { order: 10; width: 22.2rem; height: 5rem; line-height: .4; margin-top: 2.5rem; padding: 2rem 2.75rem; font-size: 1.5rem; border-radius: 2.5rem; } #mobile .interview .contents .wrap a:before { content: ''; background: url(../images/common/interview_arrow_9x15.png) 50% 50% no-repeat; background-size: cover; width: .9rem; height: 1.5rem; left: 3rem; transform: translateY(-.4rem); } #mobile .interview .contents .wrap a:hover:before { content: ''; background: url(../images/common/interview_arrow_9x15_w.png) 50% 50% no-repeat; background-size: cover; animation: infinite 1.2s interviewArrow_m; } /* 마스터피스 - 인터뷰 - 해운대두산위브더제니스 */ #mobile .haeundae .sub_visual { background-image: url(../images/business/haeundae_visual_m.jpg); } #mobile .haeundae .sub_visual ul li:first-child { background: url(../images/business/haeundae_visual_s.png) 100% 50% no-repeat; background-size: cover; } #mobile .haeundae .sub_visual ul li:first-child::after { background: rgba(0, 0, 0, 0); } #mobile .haeundae .sub_visual ul li:first-child p em:nth-of-type(2) { padding-left: 4rem; } #mobile .haeundae .sub_visual ul li:first-child p em:nth-of-type(3) { padding-left: 0; } #mobile .haeundae .sub_visual ul li:first-child p em:nth-of-type(4) { padding-left: 7.75rem; } #mobile .haeundae .contents .wrap dl:nth-of-type(1), #mobile .haeundae .contents .wrap dl:nth-of-type(2) { order: -1; } #mobile .haeundae .contents .wrap .img:nth-of-type(1), #mobile .haeundae .contents .wrap dl:nth-of-type(3), #mobile .haeundae .contents .wrap dl:nth-of-type(4), #mobile .haeundae .contents .wrap dl:nth-of-type(5) { order: 0; } #mobile .haeundae .contents .wrap .img:nth-of-type(2) { order: 1; } #mobile .haeundae .contents .wrap dl:nth-of-type(6), #mobile .haeundae .contents .wrap dl:nth-of-type(7), #mobile .haeundae .contents .wrap dl:nth-of-type(8), #mobile .haeundae .contents .wrap dl:nth-of-type(9), #mobile .haeundae .contents .wrap dl:nth-of-type(10) { order: 2; } #mobile .haeundae .contents .wrap dl.custom { margin-bottom: 3.5rem; } /* 마스터피스 - 인터뷰 - 분당두산타워 */ #mobile .bundang .sub_visual { background-image: url(../images/business/bundang_visual.jpg); } #mobile .bundang .sub_visual ul li:first-child { background: url(../images/business/bundang_visual.jpg) 15% 5% no-repeat; background-size: 210%; } #mobile .bundang .sub_visual ul li:first-child p { text-align: center; } #mobile .bundang .sub_visual ul li:first-child p em:last-child { padding-left: 0; } #mobile .bundang .contents .wrap dl:nth-of-type(1), #mobile .bundang .contents .wrap dl:nth-of-type(2), #mobile .bundang .contents .wrap dl:nth-of-type(3) { order: -1; } #mobile .bundang .contents .wrap .img:nth-of-type(1), #mobile .bundang .contents .wrap dl:nth-of-type(4), #mobile .bundang .contents .wrap dl:nth-of-type(5), #mobile .bundang .contents .wrap dl:nth-of-type(6), #mobile .bundang .contents .wrap dl:nth-of-type(7) { order: 0; } #mobile .bundang .contents .wrap .img:nth-of-type(2) { order: 1; } #mobile .bundang .contents .wrap dl:nth-of-type(8), #mobile .bundang .contents .wrap dl:nth-of-type(9), #mobile .bundang .contents .wrap dl:nth-of-type(10), #mobile .bundang .contents .wrap dl:nth-of-type(11) { order: 2; } /* 마스터피스 - 인터뷰 - 신분당선 */ #mobile .shinbundangline .sub_visual { background-image: url(../images/business/shinbundangline_visual.jpg); } #mobile .shinbundangline .sub_visual ul li:first-child { background: url(../images/business/shinbundangline_visual_s.png) 40% 0% no-repeat; background-size: cover; } #mobile .shinbundangline .sub_visual ul li:first-child p em:nth-of-type(2) { padding-left: 3rem; } #mobile .shinbundangline .sub_visual ul li:first-child p em:nth-of-type(3) { padding-left: 0; } #mobile .shinbundangline .sub_visual ul li:first-child p em:nth-of-type(4) { padding-left: 7.4rem; } #mobile .shinbundangline .contents .wrap dl:nth-of-type(1), #mobile .shinbundangline .contents .wrap dl:nth-of-type(2) { order: -1; } #mobile .shinbundangline .contents .wrap .img:nth-of-type(1) { order: 0; } #mobile .shinbundangline .contents .wrap dl:nth-of-type(3), #mobile .shinbundangline .contents .wrap dl:nth-of-type(4), #mobile .shinbundangline .contents .wrap dl:nth-of-type(5), #mobile .shinbundangline .contents .wrap dl:nth-of-type(6), #mobile .shinbundangline .contents .wrap dl:nth-of-type(7), #mobile .shinbundangline .contents .wrap .img:nth-of-type(2) { order: 1; } #mobile .shinbundangline .contents .wrap dl:nth-of-type(8), #mobile .shinbundangline .contents .wrap dl:nth-of-type(9), #mobile .shinbundangline .contents .wrap dl:nth-of-type(10), #mobile .shinbundangline .contents .wrap dl:nth-of-type(11) { order: 2; } /* 사업소개(개요) */ #mobile .civil_engineer .sub_visual { background-image: url(../images/business/business_bg_m.jpg); background-size: cover; } #mobile .civil_engineer .tab_box { position: relative; padding: 0; } #mobile .civil_engineer.bus_outline .title_area { position: relative; } #mobile .civil_engineer.bus_outline .title_area::before { content: ''; width: 100%; height: 6.5rem; bottom: -11rem; position: absolute; background: #f9f9f9; left: 0; padding: 4rem 0; } #mobile .civil_engineer .section_nav { display: none; } #mobile .civil_engineer .outline .section { padding: 5.5rem 0; } #mobile .civil_engineer .outline .section01 { padding-top: 7.5rem; } #mobile .civil_engineer .outline .section04 { padding-bottom: 10rem; } #mobile .civil_engineer .outline .section .graybx { display: none; } #mobile .civil_engineer .outline .section .inner { padding: 0!important; } #mobile .civil_engineer .outline .section .swiper, #mobile .civil_engineer .outline .section .swiper-slide { width: 100%; } #mobile .civil_engineer .outline .section .swiper { box-shadow: 4px 6px 15px 0px rgba(79, 79, 79, 0.5); } #mobile .civil_engineer .outline .section .swiper .img { height: 53vw; } #mobile .civil_engineer .outline .section .swiper .img img { width: 100%; height: 100%; object-fit: cover; } #mobile .civil_engineer .outline .section .tit { font-size: 2.4rem; padding: 3rem 0 1rem; } #mobile .civil_engineer .outline .section p { flex-direction: column; } #mobile .civil_engineer .outline .section p > span { font-size: 1.5rem; line-height: 1.73; } #mobile .civil_engineer .outline .section p .btn { width: fit-content; height: 4.5rem; margin-top: 3.5rem; font-size: 1.3rem; padding: 0 3rem 0 2rem; } #mobile .civil_engineer .outline .section p .btn > i { width: 1.5rem; margin-left: 3.5rem; } #mobile .civil_engineer .outline .section .swiper .swiper-nav { width: 15.5rem; bottom: 1.5rem; right: 2rem; align-items: center!important; } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div { font-size: 1.05rem; } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div i { width: .65rem; height: 1.05rem; display: inline-block; } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div img { width: 100%; height: 100%; object-fit: contain; } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div:first-of-type i { margin: 0 1.5rem 0 0; /* background: url(../images/business/bus03_outline_arrow_l.png) no-repeat 50% 50%; background-size: contain; */ } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div:last-of-type i { margin: 0 0 0 1.5rem; /* background: url(../images/business/bus03_outline_arrow_r.png) no-repeat 50% 50%; background-size: contain; */ } #mobile .civil_engineer .outline .section .swiper .swiper-nav > div:first-of-type::after { height: 1rem; margin-left: 1rem; } /* 사업실적 리스트 */ #mobile .civil_engineer .top { display: flex; flex-direction: column-reverse; padding-top: 6.5rem; } #mobile .civil_engineer .search { padding-top: 2.5rem; } #mobile .civil_engineer .search .input_search { width: 100%; max-width: 22.5rem; } #mobile .civil_engineer .search .input_search input { width: calc(100% - 2.8rem); height: 3.5rem; border: 0; } #mobile .civil_engineer .search .input_search a { width: 2.8rem; height: 3.5rem; background-size: 1.8rem 1.75rem; } #mobile .civil_engineer .total { font-size: 1.3rem; } #mobile .civil_engineer .total > span { width: 100%; text-align: center; padding: 1.5rem 0 0 0; } #mobile .civil_engineer .business_lists { padding-top: 1.5rem; } #mobile .civil_engineer .business_lists ul { width: 100%; } #mobile .civil_engineer .business_lists ul > li { width: 100%; max-width: 100%; margin-bottom: 5rem; } #mobile .civil_engineer .business_lists ul > li:nth-child(3n-1) { margin: 0 0 5rem 0; } #mobile .civil_engineer .business_lists .list_img .list_hover .name { font-size: 2rem; } #mobile .civil_engineer .business_lists .list_img .list_hover .name::before { height: .45rem; margin: 0 auto 3.5rem; } #mobile .civil_engineer .business_lists ul > li:hover .list_img .list_hover .name::before { width: 5rem; } #mobile .civil_engineer .business_lists .list_img .list_hover .date { font-size: 1.6rem; } #mobile .civil_engineer .business_lists .view_more { width: 13.25rem; height: 3.8rem; line-height: 3.8rem; border-radius: 1.875rem; font-size: 1.2rem; padding: 0 1.8rem; margin: 3.5rem auto 0; } #mobile .civil_engineer .business_lists .view_more::after { width: 1rem; height: 1rem; background-size: contain; margin-left: 1.5rem; margin-top: -.5rem; } #mobile .civil_engineer .business_lists .list_cont .name { font-size: 1.7rem; padding: 2rem 0 .8rem; } #mobile .civil_engineer .business_lists .list_cont .date { font-size: 1.4rem; } #mobile .civil_engineer .business_lists .list_more { max-width: 22.2rem; width: 100%; height: 5rem; line-height: 5rem; border-radius: 2.5rem; font-size: 1.5rem; padding-left: 4rem; margin: 0 auto 10rem; } #mobile .civil_engineer .business_lists .list_more::after { width: 1.6rem; height: 1.6rem; background-size: contain; right: 3rem; } /* 사업실적 리스트 팝업 */ #mobile .card_popup .popup_inner { width: calc(100% - 2rem);height: auto;min-height: initial; } #mobile .card_popup .popup_inner .pop_close { width: 5.25rem; height: 5.2rem; top: -1.5rem; left: 50%; right: initial; transform: translate(-50%,-100%); } #mobile .card_popup .popup_inner .pop_cont { max-width: 100%; width: 100%; flex-direction: column; height: 125vw; overflow-y: scroll; background: #fff; } #mobile .card_popup .popup_inner .pop_cont .inner_box { width: 100%; height: fit-content; min-height: 125vw; padding: 1rem; background: #f5f5f5; } #mobile .card_popup .popup_inner .pop_cont .inner_box .inner_slider .list { height: fit-content; } #mobile .card_popup .popup_inner .pop_cont .inner_box .inner_slider .list img { width: 100%; object-fit: contain; } #mobile .card_popup .popup_inner .pop_cont .txt_box { width: 100%; padding: 3rem 1rem 4rem 2rem; overflow-y: initial; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_tit { font-size: 2.5rem; margin-bottom: 1rem; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_tit:before { width: 4.8rem; height: .4rem; margin-bottom: 1.8rem; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_des { font-size: 1.3rem; line-height: 1.69; height: 10.8rem; overflow-y: auto; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_mark { flex-wrap: wrap; padding: 3rem 0; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_mark li { width: 50%; margin-right: 0; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_mark li img { width: 3.75rem; height: 3.75rem; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_mark li .txt { margin: 1rem 0 0 2rem; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_tb th { font-size: 1.25rem; } #mobile .card_popup .popup_inner .pop_cont .txt_box .card_tb td { font-size: 1.25rem; line-height: 1.48; padding: 1rem 0 1rem 2rem; } #mobile .card_popup .popup_inner .pop_cont .inner_nav { width: calc(100% - 6rem); margin: 3rem auto 0; padding-bottom: 4rem; } #mobile .card_popup .popup_inner .pop_cont .inner_nav .arrow { font-size: 1.2rem; } #mobile .card_popup .popup_inner .pop_cont .inner_nav .arrow:after { width: .8rem; height: .8rem; } #mobile .card_popup .popup_inner .pop_cont .inner_nav .counter_slider { font-size: 1.4rem; } /* ================================ 기술개발 =============================== */ /* 공통 */ #mobile #sub .competence .inner { width: calc(100% - 4rem); } #mobile .technology .sub_visual { background-image: url(../images/technology/tech_bg_m.jpg); background-size: cover; } #mobile .competence .title_area::after { width: 9.5rem; background-size: contain; } #mobile .competence .title_area .sub_tit { font-size: 2rem; line-height: 1.5; padding: 3rem 0 4.5rem; } #mobile .competence .title_area .sub_tit span::after { height: 1rem; } /* 기술역량 */ #mobile .technology .competence { /* padding-bottom: 20rem; */ margin-top: 4rem; } #mobile .technology .competence .love_motion { height: auto; margin-bottom: 4.5rem; margin-top: 3rem; } #mobile .technology .competence .love_motion .love_swiper_wrap { position: relative; width: 100%; height: 7rem; } #mobile .technology .competence .love_motion .love_swiper_wrap.shadow_align.right::before { opacity: 0; } #mobile .technology .competence .love_motion .love_swiper_wrap.shadow_align.left::after { opacity: 0; } #mobile .technology .competence .love_motion .love_swiper_wrap.shadow_align::before, #mobile .technology .competence .love_motion .love_swiper_wrap.shadow_align::after { transition: all ease .2s; opacity: 1; content: ''; display: inline-block; position: absolute; height: 100%; width: 3rem; pointer-events: none; border-radius: 20px 0 0 20px; background: transparent; right: 3rem; z-index: 1; box-shadow: -15px 0 15px -20px rgb(0 0 0 / 20%) inset; } #mobile .technology .competence .love_motion .love_swiper_wrap.shadow_align::before { right: 0; left: 3rem; box-shadow: 15px 0 15px -20px rgb(0 0 0 / 20%) inset; border-radius: 0 20px 20px 0; } #mobile .technology .competence .love_motion .love_swiper { width: calc(100% - 6rem); height: 7.5rem; margin: 0 auto; overflow-x: auto; overflow-y: hidden; position: relative; transition: all ease 1s; } #mobile .technology .competence .love_motion .love_swiper::-webkit-scrollbar { height: 2px; } #mobile .technology .competence .love_motion .box { max-width: fit-content!important; width: fit-content!important; height: 7rem; background: transparent; position: absolute; left: 0; top: 0; transition: left .5s ease-out; } #mobile .technology .competence .love_motion .box > li { background: #fff; width: 24vw!important; height: 7rem; border: 0; border-radius: 0; position: initial; opacity: 1; border: 1px solid #e8e8e8; } #mobile .technology .competence .love_motion .box > li:not(:first-child) { margin-left: -.1rem; } #mobile .technology .competence .love_motion .box > li > ul { position: relative; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(1) svg { width: 1.9rem; height: 2.1rem; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(2) svg { width: 2.1rem; height: 2.1rem; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(3) svg { width: 2.2rem; height: 2.2rem; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(4) svg { width: 2.8rem; height: 2.3rem; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(2) { position: absolute; width: 100%; height: 100%; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(2) p { display: none; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(2) a { display: block; width: 100%; height: 100%; top: 0; } #mobile .technology .competence .love_motion .box > li > ul > li:nth-child(2) a::after { display: none; } #mobile .technology .competence .love_motion .box > li > ul > .slogan p { font-size: 1.4rem; padding:0; } #mobile .technology .competence .love_motion .box > li > ul > .slogan p:first-of-type { display: none; } #mobile .technology .competence .love_motion .box > li.four > ul > .slogan p:last-of-type { display: none; } #mobile .technology .competence .love_motion .box > li > ul > li p:not(:first-child) { opacity: 1; position: initial; margin-top: 0.5rem; } #mobile .technology .competence .love_motion .box > li .motion_menu { display: none; } #mobile .technology .competence .love_motion .box > li .motion_menu li p { padding: 0; opacity: 1; } #mobile .technology .competence .love_motion .box > li .motion_menu li:nth-child(2) { display: none; } #mobile .technology .competence .love_motion .box > li .motion_menu li:nth-child(3) p { display: none; } #mobile .technology .competence .love_motion .love { height: 5.7rem; font-size: 9rem; font-weight: 450; color: #005eb8; /* height: 5.5rem; */ text-align: center; position: relative; } #mobile .technology .competence .love_motion .love span { opacity: 1; position: initial; top: initial; bottom: 0; } #mobile .technology .competence .love_motion .love span:first-child { display: none; } #mobile .technology .competence .love_motion .love span:last-child { display: block; height: 5.7rem; padding: 0; } #mobile .technology .competence .love_motion .love em { color: #000; } #mobile .technology .competence .love_motion .line { display: none; } #mobile .technology .competence .love_motion > h2 { font-size: 1.5rem; line-height: 1.5; position: initial; opacity: 1; margin: 2rem auto 4rem; } #mobile .technology .competence .love_motion .box > li:hover { background: #005eb8; } #mobile .technology .competence .love_motion .box > li:hover ul svg, #mobile .technology .competence .love_motion .box > li:hover ul svg .st0 { fill:#fff; } #mobile .technology .competence .love_motion .box > li:hover > ul > li p:not(:first-child) { color: #fff; } #mobile .technology .competence .love_motion .box > li:hover ul .slogan { margin-top: 0; } #mobile .technology .competence .love_motion .box > li:hover ul .slogan p, #mobile .technology .competence .love_motion .box > li:hover ul .slogan p em { color: #fff; font-weight: 350; } #mobile .technology .competence .love_motion .love_swiper_wrap .swiper-btn { display: block; width: 3rem; height: 7rem; top: 0; margin-top: 0; } #mobile .technology .competence .love_motion .love_swiper_wrap .swiper-button-prev { left: 0; background: url(../images/common/arrow_l_13x21.png) no-repeat 50% 50%; background-size: .65rem 1.05rem; } #mobile .technology .competence .love_motion .love_swiper_wrap .swiper-button-next { right: 0; background: url(../images/common/arrow_r_13x21.png) no-repeat 50% 50%; background-size: .65rem 1.05rem; } #mobile .technology .competence .love_motion .love_swiper_wrap .swiper-button-next.swiper-button-disabled, #mobile .technology .competence .love_motion .love_swiper_wrap .swiper-button-prev.swiper-button-disabled { opacity: 1; } #mobile .technology .competence .weve_motion { margin-bottom: 4.5rem; } #mobile .technology .competence .weve_motion .inner { height: 19.7rem!important; background-image: radial-gradient(rgba(15, 178, 138,.4) 20%, transparent 0); background-size: 3px 3px; } #mobile .technology .competence .weve_motion .weve span { font-size: 5.4rem; letter-spacing: -.324rem; } #mobile .technology .competence .weve_motion .transform-box { width: 1.2rem; height: 1.2rem; transform: rotate(31.8deg) translate(-1rem, 1.5rem); } #mobile .technology .competence .weve_motion .transform-box .left, #mobile .technology .competence .weve_motion .transform-box .right { width: 4rem; height: 4rem; } #mobile .technology .competence .weve_motion .transform-box .left::after, #mobile .technology .competence .weve_motion .transform-box .right::after { width: 2rem; } #mobile .technology .competence .weve_motion .transform-box .left::after { top: 1rem; border-left: .8rem solid #005eb8; border-top: .8rem solid #005eb8; border-bottom: .8rem solid #005eb8; transform: rotate(-90deg) translate(0, 1rem); } #mobile .technology .competence .weve_motion .transform-box .right::after { bottom: 1rem; border-right: .8rem solid #005eb8; border-top: .8rem solid #005eb8; border-bottom: .8rem solid #005eb8; transform: rotate(-90deg) translate(0, 1rem); } #mobile .technology .competence .weve_motion .we { margin-right: 1.7rem; } #mobile .technology .competence .weve_motion .ve { margin-left: 0rem; } #mobile .technology .competence .weve_motion .txt { font-size: 1.5rem; margin-top: 1rem; line-height: 1.4; } #mobile .technology .competence .section_nav { display: none; } #mobile .technology .competence section h3 { font-size: 2.4rem; margin-top: 30px; } #mobile .technology .competence section h3::before { width: 4.8rem; height: .4rem; margin-bottom: 2rem; } #mobile .technology .competence section h3 span { font-size: 2.5rem; } #mobile .technology .competence section h3 em { display: none; } #mobile .technology .competence section { padding: 5.5rem 0; } #mobile .technology .competence section:not(.section6) .inner { flex-direction: column-reverse; padding: 0; } #mobile .technology .competence section:nth-of-type(2n) .inner { flex-direction: column-reverse; } #mobile .technology .competence section:nth-of-type(2n-1) .txt { padding-right: 0; } #mobile .technology .competence section:nth-of-type(2n) .txt { padding-left: 0; } #mobile .technology .competence section .inner > div { width: 100%; } #mobile .technology .competence section .txt p { font-size: 1.5rem; line-height: 1.73; padding: 1rem 0 0; } #mobile .technology .competence section .txt > span { font-size: 1.8rem; white-space: normal; } #mobile .technology .competence section .txt ul { margin-top: 3rem; } #mobile .technology .competence section .txt ul li { font-size: 1.4rem; line-height: 1.42; } #mobile .technology .competence section .txt ul li::before { margin: .6rem 1rem 0 0; flex-shrink: 0; } #mobile .technology .competence section .txt .btn { width: 21.1rem; height: 4.5rem; line-height: 4.5rem; border-radius: 2.25rem;padding: 0 3rem; margin-top: 3.5rem; font-size: 1.3rem; } #mobile .technology .competence section .txt .btn i { width: 1.5rem; height: 1.5rem; right: 3rem; background: url(../images/common/icon_plus_15x15.png)50% 50% no-repeat; } #mobile .technology .competence section .txt .btn:hover i { background: url(../images/common/icon_plus_w_15x15.png)50% 50% no-repeat; } #mobile .technology .competence .section6 { padding: 5.5rem 0 10rem; } #mobile .technology .competence .section6 h3 { margin-top: 0; } #mobile .technology .competence .section6 ul { margin-top: 2.2rem; } #mobile .technology .competence .section6 ul li a { height: auto; min-height: 5.5rem; padding: 1.5rem 1rem; line-height: 1.57; position: relative; align-items: flex-start; } #mobile .technology .competence .section6 ul li a em { display: none; } #mobile .technology .competence .section6 ul li .num { font-size: 1.5rem; padding-right: 1rem; } #mobile .technology .competence .section6 ul li .tit { font-size: 1.4rem; padding-right: 2.5rem; } #mobile .technology .competence .section6 ul li .viewmore { width: 1.5rem; height: 1.5rem; background: url(../images/common/icon_plus_15x15.png) no-repeat 100% 100%; background-size: contain; position: absolute; top: 2rem; right: 1rem; } #mobile .technology .competence .section6 ul li .viewmore span { display: none; } #mobile .technology .competence .section6 ul li:hover .viewmore { background: url(../images/common/icon_plus_w_15x15.png)no-repeat 100% 100%; background-size: 1.5rem; } /* 기술연구소 */ #mobile #sub .technology .iot { max-width: 100%; } #mobile #sub .technology .iot .inner { max-width: 100%; width: calc(100% - 4rem); } #mobile .technology .iot { padding: 6.5rem 0 4rem; position: relative; } #mobile .technology .iot .inner .sub_tit { font-size: 2.4rem; } #mobile .technology .iot .inner:first-child .sub_par { font-size: 1.5rem; padding-top: 3rem; line-height: 1.5; } #mobile .technology .iot .inner:first-child .statistics { flex-wrap: wrap; margin: 5rem 0 3.5rem; position: relative; } #mobile .technology .iot .inner:first-child .statistics::after { height: 100%; width: .1rem; right: 0; left: 0; } #mobile .technology .iot .inner:first-child .statistics::before { width: 100%; height: .1rem; top: 0; bottom: 0; } #mobile .technology .iot .inner:first-child .statistics li { width: 100%; align-items: center; } #mobile .technology .iot .inner:first-child .statistics li:not(:last-child) { border-right: none; border-bottom: 1px solid #e8e8e8; } #mobile .technology .iot .inner:first-child .statistics li img { object-fit: contain; width: 4rem; } #mobile .technology .iot .inner:first-child .statistics li div { padding-left: 2.5rem; height: fit-content; } #mobile .technology .iot .inner:first-child .statistics li div h4 { font-size: 1.4rem; } #mobile .technology .iot .inner:first-child .statistics li div h4 span { font-size: 3rem; margin-right: .5rem; } #mobile .technology .iot .inner:first-child .statistics li div > span { font-size: 1.5rem; } #mobile #sub .technology .iot .inner:nth-child(2) { width: 100%; padding: 6.5rem 0; } #mobile .technology .iot .inner:nth-child(2) > div.inner_wrap { max-width: calc(100% - 4rem); flex-direction: column; } #mobile .technology .iot .inner:nth-child(2) .sec2_le h3 { padding-top: 3.25rem; font-size: 2.5rem; line-height: 1.3; } #mobile .technology .iot .inner:nth-child(2) .sec2_le h3::before { width: 4.1rem; height: .35rem; } #mobile .technology .iot .inner:nth-child(2) .sec2_le p { font-size: 1.4rem; line-height: 1.5; padding-top: 2.5rem; } #mobile .technology .iot .inner:nth-child(2) .sec2_le a { font-size: 1.3rem; padding: 1.5rem 1rem; width: 17.5rem; margin-top: 2.5rem } #mobile .technology .iot .inner:nth-child(2) .sec2_le a img { object-fit: scale-down; width: 1.45rem; } #mobile .technology .iot .inner:nth-child(2) .sec2_ri { width: calc(100% - 3.65rem); margin: 6rem auto 0; } #mobile .technology .iot .inner:nth-child(2) .sec2_ri img { box-shadow: 0 .7rem 1.35rem 0 rgba(0, 0, 0, 0.35); } #mobile .technology .iot .inner:nth-child(2) .sec2_ri span { padding-left: 1.5rem; font-size: 1.3rem; margin-top: 2rem; } #mobile .technology .iot .inner:last-child .inner_wrap { padding: 6.5rem 0 3rem; } #mobile .technology .iot .inner:last-child .inner_wrap > ul > li { margin-top: 4.5rem; background: linear-gradient(to bottom, #f9f9f9 31.2rem, #fff 1rem); padding: 5rem 0 4rem; } #mobile .technology .iot .inner:last-child .inner_wrap > ul > li h4 { font-size: 2rem; } #mobile .technology .iot .inner:last-child .inner_wrap > ul > li h4 span { margin:0 auto 2rem; width: 2.5rem; height: 2.5rem; font-size: 1.6rem; line-height: 2.5rem; } #mobile .technology .iot .inner:last-child .inner_wrap .card { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 5rem; } #mobile .technology .iot .inner:last-child .inner_wrap .card li { border-top: .3rem solid #005eb8; width: calc(100% - 5rem); height: 39.25rem; padding-top: 5.2rem; box-shadow: 0 .7rem 1.35rem 0 rgba(0, 0, 0, 0.05); } #mobile .technology .iot .inner:last-child .inner_wrap .card li:nth-child(2) { margin: 2.25rem 0; } #mobile .technology .iot .inner:last-child .inner_wrap .card li img { width: 7rem; } #mobile .technology .iot .inner:last-child .inner_wrap .card li h5 { padding-top: 3.2rem; font-size: 1.5rem; } #mobile .technology .iot .inner:last-child .inner_wrap .card li p { padding-top: 1.5rem; font-size: 1.4rem; line-height: 1.5; letter-spacing: -.07rem; } /* ================================ 회사소개 =============================== */ /* 공통 */ #mobile .company .sub_visual { background-image: url(../images/company/company_bg_m.jpg); } #mobile .company .tab_box { padding: 0; margin-top: 4rem; } #mobile #sub .company .tab_box > .inner { width: calc(100% - 4rem); } #mobile .company .tab_box ul { width: 100%; justify-content: space-between; } /* 경영이념 */ #mobile .company .philosophy { padding: 6rem 0 10rem; margin-top: 5rem; } #mobile .company .philosophy .inner > ul > li:first-child { padding-bottom: 6rem; } #mobile .company .philosophy .inner > ul > li:first-child h1 { font-size: 3.7rem; padding-top: 3rem; line-height: 1.2; } #mobile .company .philosophy .inner > ul > li:first-child h1::before { width: 4.1rem; height: .35rem; } #mobile .company .philosophy .inner > ul > li:first-child p { font-size: 1.7rem; line-height: 1.52; padding-top: 2.5rem; } #mobile .company .philosophy .inner > ul > li:last-child { padding-top: 6.5rem; } #mobile .company .philosophy .inner > ul > li:last-child h2 { font-size: 2.4rem; } #mobile .company .philosophy .inner > ul > li:last-child ul { height: auto; margin-top: 4rem; flex-direction: column; } #mobile .company .philosophy .inner > ul > li:last-child ul li { width: 100%; height: 21rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li:last-child { right: 0rem; margin-top: 1.5rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li::after { background-size: cover; } #mobile .company .philosophy .inner > ul > li:last-child ul li div img { width: 5.1rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li h4 { font-size: 1.6rem; margin-top: 1.5rem; padding-top: 1.75rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li h4::before { width: 1.1rem; height: .25rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li p { font-size: 1.4rem; line-height: 1.5; padding-top: 1.5rem; } #mobile .company .philosophy .inner > ul > li:last-child ul li:hover { top: 0; box-shadow: -.6rem .9rem 1.25rem .038rem rgba(0, 0, 0, 0.31); } /* 대표이사 인사말 */ #mobile .company .greeting { background: linear-gradient(to bottom, #f9f9f9, #f9f9f9 46rem, #fff 46.1rem, #fff 100%); padding: 6.5rem 0 10rem; margin-top: 6rem; } #mobile .company .greeting .inner { margin: 0 auto!important; } #mobile .company .greeting .tit { font-size:2.4rem; margin-left: 2.4rem; margin-bottom: 0; } #mobile .company .greeting .tit span { font-size: 2.6rem; } #mobile .company .greeting .tit span:first-of-type { top: -.3rem; left: -2.4rem; } #mobile .company .greeting .tit span:last-of-type { bottom: 0rem; right: 3.8rem; } #mobile .company .greeting .txt { font-size: 1.4rem; line-height: 1.57; } #mobile .company .greeting .txt:first-of-type { margin-left: 0; margin-top: 1.5rem; } #mobile .company .greeting .txt:last-of-type { margin-top: 2rem; } #mobile .company .greeting .picture { width: calc(100% + 4rem); position: initial; margin-top: -3rem; margin-left: -2rem; } #mobile .company .greeting .sign { margin-top: 3rem; } #mobile .company .greeting .sign p { font-size: 1.3rem; } #mobile .company .greeting .sign b { font-size: 1.7rem; margin: 1rem 1rem 0 0; } #mobile .company .greeting .sign img { width: 15rem; } /* 연혁 */ #mobile .company .history { margin-top: 8rem; overflow: hidden; } #mobile .company .btn_mob { display: block; border: .1rem solid #222222; border-radius: 3.8rem; line-height: 2rem; text-align: center; padding: .75rem 2.1rem; font-size: 1.5rem; font-weight: 150; margin: 4.5rem auto 0; transition: all ease .3s; } #mobile .company .btn_mob:hover { background: #222222; color: #fff; } #mobile .company .btn_mob:after { content: ''; width: 1rem; height: 1rem; display: inline-block; margin-left: 1.5rem; background: url(../images/common/icon_plus_mob_20x20.png) 50% 50% no-repeat; background-size: cover; transition: all ease .3s; } #mobile .company .btn_mob:hover:after { background: url(../images/common/icon_plus_mob_hover_20x20.png) 50% 50% no-repeat; background-size: cover; transform: rotate(90deg); } #mobile .company .HMhistory { padding: 0 2rem 22.3rem; } #mobile .company .HMhistory .year, #mobile .company .HMhistory .line { display: none; } #mobile .company .HMhistory .list > li:not(:last-child) { background-size: 6px 2px; padding-bottom: 3.7rem; } #mobile .company .HMhistory .list > li:not(:first-child) { padding-top: 3.7rem; } #mobile .company .HMhistory .list > li li { font-size: 8.5rem; color: #efefef; font-weight: 400; font-family: 'Montserrat', sans-serif; line-height: .8; padding-bottom: 4rem; transition: all ease .3s; } #mobile .company .HMhistory .list > li.active li { color: #005eb8; } #mobile .company .HMhistory .list > li dl { font-size: 1.5rem; line-height: 1.7; width: 100%; } #mobile .company .HMhistory .list > li dl:not(:first-of-type) { margin-top: 3rem; } #mobile .company .HMhistory .list > li dl dt { width: 4.65rem; } #mobile .company .HMhistory .list > li dl dd { width: calc(100% - 4.65rem); } #mobile .company .HMhistory .list > li dl dd p:not(:first-child), #mobile .company .HMhistory .list > li dl dd img { margin-top: 1.5rem; width: 100%; } #mobile .company .greybox { display: none; height: 100vh; background: rgba(0, 0, 0, .6); position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 5rem 1rem 10rem; z-index: 9999; align-items: center; overflow: auto; } #mobile .company .greybox .pop_close { display: block; position: relative; top: 0; width: 5.25rem; height: 5.25rem; margin: auto; transition: all ease .3s; } #mobile .company .greybox .pop_close:active { transform: rotate(90deg); } #mobile .company .greybox .wrap { background: #f9f9f9 url(../images/company/greybox_bg.png) 55% 101% no-repeat; background-size: 200%; flex-direction: column; margin: 3rem auto 0; } #mobile .company .greybox .wrap > * { width: 100%; } #mobile .company .greybox .wrap .section01 { padding: 5rem 2rem 0; } #mobile .company .greybox .wrap .section01 h2 { font-size: 3rem; padding-top: 2rem; } #mobile .company .greybox .wrap .section01 h2::before { width: 4.1rem; height: .35rem; } #mobile .company .greybox .wrap .section01 p { padding-top: 3rem; font-size: 1.4rem; line-height: 1.6; } #mobile .company .greybox .wrap .section01 div { padding-top: 3.25rem; flex-direction: column; align-items: center; } #mobile .company .greybox .wrap .section01 div a { padding: 1.7rem .5rem; width: 17.5rem; font-size: 1.3rem; margin-right:0; } #mobile .company .greybox .wrap .section01 div a:last-child { margin-top: 1.5rem; } #mobile .company .greybox .wrap .section01 div a img { width: 1.5rem; height: 1.6rem; } #mobile .company .greybox .wrap .section02 { padding: 6rem 1rem 5rem; } #mobile .company .greybox .wrap .section02 img { box-shadow: 0 .7rem 1.35rem 0 rgba(0, 0, 0, .35); } /* 투자정보 - 이사회 */ #mobile .company .bod .inner > div.inner_wrap { padding-top: 4.5rem; } #mobile .company .bod .inner > div.inner_wrap > h3 { font-size: 2.4rem; padding-bottom: 2.5rem; } #mobile .company .bod .inner > div.inner_wrap > p { font-size: 1.5rem; line-height: 1.7; padding-bottom: 4rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul { padding-bottom: 6.5rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li { width: 100%; height: 20.45rem; box-shadow: 0 .6rem 1.35rem 0 rgba(0, 0, 0, .08); margin-top: 2.5rem; padding: 2.5rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li:nth-child(3n + 2) { margin: 2.5rem 0 0; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li > h4 { font-size: 1.8rem; padding-bottom: 2rem; background-image: linear-gradient(to right, #005eb8 .4rem, rgba(255,255,255,0) 0%); background-size: 7px 1px; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li > h4 span { font-size: 1.3rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li .info { padding-top: 2rem; height: calc(100% - 6.1rem); } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li .info li { padding-left: 1.5rem; font-size: 1.3rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li .info li::before { width: .4rem; height: .4rem; top: .5rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li .info .hidden span { line-height: 1.5; margin-top: -.3rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::before, #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::after { width: 1.5rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li > h4::before { width: .1rem; height: 1.5rem; } #mobile .company .bod .inner:first-child > div.inner_wrap > ul > li:hover > h4 { background-image: linear-gradient(to right, #fff .3rem, rgba(255,255,255,0) 0%); color: #fff; } #mobile #sub .company .bod .inner:last-child { width: 100%; padding: 2rem 0 10rem; position: relative; } #mobile .company .bod .inner:last-child > div.inner_wrap { width: calc(100% - 4rem); margin: auto; } #mobile .company .bod .inner:last-child > div.inner_wrap > h3 { padding-bottom: 5rem; } #mobile .company .bod .inner:last-child .inner_wrap .tab_le { width: 100%; height: 9rem; display: flex; justify-content: center; align-items: center; padding-bottom: 5.7rem; } #mobile .company .bod .inner:last-child .inner_wrap .tab_le li { font-size: 2.6rem; flex-direction: column-reverse; padding: 0 1.25rem; } #mobile .company .bod .inner:last-child .inner_wrap .tab_le li.on { font-size: 4.1rem; position: relative; } #mobile .company .bod .inner:last-child .inner_wrap .tab_le li.on::before { width: .7rem; height: .7rem; margin-right: 0; position: absolute; bottom: -1.7rem; } #mobile .company .bod .inner:last-child .inner_wrap .tab_le li:not(:first-child) { margin-top: 0; } #mobile .company .bod .inner:last-child .inner_wrap .accordion { width: 100%; border-top: .2rem solid #000000; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band:not(:first-child) { margin-top: 1.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4 { font-size: 1.5rem; padding: 1.85rem 2.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4 span { font-size: 1.3rem; padding-right: 1.2rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4 span::after { margin: 0 2.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4::before, #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4::after { width: 1.3rem; height: .1rem; right: 2.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .band h4::before { width: .1rem; height: 1.3rem; right: 3.1rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .bind { font-size: 1.3rem; padding: 0 2.5rem 2.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .bind dt { padding: 2.5rem 0 1.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .bind dt:not(:first-of-type) { padding: 4.5rem 0 1.5rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .bind dt::before { width: .4rem; height: .4rem; } #mobile .company .bod .inner:last-child .inner_wrap .accordion .bind dd { line-height: 1.5; padding-top: 1.5rem; align-items: center; } /* 투자정보 - 재무정보 - Custom Chart */ #mobile .company .financial { margin-top: 4.5rem; } #mobile .company #HMchart { padding:0 2rem 9rem; } #mobile .company #HMchart > li { width: 100%; height: 33rem; padding: 2.5rem 0; } #mobile .company #HMchart > li h2 { font-size: 2rem; } #mobile .company #HMchart > li .graph { width: 100%; padding: 0 1.5rem; } #mobile .company #HMchart > li .graph > span { font-size: 1.2rem; } #mobile .company #HMchart > li .graph .graph_bg { padding-bottom: 7.15rem; } #mobile .company #HMchart > li .graph .graph_bg li { font-size: 1.3rem; } #mobile .company #HMchart > li .graph .graph_bg li span { padding-right: unset; } #mobile .company #HMchart > li .graph .graph_bg li:before { position: relative; width: 100%; right: 0; z-index: -1; margin-left: 1rem; } #mobile .company #HMchart > li .graph .graph_bar { padding: 0 1.5rem; height: calc(100% - 6.15rem); } #mobile .company #HMchart > li .graph .graph_bar li { width: 11vw; border-radius: 2vw 2vw 0 0; margin:0 8%; } #mobile .company #HMchart > li .graph .graph_bar li > span { font-size: 1.2rem; width: auto; line-height: 1; height: auto; border-radius: 1.75rem; padding: .5rem 1rem; top: -3.3rem; box-shadow: 0 .3rem .9rem 0 rgba(4, 0, 0, 0.1); } #mobile .company #HMchart > li .graph .graph_bar li > p { font-size: 1.3rem; bottom: -4.7rem; padding: .5rem; border-radius: .5rem; background: rgba(255, 255, 255, .7); } #mobile .company #HMchart > li .graph .graph_bar li > p span { font-size: 1.15rem; } #mobile .company #HMchart > li .graph .graph_bar li:nth-child(3) > span { background: #e73100; color: #fff !important; } #mobile .company #HMchart > li .graph .graph_bar .minus { transform: scale(-1) translateY(-100%); } #mobile .company #HMchart > li .graph .graph_bar .minus > p, #mobile .company #HMchart > li .graph .graph_bar .minus > span { transform: translate(50%, 0) scale(-1); } /* 투자정보 - 전자공고 */ #mobile .company .announce { padding-bottom: 10rem; } #mobile .company .announce .tb_top .search { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 3.7rem; } #mobile .company .announce .tb_top .search .select_row { width: 9rem; height: 3.5rem; margin-right: 0 } #mobile .company .announce .tb_top .search .select_row select { height: 3.5rem; line-height: 3.5rem; padding: 0 .5rem; } #mobile .company .announce .tb_top .search .select_row { border: 0; border-bottom: 2px solid #222; } #mobile .company .announce .tb_top .search .select_row::after { right: .5rem; width: 0.7rem; height: 0.35rem; background-size: contain; } #mobile .company .announce .tb_top .search .select_row label { font-size: 1.5rem; height: 3.5rem; line-height: 3.5rem; padding: 0 .5rem; } #mobile .company .announce .tb_top .search .input_search { width: calc(100% - 11rem); height: 3.5rem; border-bottom: 2px solid #222; } #mobile .company .announce .tb_top .input_search input { width: calc(100% - 2.8rem); height: 3.5rem; font-size: 1.2rem; border: 0; } #mobile .company .announce .tb_top .input_search a { width: 2.8rem; height: 3.5rem; background-size: 1.8rem 1.75rem;} #mobile .company .announce .tb_top .total { padding: 1.5rem 0 0 0; text-align: left; font-size: 1.3rem; } #mobile .company .announce .tb_box { border-top: .1rem solid #000; margin-top: 1.5rem; } #mobile .company .announce .tb_box .tb_row { display: block; width: 100%; } #mobile .company .announce .tb_box .tb_row.row_head { display: none; } #mobile .company .announce .tb_box .tb_row.row_body { padding: 1.5rem; } #mobile .company .announce .tb_box .tb_row>div { width: 100%; height: auto; line-height: 1.5; text-align: left; border-right: 0; font-size: 1.3rem; } #mobile .company .announce .tb_box .tb_row.row_body .ord, #mobile .company .announce .tb_box .tb_row.row_body .cert, #mobile .company .announce .tb_box .tb_row.row_body .cell01 { display: none; } #mobile .company .announce .tb_box .tb_row.row_body b.mob { display: inline-block; padding-right: 1rem; font-family: 'Pretendard'; font-size: 1rem; font-weight: 400; color: #222; } #mobile .company .announce .tb_box .tb_row.row_body .tit { width: 100%; display: block; padding-bottom: .5rem; } #mobile .company .announce .tb_box .tb_row.row_body .tit a { display: block; width: 100%; padding-left: 0; line-height: 1.53; font-size: 1.3rem; } #mobile .company .announce .tb_box .tb_row .date { display: inline-block; width: 37%; font-size: 1.1rem; } #mobile .company .announce .tb_box .tb_row .period { display: inline-block; width: 62%; font-size: 1.1rem; } #mobile .company .announce .tb_box .tb_row.none {display: none;} #mobile .company .announce .tb_box .tb_row.null { font-size: 1.3rem; padding: 12.5rem 0; } #mobile .company .announce .tb_box .tb_row { position: relative; } #mobile .company .announce .tb_box .tb_row .download { width: 29%; position: absolute; top: 1.5rem; left: calc(65% + 1rem); } #mobile .company .announce .tb_box .tb_row .download a { width: 1.15rem; height: 1.2rem; } #mobile .company .announce.detail_pg { padding-top: 4.5rem; } /* 오시는 길 */ #mobile #sub .company .location .inner { max-width: unset; } #mobile .company .location { background: linear-gradient(to bottom, #fff 15rem, #f9f9f9 0); padding:4.5rem 0 10rem; position: relative; } #mobile .company .location .map_loader > div .wrap_map, #mobile .company .location .map_loader > iframe { height: 20rem; } #mobile .company .location ul { margin-top: 5.5rem; flex-wrap: wrap; } #mobile .company .location ul li:first-child { width: 100%; border-right: none; border-bottom: .1rem solid #e8e8e8; padding-bottom: 5.5rem; } #mobile .company .location ul li:first-child h2 { padding-top: 1.75rem; font-size: 3rem; } #mobile .company .location ul li:first-child h2 span::before { width: 4.1rem; height: .35rem; } #mobile .company .location ul li:first-child a { margin-top: 4rem; width: 18rem; height: 4.5rem; line-height: 4.5rem; border-radius: 2.25rem; font-size: 1.3rem; } #mobile .company .location ul li:first-child a::after { background-size: contain; margin-left: 6.25rem; width: .65rem; height: 1.15rem; } #mobile .company .location ul li:last-child { padding-left: 0; padding-top: 6rem; } #mobile .company .location ul li:last-child div { padding-left: 2.25rem; } #mobile .company .location ul li:last-child div:not(:first-child) { margin-top: 2.5rem; } #mobile .company .location ul li:last-child div h3 { font-size: 1.4rem; } #mobile .company .location ul li:last-child div h3 img { width: 1.2rem; object-fit: scale-down; } #mobile .company .location ul li:last-child div p { font-size: 1.3rem; line-height: 1.54; padding-top: 1rem; } #mobile .company .location ul li:last-child div p i { font-size: 1.3rem; color: #cccccc; position: relative; bottom: .1rem; padding: 0 1rem; } #mobile .company .location ul li:last-child div em { font-size: 1.4rem; padding-top: 1.5rem; } #mobile .company .location ul li:last-child div em span { line-height: 1.8rem; width: 1.7rem; height: 1.7rem; margin-right: 1rem; font-size: 1.3rem; flex-shrink: 0; } /* ================================ 사회책임경영 =============================== */ /* 공통 */ #mobile .sr .sub_visual { background-image: url(../images/social/sr_bg_m.jpg); } #mobile .sr .contents { max-width: 100%; width: calc(100% - 4rem); } #mobile .sr .btn_mob { display: block; } #mobile .sr section > h3 { font-size: 2.4rem; padding-bottom: 3.75rem; } #mobile .sr .board { width: calc(100% - 2rem); margin: 0 auto 5.5rem; box-shadow: .1rem .15rem 2.5rem 0 rgba(41, 41, 41, 0.2); border-top: .6rem solid #005eb8; padding: 5.35rem 0 4.5rem; } #mobile .sr .board .paragraph { padding-bottom: 3.25rem; margin-bottom: 3.5rem; } #mobile .sr .board .paragraph::after { width: 9.5rem; height: .5rem; background-size: contain; } #mobile .sr .board .paragraph h3 { font-size: 2.7rem; } #mobile .sr .board .paragraph p { font-size: 1.5rem; line-height: 1.53; padding-top: 2rem; } #mobile .sr .board .sign { font-size: 1.6rem; } #mobile .sr .board .sign p:last-child { font-size: 2rem; } #mobile .sr .board_inner { margin: 0 1rem 3.5rem; letter-spacing: -.1rem; } #mobile .sr .board_inner li { padding: 2.5rem 0; margin: 0 1rem; font-size: 1.3rem; flex-wrap: wrap; align-items: flex-start; line-height: 1.53; } #mobile .sr .board_inner li p { width: 100%; padding-top: 1rem; } #mobile .sr .board_inner li > h4 { font-size: 1.7rem; } #mobile .sr .board_inner li > span { font-size: 1.3rem; margin-right: 1.3rem; } #mobile .sr .certList h3 { padding-bottom: 2.75rem; } #mobile .sr .certList ul { width: calc(100% - 4rem); } #mobile .sr .certList ul li { flex-direction: column; } #mobile .sr .certList ul li:not(:last-child) { margin-bottom: 2rem; } #mobile .sr .certList ul li > * { width: 100%; } #mobile .sr .certList ul li div { padding: 3rem 0; align-items: center; background-image: linear-gradient(to left, #e8e8e8 .5rem, rgba(255,255,255,0) .1rem); background-position: bottom; background-size: 6px 1px; background-repeat: repeat-x; } #mobile .sr .certList ul li div img { width: calc(100% - 6rem); } #mobile .sr .certList ul li dl { padding: 3rem 2rem; } #mobile .sr .certList ul li dl dt { font-size: 2rem; padding-top: 2.9rem; } #mobile .sr .certList ul li dl dt::before { width: 4.2rem; height: .4rem; left: .4rem; } #mobile .sr .certList ul li dl dt p { font-size: 1.4rem; font-weight: 150; color: #555555; line-height: 1.9; padding-top: 2rem; } #mobile .sr .certList ul li dl dd:not(:last-child) { font-size: 1.4rem; line-height: 1.64; } #mobile .sr .certList ul li dl dd:not(:last-child)::before { width: .5rem; height: .5rem; margin: -.1rem 1rem 0 0; background-size: contain;} #mobile .sr .certList ul li dl dd:last-child { margin-top: 2.5rem; } #mobile .sr .certList ul li dl dd:last-child a { width: 17.5rem; height: 4.5rem; line-height: 4.5rem; font-size: 1.3rem; text-indent: .5rem; } #mobile .sr .certList ul li dl dd:last-child a i { width: 1.5rem; height: 1.5rem; background-size: contain; right: 1rem; } #mobiel .sr .social_mob_img { display: block; } #mobile .sr .social_pc_img { display: none; } /* 프롤로그(사회책임경영 원칙) */ #mobile .sr .prologue { box-shadow: .1rem .15rem 2.5rem 0 rgba(41, 41, 41, 0.2); margin-bottom: 10rem; margin-top: 3.5rem; } #mobile .sr .prologue .banner { background: linear-gradient(145deg, #C1BAB3 40%, #CBC6C2 60%); padding: 4.5rem 2.6rem 0; height: 36rem; } #mobile .sr .prologue .banner h2 { font-size: 3.5rem; } #mobile .sr .prologue .banner p { font-size: 1.5rem; line-height: 1.53; padding-top: 1.5rem; } #mobile .sr .prologue .banner img { right: -1rem; } #mobile .sr .prologue .board_inner { margin: 0 2rem 0; padding-bottom: 1rem; } #mobile .sr .prologue .board_inner li { padding: 2.5rem 0; margin: 0; font-size: 1.6rem; line-height: 1.5; flex-direction: column; align-items: flex-start; } #mobile .sr .prologue .board_inner li p { width: 100%; } /* 안전보건경영 */ #mobile .sr .hsm { width: 100%; margin-top: 5.5rem; padding-top: 5.5rem; } #mobile .sr .hsm .section01.board .sign p:nth-child(2) { padding: 1rem 0 0; } #mobile .sr .hsm .section01.board .sign p:nth-child(2) span { margin-right: .6rem; } #mobile .sr .hsm .section01.board .sign p:nth-child(2) img { margin-left: 1.2rem; position: relative; width: 9.85rem; top: -.5rem; } #mobile .sr .hsm .section02.activity { background: #fff; padding: 5.75rem 0 5.5rem; } #mobile .sr .hsm .section02.activity ul { width: calc(100% - 2rem); flex-direction: column; } #mobile .sr .hsm .section02.activity ul li { width: 100%; flex-direction: row; align-items: flex-start; height: fit-content; position: relative; } #mobile .sr .hsm .section02.activity ul li:first-child, #mobile .sr .hsm .section02.activity ul li:nth-child(2), #mobile .sr .hsm .section02.activity ul li:last-child { padding: 3.5rem 1rem 3.5rem 2rem; } #mobile .sr .hsm .section02.activity ul li:not(:last-child)::after { width: calc(100% - 4rem); height: .1rem; position: absolute; right: 2rem; top: auto; bottom: 0; background-image: linear-gradient(to left, #e8e8e8 .1rem, rgba(255,255,255,0) .5rem); background-size: 6px 1px; background-repeat: repeat-x; } #mobile .sr .hsm .section02.activity ul li img { width: 8rem; } #mobile .sr .hsm .section02.activity ul li dl { margin-top: 0; margin-left: 1.5rem; } #mobile .sr .hsm .section02.activity ul li:first-child dl, #mobile .sr .hsm .section02.activity ul li:last-child dl { width: auto; } #mobile .sr .hsm .section02.activity ul li:nth-child(2) dl { margin-top: .5rem; } #mobile .sr .hsm .section02.activity ul li dl dt { font-size: 1.8rem; padding-bottom: 1rem; } #mobile .sr .hsm .section02.activity ul li dl dd { padding-left: 1.25rem; margin-bottom: .5rem; font-size: 1.4rem; line-height: 1.42; white-space: unset; } #mobile .sr .hsm .section02.activity ul li dl dd::before { width: .4rem; height: .4rem; top: .65rem; bottom: auto; } #mobile .sr .hsm .section03 { padding: 5.75rem 0 10rem; } /* 환경경영 */ #mobile .sr .em { width: 100%; margin-top: 5.5rem; } #mobile .sr .em .section01 { padding-top: 5.75rem; } #mobile .sr .em .section01 .emInfo { height: 90vw; width: calc(100% - 4rem); margin-bottom: 4.5rem; background: url(../images/social/em_info_mob.png)50% 50% no-repeat; background-size: contain;} #mobile .sr .em .section01 .emInfo li { display: none; } #mobile .sr .em .section01 .board { border-top: .6rem solid #00a5d7; } #mobile .sr .em .section01 .board .sign p:nth-child(2) { padding: 1.5rem 0 2rem; } #mobile .sr .em .section01 .board .sign p:nth-child(2) span { margin-right: .5rem; letter-spacing: .1rem; } #mobile .sr .em .section01 .board .sign p:nth-child(2) img { margin-left: 1rem; width: 10.7rem; } #mobile .sr .em .section02 { padding: 6rem 0; } #mobile .sr .em .section02 > h3 { padding-bottom: 1rem; } #mobile .sr .em .section02 > p { font-size: 1.5rem; line-height: 1.7; padding-bottom: 3rem; } #mobile .sr .em .section02 ul { padding: 2.5rem 1rem 2.5rem 2rem; width: calc(100% - 2rem); flex-direction: column; justify-content: flex-start; height: 44rem; } #mobile .sr .em .section02 ul li { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; position: relative; } #mobile .sr .em .section02 ul li:nth-child(2) { top: -1.5rem; } #mobile .sr .em .section02 ul li:nth-child(3) { top: -3rem; } #mobile .sr .em .section02 ul li h4 { font-size: 1.5rem; line-height: 1.3; padding: 0; display: flex; align-items: center; justify-content: center; width: 8rem; height: 14rem; border-radius: 8rem; } #mobile .sr .em .section02 ul li p { font-size: 1.4rem; line-height: 1.6; margin-top: unset; width: calc(100% - 10rem); padding-bottom: 0; text-align: left; position: relative; } #mobile .sr .em .section02 ul li:not(:last-child) p { background-image: none; } #mobile .sr .em .section02 ul li:not(:last-child):after { content: ''; display: block; position: absolute; bottom: .5rem; right: 1rem; width: calc(100% - 11.4rem); height: .1rem; background-image: linear-gradient(to left, #e8e8e8 .5rem, rgba(255,255,255,0) .1rem); background-position: bottom; background-size: 6px 1px; background-repeat: repeat-x; } #mobile .sr .em .section03 { padding: 5.75rem 0 10rem; } #mobile .sr .em .certList ul li dl { padding: 3rem 2rem; } #mobile .sr .em .certList ul li dl dd:last-child { margin-top: 2.5rem; } /* 품질경영 */ #mobile .sr .qm { width: 100%; margin-top: 5.5rem; } #mobile .sr .qm .section01 { padding-top: 5.5rem; } #mobile .sr .qm .section01 > p { width: calc(100% - 2rem); margin: auto 1rem; padding: 2.25rem 0 4rem; font-size: 1.8rem; line-height: 1.5; } #mobile .sr .qm .section01 > p span { font-size: 1.7rem; padding-top: 1.5rem; } #mobile .sr .qm .section01 > p::before { width: 4.1rem; height: .4rem; } #mobile .sr .qm .section01 > h3 { padding-top: 4.25rem; } #mobile .sr .qm .section01 .qmInfo { padding: 0; margin: 0 2rem 4.5rem; background: url(../images/social/qm_info_mob.png)50% 50% no-repeat; width: calc(100% - 4rem); height: 170vw; background-size: contain; } #mobile .sr .qm .section01 .qmInfo li, #mobile .sr .qm .section01 .qmInfo .infoCenter {display: none; } #mobile .sr .qm .section01 .board { border-top: .6rem solid #00ad83; } #mobile .sr .qm .section01 .board_inner li { font-size: 1.3rem; padding: 2.5rem 1rem; line-height: 1.53; letter-spacing: -.05rem; } #mobile .sr .qm .section01 .board .sign p:nth-child(2) { padding: 1rem 0 2rem; letter-spacing: .05rem; } #mobile .sr .qm .section01 .board .sign p:nth-child(2) span { margin-right: .5rem; letter-spacing: .1rem; } #mobile .sr .qm .section01 .board .sign p:nth-child(2) img { margin-left: 1rem; width: 12.7rem; } #mobile .sr .qm .section02 { background: #fff; padding: 6rem 0 4.65rem; } #mobile .sr .qm .section02 .qmInfo2 { width: calc(100% - 4rem); background: url(../images/social/qm_info2_mob.png)50% 50% no-repeat; height: 182vw; background-size: contain; } #mobile .sr .qm .section02 .qmInfo2 li { display: none; } #mobile .sr .qm .section03 { padding: 5.5rem 0 10rem; } #mobile .sr .qm .section03 ul li dl { padding: 3rem 2rem; } /* 상생경영 */ #mobile .sr .ww { width: 100%; margin-top: 5.5rem; } #mobile .sr .ww section { padding: 5.5rem 0; } #mobile .sr .ww .section01 > h2 { width: calc(100% - 4rem); margin: auto 2rem; padding: 2.25rem 0 0; font-size: 1.8rem; line-height: 1.5; } #mobile .sr .ww .section01 > h2 span { font-size: 1.7rem; padding-top: 1.5rem; } #mobile .sr .ww .section01 > h2::before { width: 4.1rem; height: .4rem; } #mobile .sr .ww .section02 > .social_mob_img { width: calc(100% - 2rem); margin: auto; } #mobile .sr .ww .section02 > h3 { padding-bottom: 2.5rem; } #mobile .sr .ww .section03 > h3 { padding-bottom: .5rem; } #mobile .sr .ww .section03 > p { font-size: 1.5rem; line-height: 1.73; padding: 0 2rem; } #mobile .sr .ww .section03 .ww_info2 { width: calc(100% - 2rem); margin: 2.5rem auto 0; } #mobile .sr .ww .section04 > ul { flex-direction: column; width: calc(100% - 4rem); margin: auto; } #mobile .sr .ww .section04 > ul > li { width: 100%; } #mobile .sr .ww .section04 > ul > li:not(:first-child) { margin-top: 1rem; } #mobile .sr .ww .section04 > ul > li::before { height: .5rem; background-size: contain; } #mobile .sr .ww .section04 > ul > li > div { padding: 3rem 0 3rem 10rem; flex-wrap: wrap; } #mobile .sr .ww .section04 > ul > li > div span { font-size: 1.3rem; padding-bottom: .5rem; order: 1; } #mobile .sr .ww .section04 > ul > li > div img { width: 4.3rem; order:0; position: absolute; left: 2.5rem; } #mobile .sr .ww .section04 > ul > li > div h3 { font-size: 1.9rem; order: 2; padding-top: 0; } #mobile .sr .ww .section04 > ul > li .block2 { padding: .5rem 2.5rem; } #mobile .sr .ww .section04 > ul > li .block2 li { padding: 2rem 0 2rem .5rem; font-size: 1.4rem; line-height: 1.42; } #mobile .sr .ww .section04 > ul > li .block2 li:not(:first-child) { background-image: linear-gradient(to left, #cccccc 4px, rgba(255,255,255,0) 2px); } #mobile .sr .ww .section04 > ul > li .block2 li span { width: 10rem; } #mobile .sr .ww .section05 { padding: 5.5rem 0 10rem; background: #f9f9f9; } #mobile #sub .sr .ww .section05 > ul { flex-direction: column; width: calc(100% - 2rem); padding-bottom: 17.75rem; } #mobile .sr .ww .section05 > ul > li { width: 100%; } #mobile .sr .ww .section05 > ul > li:first-child { order: 1; margin-top: 4rem; } #mobile .sr .ww .section05 > ul > .info { right: 1rem; width: calc(100% - 2rem); height: auto; padding: 1rem 2.5rem 2.5rem; } #mobile .sr .ww .section05 > ul > .info li { line-height: 1.4; padding: 1.5rem 0 1.5rem 8rem; font-size: 1.5rem; white-space: unset; } #mobile .sr .ww .section05 > ul > .info li span { font-size: 1.4rem; } #mobile .sr .ww .section05 > ul > .info > span { padding-top: .5rem; font-size: 1.25rem; line-height: 1.36; white-space: unset; display: flex; } #mobile .sr .ww .section05 > ul > .info > span i { margin-right:.25rem; } #mobile .sr .ww .section05 > ul > li p { padding-top: 2.5rem; margin: 0; font-size: 1.9rem; line-height: 1.47; text-align: center; } #mobile .sr .ww .section05 > ul > li p span { font-size: 1.5rem; padding-top: 2rem; line-height: 1.46; } #mobile .sr .ww .section05 > ul > li p::before { width: 2.25rem; height: .3rem;left: 0rem; right: 0 } /* 윤리경영 */ #mobile .sr .etm { width: 100%; margin-top: 5.5rem; } #mobile .sr .etm section { width: 100%; padding: 5.5rem 0; } #mobile .sr .etm section > p, #mobile .sr .etm section img { width: calc(100% - 4rem); margin: auto; } #mobile .sr .etm .section01 { padding: 5.5rem 0 4.5rem; } #mobile .sr .etm .section01 > p { font-size: 1.4rem; padding: 2.5rem 1rem; } #mobile .sr .etm .section01 img { margin-top: 4.5rem; } #mobile .sr .etm .section02 h3 { padding-bottom: 2.5rem; } #mobile .sr .etm .section02 p span { font-size: 1.6rem; line-height: 1.68; padding-bottom: .5rem; } #mobile .sr .etm .section02 p { font-size: 1.5rem; line-height: 1.73; padding-top: 3rem; } #mobile .sr .etm .section03 { padding: 5.5rem 0 10rem; } #mobile .sr .etm .section03 h3 { padding-bottom: .5rem; } #mobile .sr .etm .section03 p { font-size: 1.5rem; line-height: 1.73; } #mobile .sr .etm .section03 img { margin-top: 4.5rem; } /* 사회공헌 */ #mobile .sr .sc { width: 100%; margin-top: 5rem; } #mobile .sr .sc .section01 { background: #f9f9f9; padding-top: 2.5rem; padding-bottom: 2.5rem; } #mobile .sr .sc .section01 ul { flex-direction: column; padding: 0 2rem; } #mobile .sr .sc .section01 ul li { flex: initial; width: 25rem; height: 15rem;} #mobile .sr .sc .section01 ul li+li { margin-top: 1.5rem; } #mobile .sr .sc .section01 ul li:not(:first-child) { margin-left: 0; } #mobile .sr .sc .section01 ul li:nth-child(2n) { margin-top: 1.5rem; margin-left: 7.5rem; } #mobile .sr .sc .section01 ul li .count { font-size: 5rem; line-height: 3.6rem; } #mobile .sr .sc .section01 ul li .num span { font-size: 1.5rem; } #mobile .sr .sc .section01 ul li .tit { font-size: 1.6rem; margin: 1.5rem 0 1rem; } #mobile .sr .sc .section01 ul li .date { font-size: 1.4rem; } #mobile .sr .sc .section01 ul li .date::before { width: 1.1rem; height: 1.1rem; margin-right: 0.5rem; background: url(../images/social/contri_icon_clock_m.png) no-repeat; background-size: contain; } #mobile .sr .sc .section01 ul li:hover { background: url(../images/social/contri_onbg.png) no-repeat 50% 50%; } #mobile .sr .sc .section01 ul li:hover .date::before { background: url(../images/social/contri_icon_clock_wm.png) no-repeat; background-size: contain; } #mobile .sr .sc .top { padding: 5.5rem 0 0; } #mobile .sr .sc .top h3 { font-size: 2.4rem; } #mobile .sr .sc .top p { font-size: 1.5rem; line-height: 1.73; letter-spacing: -.075rem; margin-top: .5rem; } #mobile .sr .sc .section .box_wrap { margin-top: 2rem; flex-direction: column; padding: 0 1rem; } #mobile .sr .sc .section .box_wrap .box { width: 100%; min-height: auto; padding: 2rem 2rem 3rem; } #mobile .sr .sc .section .box_wrap .box .tit { font-size: 2.4rem; margin-top: 2.5rem; } #mobile .sr .sc .section .box_wrap .box p { font-size: 1.5rem; line-height: 1.6; letter-spacing: -.1rem; margin-top: 1rem; } #mobile .sr .sc .section .box_wrap .box:last-of-type { margin-top: 1rem; } #mobile .sr .sc .section02 .box_wrap .box:first-of-type { padding: 2rem 2rem 3rem; flex-direction: column-reverse; } #mobile .sr .sc .section03 .box_wrap .box:last-of-type { padding: 2rem 2rem 3rem; flex-direction: column-reverse; } #mobile .sr .sc .section04 { padding-bottom: 10rem; padding-top: 5.5rem; margin-top: 2rem; flex-direction: column; display: flex; } #mobile .sr .sc .section04 h3 { font-size: 2.4rem; order: 1; } #mobile .sr .sc .section04 p { font-size: 1.5rem; line-height: 1.73; letter-spacing: -.075rem; margin-top: 1.5rem; order: 3; padding: 0 1rem; } #mobile .sr .sc .section04 .box_wrap { width: calc(100% - 2rem); height: 17.4rem; border-radius: 6.5rem; margin: 2.5rem auto 0; padding: 1.5rem 1rem; box-shadow: 1.5px 2.5px 4px 0.5px rgba(0, 0, 0, 0.05); order: 2; } #mobile .sr .sc .section04 .box_wrap .tit { font-size: 1.5rem; } #mobile .sr .sc .section04 .box_wrap ul { width: calc(100% - 2rem); margin: 1rem auto 0; } #mobile .sr .sc .section04 .box_wrap ul li { width: calc(50% + 1.8rem); height: 12rem; border-radius: 6rem; box-shadow: 1.5px 2.5px 4px 0.5px rgba(0, 0, 0, 0.1); } #mobile .sr .sc .section04 .box_wrap ul li:first-child .icon img { width: 4.5rem; } #mobile .sr .sc .section04 .box_wrap ul li:last-child .icon img { width: 4.1rem; } #mobile .sr .sc .section04 .box_wrap ul li .txt { font-size: 1.4rem; margin-top: 1.5rem; } /* ================================ 인재채용 =============================== */ /* 공통 */ #mobile .recruit .sub_visual { background-image: url(../images/recruit/recruit_bg_m.jpg); } #mobile .recruit .contents { max-width: 100%; width: 100%; margin: auto; } #mobile .recruit .tab_small { margin-bottom: 3rem; } #mobile .recruit .banner { width: calc(100% - 4rem); background-size: cover; background-position: 140px 0; padding: 4.2rem 2rem; height: fit-content; margin: 6.5rem auto 0; } #mobile .recruit .banner h2 { font-size: 2.7rem; padding-top: 2rem; } #mobile .recruit .banner h2:before { width: 4.1rem; height: .35rem; } #mobile .recruit .banner p { font-size: 1.5rem; line-height: 1.5; padding-top: 1.5rem; } #mobile .recruit .banner img { right: -1.25rem; top: -4.8rem; width: 16rem; } /* 팝업 */ #mobile .recruit .popup { cursor: auto; padding: 0; } #mobile .recruit .popup .pop_close { position: relative; display: block; width: 5.25rem; height: auto; margin: 5rem auto 0; transform: scale(1); } #mobile .recruit .popup .pop_close:active { transform: rotate(90deg); } #mobile .recruit .popup ul { width: calc(100% - 2rem); margin: 3rem auto 10rem; } #mobile .recruit .popup ul li:first-child { flex-direction: column; flex-wrap: wrap; height: fit-content; } #mobile .recruit .popup .pop_title { padding: 5rem 2rem 2rem; } #mobile .recruit .popup .pop_title dt { font-size: 3rem; line-height: 1.3; padding: 3.25rem 0; } #mobile .recruit .popup .pop_title dt::before, #mobile .recruit .popup .pop_title dt::after { width: 2.3rem; height: 1.8rem; background-size: contain; } #mobile .recruit .popup .pop_title dd { font-size: 1.6rem; padding-top: 1.5rem; } #mobile .recruit .popup .pop_title dd i { position: relative; height: 1.35rem; margin: 0 .8rem; top: .1rem; } #mobile .recruit .popup .pop_title dd span { font-size: 1.3rem; padding-top: 1.2rem; } #mobile .recruit .popup .img { position: relative; height: 34.3rem; } #mobile .recruit .popup .img::before { width: 25.9rem; right: -1.9rem; } #mobile .recruit .popup .img::after { width: 7.7rem; right: -9.5rem; } #mobile .recruit .popup .img span { width: 5.5rem; display: block; position: absolute; transform: skew(-29deg); } #mobile .recruit .popup .img span:first-of-type{ height: 9.85rem; right: 16.5rem; top: 1.85rem; z-index: 0; } #mobile .recruit .popup .img span:last-of-type{ height: 20rem; right: -1.5rem; } #mobile .recruit .popup .img img { right: -10rem; height: 28rem; width: auto; opacity: 0; } #mobile .recruit .popup .article { padding: 1.85rem 2rem; } #mobile .recruit .popup .article dl { padding: 4.65rem 0 4.5rem 4.5rem; } #mobile .recruit .popup .article dl:not(:last-child) { border-bottom: .1rem solid #e8e8e8; } #mobile .recruit .popup .article dl dt { font-size: 1.8rem; line-height: 1.3; } #mobile .recruit .popup .article dl dt span { font-size: 2rem; } #mobile .recruit .popup .article dl dd { line-height: 1.5; font-size: 1.5rem; padding-top: 1.5rem; letter-spacing: -.1rem; } /* 인재상 */ #mobile .recruit .tab_box { margin-top: 4rem; } #mobile .recruit .tab_box ul { width: 100%; } #mobile .recruit .tab_box ul li { width: 50%!important; } #mobile .recruit .type { padding: 0 2rem 10rem; } #mobile .recruit .type ul li { width: 100%; padding: 4.5rem 0 4rem; } #mobile .recruit .type ul li:last-child { padding-bottom: 0; } #mobile .recruit .type ul li:nth-child(2) { background-image: linear-gradient(to right, #e8e8e8 60%, white 40%); background-position: left top; background-repeat: repeat-x; background-size: 9px 1px; } #mobile .recruit .type ul li:nth-child(3), #mobile .recruit .type ul li:nth-child(4), #mobile .recruit .type ul li:nth-child(5), #mobile .recruit .type ul li:nth-child(6) { background-image: linear-gradient(to right, #e8e8e8 60%, white 40%); background-position: left top; background-repeat: repeat-x; background-size: 9px 1px; } #mobile .recruit .type ul li:nth-child(6) .icon img { margin-left: .2rem; } #mobile .recruit .type .icon { width: 6.6rem; height: 6.6rem; margin-bottom: 3.5rem; } #mobile .recruit .type ul li:nth-child(1) .icon img { width: 3.5rem; } #mobile .recruit .type ul li:nth-child(2) .icon img { width: 3.4rem; } #mobile .recruit .type ul li:nth-child(3) .icon img { width: 3rem; } #mobile .recruit .type ul li:nth-child(4) .icon img { width: 3.1rem; } #mobile .recruit .type ul li:nth-child(5) .icon img { width: 2.8rem; } #mobile .recruit .type ul li:nth-child(6) .icon img { width: 3rem; } #mobile .recruit .type .eng_tit { font-size: 1.4rem; } #mobile .recruit .type .tit { font-size: 1.7rem; padding: 1rem 0 1.5rem; } #mobile .recruit .type p { font-size: 1.3rem; line-height: 1.76; } /* 직무소개 - 목록 */ #mobile .recruit .contents.job { padding-bottom: 10rem; } #mobile .recruit .job ul li { width: calc(100% - 4rem); height: 46.55rem; padding: 4rem 0; margin: 3rem 2rem 0; } #mobile .recruit .job ul li > h3 { padding: 0 2.5rem; font-size: 1.6rem; } #mobile .recruit .job ul li > h3 i { width: .1rem; height: 1.3rem; margin: 0 .8rem; position: relative; top: .15rem; } #mobile .recruit .job ul li > h3 span { font-size: 1.3rem; padding-top: 1rem; } #mobile .recruit .job ul li > p { font-size: 1.5rem; line-height: 1.4; padding-top: 3rem; } #mobile .recruit .job ul li > div { width: 25.25rem; height: 27.35rem; padding-top: 2.15rem; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: bottom; mask-position: bottom; -webkit-mask-size: cover; mask-size: cover; } #mobile .recruit .job ul li > div:after { content: ''; width: 25.25rem; height: 25.25rem; right: 0; left: 0; margin: auto; } #mobile .recruit .job ul li > div img { width: auto; height: 34rem; bottom: unset; top: 3.5rem; } #mobile .recruit .job ul li:nth-child(14) > div img.posr { right: unset; } /* 14. 박지용사원 모바일환경에서 이미지 왼쪽정렬 */ #mobile .recruit .job ul li > a { margin: 3rem auto 0; width: 13.25rem; height: 3.8rem; font-size: 1.2rem; border-radius: 1.875rem; } #mobile .recruit .job ul li > a img { margin-left: 1.35rem; width: 1rem; } #mobile .recruit .job ul li:hover { box-shadow: 5px 6px 10.5px 0px rgba(4, 0, 0, 0.16); } #mobile .recruit .job ul li:hover > div img { bottom: unset; top: 0; } /* 인사제도 */ #mobile .recruit .personnel { padding: 6.5rem 0 10rem; margin-top: 6rem; } #mobile .recruit .personnel .inner { flex-direction: column; padding: 0 2rem; } #mobile .recruit .personnel .step01 { display: flex; justify-content: space-between; } #mobile .recruit .personnel .step01 .box { width: calc(50% - 1.75rem); min-height: 17.55rem; border-radius: .5rem; padding: 0 1.8rem; margin-left: 0; } #mobile .recruit .personnel .step01 .box:last-of-type { margin-top: 0; } #mobile .recruit .personnel .step01 .box:last-of-type::before { width: 3.5rem; height: 16.7rem; background: url(../images/recruit/personnel_line01_m.png) no-repeat 50% 50%; background-size: contain; top: 50%; left: -3.5rem; } #mobile .recruit .personnel .step01 .box .tit { font-size: 2rem; } #mobile .recruit .personnel .step01 .box p { font-size: 1.4rem; letter-spacing: -.07rem; line-height: 1.35; margin-top: 1.5rem; } #mobile .recruit .personnel .step02 { width: 20.4rem; height: 18.8rem; background: url(../images/recruit/personnel_ellipse_m.png) no-repeat 50% 50%; background-size: contain; margin-left: 0; margin-top: 7.9rem; } #mobile .recruit .personnel .step02 .tit { font-size: 2rem; top: calc(50% - .85rem); left: 0; } #mobile .recruit .personnel .arrows { display: flex; } #mobile .recruit .personnel .arrows > div { width: 2.5rem; height: 3.6rem; } #mobile .recruit .personnel .arrows > div > span::after { width: .9rem; height: .9rem; border-bottom-width: .4rem; border-right-width: .4rem; transform: rotate(63deg); } #mobile .recruit .personnel .arrows > div > span:nth-of-type(1):after { left: .75rem; top: 0rem; } #mobile .recruit .personnel .arrows > div > span:nth-of-type(2):after { left: .35rem; top: 1.1rem; } #mobile .recruit .personnel .arrows > div > span:nth-of-type(3):after { left: 0; top: 2.2rem; } #mobile .recruit .personnel .arrows > div:last-of-type { margin-top: 0; margin-left: 7rem; } #mobile .recruit .personnel .arrows > div:last-of-type > span::after { transform: rotate(27.5deg); } #mobile .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(1):after { left: 0; top: 0; } #mobile .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(2):after { left: 0.35rem; top: 1.1rem; } #mobile .recruit .personnel .arrows > div:last-of-type > span:nth-of-type(3):after { left: 0.75rem; top: 2.2rem; } #mobile .recruit .personnel .step03 { display: flex; } #mobile .recruit .personnel .step03 .circle { width: 10rem; height: 10rem; margin-left: 0; margin-top: 1.1rem; } #mobile .recruit .personnel .step03 .circle:first-of-type .icon { width: 2.2rem; height: 3.5rem; background: url(../images/recruit/personnel_icon01_m.png) no-repeat 50% 50%; background-size: contain; } #mobile .recruit .personnel .step03 .circle:last-of-type { margin-top: 1.1rem; margin-left: 5.5rem; } #mobile .recruit .personnel .step03 .circle:last-of-type .icon { width: 3.1rem; height: 3.5rem; background: url(../images/recruit/personnel_icon02_m.png) no-repeat 50% 50%; background-size: contain; } #mobile .recruit .personnel .step03 .circle .txt { font-size: 1.5rem; margin-top: 1rem; } #mobile .recruit .personnel .step03 .circle::after { width: .5rem; height: 2.6rem; background: url(../images/recruit/personnel_line02_m.png) no-repeat 50% 50%; background-size: contain; right: calc(50% - .3rem); bottom: -2.6rem; } #mobile .recruit .personnel .step04 { display: flex; justify-content: center; width: 100%; } #mobile .recruit .personnel .step04 .box { width: calc(50% - .9rem); max-width: 13.7rem; height: 7rem; border-radius: .5rem; margin-left: 0; margin-top: 3.6rem; } #mobile .recruit .personnel .step04 .box p { font-size: 1.4rem; letter-spacing: -.07rem; line-height: 1.35; } #mobile .recruit .personnel .step04 .box:last-of-type { margin-top: 3.6rem; margin-left: 1.8rem; } /* 복리후생 */ #mobile .recruit .benefits { margin: 6rem auto 10rem; padding: 0 2rem; } #mobile .recruit .benefits ul { box-shadow: 0px 5px 25px 0.5px rgba(0, 0, 0, 0.1); } #mobile .recruit .benefits ul li { width: 100%; padding: 5.5rem 0; } #mobile .recruit .benefits ul li:nth-child(4), #mobile .recruit .benefits ul li:nth-child(8) { background: #fff; } #mobile .recruit .benefits ul li:nth-child(1), #mobile .recruit .benefits ul li:nth-child(5), #mobile .recruit .benefits ul li:nth-child(2n-1) { background: rgba(0, 94, 184, .05); } #mobile .recruit .benefits ul li .num { font-size: 2.5rem; margin-left: -7.5rem; } #mobile .recruit .benefits ul li .tit { font-size: 2rem; margin: 2rem 0 1.5rem; } #mobile .recruit .benefits ul li p { font-size: 1.4rem; line-height: 1.42; } #mobile .recruit .benefits ul li:nth-child(1) .icon { width: 5rem; height: 4.2rem; } #mobile .recruit .benefits ul li:nth-child(2) .icon { width: 5rem; height: 3.45rem; } #mobile .recruit .benefits ul li:nth-child(3) .icon { width: 5rem; height: 4.5rem; margin-top: 0rem; } #mobile .recruit .benefits ul li:nth-child(4) .icon { width: 5rem; height: 4.65rem; margin-top: -.5rem; } #mobile .recruit .benefits ul li:nth-child(5) .icon { width: 4.45rem; height: 5rem; margin-top: -.5rem; } #mobile .recruit .benefits ul li:nth-child(6) .icon { width: 5.8rem; height: 4.05rem; margin-top: 0rem; } #mobile .recruit .benefits ul li:nth-child(7) .icon { width: 5rem; height: 4.4rem; margin-top: -.5rem; } #mobile .recruit .benefits ul li:nth-child(8) .icon { width: 5rem; height: 4.95rem; margin-top: -.5rem; } /* 개인정보처리방침 */ #mobile .graybox { padding: 6.5rem 0 0; } #mobile .graybox .policy > .inner { text-align: center; margin-top: 6.5rem; } #mobile .graybox .policy > .inner .tab_inner ul li { height: 4.5rem; line-height: 4.5rem; } #mobile .graybox .policy > .inner .tab_inner ul li.on { box-shadow: 0px 0px 16px 4px rgba(34, 34, 34, 0.2); } #mobile .graybox .policy > .inner .tab_inner ul li a { font-size: 1.35rem; letter-spacing: -.135rem; } #mobile .graybox .policy > .inner .select_wrap { top: 6.5rem; right: 50%; transform: translateX(50%); width: 100%; } #mobile .graybox .policy > .inner .terms_site .site_list { min-width: auto; } #mobile .graybox .policy > .inner .terms_site.select01 { width: 100%; max-width: 19rem; text-align: center; margin: 0 auto; } #mobile .graybox .policy > .inner .terms_site.select02 { width: 100%; max-width: 25rem; text-align: center; margin: 0 auto; } #mobile .graybox .policy > .inner .select_row { max-width: 22rem; width: 100%; position: initial; transform: translateY(0); border: 0; border-bottom: 2px solid #222; margin: 3rem auto 0; } #mobile .graybox .policy > .inner .terms_site .site_selected { font-size: 1.3rem; line-height: 1.2; min-height: 4.8rem; padding: 0 1rem; } #mobile .graybox .policy > .inner .terms_site .site_list li a { font-size: 1.3rem; } #mobile .graybox .policy > .inner .select_row::after { right: 1rem; } #mobile .graybox .policy > .inner .select_row select { padding: 0 1rem; } #mobile .graybox .policy > .inner .select_row label { font-size: 1.5rem; padding: 0 1rem; } #mobile .graybox .policy .box { margin: 2.7rem auto 10rem; padding: 3.5rem .9rem; width: calc(100% - 2rem); } #mobile .graybox .policy .box h3 { font-size: 1.7rem; margin-bottom: 2.5rem; } #mobile .graybox .policy .box ol > li+li { margin-top: 2.5rem; } #mobile .graybox .policy .box ol > li:not(:last-child) { padding-bottom: 2.5rem; } #mobile .graybox .policy .box ol > li .tit { font-size: 1.5rem; } #mobile .graybox .policy .box ol > li > p { font-size: 1.3rem; line-height: 1.53; margin-top: 1.5rem; position: relative; } #mobile .graybox .policy .box ol > li > p.gray { padding-left: 1rem; } #mobile .graybox .policy .box ol > li > p.gray span { position: absolute; top: 0; left: 0; } #mobile .graybox .policy .box ol > li > p .inner_tit { display: inline-block; width: fit-content; } #mobile .graybox .policy .box ol > li .sub_tit { font-size: 1.4rem; } #mobile .graybox .policy .box ol > li > p+.sub_tit, #mobile .graybox .policy .box ol > li > ul+.sub_tit { margin-top: 2rem; } #mobile .graybox .policy .box ol > li > .sub_tit+ul { margin-top: 1.5rem; } #mobile .graybox .policy .box ol > li > ul > li { padding-left: 1rem; font-size: 1.3rem; line-height: 1.53; } #mobile .graybox .policy .box ol > li dl { font-size: 1.3rem; line-height: 1.53; display: flex; } #mobile .graybox .policy .box ol > li dl dt { width: 5.5rem; flex-shrink: 0; } #mobile .graybox .policy .box ol > li .download { padding: 0 1rem 1.6rem .5rem; font-size: 1.3rem; width: 17.5rem; margin-top: 2.5rem; } #mobile .graybox .policy .box ol > li .download i { width: 1.5rem; height: 1.5rem; background-size: contain; } #mobile .graybox .privacy .box ol > li > .tit+p:first-of-type { margin-bottom: 2rem; } #mobile .graybox .privacy .box ol > li:first-child > .tit+p:first-of-type { margin-bottom: 0; } /* error */ #mobile .error .contents { padding: 0 2rem; } #mobile .error img { width: 6.2rem; } #mobile .error h2 { font-size: 2.5rem; line-height: 1.28; margin: 2.5rem 0 1rem; text-align: center; } #mobile .error p { font-size: 1.4rem; line-height: 1.57; } #mobile .error a { margin-top: 3rem; width: 17.4rem; height: 3.5rem; border-radius: 1.6rem; font-size: 1.3rem; line-height: 3.5rem; } /* ================================ Special Responsive =============================== */ @media screen and (max-width:316px) { #mobile .company .announce .tb_box .tb_row .date, #mobile .company .announce .tb_box .tb_row .period { width: 100%; } } @media screen and (max-width:320px) { #mobile .footer .footer_wrap ul li:not(:last-child)::after { margin: 0 2.5vw; } } @media screen and (min-width:660px) and (max-width:1024px){ /* 인재채용 - 직무소개 */ #mobile .recruit .popup .pop_title { position: absolute; } #mobile .recruit .job ul li { width: calc(100% / 2 - 4rem); } } @media screen and (min-width:1025px) { /* 인재채용 - 직무소개 */ #mobile .recruit .popup ul li:first-child { flex-direction: row; justify-content: center; } #mobile .recruit .popup .pop_title { width: fit-content; } #mobile .recruit .popup .img { width: 40rem; } #mobile .recruit .popup .img::after { width: 30rem; right: -32rem; } #mobile .recruit .job ul li { width: calc(100% / 3 - 4rem); } } /* =========================================================================== */ /* =============================== Animation =============================== */ /* =========================================================================== */ @keyframes intro_mobile { 0% { -webkit-clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); clip-path: polygon(0% 75%, 25% 0%, 100% 25%, 75% 100%); width: 33.4rem; height: 32.8rem; transform: translateY(0); } 40% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 33.4rem; height: 32.8rem; transform: translateY(0); } 60% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 33.4rem; height: 32.8rem; transform: translateY(0); } 100% { -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%); width: 100%; height: 100%; transform: translateY(0); } } @keyframes interviewArrow_m { 0% { left: 3rem; } 50% { left: 4rem; } 100% { left: 3rem; } } /* ================================ 두산건설 We've 골프단 - 2023.03.28 =============================== */ /* 공통 */ #mobile .golf #rightnavi { left: 2rem; top: unset; bottom: 0.75rem; transform: translateY(0); } #mobile .golf #rightnavi li { margin: 1.25rem 0; width: .6rem; height: .6rem; } #mobile .golf #rightnavi li a { width: .6rem; height: .6rem; } #mobile .golf #rightnavi li a span { font-size: 1.4rem; } #mobile .golf #rightnavi li.active { padding-bottom: 6rem; } #mobile .golf #rightnavi li.active a span { margin-top: 1.5rem; } /* 티저 */ #mobile .golfTeaser .players { left: 0; transform: translate(0); top: auto; bottom: -25rem; } #mobile .golf .golfTeaser .section article { padding: 0 2rem; } #mobile .golf .golfTeaser .section1 article { transform: translate(0); top: 14vh; letter-spacing: -.1rem; } #mobile .golf .golfTeaser .section1 article p { font-size: 2.1rem; padding-bottom: 1.5rem; } #mobile .golf .golfTeaser .section1 article p:last-of-type { height: 3.2rem; padding-left: 4.5rem; padding-bottom: 0; margin-top: 4rem; background-size: 3.6rem 3.2rem; right: 0; font-size: 2.4rem; } #mobile .golf .golfTeaser .section1 article p:last-of-type b:first-child { font-size: 3.6rem; line-height: .75; } #mobile .golf .golfTeaser .section1 article p:last-of-type b:last-child { font-size: 3.5rem; } #mobile .golf .golfTeaser .section1 article p:last-of-type::before { top: -2.5rem; animation: .8s wideMob ease-in-out; } #mobile .golf .golfTeaser .section1 article h2 { font-size: 7.2rem; letter-spacing: -.2rem; filter: drop-shadow(.1rem .15rem .25rem rgba(47, 48, 53, .3)); line-height: .95; } #mobile .golf .golfTeaser .section1 article h2:first-of-type::before { width: 5.8rem; height: 5.8rem; left: 5.3rem; background-size: cover; } #mobile .golf .golfTeaser .section1 .scroll_down { left: 0; right: 0; margin: auto; bottom: 6.3rem; } #mobile .golf .golfTeaser .section1 .scroll_down::after { right: 0; margin: auto; width: 1.5rem; height: 2.2rem; background-size: contain; } #mobile .golf .golfTeaser .section1 .scroll_down span { display: none; } #mobile .golf .golfTeaser .section1.ani .players { bottom: -35vh; } #mobile .golf .golfTeaser .section1.ani article *:nth-child(2)::before { animation: 1s jumpMob 1.8s; animation-iteration-count: 3; } #mobile .golf .golfTeaser .section1.ani article *:nth-child(4)::before { animation-delay: 1.6s; animation-fill-mode: forwards; } #mobile .golf .golfTeaser .section2 article p { font-size: 2.5rem; letter-spacing: -.1rem; } #mobile .golf .golfTeaser .section2 article h2 { font-size: 5.5rem; margin-top: 1.5rem; line-height: 1.1; } #mobile .golf .golfTeaser .section2 article ul { padding-top: 3.5rem; font-size: 2rem; } #mobile .golf .golfTeaser .section2 article ul li:nth-child(even) { width: .3rem; height: .3rem; margin: 0 .9rem; transform: translateY(0) rotate(15deg); } #mobile .golf .golfTeaser .section:not(.footer) { flex-direction: column; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article { position: relative; transform: translateX(0); width: 100%; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article h2 { font-size: 6rem; margin-left: -1rem; letter-spacing: -.05rem; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article h2::before { width: 4.8rem; height: .4rem; margin-left: 1rem; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article p { font-size: 1.5rem; line-height: 1.53; letter-spacing: -.05rem; padding-top: 2.35rem; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article h3 { width: 11rem; height: 3rem; font-size: 1.6rem; margin-top: 3rem; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article h3 span { font-size: 1.85rem; padding-right: .2rem; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article:first-of-type { margin-top: 8.5vh; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child { justify-content: center; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child img { height: 90%; bottom: 0; left: -8vw; } #mobile .golf .golfTeaser .section:not(.section1, .section2, .footer) article:last-child::after { width: 73vw; height: 73vw; transform: translateY(0); position: absolute; top: 9.5vh; } #mobile .golf .golfTeaser .section5 article:last-child img { left: 0 !important; } /* 박결 프로 단독 좌우 조정 */ /* ================================ 골프단 메인 =============================== */ /* 공통 */ #mobile .golf .golfMain .section:not(.footer) .title_box h1 { font-size: 2.7rem; font-weight: 450; } #mobile .golf .golfMain .section:not(.footer) .title_box p { font-size: 1.5rem; padding-top: 2rem; line-height: 1.53; } #mobile .golf .golfMain .section:not(.footer) .border_frame .bdt, #mobile .golf .golfMain .section:not(.footer) .border_frame .bdb { height: .2rem; } #mobile .golf .golfMain .section:not(.footer) .border_frame .bdl, #mobile .golf .golfMain .section:not(.footer) .border_frame .bdr { width: .2rem; } #mobile .golf .golfMain .section:not(.section4, .footer) .border_frame:hover { box-shadow: unset; } #mobile .golf .golfMain .section:not(.footer) .border_frame:hover .bdt, #mobile .golf .golfMain .section:not(.footer) .border_frame:hover .bdb { width: unset; transition-delay: unset; } #mobile .golf .golfMain .section:not(.footer) .border_frame:hover .bdr, #mobile .golf .golfMain .section:not(.footer) .border_frame:hover .bdl { height: unset; transition-delay: unset; } #mobile .golf .golfMain .section:not(.section4, .footer) .border_frame:active { box-shadow: 4px 7px 10.5px 0px rgba(4, 0, 0, 0.16); } #mobile .golf .golfMain .section:not(.footer) .border_frame:active .bdt { width: 100%; transition-delay: .1s; } #mobile .golf .golfMain .section:not(.footer) .border_frame:active .bdr { height: 100%; transition-delay: .2s; } #mobile .golf .golfMain .section:not(.footer) .border_frame:active .bdb { width: 100%; transition-delay: .3s; } #mobile .golf .golfMain .section:not(.footer) .border_frame:active .bdl { height: 100%; transition-delay: .4s; } #mobile .golf .golfMain .section:not(.footer) .golf_search { position: relative; top: 0; padding: 1rem 0 1rem 1.5rem; max-width: 22.5rem; margin: auto; } #mobile .golf .golfMain .section:not(.footer) .golf_search input { font-size: 1.7rem; padding-right: .5rem; width: calc(100% - 4.5rem); } #mobile .golf .golfMain .section:not(.footer) .golf_search button[type="button"] { margin-left: auto; padding-right: .5rem; } #mobile .golf .golfMain .section:not(.footer) .golf_search button[type="button"] img { width: 1.8rem; } #mobile .golf .golfMain .section:not(.footer) .golf_search button[type="reset"] { width: 1.5rem; height: 1.5rem; margin-right: .4rem; } #mobile .golf .golfMain .section:not(.footer) .golf_search button[type="reset"] img { width: 100%; } #mobile .golf .golfMain .section:not(.footer) ol { align-items: center; } #mobile .golf .golfMain .section:not(.footer) ol li:not(.golf_pagination) { width: fit-content; height: 100%; margin: 0 .5rem; padding: .4rem .7rem; } #mobile .golf .golfMain .section:not(.footer) ol .golf_pagination { margin: 0 .95rem; } #mobile .golf .golfMain .section:not(.footer) ol .golf_pagination li { width: 1.85rem; height: 1.85rem; margin: 0 .85rem; font-size: 1.3rem; } #mobile .golf .golfMain .section:not(.footer) ol .golf_pagination li.on { font-size: 1.4rem; } #mobile .golf .golfMain .section:not(.footer) ol .golf_pagination li button { position: absolute; } #mobile .golf .golfMain .section:not(.footer) ol .golf_pagination li:nth-child(n + 4) { display: none; } #mobile .golf .golfMain .section:not(.footer) .null { font-size: 1.3rem; padding: 12.5rem 0; } /* 배너 */ #mobile .golf .golfMain .section1 .scroll_down { display: none; } #mobile .golf .golfMain .section1 article { bottom: auto; top: 18vh; padding: 0 2rem; } #mobile .golf .golfMain .section1 article h2 { font-size: 3.5rem; } #mobile .golf .golfMain .section1 article h2:last-of-type { font-weight: 200; } #mobile .golf .golfMain .section1 article h2 span.slideUp { top: -10rem; } #mobile .golf .golfMain .section1 article p { font-size: 2.4rem; margin-bottom: 1rem; } #mobile .golf .golfMain .section1 article div * { font-size: 1.1rem; margin-top: 5rem; padding: 0 1.8rem; } #mobile .golf .golfMain .section1 article div *:after { background: url("../images/common/arrow_7x11_w.png") 50% 50% no-repeat; width: .65rem; height: 1.1rem; background-size: contain; } #mobile .golf .golfMain .section1 article div .swiper-button-next:before { content: ''; display: inline-block; width: .1rem; height: 1rem; left: -.1rem; } #mobile .golf .golfMain .section1 .swiper-slide img { height: 100%; object-fit: cover; } /* 선수소개 */ #mobile .golf .golfMain .section2 .title_box { margin: 6.5rem auto 0; padding-left: 0; text-align: center; } #mobile .golf .golfMain .section2 .seciton2_cursor { width: 7.5rem; height: 7.5rem; cursor:none; pointer-events: auto; position: absolute; top: auto; bottom: 6.8rem; right: 0; left: 0; margin: auto; transform: scale(0) } #mobile .golf .golfMain .section2 .seciton2_cursor span { font-size: 1.2rem; margin-bottom: .5rem; line-height: 1; } #mobile .golf .golfMain .section2 .seciton2_cursor img { width: 1.1rem; height: 1.1rem; } #mobile .golf .golfMain .section2 .controller { position:absolute; top: -9rem; right: 1rem; z-index: 2; height: fit-content; width: 13.65rem; } #mobile .golf .golfMain .section2 .controller .splide__arrows button { padding: 4rem 1rem; } #mobile .golf .golfMain .section2 .controller .splide__arrows button:hover { opacity: 1; } #mobile .golf .golfMain .section2 .controller .splide__arrows button:active { opacity: .7; } #mobile .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--prev { padding-left: 4rem; } #mobile .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--next { padding-right: 4rem; } #mobile .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--prev:after { border-width: 6px 6px 6px 0; margin-right: 1rem; } #mobile .golf .golfMain .section2 .controller .splide__arrows button.splide__arrow--next:after { border-width: 6px 0 6px 6px; margin-left: 1rem; } #mobile .golf .golfMain .section2 .splide { margin: 11.1rem auto 6.5rem; } #mobile .golf .golfMain .section2 .splide .splide__list { max-height: none; min-height: auto; height: 113vw; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide { min-height: auto; height: calc(113vw - 4rem); width: calc(100% - 8rem); margin-right: 4rem; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide:after { content:''; height: 21.5%; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle { transition: none; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle:after { background: url("../images/golf/sec02_hover_bg_mob.png") 50% 50% no-repeat; background-size: cover; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide .mask_circle h2 { font-size: 3.5rem; top: 11%; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide h4 { bottom: 3.5%; font-size: 2rem; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide h4 span { font-size: 1.4rem; padding-left: 6%; } #mobile .golf .golfMain .section2 .splide .splide__list .splide__slide h4 span:before { height: 1.2rem; right: 2.5vw; } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active { box-shadow: 6.5px 5.5px 12px 0px rgba(4, 0, 0, 0.2); } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active .openPopup { pointer-events: none; } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active .openPopup .seciton2_cursor { transform: scale(1); } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active .openPopup .seciton2_cursor:active { transform: scale(.8); } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active { height: 100%; } #mobile .golf .golfMain .section2 .splide .splide__slide.is-active:after { transition-delay: .1s; } /* 골프단 소식 */ #mobile .golf .golfMain .section3 .title_box { margin: 6.5rem auto 0; padding-left: 0; text-align: center; } #mobile .golf .golfMain .section3 .golf_news { margin: 2rem 2rem 0; max-width: calc(100% - 4rem); } #mobile .golf .golfMain .section3 .golf_news ul { margin-top: 3rem; } #mobile .golf .golfMain .section3 .golf_news ul li { width: 100%; height: 33.1rem; margin-bottom: 3rem; } #mobile .golf .golfMain .section3 .golf_news ul li:nth-child(3n - 1) { margin: 0; margin-bottom: 3rem; } #mobile .golf .golfMain .section3 .golf_news ul li img { height: calc(100% - 10rem); } #mobile .golf .golfMain .section3 .golf_news ul li a:hover img { transform: unset; } #mobile .golf .golfMain .section3 .golf_news ul li a:active img { transform: scale(1.1); } #mobile .golf .golfMain .section3 .golf_news ul li .txt_box { height: 10rem; padding: 1.5rem 2rem; } #mobile .golf .golfMain .section3 .golf_news ul li .txt_box p { font-size: 1.5rem; } #mobile .golf .golfMain .section3 .golf_news ul li .txt_box span { font-size: 1.2rem; } #mobile .golf .golfMain .section3 .golf_pagination_wrap {margin-top: 0; margin-bottom: 6.5rem; } /* 골프단 갤러리 */ #mobile .golf .golfMain .section4 { padding-bottom: 11rem; } #mobile .golf .golfMain .section4 .border_frame:hover .img { box-shadow: none; } #mobile .golf .golfMain .section4 .border_frame:active .img { box-shadow: 4px 7px 10.5px 0px rgba(4, 0, 0, 0.16); } #mobile .golf .golfMain .section4 .title_box { margin: 6.5rem auto 0; padding-left: 0; text-align: center; } #mobile .golf .golfMain .section4 .golf_search { order: 1; } #mobile .golf .golfMain .section4 .golf_pagination_wrap { order: 3; } #mobile .golf .golfMain .section4 .golf_tab { position: relative; top: 0; font-size: 1.4rem; overflow: auto; order: 0; padding: 1rem 0; margin-bottom: 1.9rem; } #mobile .golf .golfMain .section4 .golf_tab::-webkit-scrollbar {width: auto; height: .3rem; background: #f5f5f5; } #mobile .golf .golfMain .section4 .golf_tab::-webkit-scrollbar-thumb {background: #e1e1e1; border-radius: 0; } #mobile .golf .golfMain .section4 .golf_tab button { margin-right: 2.5rem; white-space: nowrap; } #mobile .golf .golfMain .section4 .golf_tab button:last-of-type { margin-right: 0; } #mobile .golf .golfMain .section4 .golf_tab button:active { color: #005eb8; } #mobile .golf .golfMain .section4 .golf_tab button:not(:last-of-type):after { height: 1.15rem; right: -1.25rem; } #mobile .golf .golfMain .section4 .golf_gallery { margin: 1.5rem 2rem 0; display: flex; flex-direction: column; width: auto; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_frame { order: 2; margin-top: 3rem; height: auto; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner { flex-direction: column; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner li { width: 100%; margin-bottom: 1.7rem; height: auto; line-height: unset; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img { height: 50.4vw; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner li a .img .btn_play { width: 5rem; height: 5rem; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner li h3 { width: 100%; padding: 1.3rem 1rem; font-size: 1.4rem; } #mobile .golf .golfMain .section4 .golf_gallery .gallery_inner li:nth-child(3n - 1) { margin: 0 0 1.7rem; } /* 팝업 */ #mobile .golf .golfMain .popup { padding: 0 2rem; } #mobile .golf .golfMain .popup::-webkit-scrollbar {width: .3rem; background: transparent; } #mobile .golf .golfMain .popup::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, .3); } #mobile .golf .golfMain .popup .pop_close { position: absolute; top: 9.5rem; left: 50%; width: 5.25rem; height: 5.25rem; transform: scale(1) translateX(-50%); } #mobile .golf .golfMain .popup .pop_close:active { transform: rotate(90deg) translate(0, 50%); } #mobile .golf .golfMain .popup .pop_players { width: 100%; height: fit-content; margin: 17.8rem auto 10rem; flex-direction: column; letter-spacing: -.1rem; } #mobile .golf .golfMain .popup .pop_players .tab { width: 100%; } #mobile .golf .golfMain .popup .pop_players .tab .img { height: fit-content; } #mobile .golf .golfMain .popup .pop_players .tab .video { height: calc(100% - 4rem); } #mobile .golf .golfMain .popup .pop_players .tab .video #btn-play { width: 6rem; height: 6rem; } #mobile .golf .golfMain .popup .pop_players .tab .video #btn-play:active { width: 5rem; height: 5rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container { height: 4rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container::before { height: 1.3rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container button { font-size: 1.2rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container button img { max-width: 1.75rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container button:last-of-type img { max-width: 1.65rem; } #mobile .golf .golfMain .popup .pop_players .tab .tab_container button span { font-weight: 200; padding: 0 .2rem 0 .75rem; } #mobile .golf .golfMain .popup .pop_players .desc { width: 100%; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner { height: calc(100% - 7.6rem); padding: 3.5rem 2rem 0; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h1 { font-size: 1.4rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h2 { font-size: 2.8rem; padding-bottom: 1.5rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child h2 span { font-size: 1.5rem; padding-left: 1.35rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:first-child p { font-size: 1.6rem; line-height: 1.4; height: 9rem; margin: 2rem 0; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) { padding: 1.4rem 1.9rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p { font-size: 1.3rem; padding: .4rem 0; align-items: flex-start; line-height: 1.4 } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p b { width: 50%; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p b::before { width: .4rem; height: .4rem; margin-right: 1rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:nth-child(2) p span { width: 50%; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child { margin-top: 2.5rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child h3 span { font-size: 1.3rem; padding: .65rem 1.05rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history { height: 11.3rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p { font-size: 1.3rem; line-height: 1.4; padding-left: 6.25rem; padding-right: .5rem; padding-bottom: .2rem; letter-spacing: -.05rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p > i { display: inline-block; margin-bottom: .8rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p span { padding-left: 1.3rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_inner li:last-child .history p span::before { width: .4rem; height: .4rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap { height: 7.6rem; justify-content: space-between; padding: 0 2rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap li a { font-size: 1.2rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_pagination.prev { background-size: .65rem 1.05rem; background-position: 0% 40%; padding-left: 1.7rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_pagination.next { background-size: .65rem 1.05rem; background-position: 100% 40%; padding-right: 1.7rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_number { padding: 0; font-size: 1.4rem; } #mobile .golf .golfMain .popup .pop_players .desc .desc_pagination_wrap .desc_number span { margin-right: .3rem; } #mobile .golf .golfMain .popup .pop_news { width: 100%; margin: 17.8rem auto 4.6rem; letter-spacing: -.15rem; } #mobile .golf .golfMain .popup .pop_news .title { padding: 1rem 0 0; } #mobile .golf .golfMain .popup .pop_news .title h2 { font-size: 2.5rem; line-height: 1.1; } #mobile .golf .golfMain .popup .pop_news .title span { padding: 2.5rem 0; font-size: 1.3rem; letter-spacing: 0; } #mobile .golf .golfMain .popup .pop_news .ck-content { width: calc(100% - 4rem); } #mobile .golf .golfMain .popup .pop_news .editor { padding: 4rem 0 0; font-size: 1.4rem; line-height: 1.7; } #mobile .golf .golfMain .popup .pop_news .pagination { padding: 0 2rem 3.5rem; } #mobile .golf .golfMain .popup .pop_news .pagination div button { padding: 1.75rem 0; font-size: 1.3rem; width: 100%; display: flex; } #mobile .golf .golfMain .popup .pop_news .pagination div button span { padding-left: 4rem; font-size: 1.25rem; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #mobile .golf .golfMain .popup .pop_news .pagination div button:active span { color: #005eb8; } #mobile .golf .golfMain .popup .pop_news .pagination div button:hover span { color: #000000; } #mobile .golf .golfMain .popup .pop_news .editor .editor_test_title { font-size: 1.7rem !important; line-height: 1.4; } #mobile .golf .golfMain .popup .pop_news .editor .editor_test_span { padding-top: 2rem; font-size: 1.2rem; margin-top: 0; } #mobile .golf .golfMain .popup .pop_gallery { min-width: 100%; width: 100%; /* padding: 0 0 10rem; margin-bottom: 20rem; */ padding: 0 0 4rem;margin-bottom: 25rem;min-height: 280px; height: fit-content; position: relative; top: 17.5rem; overflow: visible; justify-content: space-between; flex-wrap: wrap; } /* #mobile .golf .golfMain .popup .pop_gallery #loader { width: 30px;height: 30px;top: 100px; } #mobile .golf .golfMain .popup .pop_gallery #loader:before, #mobile .golf .golfMain .popup .pop_gallery #loader:after{ top: -5px;left: -5px;border: 5px solid transparent; } #mobile .golf .golfMain .popup .pop_gallery #loader:before{ z-index: 100; animation: rotate 1s infinite; } #mobile .golf .golfMain .popup .pop_gallery #loader:after{ border: 5px solid #ccc; } */ #mobile .golf .golfMain .popup .pop_gallery #loader { width: 30px;height: 30px;top: 100px; } #mobile .golf .golfMain .popup .pop_gallery #loader:before, #mobile .golf .golfMain .popup .pop_gallery #loader:after{ content: "";position: absolute;top: -5px;left: -5px;border: 5px solid transparent;border-top-color: #005eb8; } #mobile .golf .golfMain .popup .pop_gallery #loader:before{ z-index: 100; animation: rotate 1s infinite; } #mobile .golf .golfMain .popup .pop_gallery #loader:after{ border: 5px solid #ccc; } #mobile .golf .golfMain .popup .pop_gallery .img { max-width: 100%; max-height: fit-content; min-width: 100%; width: 100%; align-items: center; } #mobile .golf .golfMain .popup .pop_gallery .img img { margin-top: 2rem; } #mobile .golf .golfMain .popup .pop_gallery .img iframe { max-width: 100%; background: #000; } #mobile .golf .golfMain .popup .pop_gallery .img h2 { font-size: 1.5rem; padding: 1.5rem 1rem 0; } #mobile .golf .golfMain .popup .pop_gallery > div:not(.img) { font-size: 1.2rem; border-radius: 1.75rem; width: fit-content; height: 3.5rem; margin-top: 3rem; position: relative; } #mobile .golf .golfMain .popup .pop_gallery > div:not(.img, .disabled):hover { transform: scale(1); } #mobile .golf .golfMain .popup .pop_gallery > div:not(.img, .disabled):active { transform: scale(1.1); } #mobile .golf .golfMain .popup .pop_gallery > div button { padding: 0 2rem; } #mobile .golf .golfMain .popup .pop_gallery > div button img { width: .65rem; } #mobile .golf .golfMain .popup .pop_gallery > div:first-of-type { left: 2rem; order: 1; } #mobile .golf .golfMain .popup .pop_gallery > div:first-of-type button img { margin-right: 1.25rem; } #mobile .golf .golfMain .popup .pop_gallery > div:last-of-type { right: 2rem; order: 1 } #mobile .golf .golfMain .popup .pop_gallery > div:last-of-type button img { margin-left: 1.25rem; } #mobile .golf .golfMain .popup .pop_gallery .bg { top: 0; /* height: calc(100% - 6rem); */height: 100%;padding-bottom: 4rem; } @keyframes jumpMob{ 50% { margin-top: -12rem; -webkit-animation-timing-function: ease-in; transform: rotate(90deg); } 90% { margin-top: -1rem; height: 5.8rem; -webkit-animation-timing-function:ease-out; transform: rotate(270deg); } 95% { margin-top: 1rem; height: 5rem; border-radius:70% / 60%; -webkit-animation-timing-function:ease-in; transform: rotate(360deg); } 100% { margin-top:0; -webkit-animation-timing-function:ease-in; transform: rotate(360deg); } } @keyframes wideMob{ 0% { width: 0; } 100% { width: 27rem; } }