/* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* Intro_Basic (인사말) */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* ******************************************************************************************************************************************************************************** */ /* PC버전 CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Intro_Basic { width : 100%; height : auto; display : block; text-align : center; } .Intro_Basic_gray { background-color : #eaeaea; } .Intro_Basic img { width : 100%; height : auto; } .Intro_Basic .Wrap { width : 100%; height : auto; margin : 0 auto; max-width : 1280px; text-align : left; padding : 0 20px; } .Wrap1600 { max-width : 1600px !important; } .Wrap1400 { max-width : 1400px !important; } .Wrap1280 { max-width : 1280px !important; } .Wrap1100 { max-width : 1100px !important; } .Wrap1000 { max-width : 1000px !important; } .Wrap800 { max-width : 800px !important; } .Wrapmax { max-width : 100% !important; padding : 0 !important; } .Intro_Basic .Wrap .Intro_Title { width : 100%; height : auto; display : inline-block; } .Intro_Basic .Wrap .Intro_Title span { display : block; font-size : 26px; font-weight : 600; margin : 15px 0 0; } .Intro_Basic .Wrap .Intro_Contents { width : 100%; height : auto; display : inline-block; overflow : hidden; text-align : center; } .Intro_Basic .Wrap .Intro_ContentsA { width : 100%; height : auto; padding : 3% 0; text-align : center; } .Intro_Basic .Wrap .Intro_ContentsA img { width : 45%; height : auto; } .Intro_Basic .Intro_ContentsB { width : 100%; height : auto; margin-top : 2%; } .Intro_Basic .Intro_ContentsB .sub05M { display : none;} .Intro_Basic .Wrap .Intro_ContentsC { width : 100%; height : auto; padding : 4% 0; text-align : center; } .Intro_Basic .Wrap .Intro_ContentsC img { width : 80%; height : auto; } .Intro_Basic .Wrap .Intro_ContentsD { width : 100%; height : auto; padding : 8% 0 2%; text-align : center; } .Intro_Basic .Wrap .Intro_ContentsD img { width : 85%; height : auto; padding : 0; } .Intro_Basic .Wrap .Intro_ContentsE { width : 100%; height : auto; } .Intro_Basic .Wrap .Intro_ContentsE::after { content : ""; display : block; clear : both; } .Intro_Basic .Wrap .Intro_ContentsE img { width : calc(96% / 3); height : auto; float : left; margin-top : 15px; } .Intro_Basic .Wrap .Intro_ContentsE img:nth-child(2) ,.Intro_Basic .Wrap .Intro_ContentsE img:nth-child(3n+2) { margin-left : 2%; margin-right : 2%; } .Intro_Basic .Wrap .Intro_ContentsF { width : 100%; height : auto; text-align : center; padding : 2% 0; } .Intro_Basic .Wrap .Intro_ContentsF img { width : clamp(230px, 90%, 400px); height : auto; } .Intro_Basic .Wrap .Intro_Contents .Contents_Title { width : 100%; height : auto; display : inline-block; text-align : left; position : relative; margin-top : 25px; } .Intro_Basic .Wrap .Intro_Contents .Contents_Title h2 { margin : 0px 0px 20px; padding : 8px 20px; font-size : 24px; line-height : 1.3em; background-color : #fff; border-left : 5px solid #000; font-weight : 600; } .Intro_Basic .Wrap .Intro_Contents .division3 { width : 100%; height : auto; text-align : center; display : inline-block; margin : 20px 0 60px 0; } .Intro_Basic .Wrap .Intro_Contents .division3 a { width : 33.333%; float : left; height : auto; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .division3 a img { width : 100%%; height : auto; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript { width : 100%; height : auto; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript p { background-color : #ffffff; color : #666666; font-size : 20px; font-weight : 300; line-height : 1.3em; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript p.Descript_Title { font-size : 22px; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript p.brown { color : #957958; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript p.blue { color : #2c5fd5; } .FloatLeft { float : left; } .FloatRight { float : right; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_ImgWrap { width : 40%; height : auto; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_ImgWrap img { width : 100%; height : auto; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap { width : 60%; height : auto; display : inline-block; padding : 15px 15px; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap p { background-color : #ffffff; color : #666666; font-size : 20px; font-weight : 300; line-height : 1.3em; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap p.Descript_Title { font-size : 23px; padding-bottom : 10px; font-weight : 400; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap p.brown { color : #957958; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap p.blue { color : #2c5fd5; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript_Dotted_box { margin-bottom : 15px; padding : 20px; font-size : 18px; line-height : 1.6em; color : #666666; border : 2px dashed rgb(221,221,221); clear : both; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript_Dotted_box p { font-size : 19px; line-height : 1.5em; font-weight : 300;} .Intro_Basic .Wrap .Intro_Contents .Contents_Descript_Dotted_box p strong { font-size : 19px; line-height : 1.5em; font-weight : 600;} .Intro_Basic .Wrap .Intro_Contents .Contents_Img { width : 100%; height : auto; display : inline-block; text-align : center; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img .kakaomap_roadfind { width : 31%; height : auto; max-width : 180px; background-color : #efd823; color : #fff; text-align : center; font-size : 0px; margin : 0 0.5%; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img .kakaomap_roadfind img { width : 100%; height : auto; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img img { width : 100%; height : auto; } .Intro_Basic .Wrap .Intro_Contents .TableWrap { width : 100%; height : auto; text-align : left; margin-top : 30px; } .Intro_Basic .Wrap .Intro_Contents .TableWrap p { font-size : 18px; } .Intro_Basic .Wrap .Intro_Contents .TableWrap strong { font-size : 18px; font-wieght : 600; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table { text-align : center; border : 1px solid rgb(237,237,237); width : 100%; border-collapse : collapse; margin-top : 5px; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .Tabletitle { width : 33%; border : 1px solid rgb(237,237,237); text-align : center; padding : 5px 0px; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .backOrange { background-color : #FF6600; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .backDarkRed { background-color :#993300; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .backGray { background-color :#999999; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .TitleFont { color : #fff; font-size : 15px; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .TitleFont strong { color : #fff; font-size : 15px; font-weight : 600; } .Intro_Basic .Wrap .Intro_Contents .TableWrap table .TableDescript { width : 33%; border : 1px solid rgb(237,237,237); text-align : center; background-color : #f7f7f7; font-size : 14px; padding : 10px 0px; line-height : 1.6em; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi { clear : both; margin : 40px 0; text-align : left; border-top : 1px solid #e8e8e8; position : relative; width : 100%; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi:after { display : block; visibility : hidden; clear : both; content : ""; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomPrev { width : 100%; border-bottom : 1px solid #e8e8e8; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomPrev a { display : block; padding : 15px 0px; vertical-align : top; text-overflow : ellipsis; width : 100%; overflow : hidden; white-space : nowrap; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomNext { width : 100%; border-bottom : 1px solid #e8e8e8; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomNext a { display : block; padding : 15px 0px; vertical-align : top; text-overflow : ellipsis; width : 100%; overflow : hidden; white-space : nowrap; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomPrev a:hover ,.Intro_Basic .Wrap .Intro_Contents .Bottom_Navi .BottomNext a:hover { color : #980000; background-color : #f4f4f4; } #background_map_noBox .map .gm-style-iw-chr { height : 15px;} .background_grayBG { background-color : #eaeaea; } .sub1-1_01 { margin-top : 200px; } .sub1-1_02 { max-width : 750px; } .sub1-1_03 { max-width : 750px; } .sub1-1_04 { padding : 80px; } .sub2-1_01 { width : auto !important; max-width : 200px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .sub2-2_01 { width : auto !important; max-width : 320px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .sub2-2_02 { max-width : 1400px !important;} .sub2-2_03 { margin-top : -150px; } .sub2-2_04 { margin-top : 30px; } .sub2-2_05 { margin-top : 30px; } .sub2-2_06 { margin : 80px 0px; max-width : 100% !important; } .sub2-2_07 { margin-top : 60px; } .sub2-2_08 { margin-top : 60px; } .sub2-3_01 { width : auto !important; max-width : 320px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .sub2-4_01 { width : auto !important; max-width : 320px !important; display:inline-block; margin-top:80px; } .sub2-4_02 { width : 100%; height : 619px; max-width:1100px; margin-top:40px; frameborder:0; scrolling:no; } .sub2-4_03 { margin-top : 60px; max-width : 950px !important; } .sub6-1_01 { max-width : 470px !important; display:inline-block; margin-top:80px; } .sub6-1_02 { max-width : 470px !important; display:inline-block; margin-top:80px; } .sub6-1_03 { margin-top : 40px; } .map { width : 100%; height:500px; margin-top:40px;} .map2 { width : 100%; height:500px; margin-top:40px;} .slideSection { width : 100%; height:auto; text-align:center; margin-top : 5%; padding : 0 2%;} .slideSection .slideSection_Wrap { width : 100%; height:auto; display:inline-block; max-width : 1000px;} .slideSection .slideSection_Wrap .slideBox { width : 45%; height:auto; display:inline-block; margin : 1% 0.5% 1% 0.5%; position : relative;} .slideSection .slideSection_Wrap .slideBox:nth-child(1)::before { content : ""; position : absolute; width : 15%; height : 100%; top : 50%; left : -4%; transform : translate(-50%,-50%); background-image: url(../../../../Image/slideSide_Sofa.png); background-size : 100% auto; background-repeat:no-repeat; background-position:center center; } .slideSection .slideSection_Wrap .slideBox:nth-child(2)::after { content : ""; position : absolute; width : 15%; height : 100%; top : 50%; right : -4%; transform : translate(50%,-50%); background-image: url(../../../../Image/slideSide_Bed.png); background-size : 100% auto; background-repeat:no-repeat; background-position:center center; } .slideSection .slideSection_Wrap .slideBox:nth-child(3)::before { content : ""; position : absolute; width : 15%; height : 100%; top : 50%; left : -4%; transform : translate(-50%,-50%); background-image: url(../../../../Image/slideSide_Table.png); background-size : 100% auto; background-repeat:no-repeat; background-position:center center; } .slideSection .slideSection_Wrap .slideBox:nth-child(4)::after { content : ""; position : absolute; width : 15%; height : 100%; top : 50%; right : -4%; transform : translate(50%,-50%); background-image: url(../../../../Image/slideSide_Etc.png); background-size : 100% auto; background-repeat:no-repeat; background-position:center center; } .slideSection .slideSection_Wrap .slideBox img { width : 100%; height : auto; position : relative; z-index : 1;} /* 클릭시 팝업 생성 css */ /* A A A : A : A : A : */ .popupLayer { position : fixed; left : 0; top : 0; z-index : -1; opacity : 0; height : 100%; -o-transition : all ease-in-out .3s; -ms-transition : all ease-in-out .3s; -moz-transition : all ease-in-out .3s; -webkit-transition : all ease-in-out .3s; } .scrollmask { width : 100%; height : 110%; position : absolute; left : 0; top : 0; background-color : rgba(0,0,0,0.8); z-index : 9; } .scrollcontent { width : 60% !important; height : 80% !important; position : absolute; left : 20%; top : 0; z-index : 99; overflow-y : scroll !important; margin-top : 5%; background-color : #fff; } .scrollclose { width : 40px !important; color : #fff; position : fixed; line-height : 1em; right : 30px; top : 30px; z-index : 9; cursor : pointer; transition : transform .7s; -o-transition : transform .7s; -ms-transition : transform .7s; -moz-transition : transform .7s; -webkit-transition : transform .7s; } .scrollclose:hover { transform : ratate(360deg); -o-transform : rotate(360deg); -ms-transform : rotate(360deg); -moz-transform : rotate(360deg); -webkit-transform : rotate(360deg); transition : transform .7s; -o-transition : transform .7s; -ms-transition : transform .7s; -moz-transition : transform .7s; -webkit-transition : transform .7s; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************************** */ /* Tablet CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ } @media (max-width:640px) { /* ******************************************************************************************************************************************************************************** */ /* Mobile CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Intro_Basic .Wrap { padding : 0; } .Intro_Basic .Wrap .Intro_Contents .division3 { margin-top : 0; } .Intro_Basic .Wrap .Intro_Contents .division3 a { width : 50%; margin-left : 25%; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img img { width : 100%; margin-left : 0; padding : 0 15px; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_ImgWrap { width : 100%; } .Intro_Basic .Wrap .Intro_Contents .Contents_Descript .Contents_TextWrap { width : 100%; padding : 10px 15px; } .FloatLeft { float : none; } .FloatRight { float : none; } .sub1-1_01 { margin-top : 0; } .sub1-1_02 { padding : 0px 0px; } .sub1-1_03 { padding : 20px 0px; } .sub1-1_04 { padding : 0px 0px; } .Intro_Basic .Intro_ContentsB { margin-top : 7%;} .Intro_Basic .Intro_ContentsB img { display : none;} .Intro_Basic .Intro_ContentsB .sub05M { display : inline-block; width : 100%;} .Intro_Basic .Wrap .Intro_ContentsE { text-align : center; } .Intro_Basic .Wrap .Intro_ContentsE img:nth-child(2), .Intro_Basic .Wrap .Intro_ContentsE img:nth-child(3n+2) { margin : 1% 0.5% 1% 0.5%; } .Intro_Basic .Wrap .Intro_ContentsE img { width : 48%; margin : 1% 0.5% 1% 0.5%; float : unset; } .Intro_Basic .Wrap .Intro_ContentsE img:nth-child(12) { display : none; } .slideSection .slideSection_Wrap { margin-bottom : 4%;} /* .sub2-1_01 { width : 130px !important; margin-top: 30px; margin-bottom: 20px} .sub2-1bg_2 { margin-top : 20px; } .sub2-1bg_3 { margin-top : 20px; } .sub2-2_01 { width : 190px !important; margin-top: 30px; margin-bottom: 20px} .scrollcontent { width : 90% !important; height : 80% !important; left : 5%; margin-top : 10%; } .scrollclose { background-color : rgba( 0,0,0,0.5 ); right : calc(50% - 20px); top : 20px; border-radius : 100%; padding : 4px; } .sub2-2_06 { width : 146% !important; margin: 30px 0px 30px -23% !important; max-width:146% !important; } .sub2-2_07 { margin-top : 30px; } .sub2-2_08 { margin-top : 30px; } .sub2-3_01 { width : 130px !important; margin-top: 30px; margin-bottom: 20px} .sub2-3_02 { margin-top : 30px; } .sub2-4_01 { width : 130px !important; margin-top: 30px; } .sub2-4_02 { height : 220px; margin-top: 20px; } .sub2-4_03 { margin-top : 20px; } */ }