@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');


/* noto-sans-kr-100 - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-100.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Thin'), local('NotoSansKR-Thin'),
       url('/common/font/noto-sans-kr-v12-korean_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-100.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-100.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-300 - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-300.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Light'), local('NotoSansKR-Light'),
       url('/common/font/noto-sans-kr-v12-korean_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-300.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-300.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-regular - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Regular'), local('NotoSansKR-Regular'),
       url('/common/font/noto-sans-kr-v12-korean_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-500 - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-500.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Medium'), local('NotoSansKR-Medium'),
       url('/common/font/noto-sans-kr-v12-korean_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-500.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-700 - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-700.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Bold'), local('NotoSansKR-Bold'),
       url('/common/font/noto-sans-kr-v12-korean_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-700.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}
/* noto-sans-kr-900 - korean_latin */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url('/common/font/noto-sans-kr-v12-korean_latin-900.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Black'), local('NotoSansKR-Black'),
       url('/common/font/noto-sans-kr-v12-korean_latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/common/font/noto-sans-kr-v12-korean_latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-900.woff') format('woff'), /* Modern Browsers */
       url('/common/font/noto-sans-kr-v12-korean_latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/common/font/noto-sans-kr-v12-korean_latin-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}


.eng{ font-family: 'Ubuntu', sans-serif; }



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:'Noto Sans KR', sans-serif; font-style: normal; }
html{ font-smoothing:antialiased; -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;}
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 !important; }

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;}

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; 0/IE8+9;  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;}

/*::-webkit-input-placeholder { /* WebKit, Blink, Edge */   color:#1a4d80 !important;}*/
/*:-moz-placeholder { /* Mozilla Firefox 4 to 18 */   color:#1a4d80 !important;   opacity:  1;}*/
/*::-moz-placeholder { /* Mozilla Firefox 19+ */   color:#1a4d80 !important;   opacity:  1;}*/
/*:-ms-input-placeholder { /* Internet Explorer 10-11 */   color:#1a4d80 !important;}*/

.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;}



/* header */
#header{ position: fixed; width: 100%; left: 0; top: 0; transition: 0.3s; z-index: 100; }
#header .wrap{ padding: 26px 42px; position: relative; transition: 0.3s; }
#header .wrap:after{ content: ""; display: table; clear: both; }
#header .logo{ width: 58px; height: 76px; position: absolute; left: 42px; top: 26px; transition: 0.3s; }
#header .logo a{ display: block; width: 100%;  height: 100%; background: url('/img/common/h_logo.png') left top no-repeat; }
#header .gnb{ width: 1260px; margin: 0 auto; }
#header .gnb > ul:after{ content: ""; display: table; clear: both; }
#header .gnb > ul > li{ float: left; margin-right: 67px; height: 76px; position: relative; }
#header .gnb > ul > li:last-child{ margin-right: 0; }
#header .gnb > ul > li > a{ font-size: 17px; font-weight: 500; color:#ffffff; display: block; height: auto; position: relative; top: 50%; transform: translate(0,-50%);}
#header .gnb .sub_m{ position: absolute; width: 180px; left: -20px; top: 100%; background-color: #1b1b1b; display: none; }

#header .gnb .sub_m{ padding: 20px; }
#header .gnb .sub_m li{ margin-bottom: 10px; }
#header .gnb .sub_m li:last-child{ margin-bottom: 0; }
#header .gnb .sub_m li a{ color: rgba(255,255,255,0.5); transition: color .3s; }
#header .gnb .sub_m li a:hover{ color: #fff; }
#header .gnb > ul > li > a:after{ content: ""; display: block; width: 0; height: 2px; background-color: #fff; position: absolute; right: 0; bottom: -5px; transition: 0.5s; }
#header .gnb > ul > li:hover > a:after{ width: 100%; left: 0; right: auto; }
#header .menu_btn{ position: absolute; right: 42px; top: 46px; width: 32px; height:32px; background-color: transparent; border: 2px solid #fff; border-radius: 6px; transition: 0.4s; outline: 0; }
#header .menu_btn .line_wrap{ width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
#header .menu_btn span{ display:block; width: 100%; height: 2px; background-color: #fff; position: absolute; transition: 0.5s; }
#header .menu_btn span:nth-child(1){ left: 0; top: 2px; }
#header .menu_btn span:nth-child(2){ left: 0; top: 50%; transform: translate(0,-50%);}
#header .menu_btn span:nth-child(3){ left: 0; bottom: 2px; }
#header .menu_btn:hover span:nth-child(1){ left: 0; top: 50%; transform: translate(0,-50%); }
#header .menu_btn:hover span:nth-child(2){ opacity: 0; }
#header .menu_btn:hover span:nth-child(3){ left: 0; bottom: 50%; transform: translate(0,50%); }


#footer .w_btn{ position: fixed; transition: .6s; right: 0; top: 15%;  z-index: 10; background-color: #fff;  border-radius: 10px 0 0 10px; box-shadow: 10px 10px 20px rgba(0,0,0,0.1); }
#footer .w_btn img{ display: block; }
#footer .w_btn a{ padding-left: 10px; display: block; padding: 10px; padding-right: 30px; transition: .6s; }
#footer .w_btn a:hover{ padding-right: 50px; }

#footer .w_btn2{ transform: translateY(80px);}
#footer .w_btn3{ transform: translateY(160px);}


