@charset "UTF-8";
/* hanbom.com _ giantstep _ Kimjuyeon _ 20220222 */

/* reset : normalize or reset */
@import url(_base.css);
@import url(lib/aos.css);
@import url(lib/swiper-bundle.min.css);
@import url(lib/swiper-custom.css);
@import url(_font.css);
@import url(_layout.css);
@import url(_button.css);
@import url(_form.css);
@import url(_global.css);

/* main */
#content.main .section:not(.adventure){padding: 160px 0}
@media (max-width: 750px) {
	#content.main .section:not(.adventure){padding: 80px 0}
}
#content.main .reel-space{position: relative; padding-bottom: 60px;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;
	-webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end;
}
#content.main .reel-space .btn-bar{margin-top: 5px; border-top: 1px solid #fff; padding-top: 14px;}
#content.main .reel-space .btn-bar .btn.view-more{font-size: 16px;}
@media (max-width: 750px) {
	#content.main .reel-space{padding-bottom: 30px;}
}
@media (max-width: 750px) {
	#content.main .section.lasted .data-list.col-4 li:nth-of-type(n+5) {display: none}
}
#content.main .section.adventure {overflow: hidden; position: relative; background: #000; color: #fff}
#content.main .section.adventure .vod-wrap {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#content.main .section.adventure .vod-wrap video{z-index: 0;}
#content.main .section.adventure .text-wrap{padding-top: 160px; padding-bottom: 160px;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}
#content.main .section.adventure .big-title{padding-bottom: 24px; border-bottom: 1px solid #fff}
#content.main .section.adventure .big-title + .btn{margin-top: 40px;}
#content.main .section.adventure .btn + p{margin-top: 24px;}
[lang="en"] #content.main .section.adventure .btn + p{font-size: 18px;}
@media (min-width: 751px) {
	#content.main .section.adventure .text-wrap section{width: calc((100% - 50px) / 2 );}
}
@media (max-width: 750px) {
	#content.main .section.adventure .text-wrap{padding-top: 90px; padding-bottom: 90px;
		 -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	}
	#content.main .section.adventure .text-wrap section + section{margin-top: 82px}
	#content.main .section.adventure .big-title + .btn,
	#content.main .section.adventure .btn + p{margin-top: 20px}
	#content.main .section.adventure p{font-size: 14px;}
}
#content.main .section.log{padding: 130px 0 }
#content.main .section.log .list-wrap{margin-top: 60px;}
@media all and (-ms-high-contrast:none) {
		#content.main .section.adventure{display: -ms-grid;}
}
@media (max-width: 750px) {
	#content.main .section.log{padding: 92px 0 100px}
	#content.main .section.log .list-wrap{margin-top: 40px;}
}

/* sub-main 공통 */
#content.sub-main main{overflow: hidden;}
#content.sub-main .hgroup{padding-bottom: 35px; border-bottom: 1px solid #fff}
@media (max-width: 750px) {
	#content.sub-main .hgroup{padding-bottom: 16px;}
	#content.sub-main .hgroup .section-title{font-size: 21px;}
}
#content.sub-main .hgroup + .text-wrap.book{margin-top:31px;}
@media (max-width: 750px) {
	#content.sub-main .hgroup + .text-wrap.book{margin-top: 19px;}
}

