/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_fade PC CSS */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division4A_fade_slideUnderBanner { width : 100%; height : auto; display : inline-block; text-align : center; margin : -450px 0px 70px 0; position : relative; z-index : 999; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .Top_Banner { width : 100%; height : auto; display : inline-block; text-align : center; padding : 35px 0px; background: -moz-linear-gradient(left, rgba(4,0,0,0) 0%, rgba(4,0,0,0.65) 30%, rgba(4,0,0,0.65) 70%, rgba(4,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(4,0,0,0) 0%,rgba(4,0,0,0.65) 30%,rgba(4,0,0,0.65) 70%,rgba(4,0,0,0) 100%); background: linear-gradient(to right, rgba(4,0,0,0) 0%,rgba(4,0,0,0.65) 30%,rgba(4,0,0,0.65) 70%,rgba(4,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00040000', endColorstr='#00040000',GradientType=1 ); } .division4A_fade_slideUnderBanner .Top_Banner .contents { width : 100%; height : auto; display : inline-block; text-align : center; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.smalltitle { font-size : 24px; color : #fff; font-weight : 400; text-shadow : 2px 2px 2px #000; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.maintitle { font-size : 38px; color : #fff000; font-weight : 400; text-shadow : 2px 2px 2px #000; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { width : 100%; height : auto; display : inline-block; max-width : 1300px; margin-top : 40px; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap { border-radius : 0; float : left; margin : 0 auto; width : 23%; height : auto; margin-left : 1%; margin-right : 1%; text-align : center; box-shadow : 0px 0px 13px #444; background: rgb(220,220,221); /* Old browsers */ background: -moz-linear-gradient(left, rgba(220,220,221,1) 0%, rgba(255,255,255,1) 50%, rgba(220,220,221,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(220,220,221,1) 0%,rgba(255,255,255,1) 50%,rgba(220,220,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdd', endColorstr='#dcdcdd',GradientType=1 ); /* IE6-9 */ } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Title { width : 100%; height : auto; display : inline-block; line-height : 0; font-size : 0; text-align : center; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Title p { font-size : 24px; font-weight : 500; margin-bottom : 15px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap { width : 100%; height : auto; display : inline-block; position : relative; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image { width : 100%; height : 100%; position : relative; z-index:1; position : absolute; left : 0; top : 0; opacity : 0; 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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap:hover .Wrap .division4A_fade_Image { opacity : 1; transition : all ease-in-out .8s; -o-transition : all ease-in-out .8s; -ms-transition : all ease-in-out .8s; -moz-transition : all ease-in-out .8s; -webkit-transition : all ease-in-out .8s; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description { width : 100%; height : 100%; display : table; background-color : rgba(0,0,0,0.4); } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap { width : 100%; height : 100%; display : table-cell; background-color : rgba(0,0,0,0.4); vertical-align : middle; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap p { margin-top : 8%; font-size : 22px; font-weight : 500; color : #fff; line-height : 1.4em; text-shadow : 2px 2px 2px #333; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap .Go_on { margin-top : 6%; padding : 5px 30px 6px 30px; border-radius : 6px; border : 2px solid #A6A6A6; color : #fff; font-size : 15px; font-weight : 400; display : inline-block; 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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap .Go_on:hover { background-color : #890000; color : #fff; font-weight : 500; border : 2px solid #fff; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image img { position : absolute; top : 0; left : 0; opacity : 0; width : 100%; height : auto; transform : scale(1); -o-transform : scale(1); -ms-transform : scale(1); -moz-transform : scale(1); -webkit-transform : scale(1); transition : all ease-in-out .8s; -o-transition : all ease-in-out .8s; -ms-transition : all ease-in-out .8s; -moz-transition : all ease-in-out .8s; -webkit-transition : all ease-in-out .8s; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap:hover .division4A_fade_Image img { opacity : 1; display : inline-block; transform : scale(1); -o-transform : scale(1); -ms-transform : scale(1); -moz-transform : scale(1); -webkit-transform : scale(1); transition : all ease-in-out .8s; -o-transition : all ease-in-out .8s; -ms-transition : all ease-in-out .8s; -moz-transition : all ease-in-out .8s; -webkit-transition : all ease-in-out .8s; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_HoverImage { width : 100%; height : auto; display : inline-block; z-index:-1; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_HoverImage img { width : 100%; height : auto; margin : 0 auto; text-align : center; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap:hover .division4A_fade_HoverImage img { opacity : 1; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap { width : 100%; height : auto; text-align : center; padding : 5px 0px; display : block; position : relative; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap { width : 100%; height : auto; display : table; background : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap { width : 100%; height : 48px; display : table-cell; vertical-align : middle; background : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle { font-size : 16px; font-weight : 400; color : #333; letter-spacing : -0.05em; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle .division4A_br { display : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap:hover .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle { color : #ff0000; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerDescript { font-size : 15px; font-weight : 200; color : #333; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap:hover .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerDescript { color : #ff0000; transition : all ease-in-out .5s; -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; } @media (min-width:1401px) and (max-width:1600px) { .division4A_fade_slideUnderBanner { margin : -370px 0px 70px 0; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { max-width : 1200px; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap p { font-size : 22px; } } @media (min-width:1201px) and (max-width:1400px) { .division4A_fade_slideUnderBanner { margin : -345px 0px 70px 0; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { max-width : 1100px; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap p { font-size : 20px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle .division4A_br { display : inline-block; } } @media (min-width:1025px) and (max-width:1201px) { .division4A_fade_slideUnderBanner { margin : -320px 0px 70px 0; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { max-width : 905px; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap p { font-size : 18px; } } @media (min-width:701px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_fade TABLET CSS */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division4A_fade_slideUnderBanner { width : 100%; height : auto; display : inline-block; text-align : center; margin : -205px 0px 70px 0; z-index : 1; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .Top_Banner { padding : 15px 0px; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.smalltitle { font-size : 18px; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.maintitle { font-size : 26px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { width : 100%; height : auto; display : inline-block; max-width : 1300px; transition : all ease-in-out .5s; -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; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap { padding : 0; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap p { font-size : 15px; margin-top : 0; font-weight : 400; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .Wrap .division4A_fade_Image .hover_description .verticalAlignWrap .Go_on { padding : 3px 15px 4px 15px; font-size : 12px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap { width : 100%; height : 45px; display : table; background : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle { font-size : 19px; line-height : 1.3em; } } @media (max-width:700px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_fade Mobile CSS */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ .division4A_fade_slideUnderBanner { margin : -200px 0px 20px 0px; } .division4A_fade_slideUnderBanner .Top_Banner { padding : 15px 0px; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.smalltitle { font-size : 14px; } .division4A_fade_slideUnderBanner .Top_Banner .contents p.maintitle { font-size : 18px; } .division4A_fade_slideUnderBanner h2 { font-size : 24px; line-height : 24px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap { width : 100%; height : auto; display : inline-block; max-width : 1230px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .division4A_fade_Titleline { margin-top : 15px; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap { width : 48%; margin : 6px 1% 10px 1%; height : auto; box-shadow : 0px 0px 5px #777 } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap:hover .Wrap .division4A_fade_Image { display : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap { padding : 0; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap { width : 100%; height : 45px; display : table; background : none; } .division4A_fade_slideUnderBanner .division4A_fade_slideUnderBannerWrap .ImageWrap .DescriptWrap .tableWrap .tableverticalAlignWrap .BannerTitle { font-size : 13px; line-height : 1.2em; } }