/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Main_Background_Fixed_Wrap { width : 100%; height : auto; margin : 0 auto; text-align : center; position : relative; margin-top : 4%; } .Main_Background_Fixed { width : 100%; height : auto; margin : 0 auto; text-align : center; padding : 75px 0 4% 0; overflow : hidden; background-image : url(../../../Image/Main_Background_Fixed.jpg); background-repeat : no-repeat; background-position : center center; background-size : cover; background-attachment: fixed; } /* .Main_Background_Fixed_Wrap .Fixed_mainLogo { width : 30%; max-width : 160px; position : absolute; left : 50%; top : 0; transform : translate(-50%, 0); */ } /* A A A : A : A : A : */ .Main_Background_Fixed img { width : 100%; height : auto; margin : 0 auto; margin-top : 20px; max-width : 830px; margin-bottom : 5px; } .Main_Background_Fixed .Wrap { display : inline-block; font-size : 0; line-height : 0; width : 100%; max-width : 1200px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript { width : 100%; height : auto; text-align : center; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Fixed_mainLogo { width : 24%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .brandText { font-size : calc(14px + 0.5vw); color : #fff; font-weight : 500; background : #1ea4da; display : inline-block; padding : 0.6% 1.2%; margin-top : 2%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .brandText span { font-size : inherit; color : #fff000; font-weight : 700; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title { font-size : 45px; font-weight : 400; line-height : 1.9em; text-align : center; color : #fff; margin-top : 3px; text-shadow : 3px 3px 3px #000; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title_yellow { font-size : 38px; font-weight : 400; text-align : center; color : #fff000; margin-top : 3px; text-shadow : 3px 3px 3px #000; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .title_strong { width : 100%; height : auto; font-size : 27px; font-weight : 400; text-align : center; color : yellow; margin-top : 20px; text-shadow : 3px 3px 3px #000; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailA { width : 100%; height : auto; font-size : 20px; font-weight : 300; text-align : center; display : inline-block; color : #fff000; margin-top : 10px; text-shadow : 1.5px 1.5px 1.5px #000; text-shadow : 2px 2px 2px #000; line-height : 1.7em; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailB { width : 100%; height : auto; font-size : 22px; font-weight : 400; text-align : center; display : inline-block; margin-top : 13px; color : #fff; text-shadow : 1.5px 1.5px 1.5px #000; text-shadow : 2px 2px 2px #000; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyleWrap { width : 100%; height : auto; display : flex; justify-content : space-between; padding : 0 2%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyle { width : 23%; height : auto; display : inline-block; background : rgba(0,0,0,0); padding : 8px 0px; opacity : 1; font-size : 19px; font-weight : 400; margin-top : 40px; border : 2px solid rgba(255,255,255,0.7); position : relative; overflow : hidden; z-index : 3; transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyle:hover { opacity : 1; border : 2px solid rgba(255,255,255,0.3); transition : all ease-in-out .4s; -o-transition : all ease-in-out .4s; -ms-transition : all ease-in-out .4s; -moz-transition : all ease-in-out .4s; -webkit-transition : all ease-in-out .4s; } /* Button2 */ .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore { color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore:hover { background-color : #005C9B; color : #fff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore:before { content : ''; width : 100%; height : 100%; background-color : #005C9B; position : absolute; left : -100%; top : 0; z-index : -1; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore:hover:before { left : 0%; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } /* Button2 */ .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .reservationmore { color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .reservationmore:hover { background-color : #980000; color : #fff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .reservationmore:before { content : ''; width : 100%; height : 100%; background-color : #980000; position : absolute; left : -100%; top : 0; z-index : -1; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .reservationmore:hover:before { left : 0%; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore { color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore:hover { background-color : rgba(0,130,153,0.3); color : #fff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore:before { content : ''; width : 100%; height : 100%; background-color : rgba(0,130,153); position : absolute; left : -100%; top : 0; z-index : -1; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore:hover:before { left : 0%; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .etcmore { color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .etcmore:hover { background-color : rgb(168 53 165 / 30%); color : #fff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .etcmore:before { content : ''; width : 100%; height : 100%; background-color : rgb(168 53 165); position : absolute; left : -100%; top : 0; z-index : -1; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .etcmore:hover:before { left : 0%; transition : all ease-in-out .35s; -o-transition : all ease-in-out .35s; -ms-transition : all ease-in-out .35s; -moz-transition : all ease-in-out .35s; -webkit-transition : all ease-in-out .35s; } .Main_Background_Fixed_Wrap .topShadow { width : 100%; height : auto; display : flex;} .Main_Background_Fixed_Wrap .topShadow img { width : 100%; transform : rotate(180deg); } .Main_Background_Fixed_Wrap .bottomShadow img { width : 100%; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Main_Background_Fixed { padding : 70px 0px 40px; } /* .Main_Background_Fixed_Wrap .Fixed_mainLogo { max-width : 200px; margin-top : -75px; } */ .Main_Background_Fixed img { max-width : 830px; margin : 10px 0px 0 0; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript { overflow : hidden; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .brandText { margin-top : 3%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title ,.Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title_yellow { font-size : 24px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailA { font-size : 24px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailB { font-size : 20px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyleWrap { flex-wrap : wrap; justify-content : center; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyle { width : 34%; margin-top : 25px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore, .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore { margin-right : 3%;} } @media (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Main_Background_Fixed { padding-top : 40px; padding-bottom : 20px; } /* .Main_Background_Fixed_Wrap .Fixed_mainLogo { width : 100%; max-width : 175px; margin-top : -68px; } */ .Main_Background_Fixed_Wrap { margin-top : 8%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript { overflow : hidden; } /* .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript img { width : 130%; max-width : 150%; margin-left : -15%; margin-top : 20px; } */ .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Fixed_mainLogo { width : 50%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .brandText { font-size : 16px; padding : 1% 2%; margin-top : 5%; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title ,.Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_title_yellow { font-size : 25px; margin-top : 0px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .title_strong { width : 100%; height : auto; font-size : 18px; font-weight : 400; text-align : center; color : yellow; margin-top : 10px; text-shadow : 3px 3px 3px #000; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailA { font-size : 17px; margin-top : 15px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .Main_Background_Fixed_Descript_detailB { font-size : 15px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyleWrap { flex-direction : column; align-items : center; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .bgmorestyle { width : 60%; margin-top : 0px; margin-bottom : 10px; font-size : 13px; padding-top : 9px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .intromore { margin-left : 0%; margin-right : 0%; color : #ffffff; margin-top : 20px; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .reservationmore { margin-left : 0%; margin-right : 0%; color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .locationmore { margin-left : 0%; margin-right : 0%; color : #ffffff; } .Main_Background_Fixed .Wrap .Main_Background_Fixed_Descript .etcmore { margin-left : 0%; margin-right : 0%; color : #ffffff; } }