/* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* Intro_Basic (인사말) */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .company01_intro2 { width : 100%; height : auto; text-align : center; } .company01_intro2 .wrap { width : 100%; height : auto; display : inline-block; text-align : center; position : relative; max-width : 1000px; } /* Top */ .company01_intro2 .wrap .cp01_intro2_topWrap { width : 100%; height : auto; display : inline-block; text-align : center; position : relative; text-align : center; } .company01_intro2 .wrap .cp01_intro2_topWrap .titleimg { width : 100%; height : auto; display : inline-block; z-index : 1; } .company01_intro2 .wrap .cp01_intro2_topWrap .titleimg img { width : 100%; height : auto; } .company01_intro2 .wrap .cp01_intro2_topWrap .intro2_logo { position : absolute; right : 3%; top : 5%; width : 40%; max-width : 250px; height : auto; } .company01_intro2 .wrap .cp01_intro2_topWrap .intro2_logo img { width : 100%; height : auto; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 { width : 50%; height : auto; background-color : rgba(0,105,147,0.7); padding : 30px 15px; z-index : 2; display : inline-block; position : absolute; margin-left : 25%; top : calc((100% - 204px) / 2); left : 0; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 img.titletext01_textimg { width : 80%; height : auto; max-width : 340px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 p.titletext01_nomal { font-weight : 600; font-size : 28px; color : #fff; text-shadow : 3px 3px 3px #333; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom { width : 80%; height : auto; padding : 12px; background-color : rgba(255,255,255,0.8); display : inline-block; text-align : center; z-index : 3; position : absolute; margin-left : 10%; left : 0; bottom : 0;} .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom p { font-size : 26px; font-weight : 500; color : #ea5404; } /*Middle*/ .company01_intro2 .wrap .cp01_intro2_descriptWrap { width : 90%; height : auto; display : inline-block; text-align : left; margin-top : 30px; max-width : 800px; } .company01_intro2 .cp01_intro2_nomaltext { font-size : 17px; font-weight : 300; color : #666; } .company01_intro2 .cp01_intro2_strongtext { font-size : 20px; font-weight : 600; color : #333; } .company01_intro2 .cp01_intro2_strongmediumtext { font-size : 17px; font-weight : 500; color : #666; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************************** */ /* Tablet CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 { width : 70%; padding : 25px 15px; margin-left : 15%; top : calc((100% - 204px) / 2); } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 img.titletext01_logoimg { width : 50%; height : auto; max-width : 180px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 img.titletext01_textimg { width : 70%; height : auto; max-width : 340px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 p.titletext01_nomal { font-weight : 600; font-size : 23px; color : #fff; text-shadow : 3px 3px 3px #333; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom { width : 70%; margin-left : 15%; padding : 8px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom p { font-size : 20px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell { display : inline-block; text-align : center; margin-top : 20px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left { display : inline-block; width : 100%; height : auto; max-width : 680px; text-align : center; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left .cp01_intro2_bottomWrap_nomaltext { text-align : left; padding : 10px 20px 0 20px; width : 50%; height : auto; display : inline-block; float : left; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left .cp01_intro2_bottomWrap_title_strongtext { font-size : 49px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_right { display : inline-block; padding : 0; width : 100%; height : auto; max-width : 680px; text-align : center; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .cp01_bottom_descript { width : 95%; margin-top : 25px; max-width : 650px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .cp01_bottom_descript .textWrap p { font-size : 17px; } } @media (max-width:640px) { /* ******************************************************************************************************************************************************************************** */ /* Mobile CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 { width : 85%; padding : 15px 10px; margin-left : 7.5%; top : calc((100% - 116px) / 2); } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 img.titletext01_logoimg { width : 50%; height : auto; max-width : 180px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 img.titletext01_textimg { width : 85%; margin-top : 5px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01 p.titletext01_nomal { font-size : 16px; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom { width : 100%; padding : 6px; margin-left : 0; } .company01_intro2 .wrap .cp01_intro2_topWrap .titletext01_bottom p { font-size : 17px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell { display : inline-block; text-align : center; margin-top : 20px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left { display : inline-block; margin-top : 15px; width : 100%; height : auto; max-width : 680px; text-align : center; } .company01_intro2 .cp01_intro2_nomaltext { font-size : 13px; } .company01_intro2 .cp01_intro2_strongtext { font-size : 16px; } .company01_intro2 .cp01_intro2_strongmediumtext { font-size : 13px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap { width : 95%; margin-top : 0px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left .cp01_intro2_bottomWrap_title_strongtext { font-size : 33px; line-height : 1.5em; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left .cp01_intro2_bottomWrap_nomaltext { text-align : left; padding : 10px 20px 0 20px; margin-top : 0; width : 100%; height : auto; display : inline-block; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_left .cp01_intro2_bottomWrap_title_nomaltext { font-size : 22px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .table-cell .cp01_bottom_right { display : inline-block; padding : 0; width : 100%; height : auto; max-width : 680px; text-align : center; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .cp01_bottom_descript { width : 95%; margin-top : 10px; max-width : 650px; padding : 15px 15px; } .company01_intro2 .wrap .cp01_intro2_bottomWrap .cp01_bottom_descript .textWrap p { font-size : 13px; text-indent : -8px; margin-left : 8px; color : #666; } .company01_intro2 .wrap .logowrap { margin : 30px 0px 10px 0px; } .company01_intro2 .wrap .logowrap img { width : 100%; max-width : 160px; } }