@import url("common.css");


/*** css 공통 ***/
.mainBg {background: linear-gradient(180deg, #FFF 0%, #F2F4F6 61.5%); position:fixed; top:0; left:0; width:100%; height:var(--vh); z-index:-1}  
.main_container {margin:120px auto 40px; display:flex; gap:30px}

/* Left */
.left_box {width:76%}

.left_box .visual {margin-bottom:30px; position:relative}
.left_box .visual .roll {padding:74px 50px 50px; border-radius:var(--borderR20); position:relative; aspect-ratio:251 / 120; box-sizing:border-box; overflow:hidden}
.left_box .visual .roll > * {position:relative; z-index:2}
.left_box .visual .roll .bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
.left_box .visual .roll::before {background:var(--black); position:absolute; top:0; left:0; width:100%; height:100%; border-radius:var(--borderR20); content:""; opacity:0.3}
.left_box .visual .roll h3 {font-family:var(--eng); color: var(--white); font-size: 3.333rem; font-weight: 700; line-height: 125%; margin-bottom:10px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;}
.left_box .visual .roll p {color: var(--white); font-size: 1rem; line-height: 177.778%; letter-spacing:-0.9px; transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0;}
.left_box .visual .roll img {position:absolute; bottom:50px; left:50px}

.left_box .visual .roll.action .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}
.left_box .visual .roll.action h3 {transform:translateY(0); opacity:1;}
.left_box .visual .roll.action p {transform:translateY(0); opacity:1;}

.slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; bottom:37px}
.slick-prev{background:url('/img/arrow_p.png') no-repeat center/100% auto; right:78px}
.slick-next{background:url('/img/arrow_n.png') no-repeat center/100% auto; position:absolute; right:38px; }
.slick-page {display:flex; position:absolute; right:128px; bottom:42px; z-index:9999}
.slick-page li {color: var(--white); font-size: 14px; font-weight: 600; line-height: 142.857%;/ letter-spacing: 0.28px;}
.slick-page li.dummy {opacity:0; visibility:hidden}
.slick-page li.cur{position:absolute; top:0; left:0; transition:all 0.4s}
.slick-page li.cur:not(.active) {opacity:0;}
.slick-page li:not(.cur) {opacity:0.7}
.slick-page li.slash {margin:0 8px}

