/* A A A : A : A : A : */ #background_map_pageable { width : 100%; height : 100%; display : flex; flex-direction : column; align-items : center; } #background_map_pageable .titBox { width : 100%; height : auto; display : flex; flex-direction : column; align-items : center; justify-content : center; margin : 100px 0 0; } #background_map_pageable .titBox .leftTit { width : auto; height : auto; display : inline-flex; flex-direction : column; align-items : center; } #background_map_pageable .titBox .leftTit .line { width : clamp(50px,4.4vw,70px); height : clamp(4px,1.2vw,6px); background : #333; } #background_map_pageable .titBox .leftTit .tit { font-size : clamp(36px,3.2vw,48px); color : #333; line-height : 1em; margin : 0.3em 0; font-weight : 400; word-break : keep-all; } #background_map_pageable .titBox .leftTit .tit span { font-size : inherit; line-height : inherit; font-weight : 700; } #background_map_pageable .titBox .rightTit { width : auto; height : auto; display : inline-flex; } #background_map_pageable .titBox .rightTit p { font-size : clamp(17px,1.6vw,19px); color : #333; line-height : 1.4em; word-break : keep-all; font-weight : 400; text-align : center; } #background_map_pageable .link { width : auto; height : auto; font-size : clamp(17px,1.6vw,19px); color : #fff; font-weight : 400; line-height : 1em; display : inline-flex; border : 1px solid #333; align-items : center; justify-content : center; padding : 0.5em 1.6em 0.6em; transition : .3s; background : #333; margin : 1em 0 2.2em; } #background_map_pageable .link:hover { box-shadow : 0px 0px 8px #262626; transition : .3s; } #background_map_pageable .link .arrow { width : clamp(30px,3vw,35px); height : 2px; background : #fff; margin-left : 0.8em; position : relative; margin-top : clamp(2px,1.2vw,3px); transition : .3s; } #background_map_pageable .link .arrow::after { position : absolute; right : 6px; bottom : 100%; content : ''; width : 0; height : clamp(8px,1.5vw,10px); border-right : 2px solid #fff; transition : .3s; transform : rotate(135deg) translateY(-40%); } #background_map_pageable .mapWrap { width : 100%; height : 60%; position : relative; } #background_map_pageable .mapWrap .map { width : 100%; height : 100%; object-fit : cover; position : absolute; top : 0; left : 0; } #background_map_pageable .mapWrap .map button { outline : none; } #background_map_pageable .mapWrap .mapInfoBox { width : auto; height : 100%; display : inline-flex; flex-direction : column; position : absolute; top : 0; left : 10%; justify-content : center; background : #333; padding : 0 clamp(40px,3vw,50px); transition : .3s; } #background_map_pageable .mapWrap .mapInfoBox .logoBox { width : 100%; height : auto; margin-bottom : 20%; } #background_map_pageable .mapWrap .mapInfoBox .logoBox img { width : clamp(260px,15vw,280px); height : auto; } #background_map_pageable .mapWrap .mapInfoBox .infoBox { width : 100%; height : auto; display : flex; flex-direction : column; margin-bottom : 5%; } #background_map_pageable .mapWrap .mapInfoBox .infoBox:last-child { margin-bottom : 0; } #background_map_pageable .mapWrap .mapInfoBox .infoBox .cate { font-size : clamp(18px,1.8vw,21px); color : #ffffff80; } #background_map_pageable .mapWrap .mapInfoBox .infoBox .cateValue { font-size : clamp(21px,2.1vw,24px); color : #fff; } #background_map_pageable .mapWrap .gmnoprint { right : 46px !important; left : unset !important; } @media (min-width:641px) and (max-width:1024px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #background_map_pageable { padding-bottom : 10px; } #background_map_pageable .titBox { margin : 120px 0 0; } #background_map_pageable .titBox .leftTit .tit { font-size : clamp(30px,4vw,36px); } #background_map_pageable .titBox .rightTit p { font-size : clamp(15px,2.1vw,17px); margin-left : 2em; } #background_map_pageable .link { font-size : clamp(15px,2.1vw,17px); } #background_map_pageable .mapWrap .mapInfoBox { left : 0%; } #background_map_pageable .mapWrap .mapInfoBox .logoBox img { width : clamp(210px,32vw,260px); } #background_map_pageable .mapWrap .mapInfoBox .infoBox .cate { font-size : clamp(16px,2.4vw,18px);} #background_map_pageable .mapWrap .mapInfoBox .infoBox .cateValue { font-size : clamp(18px,2.8vw,21px);} } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #background_map_pageable { padding-bottom : 20px; height : 100%; } #background_map_pageable .titBox { margin : 100px 0 0; } #background_map_pageable .titBox .leftTit { align-items : center; } #background_map_pageable .titBox .leftTit .tit { font-size : 30px; margin : 0.3em 0 0; } #background_map_pageable .titBox .rightTit { align-items : center; justify-content : center; } #background_map_pageable .titBox .rightTit p { width : 90%; font-size : 15px; margin : 1em 0; text-align : center; } #background_map_pageable .link { font-size : 15px; margin-bottom : 2em; } #background_map_pageable .mapWrap .mapInfoBox { display : none; } #background_map_pageable .mapWrap .gmnoprint { right : 0 !important; left : unset !important; } #background_map_pageable .mapWrap .map { width : 200vw; left : -75vw;} }