/* A A A : A : A : A : */ #priceInformation { width : 100%; height : auto; text-align : center; padding : 5%; background: #f7f7f7; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f7f7f7 50%, #eeefef 50%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #f7f7f7 50%, #eeefef 50%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #priceInformation .priceInformationWrap { width : 100%; height : auto; max-width : 1300px; display : inline-block; } #priceInformation .priceInformationWrap .priceInformationTit { font-size : calc(20px + 1.5vw); font-weight : 700; color : #b4b5b5; } #priceInformation .priceInformationWrap .priceInformationTit span { font-size : calc(20px + 1.5vw); font-weight : 700; color : #dcdcdd; } #priceInformation .priceInformationWrap .priceInformationBox { width : 100%; height : auto; display : flex; justify-content : center; margin : 2% auto 0; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft { width : auto; height : auto; display : flex; background : #fff; flex-grow : 1; text-align : left; box-shadow : 0px 0px 20px 0px #42424263; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftTit { width : 20%; height : 100%; position : relative; background : #005cad33; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftTit img { width : calc(15px + 0.5vw); height : auto; position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont { width : 80%; height : 100%; display : flex; flex-direction : column; justify-content : space-evenly; align-items : center; padding : 5% 0; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContText { width : auto; height : auto; display : inline-block; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContText p { width : auto; display : inline-block; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContText .textA { font-size : calc(13px + 0.2vw); font-weight : 500; color : #595757; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContText .textA.margin { margin-bottom : 2%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContText .textB { font-size : calc(13px + 0.2vw); font-weight : 500; color : #005bac; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter { width : auto; height : auto; padding : 2% 0; flex-grow : 1; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop { width : 100%; height : auto; display : flex; justify-content : center; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop p:nth-child(1) { font-size : calc(18px + 0.5vw); font-weight : 500; color : #005bac; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop p:nth-child(2) { font-size : calc(18px + 0.5vw); font-weight : 500; color : #595757; margin : 0 15%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop p:nth-child(3) { font-size : calc(18px + 0.5vw); font-weight : 500; color : #009b73; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot { width : 100%; height : auto; margin-top : 3%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox { width : auto; height : auto; display : inline-block; border-radius : 15px; background : #595757; padding : 4% 12%; font-size : calc(14px + 0.2vw); color : #fff; transition : .4s; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox img { width : calc(20px + 1vw); height : auto; display : block; margin : 0 auto 2%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox:hover { color : #d8dfa1; transition : .4s; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox:hover img { -webkit-animation: wobble-hor-top 0.8s both; animation: wobble-hor-top 0.8s both;} #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight { width : auto; height : auto; display : flex; background : #fff; flex-grow : 1; text-align : left; box-shadow : 0px 0px 20px 0px #42424263; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightTit { width : 20%; height : 100%; position : relative; background : #11946f33; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightTit img { width : calc(15px + 0.5vw); height : auto; position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont { width : 80%; height : 100%; display : flex; flex-direction : column; justify-content : space-evenly; align-items : center; padding : 5% 0; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContText { width : auto; height : auto; display : inline-block; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContText p { width : auto; display : inline-block; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContText .textA { font-size : calc(13px + 0.2vw); font-weight : 500; color : #595757; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContText .textA.margin { margin-bottom : 2%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContText .textB { font-size : calc(13px + 0.2vw); font-weight : 500; color : #009b73; } @-webkit-keyframes wobble-hor-top { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(6deg); transform: translateX(-30px) rotate(6deg); } 30% { -webkit-transform: translateX(15px) rotate(-6deg); transform: translateX(15px) rotate(-6deg); } 45% { -webkit-transform: translateX(-15px) rotate(3.6deg); transform: translateX(-15px) rotate(3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(-2.4deg); transform: translateX(9px) rotate(-2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(1.2deg); transform: translateX(-6px) rotate(1.2deg); } } @keyframes wobble-hor-top { 0%, 100% { -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 15% { -webkit-transform: translateX(-30px) rotate(6deg); transform: translateX(-30px) rotate(6deg); } 30% { -webkit-transform: translateX(15px) rotate(-6deg); transform: translateX(15px) rotate(-6deg); } 45% { -webkit-transform: translateX(-15px) rotate(3.6deg); transform: translateX(-15px) rotate(3.6deg); } 60% { -webkit-transform: translateX(9px) rotate(-2.4deg); transform: translateX(9px) rotate(-2.4deg); } 75% { -webkit-transform: translateX(-6px) rotate(1.2deg); transform: translateX(-6px) rotate(1.2deg); } } @media(min-width:641px) and (max-width:768px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #priceInformation .priceInformationWrap .priceInformationBox { flex-direction : row; flex-wrap : wrap; justify-content : space-between; margin : 5% auto 0; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft { width : 49%; order : 1; flex-grow : unset; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter { margin-top : 3%; padding : 0; order : 3; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop p:nth-child(2) { margin : 0 5%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot { margin-top : 1%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox { padding : 3% 6%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight { width : 49%; order : 2; flex-grow : unset; } } @media(max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #priceInformation { padding : 10% 5%; background : #f7f7f7; } #priceInformation .priceInformationWrap .priceInformationBox { flex-direction : column; margin-top : 10%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft { width : 100%; height : auto; flex-direction : column; margin-bottom : 10%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftTit { width : 100%; height : auto; position : static; text-align : center; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftTit img { width : 40%; height : auto; padding : 3% 0; position : static; transform : unset; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont { width : 100%; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContTop p { font-size : 13px; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationLeft .priceInformationLeftCont .priceInformationLeftContBot p { font-size : 13px; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter { margin-top : 10%; padding : 0; order : 3; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterTop { display : none; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot { margin-top : 0; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationCenter .priceInformationCenterBot .LinkBox img { display : inline-block; margin : 0; vertical-align : middle; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight { width : 100%; height : auto; flex-direction : column; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightTit { width : 100%; height : auto; position : static; text-align : center; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightTit img { width : 40%; height : auto; padding : 3% 0; position : static; transform : unset; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont { width : 100%; order : 2; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContTop p { font-size : 13px; } #priceInformation .priceInformationWrap .priceInformationBox .priceInformationRight .priceInformationRightCont .priceInformationRightContBot p { font-size : 13px; } } /* 이벤트 이미지 CSS */ /* A A A : A : A : A : */ #newOneEventImg { width : 100%; height : auto; padding : 8% 10%; text-align : center; background-image : url("../../Image/eventImgBack.jpg"); background-size : 100%; background-position : bottom; background-repeat : no-repeat; } #newOneEventImg .newOneEventImgBox { width : 60%; height : auto; display : inline-block; } #newOneEventImg .newOneEventImgBox img { width : 100%; height : auto; } @media(max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #newOneEventImg { padding : 10% 2%; background-size : auto 100%;} #newOneEventImg .newOneEventImgBox { width : 100%; } }