@charset "utf-8"; /* 서브 비주얼 영역 */ #sub_visual {position:relative; margin-top:180px; overflow:hidden} #sub_visual ul {position:relative; overflow:hidden} #sub_visual ul li {position:relative; height:358px; z-index:30; background-size:cover !important} /*#sub_visual ul li {position:absolute; top:0; left:0; height:358px; 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_visual1.jpg) center top no-repeat} #sub_visual ul li.img2 {background:url(../../img/sub_visual2.jpg) center top no-repeat} #sub_visual ul li.img3 {background:url(../../img/sub_visual3.jpg) center top no-repeat}*/ #sub_visual ul li.sub1 {background:url(../../img/sub_visual1.jpg) center top no-repeat} #sub_visual ul li.sub2 {background:url(../../img/sub_visual2.jpg) center top no-repeat} #sub_visual ul li.sub3 {background:url(../../img/sub_visual3.jpg) center top no-repeat} #sub_visual ul li.sub4 {background:url(../../img/sub_visual4.jpg) center top no-repeat} #sub_visual ul li.sub5 {background:url(../../img/sub_visual5.jpg) center top no-repeat} #sub_visual ul li.sub6 {background:url(../../img/sub_visual6.jpg) center top no-repeat} /* 로케이션 영역 */ #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:''} /* 추가 */ .subvisual_img1 {clear:both; height:358px; background:url(../../img/sub_visual1.jpg) center top no-repeat; background-size:cover} .subvisual_img2 {clear:both; height:358px; background:url(../../img/sub_visual2.jpg) center top no-repeat; background-size:cover} .subvisual_img3 {clear:both; height:358px; background:url(../../img/sub_visual3.jpg) center top no-repeat; background-size:cover} .subvisual_img4 {clear:both; height:358px; background:url(../../img/sub_visual4.jpg) center top no-repeat; background-size:cover} .subvisual_img5 {clear:both; height:358px; background:url(../../img/sub_visual5.jpg) center top no-repeat; background-size:cover} .subvisual_img6 {clear:both; height:358px; background:url(../../img/sub_visual6.jpg) center top no-repeat; background-size:cover} /* 좌측 서브메뉴 */ #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-family:'GothamMedium','notokr'; font-size:50px; font-weight:normal; color:#333; line-height:1; margin-bottom:5px} #container > .inner .title h3 {font-family:'GothamMedium','notokr'; font-size:18px; font-weight:normal; color:#c2c2c2} #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:20px} /* COMPANY - 회사소개 */ #container > .inner .greeting .grt_tit {margin-bottom:60px} #container > .inner .greeting .grt_tit h3 {font-size:22px; font-weight:600; color:#444; line-height:1.2; margin-bottom:20px} #container > .inner .greeting ul.teamList {text-align:justify; margin-bottom:60px} #container > .inner .greeting ul.teamList:after {display:inline-block; width:100%; content:''} #container > .inner .greeting ul.teamList > li {display:inline-block; width:30%; vertical-align:top} #container > .inner .greeting ul.teamList > li .info {margin-bottom:30px} #container > .inner .greeting ul.teamList > li .info h4 {font-size:18px; font-weight:600; color:#555; line-height:1.1} #container > .inner .greeting ul.teamList > li .info span {font-size:12px; color:#888} #container > .inner .greeting ul.teamList > li .info ul {margin-top:20px} #container > .inner .greeting ul.teamList > li .info ul li {color:#666} #container > .inner .greeting ul.teamList > li .info ul li:before {display:inline-block; width:2px; height:2px; content:''; margin-right:5px; background:#ccc; vertical-align:middle} #container > .inner .greeting ul.teamList > li .imgArea {width:80%; margin:0 auto; border-radius:50%; overflow:hidden} #container > .inner .greeting .info_box {margin-top:30px} #container > .inner .greeting .info_box dl {margin:0; overflow:hidden} #container > .inner .greeting .info_box dl dt {display:block; float:left; width:12%; padding:8px 0; font-weight:600; color:#444; border-bottom:1px dotted #ccc} #container > .inner .greeting .info_box dl dd {display:block; margin-left:15%; padding:8px 0; color:#666; border-bottom:1px dotted #ccc} /* COMPANY - HISTORY */ #container > .inner .history .grid {margin-bottom:60px; padding:0 50px} #container > .inner .history .grid:after {clear:both; display:block; content:''} #container > .inner .history .grid .imgArea {width:53.7%} #container > .inner .history .grid .desc {width:40.5%} #container > .inner .history .grid .desc h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner .history .grid .desc h3 span {color:#dc372b} #container > .inner .history .grid .desc p {font-size:14px; color:#7c7c7c; text-align:justify} #container > .inner .history .grid.type1 .imgArea {float:left} #container > .inner .history .grid.type1 .desc {float:right} #container > .inner .history .grid.type2 .imgArea {float:right} #container > .inner .history .grid.type2 .desc {float:left} /* COMPANY - TO TELL THE TRUTH */ #container > .inner .truth {padding:0 100px} #container > .inner .truth h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner .truth p {font-size:14px; color:#7c7c7c; margin-bottom:30px; text-align:justify} #container > .inner .truth .typo {width:52%; max-width:500px; margin:30px auto} #container > .inner .truth .ci2 {width:90%; max-width:980px; margin:10px auto} #container > .inner .truth .boxList {margin-bottom:80px} #container > .inner .truth .boxList li {margin-bottom:4px; padding:20px 35px; font-size:16px; font-weight:600; color:#fff; background:#99a3b0; overflow:hidden} #container > .inner .truth .boxList li span {float:left; display:block} #container > .inner .truth .boxList li span.col1 {width:16.6%} #container > .inner .truth .boxList li span.col2 {width:33.3%} #container > .inner .truth .boxList li span.col3 {width:41.6%} /* BRAND - 플라비 */ #container > .inner > .brand .mainBox {margin-bottom:100px; background:#fbfbfc; overflow:hidden} #container > .inner > .brand .mainBox .imgArea {float:left; width:50%} #container > .inner > .brand .mainBox .info {float:left; width:50%; padding:60px} #container > .inner > .brand .mainBox .info h2 {font-size:26px; font-weight:600; color:#333; line-height:1.3; margin-bottom:40px} #container > .inner > .brand .mainBox .info p {font-size:14px; font-weight:500; color:#a4a4a4; text-align:justify} #container > .inner > .brand .mainBox .info a.btn-view {display:inline-block; font-size:14px; font-weight:600; color:#333; margin-top:20px; padding:15px 20px; border:1px solid #d4d6dc; background:#e4e5ea} #container > .inner > .brand .mainBox .info a.btn-view:before {display:inline-block; width:17px; height:17px; margin-right:10px; content:''; background:url(../../img/brand_btn_ico.png) center no-repeat; vertical-align:-3px} #container > .inner > .brand .mainBox .info a.btn-view:hover {background:#eeeff3} #container > .inner > .brand .mainBox_e {margin-bottom:100px; background:#fbfbfc; overflow:hidden} #container > .inner > .brand .mainBox_e .imgArea {float:left; width:50%} #container > .inner > .brand .mainBox_e .info {float:left; width:50%; padding:30px} #container > .inner > .brand .mainBox_e .info h2 {font-size:22px; font-weight:600; color:#333; line-height:1.3; margin-bottom:40px} #container > .inner > .brand .mainBox_e .info p {font-size:14px; font-weight:500; color:#a4a4a4; line-height:1.5; text-align:left} #container > .inner > .brand .mainBox_e .info a.btn-view {display:inline-block; font-size:14px; font-weight:600; color:#333; margin-top:20px; padding:15px 20px; border:1px solid #d4d6dc; background:#e4e5ea} #container > .inner > .brand .mainBox_e .info a.btn-view:before {display:inline-block; width:17px; height:17px; margin-right:10px; content:''; background:url(../../img/brand_btn_ico.png) center no-repeat; vertical-align:-3px} #container > .inner > .brand .mainBox_e .info a.btn-view:hover {background:#eeeff3} #container > .inner > .brand h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner > .brand .gridList {text-align:justify} #container > .inner > .brand .gridList:after {display:inline-block; width:100%; content:''} #container > .inner > .brand .gridList li {display:inline-block; width:31%; vertical-align:top} #container > .inner > .brand .gridList li .info h4 {margin:40px 0; font-size:26px; font-weight:normal; color:#333; line-height:1} #container > .inner > .brand .gridList li .info p {font-size:14px; color:#7c7c7c} #container > .inner > .brand .gridList_e {text-align:justify} #container > .inner > .brand .gridList_e:after {display:inline-block; width:100%; content:''} #container > .inner > .brand .gridList_e li {display:inline-block; width:31%; vertical-align:top} #container > .inner > .brand .gridList_e li .info h4 {text-align:left; margin:20px 0; font-size:26px; font-weight:bold; color:#333; line-height:1} #container > .inner > .brand .gridList_e li .info p {text-align:left; font-size:14px; line-height:1.4; color:#7c7c7c} #plaviePopup {display:none; position:fixed; top:20%; left:50%; width:500px; margin-left:-250px; padding:40px; border:1px solid #ababab; background:#fff; z-index:99} #plaviePopup .btn-close-layer {position:absolute; top:20px; right:20px; width:32px; height:32px; border:none; background:url(../../img/btn_layer_close.png) center no-repeat; background-size:cover; cursor:pointer} #plaviePopup .btn-close-layer span {font-size:0; text-indent:-9999em} /* BRAND - 121도씨 */ #container > .inner > .brand1 .mainBox {margin-bottom:100px; background:#fbfbfc; overflow:hidden} #container > .inner > .brand1 .mainBox .imgArea {float:left; width:50%} #container > .inner > .brand1 .mainBox .imgArea1 {float:left; width:50%; height:292px} #container > .inner > .brand1 .mainBox .info {float:left; width:50%; padding:60px} #container > .inner > .brand1 .mainBox .info h2 {font-size:26px; font-weight:600; color:#333; line-height:1.3; margin-bottom:40px} #container > .inner > .brand1 .mainBox .info p {font-size:14px; font-weight:500; color:#a4a4a4; text-align:justify} #container > .inner > .brand1 .mainBox .info p span {color:#333333; font-size:15px; font-weight:700} #container > .inner > .brand1 .mainBox_e {margin-bottom:100px; background:#fbfbfc; overflow:hidden} #container > .inner > .brand1 .mainBox_e .imgArea {float:left; width:50%} #container > .inner > .brand1 .mainBox_e .imgArea1 {float:left; width:50%; height:292px} #container > .inner > .brand1 .mainBox_e .info {float:left; width:50%; padding:30px} #container > .inner > .brand1 .mainBox_e .info h2 {font-size:22px; font-weight:600; color:#333; line-height:1.3; margin-bottom:40px} #container > .inner > .brand1 .mainBox_e .info p {font-size:14px; font-weight:500; color:#a4a4a4; line-height:1.5; text-align:left; margin-top:20px} #container > .inner > .brand1 .mainBox_e .info p span {color:#333333; font-size:15px; font-weight:700} #container > .inner > .brand1 h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner > .brand1 .gridList {text-align:justify;} #container > .inner > .brand1 .gridList:after {display:inline-block; width:100%; content:''} #container > .inner > .brand1 .gridList li {display:inline-block; width:46%; vertical-align:top} #container > .inner > .brand1 .gridList li .info h4 {margin:30px 0; font-size:24px; font-weight:bold; color:#333; line-height:1} #container > .inner > .brand1 .gridList li .info p {font-size:14px; color:#7c7c7c; margin-bottom:40px} #container > .inner > .brand1 .gridList_e {text-align:justify;} #container > .inner > .brand1 .gridList_e:after {display:inline-block; width:100%; content:''} #container > .inner > .brand1 .gridList_e li {display:inline-block; width:46%; vertical-align:top} #container > .inner > .brand1 .gridList_e li .info h4 {margin:30px 0; font-size:24px; font-weight:bold; color:#333; line-height:1} #container > .inner > .brand1 .gridList_e li .info p {font-size:14px; line-height:1.4; color:#7c7c7c; margin-bottom:40px} /* DRUG - 의약외품 */ #container > .inner > .drug .mainBox {margin-bottom:40px; background:#fff; overflow:hidden} #container > .inner > .drug .mainBox .imgArea {float:left; width:40%} #container > .inner > .drug .mainBox .info {float:left; width:60%; padding:40px} #container > .inner > .drug .mainBox .info h2 {font-size:26px; font-weight:600; color:#333; line-height:1.3; margin-bottom:10px} #container > .inner > .drug .mainBox .info p {font-size:14px; font-weight:500; color:#7c7c7c; text-align:justify} #container > .inner > .drug h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner > .drug .gridList {text-align:justify;} #container > .inner > .drug .gridList:after {display:inline-block; width:100%; content:''} #container > .inner > .drug .gridList li {display:inline-block; width:46%; vertical-align:top} #container > .inner > .drug .gridList li .info h4 {margin:30px 0; font-size:24px; font-weight:bold; color:#333; line-height:1} #container > .inner > .drug .gridList li .info p {font-size:14px; color:#7c7c7c} /* PARTNERS - PARTNER */ #container > .inner > .partner .bannerList li {position:relative; padding:70px 0; border-top:1px solid #e6e6e6; overflow:hidden} #container > .inner > .partner .bannerList li:first-child {border-top:none} #container > .inner > .partner .bannerList li .desc {width:50.7%} #container > .inner > .partner .bannerList li .desc h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:10px} #container > .inner > .partner .bannerList li .desc p {font-size:14px; color:#7c7c7c; text-align:justify} #container > .inner > .partner .bannerList li .banner {position:absolute; top:50%; right:0; width:42.2%; margin-top:-6%} /* PRODUCT CATEGORY - BABY-WPIES */ #container > .inner > .product {position:relative; margin-bottom:120px; padding:0 100px} #container > .inner > .product .tile {position:absolute; padding:35px; width:38.7%; background:#f6f6f6; z-index:10} #container > .inner > .product .tile.upper {top:80px; left:30px} #container > .inner > .product .tile.lower {bottom:-80px; right:30px} #container > .inner > .product .tile h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner > .product .tile p {font-size:14px; color:#7c7c7c} #container > .inner > .product .inner-bg {height:910px; background:url(../../img/product_baby_bg.jpg) center top no-repeat; background-size:cover} /* PRODUCT CATEGORY - COSMETICS */ #container > .inner > .product1 {position:relative; margin-bottom:70px; padding:0 100px} #container > .inner > .product1 .tile {position:absolute; padding:35px; width:38.7%; background:#f6f6f6; z-index:10} #container > .inner > .product1 .tile.upper {top:80px; left:30px} #container > .inner > .product1 .tile.lower {bottom:-80px; right:30px} #container > .inner > .product1 .tile h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner > .product1 .tile p {font-size:14px; color:#7c7c7c} #container > .inner > .product1 .inner-bg {height:910px; background:url(../../img/product_img4.jpg) center top no-repeat; background-size:cover} /* R&D / QUALITY */ #container > .inner > .rnd .gridList {text-align:justify; margin-bottom:30px} #container > .inner > .rnd .gridList:after {display:inline-block; width:100%; content:''} #container > .inner > .rnd .gridList li {display:inline-block; width:31%; margin-bottom:75px; vertical-align:top} #container > .inner > .rnd .gridList li .box {margin-bottom:15px; padding:20px 60px; border:1px solid #e4e4e4} #container > .inner > .rnd .gridList li .caption {text-align:center} #container > .inner > .rnd .gridList li .caption img {display:inline-block !important; width:auto !important} #container > .inner > .rnd .gridList li.list_clear {height:0; padding:0; background:none} /* COMPANY - 찾아오시는 길 */ #map {position:relative; height:400px; margin-bottom:30px; overflow:hidden} #container > .inner .map_box {padding:30px; background:#f6f6f6} #container > .inner .map_box ul.map_info li {color:#666} #container > .inner .map_box ul.map_info li:before {display:inline-block; width:3px; height:3px; margin-right:5px; content:''; background:#aaa; vertical-align:4px} /* BUSINESS - 사업안내 */ #container > .inner .business ul.typeList {text-align:justify; margin-bottom:60px} #container > .inner .business ul.typeList:after {display:inline-block; width:100%; content:''} #container > .inner .business ul.typeList li {display:inline-block; width:23%; vertical-align:top} #container > .inner .business ul.typeList .imgArea {margin-bottom:25px; overflow:hidden} #container > .inner .business ul.typeList .info h4 {font-size:40px; font-weight:400; color:#444; line-height:1; margin-bottom:15px} #container > .inner .business ul.typeList .info p {color:#666} #container > .inner .business ul.processList {text-align:justify; margin-bottom:60px} #container > .inner .business ul.processList:after {display:inline-block; width:100%; content:''} #container > .inner .business ul.processList li {display:inline-block; width:31%} #container > .inner .business ul.processList .imgArea {margin-bottom:20px; overflow:hidden} #container > .inner .business ul.processList .info {padding:10px 15px; background:#ebebeb} #container > .inner .business ul.processList .info.color {background:#555} #container > .inner .business ul.processList .info.color span {color:#fff} #container > .inner .business ul.processList .info span {font-size:15px; color:#777} /* BUSINESS - 사업영역 */ #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:nth-child(2) .imgArea { display: flex; flex-direction:column; gap:15px; } #container > .inner .business .area_wrap > .area_box:nth-child(2) .imgArea .custom--01{ display:flex; align-items:center; } #container > .inner .business .area_wrap > .area_box:nth-child(2) .imgArea .table-list td{background:#e4e4e4; border:solid 0px #fff; text-align:center;} #container > .inner .business .area_wrap > .area_box .imgArea .table-list td a{display:block; width:100%; height:100%;} #container > .inner .business .area_wrap > .area_box:nth-child(2) .imgArea .custom--01 li{width:25%;} #container > .inner .business .area_wrap > .area_box .info {padding:30px; min-height:200px; background:#fff} #container > .inner .business .area_wrap > .area_box .info h4 {font-size:24px; font-weight:600; color:#444; line-height:1; margin-bottom:20px} /* ESG경영이란 - 추가 */ #container > .inner .content-list{margin-top:80px;} #container > .inner .content-list ul{display:flex; flex-wrap:wrap; gap:60px 60px;} #container > .inner .content-list ul li{width:calc(50% - 30px);} #container > .inner .content-list .txt-bx{margin-top:20px;} #container > .inner .content-list .tit{font-weight:600; font-size:22px; color:#212121; margin-bottom:2px;} #container > .inner .content-list .dec{color:#6e6e6e;} #container > .inner .content-list .dec span{color:#ff1414; font-weight:600;} #container > .inner .content-list .img-bx #container > .inner .content-list .content-item:nth-child(2){margin-top:30px;} #container > .inner .content-list .modal button{cursor:pointer;} #container > .inner .content-list .modal { cursor:pointer; display: none; z-index: 500; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); } #container > .inner .content-list .modal button { position: absolute; top: 3rem; right: 3rem; background: transparent; border: 0; color: #ffffff; font-size: 3rem; } #container > .inner .content-list .modalBox { position: relative; top: 20%; left: 50%; transform: translate(-50%, -20%); background-color: #ffffff; width: 70%; height: 50%; text-align: center; } #container > .inner .content-list .modalBox img { width: 100%; } #container > .inner .content-list .modalBox p { color: #ffffff; background-color: #fff; font-size: 2rem; padding: .1rem; } /*-----------------------------------------------------------------------------------------------------------------*/ /* 미디어 쿼리 */ @media screen and (max-width:1024px) { /*추가*/ #container > .inner .content-list ul{gap:30px 20px;} #container > .inner .content-list ul li{width:100%;} #container > .inner .content-list .txt-bx{margin-top:20px;} #container > .inner .content-list .tit{margin-bottom:10px; line-height:1.2;} #container > .inner .content-list br{ display: none; } #container > .inner .content-list .modalBox{width:100%; top:35%;} /* 서브 공통 레이아웃 */ #sub_visual {position:relative; margin-top:90px; overflow:hidden} #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} #container > .inner .title h2 {font-size:36px} #nav {float:none; width:100%; margin:0; border-bottom:1px solid #dcdcdc} #nav:after {clear:both; display:block; content:''} /* 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 - HISTORY */ #container > .inner .history .grid {padding:0} #container > .inner .history .grid .imgArea {float:none; width:100%; margin-bottom:40px} #container > .inner .history .grid .desc {float:none; width:100%} /* COMPANY - TO TELL THE TRUTH */ #container > .inner .truth {padding:0} #container > .inner .truth h3 {font-size:26px; font-weight:600; color:#333; margin-bottom:30px} #container > .inner .truth p {margin-bottom:20px} #container > .inner .truth .typo {width:70%} #container > .inner .truth .ci2 {width:100%} #container > .inner .truth .boxList {margin-bottom:80px} #container > .inner .truth .boxList li {font-size:13px} #container > .inner .truth .boxList li span.col3 {width:auto} /* BRAND - 플라비 */ #container > .inner > .brand .mainBox .imgArea {float:none; width:100%} #container > .inner > .brand .mainBox .info {float:none; width:100%; padding:30px} #container > .inner > .brand .mainBox .info h2 {margin-bottom:25px} #container > .inner > .brand .gridList li {width:48%; margin-bottom:40px} #container > .inner > .brand .gridList li .info h4 {margin:30px 0; font-size:22px} #plaviePopup {position:absolute; top:16%; width:70%; margin-left:-35%} /* BRAND - 121도씨 */ #container > .inner > .brand1 .mainBox .imgArea {float:none; width:100%} #container > .inner > .brand1 .mainBox .info {float:none; width:100%; padding:30px} #container > .inner > .brand1 .mainBox .info h2 {margin-bottom:25px} #container > .inner > .brand1 .gridList li {width:48%; margin-bottom:40px} #container > .inner > .brand1 .gridList li .info h4 {margin:30px 0; font-size:22px} /* DRUG - 의약외품 */ #container > .inner > .drug .mainBox .info {float:none; width:100%; padding:30px} #container > .inner > .drug .mainBox .imgArea {float:none; width:60%} #container > .inner > .drug .mainBox .info h2 {margin-bottom:25px} #container > .inner > .drug .gridList li {width:48%; margin-bottom:40px} #container > .inner > .drug .gridList li .info h4 {margin:30px 0; font-size:22px} /* PRODUCT CATEGORY - BABY-WPIES */ #container > .inner > .product {position:relative; margin-bottom:120px; padding:0 50px} #container > .inner > .product .tile {width:50%} #container > .inner > .product .tile.upper {top:30px; left:0} #container > .inner > .product .tile.lower {bottom:-80px; right:0} #container > .inner > .product .tile h3 {font-size:20px; margin-bottom:20px} #container > .inner > .product .tile p {font-size:12px} #container > .inner > .product .inner-bg {height:780px} /* PRODUCT CATEGORY - COSMETICS */ #container > .inner > .product1 {position:relative; margin-bottom:120px; padding:0 50px} #container > .inner > .product1 .tile {width:50%} #container > .inner > .product1 .tile.upper {top:30px; left:0} #container > .inner > .product1 .tile.lower {bottom:-80px; right:0} #container > .inner > .product1.tile h3 {font-size:20px; margin-bottom:20px} #container > .inner > .product1 .tile p {font-size:12px} #container > .inner > .product1 .inner-bg {height:780px} /* R&D / QUALITY */ #container > .inner > .rnd .gridList li {width:48%; margin-bottom:60px} #container > .inner > .rnd .gridList li .box {margin-bottom:15px; padding:20px 40px} /* BUSINESS - 사업안내 */ #container > .inner .business > p br {display:none} #container > .inner .business ul.typeList li {width:48%; margin-bottom:40px} #container > .inner .business ul.typeList li .imgArea {max-height:250px} #container > .inner .business ul.typeList li .imgArea img {margin-top:-20%} #container > .inner .business ul.processList .info span {font-size:13px} /* 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; margin-bottom:0} #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; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #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} /* 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 - HISTORY */ #container > .inner .history .grid .desc h3 {font-size:20px; margin-bottom:15px} #container > .inner .history .grid .desc p {font-size:12px} /* COMPANY - TO TELL THE TRUTH */ #container > .inner .truth h3 {font-size:20px; margin-bottom:15px} #container > .inner .truth p {font-size:12px} #container > .inner .truth .boxList {margin-bottom:50px} #container > .inner .truth .boxList li {font-size:12px; font-weight:normal; letter-spacing:-0.5px; padding:10px 20px} #container > .inner .truth .boxList li span {float:none; width:100%; line-height:1.7} /* BRAND - 플라비 */ #container > .inner > .brand .mainBox {margin-bottom:50px} #container > .inner > .brand .mainBox .info h2 {font-size:20px; font-weight:600; color:#333; line-height:1.3; margin-bottom:25px} #container > .inner > .brand .mainBox .info h2 br {display:none} #container > .inner > .brand .mainBox .info p {font-size:12px} #container > .inner > .brand .mainBox .info a.btn-view {width:100%; font-size:12px; padding:12px 20px; text-align:center} #container > .inner > .brand .mainBox .info a.btn-view:before {display:none} #container > .inner > .brand h3 {font-size:20px; margin-bottom:15px} #container > .inner > .brand .gridList li {width:100%} #container > .inner > .brand .gridList li .info h4 {margin:20px 0; font-size:22px} #container > .inner > .brand .gridList li .info p {font-size:12px} #plaviePopup {width:90%; margin-left:-45%; padding:30px} #plaviePopup .btn-close-layer {width:24px; height:24px} /* BRAND - 121도씨 */ #container > .inner > .brand1 .mainBox {margin-bottom:50px} #container > .inner > .brand1 .mainBox .info h2 {font-size:20px; font-weight:600; color:#333; line-height:1.3; margin-bottom:25px} #container > .inner > .brand1 .mainBox .info h2 br {display:none} #container > .inner > .brand1 .mainBox .info p {font-size:12px} #container > .inner > .brand1 h3 {font-size:20px; margin-bottom:15px} #container > .inner > .brand1 .gridList li {width:100%} #container > .inner > .brand1 .gridList li .info h4 {margin:20px 0; font-size:22px} #container > .inner > .brand1 .gridList li .info p {font-size:12px} /* DRUG - 의약외품 */ #container > .inner > .drug .mainBox {margin-bottom:50px} #container > .inner > .drug .mainBox .info h2 {font-size:20px; font-weight:600; color:#333; line-height:1.3; margin-bottom:25px} #container > .inner > .drug .mainBox .info h2 br {display:none} #container > .inner > .drug .mainBox .info p {font-size:12px} #container > .inner > .drug .mainBox .info a.btn-view {width:100%; font-size:12px; padding:12px 20px; text-align:center} #container > .inner > .drug .mainBox .info a.btn-view:before {display:none} #container > .inner > .drug h3 {font-size:20px; margin-bottom:15px} #container > .inner > .drug .gridList li {width:100%} #container > .inner > .drug .gridList li .info h4 {margin:20px 0; font-size:22px} #container > .inner > .drug .gridList li .info p {font-size:12px} /* PARTNERS - PARTNER */ #container > .inner > .partner .bannerList li {padding:30px 0} #container > .inner > .partner .bannerList li .desc {width:100%} #container > .inner > .partner .bannerList li .desc h3 {font-size:20px} #container > .inner > .partner .bannerList li .desc p {font-size:12px} #container > .inner > .partner .bannerList li .banner {position:static; top:inherit; right:inherit; width:70%; margin:0 auto 30px auto} /* PRODUCT CATEGORY - BABY-WPIES */ #container > .inner > .product {margin-bottom:0; padding:0} #container > .inner > .product .tile {position:static; width:100%; top:inherit; left:inherit; right:inherit; bottom:inherit; margin-bottom:30px} #container > .inner > .product .inner-bg {display:none} /* PRODUCT CATEGORY - COSMETICS */ #container > .inner > .product1 {margin-bottom:0; padding:0} #container > .inner > .product1 .tile {position:static; width:100%; top:inherit; left:inherit; right:inherit; bottom:inherit; margin-bottom:30px} #container > .inner > .product1 .inner-bg {display:none} /* R&D / QUALITY */ #container > .inner > .rnd .gridList li {width:100%; margin-bottom:45px} #container > .inner > .rnd .gridList li .box {margin-bottom:15px; padding:30px} /* COMPANY - 찾아오시는 길 */ #map {height:350px} #container > .inner .map_box ul.map_info li {font-size:12px} /* BUSINESS - 사업안내 */ #container > .inner .business ul.typeList li {width:100%} #container > .inner .business ul.typeList .info h4 {font-size:15px} #container > .inner .business ul.typeList li .imgArea {max-height:inherit} #container > .inner .business ul.typeList li .imgArea img {margin-top:0} #container > .inner .business ul.processList li {width:100%; margin-bottom:40px} #container > .inner .business 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} }