/* A A A : A : A : A : */ #division3A_slideBottomBanner { width : 100%; height : auto; text-align : center; padding : 2% 2% 5%; background: #70685eed; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #70685eed 50%, #fff 50%); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #70685eed 50%, #fff 50%); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } /* #70685e */ #division3A_slideBottomBanner .sectionWrap { width : 100%; height : auto; max-width : 1300px; display : inline-block; } #division3A_slideBottomBanner .sectionWrap .sectionTitBox { width : 100%; height : auto; position : relative; padding : 3% 0 ; } #division3A_slideBottomBanner .sectionWrap .sectionTitBox img { width : 80%; height : auto; position : absolute; top : 0; left : 50%; transform : translateX(-50%); mix-blend-mode : overlay; opacity : 0.15; } #division3A_slideBottomBanner .sectionWrap .sectionTitBox .topTit { font-size : calc(12px + 0.5vw); color : #fff; text-shadow : 2px 2px 20px #000000bf; font-weight : 300; } #division3A_slideBottomBanner .sectionWrap .sectionTitBox .botTit { font-size : calc(18px + 0.5vw); color : #f8bd00; text-shadow : 2px 2px 20px #000000bf; font-weight : 500; } .sectionTitBox .sonoMore { font-size : calc(15px + 0.4vw); background : #fff; color : #665f55; padding : 0.6em 10em; border-radius : 10px; margin-top : 1%; border : 1px solid #70685e; transition : .4s; display : inline-block; position : relative; z-index : 2; font-weight : 500; } .sectionTitBox .sonoMore:hover { background : #949494; color : #fff; box-shadow : 0px 0px 7px 0px #70685e; transition : .4s; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap { width : 100%; height : auto; display : flex; justify-content : space-between; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox { width : 32.5%; height : auto; padding : 3%; transition : .4s; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox:hover { box-shadow : 0px 0px 15px 0px #2c2c2c; transition : .4s; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white { background : #fff; border : 1px solid #dfdfdf; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerEngTit { font-size : calc(12px + 0.2vw); color : #665f5566; font-style : italic; padding : 1% 0; border-top : 1px solid #665f55; border-bottom : 1px solid #665f55; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerTit { font-size : calc(15px + 0.8vw); color : #665f55; margin-top : 6%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .moreText { font-size : calc(12px + 0.2vw); color : #665f55; margin : 3% 0 4%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerLogoBox { width : 60%; height : auto; display : inline-block; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerLogoBox img { width : 100%; height : auto; max-width : 170px; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown { background : #656158; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerEngTit { font-size : calc(12px + 0.2vw); color : #ffffff66; font-style : italic; padding : 1% 0; border-top : 1px solid #ffffff66; border-bottom : 1px solid #ffffff66; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerTit { font-size : calc(15px + 0.8vw); color : #fff; margin-top : 6%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .moreText { font-size : calc(12px + 0.2vw); color : #fff; margin : 3% 0 4%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerLogoBox { width : 60%; height : auto; display : inline-block; opacity : .4; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerLogoBox img { width : 100%; height : auto; max-width : 170px; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue { background-image : url("../../../Image/black_back.jpg"); background-size : cover; background-repeat : no-repeat; background-position : center; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerEngTit { font-size : calc(12px + 0.2vw); color : #bf968066; font-style : italic; padding : 1% 0; border-top : 1px solid #bf968066; border-bottom : 1px solid #bf968066; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerTit { font-size : calc(15px + 0.8vw); color : #bf9680; margin-top : 6%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .moreText { font-size : calc(12px + 0.2vw); color : #bf9680; margin : 3% 0 4%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerLogoBox { width : 60%; height : auto; display : inline-block; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerLogoBox img { width : 100%; height : auto; max-width : 170px; } /* 소노 메인 이미지 CSS */ .sono_mainImg { width : 100%; height : auto; /* background : #70685e66; */ text-align : center; background : #fff; padding : clamp(20px,3%,40px) clamp(20px,3%,40px) 0 clamp(20px,3%,40px); display : flex; flex-direction : column; align-items : center; } .sono_mainImg .pcImg { width : calc(500px + 20vw); height : auto; } .sono_mainImg .MobileImg { width : 100%; height : auto; display : none; } @media (max-width:640px) { /* **************************************************************************************************************************************************************************** */ /* */ /* */ /* 1단 배경 Fixed */ /* */ /* */ /* **************************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #division3A_slideBottomBanner { padding : 10% 2% 15%;} #division3A_slideBottomBanner .sectionWrap .sectionTitBox { padding : 5% 0 10%;} #division3A_slideBottomBanner .sectionWrap .sectionTitBox img { width : 90%; opacity : .3;} #division3A_slideBottomBanner .sectionWrap .sectionTitBox .topTit { font-size : 15px;} #division3A_slideBottomBanner .sectionWrap .sectionTitBox .botTit { font-size : 25px;} .sectionTitBox .sonoMore { width : 90%; padding : 0.6em 0; margin-top : 0.5em;} #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap { flex-direction : column; align-items : center; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox { width : 90%; padding : 5%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown { margin-bottom : 4%; box-shadow : 0px 0px 10px 0px #2c2c2c; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue { box-shadow : 0px 0px 10px 0px #2c2c2c; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox:hover { box-shadow : unset; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerEngTit, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerEngTit, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerEngTit { font-size : 12px; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerTit, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerTit, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerTit { font-size : 18px; margin-top : 8%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .moreText, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .moreText, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .moreText { margin : 3% 0 4%; } #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.white .bannerLogoBox, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.brown .bannerLogoBox, #division3A_slideBottomBanner .sectionWrap .bannerBoxWrap .bannerBox.blue .bannerLogoBox { width : 45%;} /* 소노 메인이미지 모바일 버전 CSS*/ .sono_mainImg{ padding : 10% 5%;} .sono_mainImg .pcImg { display : none; } .sono_mainImg .MobileImg { display : inline-block; } .sono_mainImg .sonoMore { font-size : calc(4px + 2.5vw); } }