@charset "utf-8"; /* 서브 비주얼 영역 */ #sub_visual {position:relative; margin-top:80px; overflow:hidden} #sub_visual ul {position:relative; overflow:hidden} #sub_visual ul li {position:absolute; top:0; left:0; height:400px; z-index:5; background-size:cover !important} #sub_visual ul li.active {position:relative; z-index:30} #sub_visual ul li.img1 {background:url(../../img/sub_visual001.jpg) center top no-repeat} #sub_visual ul li.img2 {background:url(../../img/sub_visual002.jpg) center top no-repeat} #sub_visual ul li.img3 {background:url(../../img/sub_visual003.jpg) center top no-repeat} /*#sub_visual ul li img {display:block; width:100%; height:100%}*/ /* 로케이션 영역 */ #container .location_bar {height:60px; border-bottom:1px solid #e6e6e6; background:#fff} #container .location_bar .inner {max-width:1400px; margin:0 auto; padding:0 50px; text-align:right} #container .location_bar .inner ul {text-align:right} #container .location_bar .inner ul li {display:inline-block; color:#888; line-height:60px} #container .location_bar .inner ul li.divider {margin:0 5px} #container .location_bar .inner ul li.current {color:#333} /* 컨텐츠 영역 레이아웃 */ #container > .inner {max-width:1300px; margin:0 auto; padding:50px; border-left:1px solid #e6e6e6; border-right:1px solid #e6e6e6} #container > .inner:after {clear:both; display:block; content:''} .btm_img {clear:both; height:560px; background:url(../../img/sub_btm_img.jpg) center top no-repeat; background-size:cover} .btm_img .inner {max-width:1400px; margin:0 auto; padding:0 50px} .btm_img .inner .caption {padding-top:10%} .btm_img .inner .caption h2 {font-size:50px; font-weight:600; color:#fff; line-height:1; margin-bottom:30px} .btm_img .inner .caption p {font-size:15px; font-weight:300; color:#fff; max-width:60%} /* 좌측 서브메뉴 */ #nav {height:50px; border-bottom:1px solid #e6e6e6} #nav .inner {max-width:1400px; margin:0 auto; padding:0 50px} #nav .title {float:left; width:50px; height:100%; background:#1c1c1c} #nav .title a {display:block; width:100%; height:100%; font-size:16px; font-weight:600; color:#fff; text-align:center; line-height:50px} #nav .dropdown {position:relative; float:left; margin-left:-1px; min-width:180px; z-index:10} #nav .dropdown > a {position:relative; display:block; width:100%; height:100%; padding:0 75px 0 25px; color:#444; font-weight:600; line-height:50px; border-right:1px solid #e6e6e6} #nav .dropdown > a:before {position:absolute; width:0; height:0; top:50%; right:15px; margin-top:-2px; content:''; border-style:solid; border-width:4px; border-color:transparent; border-top-color:#333} #nav .dropdown.open > a:before {margin-top:-6px; border-top-color:transparent; border-bottom-color:#333} #nav .dropdown > ul.mnuList {display:none; position:absolute; top:49px; left:0; width:100%; border:1px solid #e6e6e6; background:#fff; box-shadow:0 2px 2px rgba(0,0,0,.12)} #nav .dropdown > ul.mnuList li {border-top:1px solid #e6e6e6} #nav .dropdown > ul.mnuList li:first-child {border-top:none} #nav .dropdown > ul.mnuList li a {display:block; padding:10px 25px} #nav .dropdown > ul.mnuList li a:hover {background:#f9f9f9} /* 컨텐츠 내부 공통 */ #container > .inner img.img_tab, #container > .inner img.img_mob {display:none !important} #container > .inner .title {margin-bottom:40px} #container > .inner .title h2 {font-size:35px; font-weight:600; color:#333; line-height:1.2; margin-bottom:10px;} #container > .inner .title h3 {font-size:14px; font-weight:400; color:#333; line-height:1.4; margin-bottom:10px;} #container > .inner .title p {font-size:12px; color:#888; line-height:1.6} #container > .inner h3.sub_tit {font-size:22px; font-weight:400; line-height:1.2; color:#555; margin-bottom:30px;} /* 서브타이틀 */ #container > .inner .overview_title {padding:0px 5px; width:115px; background:#000000; margin-bottom:10px;} #container > .inner .overview_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .vision_title {padding:0px 5px; width:80px; background:#000000; margin-bottom:10px;} #container > .inner .vision_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .value_title {padding:0px 5px; width:75px; background:#000000; margin-bottom:10px;} #container > .inner .value_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .area_title {padding:0px 5px; width:63px; background:#000000; margin-bottom:10px;} #container > .inner .area_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .process_title {padding:0px 5px; width:100px; background:#000000; margin-bottom:10px;} #container > .inner .process_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .partner_title {padding:0px 5px; width:95px; background:#000000; margin-bottom:10px;} #container > .inner .partner_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .client_title {padding:0px 5px; width:80px; background:#000000; margin-bottom:10px;} #container > .inner .client_title span {font-size:22px; font-weight:800; color:#ffffff;} #container > .inner .brand_title {padding:0px 5px; width:80px; background:#000000; margin-bottom:10px;} #container > .inner .brand_title span {font-size:22px; font-weight:800; color:#ffffff;} /* SUB - 공통 */ #container > .inner .greeting .grt_tit {margin-bottom:60px;} #container > .inner .greeting .grt_tit h1 {font-size:16px; font-weight:400; color:#333; line-height:1.6; margin-bottom:10px;} #container > .inner .greeting .grt_tit h2 {font-size:14px; font-weight:400; color:#333; line-height:1.4; margin-bottom:30px;} #container > .inner .greeting .grt_tit h3 {font-size:24px; font-weight:500; color:#333; line-height:1.5; margin-bottom:20px;} #container > .inner .greeting .grt_tit h4 {font-size:20px; font-weight:600; color:#333; line-height:1.5; margin-bottom:20px;} #container > .inner .greeting .grt_tit h5 {font-size:14px; font-weight:400; color:#333; line-height:1.4; margin-bottom:10px;} /* COMPANY - 오버뷰 */ #container > .inner .greeting .box1 {padding:0px 5px; width:150px; background:#000000; margin-bottom:5px} #container > .inner .greeting .box1 span {font-size:18px; font-weight:600; color:#ffffff;} #container > .inner .greeting .box2 {padding:0px 5px; width:45px; background:#000000; margin-bottom:5px} #container > .inner .greeting .box2 span {font-size:18px; font-weight:600; color:#ffffff;} #container > .inner .greeting .box3 {padding:0px 5px; width:120px; background:#000000; margin-bottom:10px} #container > .inner .greeting .box3 span {font-size:18px; font-weight:600; color:#ffffff; } /* COMPANY - 비전 */ #container > .inner .greeting .vision_box {padding:0px 5px; width:345px; background:#000000; margin-bottom:2px} #container > .inner .greeting .vision_box span {font-size:14px; font-weight:600; color:#ffffff;} /* COMPANY - 밸류 */ #container > .inner .value {display:inline-block; width:23%; text-align:center; vertical-align:top} #container > .inner .value .imgArea {margin:0 auto 30px auto; width:620px; height:514px; border-radius:50%; overflow:hidden} #container > .inner .value .imgArea img {display:block; width:100%} /* BRAND - 브랜드 */ #container > .inner .brand ul.typeList {text-align:justify; margin-bottom:60px} #container > .inner .brand ul.typeList:after {display:inline-block; width:100%; content:''} #container > .inner .brand ul.typeList li {display:inline-block; width:31%; vertical-align:top} #container > .inner .brand ul.typeList .imgArea {margin-bottom:25px; overflow:hidden} #container > .inner .brand ul.typeList .info h4 {font-size:20px; font-weight:400; color:#444; line-height:1; margin-bottom:20px} #container > .inner .brand ul.typeList .info h5 {font-size:16px; font-weight:400; color:#444; line-height:1.5; margin-bottom:10px} #container > .inner .brand ul.typeList .info p {color:#666;} #container > .inner .brand ul.typeList .info a.btn {position:relative; display:inline-block; margin-top:30px; margin-bottom:100px; padding:10px 35px; font-size:15px; font-weight:400; color:#666666; background:transparent; border:1px solid #666666;} #container > .inner .brand ul.typeList .info a.btn span {position:relative; transition:all .3s ease; z-index:10} #container > .inner .brand ul.typeList .info a.btn:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease} #container > .inner .brand ul.processList {text-align:justify; margin-bottom:70px} #container > .inner .brand ul.processList:after {display:inline-block; width:100%; content:''} #container > .inner .brand ul.processList li {display:inline-block; width:31%} #container > .inner .brand ul.processList .imgArea {margin-bottom:20px; overflow:hidden} #container > .inner .brand ul.processList .info {padding:10px 15px; background:#ebebeb} #container > .inner .brand ul.processList .info.color {background:#555} #container > .inner .brand ul.processList .info.color span {color:#fff} #container > .inner .brand ul.processList .info span {font-size:15px; color:#777} #container > .inner .brand .grt_tit h2 {font-size:14px; font-weight:400; color:#333; line-height:1.4; margin-bottom:30px;} /* BUSINESS - AREA */ #container > .inner .business {margin-bottom:60px;} #container > .inner .business .area h1 {font-size:16px; font-weight:400; color:#333; margin-bottom:-10px;} #container > .inner .business .area h2 {font-size:22px; font-weight:600; color:#333; margin-bottom:3px;} #container > .inner .business .area h3 {font-size:14px; font-weight:400; color:#333; line-height:1.5; margin-bottom:30px;} #container > .inner .business .area_wrap {text-align:justify; overflow:hidden} #container > .inner .business .area_wrap:after {display:inline-block; width:100%; content:''} #container > .inner .business .area_wrap > .area_box {display:inline-block; width:49.5%; margin-bottom:20px; vertical-align:top} #container > .inner .business .area_wrap > .area_box .imgArea {overflow:hidden} #container > .inner .business .area_wrap > .area_box .info {padding:30px; min-height:260px; background:#efefef} #container > .inner .business .area_wrap > .area_box .info h4 {font-size:24px; font-weight:400; color:#444; line-height:1; margin-bottom:40px} /* BUSINESS - process */ #container > .inner .process{display:inline-block; width:989px; text-align:center; vertical-align:top margin-bottom:40px} #container > .inner .process.imgArea {margin:0 auto 30px auto; width:989px; height:332px; border-radius:50%; overflow:hidden} #container > .inner .process.imgArea img {display:block; width:100%} /* BUSINESS - partner*/ #container > .inner .partner{display:inline-block; width:905px; text-align:center; vertical-align:top} #container > .inner .partner.imgArea {margin:0 auto 30px auto; width:905px; height:759px; border-radius:50%; overflow:hidden} #container > .inner .partner.imgArea img {display:block; width:100%} /* 미디어 쿼리 */ @media screen and (max-width:1024px) { /* 서브 공통 레이아웃 */ #container > .inner {border:none} #container > .inner img.img_tab {display:block !important} #container > .inner img.img_pc, #container > .inner img.img_mob {display:none !important} #nav {float:none; width:100%; margin:0; border-bottom:1px solid #dcdcdc} #nav:after {clear:both; display:block; content:''} .btm_img {height:450px} .btm_img .inner .caption p {max-width:90%} /* COMPANY - 회사소개 */ #container > .inner .greeting .grt_tit p br {display:none} #container > .inner .greeting ul.teamList > li .info ul li {font-size:12px} #container > .inner .greeting ul.teamList > li .info span {font-size:11px} #container > .inner .greeting ul.teamList > li .imgArea {width:70%} /* COMPANY - VALUE */ #container > .inner .value {width:100% !important; text-align:left} #container > .inner .value .imgArea {width:620px; height:514p0x; margin:0 auto 30px auto} /* BRAND - 브랜드 */ #container > .inner .brand > p br {display:none} #container > .inner .brand ul.processList .info span {font-size:13px} /* BUSINESS - process */ #container > .inner .process{width:100% !important; text-align:left} #container > .inner .process.imgArea {margin:0 auto 30px auto} /* BUSINESS - partner*/ #container > .inner .partner{width:100% !important; text-align:left} #container > .inner .partner.imgArea {margin:0 auto 30px auto} /* BUSINESS - 사업영역 */ #container > .inner .business .area_wrap > .area_box .info {min-height:280px} } @media screen and (max-width:640px) { /* 서브 공통 레이아웃 */ #sub_visual {height:200px} #sub_visual ul li {height:200px !important} #container > .inner {padding:30px 30px 50px 30px} #container > .inner .title h2 {font-size:24px} #nav .title {display:none} #nav .inner {padding:0} #nav .inner:after {clear:both; display:block; content:''} #nav .dropdown {min-width:inherit; width:50%; width:-webkit-calc(50% + 1px); width:-moz-calc(50% + 1px)} #nav .dropdown:last-child a {border-right:none} #nav .dropdown > a {padding:0 50px 0 15px; font-size:12px; font-weight:400} #nav .dropdown > ul.mnuList li a {padding:10px 15px; font-size:12px} #container > .inner h3.sub_tit {font-size:16px; font-weight:600} #container > .inner img.img_mob {display:block !important} #container > .inner img.img_pc, #container > .inner img.img_tab {display:none !important} .btm_img {height:400px} .btm_img .inner {padding:0 30px} .btm_img .inner .caption h2 {font-size:36px} .btm_img .inner .caption p {max-width:100%; font-size:13px} /* COMPANY - 회사소개 */ #container > .inner .greeting .grt_tit h3 {font-size:16px} #container > .inner .greeting ul.teamList > li {width:100%; margin-bottom:30px; padding-top:30px; text-align:center; border-top:1px solid #e6e6e6} #container > .inner .greeting ul.teamList > li:first-child {border-top:none} #container > .inner .greeting ul.teamList > li .imgArea {width:160px} #container > .inner .greeting .info_box dl {border-bottom:1px dotted #ccc} #container > .inner .greeting .info_box dl dt {width:20%; border:none} #container > .inner .greeting .info_box dl dd {margin-left:25%; border:none} /* COMPANY - 연혁 */ #container > .inner .history .history_box .his_tit span {font-size:14px} #container > .inner .history .history_box .his_tit h3 {font-size:18px; margin-top:5px} #container > .inner .history .history_box .left {float:none; width:100%; margin-bottom:40px} #container > .inner .history .history_box .left p {font-size:12px} #container > .inner .history .history_box .right {margin-left:none; width:100%} #container > .inner .history .history_box .right dl {margin:15px 0; padding:15px 0 0 0; border-top:1px solid #e6e6e6} #container > .inner .history .history_box .right dl:first-child {border-top:none} #container > .inner .history .history_box .right dl dt {width:45px; font-size:18px} #container > .inner .history .history_box .right dl dd {margin-left:60px; font-size:12px} /* COMPANY - value */ #container > .inner .value {width:100% !important; text-align:left} #container > .inner .value .imgArea {width:350px; height:291px; margin:0 auto 30px auto} /* BRAND - 브랜드 */ #container > .inner .brand ul.typeList li {width:100%} #container > .inner .brand ul.typeList .info h4 {font-size:19px font-weight:600;} #container > .inner .brand ul.typeList li .imgArea {max-height:inherit} #container > .inner .brand ul.typeList li .imgArea img {margin-top:0} #container > .inner .brand ul.processList li {width:100%; margin-bottom:40px} #container > .inner .brand ul.processList li:last-child {margin-bottom:0} /* BUSINESS - 사업영역 */ #container > .inner .business .area_wrap > .area_box {width:100%; margin-bottom:15px} #container > .inner .business .area_wrap > .area_box .info {min-height:inherit; padding:20px} #container > .inner .business .area_wrap > .area_box .info h4 {font-size:15px; font-weight:600; margin-bottom:20px} #container > .inner .business .area_wrap > .area_box .info p {font-size:12px} }