/* common */
body.bgf5{background-color: #f5f5f5;  overflow-x: hidden;}

/* 커서 */
.p_cursor{position: absolute; top: 50px; left: 50px; width: 0; height: 0; border-radius: 50%; background-color: transparent; user-select: none; pointer-events: none; box-sizing:border-box; z-index: 1000; overflow: hidden; transition: all 0.2s ease-out;}
.p_cursor::before{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; border:2px solid transparent; opacity: 0; transform:scale(0); transition:0.3s; box-sizing:border-box; border-radius:50%}
.p_cursor img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); opacity: 0; transition:0.3s}
.p_cursor.prev img{transform:translate(-50%,-50%) rotate(180deg);}
.p_cursor.on{width: 100px; height: 100px; top: 0; left: 0;}
.p_cursor.on::before{opacity: 0.3; transform:scale(1); border-color:#fff}
.p_cursor.on img{opacity: 1;}


/* 포트폴리오 공통*/
.portfolio{padding-top: 210px; overflow: hidden;}
.portfolio .scon .info{display:flex; flex-wrap:wrap; width: 100%; max-width: 1400px; padding: 140px 0 100px; box-sizing:border-box; margin: 0 auto;}
.portfolio .scon .info .tit{width: 487px;}
.portfolio .scon .info .tit h3{font-family: 'Red Hat Display', sans-serif; font-weight:bold; font-size:70px; color: #222; text-transform: uppercase;}
.portfolio .scon .info .txt{width: calc(100% - 487px); margin-top: 34px;}
.portfolio .scon .info .txt .tag{display:flex;}
.portfolio .scon .info .txt .tag li{font-family: 'Red Hat Display', sans-serif; font-weight:500; margin-right: 35px; font-size:15px; color: #333;	}
.portfolio .scon .info .txt .tag li:last-of-type{margin-right: 0;}
.portfolio .scon .info .txt .tag li span{color: #aaa; margin-right: 6px;}
.portfolio .scon .info .txt h4{font-weight:700; font-size:19px; color: #222;}
.portfolio .scon .info .txt p{font-weight:400; font-size:18px; color: #333; margin-top: 32px; line-height: 1.8;}
/* 최상위 타이틀 이미지 */
.portfolio .top{position:relative; text-align: center;}
.portfolio .top figure{}
.portfolio .top figure img{}
.portfolio .top h2{font-family: 'Red Hat Display', sans-serif; font-weight:bold; font-size:100px; color: #222; text-transform: uppercase; margin-top: 15px;}
.portfolio .top h2 span{position:relative; opacity: 0;}
.portfolio .top .page_btn > div{position:absolute; bottom: -45px; width: 260px; height: 196px; box-sizing:border-box;}
.portfolio .top .page_btn > div a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.portfolio .top .page_btn > div > p{line-height: 196px; font-family: 'Red Hat Display', sans-serif; font-size:13px; color: #999;  transition:0.5s}
.portfolio .top .page_btn > div > p i{position:relative; top: 1px;}
.portfolio .top .page_btn > div .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing:border-box; opacity: 0;  filter:blur(3px); padding: 0 50px; transition:0.8s}
.portfolio .top .page_btn > div .hover figure{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.portfolio .top .page_btn > div .hover figure img{}
.portfolio .top .page_btn > div .hover p{display:flex; justify-content:space-between; align-items:center; position:relative; height: 100%; font-family: 'Red Hat Display', sans-serif; font-weight:bold; font-size:25px; color: #fff; text-transform: uppercase; }
.portfolio .top .page_btn > div.page_btn07 .hover p{transform:translateX(-26px);}
.portfolio .top .page_btn > div .hover p i{position:relative; top: -2px;font-size:13px; line-height: 198px;}
.portfolio .top .page_btn .prev{left: 0; padding-left: 50px; text-align: left;}
.portfolio .top .page_btn .next{right: 0; padding-right: 50px; text-align: right;}
.portfolio .top .page_btn > .next .hover p{text-align: left;}
.portfolio .top .page_btn > .prev .hover p{text-align: right;}

.portfolio .top .page_btn > .prev > p i{margin-right: 10px;}
.portfolio .top .page_btn > .next > p i{margin-left: 10px;}
.portfolio .top .page_btn > div:hover > p{opacity: 0;}
.portfolio .top .page_btn > div:hover .hover{opacity: 1; filter: blur(0px)}

/* 상단 비주얼 */
.portfolio .visual{margin-top: 110px;}
.portfolio .visual .bg{position:relative; width: 100%; height: 800px; background-size:cover !important; margin: 0 auto;}
.portfolio .visual .bg01{background:url(/img/sub/tastable01.jpg) 50% 50% no-repeat;}
.portfolio .visual .bg02{background:url(/img/sub/portfolio02.png) 50% 50% no-repeat;}
.portfolio .visual .bg03{background:url(/img/sub/portfolio03.png) 50% 50% no-repeat;}
.portfolio .visual .bg04{background:url(/img/sub/portfolio04.png) 50% 50% no-repeat;}
.portfolio .visual .bg05{background:url(/img/sub/portfolio05.png) 50% 50% no-repeat;}
.portfolio .visual .bg06{background:url(/img/sub/portfolio06.png) 50% 50% no-repeat;}
.portfolio .visual .bg07{background:url(/img/sub/hanwha_convergence02.png) 50% 50% no-repeat;}
.portfolio .visual .bg08{background:url(/img/sub/portfolio08.png) 50% 50% no-repeat;}
.portfolio .visual .bg09{background:url(/img/sub/portfolio09.png) 50% 50% no-repeat;}
.portfolio .visual .bg10{background:url(/img/sub/portfolio10.png) 50% 50% no-repeat;}
.portfolio .visual .bg11{background:url(/img/sub/portfolio11.png) 50% 50% no-repeat;}
.portfolio .visual .bg12{background:url(/img/sub/portfolio12.png) 50% 50% no-repeat;}
.portfolio .visual .bg13{background:url(/img/sub/lg_hicaresolution02.png) 50% 50% no-repeat;}
.portfolio .visual .bg14{background:url(/img/sub/portfolio14.png) 50% 50% no-repeat;}
/* overview */
.portfolio .overview{position:relative;}
.portfolio .overview .bg{content:''; position:absolute; bottom: 0; left: 0; width: 100%; height: 100vh; max-height: 970px; background: rgb(255,143,34); background: linear-gradient(120deg, rgba(255,143,34,1) 0%, rgba(243,115,33,1) 100%);}
/* overview_bg */
.portfolio .overview .bg02{background: rgb(3,56,113); background: linear-gradient(120deg, rgba(3,56,113,1) 0%, rgba(0,41,87,1) 100%);}
.portfolio .overview .bg03{background: #e30000;}
.portfolio .overview .bg04{background: rgb(173,0,3); background: linear-gradient(319deg, rgba(173,0,3,1) 0%, rgba(230,0,18,1) 23%, rgba(237,108,0,1) 100%);}
.portfolio .overview .bg05{background: rgb(1,27,72); background: linear-gradient(121deg, rgba(1,27,72,1) 23%, rgba(227,110,17,1) 100%);}
.portfolio .overview .bg06{background: rgb(41,71,176);
background: linear-gradient(121deg, rgba(41,71,176,1) 23%, rgba(30,53,132,1) 100%);}
.portfolio .overview .bg07{/* background: rgb(246,143,25); background: linear-gradient(121deg, rgba(246,143,25,1) 0%, rgba(236,104,17,1) 100%); */ background: #ed7100;}
.portfolio .overview .bg08{background: rgb(171,24,19); background: linear-gradient(121deg, rgba(171,24,19,1) 31%, rgba(145,12,7,1) 100%);}
.portfolio .overview .bg09{background: rgb(220,198,10); background: linear-gradient(121deg, rgba(220,198,10,1) 0%, rgba(243,191,10,1) 50%, rgba(225,166,9,1) 100%);}
.portfolio .overview .bg10{background: rgb(24,54,135); background: linear-gradient(121deg, rgba(24,54,135,1) 0%, rgba(42,166,208,1) 100%);}
.portfolio .overview .bg11{background: rgb(34,123,192); background: linear-gradient(45deg, rgba(34,123,192) 0%, rgba(23,69,148,1) 100%);}
.portfolio .overview .bg12{background: rgb(0,172, 204); background: linear-gradient(45deg, rgba(0,172, 204) 0%, rgba(0,133,158,1) 100%);}
.portfolio .overview .bg13{background: rgb(198,0,77); background: linear-gradient(135deg, rgba(198,0,77,1) 0%, rgba(157,2,63,1) 100%);}
.portfolio .overview .bg14{background: rgb(252, 176, 52); background: linear-gradient(135deg, rgba(252, 176, 52) 0%, rgba(237, 26, 46) 100%);}

.portfolio .overview .info{padding-left: 0 !important; padding-right: 0 !important;}
.portfolio .overview .info .tit .link{display:inline-block;	vertical-align: top; margin-top: 38px;}
.portfolio .overview .info .tit .link a{position:relative; display:flex; height: 48px; align-items:center; justify-content:center; font-family: 'Red Hat Display', sans-serif; font-weight:500; font-size:12px; letter-spacing:0.06em; color: #666; text-transform: uppercase; box-sizing:border-box; border:1px solid #e5e5e5; border-radius:24px; padding: 0 30px; transition:0.3s; overflow: hidden; z-index: 2;} 
.portfolio .overview .info .tit .link a::before{content:''; position:absolute; top: 0; right: 0; width: 0; height: 100%; transition:0.5s; z-index: -1;}
.portfolio .overview .info .tit .link01 a::before{background: rgb(255,143,34); background: linear-gradient(120deg, rgba(255,143,34,1) 0%, rgba(243,115,33,1) 100%);}
.portfolio .overview .info .tit .link02 a::before{background: rgb(3,56,113); background: linear-gradient(120deg, rgba(3,56,113,1) 0%, rgba(0,41,87,1) 100%);}
.portfolio .overview .info .tit .link03 a::before{background: #e30000;}
.portfolio .overview .info .tit .link04 a::before{background: rgb(173,0,3); background: linear-gradient(319deg, rgba(173,0,3,1) 0%, rgba(230,0,18,1) 23%, rgba(237,108,0,1) 100%);}
.portfolio .overview .info .tit .link05 a::before{background: rgb(1,27,72); background: linear-gradient(121deg, rgba(1,27,72,1) 23%, rgba(227,110,17,1) 100%);}
.portfolio .overview .info .tit .link06 a::before{background: rgb(41,71,176); background: linear-gradient(121deg, rgba(41,71,176,1) 23%, rgba(30,53,132,1) 100%);}
.portfolio .overview .info .tit .link07 a::before{/* background: rgb(246,143,25); background: linear-gradient(121deg, rgba(246,143,25,1) 0%, rgba(236,104,17,1) 100%); */background: #ed7100;}
.portfolio .overview .info .tit .link08 a::before{background: rgb(171,24,19); background: linear-gradient(121deg, rgba(171,24,19,1) 31%, rgba(145,12,7,1) 100%);}
.portfolio .overview .info .tit .link09 a::before{background: rgb(220,198,10); background: linear-gradient(121deg, rgba(220,198,10,1) 0%, rgba(243,191,10,1) 50%, rgba(225,166,9,1) 100%);}
.portfolio .overview .info .tit .link10 a::before{background: rgb(24,54,135); background: linear-gradient(121deg, rgba(24,54,135,1) 0%, rgba(42,166,208,1) 100%);}
.portfolio .overview .info .tit .link11 a::before{background: rgb(23,69,148); background: linear-gradient(50deg, rgba(23,69,148,1) 0%, rgba(34,123,192,1) 100%);}
.portfolio .overview .info .tit .link12 a::before{background: rgb(0,172,204); background: linear-gradient(45deg, rgba(0,172,204,1) 0%, rgba(0,112,133,1) 100%);}
.portfolio .overview .info .tit .link13 a::before{background: rgb(198,0,77); background: linear-gradient(135deg, rgba(198,0,77,1) 0%, rgba(157,2,63,1) 100%);}
.portfolio .overview .info .tit .link14 a::before{background: rgb(252, 176, 52); background: linear-gradient(135deg, rgba(252, 176, 52) 0%, rgba(237, 26, 46) 100%);}

.portfolio .overview .info .tit .link a .arrow{width: 18px; height: 8px; background:url(/img/sub/icon_arrow.png) 50% 50% no-repeat; background-size:cover !important; margin-left: 20px; transition:0.3s}
.portfolio .overview .info .tit .link:hover a{color: #fff;}
.portfolio .overview .info .tit .link:hover a::before{width: 100%; left: 0;}
.portfolio .overview .info .tit .link:hover a .arrow{ background:url(/img/sub/icon_arrowH.png) 50% 50% no-repeat; }
/* 이미지 */
.portfolio .overview .view_img{position:relative; padding: 19px;  border:1px solid #e4e4e4; border-radius:30px; box-sizing:border-box; z-index: 10;}
.portfolio .overview .view_img img, .portfolio .overview .view_img video{width: 100%; max-width: 1580px; border-radius:20px}
.portfolio .overview .view_img .mobile{display:none; }

/* 영상 */
.portfolio .overview .view_video{position:relative; max-height: 764px; margin: 19px; border:1px solid #e4e4e4; border-radius:30px; box-sizing:border-box; z-index: 10; overflow: hidden; padding-bottom:44%;}
.portfolio .overview .view_video video{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 100%; height: auto; max-width: 1580px; border-radius:20px}
.portfolio .overview .circle_list{display:flex; justify-content:center; padding: 120px 0; box-sizing:border-box;}
.portfolio .overview .circle_list .item{position:relative; padding-bottom: 19.754%; width: 20%; border-radius:50%; max-width: 320px; margin: 0 -8px; backdrop-filter:blur(1px);}
.portfolio .overview .circle_list .item::before{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.1;  border-radius:50%}
.portfolio .overview .circle_list .item:not(.item.in)::after{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; border:1px solid #fff; opacity: 0.2; box-sizing:border-box; border-radius:50%}
.portfolio .overview .circle_list .item.in{margin-left: 158px; order:10}
.portfolio .overview .circle_list .item.in::before{opacity: 1;}
.portfolio .overview .circle_list .item.in::after{content:''; position:absolute; top: 50%; left: -111px; width: 69px; height: 3px; background:url(/img/sub/icon_dots.png) 50% 50% no-repeat;}
.portfolio .overview .circle_list .item.in .in_logo{}
.portfolio .overview .circle_list .item.in .in_logo img{}
.portfolio .overview .circle_list .item .center{position:absolute; top: 50%; left: 50%; width: 90%; text-align: center; transform:translate(-50%,-50%);}
.portfolio .overview .circle_list .item .center h4{font-weight:500; font-size:24px; color: #fff;}
.portfolio .overview .circle_list .item .center p{font-family: 'Red Hat Display', sans-serif; font-size:16px; color: #fff; opacity: 0.6; margin-top: 14px;}

.portfolio .overview .circle_list.item04 .item.in{margin-left: 50px;}
.portfolio .overview .circle_list.item04 .item.in::after{left: -33px; width: 23px; height: 3px; background:url(/img/sub/icon_dots02.png) 50% 50% no-repeat;}

/* concept */
.portfolio .concept{}
.portfolio .concept.bgg{}
.portfolio .concept .preview{position:relative; text-align: center; overflow: hidden; padding-bottom:100px;}
.portfolio .concept .preview .img{max-width: none;}
.portfolio .concept .preview .img_line{position: absolute; top: 0; left: 50%; max-width: none; transform:translateX(-50%);}
.portfolio .concept .preview .img.img_shadow{box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.03);}
.portfolio .concept .slide_wrap{position:relative; background: #171926; padding: 240px 0; box-sizing:border-box; overflow: hidden;}
.portfolio .concept .slide_wrap .move_txt p{position:absolute; top: 40px; left: 40px; font-weight:bold; font-size:250px; color: #202232; opacity: 0.5;}
.portfolio .concept .slide_wrap .move_txt p:last-of-type{top: auto; left: auto; bottom: 40px; right: 40px;}
.portfolio .concept .slide_wrap .slide_ctn .slick-list{padding-bottom:60px !important;}
.portfolio .concept .slide_wrap .slide_ctn .item{position:relative; top: 0; margin: 0 30px; transition:1s cubic-bezier(0.45, 0, 0.55, 1)}
.portfolio .concept .slide_wrap .slide_ctn .item figure{}
.portfolio .concept .slide_wrap .slide_ctn .item figure img{}
.portfolio .concept .slide_wrap .slide_ctn .item.mt{position: relative; top: 60px;}
.portfolio .concept .slide_wrap .slide_ctn .item.slick_now{margin-top: 0;}

/* contents */
.portfolio .contents{}
.portfolio .contents .img_list{position:relative;  padding: 150px 0; box-sizing:border-box; overflow: hidden;}
.portfolio .contents .img_list.non::before{display:none; }
.portfolio .contents .img_list::before{content:''; position:absolute; bottom: 80px; right: -45px; width: 723px; height: 655px; background:url(/img/sub/tastable14.png) 50% 50% no-repeat; background-size:cover; }
/* 로고bg */
.portfolio .contents .img_list.bg03::before{bottom: -5px; right: auto; left: 150px; width: 1247px; height: 217px; background:url(/img/sub/kumho10.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg04::before{display:none; }
.portfolio .contents .img_list.bg05::before{bottom: 573px; right: auto; left: -70px; width: 1122px; height: 238px; background:url(/img/sub/kdone10.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg06::before{bottom: -5px; width: 1345px; height: 458px; background:url(/img/sub/genstarmate12.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg08::before{bottom: 60px; left: 70px; width: 462px; height: 467px; background:url(/img/sub/asiana12.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg07::before{bottom: 165px; right: auto; left: -150px; width: 979px; height: 888px; background:url(/img/sub/hanwha_convergence14.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg09::before{bottom: -5px; width: 614px; height: 495px; background:url(/img/sub/dine11.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg10::before{width: 771px; height: 648px; background:url(/img/sub/kogene13.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .img_list.bg11::before{width: 459px; height: 891px; background:url(/img/sub/precision11.png) 50% 50% no-repeat; background-size:cover; right: 0;}
.portfolio .contents .img_list.bg12::before{ display: none; }
.portfolio .contents .img_list.bg14::before{ display: none; }

.portfolio .contents .img_list > div{display:flex; flex-wrap:wrap;}
.portfolio .contents .img_list .item{position:relative; width: calc(50% - 30px); margin-right: 60px; z-index: 5;}
.portfolio .contents .img_list .item:last-of-type{margin-right: 0;}
.portfolio .contents .img_list .tit{padding: 70px 0 86px;}
.portfolio .contents .img_list .tit h3{font-family: 'Red Hat Display', sans-serif; font-weight:bold; font-size:70px; color: #222; text-transform: uppercase;}
.portfolio .contents .img_list .tit p{font-weight:400; font-size:18px; color: #333; line-height: 1.7; margin-top: 32px;}
.portfolio .contents .img_list figure{margin-bottom:60px;}
.portfolio .contents .img_list figure:last-of-type{margin-bottom:0;}
.portfolio .contents .img_list figure img{box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);}
.portfolio .contents .icon_list{padding: 150px 0; background: rgb(255,143,34); background: linear-gradient(120deg, rgba(255,143,34,1) 0%, rgba(243,115,33,1) 100%); box-sizing:border-box;}
/* icon_bg */
.huvis .contents .icon_list{background: rgb(3,56,113); background: linear-gradient(120deg, rgba(3,56,113,1) 0%, rgba(0,41,87,1) 100%);}
.kumho .contents .icon_list{background: #e30000;}
.redcap .contents .icon_list{background: rgb(173,0,3);
background: linear-gradient(319deg, rgba(173,0,3,1) 0%, rgba(230,0,18,1) 23%, rgba(237,108,0,1) 100%);}
.kdone .contents .icon_list{background: rgb(1,27,72);
background: linear-gradient(121deg, rgba(1,27,72,1) 23%, rgba(227,110,17,1) 100%);}
.genstar .contents .icon_list{background: rgb(41,71,176);
background: linear-gradient(121deg, rgba(41,71,176,1) 23%, rgba(30,53,132,1) 100%);}
.asiana .contents .icon_list{background: rgb(171,24,19); background: linear-gradient(121deg, rgba(171,24,19,1) 31%, rgba(145,12,7,1) 100%);}
.dine .contents .icon_list{background: rgb(220,198,10); background: linear-gradient(121deg, rgba(220,198,10,1) 0%, rgba(243,191,10,1) 50%, rgba(225,166,9,1) 100%);}
.kogene .contents .icon_list{background: rgb(24,54,135); background: linear-gradient(121deg, rgba(24,54,135,1) 0%, rgba(42,166,208,1) 100%);}
.hanwha .contents .icon_list{background: rgb(236,104,17); background: linear-gradient(180deg, rgba(236,104,17,1) 0%, rgba(246,143,25,1) 100%);}
.precision .contents .icon_list{ background: rgb(34,123,192); background: linear-gradient(45deg, rgba(34,123,192,1) 0%, rgba(23,69,148,1) 100%); }
.donga .contents .icon_list{ background: rgb(0, 172, 204); background: linear-gradient(45deg, rgba(0, 172, 204,1) 0%, rgba(0, 133, 158,1) 100%); }
.lg .contents .icon_list{ 
background: rgb(198,0,77); background: linear-gradient(135deg, rgba(198,0,77,1) 0%, rgba(157,2,63,1) 100%);}
.harim .contents .icon_list{ 
background: rgb(198,0,77); background: linear-gradient(135deg, rgba(252, 176, 52) 0%, rgba(237, 26, 46) 100%);}

.portfolio .contents .icon_list > div{display:flex; flex-wrap:wrap;}
.bg11 .portfolio .contents .icon_list > div{ align-items: center; }
.portfolio .contents .icon_list figure{text-align: center; width: 14.28571428571429%; text-align: center; margin-bottom:120px;}
.portfolio .contents .icon_list figure:nth-of-type(n + 8){margin-bottom:0;}
.portfolio .contents .mockup{overflow: hidden; height: 100vh;}
.portfolio .contents .mockup .bg{height: 100vh; transform:scale(1.8);}
/* 목업이미지 */
.portfolio .contents .mockup .bg01{background:url(/img/sub/tastable15.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg02{background:url(/img/sub/portfolio_mockup02.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg03{background:url(/img/sub/portfolio_mockup03.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg04{background:url(/img/sub/portfolio_mockup04.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg05{background:url(/img/sub/portfolio_mockup05.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg06{background:url(/img/sub/portfolio_mockup06.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg07{background:url(/img/sub/hanwha_convergence29.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg08{background:url(/img/sub/portfolio_mockup08.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg09{background:url(/img/sub/portfolio_mockup09.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg10{background:url(/img/sub/portfolio_mockup10.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg11{background:url(/img/sub/portfolio_mockup11.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg12{background:url(/img/sub/portfolio_mockup12.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg13{background:url(/img/sub/lg_hicaresolution30.png) 50% 50% no-repeat; background-size:cover;}
.portfolio .contents .mockup .bg14{background:url(/img/sub/portfolio_mockup14.png) 50% 50% no-repeat; background-size:cover;}


.portfolio .contents .bot_link{display:flex; flex-wrap:wrap; padding: 80px 0;}
.portfolio .contents .bot_link > div{width: calc(50% - 20px); height: 400px; position:relative; background-size:cover !important; margin-right: 40px;}
.portfolio .contents .bot_link > div::before{content:''; position:absolute; bottom: 0; left: 0; width: 100%; height: 0; opacity: 0.8; transition:0.8s}
.portfolio .contents .bot_link > div:last-of-type{margin-right: 0;}
.portfolio .contents .bot_link > div a{position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}
.portfolio .contents .bot_link > div .txt{position:absolute; top: 64%; left: 0; transform:translateY(-50%); width: 100%; text-align: center; z-index: 5; transition:0.8s}
.portfolio .contents .bot_link > div .txt p{font-family: 'Red Hat Display', sans-serif; font-weight:500; font-size:18px; color: #fff; transition:0.4s}
.portfolio .contents .bot_link > div .txt h4{font-family: 'Cormorant', serif; font-weight:bold; text-transform: uppercase; font-size:80px; color: #fff; margin-top: 6px; opacity: 0; transition:0.4s}
/* 링크 배경 */
.portfolio .contents .bot_link .bg01{background:url(/img/sub/bot_link01.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg01::before{background: #f37321;}
.portfolio .contents .bot_link .bg02{background:url(/img/sub/bot_link02.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg02::before{background: #0054a6;}
.portfolio .contents .bot_link .bg03{background:url(/img/sub/bot_link03.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg03::before{background: #e50112;}
.portfolio .contents .bot_link .bg04{background:url(/img/sub/bot_link04.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg04::before{background: rgb(173,0,3); background: linear-gradient(319deg, rgba(173,0,3,1) 0%, rgba(230,0,18,1) 50%, rgba(237,108,0,1) 100%); opacity: 0.6;}
.portfolio .contents .bot_link .bg05{background:url(/img/sub/bot_link05.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg05::before{background: rgb(1,27,72); background: linear-gradient(121deg, rgba(1,27,72,1) 23%, rgba(227,110,17,1) 100%);}
.portfolio .contents .bot_link .bg06{background:url(/img/sub/bot_link06.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg06::before{background: #14236f;}
.portfolio .contents .bot_link .bg07{background:url(/img/sub/bot_hanwha.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg07::before{/* background: rgb(246,143,25); background: linear-gradient(121deg, rgba(246,143,25,1) 0%, rgba(236,104,17,1) 100%); */ background: rgb(237,109,0);
background: linear-gradient(127deg, rgba(237,109,0,1) 0%, rgba(173,0,3,1) 100%); opacity: 0.5;}
.portfolio .contents .bot_link .bg08{background:url(/img/sub/bot_link08.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg08::before{background: rgb(171,24,19); background: linear-gradient(121deg, rgba(171,24,19,1) 31%, rgba(145,12,7,1) 100%);}
.portfolio .contents .bot_link .bg09{background:url(/img/sub/bot_link09.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg09::before{background: rgb(220,198,10); background: linear-gradient(121deg, rgba(220,198,10,1) 0%, rgba(243,191,10,1) 50%, rgba(225,166,9,1) 100%);}
.portfolio .contents .bot_link .bg10{background:url(/img/sub/bot_link10.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg10::before{background: rgb(24,54,135); background: linear-gradient(121deg, rgba(24,54,135,1) 0%, rgba(42,166,208,1) 100%);}
.portfolio .contents .bot_link .bg11{background:url(/img/sub/bot_link11.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg11::before{background: rgb(0, 84, 166); background: linear-gradient(121deg, rgba(0, 84, 166,1) 0%, rgba(0, 84, 166,1) 100%);}
.portfolio .contents .bot_link .bg12{background:url(/img/sub/bot_link12.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg12::before{background: rgb(0,147,175); background: linear-gradient(121deg, rgba(0,147,175,1) 0%, rgba(0,147,175,1) 100%);}

.portfolio .contents .bot_link .bg13{background:url(/img/sub/bot_link13.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg13::before{background: #c6004d;}

.portfolio .contents .bot_link .bg14{background:url(/img/sub/bot_link14.png) 50% 50% no-repeat;}
.portfolio .contents .bot_link .bg14::before{background: #ed1a2e;}

/* hover */
.portfolio .contents .bot_link > div:hover::before{height: 100%; top: 0;}
.portfolio .contents .bot_link > div:hover .txt{top: 53%;}
.portfolio .contents .bot_link > div:hover .txt p{opacity: 0.5;}
.portfolio .contents .bot_link > div:hover .txt h4{opacity: 1;}

/* media */
/* 125% 노트북 */
.ratio .portfolio .top h2{font-size:5.3vw}
.ratio .portfolio .scon .info .tit h3{font-size:4vw;}

/* 애니메이션 */
.ani{opacity: 0;}
.ani.on{opacity: 1;}
.portfolio .top > figure{animation:rotateX 1.5s 0.5s cubic-bezier(0.5, 1, 0.89, 1) both}
.tastable .top h2 span{animation:moveTxt01 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.huvis .top h2 span{animation:moveTxt02 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.kumho .top h2 span{animation:moveTxt03 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.redcap .top h2 span{animation:moveTxt04 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.kdone .top h2 span{animation:moveTxt05 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.genstar .top h2 span{animation:moveTxt06 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
/* .golfzone .top h2 span{animation:moveTxt07 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;} */
.hanwha .top h2 span{animation:moveTxt07 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.asiana .top h2 span{animation:moveTxt08 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.dine .top h2 span{animation:moveTxt09 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.kogene .top h2 span{animation:moveTxt10 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.precision .top h2 span{animation:moveTxt11 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.donga .top h2 span{animation:moveTxt12 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.lg .top h2 span{animation:moveTxt13 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.harim .top h2 span{animation:moveTxt14 1.5s cubic-bezier(0.5, 1, 0.89, 1) both;}
.portfolio .visual .bg{animation:upScale 1.2s 0.6s both}

.portfolio .contents .mockup.ani{opacity: 1;}
.portfolio .contents .icon_list.on{animation:fadeUp 1s both}
.portfolio .contents .mockup.on .bg{animation:scaleOut 1.6s both}
@keyframes fadeUp{
	0%{opacity: 0; transform:translateY(100px);}
	100%{opacity: 1; transform:translateY(0);}
}
@keyframes scaleOut{
	0%{transform: scale(1.8);}
	100%{transform: scale(1);}
}

@keyframes moveLeft{
	0%{left: -50%;}
	100%{left: 120%;}
}

@keyframes moveRight{
	0%{right: -50%;}
	100%{right: 120%;}
}

@keyframes upScale{
	0%{width: 80%; top: 100px; opacity: 0;}
	100%{width: 100%; top: 0; opacity: 1;}
}

@keyframes rotateX{
	0%{transform:rotateX(90deg);}
	100%{transform:rotateX(0deg);}
}

@keyframes moveTxt01{
	0%{opacity: 0; color: #e87127; left:-120px;}
	10%{opacity: 0;}
	20%{color: #e87127;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt02{
	0%{opacity: 0; color: #01b4e5; left:-120px;}
	10%{opacity: 0;}
	20%{color: #01b4e5;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt03{
	0%{opacity: 0; color: #e30000; left:-120px;}
	10%{opacity: 0;}
	20%{color: #e30000;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt04{
	0%{opacity: 0; color: #EE1E24; left:-120px;}
	10%{opacity: 0;}
	20%{color: #EE1E24;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt05{
	0%{opacity: 0; color: #0b2f6f; left:-120px;}
	10%{opacity: 0;}
	20%{color: #0b2f6f;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt06{
	0%{opacity: 0; color: #14236f; left:-120px;}
	10%{opacity: 0;}
	20%{color: #14236f;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt07{
	0%{opacity: 0; color: #ed7100; left:-120px;}
	10%{opacity: 0;}
	20%{color: #ed7100;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt08{
	0%{opacity: 0; color: #ed1b24; left:-120px;}
	10%{opacity: 0;}
	20%{color: #ed1b24;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt09{
	0%{opacity: 0; color: #d5b825; left:-120px;}
	10%{opacity: 0;}
	20%{color: #d5b825;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}
@keyframes moveTxt10{
	0%{opacity: 0; color: #183687; left:-120px;}
	10%{opacity: 0;}
	20%{color: #183687;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}

@keyframes moveTxt11{
	0%{opacity: 0; color: #174594; left:-120px;}
	10%{opacity: 0;}
	20%{color: #174594;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}

@keyframes moveTxt12{
	0%{opacity: 0; color: #0093af; left:-120px;}
	10%{opacity: 0;}
	20%{color: #0093af;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}

@keyframes moveTxt13{
	0%{opacity: 0; color: #C6004D; left:-120px;}
	10%{opacity: 0;}
	20%{color: #C6004D ;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}

@keyframes moveTxt14{
	0%{opacity: 0; color: #ed1a2e; left:-120px;}
	10%{opacity: 0;}
	20%{color: #ed1a2e ;}
	70%{left: 0;}
	100%{opacity: 1; color: #222;}
}



/* 반응형 */
@media screen and (max-width: 1700px){
	.portfolio .contents .bot_link > div .txt h4{font-size:65px;}
}

@media screen and (max-width: 1500px){
	.portfolio .scon .info{padding: 100px 0 80px;}
	.portfolio .scon .info .tit{width: 390px;}
	.portfolio .contents .img_list .tit h3,
	.portfolio .scon .info .tit h3{font-size:60px;}
	.portfolio .scon .info .txt{width: calc(100% - 390px); margin-top: 26px;}

	.portfolio .top h2{font-size:80px;}
	.portfolio .top .page_btn > div{width: 200px; height: 140px; overflow: hidden; bottom: 0;}
	.portfolio .top .page_btn > div > p{line-height: 140px;}
	.portfolio .top .page_btn > div .hover{padding: 0 20px;}
	.portfolio .top .page_btn > div .hover p i{line-height: 142px;}
/* 	.portfolio .top .page_btn > div .hover figure{top: 50%; left: 50%; transform:translate(-50%,-50%);} */
	.portfolio .visual{margin-top: 60px;}
	.portfolio .visual .bg{height: 600px;}
	.portfolio .overview .circle_list{padding: 60px 0;}
	.portfolio .concept .slide_wrap{padding: 140px 0;}
	.portfolio .concept .slide_wrap .move_txt p{top: 10px;}
	.portfolio .concept .slide_wrap .move_txt p:last-of-type{bottom: 0;}
	.portfolio .concept .slide_wrap .slide_ctn .item{width: 300px;}
	.portfolio .contents .img_list .tit p{margin-top: 26px;}
}

@media screen and (max-width: 1400px){
	
	
	.portfolio .top .page_btn > div .hover p{font-size:20px;}
	.portfolio .top .page_btn > div.page_btn07 .hover p{transform:translateX(0)}
	.portfolio .scon .info .txt p br{display:none; }
	.portfolio .overview .bg{height: 60vh;}
	.portfolio .overview .circle_list .item .center h4{font-size:20px;}
	.portfolio .overview .circle_list .item .center p{margin-top: 10px;}
	.portfolio .overview .circle_list .item.in{margin-left: 100px;}
	.portfolio .overview .circle_list .item.in::after{left: -80px;}
	.portfolio .overview .circle_list .item.in .in_logo{width: 90%; margin: 0 auto;}
	.portfolio .scon .info{padding: 100px 50px 80px;}
	.portfolio .concept .preview{padding: 0 50px 80px;}
	.portfolio .concept .preview .img{max-width: 100%;}
	.portfolio .concept .preview .img_line{display:none; }
	.portfolio .contents .bot_link > div{height: 300px;}
	.portfolio .contents .bot_link > div .txt{top: 68%;}

	.portfolio .contents .bot_link > div .txt h4{font-size:55px;}

}

@media screen and (max-width: 1200px){
	.portfolio{padding-top: 150px;}
	.portfolio .top h2{font-size:60px;}
	.portfolio .visual{margin-top: 30px;}
	.portfolio .visual .bg{height: 500px;}
	.portfolio .scon .info{padding: 60px 16px;}
	.portfolio .overview::after{height: 100vh;}
	.portfolio .overview .view_img{padding: 15px;}
	.portfolio .overview .circle_list{display: block; text-align: center;}
	.portfolio .overview .circle_list .item.in{display:block; width: 280px; padding-bottom:280px; margin: 0 auto;}
	.portfolio .overview .circle_list .item.in::after{display:none; }
	.portfolio .overview .circle_list .item{display:inline-block; width: 260px; padding-bottom:260px; vertical-align: top;}
	/* 세개 */
	.portfolio .overview .circle_list.item03 .item.in{margin-bottom:30px;}
	.portfolio .overview .circle_list.item04 .item.in{margin: 0 auto 30px;}
	.portfolio .overview .circle_list.item04 .item{width: 250px; padding-bottom:250px;}

	.portfolio .concept .preview{padding: 0 16px 60px;}
	.portfolio .concept .slide_wrap{padding: 100px 0;}
	.portfolio .concept .slide_wrap .move_txt p{font-size:110px;}
	.portfolio .concept .slide_wrap .slide_ctn .item{width: 250px;}
	.portfolio .contents .img_list{padding: 100px 0;}
	.portfolio .contents .img_list::before{bottom: -10%; right: -10%;}
	.portfolio .contents .img_list .tit p br{display:none;}
	.portfolio .contents .icon_list{padding: 100px 16px;}
	.portfolio .contents .icon_list figure{margin-bottom:60px;}
	.portfolio .contents .mockup{height: auto;}
	.portfolio .contents .mockup .bg{height: 70vh;}
	.portfolio .contents .bot_link > div{height: 200px;}
	.portfolio .contents .bot_link > div .txt{top: 73%;}
	.portfolio .contents .bot_link > div .txt h4{font-size:45px;}

}

@media screen and (max-width: 1000px){
	

	.portfolio .top .page_btn{display:none;}
	.portfolio .visual .bg{height: 380px;}
	.portfolio .scon .info .tit{display:flex; align-items:center; justify-content:space-between; width: 100%;}
	.portfolio .scon .info .txt{width: 100%;}
	.portfolio .overview .bg{max-height: none;}
	.portfolio .overview .info .tit .link{margin-top: 10px;}
	.portfolio .overview .info .tit .link a{color: #fff; height: 42px; padding: 0 20px;}
	.portfolio .overview .info .tit .link a .arrow{background: url(/img/sub/icon_arrowH.png) 50% 50% no-repeat;}
	.portfolio .overview .info .tit .link a::before{width: 100%; left: 0;}
	
	.portfolio .contents .img_list .item{width: calc(50% - 15px); margin-right: 30px;}
	.portfolio .contents .img_list figure{margin-bottom:30px;}
	.portfolio .contents .img_list .tit{padding: 40px 0;}
	
	.portfolio .contents .icon_list figure img{transform:scale(0.8);}
	.portfolio .contents .mockup .bg{height: 460px;}
	.portfolio .contents .bot_link{padding: 50px 0;}
	.portfolio .contents .bot_link > div{width: calc(50% - 10px); margin-right: 20px;}	
	.portfolio .contents .bot_link > div .txt h4{font-size:38px;}


	.portfolio .overview .circle_list.item04 .item{width: 50%; padding-bottom:50%; max-width: none;}
	.portfolio .overview .circle_list.item04 .item:nth-of-type(n + 4){margin-top: -8px;}


}

@media screen and (max-width: 800px){
	.portfolio .top h2{font-size:46px;}
	.portfolio .scon .info{padding: 50px 16px;}
	.portfolio .scon .info .tit h3{font-size:42px;}
	.portfolio .overview::after{height: 100vh;}
	.portfolio .overview .view_img{padding: 0; border:none}
	.portfolio .overview .view_img .mobile{display:inline-block;}
	.portfolio .overview .view_img .pc{display:none; }
	.portfolio .overview .info .tit .link{margin-top: 0;}
	.portfolio .overview .circle_list{padding: 50px 0;}
	.portfolio .overview .circle_list.item02 .item{width: 50%; max-width: none; padding-bottom:50%;}
	.portfolio .overview .circle_list.item03 .item{width: 33.33%; max-width: none; padding-bottom:33.33%;}


	.portfolio .scon .info .txt{margin-top: 15px;}
	.portfolio .scon .info .txt p{margin-top: 20px; font-size:16px;}
	.portfolio .concept .preview{padding: 0 16px 40px;}
	.portfolio .contents .img_list{padding: 50px 0;}
	.portfolio .contents .img_list::before{bottom: -6%; right: -38%;}
	.portfolio .contents .img_list .tit{padding: 0 0 50px;}
	.portfolio .contents .img_list .tit p{margin-top: 5px;}
	.portfolio .contents .img_list .item{width: 100%; margin-right: 0;}
	.portfolio .contents .img_list .item figure:last-of-type{margin-bottom:30px;}
	.portfolio .contents .img_list .item:last-of-type figure:last-of-type{margin-bottom:0;}
	.portfolio .contents .img_list figure img{width: 100%;}
	.portfolio .contents .icon_list{padding: 50px 16px;}

	.portfolio .contents .mockup .bg{height: 400px;}
	.portfolio .contents .bot_link > div .txt{top: 52%;}
	.portfolio .contents .bot_link > div .txt h4{display:none; }
	
	.portfolio .contents .icon_list figure{position:relative; padding-bottom:14.28571428571429%;}
	.portfolio .contents .icon_list figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) scale(0.65);}



}

@media screen and (max-width: 600px){
	.portfolio .overview::after{height: 67vh;}
	.portfolio .scon .info .txt .tag{flex-wrap:wrap;}
	.portfolio .scon .info .txt .tag li{width: 50%; margin-right: 0; margin-bottom:10px;}
	.portfolio .scon .info .txt .tag li:last-of-type{margin-bottom:0;}
	.portfolio .contents > .w1820{padding: 0;}
	.portfolio .contents .bot_link{padding: 30px 0;}
	.portfolio .contents .bot_link > div{width: 50%; height: 140px; margin-right: 0;}
	
	.portfolio .overview .circle_list.item03{text-align: left;}
	.portfolio .overview .circle_list.item03 .item{width: calc(50% + 14px);padding-bottom:calc(50% + 14px);}
	.portfolio .overview .circle_list.item03 .item:nth-of-type(n + 4){margin-top: -8px;}

}

/* 가로 */
@media screen and (max-height: 480px) {
	.portfolio .overview::after{height: 600px;}
}