@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap');
@font-face {
    font-family: 'SUITE-Regular';
    src: url('/common/font/SUITE-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

*/
/*
@font-face {
    font-family: 'scotch-display';
    src: url('/common/font/Scotch Display Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
*/

*{ margin: 0; padding: 0; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a{;margin:0;  padding:0;  border:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-text-size-adjust:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'SUITE-Regular';font-style: normal; }
html{ -ms-touch-action:auto;}
html,body, section{width:100%;}

img{}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav, section{}
legend, caption{width:0;height:0;visibility:hidden;font-size:0;line-height:0;}
button{cursor:pointer; border:none; padding:0; }
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
li,dd{list-style:none;}
blockquote, q {quotes:none;}
address, caption, em, cite, i, a {font-weight:normal; font-style:normal; text-decoration: none;color: #333}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed;}
iframe{width:100%;vertical-align:middle;}
caption{display:none;}
figcaption{display:block;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance:none;  margin:0; }

strong {font-weight: bold }

input[type="text"], input[type="number"],input[type="email"], input[type="search"],
input[type="password"], input[type="date"], input[type="tel"], select{display:table-cell; vertical-align:middle; padding:  0 0 0 7px; height: 40px; line-height: 1; box-sizing: border-box; background:#fff; border:1px solid #cccccc; border-radius:0; color:#999; font-size:12px;font-family: inherit}

input[type="search"] {border-radius:0; -webkit-border-radius:0; -webkit-appearance:textfield;}
input[type="search"]::-webkit-search-results-decoration {-webkit-appearance:none;}

input[type='checkbox'],input[type='radio'] {vertical-align:middle; margin-top:0;  cursor : pointer;}

input.disabled {background:#fff;}

input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}

select::-ms-expand{display:none; }
select{ cursor: pointer; outline :none; overflow :hidden; color:#999; width:100%;;  }
textarea{width:100%;height:100px; resize:none; border:1px solid #cccccc;   padding:10px; color:#999;}



.blind{position:absolute; top:-999999px; width:0; height:0; font-size:0; overflow:hidden;}
.clear{clear:both;}
.clearfix{overflow:hidden;}
.clearfix:after{clear:both; display:table; content:'';}
.center{text-align:center; display:block; float:none !important;}
.accessibility{display: none}
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    clip: rect(0,0,0,0);
    overflow: hidden;

}

#cursor2{    z-index: 99999;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(236,102,0,1) 0%, rgba(231,34,14,1) 100%);
    transition: background 0.4s, width 0.4s, height 0.4s, transform .1s;
    mix-blend-mode: difference;
    transform: translate(-50%,-50%);}

#cursor2.on{background: #fff}
#cursor2.on{width: 40px;height: 40px}
#cursor2.on2{width: 40px;height: 40px}


#cursor3{    z-index: 99999;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%,-50%);}
#cursor3 div{position: relative;width: 130px;position: relative;transform: translate(-25%,-108%);perspective: 500px}
#cursor3 div strong{display: block;color: #FF5700;font-size: 14px;font-weight: 600;font-family: "scotch-display", sans-serif;line-height: 17px;width: 66px;height: 66px;background: rgba(255,237,227,0.7);text-align: center;border-radius: 50%;padding-top: 18px;backdrop-filter: saturate(180%) blur(80px);}
@keyframes scrolldown{
    0%{transform: scale(1)}
    50%{transform: scale(1.1)}
    100%{transform: scale(1)}
}
.cur_wrap{transition: 0.6s}
.cur_wrap.on{opacity: 0}
.cursor_cir{position: fixed;border-radius: 50%}
.cursor_cir i{display: block;transform: translate(-50%,0);transition: 0.3s}
#cursor_t2.cursor_cir i{transform: translate(-50%,200%);}
#cursor_t3.cursor_cir i{transform: translate(-50%,400%);}
.dark #LOGO path{fill: #fff}
 #cursor_t1 {z-index: 1;transition-delay: 0.015s}
 #cursor_t2 {transition: 0.1s}
 #cursor_t3 {transition: 0.1s;transition-delay: 0.005s}
 #cursor_t1 i{border: 1px solid #FFAA7F;  display: block;width: 10px;height: 10px;border-radius: 50%}
 #cursor_t2 i{border: 1px solid #FFAA7F;width: 6px;height: 6px; display: block;;border-radius: 50%;box-sizing: border-box}
 #cursor_t3 i{border: 1px solid #FFD5BF;width: 6px;height: 6px; display: block;border-radius: 50%}
#cursor2.hid{width: 0;height: 0}
#header .hd_wrap{position: fixed;width: 100%;top: 0;left: 0;z-index: 9999999;padding-left: 50px;padding-right: 50px;padding-top: 50px;}
#header .hd{padding: 0 60px;padding-top: 50px;}
#header .hd:after{content: '';display: block;clear: both}
#header .hd #logo{float: left}
#header .hd .hd_wr{float: right}
#header .hd .hd_wr > *{float: left}
#header .hd .hd_wr ul li{float: left}
#header .hd .hd_wr .contact ul li{margin-right: 40px;}
#header .hd .hd_wr .contact ul li a{display: block;line-height: 26px;font-size: 16px;color: #6a534d;display: block}
#header .hd .hd_wr .sns ul li a{display: block;width: 27px;height: 26px;text-indent: -9999px;}
#header .hd .hd_wr .sns ul li:nth-child(1){margin-right: 20px;}
#header .hd .hd_wr .sns ul li:nth-child(1) a{background: url(/img/common/sns01.png) no-repeat}
#header .hd .hd_wr .sns ul li:nth-child(2) a{background: url(/img/common/sns02.png) no-repeat}
/* #header .sns ul{float: left} */
#header .menu_btn{float: right;padding-left: 40px;padding-top: 5px;}
#header .menu_btn button{display: block;width: 15px;height: 15px;;position: relative;background: none;}
#header .menu_btn button i{display: block;width: 4px;height: 4px;border-radius: 50%;background: #6a534d;position: absolute;}
#header .menu_btn button i.btn01{left: 0;top: 0}
#header .menu_btn button i.btn02{top: 0;right: 0}
#header .menu_btn button i.btn03{bottom: 0;right: 0}
#header .menu_btn button i.btn04{bottom: 0;left: 0}
.left_t{position: fixed;z-index: 999;left: -100px;;bottom: 200px;transform: rotate(-90deg);}
.left_t ul li{display: block;float: left;margin-right: 50px;}
.left_t ul li:last-child{margin-right: 0}
.left_t ul li strong{display: block;color: #b7aeac;font-size: 14px;font-weight: 400}
#header .mode{display: none !impoarta}
/*.mode{display: none !important}*/
#header.main_header .mode{display: block}
#header .hd_wrap:after{content: '';display: block;clear: both;}
/*#header #logo img{height: 28px}*/
#header #logo{float: left}
#header #logo a{display: block;position: relative}
#header #logo a img{display: block;transition: 0.6s;opacity: 1}
#header.dark #logo a img{opacity: 0}
/*#header #logo a:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top:0;left: 0;background: url(/img/common/logo_light.png) ;opacity: 0;transition: 0.6s}*/
/*#header.dark #logo a:after{opacity: 1}*/
#header .m_wrap{float: right}
#header .m_wrap #gnb{padding-right: 32.5px;}
#header .m_wrap #gnb ul:after{content: '';display: block;clear: both;}
#header .m_wrap #gnb > ul > li{float: left;position: relative}
#header .m_wrap #gnb > ul > li > a{display: block;line-height: 28px;font-size: 20px;color: #57413B;font-weight: 40;padding: 0 32.5px;font-family: 'Lora', serif;font-weight: 500;}
.dark #header .m_wrap #gnb > ul > li > a{color: #fff}
#header .m_wrap #gnb > ul > li:hover > a{color: #e94606}
#header .m_wrap #gnb > ul > li div{position: absolute;left: 50%;transform: translateX(-50%);padding-top: 20px;border-radius: 50%;left: 50%;display: none}
#header .m_wrap #gnb > ul > li:hover div{display: block}
#header .m_wrap #gnb > ul > li div:before{content: '';display: block;width: 20px;height: 20px;top: 10px;left: 50%;margin-left: -10px;background: #FF5700;position: absolute;border-radius: 50%;opacity: 0.3;animation: 2s sca infinite linear}
@keyframes sca{
    0%{transform: scale(0);opacity: 1}
    100%{transform: scale(1);opacity: 0}
}
#header .m_wrap #gnb > ul > li div:after{content: '';display: block;width: 20px;height: 20px;top: 10px;left: 50%;margin-left: -10px;background: #FF5700;position: absolute;border-radius: 50%;opacity: 0.3;animation: 2s sca infinite linear;animation-delay: 1s}
#header .m_wrap #gnb > ul > li div ul{padding: 30px 0;width: 185px;background: #fff;border-radius: 20px;box-shadow: 0 0 30px rgba(180,160,0,0.3);position: relative;z-index: 2}
#header .m_wrap #gnb > ul > li div ul li{margin-bottom: 20px}
#header .m_wrap #gnb > ul > li div ul li:last-child{margin-bottom: 0}
#header .m_wrap #gnb > ul > li div ul li a{display: block;text-align: center;font-size: 18px;color: #948682 !important;font-size: 18px;font-weight: 500;transition: 0.7s}
#header .m_wrap #gnb > ul > li div ul li:hover a{color: #57413B !Important;}
#header .m_wrap #gnb > ul > li div ul li a span{color: inherit}
#header .m_wrap > *{display: inline-block;vertical-align: middle;}
#header .number{position: fixed;bottom: 50px;right: 50px; z-index: 10; z-index: 999999}
#header .number > div{position: relative;transition: 0.6s}
#header .number ul{position: absolute;padding-left: 35px;opacity: 0;transition: 1s;transition-delay: 0.4s}
#header .number.on ul{opacity: 1;transition-delay: 0s}
#header .number ul:after{content: '';display: block;clear: both;}
#header .number ul li{float: left;}
#header .number ul li a:after{content: '';display: inline-block;;width: 1px;height: 12px;background: #ffff;opacity: 0.1;margin: 0 15px}

#header .number ul li:last-child a:after{display: none}
#header .number ul li a{line-height: 64px;display: block;font-weight: 400;color: #FFFFFF;font-size: 17.5px;font-weight: 500}
#header .number > div{height: 64px;width: 64px;border-radius: 32px;background: transparent linear-gradient(135deg, #E7420E 0%, #FFB300 100%) 0% 0% no-repeat padding-box;overflow: hidden;}
/*#header.dark .number > div{background: #201a1a}*/
#header.dark .m_wrap #gnb ul li a{color: #fff}

#header .number.on > div{width: 398px;overflow: hidden;}
#header .number > div i{display: block;padding-right: 19px;padding-top: 24px;position: absolute;right: 0;top: 0}
#header .scroll{left: 85px;position: fixed;bottom: 105px;}
#header .scroll img{display: block;animation: contact01 20s linear infinite ;width: 70px;}
#header .scroll div{transform: scale(0);transition: 0.5s}
#header .scroll.on div{transform: scale(1)}
#header .contact{right: 50px;position: fixed;bottom: 140px; z-index: 10; }
#header .contact img{display: block;border-radius: 50%;;position: relative;animation: contact01 10s infinite linear}

#smoother-wrapper{position: relative;z-index: 2}
@keyframes contact01 {
  0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
}
@keyframes contact02 {
  0%{transform: scale(1);}
  50%{transform: scale(1.1);}
  100%{transform: scale(1);}
}
#header .contact a{display: block;position: relative;}
#header .contact a:before{content: '';display: block;width: 100%;height: 100%;background: #fff;border-radius: 50;box-shadow: 0 0 40px rgba(0,0,0,0.1);position: absolute;top: 0;left: 0;border-radius: 50%;}
#header .contact a:hover:before{animation: contact02 1.5s infinite linear}
#header .contact a:after{content: '';;width: 100%;height: 100%;background: url(/img/common/contact_logo.png) center center no-repeat;position: absolute;top: 0;left: 0;border-radius: 50%}
#header .m_wrap .mo_btn button{position: relative;width: 39px;height: 16px;display: block;background: none}
#header .m_wrap .mo_btn button svg{position: relative;z-index: 1;top: -1px;}
#tocplusWindow{position: fixed !Important;top: 50% !important;left: 10% !Important;cursor: pointer !important}

#header .m_wrap .mo_btn button svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
    transition: 1s;

    fill:#e7420e
  animation: dash 5s linear alternate infinite;
}
#header .m_wrap .mo_btn button:hover svg {
    stroke-dasharray: 100;
  stroke-dashoffset: 0;
    fill:#e7420e;
    transition-delay: 0.3s;
}

/*


#header .m_wrap .mo_btn button svg .st{transition: 1s;transition-delay: 1s;display: block}
#header .m_wrap .mo_btn button:hover svg .st{
    fill:#e7420e;
}

*/


#header .m_wrap .mo_btn button i{display: block;position: absolute;border-radius: 50%;opacity: 0.7;transform: scale(0);}
#header .m_wrap .mo_btn button i em{width: 4px;height: 4px;background: #CECECE;display: block;border-radius: 50%}
#header .m_wrap .mo_btn button i.dot01 em {background: #E7420E}
#header .m_wrap .mo_btn button i.dot02 em {background: #E7420E}
#header.dark .m_wrap .mo_btn button i.dot01 em {background: #fff}
#header.dark .m_wrap .mo_btn button i.dot02 em {background: #fff}

.dark #header .m_wrap .mo_btn button i.dot01 em,
.dark #header .m_wrap .mo_btn button i.dot02 em{background: #fff}
#header .m_wrap .mo_btn button i.dot01{left: 0;top: 50%;margin-top: -2px;}
#header .m_wrap .mo_btn button i.dot02{right: 0;top: 50%;margin-top: -2px;}
#header .m_wrap .mo_btn button i em{transform: scale(1);transition: 0.3s;transition-delay: 0.3s}
#header .m_wrap .mo_btn button i.dot03 em{transition-delay: 0.4s}
#header .m_wrap .mo_btn button i.dot04 em{transition-delay: 0.5s}
#header .m_wrap .mo_btn button i.dot05 em{transition-delay: 0.6s}
#header .m_wrap .mo_btn button i.dot11 em{transition-delay: 0.7s}
#header .m_wrap .mo_btn button i.dot10 em{transition-delay: 0.8s}
#header .m_wrap .mo_btn button i.dot02 em{transition-delay: 0.9s}
#header .m_wrap .mo_btn button i.dot06 em{transition-delay: 1s}
#header .m_wrap .mo_btn button i.dot07 em{transition-delay: 1.1s}
#header .m_wrap .mo_btn button i.dot09 em{transition-delay: 1.2s}
#header .m_wrap .mo_btn button i.dot08 em{transition-delay: 1.3s}
#header .m_wrap .mo_btn button:hover i em{transform: scale(0);}

.dark #header .m_wrap .mo_btn button i.dot01, .dark #header .m_wrap .mo_btn button i.dot02{background: #fff}
#header .m_wrap .mo_btn button i.dot03{left: 5px;top: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot04{left: 12px;top: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot05{left: 17px;top: 50%;margin-top: -2px;;}
#header .m_wrap .mo_btn button i.dot06{right: 5px;top: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot07{right: 12px;top: 0%;margin-top: 0;}


#header .m_wrap .mo_btn button i.dot08{left: 5px;bottom: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot09{left: 12px;bottom: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot10{right: 5px;bottom: 0%;margin-top: 0;}
#header .m_wrap .mo_btn button i.dot11{right: 12px;bottom: 0%;margin-top: 0;}

#header .m_wrap .mo_btn button i.dot01{transform: scale(1.5) translateX(6px);;}
#header .m_wrap .mo_btn button i.dot02{transform: scale(1.5) translateX(-6px);;}
#header .m_wrap .mo_btn button i{transition: 0.3s}
#header .m_wrap .mo_btn button:hover i{transform: scale(1) translateX(0) !important}
#header .m_wrap .mo_btn img{display: block;}
#header .mode {position: fixed;left: 60px;bottom: 60px;}
#header .mode button{background:none}
#header .mode button.dark{display: block}
#header .mode button > *{display: inline-block;vertical-align: middle}
#header .mode button span{position: relative}
#header .mode button span i.d_icon01{position: relative}
#header .mode button span i{position: absolute;left: 0;top: 0}
#header .mode button p{font-size: 14px;color: #6A534D;font-family: 'Ubuntu', sans-serif;font-weight: 800;margin-left: 8px;}
.dark #header .mode button p{color: #fff}
#header .mode button:hover span i{animation: mode 0.6s }
#header .mode button:hover span i.d_icon02{animation-delay: 0.1s}
#header .mode button:hover span i.d_icon03{animation-delay: 0.2s}
#header .mode button:hover span i.d_icon04{animation-delay: 0.3s}
#header .mode button:hover span i.d_icon05{animation-delay: 0.4s}
#header .mode button:hover span i.d_icon06{animation-delay: 0.5s}
#header .mode button:hover span i.d_icon07{animation-delay: 0.6s}
#header .mode button:hover span i.d_icon08{animation-delay: 0.7s}
#header .mode button:hover span i.d_icon09{animation-delay: 0.8s}

#header.main_header .mode.dark{display: block}
#header.main_header .mode.light{display: none}
#header.main_header .mode.light p{color: #fff}


.pop_wrap{padding: 10px !important}
.layer_popup{display: none; max-width: 541px}
.layer_popup .img img{max-width: 100%; }
.layer_popup .wrap_table{padding: 10px; background: #6e4d3f; width: 100%; margin: 0 auto; border-radius: 8px;margin-top: 10px; }
.layer_popup{ position: fixed; top: 100px; left: 100px; z-index: 999;width: 420px;}
.layer_popup table{display: table;width: 100%; max-width: 736px; }
.layer_popup table td{color: #fff; }
.layer_popup table td, .layer_popup table td a{font-size: 13px; font-weight: 300}
.layer_popup table td a{color: #fff;font-size: 12px;border: 1px solid #fff; line-height: 20px;padding: 0 7px;border-radius: 3px;display: block;text-align: center;width: 40px;}
/*.layer_popup table td a{color: #fff; position: absolute; top: 20px; display: block; text-indent: -9999px; right: 50px;font-size: 0}*/
.layer_popup table td input{display: inline-block; margin-right: 10px;  position: relative;top: -2px; }
.layer_popup#layer_pop2{left: 800px}
.layer_popup#layer_pop .wrap_table{margin-left: 0}

@media (max-width: 1460px){
    .layer_popup#layer_pop2{left: 220px}
}
@media (max-width: 760px){
	.layer_popup, .layer_popup#layer_pop2{padding: 0; padding-top: 0; width: 300px; left: 0%;  max-width: 100%;left: 50%;transform: translateX(-50%)}
	.layer_popup .img img{max-width: 100%}
	.layer_popup table td, .layer_popup table a{font-size: 12px; }
	.layer_popup table td a{ }
    .layer_popup table td a{right: 30px;}
    .layer_popup#layer_pop2{left: 52%;top: 70px;}
}


/*
#header .mode.dark{display: none}
#header .mode.light{display: none}
#header .mode.light{display: none}

#header.dark  .mode.dark{display:none}
#header.dark  .mode.light{display:  block}
*/
/*background: rgba(252,242,235,0.95);*/
/*background: rgba(28,19,17,0.5); */
#header .mo_menu{position: fixed;z-index: 9999999;height: 100%;right: 0;top: 0;;display: none; backdrop-filter: saturate(180%) blur(80px);-webkit-backdrop-filter: saturate(180%) blur(80px);width: 620px;border-radius: 100px 0 0 100px;background: rgba(28,19,17,0.7)}
/*#header .mo_menu{position: fixed;z-index: 99999;height: 100%;right: 0;top: 0;;display: none;background: rgba(252,242,235,0.9); backdrop-filter: saturate(180%) blur(90px);width: 620px;border-radius: 100px 0 0 100px;}*/
#header .mo_menu.on{display: block;}
#header .mo_menu .wrap button{position: absolute;background: none;top: 40px;right: 50px;}
#header .mo_menu .wrap ul.menu > li{margin-bottom: 32px;overflow: hidden;text-align: right}
#header .mo_menu .wrap ul.menu > li > a{display: inline-block;font-family: "scotch-display", sans-serif;;}
#header .mo_menu .wrap ul.menu > li div{display: block;padding-right: 90px;display: block;margin-top: 20px;}
#header .mo_menu .wrap ul.menu > li div ul li{margin-bottom: 20px;}
#header .mo_menu .wrap ul.menu > li div ul li a{display: block;font-size: 20px;color: #D6B19D;font-family: "scotch-display", sans-serif;transition: 0.7s}
#header .mo_menu .wrap ul.menu > li div ul li a span{display: inline-block;position: relative;color: inherit}
#header .mo_menu .wrap ul.menu > li div ul li a span:after{content: '';display: block;width: 4px;height: 4px;background: #F1E0D8;border-radius: 50%;position: absolute;left: -12px;top: 10px;animation: 2s sca2 infinite linear;transform: scale(0.8);opacity: 0;transition: 1.2s}
#header .mo_menu .wrap ul.menu > li div ul li:hover a span:after{opacity: 1}
@keyframes sca2{
    0%{transform: scale(0.8)}
    50%{transform: scale(1.2)}
    100%{transform: scale(0.8)}
}
#header .mo_menu .wrap ul.menu > li div ul li:hover a{color: #F1E0D8}
#header .mo_menu .wrap ul.menu > li div ul li:last-child{margin-bottom: 0}
#header .mo_menu .wrap ul.menu > li > a{transform: translateY(-100%);position: relative;}
#header .mo_menu .wrap ul.menu > li > a:before{content: '';display: block;width: 7px;height: 7px;background: #C48564;border-radius: 50%;position: absolute;left: -43px;top: 50%;margin-top: -3px;animation: menu02 2s infinite }
#header .mo_menu .wrap ul.menu > li > a:after{content: '';display: block;width: 7px;height: 7px;background: #C48564;border-radius: 50%;position: absolute;left: -31px;top: 50%;margin-top: -3px;animation: menu01 2s infinite }
#header .mo_menu .wrap ul.menu>  li > a:before, #header .mo_menu .wrap ul.menu > li > a:after{opacity: 0;transition: 1s}
#header .mo_menu .wrap ul.menu > li:hover a:before, #header .mo_menu .wrap ul.menu > li:hover > a:after{opacity: 1}
@keyframes menu01 {
  0%{transform: translateX(0);}
  50%{transform: translateX(-12px);}
  100%{transform: translateX(0);}
}
@keyframes menu02 {
  0%{transform: translateX(0);}
  50%{transform: translateX(12px);}
  100%{transform: translateX(0);}
}
#header .mo_menu .menu{position: absolute;width: 100%;bottom: 180px;}


#header .mo_menu.act .wrap ul.menu > li a{transform: translateY(0);transition: 1.2s}
#header .mo_menu.act .wrap ul.menu > li:nth-child(1) > a{transition-delay: 0.9s}
#header .mo_menu.act .wrap ul.menu > li:nth-child(2) > a{transition-delay: 0.6s}
#header .mo_menu.act .wrap ul.menu > li:nth-child(3) > a{transition-delay: 0.3s}
#header .mo_menu.act .wrap ul.menu > li:nth-child(4) > a{transition-delay: 0s}
#header .mo_menu .wrap ul.menu > li > a span{display: block;text-align: right;font-size: 48px;font-family: "scotch-display", sans-serif;font-weight: 500;padding-right: 90px;color: #C48564 ;transition: 0.8s;font-weight: 700}
#header .mo_menu .wrap ul.menu > li{transition: 0.6s}
#header .mo_menu .wrap ul.menu:hover > li{opacity: 0.6}
#header .mo_menu .wrap ul.menu:hover > li:hover{opacity: 1}
#header .mo_menu .wrap ul.menu > li > a span{transition: 0.6s}
#header .mo_menu .wrap ul.menu > li:hover > a span{transform: scale(1.1)}
#header .mo_menu .wrap ul.menu > li:hover > a span{opacity: 1}
#header .mo_menu .wrap ul.menu > li:last-child{margin-bottom: 0}
#header .mo_menu .sns{text-align: right;padding-right: 90px;position: absolute;bottom: 50px;right: 0}
#header .mo_menu .sns ul li{display: inline-block;margin-left: 20px;}
#header .mo_menu .sns ul li a{display: block;width: 64px;height: 64px;background: #5D4C43;border-radius: 50%;overflow: hidden;position: relative}
#header .mo_menu .sns ul li a:before{content: '';display: block;width: 100%;height: 100%;background: #03c75a;left: 0;border-radius: 50%;position: absolute;top: 0;left: 0;border-radius: 50%;transform: scale(0);opacity: 0.3;transition: 0.7s}
#header .mo_menu .sns ul li a:after{content: '';display: block;width: 100%;height: 100%;background: #03c75a;position: absolute;top: 0;left: 0;border-radius: 50%;transform: scale(0);opacity: 0.3;transition: 0.7s;transition-delay: 0.3s}

#header .mo_menu .sns ul li:hover a:before, #header .mo_menu .sns ul li:hover a:after{transform: scale(1);opacity: 0.8}
#header .mo_menu .sns ul li:nth-child(2) a:before{background: linear-gradient(to bottom right, #e1306c, #833ab4);}
#header .mo_menu .sns ul li:nth-child(2) a:after{background: linear-gradient(to bottom right, #e1306c, #833ab4);}
#header .mo_menu .sns ul li a img{max-width: 100%;position: relative;z-index: 2}
/*#header .mo_menu .sns ul li:nth-child(1) a{background:  url(/img/common/sns01.png) no-repeat center center;border-radius: 50%}*/
/*#header .mo_menu .sns ul li:nth-child(2) a{background: #37312b url(/img/common/sns02.png) no-repeat center center;border-radius: 50%}*/
#header .mo_menu .sns address{display: block;font-size: 14px;color: #986347;font-family: 'Inter', sans-serif;margin-top: 20px;}
#header .mo_menu .wrap ul.menu > li div{display: none}
#header .mo_menu .wrap ul.menu > li div{display: none}
@keyframes mode {
  0%{transform: scale(0);opacity: 0}
  100%{transform: scale(1);opacity: 1}
}

/*  */

#header .mo_menu .menu{bottom: auto;top: 50%;transform: translateY(-50%)}

.left_btn_w{position: fixed;z-index: 9999;left: 50px;bottom: 50px;display: flex;align-items: center}
.left_btn_w > div{display: inline-block}
.left_btn_w .channel button{background: none;border-radius: 50%;    box-shadow: 0 0 30px rgba(180,160,0,0.3);}
.left_btn_w .channel button svg{display: block}
.dark .left_btn_w .channel #타원_98{fill: #1C1311}
.mode{display: block;position: static !Important}
.mode button{background: #fff !important;width: 140px;height: 50px;border-radius: 25px;box-shadow: 0 0 30px rgba(180,160,0,0.3);}
.mode.light{display:none !important}
.mode.dark{display:block}
.dark .mode.light{display:block !important}
.mode{position: static;margin-left: 20px;}
.sc_send.sc_send_main{bottom: 145px;left: 69px}
.dark .mode button{background: #1C1311 !important}

.sc_send .send .base:after{opacity: 1}
.sc_send.on2 .send .base:after{opacity: 0}
.dark .sc_send.on2 .send .base:after{opacity: 1}
@media (max-width: 1700px){
    #header .mo_menu .wrap ul.menu li a span{font-size: 40px}
    #header .mo_menu .wrap ul.menu li{margin-bottom: 20px;}
    #header .mo_menu .wrap ul.menu li a span{padding-right: 40px;}
    #header .mo_menu .sns{padding-right: 40px;}
    #header .mo_menu .sns ul li a img{width: 50px;}
    #header .mo_menu .sns ul li a{width: 50px;height: 50px;}
    #header .mo_menu .wrap ul.menu > li div{padding-right: 40px;}
    #header .mo_menu .wrap ul.menu li div a span{padding-right: 0}
    #header .mo_menu .wrap ul.menu > li div ul li a span{font-size: 20px}
    #header .mo_menu .wrap ul.menu li div ul li{margin-bottom: 12px}
}
@media (max-width: 1200px){
    #header .m_wrap #gnb ul li a{font-size: 16px;padding: 0 22px;}
}
@media (max-width: 980px){
  #header .hd_wrap{padding: 20px;padding-top: 20px;}
  #header .mode button{box-shadow: 0 0 10px rgba(0,0,0,0.1)}
  #header .mode button p{display: none}
  #header .mo_menu .wrap{padding-top: 65px;padding-right: 20px;}
  #header .mo_menu .wrap ul.menu li a span{padding-right: 0;font-size: 28px;}
  #header .mo_menu .wrap ul.menu li{margin-bottom: 30px;}
  #header .mo_menu .sns{padding-right: 20px;}
  #header .m_wrap #gnb{display: none}
  #header .mo_menu .wrap{width: 450px;}
  #header .mo_menu .sns ul li a{width: 45px;height: 45px;background-size: 15px !important}
  #header .mo_menu .sns ul li{margin-left: 10px;}
  #header .mo_menu .sns addre   ss{font-size: 11px;margin-top: 20px;}
    #header .contact a:after{background-size: 40px auto}
        #cursor{display: none;width: 0;height: 0}
    #header #logo a svg{width: 150px;height: auto}
    #header .mo_menu .wrap button img{width: 40px;}
    #header .mo_menu .wrap button svg{height: auto; width: 40px;}
    #header .mo_menu{width: 400px;}
    #header .mo_menu .menu{position: static;width: 100%;transform: none}
    #header .mo_menu .wrap ul.menu li{padding-right: 40px;}
    #header .mo_menu .wrap ul.menu li a span{padding-right: 20px;display: block}
    #header .mo_menu .wrap{padding-top: 120px;}
    #header .mo_menu .wrap button{right: 20px;top: 20px;}
    #header .mo_menu{border-radius: 50px 0 0 50px;}
    #header .mo_menu .wrap ul.menu li div ul li{padding-right: 0}
    #header .mo_menu .wrap ul.menu > li div{padding-right: 20px;}
    #header .mo_menu .wrap ul.menu > li div ul li a span{font-size: 16px;}
    #header .mo_menu .wrap ul.menu li div ul li{margin-bottom: 6px;}
    .mode button{height: 45px;width: 120px;}
    .mode button p{font-size: 12px;}
    .mode button span img{width: 19px;}
    .left_btn_w .channel button svg{height: 50px;width: auto}
    .mode{margin-top: 15px;}
        .mode button{width:50px}
    .mode{margin-top: 0;margin-left: 10px;}
    .mode button p{display: none}
    .mode button span i img{display: block}
    .sc_send.sc_send_main{bottom: 60px;left: 20px}
         #header .contact{right: 20px;}
  #header .contact img{width: 90px;}
  #header .number{right: 20px;}
  #header .number ul li a{font-size: 13px;}
  #header .number > div{width: 45px;height: 45px;}
  #header .number > div i img{width: 20px;}
  #header .number > div i{padding-right: 13px;padding-top: 13px;}
  #header .number ul li a{line-height: 45px}
  #header .number ul{padding-left: 20px;}
  #header .number ul li a:after{margin: 0 10px}
  #header .number{bottom: 20px;}
  #header .contact{bottom: 80px}
  #header .m_wrap #gnb{display: none}
  #header .mode{left: 20px;bottom: 20px;}
  #header .mode button img{display: block;}
  #header .mode button{padding: 10px;border-radius: 50%;background: #fff}
  #header .scroll{left: 20px;bottom: 80px;}
     #header .scroll img{width: 45px;}
    .left_btn_w{left: 20px;bottom: 20px;}
        .mode button{width: 45px;height: 45px}
    .left_btn_w .channel button svg{width: 45px;height: 45px;}
    #header .number.on > div{width: 278px;}

    .sc_send.sc_send_main {
        bottom: 84px;
        left: 32px;
    }

}
@media (max-width: 660px){
	#header .number ul li:nth-child(2){display: none}
	#header .number.on > div{width: 160px}
	#header .number ul li a:after{display: none}
    .sc_send.sc_send_main{bottom: 75px;}
}
@media (max-width: 560px){
  #header .mo_menu .wrap, #header .mo_menu{width: 290px;}
  #header .mo_menu .wrap ul.menu li a span{font-size: 20px;}
  #header .mo_menu .wrap button{right: 20px;}
    #header .mo_menu .wrap ul.menu li{padding-right: 0}
  #header .mo_menu .wrap button img{width: 45px;}
  #header .mo_menu .wrap button svg{width: 35px;}
    #header .mo_menu .wrap ul.menu li a span{padding-right: 0}
    #header .mo_menu .wrap ul.menu > li div{padding-right: 0}
    #header .mo_menu .wrap ul.menu > li:hover > a span{transform: scale(1)}
    #header .mo_menu .wrap ul.menu > li > a:before{width: 4px;height: 4px;}
    #header .mo_menu .wrap ul.menu > li > a:after{width: 4px;height: 4px;}
    #header .mo_menu .wrap ul.menu > li div ul li a span:after{display: none}

}