* {margin: 0; padding: 0; position: relative; font-family: 'Noto Sans KR', 'Noto Sans', sans-serif; cursor: none; }
html { min-width: 1280px;}
#lightCover { position: fixed; top:0; left:0; width:100%; height:100%; display: none; z-index: 900;}

.logo { position: fixed; top: 77px; left:5.5%; font-weight: 600; font-size: 25px; z-index: 1; }
.logo > img { width:158px; }
#changeHandler { width:30px; height:30px; position: fixed; right:5.5%; top:80px; z-index: 3;}
#changeHandler .spot { border-radius: 100px; width:27px; height:27px; position: relative; top: 1px; left: 1px;}
.mobile { display: none; }

.loader { width: 100%; height: 10px; position: fixed; top:0; left: 0; z-index: 10; }
.loader_bar { width:0%; height: 10px; }

.line { width:1px; height:63px; z-index: 1; }
.side { position: fixed; bottom: 50px; background-position: bottom; background-repeat: no-repeat; }
.top { right:3%; z-index: 3; background-size: 19px auto; width:19px; height:120px;  }
.work .top{ background-image: url('../img/top_B.png');}
.about .top { background-image: url('../img/top_W.png'); }
.contact { left:3%; z-index: 3; background-size: 14px auto; width:14px; height:210px; }
.work .contact{ background-image: url('../img/contact_w.png');}
.about .contact { background-image: url('../img/contact_b.png'); }

