@charset "utf-8";

/* CSS Document */
@import url('/home/css/basic.css');
@import url('/home/css/nav.css');
@import url('/home/css/form.css');

/* header start */
header > h1 {position:absolute; left:5%; height:90px; line-height:90px; z-index:99; margin-top:0;} 
header > h1 a {display:block; height:100%; font-size:1.2em; font-weight:600; text-decoration:none; overflow:hidden;}
header > h1 a:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background-size:100%;}

.container {width:100%;}
.container section {position:relative; width:100%; margin:0 auto;}
.container section#visual{height:100vh; background:url('/home/images/visual01')no-repeat; background-size:cover}

.section article {padding: 0 16px;}
.container article {position:relative; width:94%; margin:0 auto; padding:30px 0;}

.top-box {position:relative; width:100%; height:180px; border-bottom:1px solid #d4d4d4; background-size:cover; overflow:hidden;}
.top-box .box_ > div {position:absolute; left:0; top:50%; width:100%; margin:0 auto; font-size:1.7em; color:#fff; font-weight:500; text-align:center; z-index:3;}
.top-box > h2 p {padding-bottom:15px; font-weight:600; text-transform:uppercase}
.top-box .box_01 {position:relative; top:0; left:0; height:100%; background:url('/home/images/box_01')no-repeat center;}
.top-box .box_02 {position:relative; top:0; left:0; height:100%; background:url('/home/images/box_02')no-repeat center;}
.top-box .box_03 {position:relative; top:0; left:0; height:100%; background:url('/home/images/box_03')no-repeat center;}
.top-box .box_04 {position:relative; top:0; left:0; height:100%; background:url('/home/images/box_04')no-repeat center;}
.top-box .box_05 {position:relative; top:0; left:0; height:100%; background:url('/home/images/box_05')no-repeat center;}
.top-box .box_::after {position:absolute; top:0; left:0; right:0; bottom:0; background-color:#000; content:""; opacity: 0.6; }


.sub_title_box_ {position:relative; width:90%; margin:0 auto; }
.sub_nav {position:relative; height:20px; width:100%;}
.sub_nav .list {display:inline-block; float: left; width:auto; font-size:.5em; letter-spacing: 0; color: #fff; font-weight: 200; display: flex; align-items: center; column-gap: 5px; line-height: 20px; margin-right: 5px}
.sub_nav .list i {position: relative; top: 0; font-size: 0.6em}


.path-box {position:relative; top:0; width:100%; height:45px; text-align:center; background:#f7f7f7; border-bottom:1px solid #d4d4d4}
.path-box ul.path {position:relative; top:0; width:1200px; height:45px; margin:0 auto; padding:0;}
.path-box ul.path >li {float:left; display:inline-block; position:relative; height:45px;}
.path-box ul.path >li a {display:block; height:45px; padding:0 20px;line-height:45px; font-size:1em; color:#777;}
.path-box ul.path >li a.on {color:#004ac5; font-weight: 400; background:#fff; border-bottom:2px solid #004ac5}
.paths_box {position:relative; top:0; width:100%; height:auto; text-align:center; background:#f7f7f7}
.paths_box ul.paths {position:relative; top:0; width:1100px; height:35px; margin:0 auto; padding:0;}
.paths_box ul.paths >li {float:left; display:inline-block; position:relative; height:35px; font-size:.8em; }
.paths_box ul.paths >li a {display:block; height:35px; padding:10px 20px 0; color:#333;}
.paths_box ul.paths >li a:hover {color:#004ac5;}
.paths_box ul.paths >li a.on {color:#004ac5; font-weight:bold}

#lnb {display:none;}

.navbar{min-height:50px !important;border-bottom:1px solid #d4d4d4;background:#fff;}
/* sub-common-nav */
.lnb.navbar {margin-bottom:0;}
.lnb ul.nav {border-left:1px solid #d4d4d4;margin:0;}
.lnb ul.nav >li {width:250px;border-right:1px solid #d4d4d4; background:url('/home/images/arrow_violet')no-repeat 92% 22px !important;}
.lnb ul.nav >li a {display:block;width:250px;height:50px;font-size:1.1em;padding:0 20px;font-weight:600;line-height:50px;}
.lnb ul.nav li ul.deth li a {font-weight:400;color:#888;height:36px;line-height:36px;font-size:1em;}
.lnb ul.nav li ul.deth li a:hover {background:#fff;color:#2c5c9d;}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {background-color:none !important;}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {background:rgba(255,255,255,0);}

.title-box {display:none; position:relative; width:100%; margin:0 auto; padding:30px 0 0; border-bottom:1px solid #ddd;}
.title-box h3 {display:inline-block; padding:0 20px 10px 20px; font-size:1.6em; font-weight:600; border-bottom:3px solid #333; color:#333;}


/*   서브컨텐츠  */
.container .inner {position:relative; width:90%; margin:0 auto; padding:30px 0 0;}

/* .about {margin-bottom: 20px;}
.about h2 {font-size: 1.3em; margin-bottom: 20px;}
.about .text {padding:40px 0;}
.about .text h3 {font-size:2em; font-weight: 600; color:#333;text-align: center;margin-bottom:20px;}
.about .text h3 em {color:#1567e2;}
.about .text p {font-size:1.2em; text-align: center;}
.about .text span {display:block; margin-top:20px; font-size:.95em; line-height:1.4em; color:#777; text-align: center;}
.about .image > img {width:100%; height:240px;}  */

.about .a_box01 {margin-top:30px;}
.about .a_box01 h2 {text-align:center; font-size:1.5em; word-break:keep-all; line-height: 1.3em;}
.about .a_box01 .a_img {width:100%; height:200px; margin:30px 0; background:url('/home/images/about.jpg')no-repeat center center; background-size:cover;}
.about .a_flex .left {font-family:'Permanent Marker'; font-size:1.8em; text-align: center; font-weight: 600;}
.about .a_flex .right {margin:30px 0; word-break:keep-all;}

.about .a_box02 {width:100%; padding:0; margin:50px 0;}
.about .a_box02 .wrap_ {position:relative; width:100%; margin:0 auto; z-index:3}
.about .a_box02 .wrap_ .images-box {position:relative; width:100%; height:auto; padding:30px 20px; background:#5a7592 url('/home/images/main/count_img_bg.jpg')no-repeat center bottom; background-size:cover; z-index: 2}
.about .a_box02 .wrap_ .images-box:after {display:block; position:absolute; left:0; top:0; width:100%; height:100%; content:''; background:rgba(0,0,0,.3); z-index:1}
.about .a_box02 .wrap_ .images-box div {position:relative; z-index:3}
.about .a_box02 .wrap_ .images-box div p {padding:0; font-size:2em; line-height:1.14em; color:#fff; font-weight:800}
.about .a_box02 .wrap_ .images-box div span {display:block; margin-top:25px; padding-right:30px; font-size:.95em; line-height:1.3em; color:#fff; font-weight:200; letter-spacing: -1px}
.about .a_box02 .wrap_ .count-box {position: relative; top:0; width:100%; background:#fff; border-right:0; border-radius:0 15px 15px 0; z-index:3}
.about .a_box02 .wrap_ .count-box ._count {width:100%; padding:0;}
.about .a_box02 .wrap_ .count-box ._count > div {width:25%; padding:0 0 5px; border-left:1px solid #eee; color:#333; border-bottom:1px solid #eee; border-top:1px solid #eee; text-align:center}
.about .a_box02 .wrap_ .count-box ._count > div:first-child {border-radius:0 0 0 15px}
.about .a_box02 .wrap_ .count-box ._count > div:last-child {border-radius:0 0 15px 0; border-right:1px solid #eee;}
.about .a_box02 .wrap_ .count-box ._count > div:hover {border:none; background:#3a6799; color:#fff; transition:all .2s ease-in-out;}
.about .a_box02 .wrap_ .count-box ._count > div > div {display:inline-block; position:relative; width:65px; height:65px; font-weight:200; font-size:1em; line-height:178px; background-size:100% !important; transition:all .2s ease-in-out; z-index: 1}
.about .a_box02 .wrap_ .count-box ._count > div > div.count1 {background:url('/home/images/about_icon1.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div > div.count2 {background:url('/home/images/about_icon2.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div > div.count3 {background:url('/home/images/about_icon3.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div > div.count4 {background:url('/home/images/about_icon4.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div > p.name {margin-top:-5px; font-size:.8em; font-weight:300;}
.about .a_box02 .wrap_ .count-box ._count > div > p.number {margin:0 auto; font-size:1.1em; font-weight:600; color:#445d7a;}
.about .a_box02 .wrap_ .count-box ._count > div > p.number > span {display:inline-block; padding-left:3px; font-size:.74em; font-weight:300; color:#333;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > div.count1 {background:url('/home/images/about_icon1_hv.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > div.count2 {background:url('/home/images/about_icon2_hv.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > div.count3 {background:url('/home/images/about_icon3_hv.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > div.count4 {background:url('/home/images/about_icon4_hv.png')no-repeat center;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > p.number {color:#fff;}
.about .a_box02 .wrap_ .count-box ._count > div:hover > p.number > span {color:#eee;}
.about .a_box02 .wrap_ .text-box {position:relative; top:0; left:0; width:90%; margin:20px auto 0; padding-left:15px; text-align:left; overflow: auto}
.about .a_box02 .wrap_ .text-box:after {position:absolute; left:0; top:5px; width:2px; height:15px; content:''; background:#445d7a;}
.about .a_box02 .wrap_ .text-box p {margin-bottom:10px; font-size:1.2em; line-height:1.1em; color:#555; font-weight:400;}
.about .a_box02 .wrap_ .text-box span {font-size:.95em; line-height: 1.3em; color:#afafaf;}

.bici { font-size: 1.3em; margin-bottom: 20px; font-weight: 600;}

/*     연혁      */
.history .txt_box {position:relative; width:100%; height:180px; background-attachment: fixed; background-image: url('/home/images/2020.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; text-align:center; color:#fff; font-size:2.5em; font-weight:600}
.history .txt_box2 {background-image: url('/home/images/2010.jpg');}
.history .txt_box3 {background-image: url('/home/images/2000.jpg');}
.history .txt_box:before {display: block; content: ''; clear: both; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0;}
.history ._txt {display:flex;align-items:center;justify-content:center;height:100%;flex-direction: column; gap: 5px; position: relative; z-index: 2;}
.history ._txt p {font-size: .5em; font-weight: 300;}

.history .list_box {padding-left: 20px;}
.history .list_box ul:first-child {padding-top: 35px;}
.history ul {display:block; width: 100%; padding: 20px 0 50px 40px; border-left: 1px solid #e5e5e5;}
.history ul li:first-child {vertical-align: top; width: 100%; font-size:2em; font-weight: 600;	color: #666; margin-bottom: 15px; position: relative; transition: all 0.7s;}
.history ul li:first-child:before {display: block; content: ''; clear: both; width: 35px; height: 2px; background: #e5e5e5; position: absolute; left: -40px; top: 50%; transform: translateY(-50%);}
.history ul li:first-child:after {display: block; content: ''; clear: both; width: 10px; height: 10px; background: #666; border-radius: 50%; position: absolute; left: -45px; top: 50%; transform: translateY(-50%);}

#history-section.scroll .history .list_box ul li:first-child {background: #157ddd;}
#history-section.scroll .history .list_box ul li:first-child:before {background: #157ddd;}
#history-section.scroll .history .list_box ul li:first-child:after {background: #157ddd;}

.history .list_box ul li:first-child.active {
	/* Style for first li when active */
	color: #f87c28;
}

.history ul li:last-child.active i {
	/* Style for first li when active */
	color: #f87c28;
}

.history ul li:last-child.active i > span {
	/* Style for first li when active */
	color: #f87c28;
}

.history .list_box ul li:first-child:before.active {
	/* Style for first li's before pseudo-element when scrolling */
	background: #f87c28;
}
.history .list_box ul li:first-child:after.active {
	/* Style for first li's after pseudo-element when scrolling */
	background: #f87c28;
}

.history ul li {display:block;}
.history ul li:last-child {line-height: 24px; vertical-align: top;}
.history ul li:last-child p {display:table; font-size:1.1em; margin-bottom:15px; margin-top:12px;}
.history ul li:last-child i {transition: all 0.7s; display:table-cell; width:35px; color: #666; font-size:1.1em; font-weight:600; font-style:normal; vertical-align:top; transform: translateY(2px);}
.history ul li:last-child i > span {display: block;}
.history ul li:last-child span {display:block; padding-top:2px; font-size:.9em; line-height:1.3em; color:#777;}

.location .address {font-size:1em; font-style:normal; color:#999; line-height:1.3em; text-align:left; padding:12px 10px;}
.location .address span {display:block; font-size:1.3em; line-height:1.3em; color:#333; margin-bottom:15px;}
.location .contact {display:block; position:relative;}
.location .contact p {position:relative; left:0; top:0; width:100%; height:50px; margin-top:10px; font-size:1.1em;}
.location .contact p i {position:absolute; width:50px; height:50px; line-height:50px; border-radius:50%; text-align:center; color:#fff; background:#4956ab; font-size:1.2em;}
.location .contact p span {display:none; width:100px; padding-left:60px; text-align:left; line-height:50px; overflow:hidden; color:#777;}
.location .contact p a {display:block; height:50px; padding-left:60px; line-height:50px; color:#777;}

.catalog {margin-top: 40px;}
.catalog .ca_title {display:flex; justify-content:space-between; margin-bottom:20px;}
.catalog .ca_title h2 {font-size:1.3em; font-weight: 600;}
.catalog .ca_title span {background:#333; padding:3px 8px;}
.catalog .ca_title span a {font-size:.7em; color:#fff;}
.catalog .ca_title span a > img {width:10px; margin:5px 0 0 10px;}
.catalog .ca_img > ul li {padding-bottom:30px;}
.catalog .ca_img img {width:100%;}


/* 퀵메뉴 */
.quickmenu {position:fixed !important; flex-wrap:nowrap !important; display:block; bottom:calc(167px + env(safe-area-inset-bottom)) !important; right:17px !important; transform:translateY(-50%); width:auto !important; z-index:999;}
.quick {width:100%;}
.quick-link {width:38px;height:38px;border-radius:50%;position:relative;}


/* 이용약관,개인정보보호정책 */
.scroll_text h3 {margin-bottom:35px; font-size:1.2em; font-weight:400}
.scroll_text > div {margin-bottom:80px;}
.scroll_text .inner {margin-bottom:40px;}
.scroll_text .inner > h4 {margin-bottom:15px; font-size:1.0em;}
.scroll_text .inner > h4 > span {font-size:.8em; color:#999;}
.scroll_text .inner > div > p {margin-bottom:10px; line-height:1.4em; font-size:.9em; color:#555; font-weight:100}
.scroll_text .inner > div > p > span {display:block; padding-left:8px; font-size:.85em; color:#777;}
.scroll_text .inner > div > p > span:first-child {margin-top:8px;}
.scroll_text .inner > div > p > span > em {display:block; padding-left:15px; font-size:.9em; font-style:normal}
.scroll_text .inner > div > p > span > em:first-child {margin-top:5px;}
.scroll_text .inner > div > p > span > span {display:block; padding-left:10px;}
.scroll_text {max-height:600px; padding:0 30px 0 0; overflow-y: auto; direction:ltr; scrollbar-color: #d4aa70 #e4e4e4; scrollbar-width: thin;}
.scroll_text::-webkit-scrollbar {width:5px;}
.scroll_text::-webkit-scrollbar-track {background-color: #e4e4e4; border-radius: 100px;}
.scroll_text::-webkit-scrollbar-thumb {border-radius: 100px; border: 2px solid rgba(0, 0, 0, 0.18); border-left: 0; border-right: 0; background-color: #19988b;}
.scroll_text .inner > p {width:100%; padding:30px; line-height:1.6em; font-size:1em; border:1px solid #ddd; background:#f7f7f7;}/* 이메일수집거부 */
.scroll_text .inner > span {display:block; width:100%; padding:10px; font-size:.9em; color:#555;}
.scroll_text .inner > div > table {width:100%; border-top:1px solid #aaa; border-right:1px solid #ddd;}
.scroll_text .inner > div > table tr.th td {text-align:center; background:#f7f7f7;}
.scroll_text .inner > div > table td {padding:8px; text-align:left; border-left:1px solid #ddd; border-bottom:1px solid #ddd; font-size:.8em;}


/* @keyframes motion {
    0% {transform:translateY(0);}
    50% {transform:translateY(-10px);}
    100% {transform:translateY(0);}
} */

#quick-box, #menu-btn {position:fixed;left:-9999px;}

.quick-1 {position:absolute;top:0px;left:50%;background:#2c5c9d;text-align:center;width:0;height:40px;border-radius:50%;transform:scale(0) translate(-50%,0);transform-origin:top;transition:all .3s;}
.quick-2 {top:0px;right:0;background:#fdc23d;}
.quick-3 {top:0px;right:0;background:#0ea527;}
.quick-4 {top:0px;right:0;background:#e02191;}
.quick-1 > a {position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);width:100%; font-size:.8em; color:#fff;}
.quick-1 > a img {width:23px;}
.quick-2 > a img {width:31px;}

.quick-btn {display:block;width:38px;height:38px;line-height:35px;border-radius:44%; box-shadow:0px 0px 6px 1px rgba(0,0,0,0.2); cursor:pointer;background:#a5c9e1;opacity:0.8;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5em;width:100%;text-align:center;}
.quick-btn:hover {background:#a5c9e1; opacity:1;}

#quick-box:checked ~ .quick-1 {left:0%;top:-45px;transform:scale(1);width:38px; height:38px;}
#quick-box:checked ~ .quick-2 {top:-90px;}
#quick-box:checked ~ .quick-3 {top:-135px;}
#quick-box:checked ~ .quick-4 {top:-180px;}


footer .inner {position:relative; width:100%; height:100%; margin:0 auto;}
footer .inner .logo {}
footer .inner .util {padding:10px 0; border-bottom:1px solid #555;}
footer .inner .util a {display:inline-block; margin-right:30px; font-size:.78em; font-weight:100; color:#bbb;}
footer .inner .info {padding:10px 0; font-size:.78em; font-weight:100; color:#bbb;}
footer .inner .info p {display:inline-block; margin-right:30px; }
footer .inner .info address {font-style:normal;}
footer .inner .copyright {font-size:.95em; font-weight:200; color:#777;}


/* toast 설정 */
.toast_style {display:block; position:fixed; bottom:-100px; width:100%; height:auto; padding:15px 0; background:rgba(0,0,0,.7); z-index: 11}
.toast_a, .toast_p {display:block; height:30px; padding:0 25px; text-align: center; font-size:.9em; line-height:30px; color:#fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.toast_inner {display:flex; justify-content:center; flex-wrap:nowrap; width:auto;}
.toast_inner .toast_button {width:80px; height:30px; margin:0 5px; line-height:28px; text-align:center; border:1px solid #FFC726; border-radius:15px; font-size:.8em; color:#FFC726}


@media screen and (min-width: 640px) {

	.about .text h3 {font-size:2.5em; text-align:left; font-style:normal; margin-bottom: 5px;}
	.about .text p {font-size:1.35em; text-align:left; margin-bottom: 20px;}
	.about .text span {font-size:1.2em; text-align:left; margin-top:40px;}

	.location .address {font-size:.9em;}
}	

@media screen and (min-width: 760px) {
	
	.container .inner {width:90%; padding:50px 0;}
	
	.about .a_box01 {margin-top: 20px;}
	.about .text {padding:0 0 0 30px;}
	.about .image img {height:auto}
}

@media screen and (min-width: 920px) {
	.container article {padding:80px 0;}
	
	.top-box {height:300px; border-bottom:1px solid #777; }
	.sub_name {font-size: 1.7em}
	.sub_nav .list {font-size: .6em}
		
	.path-box {display:none;}
	
	#lnb { display:flex; align-items:center; justify-content: center; position:relative; width:100%; height:45px; background:#f7f7f7; border-bottom:1px solid #d4d4d4;}
	#lnb > ul {width:1100px;}
	#lnb > ul > li {float:left; position:relative; border-left:1px solid #ddd;}
	#lnb > ul > li:last-child {border-right:1px solid #ddd}
	#lnb > ul > li > a {display:block; width:auto; height:45px; border-bottom:1px solid #ddd;  line-height:45px; padding:0 25px; text-align:left; color:#999;}
	#lnb > ul > li:last-child > a {color:#333; background: #fff; font-weight: 600; border-bottom:2px solid #1c77c4;}
	#lnb > ul > li > ul {position:absolute; left:-1px; top:44px; padding:25px 15px 15px; border:1px solid #ddd; background:#fff; opacity:0; visibility:hidden; z-index:19 }
	#lnb > ul > li > ul > li {width:180px; height:35px;}
	#lnb > ul > li > ul > li > a {display:block; width:180px; height:35px; line-height:18px; padding:0 10px; color:#aaa;}
	#lnb > ul > li > ul > li > a:hover {color:#222}
	#lnb > ul > li:hover > a {color:#222; background:#fff;}
	#lnb > ul > li:hover .dropdown-toggle {opacity: 1; visibility: visible}
	
	.title-box {width:1200px; margin:0 auto; padding:80px 0 0;}
	.title-box h3 {font-size:2.5em;}
	
	.history ul {display: table; padding: 50px 0 50px 50px;}
	.history ul li {/*display: table-cell;*/font-size:1.1em;}
	.history ul li:first-child {width:180px; font-size:2.3em; }
	.history ul li p:first-child {margin-top:5px;}
	.history ul li:first-child:before {width: 45px; left: -50px;}
	.history ul li:first-child:after {left: -55px;}
	.history ul li:last-child {line-height: 30px; vertical-align: top;}
	.history ul li:last-child span {display:table-cell; padding:0; color:#555; font-size:1em; line-height:1.8em;}
	
	.location > div {margin-top:30px;}
	.location .address {font-size:1.1em; line-height:1.4em; padding-right:50px;}
	.location .address span {font-size:1.3em; line-height:1.3em;}
	.location .contact p {margin-top:0;margin-bottom:15px;}
	.location .contact p span {display:block; width:100%;}
	.location .contact p a {display:none;}


	.about .a_box01 h2 {font-size: 2.2em;}
	.about .a_box01 .a_img {height:500px;}
	.about .a_flex {display:flex; justify-content:space-around; align-items:baseline; gap: 20px;}
	.about .a_flex .left {font-size:2.3em; width: 40%; text-align: left; transform: translateY(20px);} 
	.about .a_flex .right {width: 60%;}
	.about .a_box02 .wrap_ {padding:50px 0 0;}
	.about .a_box02 .wrap_ .text-box {margin:60px auto 0;}
	.about .a_box02 .wrap_ .images-box {width:100%; padding:50px 30px 150px; border-radius:15px}
	.about .a_box02 .wrap_ .images-box div p {font-size:2.4em; line-height:1.1em; }
	.about .a_box02 .wrap_ .images-box div span {font-size:1.1em; letter-spacing:0; width:50%; word-break:keep-all;}
	.about .a_box02 .wrap_ .images-box:after {border-radius:15px}
	.about .a_box02 .wrap_ .count-box {width:55%; margin-top:-150px; margin-left:43%; border-radius:15px; background:rgba(255,255,255,.8);}
	.about .a_box02 .wrap_ .count-box ._count > div {height:122px; padding:10px 0 20px;}
	.about .a_box02 .wrap_ .count-box ._count > div:first-child {border-radius:15px 0 0 15px;}
	.about .a_box02 .wrap_ .count-box ._count > div:last-child {border-radius:0 15px 15px 0}
	.about .a_box02 .wrap_ .count-box ._count > div > div {background-size:110% !important}
	.about .a_box02 .text-box {left:0; width:auto; margin-top:20px; margin-left:45%;}

	.catalog {margin-top: 80px;}
	.catalog .ca_title {margin-bottom:30px;}
	.catalog .ca_title h2 {font-size:2em; font-weight:600;}
	.catalog .ca_title span {padding:9px 20px;}
	.catalog .ca_title span a {font-size:.9em;}
	.catalog .ca_title span a > img {width:12px; margin:3px 0 0 10px;}

	.bici {font-size: 2em; margin-bottom: 30px;}

	/* 퀵메뉴 */
	.quickmenu {position:fixed !important; flex-wrap:nowrap !important; display:block; bottom:calc(143px + env(safe-area-inset-bottom)) !important; right:24px !important; transform:translateY(-50%); width:auto !important; z-index:999;}
	.quick-link {width:60px;height:60px;border-radius:42%;position:relative;}

	.quick-1 > a {position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);width:100%; font-size:1em; color:#fff;}
	.quick-1 > a img {width:35px;}
	.quick-2 > a img {width:45px;}

	.quick-btn {display:block;width:60px;height:60px;line-height:60px;border-radius:42%;cursor:pointer;background:#a5c9e1;opacity:0.8;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2em;width:100%;text-align:center;}
	.quick-btn:hover {background:#a5c9e1; opacity:1;}

	#quick-box:checked ~ .quick-1 {left:0%;top:-70px;transform:scale(1);width:60px; height:60px; border-radius:42%;}
	#quick-box:checked ~ .quick-2 {top:-140px;}
	#quick-box:checked ~ .quick-3 {top:-210px;}
	#quick-box:checked ~ .quick-4 {top:-280px;}

	
	/* toast 설정 */
	.toast_style {display:flex; justify-content:center;}
	.toast_link, .toast_p {display:block; height:30px; margin-right:15px; text-align: center; font-size:.9em; line-height:30px; color:#fff;}
	.toast_button {width:auto; margin-left:8px; padding:0 15px; height:30px; line-height:30px; border:1px solid #FFC726; border-radius:15px; font-size:.8em; color:#FFC726}
	}	


@media screen and (min-width: 1024px) {	
	.about .a_box01 {margin-top: 40px;}
	.about .a_box01 .a_img {margin: 50px 0;}
}


@media screen and (min-width: 1280px) {	
	header > h1 {left:70px; margin-left:0; height:70px; line-height:70px;}
	
	.container article {width:1100px;}
	.container article > div {}
	.container article > div > div.board {}
	
	.history .txt_box {height: 300px; font-size: 3em; background-size: auto;}

	.top-box {height:380px;}
	.top-box .box_ > div {top:45%; font-size:2.4em}
	.sub_title_box_ {width: 1200px;}
	.sub_nav {margin-bottom:10px; font-size:.9em}
	.sub_nav .list {font-size: .5em}
	
	
	/* 서브컨텐 */
	.about .a_box01 {margin-top:60px;}
	.about .a_box01 h2 {font-size:3em;}
	.about .a_box01 .a_img {margin:80px 0 50px;}
	.about .a_flex .left {font-size:3.3em;}
	.about .a_flex .right {font-size:1.2em;}
	.about .a_box02 .wrap_ .images-box div span {font-size:1.4em;}
	.about .a_box02 .wrap_ .images-box div p {font-size:3em;}
	.about .a_box02 .wrap_ .text-box {margin:80px auto 0;}
	.about .a_box02 .wrap_ .text-box p {font-size:1.6em;}
	.about .a_box02 .wrap_ .text-box span {font-size:1.2em; line-height:2em;}
	
	footer .inner {width:1200px;}
}


footer {position:relative; width:100%;}
.inner_box {position:relative; top:0; width:100%; padding:30px 0; background:#282e38; text-align:center}
/*.footer_logo {position: absolute;left: 0;top: 40px;}*/
.inner_box .util {position:relative; width:1020px; margin:0 auto; padding:0 0 10px; border-bottom:1px solid #424242; text-align:center}
.inner_box .util a {font-size:.8em; color:#777; margin:0 10px;}
.inner_box .copyright {position:relative; width:1020px; margin:0 auto; padding:10px 0 0; border-top:1px solid #222; font-size:.75em; color:#555;}


/* Scroll Animation (sa, 스크롤 애니메이션) */
.sa {
	opacity: 0;
	transition: all .8s ease;
}

/* 아래에서 위로 페이드 인 */
.sa-up {
	transform: translate(0, 100px);
}
/* 위에서 아래로 페이드 인 */
.sa-down {
	transform: translate(0, -100px);
}
/* 왼쪽에서 오른쪽으로 페이드 인 */
.sa-right {
	transform: translate(-100px, 0);
}
/* 오른쪽에서 왼쪽으로 페이드 인 */
.sa-left {
	transform: translate(100px, 0);
}
/* 왼쪽으로 회전하면서 페이드 인 */
.sa-rotateL {
	transform: rotate(180deg);
}
/* 오른쪽으로 회전하면서 페이드 인 */
.sa-rotateR {
	transform: rotate(-180deg);
}
/* 작아진 상태에서 커지면서 페이드 인 */
.sa-scaleUp {
	transform: scale(.5);
}
/* 커진 상태에서 작아지면서 페이드 인 */
.sa-scaleDown {
	transform: scale(1.5);
}

.sa.show {
	opacity: 1 !important;
	transform: none;
}