/* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* Intro_Basic (인사말) */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* ******************************************************************************************************************************************************************************** */ /* PC버전 CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Intro_Basic { width : 100%; height : auto; display : block; text-align : center; margin-top : 50px; } .Intro_Basic_gray { background-color : #f2f2f2; } .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; } .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 .cadalog { width : 99.5%; height : auto; display : inline-block; text-align : left; margin-left : 0.5%; margin : 10px 0 15px 0px; } .Intro_Basic .Wrap .Intro_Contents .cadalog p.cadalog_title { font-size : 16px; font-weight : 400; color : #333; line-height : 28px; } .Intro_Basic .Wrap .Intro_Contents .cadalog a.download_Wrap { float : left; padding : 3px 0 3px 22px; line-height : 14px; margin : 1px 0px 1px 1%; color : #666; font-size : 14px; font-weight : 300; background : url(./img/sprites_ico.gif) no-repeat; background-position : 0 -135px; width : 99%; display : inline-block; } .Intro_Basic .Wrap .Intro_Contents .cadalog a.download_Wrap:hover { color : #333; background-position : 0 -157px; background-color : #f7f7f7; } .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.Title_contents { width : 100%; height : auto; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img img.contents { width : 100%; height : auto; max-width : 1100px; } .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_grayBG { background-color : #eaeaea; } .sub1-1_01 { margin-top : 40px; } .sub1-1_02 { padding : 30px 0px; margin-top : 40px; } .sub1_3Wrap { margin-top : -80px; } .sub1-1_03 { padding : 100px 0px 120px 0px; } .sub1_4Wrap { margin-top : -120px; } .sub1-1_04 { padding : 10px 0px; } .sub1_5Wrap { margin-top : 40px; } .sub1-1_05 { padding : 40px 0px; } .sub2-1_01 { width : auto !important; max-width : 200px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .mawidth850 { max-width : 850px !important; } .sub2_1_02Wrap { margin-top : 30px; } .sub2_1_03Wrap { margin-top : 50px; padding : 50px 0px; } .sub2_1_04Wrap { padding : 50px 0px; } .sub2-2_01 { width : auto !important; max-width : 320px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .sub2-2_04 { 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; } .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:20px;} .map2 { width : 100%; height:500px; margin-top:20px;} /* vr & map contorl css */ .subCommonWrap .InformationWrap { width : 90%; height : auto; display : inline-block; padding : 3px 0 3px 0; text-align : left; margin-top : 10px; border-bottom : 1px solid #ddd; margin-left : 5%; } .subCommonWrap .InformationWrap .InfoLineLeft { width : 48%; height : auto; display : inline-block; float : left; text-align : left; padding-bottom : 15px; padding-left : 2%; } .subCommonWrap .InformationWrap .InfoLineLeft .InfoTitle { display : block; float : left; width : 100px; color : #333; font-weight : 500; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineLeft .InfoData { display : block; float : left; color : #333; font-weight : 300; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineLeft .InfoData.InfostrongRed { font-size : 16px; font-weight : 500; color : #980000; } .subCommonWrap .InformationWrap .InfoLineLeft .InfoData.Infostrong { font-size : 16px; font-weight : 500; color : #4374D9; } .subCommonWrap .InformationWrap .InfoLineRight { width : 48%; height : auto; display : inline-block; float : left; text-align : left; padding-bottom : 15px; padding-left : 2%; } .subCommonWrap .InformationWrap .InfoLineRight .InfoTitle { display : block; float : left; width : 100px; color : #333; font-weight : 500; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineRight .InfoData { display : block; float : left; color : #333; font-weight : 300; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineFull { width : 100%; height : auto; display : inline-block; float : left; text-align : left; padding-bottom : 15px; padding-left : 2%; } .subCommonWrap .InformationWrap .InfoLineFull .InfoTitle { display : block; float : left; width : 100px; color : #333; font-weight : 500; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineFull .InfoData { display : block; float : left; padding-right : 10px; color : #333; font-weight : 300; font-size : 14px; } .subCommonWrap .InformationWrap .InfoLineFull .VRHerf { color : #3DB7CC; font-size : 14px; padding : 1px 8px; display : inline-block; border : 2px solid #3DB7CC; margin-left : 100px; margin-top : -10px; line-height : 1.5em; transition : all ease-in-out .3s; -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; } .subCommonWrap .InformationWrap .InfoLineFull .VRHerf:hover { background-color : #3DB7CC; color : #fff; transition : all ease-in-out .3s; -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; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map { width : 100%; height : auto; display : inline-block; margin-top : 30px; text-align : center; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map p { text-align : center; font-size : 32px; font-weight : 500; color : #999; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .locate { font-size : 15px; color : #fff; line-height : 65px; border : 1px solid #eaeaea; padding : 5px 10px; background-color : #666; font-weight : 300; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap { width : 100%; height : auto; display : inline-block; float : left; overflow : hidden; position : relative; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .sub_Iframe { width : 48%; height : 550px; margin : 0 1%; position : absolute; left : 0; top : 0; z-index : -1; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map ,.subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map2 { width : 48%; height : 550px; margin : 0 1%; position : absolute; right : 0; top : 0; z-index : -1; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents { width : 100%; height : auto; display : inline-block; text-align : center; margin-top : 543px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .Contents_href { padding : 10px 20px; margin : 25px 5px; background-color : #4374D9; color : #fff; display : inline-block; font-size : 15px; font-weight : 400; cursor : pointer; line-height : 1.5em; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .Contents_href:hover { background-color : #000000; color : #fff000; box-shadow : 0px 0px 5px #333; -o-transition : all ease-in-out .5s; -ms-transition : all ease-in-out .5s; -moz-transition : all ease-in-out .5s; -webkit-transition : all ease-in-out .5s; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .contents_controloff { background-color : #980000 !important; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .Contents_href.control_off { display : none; } /* 클릭시 팝업 생성 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 : */ .Intro_Basic { margin-top : 20px; } /* vr & map contorl css */ .subCommonWrap .InformationWrap .InfoLineFull .view_Map { margin-top : 10px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .sub_Iframe { width : 48%; height : 350px; margin : 0 1%; position : absolute; left : 0; top : 0; z-index : -1; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map ,.posterBBS_View .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map2 { width : 48%; height : 350px; margin : 0 1%; position : absolute; right : 0; top : 0; z-index : -1; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents { width : 100%; height : auto; display : inline-block; text-align : center; margin-top : 350px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .Contents_href { padding : 7px 14px; margin : 15px 3px; font-size : 13px; } } @media (max-width:640px) { /* ******************************************************************************************************************************************************************************** */ /* Mobile CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .Intro_Basic { margin-top : 20px; } .Intro_Basic .Wrap { padding : 0; width : 98%; } /*다운로드*/ .Intro_Basic .Wrap .Intro_Contents .cadalog { width : 100%; padding : 10px 0px 10px 4%; background-color : #f7f7f7; } .Intro_Basic .Wrap .Intro_Contents .cadalog p.cadalog_title { font-size : 16px; font-weight : 400; color : #333; line-height : 28px; } .Intro_Basic .Wrap .Intro_Contents .cadalog a.download_Wrap { padding : 3px 0 3px 17px; margin : 1px 0px 1px 4%; width : 96%; } .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.Title_contents { width : 150%; margin-left : -25%; } .Intro_Basic .Wrap .Intro_Contents .Contents_Img img.contents { width : 100%; margin-left : 0; } .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; } .map { width : 100%; height:300px; margin-top:20px;} .sub1-1_02 { padding : 20px 0px 30px 0; margin-top : 0px; } .sub1_3Wrap { margin-top : -30px; } .sub1-1_03 { padding : 10px 0px 30px 0px; } .sub1_4Wrap { margin-top : -40px; } .sub1-1_04 { padding : 10px 0px; } .sub1_5Wrap { margin-top : 10px; } .sub1-1_05 { padding : 20px 0px; } .sub2-1_01 { width : auto !important; max-width : 200px !important; display:inline-block; margin-top:80px; margin-bottom:40px; } .mawidth850 { max-width : 850px !important; } .sub2_1_02Wrap { margin-top : 10px; } .sub2_1_03Wrap { margin-top : 20px; padding : 30px 0px; } .sub2_1_04Wrap { padding : 30px 0px; } .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; } /* vr & map contorl css */ .subCommonWrap .InformationWrap .InfoLineFull .view_Map { margin-top : 10px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map p { font-size : 18px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .locate { display : inline-block; width : 90%; padding : 15px 0px; font-size : 12px; margin-top : 10px; line-height : 0;} .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap { width : 100%; height : 640px; display : inline-block; float : left; overflow : hidden; position : relative; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .sub_Iframe { width : 100%; height : 250px; margin : 0; top : 65px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map ,.posterBBS_View .InformationWrap .InfoLineFull .view_Map .VR_Wrap .map2 { width : 100%; height : 250px; margin : 0; top : 340px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents { margin-top : 0px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents2 { margin-top : 524px; } .subCommonWrap .InformationWrap .InfoLineFull .view_Map .VR_Wrap .Full_Contents .Contents_href { padding : 5px 5px; margin : 15px 2px; font-size : 12px; } }