/* A A A : A : A : A : */ #sonoSub2 { width : 100%; height : auto; text-align : center; text-align : center; } #sonoSub2 .sub2Wrap { width : 100%; height : auto; max-width : 1000px; display : inline-block; } #sonoSub2 .sub2TitWrap { width : 100%; height : auto; max-width : 1000px; display : flex; margin : 0 auto; } #sonoSub2 .sub2TitWrap .sub2TitBox { width : auto; height : auto; display : flex; flex-direction : column; color : #70685e; text-align : left; align-items : center; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2Num { width : auto; font-size : calc(30px + 2.5vw); color : inherit; display : inline-block; line-height : 0.9em; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2Logo { width : calc(60px + 2.5vw); height : auto; margin : 10% 0; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2Logo img { width : 100%; height : auto; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine { width : 3px; height : calc(25px + 3vw); display : inline-block; background : #70685e; position : relative; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.first::after { content : "첫번째 선택사항"; width : 200px; font-size : calc(15px + 0.5vw); color : #70685e; position : absolute; bottom : 0; left : calc(5px + 1vw); line-height : 1em; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.second::after { content : "두번째 선택사항"; width : 200px; font-size : calc(15px + 0.5vw); color : #70685e; position : absolute; bottom : 0; left : calc(5px + 1vw); line-height : 1em; } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.third::after { content : "객실 타입"; width : 200px; font-size : calc(15px + 0.5vw); color : #70685e; position : absolute; bottom : 0; left : calc(5px + 1vw); line-height : 1em; } #sonoSub2 .sonoSub2Third .thirdSub2TitWrap { padding : 0 5%;} #sonoSub2 .choiceBoxWrap { width : 100%; height : auto; display : flex; justify-content : space-between; margin-top : 5%; } #sonoSub2 .choiceBoxWrap .choiceBox { width : 48%; height : auto; padding : 4% 8%; } #sonoSub2 .choiceBoxWrap .choiceBox .choiceName { font-size : calc(17px + 0.5vw); font-weight : 700; padding : 0.5% 0; margin-bottom : 10%; width : 90%; display : inline-block; } #sonoSub2 .choiceBoxWrap .choiceBox .choceText { font-size : calc(14px + 0.3vw); font-weight : 300; word-break : keep-all; } #sonoSub2 .choiceBoxWrap .choiceBox .choceText span { font-size : inherit; font-weight : 600; color : inherit; } #sonoSub2 .sonoSub2First { width : 100%; height : auto; padding : 5%; } #sonoSub2 .sonoSub2First .choiceBox.brown { background : #aea69c; } #sonoSub2 .sonoSub2First .choiceBox.brown p { color : #fff; } #sonoSub2 .sonoSub2First .choiceBox.brown .choiceName { border-top : 1px solid #fff; border-bottom : 1px solid #fff; } #sonoSub2 .sonoSub2Second { width : 100%; height : auto; padding : 5%; background : #aea69c4d; } #sonoSub2 .sonoSub2Second .choiceBox.white { background : #fff; } #sonoSub2 .sonoSub2Second .choiceBox.white p { color : #70685e; } #sonoSub2 .sonoSub2Second .choiceBox.white .choiceName { border-top : 1px solid #70685e; border-bottom : 1px solid #70685e; } #sonoSub2 .sonoSub2Third { width : 100%; height : auto; padding : 5% 0; } #sonoSub2 .sonoSub2Third .sub2FullWrap { width : 100%; height : auto; padding : 4% 5%; margin-bottom : 2%; background: #afa79d4d; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #ffffff00 65%, #fff 35%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #ffffff00 65%, #fff 35%), linear-gradient(to right,#afa79d4d 65%, #fff 35%); } #sonoSub2 .sonoSub2Third .sub2FullWrap.reverse { background: #afa79d4d; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #ffffff00 65%, #fff 35%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #ffffff00 65%, #fff 35%), linear-gradient(to left,#afa79d4d 65%, #fff 35%); } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap { width : 100%; height : auto; display : flex; justify-content : space-between; align-items : flex-end; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox { width : 40%; height : auto; text-align : left; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox.order { order : 1; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTit { font-size : calC(25px + 0.5vw); font-weight : 700; color : #70685e; line-height : 1em; margin-bottom : 7%; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTit .roomEngTit { font-size : calc(10px + 0.5vw); font-weight : 300; color : #70685e; line-height : 1em; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomInfo { font-size : calc(12px + 0.3vw); color : #777777; word-break : keep-all; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTarget { font-size : calc(12px + 0.3vw); color : #000; font-weight : 600; margin : 5% 0 0; display : inline-block; transition : .4s; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTarget:hover { color : #bd7979; transition : .4s; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomImgBox { width : 55%; height : auto; overflow : hidden; transition : .4s; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap:hover .roomImgBox { box-shadow : 0px 0px 15px 0px #000; transition : .4s; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomImgBox img { width : 100%; height : auto; transition : 1s; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap:hover .roomImgBox img { transform : scale(1.3); transition : 1s; } #sonoSub2 .sonoSub2_imgBox { width : 90%; max-width : 800px; display : inline-block; margin-bottom : 5%;} #sonoSub2 .sonoSub2_imgBox img { width : 100%; height : auto; margin-bottom : 20px;} @media (max-width:767px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #sonoSub2 .sub2TitWrap .sub2TitBox { align-items : stretch;} #sonoSub2 .sub2TitWrap .sub2TitBox .sub2Logo { margin : 10% 0 20%;} #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine { width : calc(5px + 1vw); height : calc(5px + 1vw); } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.first::after { left : calc(10px + 1vw); bottom : 50%; transform : translateY(50%); } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.second::after { left : calc(10px + 1vw); bottom : 50%; transform : translateY(50%); } #sonoSub2 .sub2TitWrap .sub2TitBox .sub2TitLine.third::after { left : calc(10px + 1vw); bottom : 50%; transform : translateY(50%); } #sonoSub2 .choiceBoxWrap { flex-direction : column; margin-top : 10%; } #sonoSub2 .choiceBoxWrap .choiceBox { width : 100%; padding : 10% 5%; } #sonoSub2 .choiceBoxWrap .choiceBox:nth-child(1) { margin-bottom : 5%; } #sonoSub2 .sonoSub2First, #sonoSub2 .sonoSub2Second { padding : 15% 5%; } #sonoSub2 .sonoSub2Third { padding : 15% 0; } #sonoSub2 .sonoSub2Third .sub2TitWrap { padding : 0 5%; margin-bottom : 10%; } #sonoSub2 .sonoSub2Third .sub2FullWrap { padding : 5%; margin-bottom : 10%; background : linear-gradient(to top, #afa79d00 100%, #fff 0%), linear-gradient(to right,#afa79d4d 70%, #fff 35%); } #sonoSub2 .sonoSub2Third .sub2FullWrap.reverse { background : linear-gradient(to top, #afa79d00 100%, #fff 0%), linear-gradient(to left,#afa79d4d 70%, #fff 35%); } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap { flex-direction : column; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox { width : 100%; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox.order { order : 0; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTit { font-size : 23px; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTit .roomEngTit { font-size : 12px; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomInfo { font-size : 13px; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomInfoBox .roomTarget { font-size : 13px; margin : 3% 0 5%; } #sonoSub2 .sonoSub2Third .sub2FullWrap .roomWrap .roomImgBox { width : 100%;} #sonoSub2 .sonoSub2_imgBox img { margin-bottom : 10px;} }