@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.cm-cursor-icon{display: block;}
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#f57f20; font-weight:600; }
}
@media all and (max-width:480px){
	.develop-page .sub-tab-list-style ul li a em{font-size:11px}
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}


/********************** Company ***********************/
@media all and (min-width:801px){
	/* History :: 왼쪽 */
	.history-left .company-history-info-box{float:left;}
	.history-left .company-history-info-box::before,
	.history-left .company-history-info-box::after {left:100%; transform:translatex(-50%)}
	.history-left .company-history-info {text-align:right; padding-right: 60px;}
	.history-left .company-history-info .history-item{padding-right: 30px; }
	.history-left .company-history-info .history-month{right:0;}
	.history-left .company-history-info .history-txt{padding-right:15px; }
	.history-left .company-history-info .history-txt::before{right:0;}
	.history-left .company-history-year {left:100%; padding-left:60px;}
	.history-left .company-history-year:before{left:0}
	.history-left .company-history-img-box{float:right;}
	.history-left .company-history-img-box span{margin-left:60px}
	/* History :: 오른쪽 */
	.history-right .company-history-info-box{float:right; }
	.history-right .company-history-info-box::before,
	.history-right .company-history-info-box::after {right:100%; transform:translatex(50%)}
	.history-right .company-history-info {padding-left: 60px;}
	.history-right .company-history-info .history-item{padding-left: 22px;}
	.history-right .company-history-info .history-month{left:0;}
	.history-right .company-history-info .history-txt{padding-left:20px; }
	.history-right .company-history-info .history-txt::before{left:0;}
	.history-right .company-history-list-wrap .company-history-year {right:100%; padding-right:60px;}
	.history-right .company-history-list-wrap .company-history-year:before{right:0}
	.history-right .company-history-img-box{float:left; text-align:right;}
	.history-right .company-history-img-box span{margin-right:60px}
}
@media all and (max-width:800px){
	/* History :: Layout */
	.company-history-wrapper{padding-bottom:5.72%;}
	.company-history-wrapper:before{left:10px;}
	.company-history-info-box{width:auto; /* padding-left:120px */padding-left:40px; padding-top:10%;}
	.company-history-info-box::before{left:0;}
	.company-history-info-box::after{ left:7px;}
	/* History :: 정보 */
	.company-history-info .history-item{font-size:13px; padding-left:45px; margin-bottom:10px;}
	.company-history-info .history-month{left:0;}
	.company-history-info .history-txt:before{display:none;}
	.company-history-year{top:4px;font-size:2rem; padding-left:30px; left:10px;}
	.company-history-year::before{width:20px; left:0; }
	/* History :: 이미지 */
	.company-history-img-box{width:auto; margin-top:20px}
	.company-history-img-box span{margin-left:120px;}

	/* 연혁, 수상내역 탭(margin-bottom) 수정 */
	.sub-tab-wrapper-style{margin-bottom:8rem;}
}

