/*layout style*/
.container { padding: 600px 0 180px; box-sizing: border-box; transition: .5s all ease-out; }
.container.active { padding-top: 277px; box-sizing: border-box; }
.wrap { max-width: 1200px; margin: 0 auto; }
.container > section { padding-top: 54px; box-sizing: border-box; }


/*header style*/
.header { display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; height: 600px; padding: 50px 0 27px; box-sizing: border-box; background: url('../img/img_banner1_main.jpg') center top no-repeat; background-size: cover; transition: .5s all ease-out; }

.hd { position: relative; }
.hd .inner { display: flex; justify-content: space-between; align-items: center; position: relative; max-width: 1200px; margin: 0 auto; }
.hd .hd-logo { position: relative; z-index: 1; width: 171px; height: 39px; background: url('../img/img_logo1.svg') center center no-repeat; transition: .5s all ease-out; }
.hd .hd-logo2 { position: absolute; left: 0; right: 0; z-index: 1; width: 235px; margin: 0 auto; transition: .5s all ease-out; }
.hd .hd-logo2 img { width: 100%; }
.hd .csc-number { display: flex; justify-content: space-between; align-items: center; width: 187px; height: 39px; padding: 0 16px; border: 1px solid #fff; border-radius: 20px; box-sizing: border-box; transition: .5s all ease-out; }
.hd .csc-number .tit,
.hd .csc-number .txt { font-size: 16px; font-weight: 700; color: #fff; }

/*active*/
.header.active { height: 177px; }
.header.active .hd .hd-logo,
.header.active .hd .csc-number { transform: translateY(-100px); }
.header.active .hd .hd-logo2 { width: 170px; transform: translateY(-20px); }


/*gnb style*/
.gnb { display: flex; justify-content: center; align-items: center; }
.gnb li { margin: 0 72px; }
.gnb a { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 28px; font-weight: 700; color: #fff; text-align: center; transition: .2s all ease-out; }
.gnb a span { display: flex; justify-content: center; align-items: center; position: relative; height: 100%; padding: 13px 10px 8px; border-bottom: 4px solid transparent; box-sizing: border-box; transition: .2s all ease-out; }
.gnb li:hover a span,
.gnb li.active a span { border-color: #fff; }


/*footer style*/
.footer { background: #f8f8f8; }

.ft .inner { max-width: 1200px; margin: 0 auto; padding: 66px 0; box-sizing: border-box; }
.ft .ft-logo { margin-bottom: 32px; }
.ft .company-info .txt-group:not(:last-child) { margin-bottom: 20px; }
.ft .company-info .txt-group p { font-size: 13px; font-weight: 400; color: #939393; line-height: 19.5px; }

.ft .ft-btn-top { position: fixed; right: calc(50% - 750px); bottom: 40px; z-index: 99; transform: translateY(100px); width: 60px; height: 60px; border: none; background: url('../img/common/ico_arrow_top1.svg') center center no-repeat; background-size: cover; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; }
.ft .ft-btn-top.on { transform: translateY(0); opacity: 1; visibility: visible; }


@media only screen and (max-width: 1280px) {
	/*layout style*/
	.container,
	.container.active { padding: 80px 0; box-sizing: border-box; }
	.container > section { padding-top: 40px; box-sizing: border-box; }
	
	/*header style*/
	.header,
	.header.active { height: 80px; padding: 0; }
	
	.hd .hd-logo,
	.hd .csc-number { display: none; }
	
	.hd .hd-logo2,
	.header.active .hd .hd-logo2 { top: calc(50% + 21px); left: 40px; right: auto; transform: none; width: 120px; }
	
	/*gnb style*/
	.gnb { position: fixed; bottom: 0; z-index: 100; width: 100%; height: 50px; border-top: 1px solid #d9d9d9; box-sizing: border-box; }
	.gnb li { width: 100%; height: 100%; margin: 0; background: #f7f7f8; }
	.gnb li:hover,
	.gnb li.active { background: #fff; }
	.gnb a { font-size: 16px; color: #c2c2c2; }
	.gnb li:hover a,
	.gnb li.active a { color: #101010; }
	.gnb a span { padding: 0; border-bottom: none; }
	
	/*footer style*/
	.footer { padding-bottom: 50px; box-sizing: border-box; }
	
	.ft .inner { padding: 40px 20px; box-sizing: border-box; }
	.ft .ft-btn-top { left: 0; right: 0; bottom: 70px; transform: translateY(60px); margin: 0 auto; }
}