@import url(common.css);
/* coommon */
body { background-color:#10101f; }
p{font-size:16px; letter-spacing:-1px; line-height:24px; word-break:keep-all; color:#fff;}


header{position:fixed; top:0; left:0; width:100%; height:120px; min-width:1200px; padding:0 60px; font-family:'NanumSquare'; color:#fff; z-index:3000} 
header .logo { position:absolute; top:40px; }
header .logo a{display:block; width:130px; height:30px; text-indent:-999em; background-image:url(../images/common/logo.png); background-repeat:no-repeat; background-size:auto 60px; transition:ease .2s;}
footer{width:100%; background-color:#10101f;}
.fWrap{width:1200px; margin:0 auto; padding:40px 0;}
.fTop{margin-bottom:50px;}
.fTop a{margin-right:20px; font-size:14px; color:#999;}
.fBottom {font-size:14px; line-height:22px; margin-bottom:50px}
.fBottom ul {display:inline-block; margin-right:70px}
.fBottom h3 {color:#009ccf; text-transform:uppercase; font-size:18px; font-weight:800; margin-bottom:10px}
.fBottom li {position:relative; padding-left:80px; color:#fff; word-break:keep-all}
.fBottom label {position:absolute; left:0; top:0; display:inline-block; width:80px; color:#777}
.fWrap .copy {color:#777;}

.bta {background-image:url(../images/main/p1_arrow.png); background-repeat:no-repeat; background-position:right 40px center; background-size:20px; transition:0.2s}
.bta:hover {background-position:right 20px center; transition:0.3s;}

div > .titBox{width:1200px; margin:0 auto 60px; text-align:center; color:#fff;}
div > .titBox h2{margin-bottom:16px; font-size:42px; font-weight:800;}
div > .titBox h3{font-size:18px; line-height:24px;}

.titleBox{height:640px; padding-top:260px; text-align:center; color:#fff; background-size:cover; background-position:center;}
.titleBox h2{margin-bottom:26px; font-size:54px; font-weight:800; transform:matrix(1, 0, 0, 1, 0, 0)}
.titleBox h3{font-size:18px; line-height:28px;}

.bg {position:relative}
.bg:before {content:''; position:absolute; top:100px; left:45%; width:800px; height:800px; background:url(../images/sub/about_bg01.jpg) no-repeat; background-size:contain; z-index:-10}
.bg:after {content:''; position:absolute; top:900px; right:40%; width:800px; height:800px; background:url(../images/sub/about_bg02.jpg) no-repeat; background-size:contain; z-index:-10} 


/* mNav */
.mNav{width:100%; height:120px; padding-top:40px; text-align:right}
.mNav li{display:inline-block; position:relative; width:auto; height:40px; margin:0 10px; vertical-align:top; transition:ease .2s}
.mNav li > a{display:block; position:relative; width:100%; height:100%; padding:0 20px; font-size:18px; font-weight:400; text-align:center; line-height:40px; color:#fff; transition:ease .2s;}
.mNav ul:hover li > a{opacity:.6;}
.mNav ul li:hover {height:80px}
.mNav ul li:hover > a{opacity:1;}
.mNav ul li:hover > a:after {content:''; position:absolute; display:block; top:5px; right:5px; width:4px; height:4px; border:2px solid #009bd1; border-radius:50%}
.mNav ul:hover li > a:not(:hover){opacity:.6;}
.mNav ul li .sub {position:absolute; width:280px; bottom:0; left:0; padding-left:20px; text-align:left; display:none;}
.mNav ul li .sub a {display:inline-block; margin-right:20px; opacity:.6}
.mNav ul li .sub a:hover {opacity:1}
.mNav ul li:hover .sub {display:block; transition:ease .2s;}
.mNav a.on{opacity:1;}
.openPanel{display:none; width:40px; height:40px; background-image:url(../images/common/panel_btn.png); background-size:100% auto}
.sNav{position:absolute; top:40px; right:40px; width:auto; transition:ease .2s;}
.sNav li{float:left; padding:0 15px;}
.sNav a{display:inline-block; transition:ease .2s;}



/* scroll */
.sd{height:70px; background-color:rgba(0,0,0,0.6); transition:ease .3s;}
.sd .logo{top:20px;}
.sd .logo a {height:25px; background-size: auto 50px}
.sd .mNav{height:70px; padding-top:15px}
.sd .mNav ul:hover li a{opacity:.6;}
.sd .mNav ul li a:hover{opacity:1;}
.sd .mNav ul:hover li a:not(:hover){opacity:.6;}
.sd .mNav a.on{opacity:1;}
.sd .sNav{top:25px;}



/* works */
.works{width:100%; min-width:1200px;}
.works .con > div{width:1200px; margin:0 auto; padding:120px 0; overflow:hidden;}
.works .titleBox{background-image:url(../images/sub/works_bg.jpg);}
/* .works .titleBox h2:before{display:block; position:relative; left:-30px; content:'.....'; letter-spacing:24px; color:#07ace4;}
.works .mTxt{margin-bottom:160px; text-align:center; color:#fff;}
.works .mTxt h4{margin-bottom:30px; font-size:40px; font-weight:bold;}
.works .mTxt p{line-height:24px; opacity:.8;} */
.works ul{display:block;}
.works ul li{width:540px; float:left;}
.works ul li .pic {margin-bottom:20px; background-size:100%; background-repeat:no-repeat; background-position:center top; transition:ease .3s}
.works ul li .pic:hover {background-size:110%; transition:ease .5s}
.works ul li .web {padding-top:75%}
.works ul li .app {padding-top:100%; background-size:auto 100%}
.works ul li .app:hover {background-size:auto 110%}
.works ul li .eng{position:relative; height:40px; margin-bottom:20px; font-size:22px; font-weight:600; color:#07ace4;}
.works ul li .eng:after{display:block; position:absolute; top:40px; content:''; width:42px; height:2px; background-color:#07ace4;}
.works ul li:nth-child(even){float:right; text-align:left; transition-delay:.5s}
.works ul li:not(:first-child) {margin-top:100px}



/* about */
.about{width:100%; min-width:1200px;}
.about .con > div{width:1000px; margin:0 auto; padding:120px 0 0; overflow:hidden;}
.about .titleBox{background-image:url(../images/sub/about_bg.jpg);}
/* .about .titleBox h2:before{display:block; position:relative; left:72px; content:'... ..'; letter-spacing:20px; color:#07ace4;}
.about .mTxt{margin-bottom:160px; text-align:center; color:#fff;}
.about .mTxt h4{margin-bottom:30px; font-size:40px; font-weight:bold;}
.about .mTxt p{line-height:24px; opacity:.8;} */
.about ul{display:block;}
.about ul li{width:500px; margin-bottom:160px;}
.about ul li img{width:100%; margin-bottom:60px; border:2px solid #07ace4;}
.about ul li .eng{margin-bottom:20px; font-size:22px; font-weight:800; color:#07ace4;}
.about ul li .kor{position:relative; margin-bottom:70px; font-size:42px; font-weight:800; line-height:48px; letter-spacing:-1.2px; color:#07ace4;}
.about ul li .kor:after{display:block; position:absolute; top:120px; content:''; width:42px; height:2px; background-color:#07ace4;}
.about ul li:last-child{float:right; text-align:right;}
.about ul li:last-child .kor:after{right:0;}

.bnr{width:100%; background-color:#07ace4;}
.bnr > div{position:relative; width:1000px; margin:0 auto; padding:60px 0;}
.bnr p{font-size:40px; font-weight:bold; line-height:48px; letter-spacing:-1.2px;}
.bnr a{display:block; position:absolute; top:50%; right:0; width:220px; height:70px; margin-top:-35px; padding:0 30px; font-size:18px; line-height:68px; color:#fff; background-image:url(../images/main/p1_arrow.png); background-repeat:no-repeat; background-color:#10101f; background-size:20px; background-position:160px 25px; transition:0.3s; box-shadow:0 8px 20px rgba(16,16,31,0.4);}
.bnr a:hover{background-position:170px 25px; box-shadow:0 8px 24px rgba(16,16,31,0.6);}

/* request */
.request {width:100%; min-width:1200px;}
.request .titleBox{background-image:url(../images/sub/request_bg.jpg);}
.request .con {width:1200px; margin:0 auto; padding:120px 0; overflow:hidden;}
.request .con ul {float:left; width:50%; padding:0 10px}
.request .con ul:first-child li{width:100%; line-height:49px; color:#fff; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.5);}
.request .con ul:first-child li:last-child {border-bottom:none}
.request .con ul:first-child li label {float:left; display:inline-block; width:30%; color:#fff}
.request .con ul:first-child li input[type=text] {width:70%; background-color:transparent} 
.request .con ul:first-child li input::placeholder {color:rgba(255,255,255,.4);}/* 파이어폭스 51+, 크롬 57+ */
.request .con ul:first-child li select {width:70%; background-color:transparent}
.request .con ul:first-child li option{color:#111;}
.request .con ul textarea {width:100%; height:260px; padding:20px; color:#fff; border:1px solid rgba(255,255,255,.4); background-color:transparent;}
.request .con ul input[type=button] {width:100%; height:80px; color:#fff; font-size:22px; font-weight:bold; background-color:#07ace4;}


/* partnership */
.partner{width:100%; min-width:1200px;}
.partner .bg {background-position:20% 80%, 80% 10%; background-size:60%}
.partner .con > div{width:1100px; margin:0 auto; padding:120px 0; overflow:hidden;}
.partner .titleBox {background-image:url(../images/sub/partner_bg.jpg)}
.partner ul { min-height:540px; clear:both; margin-bottom:100px}
.partner ul > li {width:50%; float:left}
.partner ul > li.pic {width:40%; max-height:400px; border:2px solid #07ace4; overflow:hidden; margin-right:10%}
.partner ul > li.pic img {width:100%; vertical-align:top}
.partner ul:nth-child(even) > li {float:right}
.partner ul:nth-child(even) > li.pic {margin-left:10%; margin-right:0}
.partner ul h2 {position:relative; margin-bottom:70px; font-size:42px; font-weight:600; line-height:48px; letter-spacing:-1.2px; color:#07ace4;}
.partner ul h2:after {display:block; position:absolute; bottom:-20px; content:''; width:42px; height:2px; background-color:#07ace4;}
.partner ul > li  p {margin-bottom:20px}
.partner li {width:80%; word-break:keep-all}
.partner .bg:before {left:15%}



/* terms */
.terms{width:100%; min-width:1200px;}
.terms .con{width:1200px; margin:0 auto; padding:100px 0; overflow:hidden;}
.terms .titleBox{background-image:url(../images/sub/terms_bg.jpg)}
.terms .tab{width:100%; height:70px; margin-bottom:60px; border:1px solid rgba(255,255,255,.3);}
.terms .tab > li{float:left; width:33.33%; height:100%;}
.terms .tab > li:nth-child(1), .terms .tab > li:nth-child(2){border-right:1px solid rgba(255,255,255,.3);}
.terms .tab > li a{display:block; width:100%; height:100%; font-size:18px; text-align:center; line-height:64px; color:#888;}
.terms .tab > li.on a{border-bottom:4px solid #07ace4; font-weight:bold; color:#07ace4;}

.terms .conWrap > div{width:100%; overflow:hidden; color:#fff; display:none;}
.terms .conWrap .txt01{margin-bottom:60px; line-height:26px; color:#fff;}
.terms .conWrap .txtBox{width:100%; height:680px; padding:50px 40px; border:1px solid rgba(255,255,255,.3); background-color:rgba(0,0,0,.2); overflow-y:auto;}
.terms .conWrap .txtBox::-webkit-scrollbar{width:6px;}
.terms .conWrap .txtBox::-webkit-scrollbar-thumb{width:6px; background:rgba(255,255,255,.6); border-radius:8px;}
.terms .conWrap .txtBox > p{margin-bottom:60px; line-height:28px; color:rgba(255,255,255,.8);}
.terms .conWrap .txtBox > h3{margin-bottom:30px; font-size:18px; font-weight:bold;}
.terms .br{display:none;}



/* login */
.login{background-color:#f1f2f5;}
.login .subTitle{background-image:url(../images/sub/login_bg.jpg); background-size:cover;}
.login .titBox{padding:10% 0 6% 0;}
.login .titBox h2, .login .titBox h3{text-align:center; color:#fff;}
.login .conWrap{width:420px; margin:0 auto; padding:100px 0 120px 0; overflow:hidden;}
.login input::-webkit-input-placeholder {color:#aaa;}/* 크롬 4–56 */
.login input:-moz-placeholder {color:#aaa;}/* 파이어폭스 4–18 */
.login input::-moz-placeholder {color:#aaa;}/* 파이어폭스 19–50 */
.login input:-ms-input-placeholder {color:#aaa;}/* 인터넷 익스플로러 10+ */
.login input:placeholder {color:#aaa;}/* 파이어폭스 51+, 크롬 57+ */
.login .idWrap > input{float:left; width:100%; height:54px; margin-bottom:10px; padding-left:20px; font-size:14px; border:1px solid #ddd;}
.login #saveId{position:relative; top:3px; width:12px; height:12px; margin-right:10px;}
.login .idWrap label{font-size:14px; color:#aaa}
.login .chkWrap{text-align:right; margin-bottom:25px;}
.login #loginBtn{display:block; width:100%; height:56px; margin:20px 0; background-color:#fac00e; border:1px solid #e8b005; font-size:20px; text-align:center; line-height:56px; font-weight:700; color:#111;}
.login .searchWrap{text-align:center;}
.login .searchWrap li{display:inline; padding:0 20px; font-size:14px; color:#aaa; border-right:1px solid #ddd;}
.login .searchWrap li:last-child{border:none;}
.login .etcWrap{width:100%;}
.login .etcWrap li{float:left; width:100%; height:44px; margin-bottom:10px;}
.login .etcWrap li a{display:block; width:100%; height:100%; font-size:14px; color:#aaa; line-height:44px; background-color:#fff; border:1px solid #ddd;}
.login .etcWrap li a img{float:left; height:100%; margin-right:20px; border-right:1px solid #ddd;}



/* join */
.join input::-webkit-input-placeholder {color:#aaa;}/* 크롬 4–56 */
.join input:-moz-placeholder {color:#aaa;}/* 파이어폭스 4–18 */
.join input::-moz-placeholder {color:#aaa;}/* 파이어폭스 19–50 */
.join input:-ms-input-placeholder {color:#aaa;}/* 인터넷 익스플로러 10+ */
.join input:placeholder {color:#aaa;}/* 파이어폭스 51+, 크롬 57+ */
.join{background-color:#f1f2f5;}
.join .subTitle{background-image:url(../images/sub/login_bg.jpg); background-size:cover;}
.join .titBox{padding:10% 0 6% 0;}
.join .titBox h2 {text-align:center; color:#fff;}
.join .titBox h3 {text-align:center; color:#ddd;}
.join .conWrap{width:460px; margin:0 auto; padding:100px 0 120px 0; overflow:hidden;}
.join label{float:left; display:inline-block; width:25%; line-height:40px;}
.join input{width:75%; height:40px; margin-bottom:10px; padding-left:20px; font-size:14px; border:1px solid #ddd;}
.join #chk{position:relative; top:3px; width:12px; height:12px; margin-right:10px;}
.join #nick, .join #id{width:53%}
.join p{margin-bottom:20px;font-size:14px; color:#aaa; text-align:right;}
.join input[type=button]{float:right; width:20%; color:#aaa; padding:0; border:1px solid #ddd; background-color:#f9f9f9;}
.join #joinBtn{display:block; width:100%; height:56px; margin:40px 0 20px 0; background-color:#fac00e; border:1px solid #e8b005; font-size:20px; text-align:center; line-height:56px; font-weight:700; color:#111;}
.join .searchWrap{margin-bottom:50px; text-align:center;}
.join .searchWrap li{display:inline; padding:0 20px; font-size:14px; color:#aaa; border-right:1px solid #ddd;}
.join .searchWrap li:last-child{border:none;}



/* lost */
.lost{background-color:#f1f2f5;}
.lost .subTitle{background-image:url(../images/sub/login_bg.jpg); background-size:cover;}
.lost .titBox{padding:10% 0 6% 0;}
.lost .titBox h2, .lost .titBox h3{text-align:center; color:#fff;}
.lost .conWrap{width:480px; margin:0 auto; padding:100px 0 120px 0;}
.lost .btnWrap{width:100%; height:50px; margin-top:40px;}
.lost .btnWrap li{float:left; width:48%; height:50px; margin:0 1%;}
.lost .btnWrap li a{display:block; width:100%; height:100%; font-size:16px; text-align:center; line-height:50px; color:#333; border:1px solid #aaa;}
.lost .btnWrap li:last-child a{color:#fff; background-color:#333;}
.lost input::-webkit-input-placeholder {color:#aaa;}/* 크롬 4–56 */
.lost input:-moz-placeholder {color:#aaa;}/* 파이어폭스 4–18 */
.lost input::-moz-placeholder {color:#aaa;}/* 파이어폭스 19–50 */
.lost input:-ms-input-placeholder {color:#aaa;}/* 인터넷 익스플로러 10+ */
.lost input:placeholder {color:#aaa;}/* 파이어폭스 51+, 크롬 57+ */
.lost01{width:100%;}
.lost01 .tab{width:100%; height:50px; margin-bottom:60px;}
.lost01 .tab li{float:left; width:50%; height:100%; border-bottom:1px solid #ddd; text-align:center; line-height:47px;}
.lost01 .tab li a{display:block; width:100%; height:100%; color:#aaa;}
.lost01 .tab li.on a{border-bottom:3px solid #333; font-weight:500; color:#333;}
.lost01 label{display:inline; float:left; width:25%; font-size:16px; line-height:40px;}
.lost01 input, .lost01 select{float:left; width:75%; height:40px; margin-bottom:10px; padding-left:14px; border:1px solid #ddd; font-size:14px; font-weight:inherit; color:#888;}
.lost01 #phone, .lost01 #num{width:55%;}
.lost01 .conBtn{float:right; width:18%; height:40px; padding:0; border:1px solid #ddd; background-color:#f9f9f9; font-size:14px; text-align:center; line-height:38px; font-weight:500; color:#888;}
.lost02{text-align:center;}
.lost02 .tit{padding:30px 0; font-size:20px; font-weight:bold;}
.lost02 .informBox{width:100%; overflow:hidden; padding:40px 10%; border:1px solid #ddd; background-color:#fff;}
.lost02 .informBox li{float:left; width:50%;}
.lost02 h3{font-size:16px; line-height:30px;}
.lost02 p{font-size:18px; font-weight:bold; line-height:30px;}



/* mobile */
@media only screen and (max-width:640px){
     
    header{min-width:100%; height:70px} 
    header:after {top:60px}
    header .logo{position:absolute; top:20px; left:15px;}
	header.sd {background-color:rgba(0,0,0,0.8);}
    .openPanel{display:block; position:absolute; top:15px; right:10px; z-index:200}
    .panel{display:block; position:fixed; top:0; right:-80%; bottom:0; width:80%; padding-top:20%; background:#fff; z-index:100; transition:ease .2s}
    footer{width:100%; background-color:#10101f;}
    .fWrap{width:100%; padding:60px 15px;}
    .fTop a{margin-right:12px;}
    .fBottom ul{margin:30px 0 0;}
    .fBottom ul:first-child{width:100%; margin:0;}
	
    div > .titBox{width:100%;}
    div > .titBox h2{margin-bottom:14px; font-size:34px;}
    div > .titBox h3{font-size:18px;}
    
    .titleBox{height:320px; padding:100px 15px 0; text-align:left;}
	.titleBox h2{margin-bottom:20px; font-size:34px;}
	.titleBox h3{font-size:16px; line-height:22px;}
    
    
    
    /* scroll */
    header.sd > div{padding-top:0}
    header.sd .logo a{width:130px;}
    header.sd .mNav{float:none;}
    header.sd .sNav{top:30px; color:#666}
    
    
    
    /* mobileMenu */
	.mNav li{margin:0;}
	.mNav ul li:hover > a:after{top:20px; right:20px;}
    header.mob{bottom:0; height:auto; background-color:rgba(0,0,0,.7); z-index:100;}
    header.mob .openPanel{background-position:bottom;}
    header.mob .panel {right:0; transition:ease .2s}
    header.mob .panel .mNav{float:none; width:100%; height:auto; margin-bottom:30px;}
    header.mob .panel .mNav li{float:none; width:100%; height:60px; margin-left:0; padding:0 15px; line-height:60px; transition:none;}
    header.mob .panel .mNav li a{font-size:16px; text-align:left; line-height:60px; color:#000; border-bottom:1px solid #ddd;}
    header.mob .panel .sNav{position:block; top:auto; right:auto; width:100%; padding:0 10%;}
    header.mob .panel .sNav li{width:50%;}
    header.mob .panel .sNav li a{width:100%; text-align:center;}
	
	
	
    /* works */
    .works{min-width:0; background-image:none;}
    .works .con > div{width:100%; padding:80px 15px 0;}
	.works .titleBox h2:before{display:none;}
    /* .works .mTxt{margin-bottom:80px;}
    .works .mTxt h4{margin-bottom:30px; font-size:32px;} */
    .works ul li{width:100%; margin-bottom:80px;}
	.works ul li:not(:first-child){margin-top:0;}
	
	
	
	/* request */
    .request{min-width:0;}
    .request .con{width:100%; padding:60px 15px;}
    .request .con ul {width:100%;}
	.request .con ul textarea {height:180px}
	
	
	
    /* partnership */
	.partner {min-width:0}
	.partner .con > div {width:100%; padding:80px 15px;}
	.partner ul {width:100%; margin-bottom:100px;}
	.partner ul > li {width:100%}
	.partner ul > li.pic {width:100%; margin-right:0; margin-bottom:20px;}
	.partner ul:nth-child(even) > li.pic {margin-left:0}
	.partner ul > li.pic img {width:100%}
	.partner ul:nth-child(even) > li {float:none}
	.partner ul h2 {margin-bottom:50px; font-size:2em; line-height:1.2}
	
	
	
	/* about */
    .about{min-width:0; background-image:none;}
    .about .con > div{width:100%; padding:80px 15px 0;}
    .about .bg{min-width:0; background-image:none; overflow: hidden}
    .about .titleBox h2:before{display:none;}
    /* .about .mTxt{margin-bottom:80px;}
    .about .mTxt h4{margin-bottom:30px; font-size:32px;} */
    .about ul li{width:100%; margin-bottom:120px;}
    .about ul li img{margin-bottom:40px;}
    .about ul li .eng{font-size:20px;}
    .about ul li .kor{margin-bottom:54px; font-size:38px; line-height:42px;}
    .about ul li .kor:after{top:100px;}
    .bnr > div{width:100%; padding:80px 15px;}
    .bnr p{margin-bottom:40px; font-size:9vw; line-height:38px;}
    .bnr a{position:inherit; margin:0;}
	
	
	
    /* login */
    .login .conWrap{width:100%; padding:80px 20px;}
	
	
	
	/* join */
    .join .conWrap{width:100%; padding:40px 20px;}
	.join label {font-size:0.8em}
	
	
	
	/* lost */
	.lost .conWrap{width:100%; padding:40px 20px 80px;}
	.lost02 .informBox{padding:20px 0;}
	.lost02 .informBox li{width:100%;padding:10px 0;}
	.lost02 h3{font-size:16px; line-height:30px;}
	.lost02 p{font-size:18px; font-weight:bold; line-height:30px;}
	
	
	
	/* terms */
    .terms{min-width:0;}
    .terms .con{width:100%; padding:40px 15px 20px 15px; box-sizing:border-box;}
    .terms .titleBox{height:300px; padding-top:100px;}
    .terms .tab{width:100%; height:70px; margin-bottom:40px;}
    .terms .tab > li:nth-child(2) > a{line-height:36px;}
    .terms .tab > li a{font-size:16px; line-height:10px; padding:17px 0;}
    .terms .tab .br{display:block;}
    .terms .conWrap .txt01{margin-bottom:40px;}
    .terms .conWrap .txtBox{width:100%; height:460px; padding:30px 20px; font-size:12px; line-height:20px;}
	.terms .conWrap .txtBox > h3{margin-bottom:20px; font-size:18px; line-height:26px;}
	.terms .conWrap .txtBox > p{margin-bottom:40px; font-size:14px; line-height:24px;}
}