/* about */
#content.about #who{
	-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
}
#content.about .who{padding-bottom: 128px;}
#content.about.sub-main .text-wrap.book + .text-wrap.book {margin-top: 29px}
@media (min-width: 751px) {
	#content.about #who{height: calc(var(--vh, 1vh) * 100); min-height: 1077px;}
	#content.about .text-wrap.book .section-title{font-size: 36px; line-height: 1;}
	#content.about.sub-main .main-title{padding-top: 241px; padding-bottom: 59px}
}
@media (max-width: 750px) {
	#content.about .who{padding-bottom: 115px;}
	#content.about.sub-main .main-title{padding-top: 220px; padding-bottom: 130px}
	#content.about.sub-main .text-wrap.book .section-title{font-size: 21px; line-height: 1.14;}
}
#content.about .bg-black section.vision{padding-top: 146px;}
#content.about .bg-black section.what{padding-top: 146px; padding-bottom: 140px;}
#content.about .vision .vod-wrap.centered {margin-top: 52px; padding-top: 56.25%;}
@media (max-width: 750px) {
	#content.about .bg-black section.vision{padding-top: 65px;}
	#content.about .bg-black section.what{padding-top: 25px;}
	#content.about .vision .vod-wrap.centered {margin-top: 6px; }
}
#content.about .vision .reel-list{}
.reel-list li + li{border-top: 1px solid rgba(255,255,255,.3)}
.reel-list .reel-title {position: relative; font-size: 20px; line-height: 78px; font-weight: 700; text-transform: uppercase;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
}
.reel-list .reel-title .num{display: block;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.reel-list .reel-title > br{display: none}
.reel-list .reel-title .num{width: 44px;}
.reel-list .reel-title > i{position:absolute; top: calc(50% - 7px); right: 5px; width:14px; height:14px;}
.reel-list .reel-title > i:before,
.reel-list .reel-title > i:after{content:""; position:absolute; display:block; background: #fff;}
.reel-list .reel-title > i:before{top: 6px; width: 100%; height: 2px;}
.reel-list .reel-title > i:after {left: 6px; width: 2px; height: 100%;}
.reel-list .reel-title,
.reel-list .reel-title > i:before,
.reel-list .reel-title > i:after{
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.reel-list li.active .reel-title {padding-top: 6px; font-size: 48px; line-height: 86px; letter-spacing: -.04rem;}
.reel-list li.active .reel-title .num{width: 82px;}
.reel-list li.active .reel-title > i:after {opacity: 0}
.reel-content {padding-bottom: 40px}
.reel-content .vod-wrap + .text-wrap{margin-top: 20px;}
@media (min-width: 751px) {
	.reel-list .reel-title:hover{color: #f55e17;}
	.reel-list .reel-title:hover > i:before,
	.reel-list .reel-title:hover > i:after{background-color: #f55e17;}
	.reel-content .text-wrap{padding-left: 90px;}
}
@media (max-width: 750px) {
	.reel-list .reel-title > i{top: calc(50% - 9px); right: 0; width: 18px; height: 18px;}
	.reel-list .reel-title > i:before{top: 8px;}
	.reel-list .reel-title > i:after {left: 8px;}
	.reel-list li.active .reel-title {padding: 21px 0 26px; font-size: 40px; line-height: 1.28;
		-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	}
	.reel-list li:first-child.active .reel-title {padding: 30px 0 32px; }
	.reel-list li .reel-title .num{width: 40px;}
	.reel-list li.active:not(:first-child) .reel-title > i{top: 28px;}
	.reel-content {padding-bottom: 29px; font-size: 14px; line-height: 1.64;}
	.reel-content .vod-wrap + .text-wrap{margin-top : 26px;}
}
@media (min-width: 751px) {
	.scroll-nav{position: fixed; right: 56px; top: 50%; width:  7px;}
	.scroll-nav > a{display: block; width:  7px; height: 7px; background: #fff;
		border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
		-webkit-transition: all .3s ease;
		-moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		-o-transition: all .3s ease;
		transition: all .3s ease;
	}
	.scroll-nav > a + a{margin-top: 13px;}
	.scroll-nav > a.current{opacity: .4; height: 22px;}
}

/* career */
#content.career.sub-main main{padding-bottom: 200px}
[lang="en"] #content.career.sub-main main{min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); padding-bottom: 0}
#content.career.sub-main .tabs:not(.box-type) li:not(.current) a{color: #fff}
#content.career.sub-main .text-wrap.book + .text-wrap.book {margin-top: 107px}
@media (min-width: 751px) {
	#content.career.sub-main .main-title{padding-top: 239px; padding-bottom: 134px}
}
@media (max-width: 750px) {
	#content.career.sub-main main section + section{margin-top: 120px;}
	#content.career.sub-main .text-wrap.book .section-title{font-size: 19px; line-height: 1.26;}
	#content.career.sub-main .main-title{padding-top: 55px; padding-bottom: 63px}
}
#content.career.sub-main main section + section{margin-top: 200px;}
#content.career.sub-main .interview {overflow: visible;}
#content.career.sub-main .interview .hgroup + .list-wrap{margin-top: 38px}
#content.career.sub-main .text-wrap.book + .button-area {margin-top: 68px}
@media (max-width: 750px) {
	#content.career.sub-main .text-wrap.book + .button-area {margin-top: 48px}
}
#content.career.sub-main #swiperInterview{overflow: visible}
#swiperInterview .swiper-wrapper{
	-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
}
@media (min-width: 961px) {
	#swiperInterview li.swiper-slide{width: 286px;}
	#swiperInterview li.swiper-slide:nth-of-type(3n-1){margin: 0 calc((100% - (286px * 3)) / 2);}
}
@media (max-width: 960px) {
	#swiperInterview li.swiper-slide .item.interview.large{width: 32vw; font-size: 13.4px }
	#swiperInterview li.swiper-slide .img-wrap{width: 32vw; height: 32vw;}
	#content.sub-main .interview .hgroup + .list-wrap{margin-top: 30px;}
}
#content.career.sub-main .faq .hgroup + .list-wrap{margin-top: 18px;}
@media (max-width: 960px) {
	#content.career.sub-main .faq .hgroup + .list-wrap{margin-top: 30px;}
}

[lang="en"] #content.career.sub-main .view-more{padding: 70px 0; font-size: 18px;}

/* detail 공통 */
#content.detail .video-wrap video,
#content.detail .video-wrap iframe{width: 100%;}
#content.detail .video-wrap video{display: block;}
@media (max-width: 750px) {
	#content.detail [class*="max-"] .videio-wrap,
	#content.detail [class*="max-"] .img-wrap:not(.squircle){margin-left: -20px; margin-right: -20px;}
}

/* works.list */
#content.works.list main{margin-top: 51px;}
@media (max-width: 750px) {
	#content.works.list main{margin-top: 26px;}
}
/* works.detail */
#content.works.detail .text-wrap{padding-top: 72px; padding-bottom: 72px; line-height: 1.75;}
#content.works.detail .text-wrap p.mt1x{margin-top: 28px;}
#content.works.detail .text-wrap p.mt2x{margin-top: 67px;}
#content.works.detail .img-wrap{padding-bottom: 103px;}
@media (max-width: 750px) {
	#content.works.detail .text-wrap{padding-top: 26px; padding-bottom: 37px; font-size: 15px; line-height: 1.6;}
	#content.works.detail .text-wrap p.mt1x{margin-top: 20px;}
	#content.works.detail .text-wrap p.mt2x{margin-top: 24px;}
	#content.works.detail .img-wrap{padding-bottom: 70px;}
}

/* log */
#content.log main{margin-top: 44px;}
@media (max-width: 750px) {
	#content.log main{margin-top: 57px;}
}

/* log detail > bbs-nav */
.bbs-nav{margin-top: 70px;}
.bbs-nav > div{position: relative;}
.bbs-nav > div + div::before{position: absolute; top: 0; left: 0; content: '';display: block; background: #fff; opacity: .4;}
.bbs-nav .btn{display: block; width: 100%; text-align: left;}
.bbs-nav .btn:hover{background: #fff; color: #000;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
.bbs-nav .btn::before{display: block; font-weight: 500; margin-bottom: 21px;}
.bbs-nav .btn.prev::before{content: 'PREV';}
.bbs-nav .btn.next::before{content: 'NEXT';}
@media (min-width: 751px) {
	.bbs-nav{
		display: -ms-flexbox; display: -webkit-flex; display: flex;
		-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
		-webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;
	}
	.bbs-nav > div{width: 50%;}
	.bbs-nav > div + div::before{width: 1px; height: 100%;}
	.bbs-nav .btn{padding: 18px 20px 36px; font-size: 14px; line-height: 1.28;}
	.bbs-nav .btn::before{margin-bottom: 21px;}
}
@media (max-width: 750px) {
	.bbs-nav{margin-top: 60px;}
	.bbs-nav > div + div::before{width: 100%; height: 1px;}
	.bbs-nav .btn{padding: 22px 0 23px; line-height: 1.37;}
	.bbs-nav .btn::before{font-size: 14px; margin-bottom: 13px;}
}

/* career > apply.list */
#content.apply.list .data-list li{margin-bottom: 10px;}
@media (max-width: 750px) {
	#content.apply.list .data-list li{margin-bottom: 42px;}
}

/* career > inteview list */
#content.interview.list .filter-wrap ul{max-width: 800px;}
@media (min-width: 751px){
	#content.interview.list .list-wrap{margin-top: 10px}
}

/* career > faq list */

/* career > detail */
#content.career.detail .detail-body{padding-top: 18px; padding-bottom: 100px;}

/* career > apply.detail */
#content.apply.detail .detail-header.bg .max-970{padding-top: 64px;}
#content.apply.detail .detail-body{overflow-x: hidden;}
#content.apply.detail .detail-body .max-1280 {padding-bottom: 100px}
#content.apply.detail .detail-body .section{padding: 36px 0 31px;  letter-spacing: -.034rem;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
}
#content.apply.detail .detail-body .section + .section{border-top: 1px solid rgba(255,255,255,.3);}
#content.apply.detail .detail-body .section:not(.related){font-family: 'Noto Sans KR';}
#content.apply.detail .section h4{font-weight: bold;}
#content.apply.detail .section > p{line-height: 1.75;;}
#content.apply.detail .button-area:not(.detail){margin-top: 45px}
#content.apply.detail .button-area + .button-area{margin-top: 99px}
#content.apply.detail #swiperRelated{width: 100%; overflow: visible;}
@media (min-width: 961px) {
	#swiperRelated{max-width: 720px; margin-left: 0; padding-top: 5px}
	#swiperRelated .swiper-slide{width: 32vw}
}
@media (max-width: 960px) {
	#content.apply.detail .detail-body .section{
		-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	}
}
@media (min-width: 751px) {
	#content.apply.detail .section h4{width: 146px;}
	#content.apply.detail .section > p{max-width: 575px; margin-top: -2px}
}
@media (max-width: 750px) {
	#content.apply.detail .detail-body{padding-top: 13px;}
	#content.apply.detail .detail-header.bg .max-970{padding-top: 40px;}
	#content.apply.detail .detail-body .section{padding: 29px 0 33px;}
	#content.apply.detail .section h4{font-size: 22px;}
	#content.apply.detail .section > p{font-size: 15px; line-height: 1.6;}
	#content.apply.detail .section h4 + p{margin-top: 25px;}
	#content.apply.detail .button-area:not(.detail){margin-top: 41px}
	#content.apply.detail #swiperRelated{margin-top: 24px;}
}

/* career > inteview.detail */
#content.interview.detail .detail-header.bg .max-970{padding-top: 132px;}
#content.career.interview.detail .detail-body{padding-top: 55px;}
#content.interview.detail .section-title,
#content.interview.detail .section{font-family: 'Noto Sans KR'; letter-spacing: -.04rem;}
#content.interview.detail .section + .section{margin-top: 86px;}
#content.interview.detail .section-title{padding-bottom: 10px;  line-height: 56px; font-weight: 700; border-bottom: 1px solid #fff}
#content.interview.detail .question{display: block; opacity: .4;}
#content.interview.detail .answer{line-height: 1.75;}
#content.interview.detail .section-title + .question{margin-top: 23px;}
#content.interview.detail .question + .answer{margin-top: 15px;}
#content.interview.detail .answer + .question{margin-top: 48px;}
#content.interview.detail .answer + .img-wrap{margin-top: 13px}
#content.interview.detail .button-area.detail{margin-top: 122px}
@media (min-width: 751px) {
	#content.interview.detail .section-title{font-size: 20px;}
	#content.interview.detail .question{padding-left: 25px; text-indent: -25px; font-size: 18px;}
	#content.interview.detail .answer{margin-left: 149px;}
	#content.interview.detail .section .img-wrap{padding-left: 149px;}
}
@media (max-width: 750px) {
	#content.career.interview.detail .detail-body{padding-top: 31px;}
	#content.interview.detail .section{font-size: 15px;}
	#content.interview.detail .section + .section{margin-top: 48px}
	#content.interview.detail .section-title{font-size: 22px;}
	#content.interview.detail .question{padding-left: 20px; padding-right: 20px; text-indent: -20px; line-height: 1.4;}
	#content.interview.detail .answer{padding-left: 20px; padding-right: 20px; line-height: 1.6;}
	#content.interview.detail .section-title + .question{margin-top: 21px;}
	#content.interview.detail .question + .answer{margin-top: 22px;}
	#content.interview.detail .answer + .question{margin-top: 36px;}
	#content.interview.detail .answer + .img-wrap{margin-top: 17px}
	#content.interview.detail .button-area.detail{margin-top: 72px}
}
/* career > apply.form */
#content.apply.form main{margin-top: 26px;}
@media (min-width: 751px) {
	#content.apply.form .max-770 .max-wrap{border-top: 1px solid #fff; padding-top: 60px;}
}

/* vender */
#content.vender .tabs-wrap{margin-top: 25px;}
#content.vender .form{padding: 32px 0 64px;}
@media (max-width: 750px) {
	#content.vender .text-header{padding-top: 121px; padding-bottom: 36px;}
	#content.vender .text-header .title{line-height: 1;}
	#content.vender .text-header .sub-data{ margin-top: 13px; font-size: 13px; line-height: 1.69;}
	#content.vender .form{padding: 22px 0;}
}

/* contact */
#content.contact main{padding-bottom: 250px;}
#content.contact .main-title{padding: 193px 0 46px;}
#content.contact .section {
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;
}
#content.contact .section > .section-title{line-height: 1.15;}
#content.contact .section > div{font-size: 18px; line-height: 1.44;}
#content.contact .section .address{position: relative;}
#content.contact .section .address .btn.map{position: absolute; top: 3px; right: 20px; line-height: 1; font-weight: 700; text-transform: uppercase;
	display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
#content.contact .section .address .btn.map .ico{margin-right: 6px}
#content.contact .section .email + .btn{margin-top: 14px;}
#content.contact .btn.bdr-white{width: 100%; line-height: 44px; padding: 0 13px 0 20px; text-align: left; font-size: 14px; font-weight: 700; text-transform: uppercase;
	display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex;
	-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
@media (min-width: 961px) {
	#content.contact .section + .section {margin-top: 68px;}
	#content.contact .main-title{border-bottom: 1px solid #fff}
	#content.contact .section > .section-title{margin-top: 2px; width: 225px;}
	#content.contact .section > div{width: calc(100% - 225px);}
	#content.contact .main-title + .section {margin-top: 95px;}
	#content.contact .btn.bdr-white{max-width: 279px;}
}
@media (max-width: 960px) {
	#content.contact .main-title{padding-bottom:0;}
	#content.contact .main-title + .section {margin-top: 58px;}
	#content.contact .section + .section {border-top: 1px solid #fff}
	#content.contact .section {padding: 38px 0 34px;
		-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
	}
	#content.contact .section > .section-title + div {margin-top: 20px;}
	#content.contact .section .address .btn.map{top: -60px}
	#content.contact .section .address + .tel,
	#content.contact .section .tel + .email{margin-top: 20px;}
	#content.contact .section .email + .btn{margin-top: 26px;}
}
@media (max-width: 750px) {
	#content.contact .main-title{padding-top:149px;}
	#content.contact .main-title span.only-pc + span.ta-r{margin-top: 44px;}
	#content.contact .section > .section-title{font-size: 22px; line-height: 1;}
	#content.contact .section > div{font-size: 15px; line-height: 1.333;}
	#content.contact .section .address .btn.map{top: -42px; right: 6px; font-size: 12px}
	#content.contact .btn.bdr-white{width: 100%; line-height:  50px}
}

/* search */
#content.search .section + .section {margin-top: 135px}
@media (max-width: 750px) {
	#content.search .section + .section {margin-top: 42px}
}
@media (min-width: 751px){
	#content.search .section{padding-bottom: 80px;}
}