body {
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	color: #000;
	background-color: #fff;
	overflow-x: hidden;
	transition: none;
}
body:has(#fullpage){
	opacity: 0;
}
body:has(.fullpage-wrapper) {
	opacity: 1!important;
}

ul {
	margin: 0;
	padding: 0;
}

li {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: #232323;
	transition: 0.5s ease;
}

a:hover,
a:active,
a:focus {
	color: #000;
	text-decoration: none;
	outline: none;
}
select::-ms-expand {
	display: none;
}
a i.arrow-right {
	float: right;
}
a i.arrow-right:before {
	content: '';
	display: block;
	width: 45px;
	margin-top: 25px;
	border-top: 2px solid #fff;
}
a i.arrow-right:after {
	content: '';
	display: block;
	width: 15px;
	border-top: 2px solid #fff;
	transform: rotate(30deg);
	position: relative;
	top: -6px;
	left: 32px;
}
.container {
	width: 1200px;
}

nav.navbar.bootsnav.fixed {
	position: fixed;
	top: 0;
}
nav.navbar.bootsnav {
	/* backdrop-filter: blur(3px); */
	z-index: 999;
	width: 100%;
	background-color: rgba(0,0,0,0);
	transition: 0.5s ease;
	border: none;
}
nav.navbar.bootsnav .side-menu {
	margin-top: 46px;
	margin-left: 55px;
	cursor: pointer;
	margin-right: 15px;
}
nav.navbar.bootsnav .side-menu i {
	width: 25px;
	height: 3px;
	background: #000;
	display: block;
	margin: 7px;
}
nav.navbar.bootsnav ul.nav>li>a {
	font-size: 18px;
	font-weight: 500;
	color: #fff;
	padding: 0px;
	margin: 45px 35px 45px 35px;
}

nav.navbar.bootsnav ul.nav>li.dropdown:hover .dropdown-menu {
	display: block;
}
nav.navbar.bootsnav ul.nav>li:last-child > a{
	margin-right: 0;
	font-size: 22px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
	background-color: #fff!important;
}
.navbar-collapse.collapse {
	border-bottom:none
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
	border: none;
	transition: ease 0.3s;
	display: block;
	opacity: 0;
	margin: 0;
	overflow: hidden;
	max-height: 0;
	width: auto;
	left: -30px;
	background-color: unset;
}



