.inner { max-width: 1400px; } /* sub - header */ #mqSub { position: relative; z-index: 15; } #mqSub .visual { position: relative; height: 550px; z-index: 1;} #mqSub .visual:after{position: absolute; content: ''; background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height:100%; z-index: -1;} #mqSub .visual .inner { position: relative; height: 100%; } #mqSub .visual h2 { position: absolute; top: 45%; left: 70px;} #mqSub .visual h2 span { overflow: hidden; display: block; } #mqSub .visual h2 .tt1{opacity: 0.5;} #mqSub .visual .sub_banner_txt {font-family: 'Play',sans-serif;} @keyframes bgBig{ 0%{transform: scale(1.05);} 100%{transform: scale(1.0);} } #mqSubNavi {position: absolute; right: 70px; bottom: 70px;} #mqSubNavi .parent { height: 70px; margin-top: -35px; } #mqSubNavi .parent > li { width: 200px; position: relative; margin-left: 40px; } #mqSubNavi .parent > li.rotate a::after { transform: translateY(-50%) rotate(180deg); } #mqSubNavi .parent > li > a { display: inline-block; width: 100%; line-height: 70px; font-size: 18px; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap;} #mqSubNavi .parent > li > a::after { content: ''; background: url(/images/icon/sub_header_arrow.png) no-repeat center; width: 11px; height: 6px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.2s; } #mqSubNavi .parent .home-data { width: 70px; height: 100%;} #mqSubNavi .parent .home-data a { display: block; height: 100%; position: relative; border-bottom: 0; } #mqSubNavi .parent .home-data a::after { display: none; } #mqSubNavi .parent .home-data a img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #mqSubNavi .parent .data-box { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #004ea2; border-bottom-right-radius: 50px; padding: 20px 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } #mqSubNavi .parent .data-box li a { display: block; padding: 10px 25px; font-weight: 500; color: rgba(255,255,255,.6); font-size: 15px; } #mqSubNavi .parent .data-box li:hover a { color: rgba(255,255,255,1);} /* sub-common */ #mqSub .company:after{background-image: url(/images/sub/sub_banner1.jpg);} #mqSub .business:after{background-image: url(/images/sub/sub_banner2.jpg);} #mqSub .product:after{background-image: url(/images/sub/sub_banner3.jpg);} #mqSub .customer:after{background-image: url(/images/sub/sub_banner4.jpg);} .sub_section { margin-top: -35px; padding: 120px 0; } .st_box { position: relative; padding-bottom: 115px; text-align: center; } .st_box h3 { position: relative; } .st_box h3::after { content: ''; display: block; width: 1px; background-color: #333333; position: absolute; bottom: -75px; left: 50%; } #Cont .sub_nav{border-bottom: 1px solid #e5e5e5; padding: 0 70px;} #Cont .sub_nav a{padding: 30px 0; margin-right: 70px; display: inline-block; position: relative;} #Cont .sub_nav a:after{position: absolute; content: ''; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; background: #093863; height: 3px; transition: 0.3s;} #Cont .sub_nav a:hover:after{width: 100%;} #Cont .sub_nav a:hover{color: #093863;} #Cont .sub_nav a.on {color: #093863;} #Cont .sub_nav a.on:after{width: 100%;} /* company - intro */ .sub_warp{padding: 80px 0 130px;} #intro.sub_warp{padding-bottom: 0;} .sub_all_tit{padding-bottom: 80px;} .layoutS .layoutS_top_box{padding-bottom: 150px;} .layoutS .layoutS_top_box > div{width: 50%;} .layoutS .layoutS_top_box .top_first_wrap{padding: 0 80px 0 260px;} .layoutS .layoutS_top_box .top_ul{margin-top: 50px;} .layoutS .layoutS_top_box .top_ul li{padding: 17px 15px; border-bottom: 1px solid #e5e5e5;} .layoutS .layoutS_top_box .top_ul li:first-child{border-top: 1px solid #e5e5e5;} .layoutS .layoutS_top_box .top_ul li .li_tit{width: 200px;} .layoutS .layoutS_top_box .top_ul li .li_con{width: calc(100% - 200px);} .layoutS .layoutS_top_box .top_ul li .li_con em {color: #111;font-weight: 600;} .layoutS .layoutS_top_box .top_ul li .li_con b {} .layoutS .layoutS_bot_box{background: #f7f7f7; padding: 150px 0;} .layoutS .layoutS_bot_box .bot_inner > div{width: 50%;} .layoutS .layoutS_bot_box .bot_ul li{background: #fff;} .layoutS .layoutS_bot_box .bot_ul li:first-child{border-top: 1px solid #e5e5e5;} .layoutS .layoutS_bot_box .bot_ul li.bg_gray{background: #444444;} .layoutS .layoutS_bot_box .bot_ul li p{border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; padding: 42px 0; text-align: center;} .layoutS .layoutS_bot_box .bot_ul li p:first-child{ border-left: 1px solid #e5e5e5; width: 240px;} .layoutS .layoutS_bot_box .bot_ul li p:last-child{width: 340px;} /* company - philosophy */ #philosophy .phil_box{background: url(/images/sub/phil_bg.jpg) no-repeat top/cover;} #philosophy .phil_box h6{padding: 150px 0 50px;} #philosophy .phil_box .con {} #philosophy .phil_box .con ul {display: flex; flex-wrap: wrap; gap: 30px;} #philosophy .phil_box .con ul li {flex:1; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); background-color: #fff; padding: 20px 20px 54px; border-radius: 10px;} #philosophy .phil_box .con ul li .top {height: 280px; background-color: #f5f5f5; border-radius: 10px; padding: 20px;} #philosophy .phil_box .con ul li .top .tit {color: #222; font-size: 1.875rem; font-weight: 700; font-family:'play'; margin-top: 20px; margin-bottom: 25px; text-align: center;} #philosophy .phil_box .con ul li .top .txt span {display: block; font-size: 1.125rem; color: #333; line-height: 1.67;} #philosophy .phil_box .con ul li .arr {margin: -30px 0 0; text-align: center;} #philosophy .phil_box .con ul li .txt2 {font-size: 1.125rem; color: #333; line-height: 1.67; text-align: center;} #philosophy .phil_box .con ul li .ico {width: 120px; text-align: center; margin: 0 auto;} #philosophy .phil_box .con ul li .ico {} #philosophy .phil_box .con ul li {} #philosophy .phil_box .con {} #philosophy .phil_box .con {} #philosophy .phil_box .con {} #philosophy .phil_box .con {} /* company - chart */ #chart.sub_warp {padding-bottom: 0; } #chart.sub_warp .in {background: url(/images/sub/organization_bg.jpg) no-repeat center/cover; padding: 140px 0;} #chart.sub_warp .in .organization {text-align: center;font-weight: 700;padding-bottom:25px;} #chart.sub_warp .in .title {text-align: center;font-weight: 600;} #chart.sub_warp .in .img {margin-top: 120px; padding: 0 20px; overflow-x: auto; width: 100%; text-align: center;} #chart.sub_warp .in .img img {margin: 0 auto; max-width: none;} #chart.sub_warp .in {} #chart.sub_warp .in {} /* company - history */ #history .his_top_box{background: url(/images/sub/history_bg.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; text-align: center; height: 600px; padding-bottom: 80px;} #history .his_top_box p{opacity: 0.5; margin-bottom: 30px;} #history .his_bot_box{ position: relative; background: #fff;} #history .his_bot_box .left_box{} #history .his_bot_box .left_box h6 span { position: relative;font-weight: 600;} #history .his_bot_box .left_box h6 span:after {content:'';position: absolute;bottom:0;left :0;width:100%;height:25px; background-color: rgba(0,78,162,.12);} #history .his_bot_box .right_box{} #history .his_bot_box .his_ul li{position: relative; padding-bottom: 100px;} #history .his_bot_box .his_ul li::after{position: absolute; content: ''; left: 0; top: 0; width: 25px; height: 25px; background: url(/images/sub/one.png) no-repeat center/cover; } #history .his_bot_box .his_ul li:first-child:before{top: 15px;} #history .his_bot_box .his_ul li:last-child:before{height: 0;} #history .his_bot_box .his_ul li::before{position: absolute; content: ''; left: 12px; top: 0; width: 1px; height: 100%; background: #e5e5e5; } #history .his_bot_box .his_ul li .year{width: 140px; text-align: right;} #history .his_bot_box .his_ul li .his_txt{width: calc(100% - 140px); padding-left: 40px; } #history .his_bot_box .his_ul li .his_txt span:not(:last-child){padding-bottom: 12px;} /* company - map */ #map.sub_warp{padding-bottom: 0;} #map .map_wrap > div{width: 50%;} #map .map_wrap .left_box{background: #f7f7f7; padding: 0 100px 0 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #map .map_wrap .left_box .map_ul{width: 100%;} #map .map_wrap .left_box .map_ul .img_box{width: 61px;} #map .map_wrap .left_box .map_ul .txt_box{width: calc(100% - 61px);} #map .map_wrap .left_box .map_ul li{padding: 50px 0; border-bottom: 1px solid #dddddd;} #map .map_wrap .left_box .map_ul li:last-child{border-bottom: 0;} #map .map_wrap .left_box .map_ul li .txt_box{margin-left: 40px;} #map .map_wrap .right_box .map{width: 100% !important;} /* business - area */ #area .img_box{ width: 100%; overflow-x: auto; white-space: nowrap;} #area .img_box img{ width: auto; max-width: inherit;} /* business - certify */ #certify .cer_ul{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 56px;} #certify .cer_ul li{border: 1px solid #e5e5e5; padding: 50px 10px; text-align: center;} /* business - client */ #client .client_top_box{background: url(/images/sub/client_bg.jpg) no-repeat center/cover; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; text-align: center; height: 500px;} #client .client_top_box p{opacity: 0.5; margin-bottom: 30px;} #client .c_con_inner {margin-top: 100px;} #client .c_con_inner h6{margin-bottom: 25px;} #client .c_con_inner .cli_ul{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px;} /* business - overseas */ #overseas.sub_warp{padding-bottom: 0;} /* customer - contactUs */ #contactUs .inquiry_wrap .i_cate:first-child .label_box,#contactUs .inquiry_wrap .i_cate:first-child .input_box{border-top: 1px solid #ddd;} #contactUs .inquiry_wrap .label_box{ border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; background-color: #004ea2; color: #fff; padding: 10px; width: 20%;} #contactUs .inquiry_wrap .input_box{ border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd; padding: 10px; width: 80%;} #contactUs .inquiry_wrap .input_box input,#contactUs .inquiry_wrap .input_box textarea{ border: 1px solid #ddd; padding: 10px; line-height: 25px; margin-bottom: 5px; width: 100%;} #contactUs .inquiry_wrap .input_box input{width: 50%;} .ui-icon{width: 15px; height: 9px;} .ui-button{padding: 10px;} .ui-selectmenu-text{ line-height: 25px;} .ui-icon-triangle-1-s{background-position: 0 0;} .ui-selectmenu-button.ui-button{border-radius: 0 !important; margin-bottom: 4px;} .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{border: none; background: #ccc;} .submit_btn{ cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 175px; height: 60px; display: flex; justify-content: center; align-items: center; background: #004ea2; margin: 0 4px; color: #fff;} .border_on{width: 20% !important;} /* ========== NOTICE LIST 4 ========== */ /* search-form5 */ .search-form5 select::-ms-expand { display:none; } .search-form5 select { width: 147px; height: 40px; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url(/images/icon/select_btn.png) no-repeat; background-size: 40px; background-position: right center; border: 0; border-top: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; padding-left: 10px; font-size: 18px; letter-spacing: -0.04em; color: #5d6671; } .search-form5 > form{ display: flex; align-items: center; justify-content: flex-end; } .search-form5 .s-form { position: relative; width: 230px; height: 40px; margin-left: 14px; } .search-form5 label { display: none; } .search-form5 .search-txt { width: 230px; height: 40px; border-top: 1px solid #000; border-left: 1px solid #000; border-bottom: 1px solid #000; padding: 0 20px; } .search-form5 .submit { background: url(/images/icon/search_ic_b.png) no-repeat center/cover; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; text-indent: -9999em; transform: translateY(-50%); cursor: pointer; } #noticeList4 .board-top { display: flex; justify-content: flex-end; align-items: flex-end; } #noticeList4 table { width: 100%; margin: 20px 0 70px; text-align: center; } #noticeList4 table td, #noticeList4 table th { font-size: 18px; letter-spacing: -0.04em; padding: 20px 0; } #noticeList4 table tr { border-bottom: 1px solid #d5d5d5; } #noticeList4 table th { font-weight: 700; border-top: 1px solid #000; border-bottom: 1px solid #000; } #noticeList4 table td { color: #5b5b5b; } #noticeList4 table td.td-txt { text-align: left; color: #000; } #noticeList4 table td.td-txt a { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 40vw; } /* PAGINATION */ #pagination5 { display: flex; align-items: center; justify-content: center; position: relative; } #pagination5 > * { margin: 0 7px; } #pagination5 .num { display: flex; align-items: center; justify-content: center;} #pagination5 .num .page-item a { display: inline-block; width: 100%; font-size: 20px; color: #5a5a5a; width: 36px; line-height: 36px; text-align: center; border: 1px solid #fff; } #pagination5 .num .page-item.on a { border: 1px solid #222; } /* ========== NOTICE LIST 4 ========== */ /* ========== VIEW PAGE 2 ========== */ #viewPage2{ margin-bottom: 100px; } #viewPage2 .s-top-h2{ padding-bottom: 60px; } #viewPage2.notice-view{ margin-bottom: 70px; } #viewPage2 .board-view .view-top{ padding-bottom: 25px; display: flex; justify-content: space-between; align-items: center; } #viewPage2 .board-view .view-top .v-title{ font-size: 24px; color: #000; font-weight: 600; } #viewPage2 .board-view .view-top .v-write span{ display: inline-block; vertical-align: bottom; color: #999; font-size: 16px; } #viewPage2 .board-view .contents{ padding: 50px 0; margin-bottom: 65px; border-top: 1px solid #999; border-bottom: 1px solid #999; } #viewPage2 .board-view .contents p{ font-size: 16px; line-height: 2; } #viewPage2 .board-view .contents p.pb-30{ padding-bottom: 30px; } #viewPage2 .board-view .contents p img{ margin-bottom: 30px; } #viewPage2 .v-file{ margin-bottom: 30px; border-bottom: 2px solid #000; } #viewPage2 .v-file .m-txt{ margin-bottom: 25px; font-size: 18px; color: #000; } #viewPage2 .v-file .file-list li{ margin-bottom: 20px; } #viewPage2 .v-file .file-list li a{ padding-left: 30px; color: #999; background: url(/images/icon/view_file.png) no-repeat left center; } #viewPage2 .v-file .file-list li a:hover, #viewPage2 .v-file .file-list li a:active { color: #000; background-image: url(/images/icon/view_file_a.png); text-decoration: underline; text-underline-position: under; } #viewPage2 .board-view .go-list{ padding: 35px 0; display: block; text-align: center; background-color: #f9f9f9; border: 1px solid #ddd; font-size: 18px; } #viewPage2 .board-view .go-list img{ margin-right: 30px; vertical-align: middle; } #viewPage2 .board-view .go-list span{ font-weight: 600; vertical-align: middle; } .product_search_box{margin-bottom: 90px;} .product_search_box .search_form{background: #f7f7f7; padding: 50px 0;} .product_search_box .search_form .input_box{width: 920px; margin: 0 10px 0 30px;} .product_search_box .search_form .input_box input{padding: 0 25px; line-height: 60px; border: 1px solid #dddddd;} .product_search_box .search_form .input_box input::placeholder{color: #999999;} .product_search_box .submit{text-indent: -9999em; background: url(/images/sub/search_btn.jpg) no-repeat center/cover; width: 60px; height: 60px;} .w100{width: 100%;} .w33{width: 33%;} .product_search_box .ui-button{padding: 0 25px;} .product_search_box .ui-selectmenu-button.ui-button{width: 33%; background: #fff; border: 1px solid #dddddd; border-radius: 0;} .product_search_box .ui-selectmenu-text{line-height: 60px;} .ui-button .ui-icon{background-image: url(/images/sub/down.png); top: 50%; transform: translateY(-50%); width: 14px; height: 8px; position: absolute; right: 20px;} .ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button:hover .ui-icon, .ui-button:focus .ui-icon{background-image: url(/images/sub/down.png);} .product_search_box .ui-icon-triangle-1-s{background-position: 0 0;} .ui-menu .ui-menu-item-wrapper{padding: 20px;} .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{background: #fff; border: 1px solid #dddddd; border-radius: 0;} .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{background: #dddddd; border: none;} #noticeList4 .product_ul{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-row-gap: 80px; grid-column-gap: 30px; margin-bottom: 130px; } #noticeList4 .product_ul li .img_box{border: 1px solid #e5e5e5; padding: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; position: relative; width: 100%; height: auto; aspect-ratio: 330/330;} #noticeList4 .product_ul li .img_box .over_box{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,78,162,.8); opacity: 0; visibility: hidden; transition: 0.3s;} #noticeList4 .product_ul li .img_box .over_box .over_inner{position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); width: 100%; text-align: center; transition: 0.7s;} #noticeList4 .product_ul li .img_box .over_box .over_inner .bar{width: 1px; height: 58px; background: #fff; opacity: 0.5; margin-bottom: 20px;} #noticeList4 .product_ul li .txt_box p{ overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; /*white-space: nowrap;*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} #viewPage2 .product_view .pv_top_box > div{width: 50%;} #viewPage2 .product_view .pv_top_box .img_box{border: 1px solid #e5e5e5; padding: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; position: relative; width: 100%; height: auto; aspect-ratio: 550/550;} #viewPage2 .product_view .pv_top_box .txt_box{padding-left: 15px;} #viewPage2 .product_view .pv_top_box .txt_box .con_p{padding-top: 40px; margin-top: 40px; border-top: 1px solid #e5e5e5;} #viewPage2 .product_view .pv_bot_box{padding-bottom: 100px; margin-bottom: 80px; border-bottom: 1px solid #e5e5e5;} #viewPage2 .product_view .pv_bot_box .pv_bot_inner{margin-top: 100px;} #viewPage2 .product_view .pv_bot_box h5{margin-bottom: 25px;} #viewPage2 .back_btn span{padding: 20px 70px; background: #004ea2; border-radius: 30px;} #noticeList4 .back_btn span{padding: 20px 70px; background: #004ea2; border-radius: 30px;margin-top: 4em;} /* 체크박스 - 자식요소 */ .checkbox input {display: none;} .checkbox_icon { display: inline-block; width: 20px; height: 20px; background-color: transparent; background: #fff; border: 2px solid #004ea2; position: absolute; left: 0; top: 50%; transform: translateY(-50%); cursor: pointer; box-sizing: border-box;} .checkbox_icon::before, .checkbox_icon::after { content: ''; display: inline-block; width: 2px; height: 0; background-color: #fff; position: absolute; transform-origin: left top; } .checkbox_icon::before { top: 7px; left: 2px; transform: rotate(-45deg); } .checkbox_icon::after { top: 12px; left: 7px; transform: rotate(-135deg); } .checkbox input:checked + .checkbox_icon { border-color: #004ea2; background: #004ea2;} .checkbox input:checked + .checkbox_icon::before { height: 5px; transition: all 0.15s ease; } .checkbox input:checked + .checkbox_icon::after { height: 10px; transition: all 0.15s ease 0.15s;} @media screen and (max-width:1600px) { .layoutS .layoutS_top_box .top_first_wrap{padding: 0 50px 0 20px;} #map .map_wrap .left_box{padding: 0 50px 0 20px;} } @media screen and (max-width:1440px) { #mqSub .visual h2{left: 20px;} #Cont .sub_nav{padding: 0 20px;} } @media screen and (max-width:1200px) { #philosophy .phil_box .con ul li {flex: 0 0 auto; width: calc(50% - 20px);} /* ========== VIEW PAGE 2 ========== */ #viewPage2 .board-view .view-top{ flex-wrap: wrap; } #viewPage2 .board-view .view-top .v-title{ width: 100%; } #viewPage2 .board-view .view-top .v-write span{ margin-top: 10px; } #viewPage2 .board-view .view-top .v-write span{ margin-top: 10px; } /* ========== VIEW PAGE 2 ========== */ .layoutS .layoutS_top_box > div{width: 100%;} .layoutS .layoutS_top_box .bg{order: -1; text-align: right; margin:0 0 10% 20px;} .layoutS .layoutS_bot_box .bot_inner > div{width: 100%; text-align: center; justify-content: center;} .layoutS .layoutS_bot_box .bot_inner .right_box{margin-bottom: 10%; order: -1;} #map .map_wrap > div{width: 100%;} #map .map_wrap .right_box .map{height: 400px !important;} .product_search_box .search_form .input_box{width: 60%;} #noticeList4 .product_ul{ grid-template-columns: repeat(3, 1fr); grid-row-gap: 50px; grid-column-gap: 20px;} } @media screen and (max-width:960px) { .layoutS .layoutS_top_box{padding-bottom: 15%;} .layoutS .layoutS_bot_box{padding: 15% 0;} .layoutS .layoutS_bot_box .bot_ul li p{padding: 25px 0;} #mqSubNavi{right: 40px; bottom: 50px;} #history .inner {flex-direction: column;gap:20px;} #history .inner .img {width:60%;margin:0 auto;} #history .his_bot_box {order:2;} #history .his_bot_box .his_ul li .year{width: 100px;} #history .his_bot_box .his_ul li .his_txt{width: calc(100% - 100px);} #certify .cer_ul { grid-template-columns: repeat(2, 1fr); grid-gap: 30px;} #certify .cer_ul li{padding: 30px 10px;} #client .c_con_inner .cli_ul{grid-template-columns: repeat(3, 1fr); grid-gap: 20px;} #viewPage2 .product_view .pv_top_box > div{width: 100%;} #viewPage2 .product_view .pv_top_box .txt_box{padding-left: 0;} } @media screen and (max-width:769px) { /* sub - header */ #mqSub .visual h2 { top: 50%; transform: translateY(-50%);} #mqSub .company:after{background-image: url(/images/sub/m_sub_banner1.jpg);} #mqSub .portfolio:after{background-image: url(/images/sub/m_sub_banner2.jpg);} #mqSub .investor:after{background-image: url(/images/sub/m_sub_banner3.jpg);} #mqSub .PR:after{background-image: url(/images/sub/m_sub_banner4.jpg);} /* #mqSubNavi .inner { padding: 0; } #mqSubNavi .parent { height: 100px; margin-top: 0; } #mqSubNavi .parent .home-data { width: 100px; } #mqSubNavi .parent .home-data a img { width: 4.8177vw; } #mqSubNavi .parent .parent-data { max-width: calc(50% - 50px); } #mqSubNavi .parent .child-data { max-width: calc(50% - 50px); } #mqSubNavi .parent > li > a { line-height: 100px; font-size: 3.3854vw; padding: 0 5.2083vw; } #mqSubNavi .parent > li > a::after { width: 3.1250vw; height: 1.8229vw; background-size: 3.1250vw auto; right: 33px; } #mqSubNavi .parent > li:last-child:after { display: none; } #mqSubNavi .parent .data-box { padding: 25px 0; } #mqSubNavi .parent .data-box li a { font-size: 3.3854vw; padding: 25px 40px; } */ #mqSubNavi{left: 50%; bottom: 40px; transform: translateX(-50%); right: auto; width: 100%;} #mqSubNavi .parent > li{width: 50%; margin-left: 30px;} #mqSubNavi .parent > li:first-child{margin-left: 0;} /* sub - common */ .sub_section { padding: 90px 0 150px; margin-top: 0; } .st_box { padding-bottom: 125px; } .st_box h3::after { bottom: -88px; height: 55px; } .sub_warp{padding: 15% 0;} /* company - overview */ .st_box h3::after { height: 50px; } .sub_all_tit{padding-bottom: 40px;} .layoutS .layoutS_bot_box .bot_inner .right_box .bot_ul{width: 100%;} .layoutS .layoutS_bot_box .bot_ul li p:first-child{width: 40%;} .layoutS .layoutS_bot_box .bot_ul li p:last-child{width: 60%;} .layoutS .layoutS_top_box .top_ul li .li_tit{width: 120px;} .layoutS .layoutS_top_box .top_ul li .li_con{width: calc(100% - 120px);} #philosophy .phil_box h6{padding: 15% 0 8%;} #philosophy .phil_box .con ul {gap: 5vw 0;} #philosophy .phil_box .con ul li {width: 100%; padding: 3vw 3vw 5vw;} #philosophy .phil_box .con ul li .top {padding: 4vw; height: 45vw; display: flex; align-items: center;} #philosophy .phil_box .con ul li .ico {width: 35%;} #philosophy .phil_box .con ul li .info {width: 65%;} #philosophy .phil_box .con ul li .ico img {width: 12vw;} #philosophy .phil_box .con ul li .top .tit {font-size: 5vw; margin-bottom: 3vw; margin-top: 3vw; text-align: left;} #philosophy .phil_box .con ul li .top .txt span {font-size: 3.5vw;} #philosophy .phil_box .con ul li .arr {margin: -6vw 0 0;} #philosophy .phil_box .con ul li .arr img {width: 20vw;} #philosophy .phil_box .con ul li .txt2 {font-size: 3.2vw;} #history .his_top_box{background: url(/images/sub/m_history_bg.jpg) no-repeat center/cover; padding-bottom: 0; height: 400px;} #history .his_bot_box{padding: 13% 0 0; margin-top: 0;} #history .his_bot_box .left_box{width: 100%; margin-bottom: 10%;} #history .his_bot_box .right_box{width: 100%;} #history .his_bot_box .his_ul li{padding-bottom: 60px;} #map .map_wrap .left_box{padding: 0 20px;} #map .map_wrap .left_box .map_ul li{padding: 25px 0;} #map .map_wrap .left_box .map_ul li .txt_box{margin-left: 20px;} #map .map_wrap .left_box .map_ul .img_box{width: 40px;} #map .map_wrap .left_box .map_ul .txt_box {width: calc(100% - 40px);} #client .client_top_box{background: url(/images/sub/m_client_bg.jpg) no-repeat center/cover; height: 400px;} #client .c_con_inner{margin-top: 12%;} #chart.sub_warp .in {padding: 20vw 0;} #chart.sub_warp .in .tit {font-size: 12vw;} #chart.sub_warp .in .img {margin-top: 6vw;} #chart.sub_warp .in .img img {width: 900px;} #noticeList4 .product_ul{ grid-template-columns: repeat(2, 1fr); grid-row-gap: 40px; grid-column-gap: 10px; margin-bottom: 80px; } #viewPage2 .product_view .pv_top_box .txt_box .con_p{padding-top: 20px; margin-top: 20px;} #viewPage2 .product_view .pv_bot_box{padding-bottom: 10%; margin-bottom: 8%;} .product_search_box .search_form{padding: 30px 20px;} .product_search_box .search_form label{width: 100%; margin-bottom: 20px;} .product_search_box .search_form .input_box{width: calc(100% - 60px); margin: 0 10px 0 0;} .product_search_box .search_form .input_box {flex-wrap: wrap;} .product_search_box .ui-selectmenu-button.ui-button{width: 100%;} .product_search_box .search_form .input_box input,.product_search_box .ui-selectmenu-text{line-height: 50px;} .product_search_box .submit{width: 50px; height: 50px;} .ui-menu .ui-menu-item-wrapper{padding: 15px;} #viewPage2 .product_view .pv_bot_box .pv_bot_inner{margin-top: 10%;} /* ========== NOTICE LIST 4 ========== */ /* search-form5 */ .search-form5 select { font-size: 2.3438vw; } #noticeList4 colgroup col:nth-child(4), #noticeList4 colgroup col:nth-child(5) { display: none; } #noticeList4 table th:nth-child(4), #noticeList4 table th:nth-child(5), #noticeList4 table td:nth-child(4), #noticeList4 table td:nth-child(5) { display: none; } #noticeList4 table td:nth-child(1) { width: 10%; } #noticeList4 table td:nth-child(2) { width: 70%; } #noticeList4 table td:nth-child(3) { width: 20%; } #noticeList4 table td, #noticeList4 table th { font-size: 2.3438vw; } #noticeList4 table td.td-txt a { width: 55vw; } /* PAGINATION 5 */ #pagination5 .num .page-item a { font-size: 2.6042vw; } /* ========== NOTICE LIST 4 ========== */ /* ========== VIEW PAGE 2 ========== */ #viewPage2 .board-view .view-top{ padding: 0; padding-bottom: 15px; flex-wrap: wrap; } #viewPage2 .board-view .view-top .v-title{ font-size: 16px; width: 100%; } #viewPage2 .board-view .view-top .v-write{ margin-top: 10px; width: 100%; } #viewPage2 .board-view .contents{ padding: 25px 0; margin-bottom: 25px; } #viewPage2 .board-view .v-file{ margin-bottom: 15px; } #viewPage2 .board-view .v-file .m-txt{ margin-bottom: 17px; font-size: 14px; } #viewPage2 .board-view .v-file .file-list li{ margin-bottom: 10px; } #viewPage2 .board-view .v-file .file-list li a{ padding-left: 15px; font-size: 12px; background-size: 12px; } #viewPage2 .board-view .go-list{ padding: 20px 80px; font-size: 14px; } #viewPage2 .board-view .go-list img{ margin-right: 15px; width: 15px; } #viewPage2 .board-view .go-list span{ font-size: 14px; } /* ========== VIEW PAGE 2 ========== */ } /*** Mobile ***/ @media screen and (max-width:499px) { /* sub - common */ .sub_section { padding: 45px 0 75px; } .st_box { padding-bottom: 60px; } .st_box h3::after { height: 25px; bottom: -40px; } /* sub - header */ #mqSub .visual { height: 450px; } #mqSub .visual h2 .tt2 { line-height: 1.1; } #mqSubNavi{bottom: 30px;} #mqSubNavi .parent > li{margin-left: 15px;} #mqSubNavi .parent .data-box li a{padding: 10px 15px;} #mqSubNavi .parent > li > a{line-height: 50px; font-size: 15px;} #mqSubNavi .parent .data-box{padding: 10px 0;} /* #mqSubNavi .parent { height: 50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); } #mqSubNavi .parent .home-data { width: 50px; } #mqSubNavi .parent .home-data a img { width: 16px; } #mqSubNavi .parent .parent-data { max-width: calc(50% - 25px); } #mqSubNavi .parent .child-data { max-width: calc(50% - 25px); } #mqSubNavi .parent > li > a { line-height: 50px; font-size: 13px; padding: 0 20px; } #mqSubNavi .parent > li > a::after { width: 11px; height: 6px; background-size: 11px auto; right: 20px; } #mqSubNavi .parent .data-box { padding: 10px 0; } #mqSubNavi .parent .data-box li a { font-size: 13px; padding: 10px 20px; } */ /* ========== NOTICE LIST 4 ========== */ /* search-form5 */ .search-form5 select { font-size: 13px; width: 100px; height: 30px; background-size: 30px; } .search-form5 .s-form { width: 150px; height: 30px; } .search-form5 .search-txt { width: 150px; height: 30px; } .search-form5 .submit { width: 30px; height: 30px; } #noticeList4 table { margin: 10px 0 35px; } #noticeList4 table td, #noticeList4 table th { font-size: 13px; padding: 15px 0; } /* PAGINATION 5 */ #pagination5 .num .page-item a { font-size: 13px; width: 30px; line-height: 30px; } /* ========== NOTICE LIST 4 ========== */ #map .map_wrap .right_box .map{height: 300px !important;} #certify .cer_ul{grid-template-columns: repeat(1, 1fr); grid-column-gap: 20px;} #client .c_con_inner .cli_ul{grid-template-columns: repeat(2, 1fr); grid-gap: 10px;} #client .c_con_inner h6{margin-bottom: 15px;} #viewPage2 .product_view .pv_bot_box h5{margin-bottom: 15px;} #viewPage2 .back_btn span {padding: 15px 50px;} #noticeList4 .product_ul li .img_box{margin-bottom: 15px;} #noticeList4 .product_ul{ grid-template-columns: repeat(1, 1fr); grid-row-gap: 30px; grid-column-gap: 0; margin-bottom: 50px; } #noticeList4 .back_btn span {padding: 15px 50px; margin-top: 3em; } } @media screen and (min-width:769px) { #noticeList4 .product_ul li:hover .img_box .over_box{opacity: 1; visibility: visible;} #noticeList4 .product_ul li:hover .img_box .over_box .over_inner{bottom: 40px;} }