@charset "utf-8";

/* common */
.wrap{margin:0 100px;}
.tit_cont h2{line-height:1.3; font-weight:600; font-size:60px; color:#222;}
.tit_cont p{line-height:1.7; margin-top:30px; font-size:17px; color:#666;}
.tit_cont .btn_basic{margin-top:70px;}

/* visual */
.area_visual{position:relative; z-index:5; background:#000;}
.area_visual .list li,
.area_visual .bx-viewport{height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1);}
.area_visual .list li{background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.area_visual .list .inner{display:flex; align-items:center; height:100%;}
.area_visual .list .inner *{font-family:'Pretendard', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; color:#fff;}
.area_visual .list .inner span{display:block;}
.area_visual .list .txt h3{position:relative; left:-1px; line-height:1.3; font-weight:600; font-size:65px;}
.area_visual .list .txt p{line-height:1.9; margin-top:30px; font-weight:600; font-size:19px;}
.area_visual .list .txt{margin-top:80px;}
.area_visual .bx-controls-direction a:hover:after{opacity:0.4;}
.area_visual .list li i{display:block; position:absolute; z-index:-1; width:100vw; height:100%; background-size:cover; background-position:50% 50%; transform:scale(1); animation:visualScale 8s ease 0s forwards;}

/* bx pager common set */
.bx-controls{position:absolute; top:80%; top:477px; right:486px; z-index:51;}
.bx-controls > .bx-pager{width:1200px; margin:0 auto;}
.bx-controls > .bx-pager a{display:block; float:left; overflow:hidden; width:12px; height:12px; margin:0 3px; border:1px solid #222; text-indent:-9999px; transition:all 0.4s ease-out 0s; border-radius:40px;}
.bx-controls > .bx-pager > div{float:left; margin-right:10px;}
.bx-controls > .bx-pager a.active{background:#222;}

/* 이전다음버튼일때 */
.area_visual .bx-controls > div{position:relative;}
.area_visual .bx-controls-direction a.bx-prev:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .bx-controls-direction a:hover{opacity:1;}
.area_visual .bx-controls-direction a{display:block; display:flex; justify-content:center; align-items:center; position:absolute; overflow:hidden; width:62px; height:62px; background:rgba(255,255,255,0.11); text-indent:-9999px; transition:all 0.2s ease-out 0s; border-radius:100px;}
.area_visual .bx-controls-direction a:after{content:""; width:8px; height:12px; background:url(/theme/oryxart/img/arr_slider01.svg) no-repeat 50% 50%; transition:all 0.2s ease-out 0s;}
.area_visual .bx-controls-direction a.bx-next{margin-left:192px;}

.area_visual .box_total{position:absolute; top:467px; right:316px; z-index:999;}
.area_visual .box_total > div{display:flex; justify-content:flex-end; align-items:baseline;}
.area_visual .box_total > div *{line-height:1; font-weight:600; font-weight:100; font-size:18px; color:#fff; letter-spacing:1px;}
.area_visual .box_total > div em{position:relative; margin-right:8px; font-weight:100; font-size:80px;}

/* section01 */
#section1 .tit_cont{display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:9; width:100%; height:100%; text-align:center; flex-direction:column;}
#section1 .img_cont > img{position:absolute; opacity:0; z-index:0; transition:all 1.8s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
#section1 .img_cont > img[data-img="01"]{top:173px; left:0; transform:translateY(100px) translateX(100%);}
#section1 .img_cont > img[data-img="02"]{right:100px; bottom:150px; transform:translateY(-100px) translateX(-100%);}
#section1 .img_cont > img[data-img="03"]{bottom:0; left:240px; transform:translateY(-100%) translateX(100%);}
#section1 .img_cont > img[data-img="04"]{top:40%; left:28%; transform:translateY(-100%) translateX(100%);}
#section1 .img_cont > img[data-img="05"]{top:-25px; left:40%; transform:translateY(100%) translateX(-10%);}

#section1.active .img_cont > img{opacity:1; transform:translateY(0px) translateX(0px);}
#section1.active .img_cont > img[data-img="01"],
#section1.active .img_cont > img[data-img="05"]{transition-delay:0.6s;}
#section1.active .img_cont > img[data-img="02"],
#section1.active .img_cont > img[data-img="04"]{transition-delay:0.7s;}
#section1.active .img_cont > img[data-img="03"]{transition-delay:0.6s;}

#section1.active .tit_cont > *{opacity:1; transform:translateY(0px);}
#section1.active .tit_cont > h2{transition-delay:0.2s;}
#section1.active .tit_cont > p{transition-delay:0.3s;}
#section1.active .tit_cont > a{transition-delay:0.4s;}

#section1 .tit_cont > *{opacity:0; transition:all 1.2s cubic-bezier(0.25, 0.47, 0.12, 0.99); transform:translateY(-80px);}

/* 뉴스 */
.main #section4 .wrap{margin: 7% 0 0 100px;}
#section4{ background-image: url(/theme/oryxart/img/ec_bg02.jpg) !important; background-size: cover;}
#section4 .tit_cont{display:flex; justify-content:space-between; align-items:flex-end; opacity:0; margin-right:0px; margin-bottom:60px; transition:all 1.2s cubic-bezier(0.25, 0.47, 0.12, 0.99); transform:translateY(-80px);}
#section4 .tit_cont > span{position:absolute; opacity:0.1; top:-170px; right:90px; z-index:-1; line-height:0.9; font-weight:900; font-size:160px; color:#f76f00; -webkit-text-stroke:0.3px #fff;}
#section4.active .tit_cont{opacity:1; transform:translateY(0px); transition-delay:0.3s;}
#section4 .slider_cont .list li img {width: 100%;}
#section4 .tit_cont h2{font-weight:600; color:#fff;}
#section4 .pic_lt li{margin-right:5px}
#section4 .pic_lt img{ width:100%}


/* 서비스 */
#section3 .tit_cont{margin-bottom:280px;}
#section3 .tit_cont h2{font-size:36px;line-height:1}
#section3 .list_cont > div{margin-right:110px;}
#section3 .tit_cont h2 img{width:60%; display:block; margin-bottom:50px}
#section3.active .list_cont > div  > ul{opacity:1; transform:translateY(0);}
#section3.active .list_cont > div  > ul:first-child{transition-delay:0.3s;}
#section3.active .list_cont > div  > ul:last-child{transition-delay:0.5s;}
#section3 .inner{display:flex; justify-content:space-between; align-items:flex-end;}
.list_cont > div{display:flex;}
.list_icon > li{width:394px; background:#fff; box-shadow:20px 29px 58px 0px rgba(0, 84, 83, 0.15); transition:all 0.5s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
.list_icon > li > div{padding:50px 40px; text-align:right;}
.list_icon > li > div > p{font-size:17px; text-align:left;}
.list_icon > li > div > h5{font-weight:700; font-size:26px; color:#222; text-align:left;margin-top: 7px;}
.list_icon:last-child{margin:190px 0 0 46px;}
.list_icon > li:first-child{margin-bottom:40px;}
.list_icon > li > div a{display:block; margin-top:20px}
.list_icon > li > div > .img{display:inline-block; margin-top:-60px;}
.list_icon > li > div > .img img:last-child{display:none;}
.list_icon > li > div > .img img{display:block; height:89px;}
.list_icon > li > div *{transition:all 0.5s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
.list_icon > li:hover{background:#f76f00; box-shadow:30px 39px 58px 0px rgb(0 84 83 / 35%);}
.list_icon > li:hover .img img:last-child{display:block;}
.list_icon > li:hover .img img:first-child{display:none;}
.list_icon > li:hover > div > *, .list_icon > li:hover > div a{color:#fff;}
.list_icon{opacity:0; transition:all 1.2s cubic-bezier(0.25, 0.47, 0.12, 0.99); transform:translateY(-100px);}

/* 포트폴리오*/
.main #section2 .wrap{margin: 7% 0 0 100px;}
#section2{background:#000 !important; padding-top:7%}
#section2 h2{text-align:center}
#section2 h2 img{margin-bottom:20px}
#section2 .tit_cont{display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; z-index:9; width:100%; height:100%; text-align:center; flex-direction:column;}


/* en */
html[lang="en"] .area_visual .list .inner span{margin-top:10px; font-size:45px;}
html[lang="en"] .list_icon > li > div > h5{margin-top:8px; font-weight:800; font-size:25px;}
html[lang="en"]  .list_icon > li > div > p{width:70%; font-size:17px;}
html[lang="en"] .tit_cont h2{line-height:1.2; font-size:61px; text-transform:capitalize;}
html[lang="en"] .area_partner .cont > ul > li{width:33%;}
html[lang="en"] .area_partner .cont > ul > li h5{line-height:1.5; font-size:22px;}
html[lang="en"] .area_subVisual .obr_txt{font-size:0;}
html[lang="en"] span.name_navi{font-size:12px;}

@keyframes visualScale{
	0%{transform:scale(1.13) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}

@media screen and (max-width:1919px){
	#section3 .list_cont > div{margin-right:0;}	
    .list_icon > li{width:364px;}
}

@media screen and (max-width:1600px){
	#header .btn_contact{top:80px}
	.area_visual .box_total{top:580px; right:186px;}	
    .bx-controls{top:600px; right:356px;}

    #section1 .img_cont > img[data-img="02"]{right:0;}
	#section3 .tit_cont h2{font-size:22px;}
	#section3	.tit_cont p{ font-size:14px;}
	#section3 .tit_cont h2 br{display:none;}
}

@media screen and (max-width:1440px){
	.main .wrap{margin:0 80px;}

    .list_icon:last-child{margin:190px 0 0 26px;}
	.list_icon > li:first-child{margin-bottom:26px;}
}

@media screen and (max-width:1366px){
	.bx-controls{right:326px;}

    .area_visual .box_total{right:156px;}
	.area_visual .list .txt h3{font-size:58px;}

    .list_icon > li{width:284px;}
}

@media screen and (max-width:1365px){
	.area_visual .box_total > div em{font-size:67px;}
	.area_visual .bx-controls-direction a.bx-next{margin-left:177px;}
	
    .bx-controls{right:310px;}

    .tit_cont h2{font-size:49px;}

    .main #section4 .wrap{margin:9% 0 0 70px;}
}

@media screen and (max-width: 1279px){
	.main .wrap{margin:0 60px;}
	
    .area_visual .bx-controls-direction a{width:52px; height:52px;}
	.area_visual .bx-controls-direction a.bx-next{margin-left:140px;}
	.area_visual .box_total > div em{font-size:47px;}
	.area_visual .box_total{top:600px; right:120px;}	
	.area_visual .list .txt h3{font-size:53px;}

    .bx-controls{right:246px;}
	
    .main #section4 .wrap{margin:19% 0 0 70px;}

    #section1 .img_cont > img{width:30%;}
	#section1 .img_cont > img[data-img="04"]{width:20%;}

	#section4 .list li{margin-right:25px !important; max-width:350px !important;}
	#section4 .list li:last-child{margin-right:0;}
	#section4 .list li img{width:100%;}
	#section4 .tit_cont{align-items:flex-start; margin-right:20px; flex-direction:column;}
	#section4 .tit_cont .btn_basic{margin-top:20px;}	
	#section4 .tit_cont > span{top:-170px; right:0; font-size:120px;}
	
	.list_icon:last-child{margin:0 0 0 26px;}		
    .list_icon > li{width:50%;}
	.list_icon > li > div{padding:30px;}
	.list_icon > li{margin-right:20px;}
	.list_icon:last-child > li:last-child{margin-right:0;}
	.list_icon > li > div > p{font-size: 14px;}
	.list_icon > li > div > h5{font-size:24px;}
	.list_icon > li:first-child{margin-bottom:0;}
    .list_icon > li > div > .img img{height:69px; margin-top:20px;}
	.list_icon > li:last-child{position:relative; top:-30px;}
	
    #section3 .inner{align-items:flex-start; flex-direction:column;}
    #section3 .tit_cont .btn_basic{margin-top:30px;}
	#section3 .tit_cont h2 br{display:block;}
	#section3 .tit_cont p{margin-top:20px;}
    #section3 .inner{padding-top:13vh; margin:0 20px}
	#section3 .tit_cont{margin-bottom:150px}
    #section3 .list_icon{display:flex;}	    
}

@media screen and (max-width:1023px){
	.main .wrap{margin:0 50px;}
	
    .area_visual .list .txt h3{font-size:47px;}
	.area_visual .list .txt p{margin-top:20px;}
    .area_visual .box_total{top:auto; bottom:42px;}
	
    .bx-controls{top:auto; right:246px; bottom:90px;}
	
	.tit_cont h2,
	#section3 .tit_cont h2{font-size:43px;}
	.tit_cont .btn_basic{margin-top:50px;}
	#section1 .img_cont > img[data-img="03"]{left:100px;}
	#section1.active .img_cont > img{opacity:0.4; width:34%;}
	#section1 .img_cont > img[data-img="02"]{bottom:380px; width:28%;}
	#section4 .tit_cont h2 br{display:none;}
	#section1 .tit_cont{top:4vh;}
	
    .list_icon > li > div{padding:21px;}
	.list_icon > li{margin-right:10px;}
	.list_icon > li > div > .img img{height:49px;}
}

@media screen and (min-height:940px){
	.area_visual .list li i{background-size:cover;}
}

@media screen and (max-width:767px){
	.main .wrap{margin:0 20px; !important}
	.area_visual .list .txt{margin-top:0;}
	.area_visual .list .txt h3{font-size: 35px;}
	.area_visual .list .txt p{line-height:1.6; margin-top:20px; font-size:17px;}
	.tit_cont h2,
	#section3 .tit_cont h2{font-size:42px;}
	#section1.active .tit_cont > p br{display:none;}
	#section1.active .tit_cont > p{margin-right: 30px;margin-left: 30px;}
}


@media screen and (max-width:639px){
	.wrap{margin:0 20px;}
	.bx-controls{top:auto; right:auto; bottom:90px; left:20px;}
	
    .area_visual .bx-controls-direction a{width:42px; height:42px;}
	.area_visual .bx-controls-direction a:after{opacity:0.9; width:6px; height:11px;}
	.area_visual .box_total > div em{margin-right:6px; font-size:23px;}
	.area_visual .box_total > div *{font-size:15px; letter-spacing:0px;}
	.area_visual .bx-controls-direction a.bx-next{margin-left:110px;}
	.area_visual .box_total{top:auto; right:auto; bottom:56px; left:77px;}
	
    .tit_cont h2, #section3 .tit_cont h2{line-height:1.4; font-size:30px;}
	.tit_cont p{margin-top:20px;font-size: 15px;}

    .main #section4 .wrap{margin:7% 0 0 40px;}

	#section1 .img_cont > img{opacity:0.3; width:auto !important; height:18%;}
	#section1.active .img_cont > img{opacity:0.3; transition-delay:0s !important;}
	#section1 .img_cont > img[data-img="03"]{left:50px;}
	#section1 .img_cont > img{transform:translateY(0px) translateX(0px) !important;}
		
    #section4 .tit_cont{margin-right:20px; margin-bottom:20px;}
	#section4 .list li{margin-right:15px !important; max-width:280px !important;}
	#section4 .tit_cont > span{top:-70px; right:-120px; font-size:80px;}

    .list_icon > li{width:180px; background:#f7f7f7; box-shadow:none; margin-bottom:10px !important}
	.list_icon > li:last-child{top:0;}	   
	.list_icon > li > div > h5{margin-top:6px; font-size:19px;}
	.list_icon > li > div > .img img{margin-top:-20px;}
    .list_icon > li > div > .img{margin-top:0px;}
	.list_cont{width:100%;/* overflow-x:scroll;*/}
	.list_icon:last-child{margin:0}
	.list_icon > li > div > p{ font-size:10px}

    #section3 .tit_cont{margin-bottom:30px;}
    #section3 .inner{padding-top:5vh;}
	#section3 .tit_cont .btn_basic{margin-top:25px;}
	#section3 .tit_cont p{margin-top:8px;}
	#section3 .tit_cont p br{display:none;}
	#section3 .list_icon{display:block}
	#section3 .tit_cont h2 img{ margin-bottom:10px; font-size:26px; line-height:2}

	#section2 h2 img{width:80%}
}

@media screen and (max-width:400px){
	.area_visual .list .txt h3{font-size:33px;}
	.area_visual .list .txt p{margin-top:20px; font-size:16px;}
	.main #section2 .wrap{margin:16% 0 0 40px;}
	.tit_cont h2, #section3 .tit_cont h2{font-size:28px;}
}

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