nav.navbar.bootsnav ul.navbar-right li.dropdown ul.dropdown-menu li a {
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	padding: 0;
	border: none;
	background-color: #fff;
}
nav.navbar.bootsnav ul.navbar-right li.dropdown ul.dropdown-menu li {
	width: 42px;
}
nav.navbar.bootsnav ul.navbar-right li.dropdown ul.dropdown-menu li a:hover {
	background-color: #000;
	color: #fff;
}
nav .navbar-brand {
	padding: 32px 15px;
}
.dropdown-menu > li > a {
	font-size: 22px;
	font-weight: 300;
	color: #000;
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li > a {
	color: #000;
}

nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li > a {
	padding-left: 0;
	border: none;
}

nav.navbar .search {
	margin: 42px 25px;
}
nav.navbar .search input {
	border: 1px solid #000;
	border-radius: 15px;
	color: #000;
	width:215px;
	height: 35px;
}
nav.navbar .search input::placeholder {
	color: #cdcdcd;
}
nav.navbar .search button {
	width: 30px;
	height: 30px;
	background-color: #ccc;
	border: none;
	border-radius: 15px;
	position: absolute;
	top: 0;
	right: 0;
	margin: 2px;
	background-image: url(../images/icon-search.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}
nav.navbar .language {
	margin: 32px 25px;
	border-radius: 15px;
	color: #fff;
	padding: 0 10px;
	margin-right: 0px;
}
nav.navbar .language span a {
	font-size: 20px;
	font-weight: 300;
	color: #c5c5c5;
	padding: 5px 7px;
}
nav.navbar .language span.other {
	position: absolute;
	left: 40px;
	top: 40px;
	background-color: #fff;
	border: 1px solid #ccc;
	display: none;
}
nav.navbar .language:hover span.other {
	display: block;
}
nav.navbar .language span.other a {
	color: #000;
}

i.i-language {
	display: inline-block;
	position: absolute;
	top: -6px;
	margin-left: -35px;
	width: 30px;
	height: 30px;
	background-image: url(../images/icon_language.png);
}




nav.navbar .search ,nav.navbar .language ,nav.navbar.bootsnav ul.nav>li>a {
	transition: 0.3s ease;
}


nav.navbar .navbar-brand > img {
	transition: 0.3s ease;
	width: 100%;
}

nav.navbar.bootsnav.fixed-small {
	background-color: rgba(0,0,0,0.5);
}

nav.navbar.bootsnav .navbar-brand .logo.black ,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-brand .logo.black ,nav.navbar.bootsnav.subpage .navbar-brand .logo.black{
	display: none;
}
.wrap-sticky nav.navbar.bootsnav.sticked .navbar-brand .logo.black ,.wrap-sticky nav.navbar.bootsnav.subpage .navbar-brand .logo.black {
	display: block;
}
.wrap-sticky nav.navbar.bootsnav.sticked .navbar-brand .logo.white ,.wrap-sticky nav.navbar.bootsnav.subpage .navbar-brand .logo.white {
	display: none;
}
.wrap-sticky nav.navbar.bootsnav.sticked  ul.nav>li>a ,.wrap-sticky nav.navbar.bootsnav.subpage  ul.nav>li>a {
	color: #000;
}


nav.navbar.bootsnav ul.nav>li.dropdown .dropdown-menu {
	max-height: 0;
	overflow: hidden;
	transition: 0.3s ease;
	border: 2px solid #000;
	margin-top: -30px;
	    margin-left: 50px;
}
nav.navbar.bootsnav ul.nav>li.dropdown:hover .dropdown-menu {
	max-height: 250px;
	opacity: 1;
}
.wrap-sticky nav.navbar.bootsnav.sticked {
	background-color:rgba(255,255,255,0.8) ;
}


nav.navbar.bootsnav:hover .navbar-collapse ,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-collapse{
	border-color: rgba(0,0,0,0.2);
}
nav.navbar.bootsnav li.dropdown ul.dropdown-menu {
	left: 0;
	width: 45px;
	max-width: 45px;
	min-width: 45px;
}
nav.navbar.bootsnav ul.nav>li:nth-child(1).dropdown .dropdown-menu ,nav.navbar.bootsnav ul.nav>li:nth-child(1).dropdown .dropdown-menu,nav.navbar.bootsnav ul.nav>li:nth-child(4).dropdown .dropdown-menu{
	width: 160px;
}
nav.navbar.bootsnav ul.nav>li:nth-child(3).dropdown .dropdown-menu {
	width: 200px;
}
nav.navbar.bootsnav ul.nav>li:nth-child(5).dropdown .dropdown-menu {
	width: 190px;
}
nav.navbar.bootsnav ul.nav>li:nth-child(6).dropdown .dropdown-menu {
	min-width: 100px;
}
nav.navbar.bootsnav ul li.dropdown ul.dropdown-menu li a span {
	display: inline-block;
	color: #000;
}
nav.navbar.bootsnav ul li.dropdown ul.dropdown-menu li a span:after {
	content: '';
	width: 100%;
	height: 9px;
	background-color: #65cc80;
	display: inline-block;
	position: relative;
	top: -20px;
	z-index: -1; 
	opacity: 0;
	transition: 0.5s ease;
}
nav.navbar.bootsnav ul li.dropdown ul.dropdown-menu li a:hover span:after {
	opacity: 1;
}
nav.navbar.bootsnav ul.navbar-nav > li:last-child > a {
    margin-top: 40px;
}
nav.navbar.bootsnav ul.navbar-nav > li:last-child > a img {
    margin-right: 5px;
}
.main-banner {
	margin-top: -115px;
}
.main-banner .item {
	height: 100vh;
	display: flex;
	align-items: center;
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.main-banner .item .txt1 {
	font-size: 32px;
	font-weight: 300;
	padding-top: 100px;
}
.main-banner .item .txt2 {
	font-size: 64px;
	letter-spacing: -0.5px;
	font-family: "NanumMyeongjoBold", serif;
	font-weight: 700;
	padding-bottom: 40px;
}
.main-banner .item .txt3 {
	font-size: 24px;
	font-weight: 200;
	padding-bottom: 105px;
}
.main-banner .item .txt4 {
	font-size: 24px;
	font-weight: 200;
	padding-bottom: 30px;
}
.main-banner .item .txt4 a {
    color: #fff;
}
.main-banner .item .dot ul {
	display: flex;
	flex-direction: row;
}
.main-banner .item .dot ul li {
	cursor: pointer;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: rgba(255,255,255,0.5);
	margin-right: 20px;
}
.main-banner .item .dot ul li.active {
	background-color: rgba(255,255,255,1);
	cursor: default;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -ms-transform: translateY(-40);
        transform: translateY(-40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
.active .fadeindown1 {
	-webkit-animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-delay: 0.5s;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.active .fadeindown2  {
	-webkit-animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-delay: 0.8s;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.active .fadeindown3  {
	-webkit-animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-delay: 1s;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.active .fadeindown4  {
	-webkit-animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-delay: 1.2s;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.main-item2 .title {
	text-align: center;
	font-size: 48px;
	font-family: "NanumMyeongjoBold", serif;
	font-weight: 700;
	line-height: 64px;
	letter-spacing: -1px;
	padding-bottom: 40px;
	padding-bottom: 15px;
	padding-top: 120px;
}
.main-item2 .description {
	font-size: 24px;
	font-weight: 300;
	text-align: center;
	padding-bottom: 80px;
}
.main-item3 {
	background-color: #f6f3e8;
	padding: 150px 0;
}
.main-item3 .owl-carousel {
	margin-left: -65px;
}
.main-item3 .conts .item {
	display: none;
}
.main-item3 .conts .item.active {
	display: flex;
	flex-direction: column;
}
.main-item3 .conts .txt1 {
	font-size: 28px;
	padding-top: 140px;
}
.main-item3 .conts .txt2 {
	font-size: 54px;
	font-weight: 700;
	font-family: "NanumMyeongjoBold", serif;
	line-height: 68px;
	padding: 20px 0;
}
.main-item3 .conts .txt3 {
	font-size: 24px;
	padding-bottom: 60px;
}
.main-item3 .conts a {
	font-size: 16px;
	width: 170px;
	height: 40px;
	border: 1px solid #000;
	text-align: center;
	line-height: 40px;
	display: block;
	color: #000;
}
.main-item3 .owl-carousel .owl-item {
	text-align: right;
}
.main-item3 .owl-carousel .owl-item img {
	width: auto;
	display: inline-block;
}
.main-item3 .conts a:hover {
	color: #fff;
	background-color: #000;
}
.main-item3 .col-md-5 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.main-item3 .next {
	padding-right: 80px;
	padding-top: 140px;
}
.main-item3 .next img {
	cursor: pointer;
}
.main-item4 {
	overflow: hidden;
	padding: 140px 0;
}
.main-item4 .subtitle {
	font-size: 28px;
}
.main-item4 .title {
	font-size: 54px;
	font-weight: 700;
	font-family: "NanumMyeongjoBold", serif;
	line-height: 68px;
	padding: 20px 0;
}
.main-item4 .description {
	font-size: 24px;
	padding-bottom: 60px;
} 
.main-item4 .item a {
	font-size: 16px;
	width: 170px;
	height: 40px;
	border: 1px solid #000;
	text-align: center;
	line-height: 40px;
	display: block;
	color: #000;
}
.main-item4 .item a:hover {
	color: #fff;
	background-color: #000;
}
.main-item4 .main-project {
	width: 1116px;
}

.main-item3 .item.active .txt1 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

.main-item3 .item.active .txt2 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}

.main-item3 .item.active .txt3 {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}
.main-item3 .item.active a {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: fadeInUp;
}
.main-item5 {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(/resource/home/ko/assets/images/main_18.jpg);
	padding: 130px 0;
}
.main-item5 .subtitle {
	font-size: 28px;
	color: #fff;
}

.main-item5 .title {
	font-size: 54px;
	font-weight: 700;
	font-family: "NanumMyeongjoBold", serif;
	line-height: 68px;
	padding: 20px 0;
	color: #fff;
	padding-bottom: 50px;
}
.main-item5 a {
	font-size: 16px;
	width: 170px;
	height: 40px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 40px;
	display: block;
	color: #fff;
}
.main-item5 a:hover {
	color: #fff;
	background-color: #000;
}
footer {
	padding: 70px 0;
	background-color: #f6f3e8;
}
.company-info .bd .item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 10px;
}
.company-info .bd .item p {
	width: 33.33%;
}
.company-info .copyright {
	padding: 0;
	margin: 0;
	padding-top: 30px;
	margin-top: 20px;
	border-top: 1px solid #000;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.company-info .copyright img {
    margin-left: 15px;
    margin-right: 5px;
}
.subpage-hd {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/subpage_03.jpg);
	height: 380px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center
}
.subpage-hd .title {
	font-size: 24px;
	margin-top: 70px;
	font-weight: 300;
}
.subpage-hd .description {
	font-size: 36px;
	font-weight: 500;
	font-family: "NanumMyeongjoBold", serif;
	padding-top: 15px;
}
.subpage-hd .humbuger-navi {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 60px;
}
.subpage-hd .humbuger-navi i.home {
	background-image: url(../images/icon_home.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
}
.subpage-hd .humbuger-navi i.arrow {
	background-image: url(../images/icon_arrow_right_white.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	margin: 0 8px;
}
.subpage-hd .humbuger-navi span {
	font-weight: 300;
	font-size: 16px;
}
.subpage-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 130px 15px 70px;
}
.subpage-header .title {
	font-size: 48px;
	font-weight: 700;
	flex: 1;
	font-family: "NanumMyeongjoBold", serif;
}
.subpage-header .navigation .active {
	width: 170px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	border: 1px solid #000;
	border-radius: 0;
	background-image: url(../images/icon_arrow_down.png);
	background-position: 140px center;
	background-repeat: no-repeat;
}
.subpage-header .navigation ul {
	position: absolute;
	z-index: 2;
	height: 0;
	overflow: hidden;
	transition: 0.5s ease;
}
.subpage-header .navigation:hover ul {
	height: 250px;
}
.subpage-header .navigation ul li a {
	font-size: 16px;
	text-align: center;
	width: 170px;
	display: block;
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #eee;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background-color: #fff;
}
.subpage-header .navigation ul li:last-child a {
	border-bottom: 1px solid #000;
}
.subpage-header .navigation ul li a:hover {
	background-color: #000;
	color: #fff;
}
.about-brand {
	padding-bottom: 70px;
}
.about-brand p {
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.7px;
	padding: 0px 0 60px;
}
.about-brand img {
	padding-bottom: 60px;
}
.product-list {
	margin-bottom: 150px;
}
.product-list a .image {
	border: 1px solid #e9e9e9;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	margin-top: 15px;
	margin-bottom: 15px;
	transition: transform 0.3s ease-out;
	padding-bottom: 100%;
	background-size: 100%;
	background-position: 50% 50%;
	transition: 0.5s ease;
}
.product-list a .image .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
	opacity: 0;
	transition: 0.5s ease;
	color: #fff;
	font-size: 28px;
	font-weight: 300;
}
.product-list a:hover .image .mask {
	opacity: 1;
}
.product-list a .name {
	font-size: 28px;
	padding-top: 10px;
	min-height: 130px;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: #f6f3e8;
	border-color: #f6f3e8;
}
.pagination > li > a, .pagination > li > span {
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	text-align: center;
	overflow: hidden;
	font-size:20px;
	font-weight: 400;
	border-color: #fff;
	color: #000!important;
	margin: 0 5px;
	background: none;
	border: none;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
	background: none;
}
.pagination  {
	margin-top: 0px;
}
.pagination > li a > span img {
	width: 8px;
}
.product-detail .hd {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.product-detail .hd .item {
	border: 1px solid #eee;
}

.product-detail .bd .title {
	border-bottom: 1px solid #000;
	padding-top: 85px;
	margin-bottom: 40px;
	text-align: center;
	font-size: 28px;
	line-height: 60px;
}
.product-detail .bd.closed {
    max-height: 1200px;
    overflow: hidden;
    position: relative;
}
.product-detail .bd.closed:after {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    bottom: 0px;
    height: 96px;
}
.product-detail .bd.closed:after {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0.9) 83%, rgba(255, 255, 255, 0.98) 98%, #fff);
}

.product-detail .ft {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.product-detail .ft .detail-button {
    display: block;
    font-size: 16px;
    width: 170px;
    height: 40px;
    border: 1px solid #000;
    color: #000;
    text-align: center;
    line-height: 40px;
    margin: 15px;
    cursor: pointer;
	margin-bottom: 150px;
	margin-top: 50px;
	transition: 0.5s ease;
}
.product-detail .ft .detail-button:hover {
    background-color: #000;
    color: #fff;
}
.loaction {
	position: relative;
}
.loaction .list {
	background-color: #f6f3e8;
	width: 370px;
	padding: 25px 20px;
	position: absolute;
	top: 40px;
	left: 55px;
}
.loaction .list .hd .search input {
	border: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
	background-color: #f6f3e8;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	width: 100%;
	position: relative;
	z-index: 1;
}
.loaction .list .hd .search button {
	background-image: url(../images/icon_arrow_search.png);
	width: 40px;
	height: 40px;
	margin-left: -40px;
	z-index: 2;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	background-color: unset;
	position: absolute;
}
.loaction .list .hd .filter {
	border-bottom: 1px solid #d6d3ca;
	padding-bottom: 24px;
}
.loaction .list .hd .filter .active {
	width: 160px;
	border: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
	background-color: #f6f3e8;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 24px 0 0 0;
	font-weight: 500;
	background-image: url(../images/icon_arrow_down.png);
	background-repeat: no-repeat;
	background-position: 135px 15px;
}
.loaction .list .hd .filter ul {
	border: 1px solid #000;
	border-top: none;
	width: 160px;
	margin-top: -1px;
	max-height: 0px;
	position: absolute;
	z-index: 2;
	overflow: hidden;
}
.loaction .list .hd .filter:hover ul {
	max-height: 90px;
}
.loaction .list .hd .filter ul li a {
	background-color: #fff;
	display: block;
	text-align: center;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
}
.loaction .list .hd .filter ul li a:hover {
	background-color: #000;
	color: #fff;
}
.loaction .list .bd .item {
	display: flex;
	flex-direction: row;
	margin: 12px 0;
	border-bottom: 1px solid #d6d3ca;
	padding-bottom: 12px;
	cursor: pointer;
}
.loaction .list .bd .item .thumnail img{
	width: 100px;
	height: 100px;
	background-color: #ccc;
}
.loaction .list .bd .item .description {
	padding-left: 10px;
}
.loaction .list .bd .item .description .name {
	font-size: 20px;
	font-weight: 700;
	padding-bottom: 10px;
}
.loaction .list .bd {
	height: 400px;
	overflow-y: auto;
}
#map {
	background-color: #ccc;
	height: 670px;
}
.loaction .info .name {
	padding: 45px 0 15px;
	font-size: 35px;
	font-weight: 700;
	flex: 1;
	font-family: "NanumMyeongjoBold", serif;
}
.loaction .info  {
	font-size: 20px;
}
.loaction {
	margin-bottom: 140px;
}


@media (max-width: 1200px) {
      body {
        /* 根据屏幕宽度动态计算缩放比例 */
        transform: scale(calc(100vw / 1200));
        transform-origin: top left; /* 设置缩放的原点为左上角 */
      }

      .container {
        width: 100%; /* 保证容器宽度为100% */
      }
    }