/* A A A : A : A : A : */ #fullDivision_leftTitle_slide { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; font-size : min(1.6vw,18px); font-family : "nanum"; position : relative; padding : 1em 0 1.2em; position : relative; flex-direction : column; gap : 2em; margin : 8em 0 3em; background : linear-gradient(to right,#f2f2f2 0%, #d8d8d8 35%, #fff 35%); } #fullDivision_leftTitle_slide .topWrap { width : 95%; height : auto; display : flex; align-items : center; justify-content : center; position : relative; max-width : 2000px;} #fullDivision_leftTitle_slide .topWrap .tabWrap { width : auto; height : auto; display : flex; flex-direction : column; gap : 1em; align-items : center; justify-content : center;} #fullDivision_leftTitle_slide .topWrap .tabWrap img.textLogo { height : 1.6em; opacity : .3;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap { width : auto; height : auto; display : flex; align-items : center; justify-content : center; gap : 0.8em;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn { line-height : 1em; font-weight : 700; border : 1px solid #970000; padding : 0.5em 1em; color : #970000; cursor : pointer; transition : .2s; position : relative; overflow : hidden;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn.on { background : #970000; color : #fff; pointer-events : none;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn span { line-height : inherit; z-index : 1; transition : .2s; color : inherit; position : relative;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn::after { content : ""; width : 100%; height : 100%; display : block; position : absolute; top : 0; left : -100%; background : #970000; transition : .2s; z-index : 0;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn:hover { color : #fff; transition : .2s;} #fullDivision_leftTitle_slide .topWrap .tabWrap .tabBtnWrap .tabBtn:hover::after { left : 0; transition : .2s;} #fullDivision_leftTitle_slide .topWrap .moreBtn { width : auto; height : auto; display : flex; align-items : center; justify-content : center; position : absolute; top : 50%; right : 3em; transform : translateY(-50%); overflow : hidden; border-radius : 100px;} #fullDivision_leftTitle_slide .topWrap .moreBtn::before { content : ""; width : 100%; height : 100%; border-radius : 100px; background : #f6f6f6; position : absolute; top : 0; left : calc(-100% / 3.1); transition : .3s; transform : translateX(calc(-100% / 3.1));} #fullDivision_leftTitle_slide .topWrap .moreBtn:hover::before { left : 0; transform : translateX(0); background : #970000; transition : .3s;} #fullDivision_leftTitle_slide .topWrap .moreBtn .more { width : auto; height : auto; display : flex; align-items : center; justify-content : center; gap : 0.5em; margin : 0 1.2em; font-weight : 700; line-height : 1em; z-index : 1; position : relative; color : #777777;} #fullDivision_leftTitle_slide .topWrap .moreBtn:hover .more { color : #fff; transition : .3s;} #fullDivision_leftTitle_slide .topWrap .moreBtn .more .moreText { line-height : 1em; padding : 0.7em 0;} #fullDivision_leftTitle_slide .topWrap .moreBtn .more .arrow { position : relative; width : 1em; height : 1em; cursor : pointer; } #fullDivision_leftTitle_slide .topWrap .moreBtn .more .arrow span { position : absolute; height : 2px; background : #777777; transition : all 0.3s ease; transform-origin : center; } #fullDivision_leftTitle_slide .topWrap .moreBtn:hover .more .arrow span { background : #fff; transition : .3s;} /* 위쪽 막대 (기본 세로선) */ #fullDivision_leftTitle_slide .topWrap .moreBtn .more .arrow span:nth-child(1) { left : 0%; top : calc(50% - 4px); transform : translate(50%,-50%) rotate(90deg); width : 7px; } /* 가운데 막대 (가로선) */ #fullDivision_leftTitle_slide .topWrap .moreBtn .more .arrow span:nth-child(2) { left : 0%; top : 50%; transform : translate(0%, -50%) rotate(0deg); width : 14px; } /* 아래쪽 막대 (기본 세로선) */ #fullDivision_leftTitle_slide .topWrap .moreBtn .more .arrow span:nth-child(3) { left : 0%; top : calc(50% + 4px); transform : translate(50%, -50%) rotate(-90deg); width : 7px; } #fullDivision_leftTitle_slide .topWrap .moreBtn:hover .more .arrow span:nth-child(1) { transform : translate(-100%,calc(-50% + 1px)) rotate(45deg); /* ↘ */ left : 100%; } #fullDivision_leftTitle_slide .topWrap .moreBtn:hover .more .arrow span:nth-child(2) { width: 100%; /* 길게 */ } #fullDivision_leftTitle_slide .topWrap .moreBtn:hover .more .arrow span:nth-child(3) { transform : translate(-100%, calc(-50% - 1px)) rotate(-45deg); /* ↗ */ left : 100%; } #fullDivision_leftTitle_slide .contentWrap { width : 95%; height : auto; display : flex; align-items : center; justify-content : flex-end; max-width : 2000px;} #fullDivision_leftTitle_slide .contInnerWrap { width : 100%; height : auto; display : flex; align-items : stretch; justify-content : flex-start; max-width : 1550px; gap : 4%;} #fullDivision_leftTitle_slide .titWrap { width : auto; display : flex; align-items : flex-start; justify-content : flex-start; flex-direction : column; gap : 0.7em; position : relative;} #fullDivision_leftTitle_slide .titWrap.mobile { display : none;} #fullDivision_leftTitle_slide .titWrap img { width : 4em; height : auto; position : absolute; right : calc(100% - 3em); bottom : calc(100% + 0.3em); opacity : .3;} #fullDivision_leftTitle_slide .titWrap .kor { font-size : 1.9em; font-weight : 800; line-height : 1em; } #fullDivision_leftTitle_slide .titWrap .eng { font-size : 1.6em; font-weight : 300; line-height : 1em; color : #0000004d;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap { width : 60%; height : auto; flex-grow : 1;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap .slideBox, #fullDivision_leftTitle_slide .contInnerWrap .slideWrap .slideBox .swiper { width : 100%; height : auto;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap .slideBox { display : none;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap .slideBox.on { display : flex;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap .slideBox .swiper { padding : 1em 0.5em; margin-top : -1em;} #fullDivision_leftTitle_slide .contInnerWrap .contBox { width : 100%; height : auto; aspect-ratio : 304 / 207; border-radius : 27px; position : relative; min-height : 180px; } #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner { width : 100%; height : 100%; position : relative; transform-style : preserve-3d; perspective : 600px; transition : 1s; } #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .content { width : 100%; height : 100%; position : absolute; top : 0; left : 0; backface-visibility: hidden; box-shadow : 1.75px 1.75px 1.75px 0px #999999bf; transition : all 1s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility : hidden; backface-visibility : hidden; transform-style : preserve-3d; border-radius : 15px;} #fullDivision_leftTitle_slide .contInnerWrap .contBox.on .contInner .content { box-shadow : 0px 0px 5px 0px #999999bf; transition : all 1s cubic-bezier(0.4, 0.2, 0.2, 1);} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contFront { transform : rotateY(0deg); background : linear-gradient(134deg,#f2f2f2 0%, #d8d8d8 100%); z-index : 2; } #fullDivision_leftTitle_slide .contInnerWrap .contBox.on .contInner .contFront { transform : rotateY(-180deg); } #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contFront img { width : 100%; height : 100%; object-fit : contain; } #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack { transform : rotateY(180deg); z-index : 1; position : relative; width : 100%; color : #fff; background : linear-gradient(134deg,#555555e6 0%, #333333e6 100%); display : flex; flex-direction : column; align-items : center; justify-content : center; } #fullDivision_leftTitle_slide .contInnerWrap .contBox.on .contInner .contBack { transform: rotateY(0deg); } #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap { width : 100%; height : 100%; display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 0.5em; transform : translateZ(60px) scale(calc(600 / (600 + 78))); } #fullDivision_leftTitle_slide .contInnerWrap .contBox.on .contInner .contBack .infoWrap { transform : unset; transition : .2s cubic-bezier(0.4, 0.2, 0.2, 1) .7s;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap img { width : 100%; height : 100%; object-fit : contain; z-index : 1; position : absolute; top : 0; left : 0; mix-blend-mode: overlay; opacity : .1;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap .name { line-height : 1em; font-weight : 700; font-size : 1.2em; z-index: 2;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap .info { width : 85%; text-overflow : ellipsis; overflow : hidden; word-break : break-word; display : -webkit-box; -webkit-line-clamp : 3; -webkit-box-orient: vertical; font-size : max(13px,0.88em); z-index: 2;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap .link { font-size : max(13px,0.88em); line-height : 1em; font-weight : 700; color : #fff; border : 1px solid #fff; opacity : .5; transition : .2s; border-radius : 7px; z-index: 2;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap .link p { padding : 0.5em 1.2em; line-height : 1em;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap .link:hover { opacity : 1; background : #970000; border : 1px solid #970000; transition : .2s;} @media(min-width:2000px){ #fullDivision_leftTitle_slide { background : linear-gradient(to right,#f2f2f2 0%, #d8d8d8 46%, #fff 46%); } } @media(max-width:1024px){ /* A A A : A : A : A : */ #fullDivision_leftTitle_slide { font-size : min(2.4vw,16px); background : linear-gradient(to right,#f2f2f2 0%, #d8d8d8 29%, #fff 29%); } } @media(max-width:819px){ /* A A A : A : A : A : */ #fullDivision_leftTitle_slide { background : linear-gradient(to bottom,#f2f2f2 0%, #d8d8d8 70%, #fff 70%); margin : 0; padding : 5em 0 1em;} #fullDivision_leftTitle_slide .topWrap .moreBtn { top : 30%; right : 0;} #fullDivision_leftTitle_slide .titWrap.pc { display : none;} #fullDivision_leftTitle_slide .titWrap.mobile { display : flex;} #fullDivision_leftTitle_slide .titWrap .kor { font-size : 1.7em;} #fullDivision_leftTitle_slide .titWrap .eng { font-size : 1.5em;} #fullDivision_leftTitle_slide .topWrap .tabWrap img.textLogo {height : 1.4em;} #fullDivision_leftTitle_slide .titWrap.mobile img { position : static; top : unset; left : unset; transform : translateX(-1.5em);} #fullDivision_leftTitle_slide .contInnerWrap { justify-content : center;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap { max-width : 570px;} #fullDivision_leftTitle_slide .contInnerWrap .contBox { min-height : unset;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #fullDivision_leftTitle_slide { font-size : max(14px,3vw); padding : 5em 0 2.5em;} #fullDivision_leftTitle_slide .contInnerWrap .slideWrap { max-width : 304px;} #fullDivision_leftTitle_slide .contInnerWrap .contBox .contInner .contBack .infoWrap { gap : 1em;} }