.ntsoftWrap {margin:0 auto; max-width:1440px; padding:0 60px;}
/* 왼쪽 */
.ntsoftWrap .fixedLeft {position:fixed; width:400px; height:100vh; display:flex;}
.ntsoftWrap .fixedLeft .topBox {padding:60px 0 0; width:100%; position:relative;} /* bradley 수정 */
.ntsoftWrap .fixedLeft .topBox.aaaaa {transition:all .3s linear; opacity:1;} /* bradley 추가 */
.ntsoftWrap .fixedLeft .topBox .title {font-size:60px; font-weight:700; color:#fff; margin:0;}
.ntsoftWrap .fixedLeft .topBox .subTitle {font-size:30px; font-weight:700; color:#fff; margin:0;}
.ntsoftWrap .fixedLeft .topBox .subject {font-size:16px; font-weight:400; color:#fff; margin:0; margin-top:30px; width:416px; word-break:keep-all;}

.ntsoftWrap .fixedLeft .subMenu {display:flex; flex-direction:column; position:absolute; top:50%;}
.ntsoftWrap .fixedLeft .subMenu li {margin-top:16px; margin-bottom:16px; display:inline-flex; align-items:center; transition:all .2s ease-in-out; opacity:.5; font-weight:300;}
/* .ntsoftWrap .fixedLeft .subMenu li:hover,  */.ntsoftWrap .fixedLeft .subMenu li.active {opacity: 1; font-weight:900;} /* bradley 수정 */
.ntsoftWrap .fixedLeft .subMenu li span:nth-child(1) {font-size:14px; letter-spacing:1px; color:#fff;}
.ntsoftWrap .fixedLeft .subMenu li span:nth-child(2) {margin-left:16px; margin-right:16px; height:1px; width:24px;  transition: all .2s ease-in-out; background-color:#fff;}
.ntsoftWrap .fixedLeft .subMenu li span:nth-child(3) {font-size:14px; text-transform:uppercase; letter-spacing:3px; color:#fff;}
/* .ntsoftWrap .fixedLeft .subMenu li:hover span:nth-child(2),  */.ntsoftWrap .fixedLeft .subMenu li.active span:nth-child(2) {width:48px;} /* bradley 수정 */

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






/* 오른쪽 */
.ntsoftWrap .changeRight {position:relative; right:-40%; width:60%; padding:80px 0 70px 0; color:#fff; margin:0;}
.ntsoftWrap .changeRight .conBox {display:table; width:100%; /* margin-top:120px; */}
.ntsoftWrap .changeRight .conBox.first {margin:0;}
.ntsoftWrap .changeRight .conBox svg {float:left;}
.ntsoftWrap .changeRight .conBox .titleName {font-size:28px; line-height:30px; font-weight:700; margin-left:10px; float:left;}
.ntsoftWrap .changeRight .conBox .skillList {clear:both;}
.ntsoftWrap .changeRight .conBox .skillList li {background:#202022; height:50px; padding:0 40px; margin-top:10px;}
.ntsoftWrap .changeRight .conBox .skillList li:hover {transition:all .2s ease-in-out;  transform:scale( 1.1); z-index:9;}
.ntsoftWrap .changeRight .conBox .skillList li:nth-child(1) {margin:0;}
.ntsoftWrap .changeRight .conBox .skillList li .skill {margin:0; font-size:20px; line-height:50px; display:inline-block; font-weight:300;}
.ntsoftWrap .changeRight .conBox .skillList li .starBox {float:right; height:50px; padding:6px 0;}
.ntsoftWrap .changeRight .conBox .skillList li .starBox .professionalism {font-size:11px; margin:0; margin-bottom:5px; text-align:center;}
.ntsoftWrap .changeRight .conBox .skillList li .starBox .star {display:table;}
.ntsoftWrap .changeRight .conBox .skillList li .starBox .star svg {margin-right:5px;}
.ntsoftWrap .changeRight .conBox .skillList li .starBox .star svg.last {margin:0;}

.ntsoftWrap .changeRight .conBox .programList {clear:both;}
.ntsoftWrap .changeRight .conBox .programList li {background:#202022; padding:26px 40px 30px 40px; margin-top:10px; display:table; width:100%;}
.ntsoftWrap .changeRight .conBox .programList li:hover {transition:all .2s ease-in-out;  transform:scale( 1.1); z-index:9;}
.ntsoftWrap .changeRight .conBox .programList li:nth-child(1) {margin:0;}
.ntsoftWrap .changeRight .conBox .programList li svg {float:left;}
.ntsoftWrap .changeRight .conBox .programList li .programBox {float:left; padding-left:20px; width:calc(100% - 40px);}
.ntsoftWrap .changeRight .conBox .programList li .programBox .title {font-size:22px; margin:0; line-height:38px;}
.ntsoftWrap .changeRight .conBox .programList li .programBox .subject {font-size:16px; opacity:.5; margin:0; height:70px; overflow:hidden; word-break:keep-all;}
.ntsoftWrap .changeRight .conBox .programList li .programBox .explanation {font-size:14px; margin:0; margin-top:10px; opacity:.5; word-break:keep-all;}

.bg { width:100%; height:100vh; position:relative; z-index:-1;}
.bg img {width:100%; position:absolute; top:50%; transform:translateY(-50%);}
.bg .company {position:absolute; top:50%; left:70%; transform:translate3d(-50%, -50%, 0); width:500px;}
.bg .company svg {float:left; width:30px;}
.bg .company .txt {float:left; padding-left:20px;}
.bg .company .txt .name {font-size:34px; color:#fff; font-weight:700;}
.bg .company .txt .address {color:#fff; margin:0; margin-bottom:10px;} 
.bg .company .txt .lineBox {border-top:solid 1px #fff; display:table; padding-top:20px; width:100%;}
.bg .company .txt .lineBox span {color:#fff;}
.bg .company .txt .lineBox span:nth-child(2) {margin-left:50px;}
.bg .company .txt .lineBox span:nth-child(3) {display:block;}









/*반응형 View*/
@media only screen and (max-width: 1440px){
    .ntsoftWrap {max-width:100%;}
    .ntsoftWrap .fixedLeft {width:325px;}
    .ntsoftWrap .fixedLeft .topBox .title {font-size:48px;}
    .ntsoftWrap .fixedLeft .topBox .subTitle {font-size:22px;}
    .ntsoftWrap .fixedLeft .topBox .subject {font-size:15px;}

    .ntsoftWrap .fixedLeft .subMenu li {margin-top:12px; margin-bottom:12px;}
    .ntsoftWrap .fixedLeft .subMenu li span:nth-child(1) {font-size:12px;}
    .ntsoftWrap .fixedLeft .subMenu li span:nth-child(2) {margin-left: 4px; margin-right:14px; width:20px;}
    .ntsoftWrap .fixedLeft .subMenu li span:nth-child(3) {font-size:12px;}
    .ntsoftWrap .fixedLeft .subMenu li:hover span:nth-child(2), .ntsoftWrap .fixedLeft .subMenu li.active span:nth-child(2) {width:40px;}

    .ntsoftWrap .fixedLeft .footerBox svg {width:120px; height:unset;}
    /* .ntsoftWrap .changeRight .conBox {margin-top:100px;} */
    .ntsoftWrap .changeRight .conBox svg {width:26px; height:26px;}
    .ntsoftWrap .changeRight .conBox .titleName {font-size:24px; line-height:26px;}
    .ntsoftWrap .changeRight .conBox .skillList li .skill {font-size:18px;}
    .ntsoftWrap .changeRight .conBox .skillList li .starBox .star svg {width:13px; height:13px;}
    
    .ntsoftWrap .changeRight .conBox .programList li svg {width:30px; height:30px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .title {font-size:20px; line-height:30px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .subject {font-size:15px; margin-top:4px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .explanation {font-size:13px;}

    .bg .company {}
    .bg .company svg {width:30px; height:unset;}
    .bg .company .txt .name {font-size:30px; line-height:40px;}
    .bg .company .txt .address {font-size:14px;}
    .bg .company .txt .lineBox span {font-size:14px;}
}

@media only screen and (max-width: 1024px){
    .ntsoftWrap {padding:0 30px;}
    .ntsoftWrap .fixedLeft {width:100%; position:relative; display:block; height:unset;}
    .ntsoftWrap .fixedLeft .subMenu {display:none;}
    .ntsoftWrap .fixedLeft .footerBox {display:none;}

    .ntsoftWrap .changeRight {width:100%; right:0; padding-bottom:0;}
    .ntsoftWrap .changeRight .conBox .skillList li {padding:0 30px;}
    .ntsoftWrap .changeRight .conBox .skillList li:hover {transform:scale(1);}

    .ntsoftWrap .changeRight .conBox .programList li {padding:25px 30px 28px 30px;}
    .ntsoftWrap .changeRight .conBox .programList li:hover {transform:scale(1);}

    .bg {height:56vh; overflow:hidden;}
    .bg img {width:150%; left:-50%;}
    .bg .company {left:59%;}
}

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

@media only screen and (max-width: 540px){
    .ntsoftWrap {display:table; margin:0; max-width:unset; padding:0 20px;}
    .ntsoftWrap .fixedLeft .topBox .title {font-size:38px; width:100%;}
    .ntsoftWrap .fixedLeft .topBox .subTitle {font-size:18px; width:100%;}
    .ntsoftWrap .fixedLeft .topBox .subject {font-size:14px; margin-top:20px; width:100%;}

    .ntsoftWrap .changeRight {padding:50px 0 0;}
    .ntsoftWrap .changeRight .conBox {margin-top:50px;}
    .ntsoftWrap .changeRight .conBox svg {width:22px; height:22px;}
    .ntsoftWrap .changeRight .conBox .titleName {font-size:20px; line-height:22px;}
    .ntsoftWrap .changeRight .conBox .skillList li {height:40px; padding:0 20px;}
    .ntsoftWrap .changeRight .conBox .skillList li .skill {font-size:15px; text-overflow:ellipsis; line-height:40px; height:40px; overflow:hidden; width:calc(100% - 100px); white-space:nowrap;}
    .ntsoftWrap .changeRight .conBox .skillList li .starBox {height:40px; padding:2px 0;}

    .ntsoftWrap .changeRight .conBox .programList li {padding:20px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .title {font-size:18px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .subject {font-size:14px; margin-top:3px; height:90px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .explanation {font-size:12px;}
    
    .bg {margin:0 auto; height:43vh;}
    .bg .company {left:50%; width:240px; word-break:keep-all;}
    .bg .company svg {width:20px; height:unset;}
    .bg .company .txt {float:left; padding-left:0;}
    .bg .company .txt .name {font-size:20px; line-height:30px; margin-bottom:5px;}
    .bg .company .txt .address {font-size:12px;}
    .bg .company .txt .lineBox {padding-top:10px;}
    .bg .company .txt .lineBox span {font-size:12px; display:block;}
    .bg .company .txt .lineBox span:nth-child(2) {margin:0;}
}

@media only screen and (max-width: 414px){
    .ntsoftWrap .changeRight .conBox .skillList li .skill {width:230px;}
}

@media only screen and (max-width: 375px){
    .ntsoftWrap .changeRight .conBox .skillList li .skill {width:200px;}
}

@media only screen and (max-width: 360px){
    .ntsoftWrap .changeRight .conBox .skillList li .skill {width:180px;}
}

@media only screen and (max-width: 320px){
    .ntsoftWrap .fixedLeft .topBox .title {font-size:30px;}
    .ntsoftWrap .fixedLeft .topBox .subTitle {font-size:16px;}
    .ntsoftWrap .fixedLeft .topBox .subject {font-size:13px;}

    .ntsoftWrap .changeRight .conBox svg {width:20px; height:20px;}
    .ntsoftWrap .changeRight .conBox .titleName {font-size:18px; line-height:20px; margin-bottom:15px;}
    .ntsoftWrap .changeRight .conBox .skillList li {padding:0 10px;}
    .ntsoftWrap .changeRight .conBox .skillList li .skill {width:140px; font-size:13px;}
    .ntsoftWrap .changeRight .conBox .skillList li .starBox .professionalism {font-size:10px;}
    .ntsoftWrap .changeRight .conBox .skillList li .starBox .star svg {margin-right:2px;}

    .ntsoftWrap .changeRight .conBox .programList li {padding:10px;}
    .ntsoftWrap .changeRight .conBox .programList li svg {width:24px; height:24px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox {padding-left:10px; width:calc(100% - 24px);}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .title {font-size:16px; line-height:24px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .subject {font-size:13px; height:75px;}
    .ntsoftWrap .changeRight .conBox .programList li .programBox .explanation {font-size:11px;}
}

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