/********** 반응형 **********/
@media all and (max-width:1024px){
	/**** ceo 반응형 ****/
	.sub-page .sub-top-container.ceo div {padding:0 2.5%;}
}
@media all and (max-width:800px){
	/**** 서브 공통 ****/
	.pc{display:none;}
	.mobile{display:block;}
	
	.sub-page .sub-top-container {margin:0 auto 4.2em; height:inherit; min-height:26em; background-size:cover; position: relative;}
	.sub-page .sub-top-container:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3);}
	.sub-page .sub-top-container .sub-top-container-inner{position: relative;}
	.sub-page .sub-top-container.area-1460 {padding:initial;}
	.sub-page .sub-bottom-container{color: #fff;}
	.sub-page .sub-top-container .sub-top-container-inner strong{font-size:3rem;}
	.sub-page .sub-top-container .sub-top-container-inner strong,
	.sub-page .sub-top-container .sub-top-container-inner p{color: #fff; position:relative;}
	.sub-page .sub-bottom-container .content-sub-tit {font-size:2.6rem;}
	.sub-page .sub-bottom-container .content-sub-detail {/* padding: 0 8.91%; */ padding:0 2.5%;}
	.sub-page .sub-bottom-container .icon{width:5.7em; height:2.917em; background-size:cover;}
	.sub-page .sub-bottom-container .sub-bottom-container-inner img{margin-top:3.667em;}

	/**** ceo 반응형 ****/
	.sub-page .sub-top-container.ceo div{padding:0 8.91%;}
	.ceo-list {flex-wrap:wrap;}
	.ceo-list li:nth-child(1){width:100%; padding-right:initial; padding:0 0 3em; }
	.ceo-list li:nth-child(2){width:100%; padding:3em 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-left:none; border-right:none;}
	.ceo-list li:last-child{width:100%; padding-left:initial; padding:3em 0 0;}

	/**** vision 반응형 ****/
	.vision-container{margin-bottom:6em;}
	.vision-container .vision-inner-con{display:initial;}
	.vision-container .vision-inner-con>div{width:100%;}
	.vision-container .philosophy .tit-inner{
		margin: 5% 0 10% 5%;
	}
	.vision-container .vision .tit-inner{
		margin: 5% 0 5% 5%;
		text-align:left;
	}
	
	/**** CI 반응형 ****/
	.enter-box div{padding:0 10%; height:20.333em;}
	.ci-top-container{margin-top:4em;}
	.ci-top-container .ci-tit{font-size:2.7rem;}
	.ci-bottom-container{margin:6em auto 0;}
	.enter-box div{height:15.333em;}
	.ci-bottom-container .identity-guide .identity-guide-list li{padding:3.417em 0;}
	.ci-bottom-container .identity-guide .identity-guide-list .etc {padding:3.417em 0 0;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box{display:initial;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box .inner-box1{width:initial;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box .inner-box1 .guide-tit{padding-left:0;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box .inner-box2{width:initial; /* padding:2.75em 2.75em 0; */ padding:2.75em 0 0;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box .inner-box2 .size1{display: flex; margin-right: 10%;}
	.ci-bottom-container .identity-guide .identity-guide-list li .inner-box .inner-box2 .size2{display: flex;}
	.basic-color .inner-box2 .b-color p{font-size:1.3rem;}
	.main-color .inner-box2 .m-color .color-info p{font-size:1.3rem;}

	.download span::after{background:none; content:'\e93e'; font-family:'xeicon'; font-size:1.6rem; width:auto; height:auto; }

	/**** 오시는길 반응형 ****/
	.sub-page.loca-page{margin:0 auto 4.2em;}
	/* 오시는길 :: 상단 */
        .map-script-wrapper{height:300px; margin-bottom:15px;}
	.map-iframe-wrapper .map-iframe-con{padding-top:300px;}
        .map-script-wrapper .map-script-con{height:300px; margin-top:-150px;}
        /* 오시는길 :: 다른지도링크 */
        .map-other-link-box ul li{width:31%; margin-left:1%; font-size:15px; max-width:180px;}
        /* 오시는길 :: 하단정보1 */
	.map-tbl-con{margin:2.5em auto 0;}
        /* 오시는길 :: 하단정보1 + 우측사진 */
        .map-tbl-photo-con .map-tbl,
	.map-tbl-photo-con .location-info{float:none; width:100%;}
        .map-tbl-photo-con .map-company-info{float:none; width:auto; max-width:400px; margin:5% auto 0;}
}

@media all and (max-width:480px){
	/**** 연혁 반응형 ****/
	.company-history-year{top:7px;}
	.company-history-info .history-item{top:3px;}
}


/* ****************** Business :: 게임개발 ********************** */
/* 게임개발 3탭 로고이미지 */
@media all and (min-width:1281px){
	#tabCon03 .develop-con-wrap .tit-img{top:-11.3rem}
}
@media all and (max-width:1280px){
	/* 로고이미지 */
	.develop-con-wrap .tit-img{width:100%; top:0; transform: translate(-50%, -70%);}
	.develop-con-wrap .tit-img span{display: block; width:50%; margin:auto; text-align:center;}
	.develop-con-wrap .tit-img span img{max-width:100%;}
	/* 컨텐츠 왼쪽 */
	.develop-con-box .left-box{padding-left: var(--area-padding);}

	/* 게임개발 2~4탭 */
	.develop-slick-wrap{width:100%; margin-right:0;}
}
@media all and (max-width:800px){
	/* 상단 탭 */
	.develop-page .sub-tab-wrapper-style{margin-bottom:11rem;}
	/* 상단텍스트 */
	.develop-top-box{margin-bottom:3rem;}
	.develop-top-box .tit{line-height:1.2;}
	/* 로고이미지 */
	.develop-con-wrap .tit-img{position: relative; transform: none; top:auto; left:auto;}
	.develop-con-wrap .tit-img span{width:100%; padding:var(--area-padding); box-sizing:border-box;}
	.develop-con-wrap .tit-img span img{width:60%}
	/* 게임개발 컨텐츠 */
	.develop-con-box:before{display: none;}
	.develop-con-box .area-1460{display: block;}
	.develop-con-box .left-box{width:100%; padding:6rem 0;}
	.develop-con-box .left-box dl dt{top:0.4rem;}
	.develop-con-box .left-box dl dt .num{width:6rem;}
	.develop-con-box .left-box dl dd{padding-left:6rem;}
	.develop-con-box .right-box{width:100%; background:no-repeat center; background-size:cover; margin-left: -5vw;}
	/* 게임개발 1탭 */
	#tabCon01{margin-bottom:6rem;}
	#tabCon01 .develop-con-box .right-box{display: block;}
	#tabCon01 .develop-con-box .right-box span{position: relative; left:22%;}
	/* 게임개발 오른쪽 배경 */
	.develop-con-box .right-box{width: calc(100% + (var(--area-padding) * 2));}
	#tabCon01 .develop-con-box .right-box{background-image:url('/images/content/develop_right_bg01.jpg');}
	#tabCon02 .develop-con-box .right-box{background-image:url('/images/content/develop_right_bg02.jpg');}
	#tabCon03 .develop-con-box .right-box{background-image:url('/images/content/develop_right_bg03.jpg');}
	#tabCon04 .develop-con-box .right-box{background-image:url('/images/content/develop_right_bg04.jpg');}
}
@media all and (max-width:640px){
	/* 게임개발 2~4탭 */
	.develop-slick-wrap .develop-slide-item:before{box-shadow: -1rem 1.5rem 2.1rem 0.4rem rgba(0, 0, 0, 0.25);}
	.slick-vertical .slick-slide{margin:3rem var(--area-padding);}
	.develop-slick-wrap .slick-arrow.slick-prev{top:5rem;}
	.develop-slick-wrap .slick-arrow.slick-next{bottom:5rem}
}

/* ****************** Business :: 해외서비스 ********************** */
@media all and (max-width:800px){
	.oversea-con{margin-bottom:6rem;}
	.oversea-tit-box{margin-bottom:3rem;}
	/* 타이틀박스 */
	.oversea-tit-box .tit{font-size:2.8rem;}
	/* 지도 이미지 */
	.oversea-world-map{padding:2.5rem 0;}
	/* 파트너 리스트 */
	.oversea-partner-list li{width:33.33%;}
	.oversea-partner-list li:nth-child(5n) span{border-left:0;}
	.oversea-partner-list li:nth-child(3n + 1) span{border-left:1px solid #ddd;}
	.oversea-partner-list li span{padding-top:8rem;}
	/* 파트너 업체소개 표 */
	.oversea-partner-table thead tr th{font-size:1.5rem; line-height:1.5; padding:1rem 0.7rem; word-break: break-word;}
	.oversea-partner-table tbody tr th{font-size:1.35rem;}
	.oversea-partner-table tbody tr td{font-size:1.35rem; line-height:1.5; padding:1rem 0.7rem; word-break: break-word;}
}
@media all and (max-width:480px){
	/* 파트너 리스트 */
	.oversea-partner-list li{width:50%;}
	.oversea-partner-list li:nth-child(5n) span{border-left:1px solid #ddd;}
	.oversea-partner-list li:nth-child(3n + 1) span{border-left:0;}
	.oversea-partner-list li:nth-child(odd) span{border-left:1px solid #ddd;}
}

/* ****************** PR :: 보도자료 ********************** */
@media all and (max-width:800px){
	.board-list-wrap{margin:0 -1rem;}
	.board-list-wrap .board-item{width:calc(50% - 2rem); margin:1rem 1rem 2rem;}
}

/* ****************** Careers ********************** */
@media all and (max-width:800px){
	/**** 인사제도 반응형 ****/
	.personnel-container ul{display:initial;}
	/* .personnel-container ul li .per-list-li{margin-bottom:7.8%;} */
	.personnel-container ul li:last-child {margin-bottom:0;}
	.personnel-container ul li:nth-of-type(odd){width:100%; margin-right:0; /* margin-bottom:4.167em; */}
	.personnel-container ul li:nth-of-type(even){width:100%;}

	/**** 복리후생 반응형 ****/	
	.welfare-container .welfare-list li{width:100%;}
	.welfare-container .welfare-list li{ padding:6.85% 0 4.5%;}
	.welfare-container .welfare-list li .welfare-list-box dl{height:initial;}

	/**** 채용절차 반응형 ****/
	.process-reference {margin-top:4.25em;}
	.process-reference ul{padding:2.5em 2.5em;}

	/**** 채용공고 반응형 ****/
	.recruit-page .bbs-list-head .bbs-head-item{height:auto;}
	.recruit-page .bbs-list-row .column{height:auto; margin-bottom:1rem; width:calc(100% - 5rem);}
	.recruit-page .bbs-list-row .column:not(.bbs-title):not(.bbs-m-display-none):before{display: none;}
	.recruit-page .bbs-list-row .link-btn{position: absolute; top:50%; right:0; -webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); width:3rem; height:3rem; line-height:3rem; font-size:1.6rem;}
}

/********** 윤리경영 추가 23-12-15 **********/
@media all and (max-width:800px){
	.management-page .list-icon {min-height: 0;}
	.management-page .vision-container .philosophy .tit-inner {margin-left: 0;}
	.management-page .sub-bottom-container {margin-bottom: 7rem !important;}
	.management-page .email-box {width: 100%;}
	.management-page .sub-top-container.ceo {background: 80% / cover no-repeat url("../images/content/management_banner_img.jpg");}
	.management-page .vision-container .philosophy:first-child .tit-inner {margin-right: 0;}
	.management-page .vision-container .philosophy:last-child .tit-inner {margin-left: 0;}
	.management-page .sub-top-container .sub-top-container-inner img:first-of-type {display: none;}
	.management-page .sub-top-container .sub-top-container-inner img:last-of-type {display: block;}
}

@media all and (max-width:720px){
	.management-page .sub-bottom-container .img-box img:first-child {display: none;} 
	.management-page .sub-bottom-container .img-box .schematic_m {display: block;}
}