@charset "utf-8";

/* NotoKr */
@font-face{font-weight:400; font-family:'NotoKr'; src:url('../../common/fonts/NotoSansKR-Regular.woff2') format('woff2'), url('../../common/fonts/NotoSansKR-Regular.woff') format('woff');}
@font-face{font-weight:500; font-family:'NotoKr'; src:url('../../common/fonts/NotoSansKR-Medium.woff2') format('woff2'), url('../../common/fonts/NotoSansKR-Medium.woff') format('woff');}
@font-face{font-weight:600; font-family:'NotoKr'; src:url('../../common/fonts/NotoSansKR-Bold.woff2') format('woff2'), url('../../common/fonts/NotoSansKR-Bold.woff') format('woff');}
/* Roboto */
@font-face{font-weight:400; font-family:'Roboto'; src:url('../../common/fonts/Roboto-Regular.woff') format('woff');}
@font-face{font-weight:500; font-family:'Roboto'; src:url('../../common/fonts/Roboto-Medium.woff') format('woff');}
@font-face{font-weight:600; font-family:'Roboto'; src:url('../../common/fonts/Roboto-Bold.woff') format('woff');}

/* Roboto */
.roboto{font-family:'Roboto','NotoKr',sans-serif !important; letter-spacing:0;}

/* default */
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
audio,canvas,progress,video{display:inline-block}
article,aside,audio,blockquote,body,canvas,caption,dd,details,div,dl,dt,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,legend,li,main,menu,nav,ol,p,pre,section,summary,table,tbody,td,template,textarea,tfoot,th,thead,tr,ul,video{margin:0; padding:0; border:0; font-size:inherit; font-family:inherit; box-sizing:border-box;word-break:break-all}
a,em,span{display:inline-block; margin:0; padding:0; box-sizing:border-box}
a:active,a:hover,a:link,a:visited{color:#444; text-decoration:none}
b,strong{font-weight:600}
address,cite,dfn,em,i{font-style:normal}
img{border:none; vertical-align:middle}
audio,img,video{max-width:100%;}
label{display:inline-block; cursor:pointer}
summary{display:list-item; cursor:pointer}
ul,ul>li{list-style:none}
table{width:100%; border-collapse:collapse; border-spacing:0}
caption{overflow:hidden; position:relative; top:0; left:0; width:1px; height:1px; background:0 0; color:transparent; font-size:0; line-height:0; text-indent:100%}
:after,:before{display:none; content:''}
button,input,optgroup,select,textarea{margin:0; padding:0; border:0 solid; color:inherit; font-size:inherit; font-family:inherit; line-height:inherit; box-sizing:border-box;vertical-align:middle}
button,input,select{display:inline-block}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{overflow:visible; border-color:transparent; background-color:transparent; cursor:pointer}
textarea{display:block; overflow:auto; resize:vertical}
input[disabled]{background-color:#ebebeb}
select:disabled{background-color:#ebebeb}
.skip{overflow:hidden; position:absolute; width:1px; height:1px; background:0 0; color:transparent!important; font-size:0!important; line-height:0}
.slick-slider{position:relative;}
.slick-list{overflow:hidden; position:relative; z-index:1;}
.slick-track{position:relative; top:0; left:0; margin-right:auto; margin-left:auto;}
.slick-track:after,.slick-track:before{display:table;}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left;}
.slick-slide.slick-loading img{display:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;}
.slick-arrow{transition:opacity .25s ease-in-out;}
.slick-arrow.slick-disabled{opacity:0;}
html{-webkit-text-size-adjust:none;}

/* layout */
body,html{position:relative; height:100vh;}
body{margin:0; padding:0; background:#fff; color:#757575; font-size:0; font-weight:400; font-family:'NotoKr',sans-serif; line-height:0; letter-spacing:-.035em;}
#wrapper{overflow:hidden; position:relative; width:100%; min-height:100vh;}
#container{position:relative; z-index:10; min-height:100vh; margin:0 auto;}
.wrap{position:relative; max-width:1320px; margin:0 auto; padding:0 100px;}

/* header */
#header{position:absolute; top:50px; left:0; right:0; z-index:20; max-width:1320px; height:100px; margin:0 auto; padding:21px 83px 21px 42px; text-align:right; transition-property:position,top,height,padding,transform;transition-duration:.5s;transition-timing-function:ease-in-out;}
#header:before{display:block; opacity:.8; position:absolute; top:0; left:50%; bottom:0; z-index:-1; width:100vw; max-width:1320px; background:linear-gradient(to right, #5ea2ef, #d12e9c); transition:all .15s ease-in-out;transform:translateX(-50%);}
#header h1{float:left;}
#header h1 a{display:block; position:relative; width:103px; height:58px;}
#header h1 a:before,#header h1 a:after{display:block; opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-size:auto 100%; transition:opacity .2s ease-in-out;}
#header h1 a:before{opacity:1; background-image:url(../../images/common/logo_w.png);}
#header h1 a:after{background-image:url(../../images/common/logo_c.png);}
#header .menu{display:inline-block; font-family:'Roboto','NotoKr',sans-serif !important; letter-spacing:0;}
#header .menu .menu_btn{display:none;}
#header .menu .menu_box{position:relative; padding:10px 0; transition:padding .25s ease-in-out;}
#header .menu .menu_list{display:inline-block; vertical-align:top;}
#header .menu .menu_item{display:inline-block; vertical-align:top;}
#header .menu .menu_item a{display:block; padding:0 20px; color:#fff; font-size:16px; font-weight:500; line-height:38px; transition:all .25s ease-in-out;}
#header .menu .lang_box{position:relative;}
#header .menu .menu_lang{display:inline-block; width:34px; height:20px; margin:9px 0 0 30px; border:1px solid #fff; border-radius:5px; color:#fff; font-size:12px; text-align:center; line-height:18px; vertical-align:top;}
#header .menu .lang_list{opacity:0; visibility:hidden; position:absolute; top:22px; right:0; padding:5px 0; border:1px solid #fff; border-radius:5px; background-color:rgba(0,0,0,.1); text-align:center; transition-property:opacity,visibility,top;transition-duration:.25s;transition-timing-function:ease-in-out;}
#header .menu .lang_list.active{opacity:1; visibility:inherit; top:32px;}
#header .menu .lang_list li{}
#header .menu .lang_list li a{width:33px; color:#fff; font-size:12px; line-height:20px;}
#header.fixed{position:fixed; top:0; height:80px; padding-top:11px; padding-bottom:11px;}
#header.fixed:before{opacity:1; max-width:100vw; border-bottom:1px solid #eee; background:#fff;}
#header.fixed h1 a:before{opacity:0;}
#header.fixed h1 a:after{opacity:1;}
#header.fixed .menu .menu_item a{color:#444;}
#header.fixed .menu .menu_lang{border-color:#444; color:#444;}
#header.fixed .menu .lang_list{border-color:#444; background-color:#fff;}
#header.fixed .menu .lang_list li a{color:#444;}

/* footer */
#footer{padding:60px 10px; background-color:#282828; text-align:center;}
#footer address{color:#fff; font-size:12px; line-height:18px; word-break:keep-all;}
#footer .list{margin-top:25px;}
#footer .list li{display:inline-block; margin:0 15px; color:#fff; font-size:12px; line-height:18px; vertical-align:top; word-break:keep-all;}
#footer .copyright{margin-top:40px; color:#909090; font-size:12px; font-family:'Roboto','NotoKr',sans-serif !important; line-height:18px; word-break:keep-all;letter-spacing:0;}

/* common */
.section{position:relative; padding-top:125px; padding-bottom:100px; text-align:center;}
.section h2{color:#55565b; font-size:48px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:56px; letter-spacing:0;}
.section .text{margin-top:15px; font-size:16px; line-height:30px; word-break:keep-all;}
.btn_more{padding:0 57px 0 27px; border:2px solid #55565b; background:url(../../images/main/more_arrow01.png) no-repeat right 16px center; color:#55565b; font-size:24px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:68px; transition:background-position .25s ease-in-out;letter-spacing:0;}
.btn_more:hover{background-position:right 12px center;}
.btn_more.white{border-color:#fff; background-image:url(../../images/main/more_arrow02.png); color:#fff;}
.banner{background:url(../../images/common/banner_bg.jpg) no-repeat center / cover;background-attachment:fixed;padding-left: 10px;padding-right: 10px;}
.banner h2{color:#fff;font-family:'NotoKr',sans-serif !important;line-height:65px;word-break: keep-all;}
.banner .btn{margin:48px auto 0 auto; padding:0 45px; border-radius:20px; background-color:#da4187; color:#fff; font-size:16px; font-weight:600; line-height:40px;}
.visual{position:relative; height:700px; background-repeat:no-repeat; background-position:center; background-size:cover;}
.visual .visual_box{position:absolute; top:calc(50% + 47px); left:0; right:0; color:#fff; transform:translateY(-50%);}
.visual .visual_title{font-size:60px;font-weight:600;line-height:72px;word-break: keep-all;}
.visual .visual_text{margin-top:20px; padding:0 10px; color:#f2f2f2; font-size:16px; line-height:30px; word-break:keep-all;}

/* main */
.main .section.n0{overflow:hidden; position:relative; padding:0;}
.main .section.n0 video{width:100%; margin:-5% 0 -4% 0;}
.main .section.n0 .visual_text{position:absolute; top:calc(50% + 47px); left:0; right:0; color:#fff; font-size:72px; line-height:74px; transform:translateY(-50%);letter-spacing:.2em;word-break:keep-all;}
.main .section.n1{border-bottom:1px solid #e2e1e1;}
.main .section.n1 .list{margin-top:55px;}
.main .section.n1 .list li{display:inline-block; overflow:hidden; position:relative; width:31.25%; border-radius:27px; box-shadow:0 18px 29px rgba(67,130,179,.61); vertical-align:top; transition:transform .25s ease-in-out;}
.main .section.n1 .list li:nth-child(2){margin:0 3.125%;}
.main .section.n1 .list li img{width:100%; transition:transform .25s ease-in-out;}
.main .section.n1 .list li div{position:absolute; top:0; left:0; right:0; padding:48px 0 40px 0; background-color:rgba(0,0,0,.6);}
.main .section.n1 .list li div span{color:#fff; font-size:30px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:32px; letter-spacing:0;}
.main .section.n1 .list li div p{margin-top:21px; color:#fff; font-size:15px; font-weight:600; line-height:17px;}
.main .section.n1 .list li:hover{transform:translateY(-20px);}
.main .section.n1 .list li:hover img{transform:scale(1.1);}
.main .section.n1 .btn_more{margin-top:100px;}
.main .section.n2{padding-bottom:30px; border-top:1px solid #fff; background-color:#f5f3f6;}
.main .section.n2:before{display:block; position:absolute; left:0; right:0; bottom:0; z-index:1; height:250px; background:linear-gradient(to top, #000 12%, transparent 100%);}
.main .section.n2 .list{margin-top:90px;}
.main .section.n2 .list .bx-viewport{height:442px !important;}
.main .section.n2 .list li{height:100%;}
.main .section.n2 .list li img{width:auto !important; max-width:inherit; max-height:inherit;}
.main .section.n2 .btn_more{position:absolute; left:50%; bottom:100px; z-index:2; transform:translateX(-50%);}
.main .section.n3 .wrap{padding:0;}
.main .section.n3 h2{text-align:left;}
.main .section.n3 .list{margin:35px -25px 0 -25px;}
.main .section.n3 .slick-list{overflow:visible;}
.main .section.n3 .slick-arrow{position:absolute; top:calc(42% - 40px); z-index:2; width:40px; height:80px; background:url(../../images/main/portfolio_arrow.png) no-repeat center / 100%;}
.main .section.n3 .slick-arrow.slick-prev{left:35px;}
.main .section.n3 .slick-arrow.slick-next{right:35px; transform:rotate(180deg);}
.main .section.n3 .item{margin:0 25px;}
.main .section.n3 .item .img{width:100%;}
.main .section.n3 .item .tag{margin-top:-12px; padding:0 23px; text-align:left;}
.main .section.n3 .item .tag li{display:inline-block; width:100px; margin-right:9px; border-radius:9px; background-color:#f85f2f; color:#fff; font-size:18px; font-weight:500; font-family:'Roboto','NotoKr',sans-serif !important; text-align:center; line-height:24px; vertical-align:top; letter-spacing:0;}
.main .section.n3 .item .tag li:last-child{margin-right:0;}
.main .section.n3 .item .title{margin-top:20px; padding:0 20px; color:#55565b; font-size:30px; font-weight:600; line-height:32px;}
.main .section.n3 .item .text1{margin-top:10px; padding:0 20px; color:#282828; font-size:16px; line-height:24px; word-break:keep-all;}
.main .section.n3 .item .text2{margin-top:20px; padding:0 20px; font-size:14px; line-height:24px; word-break:keep-all;}
.main .section.n3 .btn_more{margin-top:65px;}
.main .section.n5{padding-top:115px; padding-bottom:0; background-color:#282828;}
.main .section.n5 .wrap{padding:0; border-bottom:1px solid #383838;}
.main .section.n5 .wrap:before{display:block; position:absolute; left:0; right:0; bottom:0; height:1px; background-color:#151518;}
.main .section.n5 h2{color:#c8c8c8;}
.main .section.n5 .list{margin-top:12px; padding-bottom:30px; text-align:left;}
.main .section.n5 .list li{display:inline-block; width:20%; margin-top:12px; text-align:center; vertical-align:top;}

/* about */
.about .section.n0{overflow:hidden; position:relative; padding:0;}
.about .section.n0 video{width:100%; margin:-5% 0 -4% 0;}
.about .section.n0 .visual_box{position:absolute; top:calc(50% + 47px); left:0; right:0; color:#fff; transform:translateY(-50%);}
.about .section.n0 .visual_title{font-size:60px; font-weight:600; line-height:72px; word-break:keep-all;}
.about .section.n0 .visual_text{margin-top:20px; padding:0 10px; color:#f2f2f2; font-size:16px; line-height:30px; word-break:keep-all;}
.about .section.n1{padding-top:40px; padding-bottom:160px; background-color:#080808;}
.about .section.n1 h2{color:#dadada;}
.about .section.n1 .list{margin:40px -20px 0 -20px; font-size:0; line-height:0;}
.about .section.n1 .slick-list{overflow:visible;}
.about .section.n1 .list li{display:block; opacity:.34; overflow:hidden; margin:0 20px; border-radius:5px; transition:all .25s ease-in-out;}
.about .section.n1 .list li.slick-active{opacity:1;}
.about .section.n1 .list li:hover{box-shadow:0 10px 20px rgb(0 0 0);}
.about .section.n1 .list li .img{display:block; overflow:hidden;}
.about .section.n1 .list li .img img{width:100%;}
.about .section.n1 .list li .box{display:block; position:relative; padding:15px 25px; background-color:#1f1f1f; text-align:left;}
.about .section.n1 .list li .box .logo{position:relative; float:right; height:0; margin:-28px -18px 0 0;}
.about .section.n1 .list li .box .subject{display:-webkit-box; overflow:hidden; height:60px; color:#ececec; font-size:20px; font-weight:600; line-height:30px; white-space:normal; word-break:keep-all; word-wrap:break-word;-webkit-box-orient:vertical; -webkit-line-clamp:2;}
.about .section.n1 .list li .box .text{display:-webkit-box; overflow:hidden; height:36px; margin-top:10px; color:#a2a1a1; font-size:14px; line-height:18px; white-space:normal; word-break:keep-all; word-break:keep-all; word-wrap:break-word;-webkit-box-orient:vertical; -webkit-line-clamp:2;}
.about .section.n1 .list li .box .date{margin-top:20px; color:#a1a1a1; font-size:12px; line-height:14px;}
.about .section.n1 .list li .box a{position:absolute; right:17px; bottom:14px; width:40px;}
.about .section.n1 .list li .box a img{width:100%;}
.about .section.n1 .slick-arrow{opacity:1 !important; position:absolute; bottom:-65px; width:45px; height:45px; border:0; background-color:transparent;}
.about .section.n1 .slick-arrow:before{display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:11px; height:11px; margin:auto; border-top:1px solid #b5b5b5; border-right:1px solid #b5b5b5;}
.about .section.n1 .slick-prev{left:5px;}
.about .section.n1 .slick-prev:before{transform:rotate(-135deg);}
.about .section.n1 .slick-next{left:50px;}
.about .section.n1 .slick-next:before{transform:rotate(45deg);}
.about .section.n2{background-color:#1f1f1f;}
.about .section.n2 h2{color:#dadada;}
.about .section.n2 .list{margin:15px -7px 0 -7px; text-align:center;}
.about .section.n2 .list > li{display:inline-block;width:23.76%;margin:0 .62%;vertical-align: top;}
.about .section.n2 .list > li:nth-child(1),
.about .section.n2 .list > li:nth-child(4){padding-top:120px;}
.about .section.n2 .list li .box{position:relative; margin:20px 0; padding:14px 14px 36px 14px; border-radius:10px; background-color:#373737; text-align:left;}
.about .section.n2 .list li .box .img{overflow:hidden; border-radius:10px;}
.about .section.n2 .list li .box .img img{width:100%;}
.about .section.n2 .list li .box .tag{margin-top:13px; margin-right:-5px;}
.about .section.n2 .list li .box .tag li{display:inline-block; margin:0 5px 5px 0; padding:0 10px; border-radius:10px; background-color:#e8e8e8; color:#55565b; font-size:12px; font-weight:600; line-height:20px; letter-spacing:-0.04em; transition:all .25s ease-in-out;}
.about .section.n2 .list li .box .name{margin-top:15px; color:#dadada; font-size:18px; font-weight:600; line-height:20px;}
.about .section.n2 .list li .box .bio{overflow:hidden; max-height:54px; margin-top:12px; color:#aaa; font-size:13px; line-height:18px; word-break:keep-all; transition:max-height .75s;}
.about .section.n2 .list li .box .more{position:absolute; right:14px; bottom:10px;}
.about .section.n2 .list li .box .more:before{display:block; padding:0 4px 4px 4px; border-bottom:1px solid #797979; content:'더보기'; color:#aaa; font-size:12px; line-height:14px;}
.about .section.n2 .list li .box.active .bio{max-height:300px;}
.about .section.n2 .list li .box.active .more:before{content:'짧게보기';}

/* production */
.production .visual{background-image:url(../../images/production/visual_bg.jpg);}
.production .section.n1{border-bottom:1px solid #f1f1f1; background:url(../../images/production/production_bg01.jpg) no-repeat right top, url(../../images/production/production_bg02.jpg) no-repeat left bottom;}
.production .section.n1 .wrap{padding:0;}
.production .section.n1 .list{margin-top:45px;}
.production .section.n1 .list li{display:inline-block; max-width:420px; margin:10px; vertical-align:top;}
.production .section.n1 .list li .img{box-shadow:0 0 10px rgba(206,40,118,.29);}
.production .section.n1 .list li:nth-child(n + 4) .img{box-shadow:0 0 10px rgba(42,176,189,.29);}
.production .section.n1 .list li .text1{margin-top:12px; color:#676767; font-size:14px; line-height:24px; word-break:keep-all;}
.production .section.n2{border-top:1px solid #fff; background-color:#f5f3f6;}
.production .section.n2 .wrap{padding:0;}
.production .section.n2 .list.n1{margin-top:50px;}
.production .section.n2 .list.n1 li{display:inline-block;width:48.485%;color:#535353;font-size:16px;font-weight:600;line-height:18px;vertical-align:top;word-break: keep-all;}
.production .section.n2 .list.n1 li + li{margin-left:3.03%;}
.production .section.n2 .list.n1 li img{margin-bottom:12px;}
.production .section.n2 .list.n1 + .text{margin-top:40px;}
.production .section.n2 .list.n2{margin-top:55px;}
.production .section.n2 .list.n2 li{display:inline-block; position:relative; width:20.076%; height:380px; margin:0 .76%; padding:205px 5px 0 5px; border-radius:11px; background-color:#fff; box-shadow:0 4px 21px rgba(36,36,36,.17); vertical-align:top;}
.production .section.n2 .list.n2 li:before,.production .section.n2 .list.n2 li:after{display:block; opacity:0; position:absolute; top:70px; left:0; right:0; width:82px; height:82px; margin:0 auto; background-repeat:no-repeat; transition:opacity .5s ease-in-out;}
.production .section.n2 .list.n2 li:before{opacity:1;}
.production .section.n2 .list.n2 li:nth-child(1):before{background-image:url(../../images/production/pipeline_img01.png);}
.production .section.n2 .list.n2 li:nth-child(1):after{background-image:url(../../images/production/pipeline_img01_on.png);}
.production .section.n2 .list.n2 li:nth-child(2):before{background-image:url(../../images/production/pipeline_img02.png);}
.production .section.n2 .list.n2 li:nth-child(2):after{background-image:url(../../images/production/pipeline_img02_on.png);}
.production .section.n2 .list.n2 li:nth-child(3):before{background-image:url(../../images/production/pipeline_img03.png);}
.production .section.n2 .list.n2 li:nth-child(3):after{background-image:url(../../images/production/pipeline_img03_on.png);}
.production .section.n2 .list.n2 li:nth-child(4):before{background-image:url(../../images/production/pipeline_img04.png);}
.production .section.n2 .list.n2 li:nth-child(4):after{background-image:url(../../images/production/pipeline_img04_on.png);}
.production .section.n2 .list.n2 li:hover:before{opacity:0;}
.production .section.n2 .list.n2 li:hover:after{opacity:1;}
.production .section.n2 .list.n2 li .title{color:#535353;font-size:18px;font-weight:600;line-height:20px;word-break: keep-all;}
.production .section.n2 .list.n2 li .text1{margin-top:15px; color:#676767; font-size:14px; line-height:24px; word-break:keep-all;}
.production .section.n3{height:959px; padding-top:110px; background:url(../../images/production/engine_bg.jpg) no-repeat center;}
.production .section.n3 .wrap{height:100%; padding:0;}
.production .section.n3 h2{color:#e5e5e5;}
.production .section.n3 .text{color:#8b8b8b;}
.production .section.n3 .list{position:absolute; top:0; left:0; right:0; bottom:0;}
.production .section.n3 .list li{position:absolute;}
.production .section.n3 .list li:nth-child(1){top:210px; top:28%; left:0; right:0; margin:0 auto;}
.production .section.n3 .list li:nth-child(2){top:240px; top:32%; right:0; text-align:left;/* left:1010px;*/}
.production .section.n3 .list li:nth-child(3){right:1%; bottom:13%;/* left:1000px;*/ text-align:left;/* top:540px;*/}
.production .section.n3 .list li:nth-child(4){left:0;right:0;bottom:8%;margin: 0 auto;}
.production .section.n3 .list li:nth-child(5){left:40px; left:3%; bottom:9%; text-align:right;/* top:570px;*/}
.production .section.n3 .list li:nth-child(6){top:285px; top:38%; left:25px; left:2%; text-align:right;}
.production .section.n3 .list li .title{color:#bdbdbd; font-size:48px; font-weight:400; font-family:'Roboto','NotoKr',sans-serif !important; line-height:50px; letter-spacing:0;}
.production .section.n3 .list li .text1{margin-top:5px; color:#a9a8a8; font-size:16px; line-height:30px; word-break:keep-all;letter-spacing:-0.05em;}
.production .section.n4 .list{margin-top:65px;}
.production .section.n4 .list li{display:inline-block; width:48.485%; color:#535353; font-size:16px; font-weight:600; line-height:18px; vertical-align:top;}
.production .section.n4 .list li + li{margin-left:3.03%;}
.production .section.n4 .list li img{margin-bottom:12px;}

/* ip */
.ip .visual{background-image:url(../../images/ip/visual_bg.jpg);}
.ip .section.n1 .wrap{padding:0;}
.ip .section.n1 .list.n1{margin-top:115px;}
.ip .section.n1 .list.n1 .slick-list{overflow:visible;}
.ip .section.n1 .list.n1 .slick-arrow{position:absolute; top:calc(50% - 75px); z-index:2; width:60px; height:60px; background:url(../../images/ip/ip_arrow01.png) no-repeat;}
.ip .section.n1 .list.n1 .slick-arrow.slick-prev{left:-90px;}
.ip .section.n1 .list.n1 .slick-arrow.slick-next{right:-90px; transform:rotate(180deg);}
.ip .section.n1 .list.n1 .item{overflow:hidden; position:relative; width:300px; height:699px; margin-right:25px; transition:all .25s ease-in-out;}
.ip .section.n1 .list.n1 .item a{display:block; position:relative; width:100%; height:100%; text-align:left;}
.ip .section.n1 .list.n1 .item:hover{box-shadow:0 24px 29px rgba(223,49,184,.39); transform:translateY(-60px);}
.ip .section.n1 .list.n1 .item .bg{position:absolute; top:0; left:0; right:0; bottom:0;}
.ip .section.n1 .list.n1 .item .bg img{position:absolute; top:0; left:50%; bottom:0; max-width:inherit; height:100%; transform:translateX(-50%);}
.ip .section.n1 .list.n1 .item .tag{position:absolute; top:10px; left:10px; right:10px; color:#fff; font-size:14px; text-align:center; line-height:16px; word-break:keep-all;}
.ip .section.n1 .list.n1 .item .box{position:absolute; left:0; right:0; bottom:0; padding:25px 15px;}
.ip .section.n1 .list.n1 .item .box:before{display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(to top, black 70%, transparent 100%);}
.ip .section.n1 .list.n1 .item .box .title{position:relative; color:#fff; font-size:24px; font-weight:600; line-height:30px; word-break:keep-all;}
.ip .section.n1 .list.n1 .item .box .text1{position:relative; margin-top:5px; color:#9e9e9e; font-size:14px; line-height:24px; word-break:keep-all;}
.ip .section.n1 .list.n2{position:relative; padding:175px 20px 0 20px;}
.ip .section.n1 .list.n2:before{display:block; position:absolute; top:87px; left:0; right:0; width:50px; height:28px; margin:0 auto; background:url(../../images/ip/ip_arrow02.png) no-repeat; background-size:100% auto;}
.ip .section.n1 .list.n2 > .slick-list{overflow:visible;}
.ip .section.n1 .list.n2 .slick-arrow{position:absolute; top:calc(50% - 30px); z-index:99999; width:60px; height:60px; background:url(../../images/ip/ip_arrow01.png) no-repeat;}
.ip .section.n1 .list.n2 .slick-arrow.slick-prev{left:-90px;}
.ip .section.n1 .list.n2 .slick-arrow.slick-next{right:-90px; transform:rotate(180deg);}
.ip .section.n1 .list.n2 .item1{opacity:0; transition:opacity .5s ease-in-out;}
.ip .section.n1 .list.n2 .item1.slick-active{opacity:1;}
.ip .section.n1 .list.n2 .item1 .list2 .item2{overflow:hidden; position:relative;}
.ip .section.n1 .list.n2 .item1 .list2 .item2 iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.ip .section.n1 .list.n2 .item1 .info{padding:25px 80px 0 80px; text-align:left;}
.ip .section.n1 .list.n2 .item1 .info .info_title{color:#55565b; font-size:36px; font-weight:600; line-height:38px;}
.ip .section.n1 .list.n2 .item1 .info .info_title img{margin:2px 0 0 25px; vertical-align:top;}
.ip .section.n1 .list.n2 .item1 .info .info_wrap{margin-top:30px;}
.ip .section.n1 .list.n2 .item1 .info .info_wrap + .info_wrap{margin-top:40px;}
.ip .section.n1 .list.n2 .item1 .info .info_box{display:inline-block; vertical-align:top;}
.ip .section.n1 .list.n2 .item1 .info .info_box:first-child{width:375px; margin-right:30px;}
.ip .section.n1 .list.n2 .item1 .info .info_box:last-child{width:calc(100% - 405px);}
.ip .section.n1 .list.n2 .item1 .info .title{margin-bottom:5px; color:#55565b; font-size:16px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:24px; letter-spacing:0;}
.ip .section.n1 .list.n2 .item1 .info .info_box .list3{border-right:2px solid #e3e3e3;}
.ip .section.n1 .list.n2 .item1 .info .info_box .list3 li{color:#5a5a5a; font-size:15px; line-height:30px;}
.ip .section.n1 .list.n2 .item1 .info .info_box .text1{color:#5a5a5a; font-size:15px; line-height:30px; word-break:keep-all;}
.ip .section.n1 .list.n2 .item1 .info .list4{margin-top:20px;}
.ip .section.n1 .list.n2 .item1 .info .list4 li{display:inline-block; width:122px; margin-right:20px; margin-bottom:5px; border-radius:15px; background-color:#ddd; color:#fff; font-size:14px; font-weight:600; text-align:center; line-height:30px; vertical-align:top;}
.ip .section.n1 .list.n2 .item1 .info .list4 li:last-child{margin-right:0;}
.ip .section.n1 .list.n2 .item1 .info .list4 li.active{background-color:#f55b1e;}
.ip .section.n1 .list.n2 .item1 .slick-dots{position:absolute; left:0; right:0; bottom:22px; z-index:2;}
.ip .section.n1 .list.n2 .item1 .slick-dots li{display:inline-block; margin:0 7px; vertical-align:top;}
.ip .section.n1 .list.n2 .item1 .slick-dots li button{width:14px; height:14px; border-radius:50%; background-color:#e5e5e5; cursor:pointer; transition:background-color .25s ease-in-out;}
.ip .section.n1 .list.n2 .item1 .slick-dots li.slick-active button{background-color:#fff}

/* portfolio */
.portfolio .visual{height:1137px; background-image:url(../../images/portfolio/visual_bg.jpg);}
.portfolio .visual .visual_box{top:calc(73% + 47px);}
.portfolio .visual .visual_text{margin-top:5px;}
.portfolio .section.n1 .wrap{padding:0;}
.portfolio .section.n1 .list > li{position:relative; text-align:left;}
.portfolio .section.n1 .list > li:before{display:block; position:absolute; z-index:-1; background-repeat:no-repeat;}
.portfolio .section.n1 .list > li:nth-child(1):before{top:45px; right:-200px; width:500px; height:500px; background-image:url(../../images/portfolio/bg05.png);}
.portfolio .section.n1 .list > li:nth-child(2):before{top:45px; left:-120px; width:500px; height:500px; background-image:url(../../images/portfolio/bg04.png);}
.portfolio .section.n1 .list > li:nth-child(3):before{top:25px; right:-50px; width:275px; height:385px;}
.portfolio .section.n1 .list > li:nth-child(4):before{top:-15px; left:-145px; width:500px; height:500px; background-image:url(../../images/portfolio/bg01.png);}
.portfolio .section.n1 .list > li:nth-child(5):before{top:25px; left: 950px; width:500px; height:500px; background-image:url(../../images/portfolio/bg02.png);}
.portfolio .section.n1 .list > li:nth-child(6):before{top:10px; left:-145px; width:500px; height:500px; background-image:url(../../images/portfolio/bg03.png);}
.portfolio .section.n1 .list > li + li{margin-top:201px;}
.portfolio .section.n1 .list > li + li:after{display:block; position:absolute; top:-101px; left:100px; right:100px; height:1px; background-color:#e2e1e1;}
.portfolio .section.n1 .list > li .text1{display:inline-block; float:right; width:360px; margin-top:-18px;/* right:0;*/ vertical-align:top;/* position:absolute;*/}
.portfolio .section.n1 .list > li .text1 .title{padding: 36px 20px 22px 20px;background:url(../../images/portfolio/title_bg01.png) no-repeat;color:#eaeaea;font-size: 21px;font-weight:600;line-height:30px;}
.portfolio .section.n1 .list > li .text1 .title span{display:block;margin-top: 0;font-size: 14px;font-weight:400;line-height:21px;letter-spacing:0;}
.portfolio .section.n1 .list > li .text1 ul{padding: 20px;}
.portfolio .section.n1 .list > li .text1 ul > li + li{margin-top:15px;}
.portfolio .section.n1 .list > li .text1 ul > li div{color:#55565b; font-size:15px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:17px; letter-spacing:0;}
.portfolio .section.n1 .list > li .text1 ul > li p{margin-top:10px; color:#8c8c8c; font-size:14px; line-height:24px; word-break:keep-all;}
.portfolio .section.n1 .list > li .movie{display:inline-block; position:relative; width:calc(100% - 360px);}
.portfolio .section.n1 .list > li .movie .movie_box{position:relative; padding-bottom:56.25%;}
.portfolio .section.n1 .list > li .movie iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.portfolio .section.n1 .list > li .movie .tag{position:relative; margin:10px 0 0 40px; padding:1px 0 1px 154px;}
.portfolio .section.n1 .list > li .movie .tag span{position:absolute; top:0; left:0; width:124px; height:32px; border:2px solid #000; color:#55565b; font-size:14px; font-family:'Roboto','NotoKr',sans-serif !important; text-align:center; line-height:30px; letter-spacing:0;}
.portfolio .section.n1 .list > li .movie .tag ul{text-align:left;}
.portfolio .section.n1 .list > li .movie .tag ul li{display:inline-block; width:122px; margin-right:10px; margin-bottom:5px; border-radius:15px; background:linear-gradient(to right, #fec15b, #f736a5); color:#fff; font-size:14px; font-weight:600; text-align:center; line-height:30px; vertical-align:top;}
.portfolio .section.n1 .list > li .movie .tag ul li:last-child{margin-right:0;}
.portfolio .section.n1 .list > li:nth-child(2n){text-align:right;}
.portfolio .section.n1 .list > li:nth-child(2n) .text1{float:left; margin-top:0;}
.portfolio .section.n1 .list > li:nth-child(2n) .text1 .title{padding-top: 18px;background-image:url(../../images/portfolio/title_bg02.png);background-position:right top;}
.portfolio .section.n1 .list > li:nth-child(2) .movie .tag ul li{background:linear-gradient(to right, #35c696, #a433ec);}
.portfolio .section.n1 .list > li:nth-child(3) .movie .tag ul li{background:linear-gradient(to right, #f4eb2d, #109640);}
.portfolio .section.n1 .list > li:nth-child(4) .movie .tag ul li{}
.portfolio .section.n1 .list > li:nth-child(5) .movie .tag ul li{background:linear-gradient(to right, #35c696, #a433ec);}
.portfolio .section.n1 .list > li:nth-child(6) .movie .tag ul li{background:linear-gradient(to right, #f4eb2d, #109640);}

/* contact */
.contact .visual{overflow:hidden; padding:0 !important;}
.contact .visual video{position:absolute; top:0; left:50%; width:1920px; max-width:inherit; transform:translateX(-50%);}
.contact h3{color:#55565b; font-size:30px; line-height:32px; word-break:keep-all;}
.contact h3 span{display:block; margin-bottom:9px; font-size:18px; font-family:'Roboto','NotoKr',sans-serif !important; line-height:20px; letter-spacing:0;}
.contact h3 em{color:#da4187;}
.contact .section.n1{border-bottom:1px solid #f1f1f1; background:url(../../images/contact/mission_bg01.png) no-repeat left top,url(../../images/contact/mission_bg02.png) no-repeat right bottom; text-align:left;}
.contact .section.n1 .wrap{padding:0;}
.contact .section.n1 .text{margin-top:40px;}
.contact .section.n1 .list{margin-top:40px; text-align:center;}
.contact .section.n1 .list li{display:inline-block; position:relative; margin:0 17px; text-align:left; vertical-align:top;}
.contact .section.n1 .list li img{border-radius:50%;}
.contact .section.n1 .list li .text1{position:absolute; left:-10px; bottom:30px; color:#55565b; font-size:36px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:32px; letter-spacing:0;}
.contact .section.n1 .list li:nth-child(2) .text1{color:#f0f7fb; text-shadow:0 0 9px rgba(52,50,50,.63);}
.contact .section.n1 .list li:nth-child(3) .text1{color:#f8e6f6; text-shadow:0 4px 21px rgba(52,50,50,.41);}
.contact .section.n2{border-top:1px solid #fff; border-bottom:1px solid #e2e1e1; background-color:#f5f3f6;}
.contact .section.n2 .text{margin-top:30px;}
.contact .section.n2 .list1{margin:50px -.75% 0 -.75%;}
.contact .section.n2 .list1 li{display:inline-block; position:relative; width:31.675%; height:300px; margin:0 .75%; padding:160px 10px 0 10px; background-color:#fff; box-shadow:0 4px 21px rgba(36,36,36,.17); vertical-align:top;}
.contact .section.n2 .list1 li img{position:absolute; top:40px; left:0; right:0; width:100px; margin:0 auto;}
.contact .section.n2 .list1 li .title{color:#55565b; font-size:18px; font-weight:600; line-height:20px;}
.contact .section.n2 .list1 li .text1{margin-top:20px; color:#676767; font-size:14px; line-height:24px; word-break:keep-all;}
.contact .section.n2 .list2{margin-top:60px; padding-top:25px; border-top:2px solid #ddd; text-align:left;}
.contact .section.n2 .list2 li{display:inline-block; width:25%; vertical-align:top;}
.contact .section.n2 .list2 li .title{color:#55565b; font-size:14px; font-weight:500; line-height:16px;}
.contact .section.n2 .list2 li .text1{margin-top:10px; color:#777; font-size:14px; line-height:24px;}
.contact .section.n3{text-align:left;}
.contact .section.n3 .box{display:inline-block; width:calc(100% - 450px); vertical-align:top;}
.contact .section.n3 .box + .box{width:422px; margin-left:28px;}
.contact .section.n3 .title{margin-bottom:60px; padding-bottom:18px; border-bottom:2px solid #ddd; color:#55565b; font-size:18px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:20px; letter-spacing:0;}
.contact .section.n3 .form_list li + li{margin-top:8px;}
.contact .section.n3 .form_list li input{width:50%; height:40px; padding:0 20px; background-color:#e3e3e3; font-size:16px; font-family:'Roboto','NotoKr',sans-serif !important; line-height:40px; letter-spacing:0;}
.contact .section.n3 .form_list li input::placeholder{color:#acacac;}
.contact .section.n3 .form_list li:nth-child(3) input{width:100%;}
.contact .section.n3 .form_list li textarea{width:100%; height:292px; padding:8px 20px; background-color:#e3e3e3; font-size:16px; font-family:'Roboto','NotoKr',sans-serif !important; line-height:24px; resize:none;letter-spacing:0;}
.contact .section.n3 .form_list li textarea::placeholder{color:#acacac;}
.contact .section.n3 input[type="submit"]{float:right; width:107px; height:40px; margin-top:17px; background-color:#e3e3e3; color:#55565b; font-size:18px; font-weight:600; text-align:center; line-height:40px;}
.contact .section.n3 .list li{display:inline-block; width:50%; margin-top:8px; vertical-align:top;}
.contact .section.n3 .list li:nth-child(n+3){display:block; width:100%;}
.contact .section.n3 .list li .title2{color:#55565b; font-size:16px; font-weight:600; font-family:'Roboto','NotoKr',sans-serif !important; line-height:18px; letter-spacing:0;}
.contact .section.n3 .list li .text1{margin-top:4px; color:#777; font-size:14px; line-height:24px; letter-spacing:-.01em;}
.contact .section.n3 .list li .text1 span{letter-spacing:-.05em;}
.contact .section.n3 .root_daum_roughmap{height:230px; margin-top:20px; background-color:#444;}

@media all and (max-width:1320px){
    .m_none{display:none;}

    .wrap{padding:0 3%;}

    #header{top:30px;}
    #header:before{max-width:94%;}

    .main .section.n0 .visual_text{font-size:56px;}
    .main .section.n1 .list li div span{font-size:26px;}
    .main .section.n3{padding-right:3%; padding-left:3%;}

    .production .section.n1{background-size:400px auto, 350px auto;}
    .production .section.n2 .list.n2 li{width:23%;}
    .production .section.n3{height:659px; padding-top:60px;}
    .production .section.n3 .list li:nth-child(1){top:31%;}
    .production .section.n3 .list li:nth-child(2){top:38%; right:1%;}
    .production .section.n3 .list li:nth-child(3){right:5%; bottom:11%;}
    .production .section.n3 .list li:nth-child(4){bottom:-10%;}
    .production .section.n3 .list li:nth-child(5){bottom:-1%;}
    .production .section.n3 .list li:nth-child(6){top:49%; left:3%;}
    .production .section.n3 .list li .title{font-size:28px; line-height:30px;}
    .production .section.n3 .list li .text1{font-size:15px; line-height:27px;}

    .ip .section.n1 .wrap{padding:0 3%;}
    .ip .section.n1 .list.n1{padding-right:50px; padding-left:50px;}
    .ip .section.n1 .list.n1 .slick-arrow{top:calc(50% - 20px); width:40px; height:40px; background-size:40px;}
    .ip .section.n1 .list.n1 .slick-arrow.slick-prev{left:-10px;}
    .ip .section.n1 .list.n1 .slick-arrow.slick-next{right:-10px;}
    .ip .section.n1 .list.n2{padding-right:50px; padding-left:50px;}
    .ip .section.n1 .list.n2 .slick-arrow{top:calc(50% - 20px); width:40px; height:40px; background-size:40px;}
    .ip .section.n1 .list.n2 .slick-arrow.slick-prev{left:-60px;}
    .ip .section.n1 .list.n2 .slick-arrow.slick-next{right:-60px;}
    .ip .section.n1 .list.n2 .item1 .info{padding-right:0; padding-left:0;}
    .ip .section.n1 .list.n2 .item1 .info .info_box:first-child{width:230px;}
    .ip .section.n1 .list.n2 .item1 .info .info_box:last-child{width:calc(100% - 260px);}
    .ip .section.n1 .list.n2 .item1 .info .list4 li{margin-right:10px;}

    .portfolio .section.n1 .wrap{padding:0 3%;}
    .portfolio .section.n1 .list > li + li:after{top:-51px; left:3%; right:3%;}
    .portfolio .section.n1 .list > li:nth-child(1):before{right:-30px;}
    .portfolio .section.n1 .list > li .movie .tag{position:relative; top:auto; left:auto; right:auto; margin-left:0; padding-left:140px;}
    .portfolio .section.n1 .list > li:nth-child(2):before{top:-90px; left:-40px;}
    .portfolio .section.n1 .list > li:nth-child(3):before{right:-15px;}

    .contact .section.n1 .wrap{padding:0 3%;}
    .contact .section.n1 .list li{width:29%; margin:0 2%;}
}

@media all and (min-width:1001px){
    .about .section.n2 .list li .box .img img{-webkit-filter: grayscale(100%); -webkit-transition: .25s ease-in-out; -moz-filter: grayscale(100%); -moz-transition: .25s ease-in-out; -o-filter: grayscale(100%); -o-transition: .25s ease-in-out;}
    .about .section.n2 .list li .box:hover .img img{transform:scale(1.05); transition:.25s ease-in-out; -webkit-filter: grayscale(0%); -webkit-transition: .25s ease-in-out; -moz-filter: grayscale(0%); -moz-transition: .25s ease-in-out; -o-filter: grayscale(0%); -o-transition: .25s ease-in-out;}
    .about .section.n2 .list li .box:hover .tag li.type1{background-color:#dd3064; color:#fff;}
    .about .section.n2 .list li .box:hover .tag li.type2{background-color:#fec962;}
}

@media all and (max-width:1000px){
    #header{top:20px; height:80px; padding:11px calc(3% + 20px);}
    #header h1 a{transition:all .25s ease-in-out;}
    #header .menu .menu_item a{padding:0 8px; font-size:13px; transition:all .25s ease-in-out;}
    #header .menu .menu_lang{margin-left:10px;}
    #header.fixed{height:60px;}
    #header.fixed h1 a{height:38px;}
    #header.fixed .menu .menu_box{padding:0;}

    .section{padding-top:90px; padding-bottom:70px;}
    .section h2{font-size:36px; line-height:44px;}
    .section .text{margin-top:12px; font-size:14px; line-height:26px;}
    .btn_more{padding:0 37px 0 17px; border-width:1px; background-size:auto 16px; font-size:18px; line-height:48px;}
    .visual{height:600px;}
    .visual .visual_box{top:calc(50% + 40px);}
    .visual .visual_title{font-size:44px; line-height:56px;}

    .main .section.n0 .visual_text{top:calc(50% + 40px); font-size:32px;}
    .main .section.n1 .list{margin-top:40px;}
    .main .section.n1 .list li div{padding-top:25px; padding-bottom:25px;}
    .main .section.n1 .list li div span{font-size:18px; line-height:20px;}
    .main .section.n1 .list li div p{margin-top:10px; font-size:13px; line-height:15px;}
    .main .section.n1 .btn_more{margin-top:60px;}
    .main .section.n2{padding-bottom:20px;}
    .main .section.n2:before{height:180px;}
    .main .section.n2 .list{margin-top:60px;}
    .main .section.n2 .list .bx-viewport{height:300px !important;}
    .main .section.n2 .list li img{max-height:100%;}
    .main .section.n2 .btn_more{bottom:50px;}
    .main .section.n3 .list{margin:20px -10px 0 -10px;}
    .main .section.n3 .slick-arrow{top:calc(29% - 20px); width:20px; height:40px;}
    .main .section.n3 .item{margin:0 10px;}
    .main .section.n3 .item .tag{padding:0 10px;}
    .main .section.n3 .item .tag li{width:auto; margin-right:6px; padding:0 15px; font-size:14px;}
    .main .section.n3 .item .title{padding:0 10px; font-size:20px; line-height:24px;}
    .main .section.n3 .item .text1{padding:0 10px;}
    .main .section.n3 .item .text2{margin-top:12px; padding:0 10px;}
    .main .section.n3 .btn_more{margin-top:40px;}
    .main .section.n5{padding-top:70px;}
    .main .section.n5 .list li{width:25%;}

    .about .section.n0 .visual_box{top:calc(50% + 60px);}
    .about .section.n0 .visual_title{font-size:36px; line-height:48px;}
    .about .section.n0 .visual_text{font-size:14px; line-height:26px; margin-top:15px;}
    .about .section.n2 .list > li{width:31.33%; margin:0 1%;}
    .about .section.n2 .list > li:nth-child(1),
    .about .section.n2 .list > li:nth-child(3){padding-top:60px;}
    .about .section.n2 .list > li:nth-child(4){padding-top:0;}
    .about .section.n2 .list li .box .tag li.type1{background-color: #dd3064; color: #fff;}
    .about .section.n2 .list li .box .tag li.type2{background-color: #fec962;}

    .production .section.n1{background-size:270px auto, 250px auto;}
    .production .section.n1 .wrap{padding:0 2%;}
    .production .section.n1 .list{margin-top:30px;}
    .production .section.n1 .list li{width:48%; margin:10px 1%;}
    .production .section.n2 .wrap{padding:0 3%;}
    .production .section.n2 .list.n1{margin-top:30px;}
    .production .section.n2 .list.n2{margin:20px -1% 0 -1%;}
    .production .section.n2 .list.n2 li{width:48%; margin:20px 1% 0 1%;}
    .production .section.n3{height:auto; padding-bottom:0; background:#1d1d1d;}
    .production .section.n3 .list{position:relative; top:auto; left:auto; right:auto; bottom:auto;}
    .production .section.n3 .list li{position:relative; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; padding:30px 0; text-align:center !important;}
    .production .section.n3 .list li:nth-child(1){margin-top:30px; background-color:#111;}
    .production .section.n3 .list li:nth-child(2){background:url(../../images/production/engine_bg01.jpg) no-repeat center / cover;}
    .production .section.n3 .list li:nth-child(3){background-color:#343434;}
    .production .section.n3 .list li:nth-child(5){background:url(../../images/production/engine_bg02.jpg) no-repeat center / cover;}
    .production .section.n3 .list li:nth-child(6){background:url(../../images/production/engine_bg03.jpg) no-repeat center / cover;}
    .production .section.n4 .list{margin-top:30px;}

    .ip .section.n1 .list.n1{margin-top:50px;}
    .ip .section.n1 .list.n1 .item{width:200px; height:466px;}
    .ip .section.n1 .list.n1 .item:hover{transform:translateY(-40px);}
    .ip .section.n1 .list.n2{padding-top:100px;}
    .ip .section.n1 .list.n2:before{top:50px; width:25px; height:14px;}
    .ip .section.n1 .list.n2 .item1 .info .info_title{font-size:28px; line-height:30px;}
    .ip .section.n1 .list.n2 .item1 .info .info_title img{height:30px; margin-left:15px;}
    .ip .section.n1 .list.n2 .item1 .info .list4 li{width:110px; font-size:13px;}

    .portfolio .section.n1 .list > li + li{margin-top:100px;}
    .portfolio .section.n1 .list > li .text1{display:block; float:none; width:100%; margin-top:0;}
    .portfolio .section.n1 .list > li .movie{width:100%;}

    .contact .visual video{width:1610px;}
    .contact .section.n1{background-size:auto 209px, auto 250px;}
    .contact .section.n1 .text{margin-top:30px;}
    .contact .section.n1 .list li .text1{bottom:15px; font-size:24px; line-height:24px;}
    .contact .section.n2{padding-bottom:45px;}
    .contact .section.n2 h3{font-size:26px; line-height:28px;}
    .contact .section.n2 .text{margin-top:20px;}
    .contact .section.n2 .list1{margin-top:35px;}
    .contact .section.n2 .list1 li{padding-top:140px;}
    .contact .section.n2 .list1 li img{top:25px;}
    .contact .section.n2 .list2{margin-top:40px;}
    .contact .section.n2 .list2 li{width:50%; margin-bottom:25px;}
    .contact .section.n3 .box{display:inline-block; width:100%;}
    .contact .section.n3 .box + .box{width:100%; margin-top:20px; margin-left:0;}
    .contact .section.n3 .title{margin-bottom:30px;}
    .contact .section.n3 .list li{width:33.33%;}
    .contact .section.n3 .list li:nth-child(3){display:inline-block; width:33.33%;}
    .contact .section.n3 .list li:nth-child(4){margin-top:20px;}
    .contact .section.n3 .root_daum_roughmap{width:100% !important;}
}

@media all and (max-width:640px){
    #header{top:10px; height:50px; padding:6px 6%;}
    #header h1 a{width:67px; height:38px;}
    #header .menu{position:absolute; top:0; left:0; right:0; height:0;}
    #header .menu .menu_btn{display:block; position:absolute; top:10px; right:6%; z-index:1; width:26px; height:28px; transition:all .5s ease-in-out;}
    #header .menu .menu_btn span{display:block; position:relative; height:2px; background-color:#fff; transition:all .3s ease-in-out;}
    #header .menu .menu_btn span:before, #header .menu .menu_btn span:after{display:block; position:absolute; left:0; right:0; height:2px; background-color:#fff; transition:all .25s ease-in-out;}
    #header .menu .menu_btn span:before{top:-8px;}
    #header .menu .menu_btn span:after{bottom:-8px;}
    #header .menu .menu_box{position:fixed;top: -10px;right:-100vw;width:100vw;height:100vh;background:linear-gradient(-45deg, #5ea2ef, #d12e9c);text-align:center;transition:all .5s ease-in-out;}
    #header .menu.active .menu_box{right:0;}
    #header .menu.active .menu_btn span{background-color:transparent !important;}
    #header .menu.active .menu_btn span:before, #header .menu.active .menu_btn span:after{background-color:#fff !important;}
    #header .menu.active .menu_btn span:before{top:0; transform:rotate(-135deg);}
    #header .menu.active .menu_btn span:after{bottom:0; transform:rotate(135deg);}
    #header .menu .menu_list{display:block; width:100%; margin-top:50%;}
    #header .menu .menu_item{display:block;}
    #header .menu .menu_item a{opacity:0; color:#fff !important; font-size:18px; font-weight:200; line-height:44px !important; transform:translateY(10px);transition-duration:.5s;}
    #header .menu .menu_item:nth-child(1) a{transition-delay:.3s;}
    #header .menu .menu_item:nth-child(2) a{transition-delay:.45s;}
    #header .menu .menu_item:nth-child(3) a{transition-delay:.6s;}
    #header .menu .menu_item:nth-child(4) a{transition-delay:.75s;}
    #header .menu .menu_item:nth-child(5) a{transition-delay:.9s;}
    #header .menu .menu_lang{opacity:0; width:100px; height:30px; margin-top:20px !important; margin-left:0; border-color:#fff !important; border-radius:0; color:#fff !important; font-size:12px; font-weight:200; line-height:28px; transition-delay:1.05s;transform:translateY(10px);}
    #header .menu.active .menu_item a, #header .menu.active .menu_lang{opacity:1; transform:translateY(0);}
    #header .menu .lang_list{top:40px; left:0; border-top:0; border-radius:0; background-color:inherit !important;}
    #header .menu .lang_list.active{top:50px;}
    #header.fixed{height:50px; padding:6px 3%;}
    #header.fixed .menu .menu_box{top:0;}
    #header.fixed .menu .menu_btn{right:3%;}
    #header.fixed .menu .menu_btn span,
    #header.fixed .menu .menu_btn span:before,
    #header.fixed .menu .menu_btn span:after{background-color:#444;}
    #header.fixed .menu .lang_list{border-color:#fff; background-color:#fff;}
    #header.fixed .menu .lang_list li a{color:#fff;}

    #footer .list li{margin:0 7px;}

    .section{padding-top:60px; padding-bottom:50px;}
    .section h2{font-size:22px; line-height:28px;}
    .section .text{line-height:22px;}
    .btn_more{font-size:14px; line-height:38px;}
    .banner .btn{margin-top:30px;}
    .visual .visual_box{top:calc(50% + 25px);}
    .visual .visual_title{font-size:24px; line-height:36px;}
    .visual .visual_text{margin-top:10px; font-size:14px; line-height:26px;}

    .main .section.n0 .visual_text{top:calc(50% + 25px); font-size:14px; line-height:40px;}
    .main .section.n1 .list{margin-top:25px;}
    .main .section.n1 .list li{width:100%;}
    .main .section.n1 .list li:nth-child(2){margin:10px 0;}
    .main .section.n1 .list li img{margin:-24% 0;}
    .main .section.n1 .list li div{padding-top:34px; padding-bottom:34px;}
    .main .section.n1 .list li div span{font-size:24px;}
    .main .section.n1 .list li div p{margin-top:17px; font-size:14px;}
    .main .section.n1 .btn_more{margin-top:40px;}
    .main .section.n2 .list{margin-top:30px;}
    .main .section.n2 .list .bx-viewport{height:200px !important;}
    .main .section.n3 .slick-arrow{top:calc(24% - 20px);}
    .main .section.n3 .slick-arrow.slick-prev{left:3%;}
    .main .section.n3 .slick-arrow.slick-next{right:3%;}
    .main .section.n3 .item .title{font-size:18px; line-height:20px;}
    .main .section.n3 .item .text2{margin-top:8px;}
    .main .section.n3 .btn_more{margin-top:30px;}
    .main .section.banner .btn{margin-top:30px; padding:0 30px; font-size:14px; line-height:36px;}

    .about .section.n0 .visual_box{top: calc(50% + 40px);}
    .about .section.n0 .visual_title{font-size: 18px;line-height: 27px;}
    .about .section.n0 .visual_text{margin-top: 5px;font-size: 10px;line-height: 18px;}
    .about .section.n1{padding-bottom:120px;}
    .about .section.n1 .list{margin:20px -10px 0 -10px;}
    .about .section.n1 .list li{margin:0 10px;}
    .about .section.n1 .list li .box{padding:15px;}
    .about .section.n1 .list li .box .subject{font-size:16px; line-height:26px; height:52px;}
    .about .section.n1 .list li .box .text{font-size:12px; line-height:16px; height:32px;}
    .about .section.n1 .list li .box .date{font-size:10px;}
    .about .section.n1 .list li .box a{width:30px;}
    .about .section.n2 .list{margin:0;}
    .about .section.n2 .list > li{width:47%; margin:0 1.5%; vertical-align:top;}
    .about .section.n2 .list > li:nth-child(1){padding-top:30px;}
    .about .section.n2 .list > li:nth-child(3){padding-top:0;}
    .about .section.n2 .list li .box .tag li{font-size:10px;}
    .about .section.n2 .list li .box .name{font-size:16px; line-height:18px;}
    .about .section.n2 .list li .box .bio{font-size:12px; line-height:16px; max-height:48px;}
    .about .section.n2 .list li .box.active .bio{max-height:400px;}

    .production .section.n1{background-size:150px auto, 140px auto;}
    .production .section.n1 .list{margin-top:20px;}
    .production .section.n2 .list.n1{margin-top:25px;}
    .production .section.n2 .list.n1 li{display:block; width:100%;}
    .production .section.n2 .list.n1 li + li{margin:25px 0 0 0;}
    .production .section.n2 .list.n1 + .text{margin-top:25px;}
    .production .section.n2 .list.n2 li{height:290px; padding-top:105px;}
    .production .section.n2 .list.n2 li:before, .production .section.n2 .list.n2 li:after{top:25px; width:60px; height:60px; background-size:60px auto;}
    .production .section.n2 .list.n2 li .title{font-size:16px; line-height:18px;}
    .production .section.n2 .list.n2 li .text1{margin-top:10px;}
    .production .section.n3 .list li .title{font-size:24px;}
    .production .section.n4 .list li{display:block; width:100%;}
    .production .section.n4 .list li + li{margin:25px 0 0 0;}

    .ip .section.n1 .list.n1{padding-right:20px; padding-left:20px;}
    .ip .section.n1 .list.n1 .slick-arrow{top:calc(50% - 15px); width:30px; height:30px; background-size:30px;}
    .ip .section.n1 .list.n1 .slick-arrow.slick-prev{left:0;}
    .ip .section.n1 .list.n1 .slick-arrow.slick-next{right:0;}
    .ip .section.n1 .list.n1 .item{width:190px; height:410px; margin-right:10px;}
    .ip .section.n1 .list.n1 .item .tag{font-size:12px;}
    .ip .section.n1 .list.n1 .item .box{padding:15px 10px;}
    .ip .section.n1 .list.n1 .item .box .title{font-size:16px; line-height:22px;}
    .ip .section.n1 .list.n1 .item .box .text1{font-size:12px; line-height:20px;}
    .ip .section.n1 .list.n2{padding-right:20px; padding-left:20px;}
    .ip .section.n1 .list.n2 .slick-arrow{top:calc(50% - 15px); width:30px; height:30px; background-size:30px;}
    .ip .section.n1 .list.n2 .slick-arrow.slick-prev{left:-20px;}
    .ip .section.n1 .list.n2 .slick-arrow.slick-next{right:-20px;}
    .ip .section.n1 .list.n2 .item1 .info .info_title{font-size:18px; line-height:20px;}
    .ip .section.n1 .list.n2 .item1 .info .info_title img{height:18px; margin-left:10px;}
    .ip .section.n1 .list.n2 .item1 .info .info_wrap{margin-top:20px;}
    .ip .section.n1 .list.n2 .item1 .info .info_wrap + .info_wrap{margin-top:20px;}
    .ip .section.n1 .list.n2 .item1 .info .info_box{display:inline-block; width:100% !important; margin-right:0 !important;}
    .ip .section.n1 .list.n2 .item1 .info .info_box:last-child{margin-top:20px;}
    .ip .section.n1 .list.n2 .item1 .info .info_box .title{font-size:15px;}
    .ip .section.n1 .list.n2 .item1 .info .info_box .list3{border-right:0;}
    .ip .section.n1 .list.n2 .item1 .info .info_box .list3 li{font-size:14px; line-height:27px;}
    .ip .section.n1 .list.n2 .item1 .info .list4 li{width:auto; margin-right:5px; padding:0 10px; font-size:12px; font-weight:500; line-height:26px;}

    .portfolio .visual{height:1000px;}
    .portfolio .visual .visual_box{top:calc(73% + 47px);}
    .portfolio .visual .visual_text{margin-top:5px;}
    .portfolio .section.n1 .list > li:nth-child(1):before{top:75px; right:0px; width:210px; height:215px; background-size:210px auto;}
    .portfolio .section.n1 .list > li .text1 .title{padding:33px 10px 15px 20px; background-size:300px auto; font-size:20px; line-height:20px;}
    .portfolio .section.n1 .list > li .text1 .title span{margin-top:4px; font-size:16px;}
    .portfolio .section.n1 .list > li .text1 ul{padding:15px 10px;}
    .portfolio .section.n1 .list > li .movie .tag{padding-left:0;}
    .portfolio .section.n1 .list > li .movie .tag span{position:relative; top:auto; left:auto; width:100%; height:28px; border-width:1px; font-size:13px; line-height:26px;}
    .portfolio .section.n1 .list > li .movie .tag ul{margin-top:10px;}
    .portfolio .section.n1 .list > li .movie .tag ul li{width:auto; margin-right:5px; padding:0 15px; font-size:13px; font-weight:500; line-height:26px;}
    .portfolio .section.n1 .list > li:nth-child(2):before{top:45px; left:-20px; width:300px; height:300px; background-size:300px auto;}
    .portfolio .section.n1 .list > li:nth-child(3):before{top:80px; right:0; width:200px; height:290px; background-size:200px auto;}

    .contact .visual video{width:1340px;}
    .contact h3 span{margin-bottom:4px; font-size:14px;}
    .contact .section.n1 .text{margin-top:20px;}
    .contact .section.n1 .list{margin-top:20px;}
    .contact .section.n1 .list li{display:block; width:307px; margin:0 auto 20px auto; text-align:center;}
    .contact .section.n1 .list li .text1{left:20px; text-align:left;}
    .contact .section.n2{padding-bottom:20px;}
    .contact .section.n2 h3{font-size:18px; line-height:26px;}
    .contact .section.n2 .text{margin-top:15px;}
    .contact .section.n2 .list1{margin:25px 0 0 0;}
    .contact .section.n2 .list1 li{display:block; width:100%; height:auto; margin:0 0 10px 0; padding-bottom:25px;}
    .contact .section.n2 .list1 li .text1{margin-top:10px;}
    .contact .section.n2 .list2{margin-top:30px;}
    .contact .section.n2 .list2 li{display:block; width:100% !important; margin:0 0 25px 0 !important;}
    .contact .section.n3 .box + .box{margin-top:30px;}
    .contact .section.n3 .title{margin-bottom:15px; padding-bottom:10px; border-bottom-width:1px; font-size:16px; line-height:18px;}
    .contact .section.n3 .form_list li input{width:100%;}
    .contact .section.n3 input[type="submit"]{width:100%; margin-top:10px; font-size:16px;}
    .contact .section.n3 .list li{display:block !important; width:100% !important; margin:0 0 20px 0 !important;}
}