/* A A A : A : A : A : */ #FullDivision_gridStyle { width : 100%; height : auto; text-align : center; position : relative; padding : calc(40px + 2vw) calc(20px + 1vw);} #FullDivision_gridStyle .sectionWrap { width : 100%; height : auto; display : inline-block; max-width : 1200px; } #FullDivision_gridStyle .sectionWrap .TitBox { width : 100%; height : auto; } #FullDivision_gridStyle .sectionWrap .TitBox .engTitTop { font-size : calc(10px + 0.8vw); color : #999; line-height : 1.2em; } #FullDivision_gridStyle .sectionWrap .TitBox .engTit { font-size : calc(12px + 0.8vw); color : #333; font-weight : 700; line-height : 1.2em; } #FullDivision_gridStyle .sectionWrap .TitBox .engTit span { font-size : inherit; font-weight : inherit; color : #9F0C3D; line-height : 1.2em; } #FullDivision_gridStyle .sectionWrap .TitBox .tit { font-size : calc(14px + 0.9vw); color : #333; margin : calc(7px + 0.1vw) 0 calc(10px + 1vw); word-break : keep-all; font-weight : 200; } #FullDivision_gridStyle .sectionWrap .contentWrap.A { width : 100%; height : auto; display : grid; justify-content : space-between; justify-items : center; grid-template-columns : 59% 39%; gap : 0 2%; } #FullDivision_gridStyle .sectionWrap .contentWrap.B { width : 100%; height : auto; display : grid; justify-content : space-between; justify-items : center; grid-template-columns : repeat(2, 49%); gap : 0 2%; margin-top : 2%; } #FullDivision_gridStyle .sectionWrap .contentWrap.C { width : 100%; height : auto; display : grid; justify-content : space-between; justify-items : center; grid-template-columns :repeat(3, 32%); gap : 0 2%; margin-top : 2%; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox { width : 100%; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contImgBox { width : auto; height : 240px; overflow : hidden; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contImgBox img { width : 100%; height : 100%; object-fit : cover; transition : 0.6s; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox:hover .contImgBox img { transform : scale(1.3); } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contTextBox { width : 100%; height : 90px; background : #f7f7f7; text-align : left; padding : calc(10px + 0.7vw); display : flex; flex-direction : column; justify-content : center; transition : 0.6s; position : relative; overflow : hidden; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contTextBox:after { content : ''; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox:hover .contTextBox:after { content : ''; width : 50px; height : 450px; margin-top : 50px; right : 100%; bottom : -100%; margin-top : 50px; transition : 0.3s; position : absolute; display : inline-block; background-color : #fff; transform: rotate(45deg); animation-name: abutton_ani_white; animation-duration: 2s; animation-delay: 0s; animation-timing-function: linear; animation-fill-mode: both; animation-iteration-count: 1; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 50%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } @keyframes abutton_ani_white { 0% { right : 100%; bottom : -100%; } 100% { right : -200%; bottom : -100%; } } #FullDivision_gridStyle .sectionWrap .contentWrap.C .contentBox .contTextBox { height : 120px; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contTextBox .contTit { font-size : calc(12px + 0.5vw); color : #333; margin-bottom : 5px; transition : 0.6s; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox .contTextBox .contText { font-size : calc(10px + 0.3vw); color : #333; word-break : keep-all; transition : 0.6s; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox:hover .contTextBox { background : #9F0C3D; } #FullDivision_gridStyle .sectionWrap .contentWrap .contentBox:hover .contTextBox .contTit ,#FullDivision_gridStyle .sectionWrap .contentWrap .contentBox:hover .contTextBox .contText { color : #fff; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap { width : 100%; height : auto; display : none; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox { width : 100%; height : auto; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox .contImgBox { width : 100%; height : calc(170px + 23vw); } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox .contImgBox img { width : 100%; height : 100%; object-fit : cover; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox .contTextBox { width : 100%; height : 100px; background : #f7f7f7; padding : calc(5px + 2vw); text-align : left; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox .contTextBox .contTit { font-size : calc(12px + 1vw); color : #333; margin-bottom : calc(1px + 1vw); } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox .contTextBox .contText { font-size : calc(10px + 0.6vw); color : #333; word-break : keep-all; } #FullDivision_gridStyle .swiper-pagination.contMobilePage { width : auto; bottom : 3%; display : none; justify-content : space-around; left : 50%; transform : translateX(-50%); } #FullDivision_gridStyle .swiper-pagination.contMobilePage .swiper-pagination-bullet.swiper-pagination-bullet-active { background : #aa0d3e; } #FullDivision_gridStyle .swiper-pagination.contMobilePage .swiper-pagination-bullet { width : calc(5px + 0.3vw); height : calc(5px + 0.3vw); background : #c3c3c5; opacity : 1; } #FullDivision_gridStyle .swiper-pagination.contMobilePage .swiper-pagination-bullet:hover { background : #aa0d3e; } @media (min-width:641px) and (max-width:750px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #FullDivision_gridStyle .sectionWrap .contentWrap.A, #FullDivision_gridStyle .sectionWrap .contentWrap.B, #FullDivision_gridStyle .sectionWrap .contentWrap.C { display : none; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap { display : block; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox { width : 80%; margin : 0 auto; } #FullDivision_gridStyle .swiper-pagination.contMobilePage { display : flex; } } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #FullDivision_gridStyle .sectionWrap .contentWrap.A, #FullDivision_gridStyle .sectionWrap .contentWrap.B, #FullDivision_gridStyle .sectionWrap .contentWrap.C { display : none; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap { display : block; } #FullDivision_gridStyle .sectionWrap .contentMobileWrap .contentBox { width : 100%; margin : 0 auto; } #FullDivision_gridStyle .swiper-pagination.contMobilePage { display : flex; }