@charset "utf-8";

@import url('font.css');
@import url('swiper.css');
@import url('board.css');

/* Reset */
* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none}
html {height:100%; overflow-y:scroll; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; line-height:1.3; scroll-behavior: smooth;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,button,section,article,figure {margin:0; padding:0;}
body { font-family:'Noto Sans KR', "Malgun Gothic", Dotum, Arial, sans-serif; height:100%; font-weight: 300; min-width:280px; color:#666; font-size:16px; letter-spacing:-0.01rem;  -webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch; padding-top: constant(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-top:env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); word-break:keep-all;}
:lang(cn) body { font-family:'Noto Sans TC', "Malgun Gothic", Dotum, Arial, sans-serif; height:100%; font-weight: 400;  min-width:280px; color:#666; font-size:16px; letter-spacing:-0.01rem; -webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch; padding-top: constant(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-top:env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); word-break:keep-all;}

h1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%}
strong {font-weight:600;}
input, select, textarea, button, label {font-size:100%; vertical-align:middle}
input, select, textarea {width: 100%;}
select {height:42px; padding:0 25px 0 15px; font-size:16px; font-family:'Noto Sans KR', "Malgun Gothic", Dotum, Arial, sans-serif; color:#000; border:none; -webkit-appearance:none;  -moz-appearance:none; appearance:none; border:1px solid #b7b7b7; transition:border-color .3s ease;}
select::-ms-expand {display:none;}
input {border:1px solid #eaeaea; font-size:16px;}
input:disabled {opacity:1; -webkit-text-fill-color: inherit}
input[type="text"], input[type="search"], input[type="password"], input[type="tel"], input[type="email"], input[type="number"], input[type="button"] {height:36px; font-size:16px; padding:0 10px; outline:none; font-family:'Pretendard', "Malgun Gothic", Dotum, Arial, sans-serif; -webkit-appearance: none;  -moz-appearance: none; appearance:none; border:1px solid #d4d4d4; background:#fff; transition:border-color .3s ease; cursor:pointer}
input[type="text"]+input[type="text"] {margin-left:10px;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus {border-color:#000;}
fieldset, img, iframe {border:0 none}
img {max-width:100%; height:auto; vertical-align:middle; border-style:none;}
textarea {height: 100%; padding:15px; -webkit-box-sizing:border-box; box-sizing:border-box; resize:none; border:1px solid #ccc; font-family:'Noto Sans KR', "Malgun Gothic", Dotum, Arial, sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance:none;}
em, address {font-style:normal}
a {text-decoration:none; background-color:transparent; vertical-align:middle; -webkit-text-decoration-skip:objects; color:#000; word-break: break-word}
a:hover, a:active, a:focus {text-decoration:none}
menu,li {list-style:none}
button {padding:0; margin:0; border:0; cursor:pointer; vertical-align:middle; background:none; font-family:'Noto Sans KR', "Malgun Gothic", Dotum, Arial, sans-serif}
button, input {overflow:visible}
button, select {text-transform:none}
button, html [type="button"], [type="reset"],[type="submit"] {-webkit-appearance:button; cursor:pointer; font-family:'Noto Sans KR', "Malgun Gothic", Dotum, Arial, sans-serif;}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none; padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText}
caption {width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden}
hr {display:none}
i,em,address{font-style:normal}
label {cursor:pointer}
table {width:100%; border-spacing:0; border-collapse: collapse; table-layout:fixed;}
table td {word-wrap: break-word;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
::-webkit-input-placeholder {font-size:16px; color:#999; vertical-align:middle;}
input[type="radio"], input[type="checkbox"] { display: none;}
ul:after,
ol:after {display:block; content:''; clear:both;}

.tac {text-align:center !important;}
.tal {text-align:left !important;}
.tar {text-align:right !important;}
.vat {vertical-align:top; }

/* row */
.row { display: flex; flex-wrap: wrap; }
.row + .row {margin-top: 120px !important;}
.row > [class*='col_'] { width: 100%; box-sizing: border-box; }
.row > .col_1 { width: 8.333%; }
.row > .col_2 { width: 18.888%; }
.row > .col_3 { width: 25%; }
.row > .col_4 { width: 33.333%; }
.row > .col_5 { width: 41.666%; }
.row > .col_6 { width: 50%; }
.row > .col_7 { width: 58.333%; }
.row > .col_8 { width: 66.666%; }
.row > .col_9 { width: 75%; }
.row > .col_10 { width: 81.111%; }
.row > .col_11 { width: 91.666%; }
.row > .col_12 { width: 100%; }

/* margin */
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mt55 {margin-top:55px !important;}
.mt60 {margin-top:60px !important;}
.mt65 {margin-top:65px !important;}
.mt70 {margin-top:70px !important;}
.mt75 {margin-top:75px !important;}
.mt80 {margin-top:80px !important;}
.mt85 {margin-top:85px !important;}
.mt90 {margin-top:90px !important;}
.mt95 {margin-top:95px !important;}
.mt100 {margin-top:100px !important;}

.mb5 {margin-bottom:5px !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb35 {margin-bottom:35px !important;}
.mb40 {margin-bottom:40px !important;}
.mb45 {margin-bottom:45px !important;}
.mb50 {margin-bottom:50px !important;}
.mb55 {margin-bottom:55px !important;}
.mb60 {margin-bottom:60px !important;}
.mb65 {margin-bottom:65px !important;}
.mb70 {margin-bottom:70px !important;}
.mb75 {margin-bottom:75px !important;}
.mb80 {margin-bottom:80px !important;}
.mb85 {margin-bottom:85px !important;}
.mb90 {margin-bottom:90px !important;}
.mb95 {margin-bottom:95px !important;}
.mb100 {margin-bottom:100px !important;}

.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}
.ml15 {margin-left:15px !important;}
.ml20 {margin-left:20px !important;}
.ml25 {margin-left:25px !important;}
.ml30 {margin-left:30px !important;}
.ml35 {margin-left:35px !important;}
.ml40 {margin-left:40px !important;}
.ml45 {margin-left:45px !important;}
.ml50 {margin-left:50px !important;}
.ml55 {margin-left:55px !important;}
.ml60 {margin-left:60px !important;}
.ml65 {margin-left:65px !important;}
.ml70 {margin-left:70px !important;}
.ml75 {margin-left:75px !important;}
.ml80 {margin-left:80px !important;}
.ml85 {margin-left:85px !important;}
.ml90 {margin-left:90px !important;}
.ml95 {margin-left:95px !important;}
.ml100 {margin-left:100px !important;}

.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.mr20 {margin-right:20px !important;}
.mr25 {margin-right:25px !important;}
.mr30 {margin-right:30px !important;}
.mr35 {margin-right:35px !important;}
.mr40 {margin-right:40px !important;}
.mr45 {margin-right:45px !important;}
.mr50 {margin-right:50px !important;}
.mr55 {margin-right:55px !important;}
.mr60 {margin-right:60px !important;}
.mr65 {margin-right:65px !important;}
.mr70 {margin-right:70px !important;}
.mr75 {margin-right:75px !important;}
.mr80 {margin-right:80px !important;}
.mr85 {margin-right:85px !important;}
.mr90 {margin-right:90px !important;}
.mr95 {margin-right:95px !important;}
.mr100 {margin-right:100px !important;}

.w5p {width:5% !important;}
.w10p {width:10% !important;}
.w15p {width:15% !important;}
.w20p {width:20% !important;}
.w25p {width:25% !important;}
.w30p {width:30% !important;}
.w35p {width:35% !important;}
.w40p {width:40% !important;}
.w45p {width:45% !important;}
.w50p {width:50% !important;}
.w55p {width:55% !important;}
.w60p {width:60% !important;}
.w65p {width:65% !important;}
.w70p {width:70% !important;}
.w75p {width:75% !important;}
.w80p {width:80% !important;}
.w85p {width:85% !important;}
.w90p {width:90% !important;}
.w95p {width:95% !important;}
.w100p {width:100% !important;}

.hidden { position: absolute; width: 0; height: 0;font-size: 0; line-height: 0; overflow: hidden; visibility: hidden;}

/* 공통 변수 */
:root {
	--dark-color:#4b4b4b;
	--gray-color:#9a9a9a;
	--point-red:#cf2925;
	--point-blue:#052663;
	--point-darkblue:#21233e;

	--gray2-color:#f3f3f3;

	--header-size:100px;
	--submenu-size:400px;

	--wrap-para:24px;
}

.wrapper {width:1460px; margin:0 auto;}

header {position:fixed; z-index:9999; left:0; top:0; width:100%; height:var(--header-size); color: #333; background: rgba(0,0,0,0.3); }
header .inner {display:flex; align-items:flex-start; justify-content:space-between; padding:0 0 0 80px; height:var(--header-size); transition:all .3s ease;}
header h1 {/*flex-shrink:0;*/ }
header h1 a {display:block; width:252px; height:var(--header-size); text-indent:-9999px; background: url(../images/common/ico_logo.png) no-repeat left center / 100%;}
header nav {/*flex-grow:1;*/}
header nav > ul {display:flex;}
header nav > ul > li {transition:all .3s ease;}
header nav > ul > li > a {display:block; max-width:210px; padding-right:120px; white-space:nowrap; font-size:18px; font-weight:500; transition:all .3s ease;}
header a {display:block; color:#fff; transition:all .3s ease;}
header .depth02 {display:none; padding:30px 0; height:var(--submenu-size);}
header .depth02 > li > a {padding:10px 0; color:#464646; font-weight:400;}
header .depth02 > li:hover > a {color:var(--point-red);}
header .depth03 > li > a {padding:4px 0; color:#818181; font-size: 15px; font-weight: 200;}
header .depth03 > li > a:hover {color:var(--point-red); text-decoration:underline;}
header .depth03 > li > a:before {content:'-'; margin-right:4px;}
header nav > ul > li:hover > a {color:var(--point-red);}
header nav > ul > li > a span {display:inline-block; position:relative; line-height:var(--header-size);}
header nav > ul > li > a span:after {content:''; position:absolute; z-index:1; left:0; bottom:0; width:0; height:3px; background:var(--point-red); transition:all .3s ease;}
header nav > ul > li:hover > a span:after {width:100%;}
header .util {display:flex; align-items: center;}
header .util .lang {position:relative; font-family:'Play'; margin-right: 20px;}
header .util .lang button {position:relative; z-index:2; width:98px; height:40px; line-height:38px; padding:0 0 0 45px; text-align:left; font-family:'Play'; font-size:14px; font-weight:600; color:#fff; border-radius:20px; border:1px solid #c2c2c2; background:url(../images/common/ico_lang.png) no-repeat 19px center;}
header .util .lang.on button {color:var(--dark-color); background-image:url(../images/common/ico_lang_b.png) !important; border-color:#fff;}
header .util .lang div {display:none; position:absolute; z-index:1; left:0; top:0; width:100%;}
header .util .lang ul {padding:44px 0 10px; background:#fff; border-radius:20px;}
header .util .lang ul li a {display:block; padding:8px 10px; text-align:center; color:var(--gray-color); line-height:1; font-weight:600; transition:all .3s ease;}
header .util .lang ul li a:hover,
header .util .lang ul li.on a {color:var(--dark-color);}
header .util .menu_btn { width:100px; height:var(--header-size); text-indent:-9999px; background:#cf2925 url(../images/common/ico_menu.png) no-repeat center; }



header.open {height:calc(var(--header-size) + var(--submenu-size)); background:#fff !important;}
header.open .inner {border-color:#F4F4F4;}
header.open h1 a {background-image:url(../images/common/ico_logo_d.png);}
header.open .depth02 {display:block;}
header.open nav > ul > li > a {padding-right:150px; color:#272727; transition:all .3s ease;}
header.open nav > ul > li:hover > a {color:var(--point-red);}
header.open .util .lang button {color:var(--dark-color); background-image:url(../images/common/ico_lang_g.png);}


header.fixed {background:#fff !important; box-shadow:0 5px 8px 0 rgba(0,0,0,0.09);}
header.fixed a {color:#272727;}
header.fixed h1 a {background-image:url(../images/common/ico_logo_d.png);}
header.fixed .util .lang button {color:var(--dark-color); background-image:url(../images/common/ico_lang_g.png);}
header.fixed .util .menu_btn {background-image:url(../images/common/ico_menu.png);}

.allmenu {position:fixed; z-index:9999; right:0; top:0; width:0; height:100vh; background:#fff; overflow:hidden; transition:all 1s ease;}
.allmenu:before {content:''; position:absolute; z-index:10; top:0; right:0; width:100%; height:100vh; background:var(--point-red);}
.allmenu.open:before {animation:width 1.5s forwards; animation-delay:0.3s;}
.allmenu.open {width:100%;}
.allmenu .inner {display:flex; height:100vh;}
.allmenu .inner .img {flex-shrink:0; width:540px; background:url(../images/common/bg_allmenu.jpg) no-repeat center / cover;}
.allmenu .inner .menu {display:flex; flex-direction:column; justify-content:center;  width:calc(100% - 540px); padding:150px;}
.allmenu .inner .menu a {display:block;}
.allmenu .inner .menu > ul {display:flex; flex-wrap:wrap; align-items:flex-start;}
.allmenu .inner .menu > ul > li {width:30%; margin:50px 1%;}
.allmenu .inner .menu > ul > li > strong {display:block; margin-bottom:20px; font-size:26px; font-weight:500;}
.allmenu .inner .menu .depth02 > li > a {padding:10px 0; font-size:18px; font-weight: 400; transition:all .3s ease;}
.allmenu .inner .menu .depth02 > li:hover > a {color:var(--point-red);}
.allmenu .inner .menu .depth03 > li > a {padding:4px 0; color:#818181; font-size:16px; transition:all .3s ease;}
.allmenu .inner .menu .depth03 > li > a:before {content:'-'; margin-right:4px;}
.allmenu .inner .menu .depth03 > li > a:hover {color:var(--point-red); text-decoration:underline;}
.allmenu .close {position:absolute; z-index:1; right:24px; top:24px; width:60px; height:60px; text-indent:-9999px; background:url(../images/common/ico_allmenu_close.png) no-repeat center;}



@keyframes width {
  0% {width:100%}
  100% {width:0%}
}

footer {padding:30px 0; color:#e8eaf5; background:#1b1b1b;}
footer .top {display:flex; justify-content:space-between; align-items:center; padding-bottom:30px; border-bottom:1px solid rgba(232,234,245,0.15);}
footer .top .util {display:flex; align-items:center;}
footer .top .util .link a {position:relative; padding:0 16px; color: rgba(252, 255, 255, 0.3); font-weight: 300; }
footer .top .util .link a + a:before {content:''; position:absolute; z-index:1; left:-1.5px; top:50%; margin-top:-1.5px; width:3px; height:3px; border-radius:50%; background:rgba(252, 255, 255, 0.3)} 
footer .top .util .link a:first-of-type {color: #fff;}
footer .top .util .link a:hover {color: #fff;}
footer .top .foot_btn {display: flex; }
footer .top .foot_btn li {width: 120px; }
footer .top .foot_btn li a {display: block; padding: 10px 0;  border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 16px; text-align: center; transition:all .3s;}
footer .top .foot_btn li + li {margin-left: -1px;}
footer .top .foot_btn li a:hover {border: 1px solid #fff;}
footer .btm {display:flex; justify-content:space-between; align-items:flex-end; padding-top:30px;}
footer .btm address .logo {margin-bottom: 20px;}
footer .btm address > div {display:flex; color:#9c9fae; }
footer .btm address > div + div {margin-top:8px;}
footer .btm address > div em {color: rgba(252, 255, 255, 0.6); margin-right: 10px; }
footer .btm address > div em:first-child {width: 230px;}
footer .btm address > div span {color: #666; margin-right: 20px; }
footer .btm address .copy {margin-top:44px; color:#9c9fae; font-size: 14px; font-weight: 200; letter-spacing:-0.2px;}
footer .family {position:relative; width:180px; }
footer .family button {width:100%; height:46px; font-size:14px; padding:0 16px; text-align:left; color:#f2f4f8; border:1px solid #616369; background:url(../images/common/ico_family_arr_down.png) no-repeat right 16px center;}
footer .family button.on {background-image:url(../images/common/ico_family_arr_up.png);}
footer .family ul {display:none; position:absolute; z-index:1; left:0; bottom:46px; width:100%; padding:12px 0; border:1px solid #616369; background:#1c2028;}
footer .family ul li a {display:block; padding:8px 16px; font-size:14px; color:#f2f4f8;}

:lang(en) footer .top .foot_btn li {width: 230px;}
:lang(en) footer .btm address > div em:first-child {width: 350px;}



 
.top_btn {position:fixed; z-index:9999; right:30px; bottom:-30px; width:56px; height:56px; text-indent:-9999px; border-radius:50%; box-shadow:0 0 27px 0 rgba(0,0,0,0.1); background:#fff url(../images/common/ico_top.jpg) no-repeat center; opacity:0; transition:all .3s ease;}
.top_btn.show {opacity:1; bottom:30px;}

/********************************************************************************************************************************************************************************************************************************************************/

@media all and (max-width:1920px){

}

@media all and (max-width:1620px){
	header .inner {padding: 0 0 0 30px;}
	header nav > ul > li > a {max-width:initial; padding-right:80px;}
	header .depth02 > li > a {font-size:15px;}
	header .depth03 > li > a {font-size:15px;}

	header.open nav > ul > li > a {padding-right:80px;}
}

@media all and (max-width:1459px){
	.wrapper {width:100%; padding-left:30px; padding-right:30px;}

	footer.section {padding:30px 0;}
	footer .btm address .logo {width:220px;}
	
}


@media all and (max-width:1280px){
	:root {
		--header-size:86px;
		--submenu-size:300px;
	}

	header h1 {margin-right:50px;}
	header h1 a {width:180px;}
	header nav > ul > li > a {padding-right:60px;}
	header nav > ul > li > a span {font-size:16px;}
	header .depth02 {padding:15px 0;}
	header .depth02 > li > a {padding-right:20px; font-size:14px;}
	header .depth03 > li > a {padding-right:20px; font-size:14px;}
	header .util .menu_btn {width: 86px;}

	header.open nav > ul > li > a {padding-right:70px;}

	.allmenu .inner .img {width:300px;}
	.allmenu .inner .menu {width:calc(100% - 300px); padding:100px;}
}

@media all and (max-width:1024px){
	.row + .row {margin-top: 100px !important;}

	header nav {display:none;}
	header .util {}
	header .util .lang button {width:88px; height:34px; line-height:32px; padding-left:40px; background-position:14px center;}
	header .util .lang ul {padding:40px 0 15px}
	header .util .lang ul li a {padding:5px 10px; font-size:14px;}

	.allmenu.open {width:70%;}
	.allmenu {padding-top:var(--header-size);}
	.allmenu:after {content:''; position:absolute; z-index:1; left:28px; top:0; width:180px; height:var(--header-size); background:url(../images/common/ico_logo_d.png) no-repeat left center / 100%;}
	.allmenu .inner {height:100%;}
	.allmenu .inner .img {display:none;}
	.allmenu .inner .menu {display:block; width:100%; padding:0; overflow-y:auto; border-top:1px solid #c4c4c4;}
	.allmenu .inner .menu > ul > li {width:100%; margin:0;}
	.allmenu .inner .menu > ul > li > strong {font-size:20px; padding:0 28px; line-height:60px; margin-bottom:0; border-bottom:1px solid #dedede; background:url(../images/common/ico_menu_arr_down.png) no-repeat right 30px center;}
	.allmenu .inner .menu > ul > li.on > strong {color:#fff; background-color:var(--point-red); background-image:url(../images/common/ico_menu_arr_up.png); transition:all .3s ease;}
	.allmenu .inner .menu .depth02 {display:none; padding:16px 0; font-size:18px; background:#f6f6f6;}
	.allmenu .inner .menu .depth02 > li > a {padding:8px 28px;}
	.allmenu .inner .menu .depth03 > li > a {padding:8px 28px; font-size:16px;}
	.allmenu .close {right:0; top:0; width:var(--header-size); height:var(--header-size);}

	.top_btn {right:20px; width: 42px; height: 42px; background-size: 10px;}
	.top_btn.show {bottom: 20px;}

	footer .top .util .link a {font-size: 14px;}
	footer .top .foot_btn li a {padding: 6px 0; font-size: 14px;}
	footer .btm {display:block; padding-top:30px;}
	footer .btm address .logo {width:200px;}
	footer .btm address > div {display:block; font-size:14px;}
	footer .btm address > div em:first-child {display: block; flex: 0;}
	footer .btm address .copy {font-size:14px; margin-top:20px;}
	footer .family {margin-top:30px;}
	footer .family button {height: 36px;}
}

@media all and (max-width:768px){
	.row { flex-direction: column;}
    .row > [class*='col_'] { width: 100%; }
	.row + .row {margin-top: 70px !important;}

	:root {
		--header-size:68px;
	}
	.wrapper {padding-left:20px; padding-right:20px;}

	header .inner {padding: 0 0 0 20px;}
	header h1 {margin-right:0;}
	header h1 a {width:180px;}
	header .util {}
	header .util .lang {margin-right:14px;}
	header .util .lang button {width:80px; height:30px; line-height:26px;}
	header .util .lang ul {border-radius:15px;}
	header .util .menu_btn {width: 68px; background-size: 30px;}

	.allmenu.open {width:100%;}
	.allmenu:after {left:20px; width:140px}
	.allmenu .inner .menu > ul > li > strong {padding:0 20px; font-size:16px; line-height:50px; font-weight: 400;}
	.allmenu .inner .menu .depth02 > li > a {font-size:15px; padding:8px 20px;}
	.allmenu .inner .menu .depth03 > li > a {padding:6px 20px; font-size:14px;}
	.allmenu .close {background-size:20px;}
	
	footer.section {padding:34px 0;}
	footer .top {display:block; padding-bottom:24px;}
	footer .top .util {display: block; margin-top:10px; font-size:14px;}
	footer .top .util .link a {padding:0 8px;}
	footer .top .util .link a + a:before {left:-3px;}
	footer .top .util .link a:first-of-type {padding-left:0;}
	footer .top .foot_btn {margin-top: 20px;}
	footer .top .foot_btn li a {padding: 6px 0; font-size: 15px;}
	
	footer .family {width:100%;}

	
}

@media all and (max-width:640px){
	
}

@media all and (max-width:480px){
	body {font-size: 14px;}
	
	footer .top .foot_btn li { width: calc(100% / 2);}
}

@media all and (max-width:360px){
	:root {
		--header-size:60px;
	}
	header h1 a {width:150px;}
	header .util .menu_btn {width: 60px; background-size: 24px;}
	

}