#header.on{ background-color: #fff; }
#header.on .wrap{ padding: 15px 42px; }
#header.on .logo{ top: 15px; }
#header.on .logo a{ background-position: left 100% top; }
#header.on .gnb > ul > li > a{ color:#313131; }
#header.on .gnb > ul > li > a:after{ background-color: #313131; }
#header.on .menu_btn{ top: 37px; border: 2px solid #313131; }
#header.on .menu_btn span{ background-color: #313131; }




#right_menu{ position: fixed; width: 50%; max-width: 468px; background-color: #fff; right: -50%; top: 0; height: 100vh; box-shadow: 16px 16px 28px rgba(0,0,0,0.15); padding-left: 70px; padding-top: 170px; transition: 1s ease-out; z-index: 110; }
#right_menu.on{ right: 0; }
#right_menu .all_menu > ul > li > button{ font-size: 30px; font-weight: 600; color:#222222; letter-spacing: -1px; background-color: transparent; outline: 0; }
#right_menu .all_menu > ul > li{ margin-bottom: 45px; position: relative; }
#right_menu .all_menu > ul > li:after{ content: ""; width:0; height: 2px; background-color: #222; display :block; position: absolute; right: 0; top: 42px; transition: 0.7s; }
#right_menu .all_menu > ul > li:hover:after{ width: 100%; left: 0; right: auto; }

#right_menu .all_menu > ul > li:last-child{ margin-bottom: 0; }
#right_menu .all_menu > ul > li > ul{ margin-top: 30px; margin-left: 18px; display: none; }
#right_menu .all_menu > ul > li > ul > li{ line-height: 50px; }
#right_menu .all_menu > ul > li > ul > li > a{ font-size: 18px; font-weight: 400; color:#222222; letter-spacing: -1px; position: relative; transition: 0.4s; transform: translate(0,0); display: inline-block; }
#right_menu .all_menu > ul > li > ul > li > a:hover{ transform: translate(10px,0); }


#right_menu .sns_nav{  position: absolute; right: 0; bottom: 80px; width: 100%; padding-left: 70px; }
#right_menu .sns_nav ul{  border-top: 1px solid #d2d2d2; padding-top: 40px; }
#right_menu .sns_nav ul:after{ content: ""; display: table; clear: both; }
#right_menu .sns_nav ul li{ float: left; margin-right: 12px; }
#right_menu .sns_nav ul li:last-child{ margin-right: 0; }
#right_menu .sns_nav ul li a{ display: block; width: 45px; height: 45px; border-radius: 50%; background-color: #1b1b1b; position: relative; transition: 0.3s; }
#right_menu .sns_nav ul li a i{ display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#right_menu .sns_nav ul li a i img{ display: block;  }1
#right_menu .sns_nav ul li a:hover{  }
#right_menu .sns_nav ul li:first-child a:hover{ background:url('/img/common/sns01_bg.png') center center no-repeat; background-color: #1b1b1b; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#right_menu .sns_nav ul li:nth-child(2) a:hover{ background-color: #ff0000; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#right_menu .sns_nav ul li:nth-child(6) a:hover{ background-color: #d34237; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#right_menu .sns_nav ul li:nth-child(5) a:hover{ background-color: #45465a; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#right_menu .sns_nav ul li:nth-child(3) a:hover{ background-color: #ed3e49; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }





#right_menu .close_btn{ position: absolute; right: 42px; top: 46px; width: 32px; height:32px; background-color: transparent; border: 2px solid #313131; border-radius: 6px; transition: 0.4s; outline: 0; }
#right_menu .close_btn .line_wrap{ width: 16px; height: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); transition: 0.5s; }
#right_menu .close_btn span{ display:block; background-color: #313131; position: absolute; transition: 0.5s; }
#right_menu .close_btn span:nth-child(1){ width: 100%; height: 2px; left: 0; top: 50%; transform: translate(0,-50%); }
#right_menu .close_btn span:nth-child(2){ width: 2px; height: 100%;  left: 50%; transform: translate(-50%,0); }
#right_menu .close_btn:hover .line_wrap{ transform: translate(-50%,-50%) rotate(135deg); }




#footer .sns_nav{  position: fixed; left: 85px; bottom: 60px; z-index: 10; transition: .6s; }
#footer .sns_nav ul li{ margin-bottom: 8px; }
#footer .sns_nav ul li:last-child{ margin-bottom: 0; }
#footer .sns_nav ul li a{ display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #1b1b1b; position: relative; transition: 0.3s; }
#footer .sns_nav ul li a i{ display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#footer .sns_nav ul li a i img{ display: block;  }1
#footer .sns_nav ul li a:hover{  }
#footer .sns_nav ul li:first-child a:hover{ background:url('/img/common/sns01_bg.png') center center no-repeat; background-color: #1b1b1b; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer .sns_nav ul li:nth-child(2) a:hover{ background-color: #ff0000; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer .sns_nav ul li:nth-child(6) a:hover{ background-color: #d34237; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer .sns_nav ul li:nth-child(7) a:hover{ background-color: #3578E5; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer .sns_nav ul li:nth-child(5) a:hover{ background-color: #45465a; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer .sns_nav ul li:nth-child(3) a:hover{ background-color: #ed3e49; box-shadow: 5px 5px 10px rgba(0,0,0,0.2); }
#footer.on .sns_nav{ bottom: 140px; }