@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
* {box-sizing:border-box}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,input,textarea,select,button,th,td,blockquote {margin:0;padding:0}
body {-webkit-text-size-adjust:none}
ul,ol {list-style:none}
html,body {height:100%}
h1,h2,h3,h4,h5,h6,p,div,ul,li,span {font-family:'Noto Sans KR','맑은 고딕','나눔고딕'}
img {max-width:100%;vertical-align:top}
a {text-decoration:none;color:inherit}
strong {font-weight:500}

body::-webkit-scrollbar {
	width:4px;
}
body::-webkit-scrollbar-thumb {
	height:30%;
	background:#333;
}
body::-webkit-scrollbar-track {
	background:rgba(33, 122, 244, .1);
}
.wrap {font-family:'Noto Sans KR';font-size:16px;color:#333;letter-spacing:-0.025em;line-height:1.68}
.image {overflow:hidden;max-width:1000px;margin:50px auto;border-radius:30px}
/* header */
.header {position:fixed;top:0;left:0;width:100%;z-index:30;transition:all 0.5s ease-out}
.header.disabled {opacity:0}
.header__wrap {overflow:hidden;max-width:1200px;margin:0 auto;padding:20px}
.header.sub {position:absolute}
.logo {float:left;height:16px}
.logo a {display:inline-block;height:16px}
.logo a img {height:16px}
.menu {float:right}
.menu a {display:inline-block;position:relative;font-weight:300;color:#eee;letter-spacing:0;font-weight:500}
.menu a:before {content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:#eee;transition:all 0.3s ease-out}
.menu a:hover {color:#fff}
.menu a:hover:before {width:100%}
.menu a ~ a {margin-left:30px}
.menu a.active:before {width:100%}
/* footer */
.footer {border-top:1px solid #ccc;color:#aaa}
.section .footer {border-top:none;background:#222}
.footer__wrap {max-width:1200px;margin:0 auto;padding:30px 0}
/* main */
.main__info {display:flex;position:relative;justify-content:center;align-items:center;height:100%;color:#fff;text-align:center;z-index:5}
.main__subtitle {font-size:24px;opacity:0;transform:translateY(15px);transition:all 0.5s ease-out 0.2s}
.main__title {font-size:44px;opacity:0;transform:translateY(15px);transition:all 0.5s ease-out 0.4s}
.main__title strong {font-weight:700}
.main__title img {max-width:180px;margin-top:15px}
.main__subtitle ~ .main__title {margin-top:20px}
.animated .main__subtitle {opacity:1;transform:translateY(0)}
.animated .main__title {opacity:1;transform:translateY(0)}
.main__link {position:absolute;bottom:20px;left:0;width:100%;text-align:center;z-index:5;animation:opacity 0.8s linear infinite alternate}
.main__link a {display:inline-block;padding-right:18px;background:url(../images/icon_arrow.png) no-repeat right 49%;background-size:auto 10px;font-size:14px;color:#ccc}
.main__bg {position:relative;height:100%;background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
.main__bg:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
.main__bg--1 {background-image:url(../images/bg_main01.jpg)}
.main__bg--2 {background-image:url(../images/bg_main02.jpg)}
.main__bg--3 {background-image:url(../images/bg_main03.jpg)}
.main__bg--4 {background-image:url(../images/bg_main04.jpg)}
@keyframes opacity {
	from {opacity:1}
	to {opacity:0.2}
}
.notice {display:block;margin-top:10px;font-weight:400;font-size:14px;color:#444}
/* top */
.top {display:flex;justify-content:center;align-items:center;position:relative;height:500px;background-repeat:no-repeat;background-size:cover;background-position:50% 50%;box-shadow:10px 0 30px rgba(0,0,0,0.3)}
.top:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3)}
.top--1 {background-image:url(../images/bg_company.jpg)}
.top--2 {background-image:url(../images/bg_people.jpg)}
.top--3 {background-image:url(../images/bg_franchise.jpg)}
.top--4 {background-image:url(../images/bg_contact.jpg)}
.top--5 {background-image:url(../images/bg_portfolio.jpg)}
.top__title {position:relative;font-size:46px;color:#f1f1f1;z-index:5}
/* content */
.content__box {max-width:1200px;margin:0 auto;padding:140px 0}
.content__title {font-size:42px;color:#222;text-align:center}
.content__title:after {content:'';display:block;width:80px;height:1px;margin:30px auto 35px;background:#e1e1e1}
.content__title small {display:block;margin-top:10px;font-size:18px;color:#333}
.content__date {font-size:16px;color:#aaa;text-align:center}
.box ~ .box {margin-top:100px}
/* history */
.history {text-align:center}
.history__desc strong {font-size:20px;}
.history__image {margin-bottom:50px}
.history__list {display:inline-block;text-align:left}
.history__list li {position:relative;margin:12px 0;padding-left:85px;color:#444}
.history__list li span {position:absolute;top:0;left:0;font-size:18px;font-weight:600}
/* why */
.why {text-align:center}
.why__list {display:inline-block;text-align:left}
.why__list li {display:flex;align-items:center;gap:30px}
.why__list li ~ li {margin-top:30px}
.why__title {font-size:18px;color:#222}
.why__desc {margin-top:10px;word-break:keep-all}
.why__image {display:inline-block;overflow:hidden;width:160px;height:160px;border-radius:50%;background-repeat:no-repeat;background-size:cover;background-position:50% 50%}
.why__image--1 {background-image:url(../images/bg_why1.jpg)}
.why__image--2 {background-image:url(../images/bg_why2.jpg)}
.why__image--3 {background-image:url(../images/bg_why3.jpg)}
/* people */
.people {text-align:center}
.people__desc {margin-bottom:30px;word-break:keep-all}
.people__image {display:inline-block;max-width:200px;margin-bottom:50px}
.tablewrap {max-width:800px;margin:0 auto}
.table {table-layout:fixed;width:100%;padding:0;border-spacing:0;border-top:2px solid #444;text-align:left}
.table th {width:25%;text-align:center}
.table th,td {padding:20px;border-bottom:1px solid #ccc}
.table strong {font-weight:700}
/* franchise */
.franchise {text-align:center}
.franchise__list {font-size:0}
.franchise__list li {position:relative;display:inline-block;width:180px;height:240px;margin:12px 16px;padding:50px 0;border:1px solid #ccc;vertical-align:top;font-size:16px}
.franchise__list li:after {content:'';display:block;position:absolute;top:50%;left:-26px;width:20px;height:20px;margin-top:-10px;background:url(../images/icon_arrow_black.png) no-repeat 50% 50%;background-size:16px auto;opacity:0.4}
.franchise__list li:first-child:after {content:none}
.franchise__image img {height:42px}
.franchise__text {margin-top:30px}
.franchise__button {margin-top:40px}
.btn-download {display:inline-block;min-width:300px;padding:5px 10px;background:#0b144e;color:#fff;line-height:40px;transition:all 0.3s ease-out}
.btn-download:hover {background:#0a001f}
/* contact */
.contact {text-align:center}
.map {position:relative;margin-bottom:50px;padding-top:56.25%;background:gray}
/* portfolio */
.tab {margin-bottom:40px;margin-top:-20px;text-align:center}
.tab a {display:inline-block;margin:0 6px;padding:8px 20px;border-radius:20px;background:#aaa;color:#fff}
.tab a.active {background:#222}
.list {overflow:hidden}
.list li {float:left;width:33.33333333%;padding:18px 8px}
.list li a, .list li span {display:block}
.list__image {position:relative;padding-top:60%;border:1px solid #eee;background-size:cover;background-position:center top;transition:all 0.3s ease-out;}
.list__image:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);transition:all 0.3s ease-out}
.list__image--no:before {content:none;}
.list__title {overflow:hidden;margin-top:10px;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.list__date {margin-top:5px;font-size:14px;color:gray}
.list li a:hover .list__image:before {background:none}
.list--gallery li {width:50%;padding:8px}
.list--gallery .list__image:before {content:none}
.detail {margin-top:50px;text-align:center}
.detail img {margin:5px 0}
.pager {margin-top:20px;padding-bottom:10px;text-align:center}
.pager strong {display:inline-block;margin:0 2px;padding:0 5px;color:#333;text-decoration:underline}
.pager a {display:inline-block;margin:0 2px;padding:0 5px;color:#888}
/*mobile*/
.btn-menu {display:none;position:absolute;top:18px;right:20px;width:20px;height:20px;background:none;border:none}
.btn-menu span {display:inline-block;position:absolute;left:0;width:100%;height:2px;background:#fff}
.btn-menu__top {top:0}
.btn-menu__middle {top:9px}
.btn-menu__bottom {top:18px}
.btn-kakao {position:fixed;bottom:50px;right:50px}
.btn-kakao img {width:60px;z-index:10}
@media screen and (max-width:1025px) {
	.wrap {line-height:1.6}
	.btn-menu {display:inline-block;z-index:30}
	.menu {display:none;position:fixed;top:0;right:0;width:80%;height:100%;padding-top:80px;background:#222}
	.menu a {display:block;padding:15px 20px;text-align:right}
	.main__title {padding:0 20px;font-size:28px}
	.main__title img {height:24px}
	.main__subtitle {font-size:20px}
	.main__subtitle img {width:90px}
	.footer__wrap {padding:20px;font-size:14px}
	/* sub */
	br.pcview {display:block !important}
	.top {height:280px}
	.top__title {font-size:34px}
	.box ~ .box {margin-top:70px}
	.content__title {font-size:32px;line-height:1.2}
	.content__title:after {margin:20px auto}
	.content__box {padding:80px 20px}
	.history__desc {word-break:keep-all}
	.history__desc br {display:none}
	.history__list li {margin:12px 0}
	.why__list {display:block;margin-top:30px}
	.why__list li {display:block;text-align:center}
	.why__title {margin-top:10px}
	.why__desc br {display:none}
	.why__image {width:130px;height:130px}
	.tab {margin-bottom:20px}
	.tab a {margin:0 2px;padding:6px 16px;font-size:15px}
	.list li {width:50%;padding:12px 5px}
	.list--gallery li {padding:5px}
	.list__date {font-size:13px}
	.detail {margin-top:30px}
	.table th, td {padding:15px 12px;font-size:14px}
	.table td {word-break:break-all}
	.people__image img {width:160px}
	.franchise__desc {work-break:keep-all}
	.franchise__desc br {display:none}
	.image {margin:30px auto}
	.franchise__list li {height:auto;font-size:14px}
	.franchise__text {margin-top:20px}
	.franchise__list li:after {content:none}
	.franchise__button {margin-top:30px}
	.btn-download {min-width:240px}
	.btn-kakao {right:20px;bottom:20px}
	.btn-kakao img {width:40px}
}