/* ******************************************************************************************************************************************************************************** */ /* */ /* */ /* Intro_Basic (인사말) */ /* */ /* */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .company01_intro3 { width : 100%; height : auto; text-align : center; } .company01_intro3 .Wrap { width : 95%; height : auto; display : inline-block; text-align : center; position : relative; max-width : 1100px; } /* Title */ .company01_intro3 .Wrap .titleWrap { width : 100%; height : auto; position : relative; background-image : url('../../../../Image/sub1-1_titleimg.jpg'); background-size : cover; backgorund-position : center center; } .company01_intro3 .Wrap .titleWrap .titleContent { width : 85%; height : auto; position : relative; display : inline-block; text-align : center; margin-top : 200px; padding-bottom : 50px; background-color : rgba(0,0,0,0.5); } .company01_intro3 .Wrap .titleWrap .titleContent img { width : 30%; height : auto; max-width : 80px; display : inline-block; margin-top : -70px; } .logorotate { animation : logorotate 12s linear infinite; } @keyframes logorotate { 0% { transform:rotateX(0deg) rotateY(0deg) scale(1); } 22.5% { transform:rotateX(360deg) rotateY(60deg) scale(0.4); } 45% { transform:rotateX(0deg) rotateY(0deg) scale(1.4); } 50% { transform:rotateX(0deg) rotateY(0deg) scale(1.4); } 67.5% { transform:rotateX(360deg) rotateY(60deg) scale(0.4); } 90% { transform:rotateX(0deg) rotateY(0deg) scale(1); } 100% { transform:rotateX(0deg) rotateY(0deg) scale(1); } } /* title-font */ .company01_intro3 .Wrap .titleWrap .titleContent p { margin-top : 10px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Top { font-size : 25px; color : #fff; text-shadow : 2px 2px 2px #333; font-weight : 500; margin-top : 20px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Sub { font-size : 20px; color : #fff; text-shadow : 2px 2px 2px #333; font-weight : 500; margin-top : 0; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_cpname ,.company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.nomal { font-size : 48px; color : #fff000; text-shadow : 3px 3px 3px #333; font-weight : 500; } .company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.small { font-size : 36px; color : #fff000; text-shadow : 3px 3px 3px #333; font-weight : 500; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_descript { font-size : 22px; color : #fff; text-shadow : 2px 2px 2px #333; font-weight : 300; } /* Intro */ .company01_intro3 .Wrap .IntroWrap { width : 100%; height : auto; max-width : 850px; position : relative; display : inline-block; text-align : left; margin-top : 60px; } .company01_intro3 .Wrap .IntroWrap .font_Strong { font-size : 31px; font-weight : 600; color : #005293; line-height : 1.5em; } .company01_intro3 .Wrap .IntroWrap .font_nomal { font-size : 19px; font-weight : 400; color : #888; word-break : keep-all; line-height : 1.6em; margin-top : 30px; } .company01_intro3 .Wrap .IntroWrap .img_sign { width : 100%; height : auto; display : inline-block; text-align : right; margin-top : 20px; } .company01_intro3 .Wrap .IntroWrap .img_sign img { width : 100%; height : auto; max-width : 320px; margin-top : 10px; } /* Contents */ .company01_intro3 .Wrap .ContentWrap { width : 100%; height : auto; max-width : 850px; position : relative; display : inline-block; text-align : center; margin-top : 60px; border : 1px solid #EEEFEF; box-shadow : 0px 0px 5px #e5e5e5; } .company01_intro3 .Wrap .ContentWrap .topWrap { width : 100%; height : auto; display : inline-block; text-align : center; padding : 40px 10px; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap { display : inline-block; text-align : left; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont { font-size : 28px; font-weight : 600; text-align : center; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont span { font-size : 28px; font-weight : 600; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont span.ColorRed { color : #980000; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont span.ColorBlue { color : #005293; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont { padding-left : 15px; font-size : 20px; color : #999; word-break : keep-all; position : relative; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:before { content : ''; width : 10px; height : 10px; border-radius : 10px; position : absolute; display : inline-block; background-color : #999; left : 0; top : 50%; transform : translate(-50%,-50%); } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:nth-child(2) { margin-top : 15px; } .company01_intro3 .Wrap .ContentWrap .ImgWrap { width : 100%; height : auto; background-color : #EEEFEF; padding : 35px; } .company01_intro3 .Wrap .ContentWrap .ImgWrap img { width : 100%; height : auto; } @media (min-width:641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************************** */ /* Tablet CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* Title */ .company01_intro3 .Wrap .titleWrap .titleContent { margin-top : 190px; } .company01_intro3 .Wrap .titleWrap .titleContent img { max-width : 110px; margin-top : -56px; } /* title-font */ .company01_intro3 .Wrap .titleWrap .titleContent p { margin-top : 5px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Top { font-size : 20px; margin-top : 10px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Sub { font-size : 16px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_cpname ,.company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.nomal { font-size : 38px; } .company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.small { font-size : 30px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_descript { font-size : 18px; } /* Intro */ .company01_intro3 .Wrap .IntroWrap .font_Strong { font-size : 26px; font-weight : 600; color : #005293; line-height : 1.5em; } .company01_intro3 .Wrap .IntroWrap .font_nomal { font-size : 16px; line-height : 1.7em; margin-top : 15px; } .company01_intro3 .Wrap .IntroWrap .img_sign { padding-right : 15px; } /* Contents */ .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont { font-size : 23px; font-weight : 600; text-align : center; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont span { font-size : 23px; font-weight : 600; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont { font-size : 18px; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:before { width : 8px; height : 8px; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:nth-child(2) { margin-top : 10px; } .company01_intro3 .Wrap .ContentWrap .ImgWrap { padding : 3% 2.5%; } } @media (max-width:640px) { /* ******************************************************************************************************************************************************************************** */ /* Mobile CSS */ /* ******************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ /* Title */ .company01_intro3 .Wrap .titleWrap .titleContent { margin-top : 100px; } .company01_intro3 .Wrap .titleWrap .titleContent img { max-width : 110px; margin-top : -56px; } /* title-font */ .company01_intro3 .Wrap .titleWrap .titleContent p { margin-top : 5px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Top { font-size : 16px; margin-top : 10px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_Sub { font-size : 14px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_cpname ,.company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.nomal { font-size : 30px; } .company01_intro3 .Wrap .titleWrap .titleContent .title_cpname span.small { font-size : 24px; } .company01_intro3 .Wrap .titleWrap .titleContent p.title_descript { font-size : 14px; } /* Intro */ .company01_intro3 .Wrap .IntroWrap { margin-top : 40px; } .company01_intro3 .Wrap .IntroWrap .font_Strong { font-size : 19px; fontline-height : 1.4em; } .company01_intro3 .Wrap .IntroWrap .font_nomal { font-size : 14px; line-height : 1.7em; margin-top : 15px; } .company01_intro3 .Wrap .IntroWrap .img_sign { padding-right : 10px; } .company01_intro3 .Wrap .IntroWrap .img_sign img { max-width : 200px; } /* Contents */ .company01_intro3 .Wrap .ContentWrap { margin-top : 40px; } .company01_intro3 .Wrap .ContentWrap .topWrap { padding : 15px 10px; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont { font-size : 20px; font-weight : 600; text-align : center; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .strongFont span { font-size : 20px; font-weight : 600; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont { font-size : 14px; margin : 3px 0px; line-height : 1.3em; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:before { width : 3px; height : 80%; border-radius : 0; background-color : #e5e5e5; left : 8px; top : 10%; transform : none; } .company01_intro3 .Wrap .ContentWrap .topWrap .textWrap .nomalFont:nth-child(2) { margin-top : 10px; } .company01_intro3 .Wrap .ContentWrap .ImgWrap { padding : 15px; } }