@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2022-06-03
******************************************************** */

/* ========================================================
 * 메인 공통
======================================================== */
/* -------- 메인 공통 :: 타이틀 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-sub-tit{font-size:1.4rem;}
	.main-tit-box .main-tit{font-size:4rem; margin-left:-0.2rem}
	.main-tit-box .main-sub-tit-txt{margin-top:2rem; font-size:1.6rem;}
}

/* ========================================================
 * 메인 비주얼
======================================================== */
@media all and (max-width:1740px){
	/* 메인 비주얼 :: 스크롤아이콘 */
	.scroll-icon{left:var(--area-padding); bottom:var(--area-padding);}
}
@media all and (max-width:800px){
	/* 메인비주얼 :: Layout */
	.main-visual-container{position:relative; height:0; /* padding-top:144.6%; */ padding-top:100vh; }
	.main-visual-container .main-visual-con{position:absolute; top:0px; left:0; width:100%; height:100%;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-img{opacity:0.8}
	/* 메인비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-box{padding-bottom:12rem}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:4rem; letter-spacing:-0.04em; margin-bottom:2.5rem; margin-left:0}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:1.75rem; letter-spacing:-0.04em;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.scroll-icon{display:none;}
	/* 메인 비주얼 :: Dots */
	.main-visual-con .slick-dots-wrapper{bottom:6rem;}
}

@media all and (max-width:480px){
	.main-visual-container {padding-top:80vh;}
}

/* ========================================================
 * 메인 :: News
======================================================== */
@media all and (max-width:1740px){
	#mainNewsContent{bottom:var(--area-padding)}
}
@media all and (max-height:768px) {
	#mainNewsContent {bottom:0 !important;}
}
@media all and (max-width:800px){
	#mainNewsContent{position:relative; display:block; bottom:auto; left:auto; right:auto; height:auto; border-bottom:1px solid #ededed; transform:none;}
	/* -------- 뉴스 영역 -------- */
	.main-news-wrapper{width:auto; min-height:12.3rem; padding:7.1rem var(--area-padding) 6.8rem; padding-right:10rem;}
	.main-news-container{display:block; padding:0;}
	.main-news-container .main-tit-box{margin-bottom:1.5rem}
	.main-news-container .main-news-paging{display:none;}
	.main-news-container .main-news-list-con{width:auto;}
	.main-news-container .main-news-list-con .main-news-tit{font-size:2.5rem; margin-bottom:4rem}
	.main-news-container .main-news-list-con .main-news-txt{display:none;}
	.main-news-container .main-news-list-con .main-news-date{margin-top:2.5rem; font-size:1.6rem}
	/* 뉴스 영역 :: controls */
	.main-news-wrapper .main-news-controls{top:50%; right:0; width:8rem; height:16rem; border:1px solid rgba(0, 0, 0, 0.09); margin-top:-8rem}
	.main-news-wrapper .main-news-controls button{}
	.main-news-wrapper .main-news-controls button svg{width:2.6rem;}
	/* -------- 영상 영역 -------- */
	.main-video-wrapper{width:auto;}
	.main-video-wrapper .main-video-con{height:0; padding-top:51.76%;margin:0;}
	.main-video-wrapper .main-video-con .main-video-play-btn{position:absolute; top:0px; left:0px;}
	.main-video-wrapper .main-video-con .video-play-icon{width:4.2rem; height:4.2rem; font-size:0.75rem}
	/* -------- 닫기버튼  -------- */
	.main-news-toggle-btn{display:none;}

}
/* ========================================================
 * 메인 :: Info Board
======================================================== */
@media all and (max-width:1280px){
	#mainInfoContent{margin-top:10rem}
	.info-board-top-con{margin-bottom:5rem}
	.info-board-top-con .main-tit{margin-left:0}
	/* Info Board 배너 */
	.info-board-banner .info-board-banner-inner{padding:5rem 3rem}
	.info-board-banner .info-board-banner-icon{right:3rem; transform:scale(0.7)}
	/* Info Board 미디어 라이브러리 */
	.info-board-media-library{display:block; padding:2.5rem 3rem}
	.info-board-media-library .info-board-midia-tit-box{width:auto; position:relative; margin-bottom:2rem}
	.info-board-media-library .info-board-midia-tit-box .info-board-more-btn{position:absolute; top:1rem; right:0px; margin-top:0}
	.info-board-media-library .main-media-library-list{width:auto}
	.info-board-media-library .main-media-library-list li:nth-child(3){margin-bottom:0}
	.info-board-media-library .main-media-library-list li:nth-child(4),
	.info-board-media-library .main-media-library-list li:nth-child(5){display:none;}
}
@media all and (max-width:800px){
	.info-board-top-con{display:block; height:auto;}
	.info-board-top-con .main-tit-box{position:relative;}
	.info-board-top-con .main-tit-box:before{position:absolute; top:-2rem; left:calc(-1 * var(--area-padding)); right:calc(-1 * var(--area-padding)); bottom:0px; content:""; background:url(../images/main/main_overview_txt.png) no-repeat 50% 50%; background-size:100% auto; }
	.info-board-top-con .main-tit{margin-left:0}
	/* Info Board :: 카운트 */
	.info-board-count-con{margin-top:7rem; width:auto; flex-wrap:wrap;}
	.info-board-count-con .count-item{width:50%; text-align:left;}
	.info-board-count-con .count-item:nth-child(3){margin-top:7rem}
	.info-board-count-con .count-item:nth-child(3):before{display:none;}
	.info-board-count-con .count-item:nth-child(even){padding-left:3rem}
	.info-board-count-con .count-item dd .count-num{justify-content:flex-start;}
	/* Info Board :: 하단 */
	.info-board-bottom-con{display:block; height:auto; }
	.info-board-banner .info-board-banner-inner{height:10rem; flex-direction:initial; padding:0 4rem 0 3rem; align-items:center;}
	.info-board-banner{width:auto;}
	.info-board-banner .info-board-banner-tit strong,
	.info-board-banner .info-board-banner-txt{display:none;}
	.info-board-banner .info-board-banner-icon{position:static; transform:none; width:auto; height:6rem;}
	.info-board-banner .info-board-banner-icon svg{width:auto; height:100%;}
	.info-board-bottom-con .info-board-banner-tit{font-size:2.6rem;}
	/* Info Board 미디어 라이브러리 */
	.info-board-media-library{width:auto; padding:4rem 3rem}
	.info-board-media-library .info-board-midia-tit-box{margin-bottom:3rem;}
	.info-board-media-library .info-board-midia-tit-box .info-board-more-btn{position:static; margin-top:3rem;}
	.info-board-media-library .main-media-library-list li {margin-bottom:0;}
	.info-board-media-library .main-media-library-list li a{/* max-height:3.24em; */ white-space:initial; line-height:1.62; overflow:hidden; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
}

/* ========================================================
 * 메인 :: Business
======================================================== */
@media all and (max-width:1536px){
	.main-business-bg-txt{left:var(--area-padding); width:auto; right:var(--area-padding); background-size:100% auto;}
}
@media all and (max-width:1280px){
	/* 메인 비즈니스 리스트 */
	.main-business-con{width:65rem;}
}
@media all and (max-width:800px){
	#mainBusinessCon{margin:9.8rem 0; }
	.main-business-container{display:block; }
	#mainBusinessCon .main-tit-box{margin-bottom:4.5rem}
	/* 메인 비즈니스 :: 배경텍스트 */
	.main-business-bg-txt{display:none;}
	/* 메인 비즈니스 리스트 */
	.main-business-con{width:auto;}
}
@media all and (max-width:640px){
	.main-business-list{display:block; margin:0;}
	.main-business-item{width:auto; margin:0;}
	.main-business-item:first-child{margin-bottom:4rem;}
	.main-business-item .main-business-info-list{height:auto; padding-bottom:10rem;}
	.main-business-item .main-business-info-list .tit{bottom:3.5rem; right:4rem;}
}
/* ========================================================
 * 메인 :: Global Network
======================================================== */
@media all and ( max-width: 1740px ){
	/* -------- 카운트, 설명글 -------- */
	.global-detail-box{right:var(--area-padding)}
}	
@media all and (max-width:1220px){
	.global-map-bg-box{position: relative; height:auto;}
	.global-map-bg-img{position: relative;}
	/* .global-map-container {margin-bottom:20rem;} */
	.global-map-container {padding-bottom:40.8rem;}
	.global-map-container .global-nation-box{height:100%;}
	.global-nation-box .nation-mark-list{height:100%;}

	.head-office-box{top:26%; left:29.7%; width:101px; height:101px;}
	.head-office-box .head-office-logo {width:81.97px; height:81.97px;}
	.head-office-box .head-office-logo img {width:52px; height:24px;}
	/* .wave-circle {width:34px; height:34px;}
	.wave-circle .dot {width:6.8px; height:6.8px;} */

	.nation-mark-item[data-nation="europe"]{top:35%; left:7%;}
	.nation-mark-item[data-nation="singapore"]{top:65%; left:29%;}
	.nation-mark-item[data-nation="singapore"] .nation-info-box > dl {width:14rem;}
	.nation-mark-item[data-nation="china"]{top:48%; left:33%;}
	.nation-mark-item[data-nation="taiwan"]{top:52%; right:68.5%;}
	.nation-mark-item[data-nation="japan"]{top:44%; left:38%;}
	.nation-mark-item[data-nation="usa"]{top:40%; right:26%;}

	/* .global-detail-box {bottom:0;} */
}
@media all and (max-width:800px){
	#mainGlobalContent {margin-top:-18.5rem; padding-top:28.2rem; padding-bottom:11.4rem;}
	.global-map-container {margin-top:0;}
	/* -------- 카운트, 설명글 -------- */
	.global-detail-box{position:static;}
	.global-detail-box .global-num-con{position:static; text-align:center;}
	.global-num-box{justify-content:center; font-size:10.75rem }
	.global-num-box .global-num-item-box{margin-left:-0.5rem}
	.global-num-box .country-txt{top:-1rem}
	.global-detail-box .global-num-con .global-detail-tit{font-size:3rem; margin-top:6rem}
	.global-detail-box .global-num-con .global-detail-txt{font-size:1.6rem; margin-bottom:7rem;}
	
	.global-map-container {padding-bottom:5rem;}
	.head-office-box {top:33%; left:34.5%;}
	.global-map-bg-img img {width:133%; margin-left:-8rem;}
	.nation-mark-item[data-nation="europe"]{top:35%; left:2%;}
	.nation-mark-item[data-nation="singapore"]{top:65%; left:31.6%;}
	.nation-mark-item[data-nation="china"]{top:49%; left:37%;}
	.nation-mark-item[data-nation="taiwan"]{top:52%; right:62.5%;}
	.nation-mark-item[data-nation="japan"]{top:44.5%; left:43%;}
	.nation-mark-item[data-nation="usa"]{top:42%; right:7%;}
}

@media all and (max-width:480px){
	.head-office-box {top:32%; left:35%;}
	.head-office-box .head-office-bg:after {height:5vw;}
	.wave-circle {width:34px; height:34px;}
	.wave-circle .dot {width:6.8px; height:6.8px;}
	/* .global-map-bg-img img {width:108%; margin-left:4rem;} */
	.nation-mark-item[data-nation="europe"]{top:36%; left:3%;}
	.nation-mark-item[data-nation="singapore"]{top:65%; left:33.2%;}
	.nation-mark-item[data-nation="china"]{top:50%; left:38.5%;}
	.nation-mark-item[data-nation="taiwan"]{top:53%; right:63.8%;}
	.nation-mark-item[data-nation="japan"]{top:44.5%; left:45%;}
	.nation-mark-item[data-nation="usa"]{top:42%; right:7%;}
}

@media all and (max-width:420px){
	.head-office-box {top:32%; left:36.5%;}
	.nation-mark-item[data-nation="europe"]{top:36%; left:4.5%;}
	.nation-mark-item[data-nation="singapore"]{top:65%; left:34.7%;}
	.nation-mark-item[data-nation="china"]{top:50%; left:40%;}
	.nation-mark-item[data-nation="taiwan"]{top:53%; right:62.3%;}
	.nation-mark-item[data-nation="japan"]{top:44.5%; left:46.5%;}
	.nation-mark-item[data-nation="usa"]{top:42%; right:5.5%;}
}

/* ========================================================
 * 메인 :: Full Banner
======================================================== */
@media all and (max-width:1280px){
	.main-esg-con .txt-box { margin-top:5rem;}
}
@media all and (max-width:800px){
	#mainBannerCon{padding-bottom:0}
	#mainBannerCon .area-box{padding:0;}
	.main-banner-con{height:auto;}
	.main-banner-con .area-box{padding:0}
	/* Full Banner :: BG */
	.main-banner-con .bg{display:none;}
	/* Full Banner :: Banner Box */
	.main-banner-con .con-box{top:auto; max-width:none;}
	.main-banner-con .con-box a{padding:4.5rem var(--area-padding)}
	.main-banner-con .con-box .tit-box .tit{font-size:4rem; margin-top:1.7rem}
	.main-banner-con .con-box .tit-box .sub-tit{font-size:1.4rem;}
	.main-banner-con .btn-box{margin-top:3.4rem}
	.main-banner-con .btn-box .txt{font-size:1.4rem}
	.main-banner-con .btn-box .arrow svg{width:2.5rem;}
	/* Full Banner :: Text Box */
	.main-banner-con .txt-box{height:56rem; box-sizing:border-box; margin-top:0; padding:5rem var(--area-padding); text-align:left; }
	.main-banner-con .txt-box .txt01{font-size:2.4rem;}
	.main-banner-con .txt-box .txt02{font-size:1.6rem;}
	/* 입사지원 */
	.main-people-con .txt-box{background:url(../images/main/main_people_bg_m.jpg) no-repeat 50% 50% / cover;}
	/* EGS */
	.main-esg-con .txt-box{background:url(../images/main/main_esg_bg_m.jpg) no-repeat 50% 50% / cover;}
}