/*****************서브상단 이미지*******************/ #subVisualCon{position:relative; width:100%; overflow:hidden; height:400px; box-sizing:border-box; margin-top:90px; display:flex; align-items:center; } #subVisualCon .prd-visual-container{position:absolute; top:0; left:0; bottom:0; right:0; transform: scale(1.1,1.1); transition:transform 4000ms ease-in-out; } #subVisualCon.active .prd-visual-container{ transform: scale(1.0,1.0) ;} #subVisualCon .prd-visual-con{position:relative; width:100%;} #subVisualCon .prd-visual-inner{position:relative; width:92%; max-width:1400px; margin:0 auto;} #subVisualCon .sub_img{background-repeat:no-repeat; background-position:right top; background-size:cover;} #subVisualCon .prd-visual-tit{width:100%; font-family:'TTTtangsbudaejjigaeB' ,'yg-jalnan'; display:block; font-size:65px; line-height:1.2; color:#1553A3; margin-bottom:15px; } #subVisualCon .prd-visual-tit b{ color:#35AB41; } #subVisualCon .prd-visual-txt {font-size:21px; color:#000;} #middleArea{padding:50px 0 0;} /*****************서브 하위메뉴*******************/ #SubMenu{position:relative; height:64px; background-color:#fff; width:100%; max-width:1400px; border-radius:40px; margin:0 auto; border:1px solid #eee; background-color:#fff;margin-top:-32px;} #SubMenu .top-menu-inner{width:100%; height:64px;} #SubMenu .location-to-home-btn{float:left; width:62px; height:64px; left:0px; top:0px; text-align:center; border-right:1px solid #eee; border-radius:40px;} #SubMenu .location-to-home-btn i{color:#000; font-size:28px; line-height:64px;} #SubMenu .menu-location{position:relative; float:left; min-width:262px; } #SubMenu .menu-location > .cur-location{position:relative; display:block; height:64px; padding:0 56px 0 25px; } #SubMenu .menu-location > .cur-location span{line-height:64px; color:#000; font-weight:400; font-size:19px; letter-spacing:-1.5px; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #SubMenu .menu-location > .cur-location .arrow{position:absolute; top:50%; right:20px; margin-top:-4px; } #SubMenu .menu-location > .cur-location.open .arrow{transform:rotate(-180deg);} #SubMenu .menu-location.last-menu-location > .cur-location.open .arrow{transform:rotate(0deg);} #SubMenu .menu-location.location1 > .cur-location{opacity:0.7;filter:Alpha(opacity=70);} #SubMenu .menu-location.location1 > .cur-location.open{opacity:1.0;filter:Alpha(opacity=100);} #SubMenu .menu-location.last-menu-location > .cur-location{background-color:#EDF3DE; border-radius:40px;} #SubMenu .menu-location.last-menu-location > .cur-location .arrow{display:none;} #SubMenu .menu-location .location-menu-con{display:none; position:absolute; top:64px; left:-1px; border-radius:0 0 30px 30px; width:110%; border:1px solid #eee; border-top:0; background-color:#fff; z-index:11; } #SubMenu .menu-location .location-menu-con li{border-top:1px solid #eee;} #SubMenu .menu-location .location-menu-con li a{ display:block; height:63px; line-height:63px;padding:0 25px; font-size:16px; font-weight:400; color:#404041; transition:all 0.4s; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} #SubMenu .menu-location .location-menu-con li.on{position:relative;} #SubMenu .menu-location .location-menu-con li.on a, #SubMenu .menu-location .location-menu-con li a:hover{background-color:#EDF3DE;} #SubMenu .menu-location .location-menu-con li:last-child a{ border-radius:0 0 30px 30px;} @media all and ( max-width:1440px ){ #subVisualCon{height:350px; } #subVisualCon .prd-visual-tit{ font-size:55px;} #subVisualCon .prd-visual-txt {font-size:19px;} } @media all and ( max-width:1024px ){ #subVisualCon{height:300px; } #subVisualCon .prd-visual-tit{ font-size:40px;} #subVisualCon .prd-visual-txt {font-size:17px;} /* 하위 메뉴 */ #SubMenu, #SubMenu .top-menu-inner{height:40px;} #SubMenu .area-box{padding:0;} #SubMenu .location-to-home-btn{display:none;} #SubMenu .menu-location{width:calc(50% - 1px); min-width:auto;} #SubMenu.menu3 .menu-location{width:calc(33.3% - 1px)} #SubMenu .menu-location > .cur-location{height:40px; padding:0 34px 0 15px;} #SubMenu .menu-location > .cur-location span{font-size:13px; line-height:40px; vertical-align:middle; letter-spacing:-1px; word-break:keep-all;} #SubMenu .menu-location > .cur-location .arrow{right:10px; max-width:14px;} #SubMenu .menu-location .location-menu-con{top:40px;} #SubMenu .menu-location .location-menu-con li{} #SubMenu .menu-location .location-menu-con li a{width:calc(100% - 20px); height:auto; padding:10px; font-size:11px; line-height:19px; vertical-align:middle; letter-spacing:-1px; word-break:keep-all;} } @media all and ( max-width:767px ){ #subVisualCon{height:200px; margin-top:60px;} /*이미지 위 베이지 그라데이션 박스 추가 글자 잘보이도록 */ #subVisualCon .prd-visual-container::before{ content:""; position:absolute; top:0; left:0; width:70%; height:100%; pointer-events:none; background: linear-gradient(to right,rgba(237,230,224,1) 0%, rgba(237,230,224,0) 100% ); z-index:1;} #subVisualCon .prd-visual-con{ position:relative; z-index:2; } #subVisualCon .prd-visual-tit{ font-size:30px;} #subVisualCon .prd-visual-txt {font-size:15px;} /* 상단 비주얼 */ #subVisualCon .prd-visual-inner{ padding-left:0px;} #subVisualCon .prd-visual-tit{ margin-bottom:8px;} #SubMenu{ margin-top:-22px;} } /* 상단 타이틀 */ #contentInfoCon{position:relative; border-bottom:1px solid #eee; margin-bottom:60px; } #contentInfoCon .content-tit{color:#000; font-size:38px; font-weight:600; text-align:center;} #contentInfoCon .content-tit span{position:relative; display:inline-block; padding:0 0 30px 0; } #contentInfoCon .content-tit span:after{display:block; width:145px; height:1px; position:absolute; bottom:-1px; left:50%; margin-left:-72px; content:""; background-color:#37AC43;} @media all and ( max-width:1280px ){ #contentInfoCon{margin-bottom:50px; } #contentInfoCon .content-tit{font-size:30px;} #contentInfoCon .content-tit span:after{width:100px; margin-left:-50px;} } @media all and ( max-width:1024px ){ #contentInfoCon{margin-bottom:40px; } #contentInfoCon .content-tit{font-size:23px;} #contentInfoCon .content-tit span{padding:0 0 20px 0; } }