@charset "utf-8"; @import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GmarketSansLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } */ /* 2020.01 MAIN + COMMON*/ body { font-weight: 400; } p {margin:0} ul, ol { margin:0; list-style:none; } h1, h2, h3, h4, h5, h6 { margin:0; } a:hover { text-decoration: none !important; } .wordkeep {word-break: break-all !important;} .br_mo { display: none; } .br_pc { display: block; } @media (max-width: 991px) { .br_mo { display: block !important; } .br_pc { display: none !important; } } .pcIMG { display: block;} .mobieIMG { position: relative; display: none !important;} @media (max-width: 991px) { .pcIMG { display:none !important;} .mobieIMG { display: block !important; width: 100%; margin: 0 auto;} } /* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header */ /* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header */ /* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header *//* header */ /* ========================================================================== HEADER & NAVIGATION SYSTEM (Refactored / Inline Style) ========================================================================== */ /* 1. HEADER: Layout & Base Styles (기본 레이아웃) */ #header { width:100%; background: rgba(255,255,255, 1); box-shadow:none; transition:all 0.3s ease-in-out; } #bodyarea.main #header { position:absolute; top:0; left:0; width:100%; background:none; box-shadow:none; background: rgba(255,255,255, 0); transition:all 0.3s ease-in-out; } #bodyarea.main #header:hover { background: rgba(255,255,255, 1); transition:all 0.3s ease-in-out; } .sub #header { position:relative; background-color: #fff; box-shadow: 0px 0px 5px #cfcfcf; } /* 2. HEADER: Template System (New White/Black Logic) */ /* [공통 트랜지션] */ #header, #header .pc_logo span, #header .menubar > ul > li > a, #header .pc_date span, #header .pc_date strong, #cd-menu-trigger .cd-menu-icon, #cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon::after { transition: all 0.3s ease-in-out; } /* [TYPE A: WHITE Skin] 배경 흰색 / 글씨 검정 */ #bodyarea.main #header.header-skin-white { background: rgba(255, 255, 255, 0); /* */} #bodyarea.main #header.header-skin-white:hover { background: rgba(255, 255, 255, 1); box-shadow: 0px 0px 5px rgba(0,0,0,0.1); } #bodyarea.main #header.header-skin-white .pc_logo span { background-image: url('../img/header_logo.png') !important; } #bodyarea.main #header.header-skin-white .menubar > ul > li > a { color: #1c2a52 !important; } #bodyarea.main #header.header-skin-white .menubar > ul > li:hover > a { color: #1c2a52 !important; } #bodyarea.main #header.header-skin-white .pc_date span, #bodyarea.main #header.header-skin-white .pc_date strong { color: #333 !important; } #bodyarea.main #header.header-skin-white #cd-menu-trigger .cd-menu-icon { background-color: #000; } #bodyarea.main #header.lateral-menu-is-open.header-skin-white #cd-menu-trigger .cd-menu-icon { background-color: #fff } #bodyarea.main #header.header-skin-white #cd-menu-trigger .cd-menu-icon::before, #bodyarea.main #header.header-skin-white #cd-menu-trigger .cd-menu-icon::after { background-color: #000; } /* [TYPE B: BLACK Skin] 배경 투명 / 글씨 흰색 */ #bodyarea.main #header.header-skin-black { background: rgba(255, 255, 255, 0); box-shadow: none; } #bodyarea.main #header.header-skin-black .pc_logo span { background-image: url('../img/header_logo_w.png') !important; } #bodyarea.main #header.header-skin-black .menubar > ul > li > a { color: #fff !important; } #bodyarea.main #header.header-skin-black .pc_date span, #bodyarea.main #header.header-skin-black .pc_date strong { color: #fff !important; } #bodyarea.main #header.header-skin-black #cd-menu-trigger .cd-menu-icon { background-color: #fff; } #bodyarea.main #header.header-skin-black #cd-menu-trigger .cd-menu-icon::before, #bodyarea.main #header.header-skin-black #cd-menu-trigger .cd-menu-icon::after { background-color: #fff; } /* [TYPE B 예외] Black 스킨 상태에서 마우스 오버 시 -> White 스타일로 전환 */ #bodyarea.main #header.header-skin-black:hover { background: rgba(255, 255, 255, 1); } #bodyarea.main #header.header-skin-black:hover .pc_logo span { background-image: url('../img/header_logo.png') !important; } #bodyarea.main #header.header-skin-black:hover .menubar > ul > li > a { color: #1c2a52 !important; } #bodyarea.main #header.header-skin-black:hover .pc_date span, #bodyarea.main #header.header-skin-black:hover .pc_date strong { color: #333 !important; } #bodyarea.main #header.header-skin-black:hover #cd-menu-trigger .cd-menu-icon, #bodyarea.main #header.header-skin-black:hover #cd-menu-trigger .cd-menu-icon::before, #bodyarea.main #header.header-skin-black:hover #cd-menu-trigger .cd-menu-icon::after { background-color: #000; } /* 3. HEADER: Logo & Date Elements */ #header .logo_wrap { width:100%; max-width: 1456px; margin: 0 auto; display: block; position: relative; } #header .logo { position: relative; margin:0 auto; } #header .logo:after { display:block; visibility:hidden; clear:both; content:""; } #header .pc_logo { position:relative; float:left; padding-top:40px; padding-bottom:14px; width: 300px; z-index: 35; } /* Logo Logic */ #header .pc_logo span { display:inline-block; background:url('../img/header_logo.png') no-repeat 0 0; width:249px; height:79px; text-indent:-9999px; overflow:hidden; transition:all 0.3s ease-in-out; } #bodyarea.main #header .pc_logo span { background:url('../img/header_logo_w.png') no-repeat 0 0; transition:all 0.3s ease-in-out; } #bodyarea.main #header:hover .pc_logo span { background:url('../img/header_logo.png') no-repeat 0 0; transition:all 0.3s ease-in-out; } .sub #header .pc_logo span { background:url('../img/site/202301/header_logo.png') no-repeat 0 0; } /* Date Logic */ #header .pc_date { position:absolute; left:124px; top:104px; font-family:'GmarketSansLight'; font-size:12px; color:#3d3939; width:150px; line-height:1.3; z-index: 40; } #header .pc_date span { display:inline-block; letter-spacing:0.05em; text-align:justify; z-index: 40; } #header .pc_date strong { font-family:'GmarketSansLight'; letter-spacing:-0.01em; display:inline-block; text-align:justify; } #header .pc_date br { font-size:0; } .sub #header .pc_date { color:#000; } #bodyarea.main #header .pc_date span, #bodyarea.main #header .pc_date strong { color:#fff; } #bodyarea.main #header:hover .pc_date span, #bodyarea.main #header:hover .pc_date strong { color:#333; } /* 4. HEADER: Fixed & Sticky State */ #bodyarea #header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(5px); } #bodyarea #header.fixed .pc_logo span { background:url('../img/header_logo.png') no-repeat 0 0; transition:all 0.3s ease-in-out; } #bodyarea #header.fixed .pc_date span, #bodyarea #header.fixed .pc_date strong { color:#333; } #bodyarea #header.fixed .menubar > ul > li > a { color:#1c2a52; } /* 5. NAVIGATION: Menubar (Desktop) */ .menubar { position: relative; width:100%; margin:0; font-size:16px; z-index: 33; position: absolute; top:78px; left: 0; padding-left: 330px; padding-right: 168px; box-sizing: border-box; text-align: center; padding-left:0; padding-right:0; left:-50%; transform:translateX(50%); top: 0px; } .menubar ul { list-style:none; margin:0; padding:0; } .menubar > ul > li { position: relative; padding:50px 0px 30px; display: block; width:auto; text-align: center; box-sizing: border-box; display: inline-block; } .menubar > ul > li.bigli:hover { background:rgba(239, 250, 255, 0.7); } /* 1 Depth Menu */ .menubar > ul > li > a { position: relative; color:#1c2a52; display:block; font-weight:400 !important; margin:0px; text-align:center; text-decoration:none; font-family:'Pretendard'; font-size: 18px; padding: 20px 32px; box-sizing: border-box; } .menubar > ul > li > a:after { position: absolute; right: 0; top: 18px; width: 1px; height: 25px; content: ""; display: block; background: #1c2a52; display: none; } .sub #header .menubar > ul > li > a { color:#000; border-color:#d7d7d7; } #bodyarea.main #header .menubar > ul > li > a { color:#fff; } #bodyarea.main #header:hover .menubar > ul > li > a { color:#1c2a52; } .menubar .bigli a:hover, .menubar ul li:hover a { text-decoration:none; } .sub #header .menubar li:hover > a { color:#1c2a52; } /* 2 Depth Menu (Dropdown) */ .menubar li ul { display:none; height:auto; padding:5px 0 0 0; margin:0 auto; z-index:200; width: 100%; overflow: hidden; position: absolute; border-top:0; left: 0px; top: 140px; background:rgba(239, 250, 255, 0.8); border-radius: 0 0 0.85rem 0.85rem; transition:all 0.3s ease-in-out; } .menubar li:hover ul { display:block; transition:all 0.3s ease-in-out; } .menubar li ul:after { position:absolute; left: 50%; transform:translateX(-50%); top:0; width: 80%; height:1px; background:rgba(27, 75, 144, 1); content:""; display:block; } .menubar li li { display:block; float:none; margin:0; padding:0px; width:100%; } .menubar li a:hover { color:#1b4b90 !important; } .menubar li ul a { display:block; font-size:14px; font-style:normal; margin:0px; padding:10px 8px 10px; text-align:center; vertical-align: middle; box-sizing: border-box; color:#1c2a52; } .menubar li ul .last a { border-bottom: none; } .menubar li ul li:hover a:hover { border:0px; color:#1b4b90 !important; text-decoration:none; font-weight: 700; } .sub #header .menubar li ul li:hover a:hover { color:#fff; } /* 6. NAVIGATION: Mobile & Hamburger Trigger */ #cd-menu-trigger { height: auto; } #bodyarea.main #header.lateral-menu-is-open { background:rgba(255, 255, 255, 1); } #bodyarea.main #cd-menu-trigger .cd-menu-icon { background-color:#fff; } #bodyarea.main #header:hover .cd-menu-icon { background-color:#000; } #bodyarea.main #header.fixed .cd-menu-icon { background-color:#000; } #cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after { background-color: #fff; } #bodyarea.sub #cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after { background-color: #000; } /*#bodyarea.main #cd-menu-trigger.is-clicked .cd-menu-icon { background:rgba(255, 255, 255, 0) !important; }*/ #header .other_webzine_wrap { width: 180px; position:absolute; top:40px; right: 0; z-index:33; } /* 7. HEADER & MENU: Responsive Media Queries */ @media(max-width:1460px) { .logo_wrap { padding-left:15px; padding-right:15px; } } @media(max-width:1400px) { .menubar li ul, .menubar li li { } } @media(max-width:1200px) { .menubar { font-size:18px; padding-right: 0; } } @media(min-width:768px) and (max-width: 1099px) { .menubar li { } } @media(max-width:1000px) { #header .pc_logo { padding: 46px 0 20px; } } /* Mobile Layout */ @media(max-width:980px) { #cd-logo { margin-left: 27%; } #cd-logo img { height:50px; float:left; } } @media(max-width:979px) { #header { background-color:#fff !important; box-shadow:0px 0px 5px #cfcfcf; } #cd-logo { margin:20px 30px 0; } .date { margin-top:-5px; margin-left: 80px; } #header .pc_date { top: 58px; left: 134px; font-size:11px; color:#363636; } #header .pc_date span { color:#363636; } #bodyarea.main #header .pc_date span, #bodyarea.main #header .pc_date strong { color:#fff; } #bodyarea.main #header.fixed .pc_date span, #bodyarea.main #header.fixed .pc_date strong { color:#333; } #bodyarea.main #header:hover #cd-logo.logo_mo img, #bodyarea.main #header.fixed #cd-logo.logo_mo img, #bodyarea.sub #header #cd-logo.logo_mo img, #bodyarea.sub #header:hover #cd-logo.logo_mo img, #bodyarea.sub #header.fixed #cd-logo.logo_mo img { content: url(../img/header_logo.png); transition:all 0.3s ease-in-out; } .footer .row-fluid .logo { padding-left:15px; } } @media(max-width:767px) { #cd-logo { margin-top: 15px; margin-left: 10px; margin-right: 0; } #header .pc_date { top: 53px; left: 110px; } } @media(max-width:420px) { #cd-logo { margin-top: 20px; margin-left: 15px; margin-right: 0; } #header .pc_date { top: 58px; left: 116px; font-size:10px; } } /* ************ main ************ */ .fullWidth { width: 100% !important; padding: 0 !important; margin:0 auto; overflow:hidden} .main-container {max-width: 1450px !important; width:100%; margin: 0 auto; } .content { padding: 0; } .sns_iconWrap {list-style:none;text-align:right;margin-top:14px;font-size:0;line-height:100%} .sns_iconWrap li {list-style:none; display:inline-block; margin:0 5px 5px;} .gotoTop a {color:#1c2a52} .hanmoon { font-family:'Pretendard', sans-serif; font-style:normal} .pR { position:relative;} .naSq {font-family:'NanumSquare';} @media (max-width: 767px) { .sns_iconWrap { text-align:center;} .sns_iconWrap li {margin:0 5px;} } /* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage */ /* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage */ /* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage *//* MAINpage */ /* main-con1 */ .main-con1 { position: relative; width:100%; margin:0 auto; box-sizing: border-box; } .main-con1 .main_roll { float:none; z-index: 10; box-sizing: border-box;} @media (max-width: 1460px) { .main-con1 .main_roll .slider { margin:0 auto;} } @media (max-width: 991px) { .main-con1 { padding-top:0px;} } /* main-con1 */ /* slider*/ .slider { position: relative; width:100%; max-width:100%; box-sizing:border-box; } .main-con1_container { position:absolute; left: 50%; top:50%; transform: translate(-50%, -50%); width:100%; height:100%; max-width:1456px; padding:0; box-sizing: border-box;} .slider .pcIMG,.slider .mobieIMG { display:block; width:100%; } .slider .slide_txt { position:absolute; left:0px; top:50%; transform:translateY(-50%); padding:50px 42px; padding:0 15px; /* background:#fff; */ width: 476px; box-sizing: border-box; } .slider .slide_txt h3 { color:#fff; font-size:32px; letter-spacing:-0.05em; font-family:'Pretendard'; font-weight:700; line-height:1.6} .slider .slide_txt h5 { color:#fff; font-size:20px; letter-spacing:-0.05em; font-family:'Pretendard'; font-weight:500; margin:0 0 14px; line-height:1.6;} .slider .slide_txt .subText { color:#fff; display: inline-block; line-height:1.6; font-size:13px } .slider .slide_txt .mobileBr {display: none;} .slider .slide_txt .silde_btn { display:block; margin-top:50px; background: rgba(255, 255, 255, 0); width: 140px; height: 50px; line-height: 50px; color: #fff; border:1px solid #fff; text-align: center; font-size:16px; letter-spacing:-0.05em; font-family:'Pretendard'; font-weight:700; border-radius: 999px;} .slider .slide_txt .silde_btn:hover{ background: rgba(255, 255, 255, 1.0); color: #1c2a52;} .slider .slide1 .slide_txt h5 { color:#1c2a52; } .slider .slide1 .slide_txt h3 { color:#1c2a52; } .slider .slide1 .slide_txt .subText { color:#1c2a52; } .slider .slide1 .slide_txt .silde_btn { color: #1c2a52; border:1px solid #1c2a52; } .slider .slide1 .slide_txt .silde_btn:hover{ background: #1c2a52; color: #fff;} /* slider.swiper .swiper-pagination */ .slider.swiper .swiper-pagination { position:absolute; left:auto; right:7em; top:50%; transform:translateY(-50%); width: 120px; } .slider.swiper .swiper-pagination-bullet { display:block; width: 120px; height: 120px; line-height:130px; border-radius: 99px; padding: 5px 15px;background: rgba(255, 255, 255, 0.5); opacity: 1; margin-bottom:45px !important; text-align:center } .slider.swiper .swiper-pagination-bullet > span { display:inline-block; line-height:1.2; font-size: 16px; color: #1c2a52; font-family:'Pretendard';font-weight:500; } .slider.swiper .swiper-pagination-bullet-active { background: rgba(255, 255, 255, 1); } .slider.swiper .swiper-pagination-bullet-active > span { color: #1c2a52; } @media (max-width: 1100px) { .slider .slide_txt h5 { color:#fff;} .slider .slide_txt h3 { color:#fff;} .slider .slide_txt .silde_btn { display: none;} .slider .slide1 .slide_txt h5{ display: none; } .slider .slide2 .slide_txt h5 { color:#fff;} .slider .slide2 .slide_txt h3 { color:#fff;} .slider .slide_txt .subText { display: none; } .slider .slide_txt .mobileBr {display: block;} .slider .slide_txt .pcBr {display: none;} .slider .slide_txt .silde_btn { margin:20px auto 0; width:120px; height:40px; line-height: 40px; font-size:14px; } .slider.swiper .swiper-pagination { right:1em; width:80px;} .slider.swiper .swiper-pagination-bullet { width:80px; height:80px; line-height:90px; margin-bottom: 1em !important; } .slider.swiper .swiper-pagination-bullet > span { font-size: 14px; } } @media (max-width: 991px) { .slider .slide_txt {left: auto; right: auto; left: auto; top: 88%; background: 0; text-align:center; width:100%} } @media (max-width: 640px) { .slider .slide_txt {padding: 32px 24px; } .slider .slide_txt h5 { font-size: 16px; margin: 0 0 8px 0; } .slider .slide_txt h3 { font-size: 22px; margin: 0; } } @media (max-width: 520px) { .slider .slide_txt { padding: 22px 20px; } } @media (max-width: 480px) { .slider .slide_txt h5 { font-size: 14px; margin: 0 0 0px 0; } .slider .slide_txt h3 { font-size: 18px; } } @media (max-width: 340px) { } .con_box, .con_box ul, .con_box li { list-style:none; margin:0; padding:0} .main_title { position: relative; margin:0; padding:0; text-align: left;} .main_title h3 { position: relative;box-sizing: border-box; display:inline-block; font-family:'Pretendard'; font-weight:700; font-size:56px; color:#00a1b5; padding:0; margin:0; letter-spacing: -0.05em; padding:0 0 1rem 0;} .main_title h3 strong {font-weight:900;} .main_title span.bar { position:absolute; height:1px; background:#00a1b5; width:100%; top:0; left:0; display:none;} .wrapbox { max-width:1460px; width:100%; margin:0 auto; padding:0; box-sizing: border-box;} .txt_box {position: relative; text-align: center; margin: 0 auto 14px;} .txt_box h3 { font-family:'Pretendard'; color:#00a1b5; font-size:24px; font-weight:700; letter-spacing:-0.05em; line-height:1.3; margin:4px 0 0 0} .txt_box h4 { font-family:'Pretendard'; color:#1d1d1b; font-size:26px; font-weight:400; letter-spacing:-0.05em; margin:0} .txt_box h5 { margin:0} .txt_box h5 span { display:inline-block; font-size:18px; color:#00a1b5; font-weight:700; font-family:'Pretendard'; line-height:1.3; letter-spacing:-0.05em; } .txt_box2 {position: relative; text-align: center; margin: 30px auto 0;} .txt_box2 h3 { font-family:'Pretendard'; color:#00a1b5; font-size:24px; font-weight:700; letter-spacing:-0.05em; line-height:1.3; margin:0} .txt_box2 h4 { font-family:'Pretendard'; color:#1d1d1b; font-size:26px; font-weight:700; letter-spacing:-0.05em; margin:0; line-height:1.3;} .txt_box2 h4 strong { font-family:'Pretendard'; color:#1d1d1b; font-size:26px; font-weight:700; letter-spacing:-0.05em; margin:0} .txt_box2 h5 { margin:0; margin: 12px auto 0;} .txt_box2 h5 span { display:inline-block; font-size:18px; color:#676767; font-weight:400; font-family:'Pretendard'; line-height:1.3; letter-spacing:-0.05em; } @media (max-width: 1460px) { .wrapbox { padding:0 15px} } @media (max-width: 1399px) { } @media (max-width: 1260px) { .mhidden { display:none} .txt_box h3 { font-size:24px;} .txt_box h4 { font-size:26px;} .txt_box2 h3 { font-size:24px;} /* .txt_box2 h4 { font-size:26px;}*/ .txt_box2 h4 strong { font-size:26px;} } @media (max-width: 1140px) { .txt_box h3 { font-size:22px} .txt_box h4 { font-size:20px} .txt_box2 h3 { font-size:22px} /* .txt_box2 h4 { font-size:24px}*/ .txt_box2 h4 strong { font-size:20px;} } @media (max-width: 991px) { .txt_box h3 { margin: 8px 0 0 0; } } @media (max-width: 860px) { } @media (max-width: 640px) { .main_title h3 { font-size:28px;} .txt_box h3 { font-size:18px} .txt_box h4 { font-size:20px} .txt_box h5 span { font-size:14px} .txt_box2 h3 { font-size:18px} /* .txt_box2 h4 { font-size:20px}*/ .txt_box2 h4 strong { font-size:20px;} .txt_box2 h5 span { font-size:14px} } @media (max-width: 520px) { .sns_iconWrap { text-align:center} .sns_iconWrap li { margin:0 7px 5px;} .txt_box h3 { font-size:14px} .txt_box h4 { font-size:18px} .txt_box h5 span { font-size:14px; } .txt_box2 h3 { font-size:16px} .txt_box2 h4 { font-size:16px} .txt_box2 h4 strong { font-size:16px;} .txt_box2 h5 span { font-size:14px; } } @media (max-width: 460px) { } @media (max-width: 380px) { } @media (max-width: 340px) { } @media (max-width: 300px) { } /* main-con2 */ .main-con2 { margin-top:0px; box-sizing: border-box; } .main-con2 .main_title { display:block; margin:0; padding:0; float:none; position:relative; text-align:center; padding-top: 1em; } .main-con2 .main_title h3 { position: relative; margin:0; padding:0 0 38px 0; margin-top:0; background:#fff;z-index:2; font-weight: 400; box-sizing: border-box;} .main-con2 .main_title h3 strong { position: relative;} .main-con2 ul { display:block; float:none; z-index:1; text-align:left; padding: 0; padding-top: 0; padding-bottom: 25px;} .main-con2 ul:after { display:block; visibility:hidden; clear:both; content:""} /* 3개알때 */ .main-con2 ul li { position:relative; margin-bottom:0px; float: left; width:31%; padding: 0; box-sizing: border-box; margin-right: 3.44%;} .main-con2 ul li.first:after { display:none} .main-con2 ul li.last { margin-right: 0; /*width: 32%;*/} /* 4개알때 */ /* .main-con2 ul li { position:relative; margin-bottom:50px; float: left; width:25.9%; padding: 28px; box-sizing: border-box} .main-con2 ul li:after { position:absolute; top:0; left:0; width:1px; height:100%; background:#00a1b5; display:block; content: "";} .main-con2 ul li.first:after { display:none} .main-con2 ul li.first { padding-left: 0; width: 24%;} .main-con2 ul li.last { padding-right: 0; width: 24%;} */ .main-con2 ul li > a { position: relative; display:block; } .main-con2 ul li > a > div.txt_box { width:100%; padding:0; text-align:center; height:40px; border: 1px solid #00a1b5;} .main-con2 ul li > a > div.txt_box .mhidden { display:none;} .main-con2 ul li > a:hover { border:0; text-decoration:0} /*.main-con2 ul li > a:hover > div.txt_box h3 { color:#00a1b5;}*/ /*.main-con2 ul li > a > div.txt_box h3 { background:#fff; margin:0; padding:0px; font-size:23px; margin-bottom:12px; line-height: 1.5;}*/ /*.main-con2 ul li > a > div.txt_box h4 { background:#fff; margin:0; padding:0; font-size:20px; margin-bottom: 6px;}*/ /*.main-con2 ul li > a > div.txt_box h5 { display: none;}*/ .main-con2 ul li > a > div.txt_box2 {position: relative; text-align: left;} .main-con2 ul li > a > div.txt_box2 h4 { margin: 0 0 0 0; } /*.main-con2 ul li > a > div.txt_box2 h5 { margin: 12px 0 0 0; }*/ .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 24px;} .main-con2 ul li > a > div.txt_box2 > img { position: absolute; top:-56px; right: 0; width: 48px; } .main-con2 .forPc { display: block; } .main-con2 .forMo { display: none; } @media (max-width: 1460px) { .main-con2 .con_box { padding:0; box-sizing: border-box;} /*.main-con2 ul { padding-left:0; width:100%; margin-bottom:40px}*/ /*.main-con2 ul > li { float:left; margin-bottom:0; padding-left:18px; padding-right:18px}*/ } @media (max-width: 1399px) { } @media (max-width: 1260px) { .main-con2 ul li > a > div.txt_box h3 { font-size:20px; } .main-con2 ul li > a > div.txt_box h4 { font-size:16px;} .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 22px;} } @media (max-width: 1140px) { .main-con2 ul li > a > div.txt_box h3 { font-size:18px; } .main-con2 ul li > a > div.txt_box h4 { font-size:14px;} .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 20px;} } @media (max-width: 991px) { .main-con2 .forPc { display: none; } .main-con2 .forMo { display: block; } .main-con2 .main_title { padding-top: 25px;} .main-con2 .main_title h3 { padding: 0 20px; } .main-con2 ul { margin-bottom:0; padding-bottom: 5px;} .main-con2 ul:after { display:block; visibility:hidden; clear:both; content:""} .main-con2 ul li:after {display: none;} .main-con2 ul > li img { width:100%;} .main-con2 ul li > a > div.txt_box { height: auto; margin-bottom: 10px; height: 36px;} /*.main-con2 ul li > a > div.txt_box h3 {margin-bottom:6px; }*/ .main-con2 ul li > a > div.txt_box h3 br { display: none; } .main-con2 ul li > a > div.txt_box h5 { display: block; margin-bottom: 12px;} .main-con2 ul li > a > div.txt_box h5 span { font-size: 16px;} .main-con2 ul li > a > div.txt_box2 { margin: 20px auto 0; } .main-con2 ul li > a > div.txt_box2 h4 { margin: 0 0 4px 0; } .main-con2 ul li > a > div.txt_box2 h5 { margin: 0px 0 0 0; } .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 16px;} .main-con2 .bx-pager {bottom: -40px;} .main-con2 .txt_box2 h4 { margin: 0 0 5px 0; } .main-con2 ul li > a > div.txt_box2 > img { display: none; } } @media (max-width: 860px) {} @media (max-width: 640px) { .main-con2 .main_title { margin-bottom:10px} .main-con2 .main_title h3 { padding: 0 15px; font-size: 16px;} .main-con2 ul li > a > div.txt_box h3 { font-size:16px; } .main-con2 ul li > a > div.txt_box h4 { font-size:13px;} .main-con2 ul li > a > div.txt_box h5 { margin-bottom: 5px;} .main-con2 ul li > a > div.txt_box h5 span { font-size: 16px;} .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 14px;} } @media (max-width: 520px) { .main-con2 ul li > a > div.txt_box h3 { font-size:13px; } .main-con2 ul li > a > div.txt_box h5 span { font-size: 13px;} .main-con2 ul li > a > div.txt_box2 h5 span { font-size: 13px;} } @media (max-width: 480px) { .main-con2 ul li > a > div.txt_box h3 { font-size:12px; } } .main-con3 { margin-top:80px; box-sizing: border-box; } .main-con3 .main_title { position:relative; margin:0; padding:0 0 50px 0; float:none; text-align:left; box-sizing: border-box;} .main-con3 .main_title h3 { position: relative; margin:0; padding:0; margin-top:0; z-index:2; box-sizing: border-box;} .main-con3 .main_title .btn_more { position: absolute; top: 6px; right: 0; background: #aaaaaa; width:78px; height: 78px; width:56px; height: 56px; display: block; text-align: center; border-radius:99px; } .main-con3 .main_title .btn_more > img { display:block; width: 28px; margin:18px auto; } .main-con3 .main_title .btn_more:hover { background: #00a1b5; } .main-con3 ul { display:block; float:none; z-index:1; text-align:left; padding: 0; padding-top: 0; padding-bottom: 25px;} .main-con3 ul:after { display:block; visibility:hidden; clear:both; content:""} /* 3개일때 */ /*.main-con3 ul li { position:relative; margin-bottom:0px; float: left; width:31%; padding: 0; box-sizing: border-box; margin-right: 3.44%; margin-bottom: 3em;}*/ /*.main-con3 ul li.first:after { display:none}*/ /*.main-con3 ul li.last { margin-right: 0; }*/ /* 3개일때 */ /* 4개일때 */ .main-con3 ul li { position:relative; margin-bottom:50px; float: left; width:23%; margin:0 1.3%; padding: 0px; box-sizing: border-box; } .main-con3 ul li:after { position:absolute; top:0; left:0; width:1px; height:100%; display:block; content: ""; display: none} .main-con3 ul li.first:after { display:none} .main-con3 ul li.first { margin-left: 0; width: 23%;} .main-con3 ul li.last { margin-right: 0; width: 23%;} /* 4개일때 */ .main-con3 ul li > a { position: relative; display:block; box-sizing:border-box; border-radius:2rem; overflow:hidden; transition:all 0.3s ease-in-out;} .main-con3 ul li > a > div.imgBox { position:relative; width: 100%; background-color:rgba(255,255,255, 1);background-size: cover; background-position: center center; background-repeat: no-repeat; box-sizing: border-box;isolation: isolate; overflow:hidden;transition:all 1s ease-in-out;} .main-con3 ul li > a > div.imgBox::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.4); z-index: -1; inset: 0; opacity: 0;transition:all 0.3s ease-in-out;} .main-con3 ul li > a > div.imgBox > img { position:relative; width: 100%; display:block; } .main-con3 ul li > a .txt_box { position: absolute; left: 50%; transform:translateX(-50%); top: 30px; width: 122px; height: 40px; padding: 7px 0; background: #fff; text-align:center; border-radius:90px; box-sizing:border-box; transition:all 0.3s ease-in-out;} .main-con3 ul li > a .txt_box h3 { margin:0 auto; font-size: 20px; transition:all 0.3s ease-in-out;} .main-con3 ul li > a .txt_box .mhidden { display:none;} .main-con3 ul li > a:hover::after { content: ''; position: absolute; left:0; top:0; border:5px solid #00a1b5; width:100%; height:100%;border-radius:2rem;transition:all 0.3s ease-in-out;} .main-con3 ul li > a:hover > div.imgBox::after { opacity: 0.7; transition:all 0.3s ease-in-out;} .main-con3 ul li > a:hover { transform: translateY(-7px);transition: transform 0.3s ease-out} .main-con3 ul li > a:hover .txt_box { background: #00a1b5;transition:all 0.3s ease-in-out;} .main-con3 ul li > a:hover .txt_box h3 { color: #fff;transition:all 0.3s ease-in-out;} .main-con3 ul li > a > div.txt_box2 { position: absolute; bottom:7%; left:0; text-align:center; width:100% ; display: none} .main-con3 ul li > a > div.txt_box2 h4 { margin: 0 0 0 0; color:#fff; font-weight:400; font-size:18px} .main-con3 ul li > a > div.txt_box2 h4 strong {color:#fff; } .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 16px; color:#fff;} .main-con3 ul li > a > div.txt_box2 > img { position: absolute; top:-56px; right: 0; width: 48px; } .main-con3 ul li > a:hover > div.txt_box2 { display:block } .main-con3 .forPc { display: block; } .main-con3 .forMo { display: none; } @media (max-width: 1460px) { .main-con3 .con_box { padding:0; box-sizing: border-box;} } @media (max-width: 1399px) { } @media (max-width: 1260px) { .main-con3 ul li > a > div.txt_box h3 { font-size:20px; } .main-con3 ul li > a > div.txt_box h4 { font-size:16px;} .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 22px;} } @media (max-width: 1140px) { .main-con3 ul li > a > div.txt_box h3 { font-size:18px; } .main-con3 ul li > a > div.txt_box h4 { font-size:14px;} .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 20px;} } @media (max-width: 991px) { .main-con3 .forPc { display: none; } .main-con3 .forMo { display: block; } .main-con3 .main_title { } .main-con3 .main_title h3 { } .main-con3 ul { margin-bottom:0; padding-bottom: 5px;} .main-con3 ul li { width:47%; padding: 0px; margin-bottom:1.5em} .main-con3 ul:after { display:block; visibility:hidden; clear:both; content:""} .main-con3 ul li.first, .main-con3 ul li.last {width:47%; } .main-con3 ul > li.first { margin-left: 1.3%;} .main-con3 ul > li.last { margin-right: 1.3%;} .main-con3 ul li:after {display: none;} .main-con3 ul > li img { width:100%;} .main-con3 ul li > a > div.txt_box { height: auto; margin-bottom: 10px; height: 36px;} .main-con3 ul li > a > div.txt_box h3 {margin-bottom:6px; } .main-con3 ul li > a > div.txt_box h3 br { display: none; } .main-con3 ul li > a > div.txt_box h5 { display: block; margin-bottom: 12px;} .main-con3 ul li > a > div.txt_box h5 span { font-size: 16px;} .main-con3 ul li > a > div.txt_box2 { margin: 15px auto 0; display:block } .main-con3 ul li > a > div.txt_box2 h4 { margin: 0 0 4px 0; } .main-con3 ul li > a > div.txt_box2 h5 { margin: 0px 0 0 0; } .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 16px;} .main-con3 .bx-pager {bottom: -40px;} .main-con3 .txt_box2 h4 { margin: 0 0 5px 0; } .main-con3 ul li > a > div.txt_box2 > img { display: none; } } @media (max-width: 860px) {} @media (max-width: 640px) { .main-con3 .main_title { margin-bottom:0px; padding-bottom:30px} .main-con3 .main_title .btn_more { width:40px; height:40px; line-height:40px; top:0; } .main-con3 .main_title .btn_more > img { width:20px; margin: 13px auto; } .main-con3 ul li > a { border-radius:0 } .main-con3 ul li > a .txt_box {height:30px; width: 80px; top: 20px;} .main-con3 ul li > a .txt_box h3 {font-size:14px;} .main-con3 ul li > a:hover::after { display:none } .main-con3 ul li > a > div.imgBox {border-radius:1em} .main-con3 ul li > a > div.imgBox::after { display:none } .main-con3 ul li > a > div.txt_box h3 { font-size:16px; } .main-con3 ul li > a > div.txt_box h4 { font-size:13px;} .main-con3 ul li > a > div.txt_box h5 { margin-bottom: 5px;} .main-con3 ul li > a > div.txt_box h5 span { font-size: 16px;} .main-con3 ul li > a > div.txt_box2 { position:relative; bottom:auto; left:auto; } .main-con3 ul li > a > div.txt_box2 h4 { color:#333; font-size: 14px} .main-con3 ul li > a > div.txt_box2 h4 strong { color:#333;} .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 14px;color:#333} } @media (max-width: 520px) { .main-con3 ul li > a > div.txt_box h3 { font-size:13px; } .main-con3 ul li > a > div.txt_box h5 span { font-size: 13px;} .main-con3 ul li > a > div.txt_box2 h5 span { font-size: 13px;} } @media (max-width: 480px) { .main-con3 ul li > a > div.txt_box h3 { font-size:12px; } } /* 전체 배경 및 레이아웃 설정 */ .main-con4 { margin-top:58px; background-color: #00a1b5; width: 100%; overflow: hidden; position: relative; padding: 100px 0; box-sizing: border-box; color: #fff; box-sizing: border-box;} .main-con4 .main_title { display:none } .main-con4 .main_title h3 { color:#fff } .main-con4 .main_con4_inner { position:relative; display: flex; width: 100%; margin: 0 auto; /* 중앙 정렬 */ align-items: center; justify-content: space-between; gap: 50px; padding-right: 5em; box-sizing: border-box} /* --- [좌측] 텍스트 콘텐츠 영역 --- */ .main-con4 .con4-content-area { width: 45%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 2;} .main-con4 .con4-tag { font-size: 3.5rem; font-weight: 800; margin-bottom: 40px; text-transform: uppercase; letter-spacing: -1px; line-height: 1;} .main-con4 .con4-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 15px; line-height: 1.4;} .main-con4 .con4-desc { font-size: 1.1rem; font-weight: 400; margin-bottom: 40px; opacity: 0.9; white-space: pre-line; line-height: 1.6;} .main-con4 .con4-view-more-btn { padding: 12px 35px; color: #fff; border-radius: 30px; font-weight: 500; text-decoration: none; display: inline-block; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.2s; border: 2px solid #fff;} .main-con4 .con4-view-more-btn:hover { transform: translateY(-2px); background-color: #fff; color: #00a1b5;} /* 페이지네이션 */ .main-con4 .con4-pagination { display: flex; gap: 15px; margin-top: 50px;} .main-con4 .con4-dot { width: 14px; height: 14px; background: rgba(255,255,255,0.4); border-radius: 50%; transition: 0.3s; cursor: pointer;} .main-con4 .con4-dot.active { background: #fff; transform: scale(1.1);} /* 텍스트 등장 애니메이션 Keyframes */ @keyframes con4SlideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .main-con4 .con4-text-animate { animation: con4SlideUpFade 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;} /* --- [우측] 슬라이더 영역 --- */ .main-con4 .con4-slider-area { width: 50%; max-width: 960px; position: relative;} /* Swiper 본체 스타일 재정의 */ .main-con4 .swiper.con4-swiper { width: 100%; height: 500px; overflow: visible; /* 카드 겹침 효과 */} .main-con4 .swiper-slide { background-color: #aaa; border-radius: 20px; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: #fff; box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* background-image: url('...'); background-size: cover; background-position: center; */} /* 슬라이드 색상 예시 (필요시 삭제) */ .main-con4 .swiper-slide:nth-child(1) { background-color: #999; } .main-con4 .swiper-slide:nth-child(2) { background-color: #777; } .main-con4 .swiper-slide:nth-child(3) { background-color: #555; } .main-con4 .swiper-slide:nth-child(4) { background-color: #333; } /* 네비게이션 버튼 */ .main-con4 .con4-slide-nav { display: flex;z-index: 10;} .main-con4 .nav-btn { width: 65px; height: 65px; background: rgba(255,255,255,0.4); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; backdrop-filter: blur(5px); transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);} .main-con4 .nav-btn:hover { background: rgba(255,255,255,0.8);} .main-con4 .nav-btn::after { content: ''; display: block; width: 28px; height: 28px; border: none !important; transform: none !important; margin: 0 !important; background-repeat: no-repeat; background-position: center; background-size: contain; } .main-con4 .con4-prev::after { background-image: url('../img/site/icon_arrow_prev.svg');} .main-con4 .con4-next::after { background-image: url('../img/site/icon_arrow_next.svg');} /* --- [PC 전용 스타일] --- */ @media (min-width: 901px) { .main-con4 .con4-slide-nav { position: absolute; bottom: 0; right: 6em; margin-bottom: 20px; gap: 12px; z-index: 20; } } /* --- [모바일 전용 스타일 (900px 이하)] --- */ @media (max-width: 990px) { .main-con4 { padding: 70px 0; } .main-con4 .main_title { display:block; } .main-con4 .main_con4_inner { flex-direction: column-reverse; gap: 30px; padding-right: 0} .main-con4 .con4-slider-area, .main-con4 .con4-content-area {width: 100%;max-width: none; text-align: center;align-items: center;position: relative; } .main-con4 .con4-tag { font-size: 2.5rem; margin-bottom: 20px; display:none } .main-con4 .con4-desc { margin-bottom: 30px; } .main-con4 .con4-pagination { display: none; } .main-con4 .swiper.con4-swiper { height: 300px; width: 95%; margin: 0 auto;overflow: visible;} .main-con4 .swiper-slide { border-radius: 15px; box-shadow: none;} /* 뒷장 카드 색상을 밝은 민트색으로 변경 */ .main-con4 .swiper-slide-shadow {background: rgba(150, 240, 200, 0.5) !important;} .main-con4 .con4-slide-nav { position: absolute; top: auto; bottom:10%; left: 0; width: 100%; transform: translateY(-50%); justify-content: space-between; padding: 0 10px; pointer-events: none; } .main-con4 .nav-btn { background: none; border: none; border-radius: 0; backdrop-filter: none; pointer-events: auto;} .main-con4 .nav-btn::after { width: 32px; height: 32px; } .main-con4 .con4-view-more-btn { padding:6px 30px; font-size:14px; background:#fff; color: #00a1b5; box-shadow:none;} } @media (max-width: 640px) { .main-con4 { padding: 30px 0; } .main-con4 .con4-title { font-size: 22px } } /*.main-con5.main-con5.main-con5.main-con5*/ .main-con5 {position:relative; padding-top:100px; padding-bottom: 100px; box-sizing: border-box;} .main-con5 .main_title {;} .main-con5 .main_title h3 {} .main-con5 .main_title h3 strong {font-weight:900;} /* --- .main-con5 .menu-list 스타일 시작 --- */ .main-con5 .menu-list { display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap;} .main-con5 .menu-item { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 220px; padding: 15px 20px; border: 2px solid #1c2a52; border-radius: 50px; text-decoration: none; background-color: #fff; transition: all 0.3s ease; color: #000;} .main-con5 .icon-box { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 15px;} .main-con5 .icon-box svg { width: 100%; height: 100%; stroke: #1c2a52; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s ease;} .main-con5 .menu-text { font-size: 1.1rem; font-weight: 700; white-space: nowrap;} .main-con5 .menu-item:hover { background-color: #1c2a52; color: #fff;} .main-con5 .menu-item:hover .icon-box svg { stroke: #fff;} @media (max-width: 1460px) {} @media (max-width: 1399px) {} @media (max-width: 1260px) {} @media (max-width: 1140px) {} @media (max-width: 991px) { .main-con5 { margin-top: 0; } .main-con5 .main_title { padding-top: 25px;} .main-con5 .main_title h3 { padding: 0 20px; } } @media (max-width: 900px) { .main-con5 .menu-item {flex-basis: calc(50% - 15px); } .main-con5 .menu-text {font-size:16px;} } @media (max-width: 860px) {} @media (max-width: 640px) { .main-con5 { padding-top:50px; padding-bottom: 50px;} } @media (max-width: 520px) { } @media (max-width: 420px) { .main-con5 .menu-list { gap:10px } .main-con5 .menu-item {flex-basis: calc(50% - 10px); min-width: 166px; max-width: 166px; padding: 8px 0;} .main-con5 .icon-box { width:22px; height:22px; margin-right:5px} .main-con5 .menu-text {font-size:14px;} } /* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage */ /* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage */ /* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage *//* SUBpage */ .h4_wrap h5 { line-height: 1.4; } .wordBreak { word-break: break-all; } .sub #header { position:relative; background-color: #fff; box-shadow: 0px 0px 5px #cfcfcf;} .sub #header .pc_logo span { background:url('../img/site/202301/header_logo.png') no-repeat 0 0; } .sub #header .pc_date { color:#000} .sub #header .menubar > ul > li > a { color:#000; border-color:#d7d7d7} .sub #header .menubar li:hover > a { color:#00a1b5 } .sub #header .menubar li ul li:hover a:hover { color:#fff; } .important {font-weight: bold;text-decoration: underline;} .font-12 {font-size:12px !important; } .font-13 {font-size:13px !important; } .font-16 {font-size:16px !important; } .font-18 {font-size:18px !important; } .font-20 {font-size:20px !important; } .font-22 {font-size:22px !important; } .font-23 {font-size:23px !important; } .font-24 {font-size:24px; font-weight:bold} .impact-color {color:#1c2a52} .impact-color2 {color:#af7f69} .white-color {color:#fff} .gray-color {color:#666} .bg-gray {background:#f1f2f2} .bold{font-weight:bold} .bottom_small-a {margin-bottom:5px !important;} .bottom_small-b {margin-bottom:0 !important;} .padding-left0 {padding-left:0 !important;} .padding-a{padding:80px 160px 0 20px} .padding-b{padding:0 50px 0 30px} .padding-c {padding-left:30px;margin-top:-10px} .padding-d{padding-top:30px} .padding-r {padding-left: 1rem; padding-right: 1rem; box-sizing: border-box;} .padding-r2 {padding-left: 2rem; padding-right: 2rem; box-sizing: border-box;} .padding-l {padding-left: 1rem; box-sizing: border-box;} .padding-r3 {padding-right: 1.5rem; box-sizing: border-box;} .padding-pt {padding-top: 1rem;} .padding-pb {padding-bottom: 1rem ;} .padding-pb2 {padding-bottom: 3rem !important;} .padding-all {padding:0 !important;} .padding-all2 {padding:2rem} .padding-all1 {padding:1.5rem} .padding-all5 {padding:5rem} .weight100{font-weight:100} .botTB {border-bottom:1px solid #232323;border-top:1px solid #232323;} .botT {border-top:1px solid #232323;} .botT2 {border-top:2px solid #232323;} .botB {border-bottom:1px solid #232323;} .botB2 {border-bottom:2px solid #232323;} .botall {border:4px solid #dcddde;} .impactboall {border:2px solid #f6a9c0;} .impactboall2 {border:2px solid #dcddde;} .b-radi{border-radius:10px} .page_title {margin-bottom:20px;padding:0} .page_title h3{position:relative;font-size:14px;line-height:24px;display:inline-block;margin:0 auto;font-weight:bold; padding:0 10px; color: #00abb9;} .page_title h3:before{content:'|';position: absolute;display:inline-block;font-size:6px;top:-1px;left:-15px;color:#00abb9} .page_title h3:after {content:'|';position: absolute;display:inline-block;font-size:6px;top:-1px;right:-15px;color:#00abb9} .head_copy .sub_txt {clear:both;font-size:16px;font-weight:bold} .profile .span4 {height:130px;padding:0 10px} .profile .span4.profile_2{border-right:1px dotted #232323;border-left:1px dotted #232323;padding-left:25px} .img50max {max-width:441px} @media (max-width: 767px) { section.subPage .head_copy {margin-bottom:25px !important} .profile .span4 {height:auto;padding:0} .profile .span4.profile_2{border:0;border-top:1px dotted #232323;border-bottom:1px dotted #232323;padding:10px 0;margin:10px 0} section.subPage .head_copy .title {font-size:28px !important;letter-spacing:-0.05em;/* margin-bottom:30px !important */} .padding-l {padding-left: 0;} .padding-r3 { padding-right:0} .font-23 {font-size:18px !important; } } .naum_sub { position:relative; padding-top:15px} .naum_sub:before { content:''; position: absolute; height:10px; width:10px; background:#8e735a; border-radius:50%; top:0} .naum_sub.sj:before { background:#808285} .impact_table { border:0; margin-top:10px !important} .impact_table th { border:0; border-top:1px dashed #58595b; color:#8e735a; padding:6px 0 !important; text-align:left !important; font-size:16px} .impact_table td { border:0; padding:0 0 6px 0 !important; text-align:left !important; color:#6d6e71} .impact_table2 { border:0; margin-top:10px !important} .impact_table2 td { border:0; line-height:1.3; padding:6px 0 10px !important; word-break:keep-all; color:#6d6e71} .impact_table2 td span { display:inline-block; padding-top:6px; font-weight:700} .color-bwn { color:#8e735a} .nanum_h5 { border-top:1px dashed #58595b; font-size:16px; font-weight:700; color:#8e735a; padding:6px 0 !important; margin:0} .naum_table .impact_table { /* margin-top:0 !important */ } .naum_bortop { border-top:1px dashed #58595b;} .impact_table_03 { width: 100%;line-height: 1.2;font-size: 0.95em;border-bottom:2px #8e735a solid; border-top:2px #8e735a solid;} .impact_table_03 td, .impact_table_03 th {padding: 5px 0;} .impact_table_03 thead th { border-bottom:1px #8e735a solid; color:#8e735a; border-right:1px #8e735a solid} .impact_table_03 tbody th { color:#8e735a} .impact_table_03 tbody tr { border-bottom:1px #8e735a solid;} .impact_table_03 tbody tr td { border:1px solid #808285} .impact_table_03 .bor0 { border-right:0} .impact_table_03 .bol0 { border-left:0} .bg-e2{background:#e2d9d0 } /* old_ver */ .hospital_news {list-style:none;margin:0;padding:0;} .hospital_news:after {display:block;visibility:hidden;clear:both;content:""} .hospital_news li {position:relative;padding:0;margin-bottom:50px} .hospital_news li p.field, .hospital_news li.half .line {display:none} .hospital_news li:first-child p.field, .hospital_news li:first-child .line {display:none;} .hospital_news li:nth-child(18) p.field, .hospital_news li:nth-child(26) p.field { display:block !important; margin-bottom:30px} .hospital_news li:nth-child(18) p.field span, .hospital_news li:nth-child(18) p.field span, .hospital_news li:nth-child(26) p.field span, .hospital_news li:nth-child(26) p.field span { display:block !important; background:#1c2a52; text-align:center; color:#fff; font-size:18px; line-height:40px; border-radius:20px; font-weight:700; font-family:'Pretendard';} .hospital_news li.ect p.field {display:none} .hospital_news li .line {width:100%; position:absolute; top:16px;height:2px; background:#0082c6; z-index:0} .hospital_news li p.title{text-align:left;margin:0;font-size:20px;font-weight:bold;padding:10px 15px 20px} .hospital_news li.full .contbox p{float:left;width:50%} .hospital_news li.full .contbox p.cont_txt {line-height:1.6} .hospital_news li .contbox p.cont_img {padding:0 0 0 0;text-align:center} .hospital_news li.half {width:49.5%; display:inline-block; vertical-align:top; padding-left:0;padding-right:25px;margin-bottom:50px} /*.hospital_news li.half:nth-child(odd) {padding-left:25px;padding-right:0}*/ .hospital_news li.half.rightNews {padding-left:25px;padding-right:0} .hospital_news li.half .contbox p.cont_img{float:none;width:100%;padding-bottom:0} .hospital_news li.half .contbox p.cont_txt {padding:0;line-height:1.6} .hospital_news li.half .contbox p.cont_txt b {color:#0082c6; text-align:left !important} .hospital_news li.half .contbox p.title {font-size:16px;text-align:center;padding-bottom:10px} .hospital_news li.half p.field {margin-bottom:30px;} .hospital_news li.ect .contbox {padding-top:10px;line-height:1.6;} .hospital_news li.ect .contbox p.cont_txt {padding:0;line-height:1.6} .hospital_news li.ect .contbox p.title {font-size:16px;text-align:center;padding-bottom:15px} .hospital_news li hr {border-top:1px dotted #000;} .hospital_news li .contbox b {text-align:center !important; width:100%; display:block; padding:0 0 15px;} .hospital_media {list-style:none;margin:0;padding:0;} .hospital_media:after {display:block;visibility:hidden;clear:both;content:""} .hospital_media li {position:relative;float:left;padding:0;margin-bottom:50px;width:50.0%;height:auto; padding:0 20px} .hospital_media li.thr {position:relative;float:left;padding:0;margin-bottom:50px;width:33%;height:auto; padding:0 5px} .hospital_media li img {width:100%; display:block} .field2 {font-size:13px;margin-bottom:0;vertical-align:bottom;width:31%;margin-bottom:10px} .field2 span { padding:0 ; display:inline-block; font-size:16px} .hospital_media td {letter-spacing:0;vertical-align:top;padding-bottom:5px} .hospital_media td.tv_cont {width:30%; width:100px} .hospital_media .cont_txt {margin-top:15px;min-height:124px} .hospital_media li.full {width:69%;clear:both;float:none;} .hospital_media li.full .row-fluid {width:50%;float:left;line-height:24px} .video_title {display:block !important; background:#1c2a52; text-align:center; color:#fff; font-size:18px; line-height:40px; border-radius:20px; font-weight:700; font-family:'Pretendard';} .gray-bg_news {background:#939598; } .newspaper {list-style:none;margin:0;padding:0;} .newspaper:after {display:block;visibility:hidden;clear:both;content:""} .newspaper li {width:100%;float:left;padding-right:25px;padding-left:0;margin:0;} .newspaper li:nth-child(2n) {padding-right:0;padding-left:25px} .newspaper table{width:100%;margin-bottom:20px} .newspaper td {border-bottom:1px solid #b38fc2;padding:8px 0 8px 8px;font-size:13px;vertical-align:top} .newspaper td.newspaper_name {width:21.5%;} .newspaper td.td-top {border-top:2px solid #b38fc2;} .newspaper td.td-bottom{border-bottom:2px solid #b38fc2;} .newspaper tr:nth-child(2n) {background:#f9f9f9} @media (min-width: 768px) and (max-width: 1200px) { .hospital_media li { width:50%; } .hospital_media li.thr {width:50%;} .hospital_media li.full {width:100%;clear:both;float:none;} .hospital_media li.full .row-fluid {width:50%;float:left;} } @media (max-width: 767px) { section.subPage .head_copy .title.headTop_img {margin-bottom:0 !important} .hospital_news li p.title{font-size:16px;letter-spacing:-0.05em} .hospital_news li.full .contbox p{width:100%} .hospital_news li.full .contbox p.cont_img {padding:0;} .hospital_news li.full .contbox p.cont_txt {padding:0;} .hospital_news li p.title {padding-bottom:10px} .hospital_news li.half {width:100%;padding:0 !important;height:auto !important} .hospital_news li.half .contbox p.title {padding:30px 0 10px} .hospital_news li.half .contbox p.cont_img {margin-bottom:0;padding-bottom:0} .hospital_news li.half:nth-child(2n) {padding:0} .hospital_news li.half.rightNews {padding:0} .hospital_news li.ect .contbox p.title {padding:10px 0 !important} .hospital_media li {width:100%;padding:0 !important;height:auto} .field2{width:100%;} /*.hospital_news li.half:nth-child(15), .hospital_news li.half:nth-child(13) { padding-right:0}*/ /*.hospital_news li.half:nth-child(14) { padding-left:0 !important;}*/ .newspaper li {width:100%;padding:0 !important;height:auto} .newspaper table {margin-bottom:0} .hospital_media li.full {width:100%;clear:both;float:none;} .hospital_media li.full .row-fluid {width:50%;float:left;} .hospital_media li.thr {width:100%;} .naum_table .impact_table td { text-align:center !important} .naum_bortop div.span1 { width: 48.717948717948715% !important; *width: 48.664757228587014% !important; float:left; margin-right:1%} } .hospital_img1 {margin-top:-10px} .hospital_img2{margin-top:-100px;padding:0 100px 25px 20px} .hospital_img3{padding:0 50px 0 30px } @media (min-width: 768px) and (max-width: 1200px) { .hospital_img2{margin-top:-80px;padding:0 0 25px 20px} .hospital_img3{padding:0 10px 0 30px } .padding-a{padding:30px 10px 0 10px} .padding-b{padding:0 0 0 20px} .padding-c {padding-left:20px;margin-top:-10px} } @media (max-width: 767px) { .hospital_img2{margin-top:-10px;padding:0} .hospital_img3{padding:0} .padding-a{padding:0;text-align:left} .padding-c {padding-left:0;margin-top:20px} .padding-b{padding:0} .padding-r {padding-left: 0rem; padding-right: 0rem; } .padding-ra{padding-left: 1.0rem; padding-right: 1.0rem; } } .hospital_img1 {margin-top:-10px} .hospital_img2{margin-top:-100px;padding:0 100px 25px 20px} .hospital_img3{padding:0 50px 0 30px } @media (min-width: 768px) and (max-width: 1200px) { .hospital_img2{margin-top:-80px;padding:0 0 25px 20px} .hospital_img3{padding:0 10px 0 30px } .padding-a{padding:30px 10px 0 10px} .padding-b{padding:0 0 0 20px} .padding-c {padding-left:20px;margin-top:-10px} } @media (max-width: 767px) { .hospital_img2{margin-top:-10px;padding:0} .hospital_img3{padding:0} .padding-a{padding:0;text-align:left} .padding-c {padding-left:0;margin-top:20px} .padding-b{padding:0} .padding-r {padding-left: 0rem; padding-right: 0rem; } .padding-ra{padding-left: 1.0rem; padding-right: 1.0rem; } } .workcont {margin-left:60px;border-left:1px solid #b38fc2;padding-top:50px} .title_img {margin-left:-15px;line-height:54px;margin-bottom:30px} .title_img span {background:#b38fc2;color:#fff;padding:10px 20px;border-radius:10px;line-height:54px} .title_img span strong{font-size:18px} .workcont .leftbox {padding-left:52px} .workcont .rightbox{padding-left:30px;border-left:1px solid #b38fc2;} .schbox {text-align:center} .schbox img{width:33%} @media (min-width: 768px) and (max-width: 1200px) { .workcont .leftbox {padding-left:40px} .workcont .rightbox{padding-left:20px} } @media (max-width: 767px) { .workcont {margin-left:0;padding-top:20px} .title_img {margin-left:-10px;line-height:30px;margin-bottom:10px} .title_img img {height:30px} .title_img span {padding:5px 10px;line-height:30px;font-size:14px;letter-spacing:-0.05em} .title_img span strong{font-size:14px} .workcont .leftbox {padding-left:20px} .workcont .rightbox{padding-left:20px;border-left:0;} .padding-d{padding-top:0} } .nanum2_title {margin-bottom:50px;text-align:center} .head_copy .title2 {font-size: 35px;font-weight: bold;font-family: 'Nanum Myeongjo', Arial, sans-serif !important;line-height: 1.3; margin:0 auto;display:inline-block;border:1px solid #b38fc2;padding:20px 40px;border-radius:20px} .head_copy .subtitle2 {text-align:center;display:inline-block;width:60%} .head_copy .title2 p.title {display:inline-block;clear:both;margin:0 !important;} .gotoTop {margin:0 ;padding-bottom:10px} .life-table {padding-left:50px;} .life-table table{width:100%} .life-table thead {border-bottom:2px solid #b38fc2;border-top:2px solid #b38fc2;} .life-table th, .life-table td {padding:4px 8px;text-align:left !important;vertical-align:middle !important;line-height:1.6} .life-table th {border-right:1px solid #b38fc2;} .life-table td {border-left:1px solid #b38fc2;border-bottom:1px solid #b38fc2;} .life-table thead th{color:#b38fc2} .life-table tbody{border-bottom:2px solid #b38fc2;} .life-table tbody th{border-bottom:1px solid #b38fc2;background:#fcf7f5} .life-table tbody td.bg{background:#fcf7f5} .life-table th:last-child {border-right:0} @media (min-width: 768px) and (max-width: 1200px) { .life-table {padding-left:25px;} } @media (max-width: 767px) { .life-table {padding-left:0;} } /* font-weight */ .text_R { font-weight: 400 !important; } /* font-color */ .text-Black { color: #333 !important; } .text-gray60 { color: #666 !important; } /* line-height */ .text-line160 { line-height: 160% !important; } /* border_style*/ .border-right { border-right: 1px dotted #1d1d1b; box-sizing: border-box; } .border-right2 { border-right: 0; box-sizing: border-box; } .border-top { border-top: 1px dotted #1d1d1b; box-sizing: border-box; } .border-bottom { border-bottom: 1px dotted #1d1d1b; box-sizing: border-box; } /*.border-bottom2 { border-bottom: 4px solid #f5f5f5; box-sizing: border-box; }*/ /* padding_style**/ .span6.border-right { padding-right: 2.564102564%; } .span8.border-right { padding-right: 2.564102564%; } .span3.border-right2 { padding-right: 2.564102564%; } .span7.border-right2 { padding-right: 2.564102564%; } .top_small { margin-top: 15px; } .top_mid { margin-top: 35px; } /* head_decoType */ .head_decoType1 { position: relative; display: inline-block; width: auto; padding: 6px 22px; margin: 0 0 12px 0; background: #b38fc2; text-align: center; color: #fff; font-size: 14px; border-radius: 99px; } .head_decoType2 { position: relative; display: inline-block; width: auto; padding: 6px 20px 6px 46px; background: none; text-align: left; color: #fff; color: #b38fc2 !important;line-height:21px; font-weight: bold; border: 1px solid #b38fc2; border-radius: 99px; word-break: keep-all !important; -ms-word-break: keep-all !important; -webkit-word-break: keep-all !important; -moz-word-break: keep-all !important;} .pointQ { display: inline-block; width: 21px; height: 21px; line-height: 22px; padding: 0px; margin: 0 6px 0 0; background: #b38fc2; text-align: center; color: #fff; font-size: 14px; font-weight: bold; border-radius: 99px; } .pointA { display: inline-block; width: 21px; height: 21px; line-height: 22px; padding: 0px; margin: 0 6px 0 0; background: #9fa0a0; text-align: center; color: #fff; font-size: 14px; font-weight: bold; border-radius: 99px; } .head_decoType2 .pointQ { position: absolute; left: 20px; top: 6px; } .r-photo img { max-width: 278px; } /* menu3 */ .contantInner { position: relative; width: 100%; padding: 50px 20px 0; box-sizing: border-box; } section.subPage .contantInner .head_copy { position: relative; padding: 38px 50px 20px; background: #fff; border-radius: 30px 30px 0 0; word-break: keep-all !important; -ms-word-break: keep-all !important; -webkit-word-break: keep-all !important; -moz-word-break: keep-all !important; } section.subPage .contantInner .headPoint { position: absolute; left: 50%; top: -40px; margin-left: -40px; width: 80px; height: 80px; line-height: 80px; background: #fff; border-radius: 99px; } section.subPage .contantInner .title.gothic { margin-bottom: 8px !important; word-break: keep-all !important; -ms-word-break: keep-all !important; -webkit-word-break: keep-all !important; -moz-word-break: keep-all !important; } section.subPage .contantInner .h4_wrap { padding: 38px 50px; background: #fff;} section.subPage .contantInner .lastBox { border-radius: 0 0 30px 30px; padding-bottom: 50px; } /* ////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////// */ /* ////////////////////////////////////////////////////////// */ .titleName {margin:0 auto 0px;display:inline-block;padding:0.5rem 1rem;border:2px solid #f6a9c0;background:#fff} .media-profile {margin-top:-25px} .life_imgbox {padding-left:2rem;padding-right:2rem;} @media (min-width: 768px) and (max-width: 1199px) { .r-photo img { max-width:100%; } .img50max {max-width:100%} } @media (max-width: 767px) { .border-right { border: 0; } .span6.border-right {position: 0; } .span3.border-right2 {position: 0; } .head_decoType2 { margin-top: 20px; } section.subPage .contantInner .head_copy {padding: 38px 25px 20px;} section.subPage .contantInner .h4_wrap { padding: 38px 25px; } .media-profile {padding-top:40px} .img50max {max-width:100%} .life_imgbox {padding:0} } /* 2020-07-11 */ .answerBox { position: relative; background: #fffdee; border: 1px solid #b38fc2; padding: 30px 30px 15px; border-radius: 20px; box-sizing: border-box; margin: -30px auto 40px;} .submenu {width:100%;margin:0 0 5%;padding:0;text-align:center;list-style:none} .submenu li {width:30%;text-align:center;display:inline-block;margin:0 10px;} .submenu li a {display:inline-block;color:#606060;font-size:16px;text-decoration:none;border:1px solid #d7d7d7;padding:15px;width:100%} .submenu li a:hover{color:#1c2a52;border-color: #1c2a52;} .submenu li a.on{color:#fff;border-color: #1c2a52;background:#1c2a52;font-weight:bold} @media (max-width: 991px) { .submenu {margin:0 0 10%;} .submenu li {width:auto;max-width:50%} .submenu li a{font-size:14px;padding:6px 15px} } @media (max-width: 767px) { .answerBox { padding: 40px 20px 30px; } } @media (max-width: 480px) { .impact_table2 td{font-size:0.95em; padding:6px 0 6px 0px !important;} } section.subPage .head_copy .gothic { font-family:'Pretendard' !important;} section.subPage .head_copy .title.gothic { font-family:'Pretendard' !important;} section.subPage .head_copy .title, section.subPage .head_copy .title strong { font-family:'Pretendard' !important;} section.subPage .head_copy .title.newstop { font-family:'GmarketSansLight'!important; font-size:35px; margin-bottom:15px} section.subPage .head_copy .title.newstop strong { font-family:'GmarketSansMedium' !important; } section.subPage .head_copy .newstopVol { font-size:24px; font-family:'GmarketSansMedium' !important;} .do_left { padding:10.0em 3.0em 8.0em 10.0em; background:#eee8e3;} .do_right { padding:5.0em 0 0 8.0em;} @media (max-width: 970px) { .do_left { padding:2.0em 2.0em 2.0em 2.0em;} .do_right { padding:0 0 0 3.0em;} } @media (max-width: 767px) { .do_left { padding:100px 200px;} .do_right { padding:100px 100px;} .do_table { padding:0 15px} } @media (max-width: 600px) { .do_left { padding:50px;} .do_right { padding:30px;} }