.left_box .left_grid_box {display:grid; grid-template-columns:repeat(3,1fr); grid-gap:30px;}
.left_box .left_grid_box .box {border-radius:var(--borderR20); padding:40px 50px 40px 40px; box-sizing:border-box; height:315px; position:relative; overflow:hidden}
.left_box .left_grid_box .box > * {position:relative; z-index:2}
.left_box .left_grid_box .box:last-child {background:var(--sub)}
.left_box .left_grid_box .box:first-child::after {position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg, #1C2433 18.1%, rgba(28, 36, 51, 0.00) 114.13%); content:""}
.left_box .left_grid_box .box p.eng {color: var(--white); font-size: 0.889rem; font-weight: 600; line-height: 162.5%; letter-spacing: 0.32px; text-transform: uppercase; opacity:0.8; margin-bottom:4px}
.left_box .left_grid_box .box:nth-child(2) p.eng {color:var(--black); opacity:0.5}
.left_box .left_grid_box .box h4.fs24 {color:var(--white);}
.left_box .left_grid_box .box:nth-child(2) h4.fs24 {color:var(--black)}
.left_box .left_grid_box .box .lb40 {position:absolute; bottom:40px; left:40px;}
.left_box .left_grid_box .box ul li {color: var(--black); font-size: 0.889rem; font-weight: 600; line-height: 162.5%; letter-spacing: -1.12px; margin-bottom:6px}
.left_box .left_grid_box .box ul li:last-child {margin-bottom:0}
.left_box .left_grid_box .box .arrow {position:absolute; bottom:50px; right:50px; font-style:normal; transition:all 0.4s}
.left_box .left_grid_box .box .arrow::before {font-family:var(--icon); content:"\e941"; color:var(--white); font-size:25px}
.left_box .left_grid_box .box:nth-child(2) .arrow::before {color:var(--black)}

.left_box .left_grid_box .box:hover .arrow {transform:translateX(10px)}

/* Right */
.right_box {width:24%}
.right_item {width:100%; margin-bottom:30px; height:calc((100% - 60px) / 3); display:block; border-radius:var(--borderR20); padding:40px; box-sizing:border-box; position:relative; overflow:hidden}
.right_item::after {background:var(--main); position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:1; transition:all 0.4s}
.right_item > *:not(.right_item_bg) {position:relative; z-index:2}
.right_item .right_item_bg {position:absolute; top:0; left:0; width:100%; height:100%; content:""; opacity:0; transition:all 0.4s}
.right_item > svg {position:absolute; top:0; left:0; transition:all 0.4s}
.right_item:last-child {margin-bottom:0}
.right_item i {transition:all 0.4s}
.right_item .main_ico {bottom:40px; left:40px; position:absolute;}
.right_item .arrow_ico {font-style:normal; position:absolute; right:40px; bottom:40px}
.right_item .arrow_ico::before {font-family:var(--icon); content:"\e941"; color:var(--white); font-size:25px}

.right_item:hover .right_item_bg {opacity:1}
.right_item:hover::after {opacity:0.5}
.right_item:hover > svg {top:30%; left:50%; transform:translateX(-50%);}
.right_item:hover .main_ico {transform:translateY(15px); opacity:0}
.right_item:hover .arrow_ico {transform:translateX(50%); right:50%; bottom:30%;}





/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){
.left_box .visual .roll p br{display:none}


}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1200px){
.main_container {gap:15px}

.left_box .visual {margin-bottom:15px}
.left_box .visual .roll {padding:54px 25px 25px}
.left_box .visual .roll img {bottom:27px; left:25px}
.left_box .visual .roll h3 {font-size:48px}
.left_box .visual .roll p {font-size:14px}
.slick-arrow {bottom:25px}
.slick-prev {right:65px}
.slick-next {right:25px}
.slick-page {bottom:30px; right:110px}

.left_box .left_grid_box {grid-gap:15px}
.left_box .left_grid_box .box {padding:25px; height:250px}
.left_box .left_grid_box .box .lb40 {left:25px; bottom:25px}
.left_box .left_grid_box .box .arrow {right:25px; bottom:25px}
.left_box .left_grid_box .box .ico {height:54px}




.right_item {margin-bottom:15px; height:calc((100% - 30px) / 3); padding:25px}
.right_item > svg {height:24px; width:auto}
.right_item .main_ico {bottom:25px; left:25px}
.right_item .main_ico svg {height:54px; width:auto}
.right_item .arrow_ico {bottom:25px; right:25px}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/*** css 공통 ***/

.main_container {margin: 110px auto 30px; display:block}

.left_box .visual {margin-bottom:10px}
.left_box .visual .roll {aspect-ratio:13 / 16; height:500px}
.left_box {width:100%; margin-bottom:15px}

.left_box .left_grid_box .logo {width:70px}
.left_box .left_grid_box .box p.eng {font-size:13px; line-height:23px}
.left_box .left_grid_box .box h4.fs24 {font-size:19px; line-height:27px}
.left_box .left_grid_box .box ul li {font-size:14px; line-height:24px}



.right_box {width:100%; display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:15px}
.right_item {height:250px; margin-bottom:0}






}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/*** css 공통 ***/
.main_container {margin: 80px auto 30px; display:block}

.left_box {margin-bottom:10px}
.left_box .visual .roll {height:480px; padding:35px 25px 25px}
.left_box .visual .roll h3 {line-height:110%}
.left_box .visual .roll img {height:25px}
.left_box .left_grid_box {grid-template-columns:repeat(1,1fr); grid-gap:10px}
.left_box .left_grid_box .box {height:190px}
.left_box .left_grid_box .box p.eng {margin-bottom:3px}
.left_box .left_grid_box .box ul {display:flex; gap:10px}

.right_box {grid-template-columns:repeat(1,1fr); grid-gap:10px}
.right_item {height:170px}

}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
.left_box .visual .roll {height:400px}
.left_box .visual .roll h3 {font-size:40px}
.left_box .visual .roll p {letter-spacing:-0.5px}
.left_box .visual .roll img {height:20px}

.slick-arrow {width:25px; height:25px}
.slick-next {right:15px}
.slick-prev {right:45px}
.slick-page {bottom:27px; right:80px}

}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){
.left_box .visual .roll img {height:18px}

}