@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url("https://use.typekit.net/ivi1lhr.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://webfontworld.github.io/bccard/Paybooc.css');

/*skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:99; width:100%; height:1px; margin-top:-1px; display:block; font-size:0.7rem; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:0.5rem 0}
/*reset*/
body{overflow-x: hidden;}
body, h1, h2, h3, h4, h5, h6, p, ul, li,button,dl,dt,dd,form,fieldset,
legend,table,thead,tbody,tfoot,tr,td,th,span{font-family: 'Noto Sans KR', sans-serif;margin:0; padding:0; word-break:keep-all;}
em,address{font-style:normal;}
ul, li{list-style:none;}
button{border:0;background:none;cursor:pointer;}
button>span{-ms-transform: translate(0px, -0.5px);}
*{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-text-size-adjust:none;/*ios 확대방지*/}
a img{border:0;}
fieldset{border:0;}
legend{display:none;}
body,html,button,select,input{font-family: 'Noto Sans KR', sans-serif;font-size:15px;color:#000;line-height:1.3;letter-spacing: -0.05em;}
a{text-decoration:none;color:#333;}
fieldset{border:0;}
legend{display:none;}
table{width: 100%;table-layout:fixed; margin:0; padding:0; border:0; border-collapse: collapse; border-spacing: 0;}
table caption{display:none;}
a:active, a:focus, button:focus, button:active{outline-style: dotted !important; outline-color: #ccc !important;outline-width: 1px !important;}
.m {display: none}
.br768 {display:none;}
.br570 {display:none;}
.m570 {display:block;}
/*헤더*/
header{position: absolute;left: 0;top: 0;z-index:9999;width: 100%;height: 77px;z-index: 300;padding: 0 2%;}
.logo a{font-size: 0;line-height: 0;width: 100%;height: 28px;background:url(../img/logo_b.png)center no-repeat;display: block;}

.gold{background: linear-gradient(to bottom, #680082, #f872e9 50%, #680082);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .gold {
        color: #90c8da;
        background: transparent;
    }
}
.silver{color: #6d6d6d;}
.black{color: #333;}
#top { width:50px; height:50px;background:#000; opacity:0.8; border:1px solid #000;border-radius: 50px; position:fixed; color:#fff;z-index:99; right:3%; bottom:5%; text-align: center;
line-height:50px; font-size:16px; font-family:'Work Sans', sans-serif;transform:uppercase;}
/*
.titleM{font-size: 62px;text-align: center;font-weight: 600;letter-spacing: -4px;color: #212121;}
.titleMs{font-size:17px;color: #212121;text-align: center;margin-top: 20px;line-height: 1.5;font-weight: 600;}
.titleB{font-size: 44px;font-weight: 600;color: #212121;letter-spacing: -3px;}
.titleB .gold{display: block;font-size: 18px;font-weight: 600;letter-spacing: 0;}
*/
.more-link{font-size: 18px;font-weight:400;color: #fff;display: inline-block;padding: 15px 0;min-width: 200px;text-align: center;border-radius: 40px;margin-top:35px;width:auto;display: inline-block; transition: 1.3s;
background: linear-gradient(to right, #680082, #f872e9, #680082);
background-size: 400% 400%;}
.more-link:hover {text-shadow: 3px 3px 3px rgba(0, 0, 0, .6); animation: gradient 5s ease infinite;}
@keyframes gradient {
    0% {
    background-position: 0% 50%;
    }
    50% {
    background-position: 100% 50%;
    }
    100% {
    background-position: 0% 50%;
    }
}

/*메뉴*/
.sidenav {height: 100%;width: 350px;position: fixed;z-index: 99999;top: 0;right: -350px;background-color: #111;overflow-x: hidden;/* transition: 0.3s; */padding-top:5%;overflow:hidden;}
.sidenav .page_tit {padding:5% 0 5% 20%;text-decoration: none;font-size: 28px;font-weight:600;color: #fff;display: block;transition: 0.3s;font-family:'Work Sans', sans-serif;text-transform:uppercase; }
.sidenav a:hover {     background: linear-gradient(to bottom, #680082, #f872e9 50%, #680082);color: transparent;
    -webkit-background-clip: text;}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .sidenav a:hover {
        color: #d8bb99;
        background: transparent;
    }
}
.sidenav .closebtn {position: absolute;top: 3%;right: 10%;font-size: 36px;margin-left: 50px;color: #fff; }
.sidenav .prev {padding:5% 0 5% 19%;text-decoration: none;font-size: 18px;color: #fff;display: block;transition: 0.3s;}
.sidenav .prev i.xi-search {margin:0 10px 0 0}
.sidenav .lang {padding:5% 0 5% 25%;text-decoration: none;font-size: 20px; color: #fff;display: block;}
.sidenav .lang li {list-style-type:square; color:#fff; }
.sidenav .lang.ev li {list-style-type:disc ; color:#fff; }
.sidenav .lang li a {font-size:20px; color:#fff;font-family:'Work Sans', sans-serif;text-transform:uppercase;font-weight:300;}
.sidenav .lang li:hover {color:#d8bb99}
.sidenav .lang li:hover a {color:#d8bb99}

/*푸터*/
footer{background-color: #000;padding: 5% 0;text-align: center;}
footer .sns, footer .link, footer .copyright{display: flex;justify-content: center;align-items: center;}
footer .sns a{display: block; width: 40px; height: 40px; border-radius: 50%;background-color: #fff;margin-right: 30px;font-size: 0;line-height: 0;background-position: center;background-repeat: no-repeat;}
footer .sns a:last-child{margin-right: 0;}
footer .sns a.facebook{background-image:url(../img/facebook.png);}
footer .sns a.youtube{background-image:url(../img/youtube.png);}
footer .sns a.blog{background-image:url(../img/blog.png);}
footer .sns a.home{background-image:url(../img/home.png);}
footer .link{width:70%; margin:5px auto; display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .link a{display: block;font-size: 20px; font-weight:200; color: #fff; position: relative; opacity: .7; transition: opacity .4s; flex: 1 1 14%; text-align:center; line-height:180%;}
/* footer .link a:after{content: '';width: 6px;height: 6px;background-color: #fff;border-radius: 50%;position: absolute;right: -40px;top: 50%;margin-top: -3px;} */
footer .link a:hover{opacity: 1;}
footer .foot_boxbtn {margin:5% auto; width:50%; display: flex; justify-content: center;}
footer .foot_boxbtn a{display:block; padding:2% 4%; background-color:#c099b8; font-size:19px; font-weight:600; color:#000; border-radius:15px;}
footer .logo_f {margin:3% auto 0; font-size: 0; line-height: 0;width: 137px;height: 29px;background: url(../img/logo_f.png)center no-repeat;background-size: 100%;}
footer .logo_f a{ display:block; width: 137px;height: 29px;}
footer .copyright{margin-top: 1%;}
footer .copyright .copyright_p{font-size: 14px;color: #7c7c7c;line-height: 180%;}

@media screen and (max-width: 1450px) {
footer .link{width:80%;}
}

@media screen and (max-width: 1280px) {
.sidenav .page_tit {padding:3% 0 3% 20%;font-size: 28px;}
footer .link{width:90%;}
footer .link a{font-size: 18px; }
}

@media screen and (max-width: 900px) {
footer .link{width:90%;}
footer .link a{font-size: 16px; }
footer .foot_boxbtn {width:70%;}
}

@media screen and (max-width: 800px) {
	.br768 {display:block}
    footer{padding: 30px 0;}
    footer .sns a {width: 35px;margin-right: 15px;height: 35px;background-size: 100%;}
    footer .link a{font-size: 14px; flex: 1 1 50%;}
    footer .copyright .logo_f{width: 64px;height: 14px;background-size: 100%;}
    footer .copyright{margin-top: 30px;}
    footer .copyright .copyright_p {font-size: 13px;}
}
@media screen and (max-width: 600px) {
	.pc {display: none}
    .m, .br570 {display: block;}
    .more-link {min-width:150px;padding:10px 0; font-size:14px;margin-top:20px}
	footer {padding: 30px 15px;}
    footer .link a{width:50%; margin-bottom: 1%; font-size: 13px;}
    footer .link a:after{right:-17px;}
	footer .foot_boxbtn {width:80%;}
	footer .foot_boxbtn a{font-size:14px;}
    footer .copyright{flex-wrap: wrap;}
    footer .copyright .copyright_p {width: 100%;margin-top: 12px;}
	footer .logo_f {width: 120px;height: 25px;}
	.f_link_h {display:none !important;}
	.m570 {display:none;}
}
@media screen and (max-width: 500px) {
	.sidenav {padding-top:10%;}
	.sidenav .page_tit {font-size:24px;padding: 3% 0 3% 20%;}
	footer .foot_boxbtn {width:90%;}
	footer .link{flex-wrap: wrap;}
    footer .link a{/* width: calc(50% - 15px); */}

}
@media screen and (max-width: 410px) {
	footer .link a{font-size: 14px;}
	footer .logo_f {width: 80px;height: 22px;margin:7% auto 0;}
}