.about .loader_bar, .work .loader, .work, .about .spot, .about .line, .work #popup, .about #cursor {background-color: black;}
.work .loader_bar, .about .loader, .about, .work .spot, .about #popup, .work #cursor {background-color: white;}
.work .b ,.about .w { display: block; }
.about .b ,.work .w { display: none; }
.work .line { background-color: #9e9e9e;}
.work * { color: white; }

.mainLine { position: absolute; top:100%; left: 50%; }
.mainWrapper { width: 100%; }

footer { width:100%; height: 455px; background-color: #161616; color:#9e9e9e;}
footer > .wrapper {  }
footer > .wrapper> div { width:40%; height: 100%; }
footer > .wrapper> .info { left: 10%; top: 110px; font-size: 15px; padding-top: 35px; font-weight: 100;}
footer > .wrapper> .more { position:absolute; left: 60%; top: 125px; }
.more > p { font-size: 22px; margin-top: 30px;}
footer > .wrapper> div > p { margin-bottom: 5px;}
footer > .wrapper> div > a { margin-top:72px; display: block; }
footer > .wrapper> div > a:visited,
footer > .wrapper> div > a:link { text-decoration: none; }
footer > .wrapper> div a.sns { display: inline-block; width:32px; height: 32px; margin-right: 15px; background-repeat: no-repeat; background-size: 100% auto;  }
/*
.fb {background-image: url("../img/sns_f.png");}
.in {background-image: url("../img/sns_i.png");}
.v {background-image: url("../img/sns_v.png");}
*/
footer > .wrapper> div > a.linkProduce { width:100px; margin-top:30px; text-align: center; border: 1px solid #9e9e9e; padding: 4px 40px; font-size:13px; color:#9e9e9e;}




.about .pages#sec2 { display: none; }
.work .pages#sec1 { display: none; }
.pages { width:100%; }

.pages .main-cover { width:100%;}
.pages .title { width: 90%; height:440px; position: absolute; top:42%; margin-top:-150px; left:5%; text-align: center;}
.pages .title > h1 { letter-spacing: 1.4em; font-size: 18px; font-weight: 100; margin-bottom:77px; position: relative; left:15px;}
.pages .title > h2 { font-size: 60px; line-height: 75px; font-weight: 700;}
.work .pages .title > h1 { color: #9e9e9e;}

.pages .contents { width: 94%; padding: 100px 3%; }
.pages .contents > .box { width:28%; margin:50px 2.65% 120px; display: inline-block; }
.pages .contents > .box > .tnImg { width: 100%; transition: top 0.5s, width 0.5s, height 0.5s; background-position: center; background-size: 105%; overflow: hidden; }
.pages .contents > .box > .tnImg > img { width:100%; height:100%; opacity: 0; background-color: black; display: block;  }
.pages .contents > .box > .tnTitle { width: 94%; margin-top:20px; left:3%; font-weight: 300; font-size: 18px; font-weight: 100; height: 37px; position: absolute; }

.anotherPages { width:100%; height: 580px; }
.anotherPages > a { width:306px; height: 68px; display:block; top:50%; left: 50%; margin: -76px 0 0 -153px;}
.anotherPages > a > img { width:100%; }
.anotherPages > a > p { font-size: 19px; letter-spacing: 0.2em; width: 100%; font-weight: 100; text-align: center; margin-top: 40px;}
.work .anotherPages > a > p { color: #9e9e9e; }



#popup { position: absolute; top:0; left: 0; width: 100%; height:auto; display: none; z-index: 2;}
#popup > .close { width: 32px; height:32px; background-size: 100%; position: fixed; top: 80px; left:5.5%; background-repeat: no-repeat; z-index: 2; }
.work #popup > .close{ background-image: url('../img/back_w.png');}
.about #popup > .close { background-image: url('../img/back_b.png'); }
#popup > .wrapper { padding:200px 0 0 -640px; width:70%; left:15%;}

#popup > .wrapper .contents_title { margin: 277px 101px 240px; }
#popup > .wrapper  .contents_title > h1 { font-size: 60px; font-weight: 400; line-height: 83px; }
#popup > .wrapper  .contents_title > .info { width:100%; margin-top: 100px;}
#popup > .wrapper  .contents_title > .info > span { width:49%; display: inline-block; color: #9e9e9e;}
#popup > .wrapper  .contents_title > .info > span > div { margin-bottom: 2px; font-size: 18px; font-weight: 100;}
#popup > .wrapper  .contents_title > .info > span > div > p { color:black; display: inline; padding-right: 10px; font-weight: 700; }
.work #popup > .wrapper  .contents_title > .info > span > div > p { color:#9e9e9e; }

#popup > .wrapper  .contents_img { width: 100%; }

#popup > .wrapper  .contents_summery { margin: 80px 80px; }
#popup > .wrapper  .contents_summery > .title { font-size: 28px; font-weight: 100; position: absolute; left:24px; }
#popup > .wrapper  .contents_summery > .summery { left: 50%; width: 50%; top:0; line-height: 34px; font-size: 20px; font-weight: 200; }

#popup > .wrapper  .contents_text { margin: 100px 80px; text-align: center; font-size: 21px; font-weight: 100; line-height: 32px; }

#popup > .wrapper  .contents_twoimg {}
#popup > .wrapper  .contents_twoimg > img { width:49.5%; display: inline-block; }
#popup > .wrapper  .contents_twoimg > img:last-child { float: right; }

#popup > .wrapper  .contents_sidescroll { width: 100%; overflow-y: hidden; }
#popup > .wrapper  .contents_sidescroll img { height: 100%;}

#popup > .wrapper  .contents_navi { height: 300px;}
#popup > .wrapper  .contents_navi > a { width:49.9%; display: inline-block; height: 100%; overflow: hidden; }
#popup > .wrapper  .contents_navi > a.prev {  }
#popup > .wrapper  .contents_navi > a.next { left: 50.1%; position: absolute; }
#popup > .wrapper  .contents_navi > a > img { width: 100%;}

#popup > .wrapper  .contents_navi > a div {  position: absolute; top:0; left: 0; width:100%; height: 100%; text-align: center; line-height: 380px; letter-spacing: 0.15em; background-repeat: no-repeat; background-position: center 90px; background-size: 240px; opacity: 0.7; }
#popup > .wrapper  .contents_navi > a img { opacity: 0.5;}
#popup > .wrapper  .contents_navi > a:hover img { opacity: 1; transition:opacity 0.5s;}
.work #popup > .wrapper  .contents_navi > a.prev div { background-image: url("../img/bt_left_b.png"); color: white; }
.about #popup > .wrapper  .contents_navi > a.prev div { background-image: url("../img/bt_left_w.png"); color: black; }
.work #popup > .wrapper  .contents_navi > a.next div { background-image: url("../img/bt_right_b.png"); color: white; }
.about #popup > .wrapper  .contents_navi > a.next div { background-image: url("../img/bt_right_w.png"); color: black; }
#popup > .wrapper  .contents_navi > a.prev div { }
#popup > .wrapper  .contents_navi > a.next div { }

#popup > .wrapper  .contents_leftTitle { margin: 0px 80px; font-size: 18px; font-weight: 600; line-height: 39px; }
#popup > .wrapper  .contents_leftText { margin: 0px 80px; font-size: 18px; font-weight: 100; line-height: 39px;  }

#popup > .wrapper  .contents_vimeo { width: 100%; }

@media screen and (min-width: 1800px) {
    #popup > .wrapper {  width:1400px; left: 50%; margin-left: -700px;}
}

@media screen and (max-width: 1400px) {
    .pages .contents > .box > .tnTitle { font-size: 14px; height: 25px;}
    #popup > .wrapper .contents_summery > .title { font-size: 32px; }
    #popup > .wrapper .contents_summery > .summery,
    #popup > .wrapper  .contents_leftTitle,
    #popup > .wrapper  .contents_leftText { font-size: 14px; line-height: 29px;}
}


/* scroll-x */
.contents_sidescroll {}
.contents_sidescroll::-webkit-scrollbar { width: 1px; height: 2px; background: black; }
.work .contents_sidescroll::-webkit-scrollbar { background: black;}

.contents_sidescroll::-webkit-scrollbar-thumb { background: white; }
.work .contents_sidescroll::-webkit-scrollbar-thumb {   background: black; }
.contents_sidescroll.active::-webkit-scrollbar-thumb { background: black;}
.work .contents_sidescroll.active::-webkit-scrollbar-thumb { background: white;}

.contents_sidescroll::-webkit-scrollbar-track {   background: none;  }

/* div cursor */
#cursor { width:20px; height:20px; border-radius: 20px; position: fixed; z-index: 1000; margin: -10px 0 0 -10px; pointer-events: none; }
.about #cursor { border: 0px solid white;}
.work #cursor { border: 0px solid black;}