/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess*/
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: local('Noto Sans KR Thin'), local('Noto Sans CJK KR Thin'),
    url(/font/web/NotoSansKR-Thin.woff2) format('woff2'),
    url(/font/web/NotoSansKR-Thin.woff) format('woff'),
    url(/font/web/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans KR Light'), local('Noto Sans CJK KR Light'),
    url(/font/web/NotoSansKR-Light.woff2) format('woff2'),
    url(/font/web/NotoSansKR-Light.woff) format('woff'),
    url(/font/web/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans KR Regular'), local('Noto Sans CJK KR Regular'),
    url(/font/web/NotoSansKR-Regular.woff2) format('woff2'),
    url(/font/web/NotoSansKR-Regular.woff) format('woff'),
    url(/font/web/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans KR Medium'), local('Noto Sans CJK KR Medium'),
    url(/font/web/NotoSansKR-Medium.woff2) format('woff2'),
    url(/font/web/NotoSansKR-Medium.woff) format('woff'),
    url(/font/web/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans KR Bold'), local('Noto Sans CJK KR Bold'),
    url(/font/web/NotoSansKR-Bold.woff2) format('woff2'),
    url(/font/web/NotoSansKR-Bold.woff) format('woff'),
    url(/font/web/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: local('Noto Sans KR Black'), local('Noto Sans CJK KR Black'),
    url(/font/web/NotoSansKR-Black.woff) format('woff'),
    url(/font/web/NotoSansKR-Black.otf) format('opentype');
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; text-shadow:none;
}
html {overflow-y:scroll;}
body {font-family:"Noto Sans KR", sans-serif; background:#151515;}
a {color:#333;}
a:hover, a:focus {color:#333; text-decoration:none;}
ul {padding:0; margin:0; list-style:none;}

::-webkit-scrollbar {width:6px; height:6px;}
::-webkit-scrollbar-track {background-color:transparent;}
::-webkit-scrollbar-thumb {border-radius:3px; background-color:#e6e8ef;}
::-webkit-scrollbar-button {width:0; height:0;}



/* 메뉴 */ 
.menuWrap {position:fixed; top:0; right:0; z-index:99;}
.menuWrap .menuBtn {position:fixed; top:25px; right:25px; margin-top:0; margin-left:0; display:block; width:50px; height:50px; border-radius:50%; background-color:#fff; cursor:pointer; border-radius:50%; margin-left:-10px; opacity:1; -webkit-transition:.2s background ease-in-out; -o-transition:.2s background ease-in-out; -moz-transition:.2s background ease-in-out; transition:.2s background ease-in-out; z-index:10001;}
.menuWrap .menuBtn {background-color:#fff;}
.menuWrap .menuBtn.on {background-color:#333; -webkit-transition:.2s all ease-in-out;}
.menuWrap .menuBtn span {position:absolute; width:24px; height:3px; background:#333; -webkit-transition:.2s all ease-in-out; -o-transition:.2s all ease-in-out; -moz-transition:.2s all ease-in-out; transition:.2s all ease-in-out; left:50%; margin-left:-12px; border-radius:2px;}
.menuWrap .menuBtn span:nth-child(1) {top:50%; margin-top:-1px;}
.menuWrap .menuBtn span:nth-child(2) {top:50%; margin-top:-10px;}
.menuWrap .menuBtn span:nth-child(3) {top:50%; margin-top:8px;}
.menuWrap .menuBtn.on span {height:3px; background:#fff;}
.menuWrap .menuBtn.on span:nth-child(1) {display:none;}
.menuWrap .menuBtn.on span:nth-child(2) {width:30px;margin-top:-13px; margin-left:-15px; -webkit-transform:translateY(12px) rotate(-43deg); -moz-transform:translateY(12px) rotate(-43deg); -ms-transform:translateY(12px) rotate(-43deg); -o-transform:translateY(12px) rotate(-43deg); transform:translateY(12px) rotate(-43deg);}
.menuWrap .menuBtn.on span:nth-child(3) {width:30px; margin-top:12px; margin-left:-17px; -webkit-transform:translateX(2px) translateY(-13px) rotate(43deg); -moz-transform:translateX(2px) translateY(-13px) rotate(43deg); -ms-transform:translateX(2px) translateY(-13px) rotate(43deg); -o-transform:translateX(2px) translateY(-13px) rotate(43deg); transform:translateX(2px) translateY(-13px) rotate(43deg);}
.menuWrap .menuBtn .menuIconText {position:absolute; top:50%; right:100%; margin-right:10px; font-size:12px; font-weight:400; color:#fff; white-space:nowrap; -webkit-transform:translateY(-50%); -moz-transform: translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); pointer-events:none; overflow:hidden; opacity:1;}
.menuWrap .menuBtn .menuIconText.menu {color:#fff; font-weight:700;}
.menuWrap .menuBtn.on .menuIconText.menu {width:0;}
.menuWrap .menuBtn .menuIconText.close {color:#151515; -webkit-transition:.2s all ease-in-out; -o-transition:.2s all ease-in-out; -moz-transition:.2s all ease-in-out; transition:.2s all ease-in-out; font-weight:700; text-shadow:none;}
.menuWrap .menuBtn:not(.on) .menuIconText.close {width:0;}

.menuWrap .open {display:none;}
.menuWrap .open.on {display:block; position:fixed; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.6); z-index:99;}

.menuWrap .menupage {position:fixed; background-color:#fff; width:100%; width:500px; height:100vh; height:-webkit-fill-available; top:0; right:-100%; bottom:0; padding:60px; -webkit-transition:.2s all ease-in-out; -ms-transition:.2s all ease-in-out; transition:.2s all ease-in-out; opacity:0; overflow-y:auto; -webkit-box-shadow:-2px -2px 14px rgb(0 0 0 / 50%); box-shadow:-2px -2px 14px rgb(0 0 0 / 50%); z-index:10000;}
.menuWrap .menupage.on {right:0; opacity:1;}
.menuWrap .menupage .menuList {position:absolute; top:180px;}
.menuWrap .menupage .menuList li {width:100%; text-align:center; padding:0 0 10px; text-align:left;}
.menuWrap .menupage .menuList li a {color:#333; -webkit-transition:none; -ms-transition:none; transition:none; font-size:45px; font-weight:900; -webkit-transition:.3s color ease-in-out; -o-transition:.3s color ease-in-out; -moz-transition:.3s color ease-in-out; transition:.3s color ease-in-out; opacity:.5;}
.menuWrap .menupage .menuList li a:hover, .menuWrap .menupage .menuList li a.active {opacity:1;}

.menuWrap .menupage .menuFooterCompany {position:absolute; bottom:60px; opacity:.8;}
.menuWrap .menupage .menuFooterCompany svg {margin-bottom:20px;}
.menuWrap .menupage .menuFooterCompany p {font-size:12px; margin:0; word-break:keep-all;}
.menuWrap .menupage .menuFooterCompany p.address {margin-bottom:6px;}
.menuWrap .menupage .menuFooterCompany p.copy {opacity:.5;}
.menuWrap .menupage .menuFooterCompany a {color:#30cfd0; font-size:12px; text-decoration:underline; margin-left:5px;}







.ntsoftWrap .fixedLeft .footerBox {position:absolute; bottom:70px;}
.ntsoftWrap .fixedLeft .footerBox svg {margin-bottom:20px; cursor:pointer;}
.ntsoftWrap .fixedLeft .footerBox .address {font-size:12px; color:#fff; margin:0;}
.ntsoftWrap .fixedLeft .footerBox span {font-size:12px; color:#fff; position:relative; padding-right:10px; display:block;}
.ntsoftWrap .fixedLeft .footerBox span.first:before {content:none;}
.ntsoftWrap .fixedLeft .footerBox .copy {font-size:12px; color:#fff; opacity:.5; margin:0;}
.ntsoftWrap .fixedLeft .footerBox a {color:#fff; font-size:12px; text-decoration:underline; opacity:.5;}



/********** side **********/
.side { position:fixed; bottom:50px; right:50px; z-index:100; }
.side div button { width:70px; height:70px; margin-top:10px; font-weight:500; font-size:12px; border:0; border-radius:50%; box-shadow:0 0 3px 1px rgba(0,0,0,0.2); display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; }
.side div button img { width:18px; margin-bottom:5px; }
.side div button.talk { background:#FFD463; }


.modal#privacy.fade .modal-dialog {background:#2A2A2D; bottom:-700px; margin:0; padding:0; position:fixed; left:49.9%; right:unset; top:unset; width:1320px; height:700px; max-width:unset; z-index:1; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -webkit-transform:translate(0,0); transform:translate(0,0) translate3d(-50%, 0, 0); margin:0; border-radius:40px 40px 0 0; overflow:hidden;}
.modal#privacy.show .modal-dialog {bottom:0; z-index:999;}
.modal#privacy .modal-dialog .modal-content {background:none; border:none; height:100%; overflow-y:hidden;}
.modal#privacy .modal-dialog .modal-content .modal-header {display:block; position:relative; padding:40px; border-bottom:solid 1px #151515;}
.modal#privacy .modal-dialog .modal-content .modal-header .title {font-size:40px; color:#fff; font-weight:700; margin:0; line-height:50px;}
.modal#privacy .modal-dialog .modal-content .modal-header .close {position:absolute; right:40px; top:40px; padding:0; margin:0; opacity:1;}

.modal#privacy .modal-dialog .modal-content .modal-body {padding:40px;}
.modal#privacy .modal-dialog .modal-content .modal-body textarea {width:100%; height:490px; background:#2A2A2D; border:none; color:rgba(255, 255, 255, .5); padding:10px; font-size:16px; resize:none;}






/*반응형 View*/
@media only screen and (max-width:1440px) {
    .menuWrap .menuBtn {width:45px; height:45px;}
    .menuWrap .menuBtn span {width:22px; margin-left:-11px;}
    .menuWrap .menuBtn span:nth-child(2) {margin-top:-9px;}
    .menuWrap .menuBtn span:nth-child(3) {margin-top:7px;}
    .menuWrap .menuBtn.on span:nth-child(2) {width:26px; margin-top:-14px; margin-left:-13px;}
    .menuWrap .menuBtn.on span:nth-child(3) {width:26px; margin-top:11px; margin-left:-15px;}
    
    .menuWrap .menupage .menuList {top:170px;}
    .menuWrap .menupage .menuList li a {font-size:42px;}
    
    
    
    
    .ntsoftWrap .fixedLeft .footerBox svg {width:120px; height:unset;}
    
    
    
    
    .modal#privacy.fade .modal-dialog {border-radius:30px 30px 0 0;}
    .modal#privacy.show .modal-dialog {bottom:0;}
    .modal#privacy.fade .modal-dialog {left:50%; width:80%;}
    .modal#privacy .modal-dialog .modal-content .modal-header .title {font-size:38px; line-height:45px;}
    .modal#privacy .modal-dialog .modal-content .modal-header .close svg {width:45px; height:45px;}
    
    .modal#privacy .modal-dialog .modal-content .modal-body textarea {font-size:15px;}
}

@media only screen and (max-width:1024px) {
    .menuWrap .menuBtn {top:20px; right:20px;}
    .menuWrap .menupage {max-width:400px; padding:40px;}
    
    
    
    .ntsoftWrap .fixedLeft .footerBox {display:none;}
    
    
    
    .modal#privacy.fade .modal-dialog {width:calc(100% - 60px); border-radius: 30px 30px 0 0;}
    .modal#privacy.show .modal-dialog {bottom:0;}
    .modal#privacy .modal-dialog .modal-content .modal-header .close {right:30px; top:30px;}
    .modal#privacy .modal-dialog .modal-content .modal-header {padding:30px;}
    
    .modal#privacy .modal-dialog .modal-content .modal-body {padding:30px;}
}

@media only screen and (max-width:768px) {
}

@media only screen and (max-width:540px) {
    .menuWrap .menuBtn {width:40px; height:40px;}
    .menuWrap .menuBtn span {width:20px; height:2px; margin-left:-10px;}
    .menuWrap .menuBtn span:nth-child(2) {margin-top:-8px;}
    .menuWrap .menuBtn span:nth-child(3) {margin-top:6px;}
    .menuWrap .menuBtn.on span {height:2px;}
    .menuWrap .menuBtn.on span:nth-child(2) {width:24px; margin-top:-13px; margin-left:-12px;}
    .menuWrap .menuBtn.on span:nth-child(3) {width:24px; margin-top:12px; margin-left:-14px;}

    .menuWrap .menupage {width:320px; padding:20px;}
    .menuWrap .menupage .menuList {top:160px;}
    .menuWrap .menupage .menuList li a {font-size:30px; line-height:30px;}

    .menuWrap .menupage .menuFooterCompany {width:calc(100% - 60px); bottom:30px;}
    .menuWrap .menupage .menuFooterCompany svg {width:100px; margin-bottom:10px;}
    
    
    
    
    
    
    
    
    .modal#privacy.fade .modal-dialog {width:calc(100% - 40px); border-radius:20px 20px 0 0; bottom:-97.5%; height:97.5%;}
    .modal#privacy.show .modal-dialog {bottom:0;}
    .modal#privacy .modal-dialog .modal-content .modal-header {padding:20px;}
    .modal#privacy .modal-dialog .modal-content .modal-header .title {font-size:26px; width:calc(100% - 35px); line-height:35px;}
    .modal#privacy .modal-dialog .modal-content .modal-header .close {right:20px; top:20px;}
    .modal#privacy .modal-dialog .modal-content .modal-header .close svg {width:35px; height:35px;}

    .modal#privacy .modal-dialog .modal-content .modal-body {padding:20px;}
    .modal#privacy .modal-dialog .modal-content .modal-body textarea {height:100%; font-size:14px;}
}

@media only screen and (max-width:414px) {
}

@media only screen and (max-width:375px) {
}

@media only screen and (max-width:360px) {
}

@media only screen and (max-width:320px) {
    .menuWrap .menupage {max-width:320px;}
    .menuWrap .menupage .menuList {top:19%;}
    
    .menuWrap .menupage .menuList li a {line-height:22px;}
    .menuWrap .menupage .menuFooterCompany svg {margin-bottom:5px;}
    .menuWrap .menupage .menuFooterCompany p {line-height:16px;}
    
    
    
    .modal#privacy .modal-dialog .modal-content .modal-header .title {font-size:22px; line-height:30px;}
    .modal#privacy .modal-dialog .modal-content .modal-header .close svg {width:30px; height:30px;}

    .modal#privacy .modal-dialog .modal-content .modal-body textarea {font-size:13px;}
}

@media only screen and (max-width:280px) {
	.menuWrap .menupage {max-width:280px;}
	
	.menuWrap .menupage .menuFooterCompany a {margin-left:0; display:block;}
}