@charset 'utf-8';

/* font */
@font-face {
    font-family: 'NanumSquare';
    font-weight: 300;
    src: url('../font/NanumSquareL.eot');
    src: url('../font/NanumSquareL.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareL.woff') format('woff'),
         url('../font/NanumSquareL.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    font-weight: 400;
    src: url('../font/NanumSquareR.eot');
    src: url('../font/NanumSquareR.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareR.woff') format('woff'),
         url('../font/NanumSquareR.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    font-weight: 700;
    src: url('../font/NanumSquareB.eot');
    src: url('../font/NanumSquareB.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareB.woff') format('woff'),
         url('../font/NanumSquareB.ttf') format('truetype');
}

@font-face {
    font-family: 'NanumSquare';
    font-weight: 800;
    src: url('../font/NanumSquareEB.eot');
    src: url('../font/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
         url('../font/NanumSquareEB.woff') format('woff'),
         url('../font/NanumSquareEB.ttf') format('truetype');
}

@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 300;
	src: url('../font/ProximaNova-Thin.eot');
	src: local('ProximaNova Thin'), local('ProximaNova-Thin'), url('../font/ProximaNova-Thin.ttf') format('truetype');
}

@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 400;
	src: url('../font/ProximaNova-Regular.eot');
	src: local('ProximaNova Regular'), local('ProximaNova-Regular'), url('../font/ProximaNova-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 500;
	src: url('../font/ProximaNova-Semibold.eot');
	src: local('ProximaNova Semibold'), local('ProximaNova-Semibold'), url('../font/ProximaNova-Semibold.ttf') format('truetype');
}

@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 600;
	src: url('../font/ProximaNova-Bold.eot');
	src: local('ProximaNova Bold'), local('ProximaNova-Bold'), url('../font/ProximaNova-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'ProximaNova';
    font-weight: 700;
    src: local('ProximaNova Black'),
    url('../font/ProximaNova-Black.woff2') format('woff2'),
    url('../font/ProximaNova-Black.woff') format('woff'),
    url('../font/ProximaNova-Black.ttf') format('truetype');
}

/* normalize */
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, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video { margin:0; padding:0; border:0; background:transparent; font-weight:normal;}
input, select, textarea, button { font:inherit; color:inherit; font-family: 'Spoqa Han Sans', sans-serif, Dotum, '돋움', arial; border:none; background-color:#fff; }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display:block;}
ul, ol, li{ list-style:none;}
em{font-style:normal;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
ins { text-decoration:underline;}
del { text-decoration:line-through;}
mark { background:none;}
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help;}
table { border-spacing:0; border-collapse:seperate;}
table caption{ font-size:0; line-height:0;}
hr { display:none;}
img {font-size:0; line-height:0; border:0 none;}
input, button, select, img { vertical-align:middle;}
button { position:relative; background:none; border:0 none; cursor:pointer; font-family:inherit; margin:0; padding:0; outline:none;}
button * { margin:0; padding:0;}
button::-moz-focus-inner { padding:0; border:0;}
a { text-decoration:none; margin:0; padding:0; color:#666;}
a:link, a:visited, a:hover{text-decoration:none}
textarea { margin:0; padding:0; vertical-align:middle;}
textarea:focus, input:focus {outline: none;}
* { box-sizing:border-box;}

/* layout */
html{width:100%; height:100%; outline:none;}  
body{font-family:'Roboto Mono', Arial,serif; font-size:14px; font-weight:400; color:#fff; line-height:26px; text-align:left; margin:auto; width:100%; outline:0; overflow-x:hidden;}
.wrap{position:relative; width:100%; height:100%;}
.header.full{position:fixed!important; top:0; width:100%; height:100%!important; z-index:10000!important; background:#fff;}
.header.full .header-title{font-size:88px;}
.header{position:fixed; width:100%; height:108px; border-bottom:2px solid #ed1c24; z-index:1; transition:all .3s cubic-bezier(.81,.4,.24,.75);}
.header .in{height:100%; margin:0 auto;}
.header .logo{display:none; opacity:0;}
.header .logo.show{display:inline-block; margin:40px 0; padding:0; opacity:1; transition:.3s; padding-left:140px;}
.header .logo a{font-family:'ProximaNova', sans-serif; font-style:normal; font-weight:650; color:#ed1c24; font-size:17px;}
.header-title{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:48px; line-height:1; transition:.5s; font-family:'ProximaNova', sans-serif; font-style:normal; font-weight:700; color:#ed1c24; font-size:30px;}
.header-title span{position:absolute; top:0; right:-10px; width:0; height:88px; background:#ed1c24; box-sizing:border-box; animation:typing .8s steps(30,end),blink-caret 2s step-end infinite;}
@keyframes typing {
    from { width: 100% }
    to { width:0 }
}
@-webkit-keyframes typing {
    from { width: 100% }
    to { width:0 }
}
@-moz-keyframes typing {
    from { width: 100% }
    to { width:0 }
}

html{overflow:hidden!important;}
body{background:url("../img/bg.png"); background-size:auto 100%; background-position:center center; background-attachment:fixed;}

/* project */
.relative{position:relative; display:block; width:100%; height:100%;}
#project {background-size:100% auto; background-attachment: fixed; width: 100%; height: auto; z-index: 50;}
#project article {display:block; width: 1400; text-align: left; overflow: hidden;  }
#project article ul {font-family:"NanumSquare", sans-serif; position: absolute; left: 0; top: 50%; width: 130%; height:696px; overflow: hidden; transform: translate3D(0, -270px, 0); text-align: left; font-size: 0; padding-left:3%; z-index: 99;  }
#project article ul li {position:relative; display: block; width:440px; height:696px; float: left; box-sizing: border-box; line-height: 175%; overflow: hidden; font-size: 11px; /*border-left:1px solid #cdcdcd;*/}
#project article ul li .relative:after {content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: rgba(205, 205, 205, 1);}
#project article ul li div {position:absolute;}
#project article ul li .ex_count {font-size:17px; line-height:1; font-weight:800; left:30px; top:500px; color:#333;}
#project article ul li .ex_client {width: 320px; font-size:14px; line-height:1; color:#333; font-weight:400; left:30px; top:530px; opacity: 1; }
#project article ul li .ex_tit {width:380px; font-size:20px; line-height:1.2; left:30px; top:555px; color:#333; font-weight:800; opacity:1; /*text-transform:uppercase;*/}
#project article ul li .ex_brief {/*width:470px;*/ width:382px; font-size:13px; line-height:1.7; color:#333; left:0; top:552px; /*margin-left:320px;*/ margin-left:380px;  opacity:1; word-wrap:normal; word-break:keep-all;}
#project article ul li .ex_brief dl dd{font-weight:400; padding-left:70px;}
#project article ul li .ex_brief dl dd span{position:absolute; left:0;}
#project article ul li .ex_image {position:absolute; width:379px; height:257px; left:30px; top:224px; background-size: auto 100%; background-position: center center; background-repeat: no-repeat;}
#project article ul li .ex_image .relative {border: 1px solid #06378e; opacity: .05; border-radius: 2px; box-sizing: border-box;}
#project article ul li .ex_award {right: 10px; top: 105px; width: 40px; height: 50px; background-size: 40px 50px; background-repeat: no-repeat;}

#project article ul li#thepodsix .ex_award { width: 90px; background-position: 0 0, 50px 0; }

#project article ul li.active { width: 538px;}
#project article ul li.active .ex_image { width: 517px; height: 428px; top: 10px;}
#project article ul li.active .ex_client { opacity: 1;}
#project article ul li.active .ex_tit { font-size: 17px; left: 20px; top: 475px;} 
#project article ul li.active .ex_brief { opacity: 1;}
#project article ul li.active .ex_award { top: 495px; }
#project article ul li#exNum_start{border-left:1px solid #cdcdcd;}
#project article ul li#exNum_start .ex_count{width:auto; color:#333; font-size:17px; line-height:1; font-weight:800; left:30px; top:655px;}

#project .scroll_unit{position:relative; width:100%; height:600px;}
/* .scroll_unit1{height:200px;} */

/* 프로젝트별 이미지 */
#project article ul li .ex_image {background:url("../img/img_no.png") no-repeat; background-size:cover;}
#project article ul li .ex_award {display:none;}

#project article ul li#exNum_start .ex_image{background:url("../img/img_pr_nh2.png") no-repeat;}
/* #project article ul li#pr-li-33 .ex_image{background:url("../img/img_pr_.png") no-repeat; background-size:cover;} */
#project article ul li#pr-li-32 .ex_image{background:url("../img/img_pr_samsung.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-31 .ex_image{background:url("../img/img_pr_nh.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-30 .ex_image{background:url("../img/img_pr_samsung2.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-29 .ex_image{background:url("../img/img_pr_kt.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-28 .ex_image{background:url("../img/img_pr_dw.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-27 .ex_image{background:url("../img/img_pr_hanwha.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-26 .ex_image{background:url("../img/img_pr_skb.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-25 .ex_image{background:url("../img/img_pr_2cl.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-24 .ex_image{background:url("../img/img_pr_lotte.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-23 .ex_image{background:url("../img/img_pr_stx.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-22 .ex_image{background:url("../img/img_pr_kuk.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-21 .ex_image{background:url("../img/img_pr_kuknews.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-20 .ex_image{background:url("../img/img_pr_korail2.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-19 .ex_image{background:url("../img/img_pr_korail.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-18 .ex_image{background:url("../img/img_no.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-17 .ex_image{background:url("../img/img_pr_skpdms.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-16 .ex_image{background:url("../img/img_pr_nurse1.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-15 .ex_image{background:url("../img/img_pr_nurse2.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-14 .ex_image{background:url("../img/img_pr_sqms.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-13 .ex_image{background:url("../img/img_pr_vibrio.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-12 .ex_image{background:url("../img/img_pr_anf.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-11 .ex_image{background:url("../img/img_pr_iq.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-10 .ex_image{background:url("../img/img_pr_me2.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-9 .ex_image{background:url("../img/img_pr_shinhan.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-8 .ex_image{background:url("../img/img_pr_easy.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-7 .ex_image{background:url("../img/img_pr_btoher.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-6 .ex_image{background:url("../img/img_pr_navien.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-5 .ex_image{background:url("../img/img_pr_aibril.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-4 .ex_image{background:url("../img/img_no.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-3 .ex_image{background:url("../img/img_pr_o2job.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-2 .ex_image{background:url("../img/img_pr_me.png") no-repeat; background-size:cover;}
#project article ul li#pr-li-1 .ex_image{background:url("../img/img_no.png") no-repeat; background-size:cover;}

#project article ul li#exNum_start .ex_count:after {content:''!important; }
#project article ul li .ex_count.arr:after{display:block; width:24px; height:20px; content: ""; background:url("http://www.odden.co.kr/img_odden/ex_start_arrow.png") no-repeat;}

.btn-first{width:170px; height:82px; position:fixed; bottom:22px; right:152px; color:#000; background:url("../img/btn_first.png") no-repeat; text-indent:-9999px; z-index:99;}

.type-pc{display:block;}
.type-mo{display:none;}

/* 태블릿 */
@media (max-width: 1024px){
    html,
    body{overflow-x:hidden!important; overflow-y:auto!important;}
    body{background-size:cover!important;}
    .header{position:absolute;}
    .header .logo.show{padding-left:55px;}
    .type-pc{display:none;}
    .type-mo{display:block;}
    .header{height:108px;}
    .header.full .header-title{font-size:88px;}
    .header-title{font-size:40px}
    .header-title span{height:88px;}
    .header .logo a{font-size:26px;}
    .header .logo.show{padding-left:30px; margin:39px 0;}

    .project-slide-wrap{padding-top:108px;}
    /* .pr-item{background:yellow;} */
    .card{font-family:"NanumSquare", sans-serif; width:100%; height:100%; padding:46px 0; background:#fff; border-radius:10px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);}
    .card .pr-type{font-size:28px; color:#333; padding:0 30px; line-height:1;}
    .card .pr-tit{font-size:42px; line-height:1.2; color:#333; font-weight:800; margin:16px 0 50px 0; padding:0 30px;}
    .card .bg-pr-item{min-height:176px; /*background:url("../../assets/img/img_pr_samsung.png") no-repeat; background-size:100% auto;*/}
    .card dl{margin-top:50px; padding:0 30px;}
    .card dl dd{position:relative; font-size:26px; color:#333; padding-left:140px; line-height:1.5; margin:8px 0;}
    .card dl dd span{position:absolute; left:0;}

    /* slick */
    .slick-track{min-height:calc(100vh - 108px);}
    .slick-slide{padding:40px 30px;}
    .slick-slide:focus{outline:none;;}
    .slick-slide img{width:100%; height:auto;}
    .slick-arrow{z-index:1; width:55px; height:110px;}
    .slick-prev{left:0; background:url("../../assets/img/slick-prev.png") no-repeat;}
    .slick-next{right:0; background:url("../../assets/img/slick-next.png") no-repeat;}
    .slick-prev:before,
    .slick-next:before{display:none;}
    .slick-prev:hover, 
    .slick-prev:focus{background:url("../../assets/img/slick-prev.png") no-repeat;}
    .slick-next:hover, 
    .slick-next:focus{background:url("../../assets/img/slick-next.png") no-repeat;}

    /* .btn-top{position:fixed; right:30px; bottom:30px; width:100px; height:100px; background:#fff; border-radius:50%; box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);}
    .btn-top span{display:block; width:47px; height:63px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background:url("../../assets/img/btn_top.png") no-repeat;} */
    .btn-first-mo{width:170px; height:82px; position:absolute; bottom:22px; right:20px; color:#000; background:url("../img/btn_first.png") no-repeat; text-indent:-9999px; z-index:99;}
    .skrollr{touch-action:none;}
}

/* 모바일 */
@media (max-width: 767px){
    .header{height:54px;}
    .header.full .header-title{font-size:44px;}
    .header-title{font-size:20px}
    .header-title span{height:44px;}
    .header .logo a{font-size:13px;}
    .header .logo.show{padding-left:15px; margin:13px 0;}

    .project-slide-wrap{padding-top:54px;}
    /* .pr-item{background:yellow;} */
    .card{font-family:"NanumSquare", sans-serif; width:100%; height:100%; padding:23px 0; background:#fff; border-radius:10px; box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);}
    .card .pr-type{font-size:14px; color:#333; padding:0 15px;}
    .card .pr-tit{font-size:21px; color:#333; font-weight:800; margin:8px 0 20px 0; padding:0 15px;}
    .card .bg-pr-item{min-height:176px; /*background:url("../../assets/img/img_pr_samsung.png") no-repeat; background-size:100% auto;*/}
    .card dl{margin-top:25px; padding:0 15px;}
    .card dl dd{position:relative; font-size:13px; color:#333; padding-left:70px; line-height:1.5; margin:4px 0;}
    .card dl dd span{position:absolute; left:0;}

    /* slick */
    .slick-track{min-height:calc(100vh - 54px);}
    .slick-slide{padding:20px 15px;}
    .slick-slide img{width:100%; height:auto;}
    .slick-arrow{z-index:1; width:30px; height:60px;}
    .slick-prev{left:0; background:url("../../assets/img/slick-prev.png") no-repeat; background-size:30px auto;}
    .slick-next{right:0; background:url("../../assets/img/slick-next.png") no-repeat; background-size:30px auto;}
    .slick-prev:before,
    .slick-next:before{display:none;}
    .slick-prev:hover, 
    .slick-prev:focus{background:url("../../assets/img/slick-prev.png") no-repeat; background-size:30px auto;}
    .slick-next:hover, 
    .slick-next:focus{background:url("../../assets/img/slick-next.png") no-repeat; background-size:30px auto;}

    /* .btn-top{right:15px; bottom:15px; width:50px; height:50px;}
    .btn-top span{width:25px; height:41px; background-size:25px auto; margin-top:2px;} */
    .btn-first-mo{width:140px; height:52px; bottom:22px; right:10px; color:#000; background:url("../img/btn_first.png") no-repeat center; background-size:140px auto;}

}
@media (max-width: 380px){
    .card .pr-tit{font-size:17px;}
}