/*****************서브상단 이미지와 타이틀/레이아웃*******************/ /* 상단 비주얼 */ #subVisualCon{position:relative; width:100%; overflow:hidden; height:230px; padding-top:170px; background: linear-gradient(-67.5deg, #aa076b, #572085, #38367E); background: -webkit-linear-gradient(-67.5deg, #aa076b, #572085, #38367E); overflow:hidden; } #subVisualCon .prd-visual-container{position:absolute; top:0; opacity:0.3; left:0; bottom:0; right:0; important;-ms-transform: scale(1.1,1.1);-o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 4000ms ease-in-out ; -moz-transition:transform 4000ms ease-in-out ;-o-transition:transform 4000ms ease-in-out ; -ms-transition:transform 4000ms ease-in-out; transition:transform 4000ms ease-in-out;} #subVisualCon .prd-visual-con{position:relative; } #subVisualCon .sub_img1{background:url(../../img/sub_img1.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img2{background:url(../../img/sub_img2.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img3{background:url(../../img/sub_img3.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img4{background:url(../../img/sub_img4.jpg) no-repeat center top; background-size:cover;} #subVisualCon .sub_img5{background:url(../../img/sub_img5.jpg) no-repeat center top; background-size:cover;} #subVisualCon .prd-visual-inner{position:relative; text-align:center; } #subVisualCon .prd-visual-tit{width:80%; margin:0 auto; text-align:center; font-size:45px; color:#fff; letter-spacing:-0.65px; font-weight:300; margin-bottom:5px; font-family:gmarketSansLight; } #subVisualCon .prd-visual-tit strong{position:relative; top:1px; display:inline-block; font-family:gmarketSansBold;} #subVisualCon .prd-visual-tit b{font-weight:500; color:#fff;font-family:gmarketSansBold;} #subVisualCon .prd-visual-txt {font-size:15px; line-height:120%; opacity:0.6; color:#fff;} #middleArea{padding:50px 0 0;} /* 상단 비주얼 :: Active */ #subVisualCon.active .prd-visual-container{-ms-transform: scale(1.0,1.0) ; -o-transform: scale(1.0,1.0) ; -moz-transform: scale(1.0,1.0) ; -webkit-transform: scale(1.0,1.0) ; transform: scale(1.0,1.0) ;} /* 상단 타이틀 */ #contentInfoCon{ position:relative; border-bottom:1px solid #d1d1d1; margin-bottom:55px;} #contentInfoCon .content-tit{color:#272727; font-size:40px; font-weight:500; text-align:center;} #contentInfoCon .content-tit span{position:relative; display:inline-block; padding:0 0 45px 0; } #contentInfoCon .content-tit span:after{display:block; width:145px; height:1px; position:absolute; bottom:-1px; left:50%; margin-left:-72px; content:""; background-color:#004B9B;} #container{padding-top:0px} /*****************5.서브 하위메뉴*******************/ #SubMenu{position:relative; height:60px; width:100%; position:absolute; z-index:300; left:0px; top:340px; border-top:1px solid rgba(255,255,255,0.3); } #SubMenu .top-menu-inner{width:100%; height:60px; } #SubMenu .location-to-home-btn{float:left; width:60px; height:60px; left:0px; top:0px; text-align:center; border-right:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2);} #SubMenu .location-to-home-btn i{color:#fff; font-size:28px; line-height:64px;} #SubMenu .menu-location{position:relative; float:left; min-width:262px; border-right:1px solid rgba(255,255,255,0.2);} #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:#fff; 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 .arrow{display:none;} #SubMenu .menu-location .location-menu-con{display:none; position:absolute; top:60px; left:-1px; width:calc(100% - 1px); border:1px solid #b4bbbb; border-top:0; background-color:#fff; z-index:11; } #SubMenu .menu-location .location-menu-con li{border-top:1px solid #e5e5e5} #SubMenu .menu-location .location-menu-con li:first-child{border-top:0;} #SubMenu .menu-location .location-menu-con li a{ display:block; height:60px; line-height:60px;padding:0 25px; font-size:16px; font-weight:400; letter-spacing:-1.65px; color:#404041; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;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:#f3f3f3;} /* 상단 메뉴 :: fixed */ #SubMenu.fixed .top-menu-inner{position:fixed; top:0; left:0; z-index:99;} @media all and ( max-width:1240px ){ /* 상단 비주얼 */ #subVisualCon .prd-visual-tit{width:100%;} /* 하위 메뉴 */ #SubMenu .area-box{padding-left:77px;} #SubMenu .location-to-home-btn{position:absolute; top:0; left:15px;} #SubMenu .menu-location{width:49.7%; min-width:auto;} } @media all and ( max-width:800px ){ /* 상단 비주얼 */ #subVisualCon{height:140px; padding-top:100px;} #subVisualCon .prd-visual-tit{font-size:23px;} #subVisualCon .prd-visual-sub-tit{font-size:12px; line-height:20px; margin-bottom:10px;} #subVisualCon .prd-visual-txt{font-size:12px; line-height:20px; padding-bottom:24px;} /* 타이틀 */ #middleArea{padding-top:30px;} #contentInfoCon{margin-bottom:30px;} #contentInfoCon .content-tit{font-size:20px; letter-spacing:-2.5px;} #contentInfoCon .content-tit span{padding-bottom:25px;} #contentInfoCon .content-tit span:after{width:200px; margin-left:-100px;} /* 하위 메뉴 */ #SubMenu{ top:200px;} #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);} #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:480px ){ /* 상단 비주얼 */ #subVisualCon .sub_img1, #subVisualCon .sub_img2, #subVisualCon .sub_img3, #subVisualCon .sub_img4, #subVisualCon .sub_img5{background-size:1200px;} #subVisualCon .prd-visual-inner{ padding-left:0px;} #subVisualCon .prd-visual-tit{ margin-bottom:8px;} }