@charset "utf-8"; /* Slide */ .main_slide { position: relative; } .main_text_box { position: absolute; top: 32%; right: 0; transform: translate(-20%, -0%); } .main_text strong { font-style: italic; font-size: 80px; font-weight: 800; line-height: 50px; } .main_text p { text-align: right; color: #fff; } .main_title { font-size: 39px; font-weight: bold; } .main_sub_text { font-size: 18px; font-weight: 200; letter-spacing: 1px; } /* Custom Arrow */ .visual_img .prev { position: absolute; left: 20px; top: 40%; transform: translate(0%, -40%); cursor: pointer; } .visual_img .next { position: absolute; right: 20px; top: 40%; transform: translate(0%, -40%); cursor: pointer; } .visual_img .slick-dots li.slick-active button:before { content: ''; opacity: 1; color: black; width: 35px; height: 15px; left: -10px; background: #359d84; border-radius: 20px; margin: 0 auto; } .visual_img .slick-dots li button:before { content: ''; opacity: 1; width: 15px; height: 15px; border-radius: 10px; background: #fff; margin: 0 auto; } .visual_img .slick-dots { bottom: 50px; } .visual_img .slick-dots li { width: 34px; margin: 0 auto; } .btn_area { text-align: center; } .btn_play { background: #000; cursor: pointer; } .btn_play.on { background: #444444; } /* 위부산 소개 kr */ .section { clear: both; padding: 50px 0; } .boxs { margin-top: 35px; } .box_left { display: inline-block; width: 40%; float: left; overflow: hidden; margin-right: 2%; } .box_center { display: inline-block; width: 38%; /* min-height: 470px; */ float: left; color: #fff; word-break: keep-all; margin-right: 2%; } .box_center_top { background: url("../../images/main/introduce_bg.jpg") no-repeat; background-size: cover; background-position: center center; padding: 100px; } .box_right { display: inline-block; width: 58%; float: left; } .btn_area { background-color: #000; overflow: hidden; padding: 18px; } .popupzone div img { display: inline-block; width: 100%; } .popupzone_title { display: inline-block; float: left; color: #fff; font-size: 17px; text-align: left; font-weight: 800; } .btn_box { display: inline-block; float: right; } .btn_box > div { display: inline-block; cursor: pointer; vertical-align: middle; } .paging_number { color: #fff; margin-right: 10px; } .btn_play { width: 24px; height: 24px; border-radius: 12px; } .txt_top { font-size: 13px; font-weight: 300; color: #fff; letter-spacing: 0; } .txt_top::after { content: ''; /* display: inline-block; */ vertical-align: middle; width: 18%; height: 1px; background-color: #ccc; margin-left: 20px; margin-bottom: 3px; } .txt_middle { font-size: 20px; font-weight: 700; margin-bottom: 15px; color: #fff; line-height: 23px; } .txt_bottom { font-size: 14px; color: #fff; line-height: 18px; letter-spacing: 0; } .right_top { background: #6777dc url("../../images/main/introduce_img1.png") no-repeat; background-position: 360px 32px; padding: 40px 40px 37px 40px; } .title_white { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 15px; } .sub_text { font-size: 13px; margin-bottom: 22px; margin-right: 26%; letter-spacing: 0; } .sub_text.white { color: #fff; } .sub_text.gray { color: #7f8085; } .btn_link > div { display: inline-block; /* width: calc((100% / 2) - 10px); */ /* margin-right: 10px; */ cursor: pointer; } .btn_link > div:last-child { margin-right: 0; } .btn_link {} .btn_link .gray { color: #ffffff; font-size: 14px; font-weight: 600; padding: 10px 9px; background-color: #465193; /* background: #465193 url(../../images/main/cont_arrow_right1.png) no-repeat; */ background-position: 90% 45%; letter-spacing: 0; } .btn_link .gray a, .btn_link .white a { display: block; } .right_bottom { position: relative; } .right_bottom .title_white { position: absolute; top: 35px; left: 35px; } .right_bottom .video_img img { width: 100%; } .right_bottom iframe { width: 100%; height: 478px; } .title_black { font-size: 20px; font-weight: 800; color: #333; margin-bottom: 15px; } .btn_link .white { color: #fff; font-size: 14px; font-weight: 600; padding: 10px 15px; background: #197b89 url(../../images/main/cont_arrow_right1.png) no-repeat; background-position: 90% center; } /* 위부산 소개 eng */ .boxs2 { margin-top: 35px; display: flex; justify-content: space-between; } .boxs2:after { display: block; content: ''; /* clear: both; */ } .boxs2 .box_left2 { /* float: left; */ width: 40%; margin-right: 2%; display: flex; flex-direction: column; justify-content: space-between; } .boxs2 .box_left2 .left_top { background: url(../../images/eng/introduce_bg.jpg) no-repeat; background-size: cover; background-position: center 84%; padding: 30px 194px 30px 30px; margin-bottom: 3%; } .boxs2 .box_left2 .left_bottom { background: #6777dc url("../../images/eng/introduce_img1.png") no-repeat; background-position: 96% 44px; padding: 30px; } .boxs2 .box_right2 { /* float: right; */ width: 58%; position: relative; padding-top: 30%; } .boxs2 .box_right2 iframe { width: 100%; height: 100%; position: absolute; top: 0; } /* 위부산 뉴스 */ .news_slide { text-align: center; margin-top: 35px; } .news_slide .slick-track {} .news_slide .slick-slide { margin: 0 20px; } .tabs { padding-top: 50px; } .tab { display: none; } .tab.active { display: block; } .tab_slide, .sns_tab_slide { min-width: 120px; font-size: 14px; display: inline-block; color: #333333; border: 1px solid #b7b7b7; border-radius: 30px; cursor: pointer; padding: 8px; margin: 5px; } .tab_slide.active, .sns_tab_slide.active { color: #b1421a; border: 2px solid #b1421a; } .slider { width: 100%; } .item { text-align: left; border: 1px solid #d7d7d7; padding: 40px; /* margin-top: 30px; */ transition: all 0.3s ease; } .news_slide .slick-prev { width: 54px; height: 54px; left: -60px; } .news_slide .slick-next { width: 54px; height: 54px; right: -60px; } .news_slide .slick-prev:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_prev.png) no-repeat; } .news_slide .slick-next:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_next.png) no-repeat; } .category { display: inline-block; font-size: 13px; color: #b1421a; font-weight: 800; border-bottom: 3px solid #b1421a; } .news_title { display: -webkit-box; height: 60px; font-size: 22px; color: #333; font-weight: 700; line-height: 32px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; color: #444; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 25px 0; } .news_cont { display: -webkit-box; height: 75px; font-size: 14px; color: #989898; line-height: 26px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; color: #444; text-decoration: none; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 10px; } .news_date { text-align: right; font-size: 14px; color: #989898; } .item:hover { background-color: #3d427a; margin-top: 0px; } .item:hover .category { color: #fff; border-color: #fff; } .item:hover .news_title { color: #fff; } .item:hover .news_cont, .item:hover .news_date { color: #a4a5bb; } /* Title */ .section_title { text-align: center; } .section_title h3 { position: relative; font-size: 35px; color: #000; font-weight: 800; } .section_title h3::before { position: absolute; top: 50%; content: ''; display: block; width: 26%; height: 1px; background-color: #d8d8d8; } .section_title h3::after { position: absolute; top: 50%; right: 0; content: ''; display: block; width: 26%; height: 1px; background-color: #d8d8d8; } .small_title { font-size: 18px; color: #31409b; font-weight: 800; } /* 인증기업 현황 */ .status_slide .slick-slide { margin: 0 5px; } .status_slide { text-align: center; margin-top: 35px; } .status_tabs {} .status_tab { display: none; } .status_tab.active { display: block; } .status_tab_slide { position: relative; display: inline-block; width: calc(100% / 5); min-height: 85px; float: left; text-align: center; border-top: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; cursor: pointer; padding: 10px 0; } .status_tab_slide.active::after { content: '▼'; position: absolute; left: 46%; bottom: -20px; display: block; font-size: 24px; color: #3d427a; z-index: 1; } .status_slide .buttons > div:last-child.status_tab_slide { border-right: 1px solid #d9d9d9; } .tab_text { font-size: 14px; color: #31409b; font-weight: bold; font-family: 'Notosans', sans-serif; } .tab_num { font-size: 26px; color: #333; font-weight: bold; font-family: 'Notosans', sans-serif; } .status_tab_slide.active { color: #fff; background-color: #3d427a; border: 1px solid #3d427a; } .status_tab_slide.active .tab_text, .status_tab_slide.active .tab_num { color: #fff; } .status_slider { width: 100%; padding: 50px; background-color: #f5f5f5; border-left: 1px solid #d7d7d7; border-right: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7; } .status_item { text-align: left; } .status_slide .slick-prev { width: 54px; height: 54px; left: -60px; } .status_slide .slick-next { width: 54px; height: 54px; right: -60px; } .status_slide .slick-prev:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_prev.png) no-repeat; } .status_slide .slick-next:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_next.png) no-repeat; } .logo_name { text-align: center; font-size: 14px; color: #666666; letter-spacing: 0; padding-top: 10px; } .cpy_logo { min-height: 93px; } .cpy_logo img { width: 100%; max-height: 93px; } .no_com_img { position: relative; font-family: 'NotoSansKR', sans-serif; text-align: center; background-color: #fff; font-size: 17px; font-weight: 500; color: #000; } .no_com_img > span { position: absolute; width: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* SNS 채널 */ .sns_channel { padding-top: 30px; text-align: center; } .sns_slide .slick-slide { margin: 0 10px; } .sns_item { border: 1px solid #d7d7d7; padding: 30px; } .sns_title { width: 100%; font-size: 20px; color: #333; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; margin: 12px 0; } .sns_cont { display: -webkit-box; height: 45px; color: #666666; line-height: 24px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 20px; } .sns_slide .slick-dots { bottom: -40px; } .sns_slide .slick-dots li { margin: 0; } .sns_slide .slick-dots li button:before { content: '○'; color: #414141; font-size: 15px; } .sns_slide .slick-dots li.slick-active button:before { content: '●'; color: #b2b2b2; font-size: 15px; } .sns_img { min-height: 240px; max-height: 240px; overflow: hidden; } .sns_img img { width: 100%; min-height: 240px; } /* 지원사업 안내(2021.05.27 추가) */ .period { font-size: 14px; color: #444; margin-bottom: 10px; } .item:hover .period { color: #a4a5bb; } /* 항만연관산업 동향(2021.05.27 추가) */ .port_slide { text-align: center; margin-top: 35px; } .port_slider .slick-slide { margin: 0 20px; } .port_slider { text-align: center; } .port_tab_slide { min-width: 120px; font-size: 14px; display: inline-block; color: #333333; border: 1px solid #b7b7b7; border-radius: 30px; cursor: pointer; padding: 8px; margin: 5px; } .port_tab_slide.active { color: #b1421a; border: 2px solid #b1421a; } .port_slider .slick-prev { width: 54px; height: 54px; left: -60px; } .port_slider .slick-next { width: 54px; height: 54px; right: -60px; } .port_slider .slick-prev:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_prev.png) no-repeat; } .port_slider .slick-next:before { content: ''; display: block; width: 54px; height: 54px; background: url(../../images/main/round_next.png) no-repeat; } /* 항만연관산업 동향(2021.06.10 추가) */ .oneline_title { width: 100%; font-size: 20px; color: #333; font-weight: 700; line-height: 32px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; color: #444; white-space: nowrap; margin: 25px 0 10px 0; } .item:hover .oneline_title { color: #fff; } .news_img { max-height: 118px; overflow: hidden; border: 1px solid #f1f1f1; margin-bottom: 10px; } .item:hover .news_img { border: none; } .news_img img { width: 100%; min-height: 128px; } /* 관련사이트 (2021.06.10 추가) */ .link-banner-wrap { width: 100%; box-sizing: border-box; overflow: hidden; } .link-banner { position: relative; max-width: 1300px; overflow: hidden; margin: 0 auto; } .site_btn_area { position: relative; width: 120px; float: left; } .site_btn_area button, .site_btn_area a { display: block !important; float: left; font-size: 0; width: 30px; height: 30px; border: 1px solid #CFD5DE; box-sizing: border-box; background-repeat: no-repeat; } .site_btn_area .btn_play_site { top: 45px; left: 30px; background: #fff url(/images/main/i-play.svg) no-repeat; background-position: center center; } .site_btn_area .btn_play_site.on { background: #fff url(/images/main/i-stop.svg) no-repeat; background-position: center center; } .site_btn_area .btn-prev { top: 45px; left: 30px; background: #fff url(/images/main/i-prev.svg) no-repeat; background-position: center center; margin-left: -1px; } .site_btn_area .btn-next { top: 45px; left: 59px; background: #fff url(/images/main/i-next.svg) no-repeat; background-position: center center; margin-left: -1px; } .site_btn_area .btn-more { background: #fff url(/images/main/i-more.svg) no-repeat; background-position: center center; margin-left: -1px; } .site_slide { width: calc(100% - 120px); float: left; } .site_slide .slick-slide { margin: 0 10px; } .site_btn_area .slick-prev:before, .site_btn_area .slick-next:before { content: ''; } .title_small { font-size: 14px; font-weight: bold; color: #000; margin-bottom: 9px; } .site_wrap { overflow: hidden; padding: 40px; background-color: #f8faff; } .site_img { display: flex !important; height: 60px; max-height: 60px; overflow: hidden; align-items: center; justify-content: center; border: 1px solid #f2f2f2; background-color: #fff; } .site_img > a { display: inline-block; width: 100%; } .site_img img { width: 100%; min-height: 60px; } /* Media Query */ @media all and (max-width:1366px) { .main_text_box { width: 90%; top: 21%; right: 3%; transform: translate(-10%, -0%); } .visual_img .next { top: 32%; transform: translate(0%, -32%); } .visual_img .prev { top: 32%; transform: translate(0%, -32%); } } @media all and (max-width:1200px) { .main_text_box { width: 80%; } .visual_img .prev { top: 33%; transform: translate(0%, -33%); } .visual_img .next { top: 33%; transform: translate(0%, -33%); } /* 위부산 소개 kr */ .box_center { width: calc(100% - 340px); background-position: center center; margin-right: 0; } .box_right { width: 100%; margin-top: 20px; } .right_top { width: calc(100% - 430px); float: left; margin-right: 20px; padding: 40px; } .right_bottom { width: 410px; float: left; } .right_bottom iframe { height: 226px; } /* 위부산 소개 eng */ .boxs2 { flex-wrap: wrap; } .boxs2 .box_left2 { flex-direction: row; width: 100%; margin-right: 0; margin-bottom: 2%; } .boxs2 .box_left2 .left_top { margin-bottom: 0; padding: 30px; background-position: center 87%; width: 46%; margin-right: 2%; background: url(../../images/eng/introduce_bg_tab.jpg) no-repeat; } .txt_middle { font-size: 15px; letter-spacing: 0; } .boxs2 .box_left2 .left_bottom { width: 52%; } .boxs2 .box_right2 { width: 100%; padding-top: 40%; } /* 위부산 소식 */ .category {} /* 인증기업 현황 */ .cpy_logo { min-height: 67px; } .cpy_logo img { max-height: 67px; } .no_com_img { font-size: 15px; } } @media all and (max-width:1024px) { /* Slide */ .main_text_box { top: 20%; } .visual_img .prev { display: none !important; } .visual_img .next { display: none !important; } .main_text strong { font-size: 50px; } .main_title { font-size: 30px; } /* Title */ .section_title h3::before { width: 19%; } .section_title h3::after { width: 19%; } } @media all and (max-width:900px) { /* Slide */ .main_title { font-size: 22px; } .main_text strong { font-size: 40px; } .main_text_box { top: 12%; } /* Title */ .section_title h3::before { width: 5%; } .section_title h3::after { width: 5%; } /* 위부산 소개 */ .right_top { width: 100%; background-position: 92% 30px; } .right_bottom { width: 100%; } /* 위부산 소개 eng */ .boxs2 .box_left2 .left_bottom { background-image: none; } .btn_link > div { margin-right: 0; margin-bottom: 5px; width: 100%; } .boxs2 .box_right2 { padding-top: 50%; } /* 관련사이트 (2021.06.10 추가) */ .site_wrap { padding: 20px; } } @media all and (max-width:700px) { /* 위부산 소개 */ .box_left { width: 100%; } .box_center { width: 100%; margin: 20px 0 0 0; } /* 인증기업 현황 */ .cpy_logo { min-height: 60px; } .cpy_logo img { max-height: 60px; } /* 관련사이트 (2021.06.10 추가) */ .site_btn_area { width: 100%; } .site_slide { width: 100%; margin-top: 10px; } .site_img { height: 50px; max-height: 50px; } .site_img img { min-height: 50px; } .title_small { font-size: 15px; margin-bottom: 5px; } .site_btn_area button, .site_btn_area a { width: 28px; height: 28px; } .site_btn_area .btn-prev { top: 41px; left: 28px; } .site_btn_area .btn-next { top: 41px; left: 55px; } } @media all and (max-width:600px) { /* Slide */ .main_text_box { top: 95px; } .main_text strong { font-size: 23px; line-height: 30px; } .main_title { font-size: 17px; line-height: 20px; } .main_sub_text { font-size: 12px; } .main_visual .slick-dots li button { display: none; } .main_visual .slick-slide img { min-height: 200px; } /* Title */ .section_title h3::before { width: 12%; display: none; } .section_title h3::after { width: 12%; display: none; } .small_title { font-size: 17px; } .section_title h3 { font-size: 25px; } /* 위부산 소개 */ .section { padding: 25px 0; } .box_center { min-height: auto; padding: 30px 30px 180px 30px; } .txt_top::after { display: none; } .txt_top { font-size: 14px; line-height: 15px; margin-bottom: 10px; } .txt_middle { font-size: 22px; } .txt_bottom { font-size: 12px; letter-spacing: 0; } .right_top { background-image: none; padding: 20px; } .right_bottom .title_white { top: 20px; left: 20px; } /* 위부산 소개 eng */ .boxs2 {} .boxs2 .box_left2 { flex-direction: column; } .boxs2 .box_left2 .left_top { width: 100%; margin-right: 0; margin-bottom: 2%; } .boxs2 .box_left2 .left_bottom { width: 100%; } .title_white { font-size: 20px; line-height: 22px; } .sub_text { margin-bottom: 15px; } .boxs2 .box_right2 { padding-top: 55%; } /* 위부산 소식 */ .tabs { padding-top: 10px; } .item { padding: 20px; } .category { font-size: 13px; } .news_slide .slick-slide { margin: 10px; } .news_title { height: 50px; font-size: 17px; line-height: 25px; margin: 15px 0; } .news_cont { height: 60px; font-size: 12px; line-height: 20px; margin-bottom: 20px; } .news_date { font-size: 12px; } /* 인증기업현황 */ .status_tab_slide { min-height: 70px; max-height: 70px; } .status_slider { padding: 15px; } .tab_text { font-size: 12px; padding-top: 5px; } .tab_text > span { font-size: 0; } .tab_num { font-size: 16px; } .star_icon img { max-width: 20%; } .status_tab_slide.active::after { left: 35%; } .logo_name { font-size: 10px; } .cpy_logo { min-height: 55px; } .cpy_logo img { max-height: 55px; } .no_com_img > span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } /* SNS 채널 */ .sns_title { font-size: 17px; margin: 10px 0; } .sns_cont { font-size: 12px; height: 36px; line-height: 20px; } /* 항만연관산업 동향(2021.05.27 추가) */ .port_tab_slide { min-width: 100px; } /* 항만연관산업 동향(2021.06.10 추가) */ .oneline_title { font-size: 17px; line-height: 25px; margin: 15px 0; } .news_img { max-height: 130px; } .news_img img { min-height: 130px; } } /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}