/*layout style*/
#wrap { display: flex; flex-direction: column; justify-content: space-between; position: relative; max-width: 720px; min-height: 100%; margin: 0 auto; padding-top: 150px; padding-bottom: 103px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); box-sizing: border-box;  transition: .2s all ease-out; }
.container { width: 100%; height: calc(100% - 150px); transition: .2s all ease-out; }


/*header style*/
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; max-width: 720px; margin: 0 auto; background: #fff; transition: .2s all ease-out; }
.header.active { transform: translateY(-60px); }
.hd { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 32px; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; }
.hd .hd-hamburger { width: 40px; height: 40px; border: none; background: url('../img/ico_hamburger1.svg') center center no-repeat; }

.hd2 { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 25px; border-bottom: 1px solid #f2f2f2; box-sizing: border-box; }
.hd2 .hd-tit { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: #000; letter-spacing: -0.5px; }
.hd2 .hd-back { width: 40px; height: 40px; border: none; background: url('../img/ico_arrow_back1.svg') center center no-repeat; }
.hd2 .hd-hamburger { display: none; width: 40px; height: 40px; border: none; background: url('../img/ico_hamburger1.svg') center center no-repeat; }


/*m-header style*/
.m-gnb { display: none; position: fixed; z-index: 99999; top: 0; left: 0; right: 0; max-width: 720px; height: 100%; margin: 0 auto; background: #fff; }
.m-gnb .top { display: flex; justify-content: space-between; align-items: center; height: 80px; padding: 0 32px; border-bottom: 1px solid transparent; box-sizing: border-box; }
.m-gnb .top .m-close { width: 40px; height: 40px; border: none; background: url('../img/ico_x1.svg') center center no-repeat; }
.m-gnb .content { height: calc(100% - 80px); padding: 20px 0; box-sizing: border-box; overflow-y: auto; }

.list-m-gnb > li { height: 70px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.list-m-gnb a { display: flex; align-items: center; height: 100%; padding: 0 32px; box-sizing: border-box; font-size: 18px; font-weight: 500; color: #000; transition: .2s all ease-out; }
.list-m-gnb a:hover { color: #03a9f4; }


/*footer style*/
.ft-top { position: fixed; bottom: 32px; right: calc(50% - 328px); width: 48px; height: 48px; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); box-sizing: border-box; background: url('../img/ico_arrow_top1.svg') center center no-repeat #fff; }


/*메뉴 등록*/
#wrap.menu { max-width: none; }
#wrap.menu .header,
#wrap.menu .btn-floating-bottom { max-width: none; }
#wrap.menu .m-gnb { max-width: none; }


/*메인*/
#wrap.main { padding-top: 80px; padding-bottom: 40px; box-sizing: border-box; }


@media only screen and (max-width: 720px) {
	.header, .btn-floating-bottom { max-width: 100%; }
	
	/*layout style*/
	#wrap { padding-top: 56px; padding-bottom: 75px; box-sizing: border-box; }
	.container { height: calc(100% - 56px); }
	
	/*header style*/
	.hd { display: none; height: 60px; padding: 0 16px; box-sizing: border-box; }
	.hd .hd-logo img { width: 70px; }
	.hd .hd-hamburger { width: 30px; height: 30px; background-size: 24px; }
	
	.hd2 { height: 56px; padding: 0 16px; box-sizing: border-box; }
	.hd2 .hd-tit { font-size: 18px; letter-spacing: 0; }
	.hd2 .hd-back { width: 30px; background-position: left center; }
	.hd2 .hd-hamburger { display: block; width: 30px; height: 30px; background-size: 24px; }
	
	/*m-header style*/
	.m-gnb .top { height: 56px; padding: 0 16px 0 20px; box-sizing: border-box; }
	.m-gnb .top .m-logo img { width: 70px; }
	.m-gnb .top .m-close { width: 30px; height: 30px; background-size: 24px; }
	.m-gnb .content { height: calc(100% - 56px); padding: 10px 0; box-sizing: border-box; }
	
	.list-m-gnb > li { height: 60px; }
	.list-m-gnb a { padding: 0 20px; box-sizing: border-box; font-size: 16px; }
	
	/*footer style*/
	.ft-top { right: 20px; bottom: 20px; }
	
	/*메인*/
	#wrap.main { padding-top: 60px; box-sizing: border-box; }
	#wrap.main .hd { display: flex; }
}