@charset "UTF-8";

/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');*/
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Light.otf);
  font-weight: 100;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Thin.otf);
  font-weight: 200;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-DemiLight.otf);
  font-weight: 300;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Regular.otf);
  font-weight: 400;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Medium.otf);
  font-weight: 500;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Bold.otf);
  font-weight: 700;
}
@font-face {
  font-family: NotoSansCjk;
  src: url(../font/NotoSansKR-Black.otf);
  font-weight: 900;
}

:root{font-size: 16px;}

.clear:after {    
    clear: both; 
    content:" "; 
    display:block;
}

html,body{
    background: #fff;
    height: 100%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */color: #fff;opacity: 1; /* Firefox */}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #fff;}
::-ms-input-placeholder { /* Microsoft Edge */ color: #fff;}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
    font-family: NotoSansCjk;
	vertical-align: middle;
    font-weight: 400;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	text-align: center;
	font-family: NotoSansCjk;
    font-weight: 400;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
button {
    background: transparent;
    border: none;
}


/*제목 타이틀 h2*/
.namtitle{padding-top: 200px; padding-bottom: 120px; font-size: 1.875rem; color: #fcb737; font-weight: 500; line-height: 2.2rem;}

/*타이틀 서브 설명 */
.namsubtitel{font-size: 1.25rem; color:#797d82; line-height: 1.5rem; margin-bottom: 50px; font-weight: 500;}

.namsubtitel2{font-size: 1rem; color:#797d82; line-height: 1.2rem; margin-bottom: 50px;}

.namsubtitel3{font-size: 1.25rem; color:#797d82; line-height: 1.5rem; margin-bottom: 100px; font-weight: 500;}

.namsubtitel4{font-size: 1.25rem;; color:#797d82; line-height: 1.5rem; margin: 5% 0;}
/*햄버거 버튼*/
#nav-icon4 {font-size: 1rem; color:#797d82; line-height: 1.2rem;
  width: 14px;
  height: 14px;
  position: relative;
  margin: 5px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  z-index: 300; 
}
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #58585b;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.span_black{background: #000 !important;}
/* Icon 4 */

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 5px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -0px;
  left: 0px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 0px;
}


/*top menu*/
.top_nav{width: 100%; position: absolute; top: 0px; left: 0px; z-index: 2000; background: #fff;  height: 65px; padding-top: 20px;
-webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.4);
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.4);}

.top_nav>div{max-width: 1350px; width: 100%; margin: 0 auto;}
.top_nav>div>h1{float: left; margin:0px 50px 0 0; width: 220px;}
.top_nav>div>ul{float: left;}


.menu_group{display: inline-block;}
.menu_group>li{float:left; margin: 0 40px 0 0; line-height: 1.5rem; height: 25px;}
.menu_group>li>div{color: #58585b; font-size: 0.875rem; font-weight: 500; cursor: pointer;}
.menu_group>li>div:hover{color:#fcb737;}


.language_group{position: relative; top: 3px; border: 1px solid #fcb737; padding: 3px 0 3px; display: inline-block; width: 120px; border-radius: 20px;}
.language_group>li{float: left;font-size: 12px; width: 25%;  border-right: 1px solid #ccc;}
.language_group>li:nth-child(4){border-right: 0px;}
.language_group>li>a{color: #58585b; width: 100%; text-align: center; position: relative; top: -1px;}
.language_group>li>a:hover{color: #fcb737;}
.language_group>li>a::after{content: "";height: 100%; background: #ccc; width: 1px; position: relative; top: 1px; right: -1px;z-index: 500;}
.language_action{color: #fcb737 !important;}




.submenu{line-height: 16px; padding-top: 40px;}
.submenu>li>a{color: #fff; font-size: 0.875rem; font-weight: 300; margin-bottom: 10px; display: block;}
.submenu>li>a:hover{color:#fcb737;font-weight: 500;}

.bgopc{position: fixed; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 190; display: none;}

#hamburger{float: right; display: none; margin-top: 2px; margin-left: 10px;  margin-right: 10px; }



/*m_menu*/
.m_menu{position: absolute; padding-top: 80px; width: 60%; left: 50%; transform: translateX(-50%);z-index: 190; }
.m_menu>div{border-top: 1px solid #fff; padding-top: 10px; }
.m_menu>div>div:nth-child(1){width: 50%; float: left; text-align: left; font-size: 0.875rem; font-weight: 500; color: #fff;}
.m_menu>div>ul:nth-child(2){width: 50%; float: left; text-align: left; padding-bottom: 30px;}
.m_menu>div>ul:nth-child(2)>li>a{font-size: 12px; font-weight: 400; color: #fff;padding-bottom: 10px; display: block;}
.m_menu>div>ul:nth-child(2)>li>a:hover{color: #fcb737; font-weight: 500;}



/*배경 회색 깔기*/

.full_bg{width: 100%; background: #f1f2f2; padding-bottom: 50px;}

/*서브 배너*/

.sub_banner{width: 100%; height: auto; overflow-x:hidden; position: relative;}

/*선택시 css 클래스 추가*/
.nam_active{background:#fcb737 !important; color: #fff !important; border: 0px;}


/*main banner*/

.sub_banner h2{font-size: 2.8rem; font-weight: 700; position: absolute; top: 45%; text-align: center; width: 100%; color: #fff;}

.sub_banner div:nth-child(1){width: 100%;}
.sub_banner div:nth-child(2){width: 100%; position: absolute; top: 50%;  transform: translateY(-50%); z-index: 100;}
.sub_banner div h3{font-size: 1.5rem; margin-bottom: 40px; color: #fff; text-align: center; font-weight:500; }
.sub_banner div p{font-size: 1rem; line-height: 1.5rem;color: #fff; text-align: center; font-weight: 300;}


/* 1200px 박스*/

.nam_container{max-width: 1200px; width: 100%; margin: 0 auto; text-align:  center;}



.btn-3 {
    border: 1px solid #000;
    overflow: hidden;
    position: relative;
}
.btn-3 span {
    z-index: 2;
}
.btn-3:after {
    content: "";
    height: 100px;
    left: -75px;
    opacity: .5;
    position: absolute;
    z-index: 10000;
    top: -35px;
    background: #fff;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
}
.btn-3:hover:after {
    left: 120%;
}



/*footer*/

.footer{}
.footer>div{padding: 25px 0 35px;;}
.footer>div>*{float: left; }
.footer>div>h5:nth-child(1){ width: 150px; margin-right: 40px; padding: 10px;}
.footer>div>div:nth-child(2){color: #797d82; font-size: 0.8125rem; text-align: left; line-height: 18px; padding: 10px;}
.footer>div>div:nth-child(2) a{color: #000; font-size: 0.8125rem; text-align: left; line-height: 18px; position: relative; top: -2px;}
.footer>div>div:nth-child(2) a:hover{opacity: 0.7;}
.footer>div p br{display: none;}
.bar{position: relative; top: -3px;}
.bar2{position: relative; top: -3px;}


/*슬라이드 버튼*/
.slide_btn img{width: 50px;}

/*top_btn*/
.top_btn{position: fixed; bottom: 10px; right: 10px; display: inline-block; width: 70px; z-index: 10000; cursor: pointer; display: none;}
.top_btn>img:nth-child(2){display: none;}


.imp{color: #0073ff!important;}


@media (max-width:1650px){
.menu_group>li{margin: 0 25px;}
.top_nav>h1{margin: -3px 50px 0; width: 250px;}
.top_nav>ul:nth-child(3){margin-left: 50px;}
.sub_banner h2{top: 30%}
.namtitle{padding: 70px 0;}
.namsubtitel2{margin-bottom: 40px;}
}
@media (max-width:1450px){
.menu_group>li{margin: 0 15px;}
.top_nav>h1{margin: -3px 20px 0; width: 250px;}
.top_nav>ul:nth-child(3){margin-left: 20px;} 
    
}
@media (max-width:1200px){
    :root{font-size: 15px;}
    .top_nav>div>ul{float: right;}
    .top_nav>div>h1{margin:0px 24px;}
    .namtitle{padding: 70px 0;}
    .menu_group{display: none;}
    .top_nav>ul{float: right;} 
    .top_nav{position: relative; padding-top: 24px; top: 0px;}
    #hamburger{display: block; margin-top:0;}
    .language_group{top: 1px;}
    .sub_banner>div:nth-child(1){position: relative; left: 50%;}
    .sub_banner>div:nth-child(1)>img{height: 590px !important; width: auto !important; position: absolute; transform: translateX(-50%);}
    .nam_container{width: 95%;}
    .namsubtitel{margin-bottom: 5%;}
    .namsubtitel2{width: 95%; margin: 0 auto 30px;}
    .full_bg{padding-bottom: 5%;}
    .namsubtitel3{margin-bottom: 10%;}
    .slide_btn img{width: 40px;}
    
}

@media (max-width:1024px){
    :root{font-size: 14px;}
    .namtitle{padding: 50px 0;}
}

@media (max-width:768px){
    :root{font-size: 13px;}
    .m_menu{padding-top: 20px;}
    .namtitle{padding: 40px 0;}
    .sub_banner h2{top: 25%;}
    .namsubtitel2{margin-bottom: 20px;}
    .namsubtitel2 br{display: none;}
    .slide_btn img{width: 35px;}
    .footer>div>div:nth-child(2),.footer>div>div:nth-child(2) a{font-size: 1rem;}
    .bar{display: none;}
    .footer>div p br{display: block;}
    
}

@media (max-width:480px){
    :root{font-size: 12px;}
    .namtitle{padding: 30px 0;}
    .top_nav>div>h1{width: 160px; margin: 0 15px;}
    .namsubtitel2{width: 95%; margin: 0 auto 15px;}
    .namsubtitel2 br{display: none;}
    .top_nav>h1{width: 170px; margin: 0px 10px 0;}
    .language_group{width: 75px;}
    .m_menu{width: 80%;}
    .slide_btn img{width: 30px;}
    .top_btn{width: 40px;}
    .top_btn>img:nth-child(1){display: none;}
    .top_btn>img:nth-child(2){display: block;}
    .footer>div p br{display: block;}
    .sub_banner div p{width: 90%; margin: 0 auto;}
    .sub_banner div p br{display: none;}

}